HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов
Практическое руководство по созданию современных Web-сайтов, соответствующих концепции Web 2.0. Описаны языки HTML 5 и CSS 3, применяемые, соответственно, для создания содержимого и представления Web-страниц. Даны принципы Web-программирования на языке JavaScript с использованием библиотеки Ext Core. Рассказано о создании интерактивных Web-страниц, приведены примеры интерактивных элементов, позволяющие сделать Web-страницы удобнее для посетителя. Раскрыты вопросы реализации подгружаемого и генерируемого содержимого, семантической разметки, применения баз данных для формирования Web-страниц. Показаны способы расширения функциональности Web-сайтов с использованием Web-форм, элементов управления, свободно позиционируемых элементов и программного рисования средствами HTML 5.
- Введение
- Что грядет нового в Web-дизайне
- О чем эта книга
- Какие программы используются в этой книге
- Типографские соглашения
- Благодарности
- Введение в современный Web-дизайн. Web 2.0. Создание Web-страниц
- Современный Web-дизайн. Концепция Web 2.0
- Что требуется от современного Web-сайта
- Концепция Web 2.0
- Интернет: как все это работает
- Клиенты и серверы Интернета. Интернет-адреса
- Web-сайты и Web-серверы
- Основные принципы создания Web-страниц. Язык HTML 5
- Язык HTML и его теги
- Вложенность тегов
- Секции Web-страницы
- Метаданные и тип Web-страницы
- Атрибуты HTML-тегов
- Программы, которыми мы будем пользоваться
- Web-обозреватель
- Web-сервер
- Что дальше?1
- Структурирование текста
- Абзацы
- Заголовки
- Списки
- Цитаты
- Текст фиксированного формата
- Горизонтальные линии
- Адреса
- Комментарии
- Что дальше?2
- Оформление текста
- Выделение фрагментов текста
- Разрыв строк
- Вставка недопустимых символов. Литералы
- Что дальше?3
- Графика и мультимедиа
- Внедренные элементы Web-страниц
- Графика
- Форматы интернет-графики
- Вставка графических изображений
- Мультимедиа
- Форматы файлов и форматы кодирования
- Типы MIME
- Вставка аудиоролика
- Вставка видеоролика
- Дополнительные возможности тегов "AUDIO" и "VIDEO"
- Что дальше?4
- Таблицы
- Создание таблиц
- Заголовок и секции таблицы
- Объединение ячеек таблиц
- Что дальше?5
- Средства навигации
- Текстовые гиперссылки
- Создание гиперссылок
- Интернет-адреса в WWW
- Почтовые гиперссылки
- Дополнительные возможности гиперссылок
- Графические гиперссылки
- Изображения-гиперссылки
- Изображения-карты
- Полоса навигации
- Якоря
- Что дальше?6
- Введение в стили CSS
- Понятие о стилях CSS
- Создание стилей CSS
- Таблицы стилей
- Правила каскадности и приоритет стилей
- Важные атрибуты стилей
- Какие стили в каких случаях применять
- Комментарии CSS
- Что дальше?7
- Параметры шрифта и фона. Контейнеры
- Параметры шрифта
- Параметры, управляющие разрывом строк
- Параметры вертикального выравнивания
- Параметры тени у текста
- Параметры фона
- Контейнеры. Встроенные контейнеры
- Представление для нашего Web-сайта, часть 1
- Что дальше?8
- Параметры абзацев, списков и отображения
- Параметры вывода текста
- Параметры списков
- Параметры отображения
- Представление для нашего Web-сайта, часть 2
- Создание полосы навигации
- Параметры курсора
- Что дальше?9
- Контейнерный Web-дизайн
- Блочные контейнеры
- Основы контейнерного Web-дизайна
- Старые разновидности Web-дизайна и их критика
- Сущность контейнерного Web-дизайна
- Представление для нашего Web-сайта, часть 3
- Стили, задающие параметры контейнеров
- Параметры размеров
- Параметры размещения. Плавающие контейнеры
- Представление для нашего Web-сайта, часть 4
- Параметры переполнения. Контейнеры с прокруткой
- Представление для нашего Web-сайта, часть 5
- Что дальше?10
- Отступы, рамки и выделение
- Параметры отступов
- Параметры рамки
- Представление для нашего Web-сайта, часть 6
- Полная полоса навигации
- Параметры выделения
- Что дальше?11
- Параметры таблиц
- Параметры выравнивания
- Параметры отступов и рамок
- Параметры размеров
- Прочие параметры
- Представление для нашего Web-сайта, часть 7
- Что дальше?12
- Специальные селекторы
- Комбинаторы
- Селекторы по атрибутам тега
- Псевдоэлементы
- Псевдоклассы
- Псевдоклассы гиперссылок
- Структурные псевдоклассы
- Псевдоклассы
- Представление для нашего Web-сайта, часть 8
- Что дальше?13
- Введение в Web-программирование. Язык JavaScript
- Примеры Web-сценариев
- Простейший Web-сценарий
- Более сложный Web-сценарий
- Как Web-сценарии помещаются в Web-страницу
- Язык программирования JavaScript
- Основные понятия JavaScript
- Типы данных JavaScript
- Переменные
- Именование переменных
- Объявление переменных
- Операторы
- Арифметические операторы
- Оператор объединения строк
- Операторы присваивания
- Операторы сравнения
- Логические операторы
- Оператор получения типа typeof
- Совместимость и преобразование типов данных
- Приоритет операторов
- Сложные выражения JavaScript
- Блоки
- Условные выражения
- Условный оператор?
- Выражения выбора
- Циклы
- Цикл со счетчиком
- Цикл с постусловием
- Цикл с предусловием
- Прерывание и перезапуск цикла
- Функции
- Объявление функций
- Функции и переменные. Локальные переменные
- Вызов функций
- Присваивание функций. Функциональный тип данных
- Массивы
- Ссылки
- Объекты
- Понятия объекта и экземпляра объекта
- Получение экземпляра объекта
- Работа с экземпляром объекта
- Встроенные объекты языка JavaScript
- Объект Object и использование его экземпляров
- Объекты Web-обозревателя. Объектная модель документа DOM
- Свойства и методы экземпляра объекта
- Правила написания выражений
- Комментарии JavaScript
- Что дальше?14
- Библиотека Ext Core и объекты Web-обозревателя
- Библиотека Ext Core
- Зачем нужна библиотека Ext Core
- Использование библиотеки Ext Core
- Ключевые объекты библиотеки Ext Core
- Доступ к нужному элементу Web-страницы
- Доступ сразу к нескольким элементам Web-страницы
- Доступ к родительскому, дочерним и соседним элементам Web-страницы
- Получение и задание размеров и местоположения элемента Web-страницы
- Получение размеров Web-страницы и клиентской области окна Web-обозревателя
- Получение и задание значений атрибутов тега
- Управление привязкой стилевых классов
- Получение и задание значений атрибутов стиля
- Управление видимостью элементов Web-страницы
- Добавление и удаление элементов Web-страницы
- Обработка событий
- Понятие события и его обработки
- События объекта Element
- Привязка и удаление обработчиков событий
- Всплытие и действие по умолчанию
- Получение сведений о событии. Объект EventObject
- Объект CompositeElementLite
- Объекты Web-обозревателя
- Что дальше?15
- Создание интерактивных Web-страниц
- Управление размерами блочных контейнеров
- Выделение пункта полосы навигации при наведении на него курсора мыши
- Переход на целевую Web-страницу при щелчке на пункте полосы навигации
- Скрытие и открытие вложенных списков
- Выделение пункта полосы навигации, соответствующего открытой в данный момент Web-странице
- Скрытие и открытие текста примеров
- Что дальше?16
- Подгружаемое содержимое
- Монолитные и блочные Web-страницы
- Подгрузка содержимого Web-страниц
- Реализация подгрузки содержимого
- Что дальше?17
- Генерируемое содержимое
- Введение в генерируемое содержимое. Базы данных
- Реализация генерируемого содержимого
- Создание базы данных
- Генерирование полосы навигации
- Сортировка базы данных
- Что дальше?18
- Семантическая разметка данных
- Введение в семантическую разметку данных
- Реализация семантической разметки средствами JavaScript
- Создание раздела "См. также"
- Что дальше?19
- Web-формы и элементы управления
- Web-формы и элементы управления HTML
- Назначение Web-форм и элементов управления. Серверные приложения
- Создание Web-форм и элементов управления
- Создание Web-форм
- Создание элементов управления
- Поле ввода
- Поле ввода пароля
- Поле ввода значения для поиска
- Область редактирования
- Кнопка
- Флажок
- Переключатель
- Список, обычный или раскрывающийся
- Надпись
- Группа
- Прочие элементы управления
- Специальные селекторы CSS, предназначенные для работы с элементами управления
- Работа с элементами управления
- Свойства и методы объекта HTML Element, применяемые для работы с элементами управления
- Свойства и методы объекта Element, применяемые для работы с элементами управления
- События элементов управления
- Реализация поиска на Web-сайте
- Подготовка базы данных
- Создание Web-формы
- Написание Web-сценария, выполняющего поиск
- Что дальше?20
- Свободно позиционируемые элементы Web-страницы
- Свободно позиционируемые контейнеры
- Понятие свободно позиционируемого элемента Web-страницы
- Создание свободно позиционируемых элементов
- Средства библиотеки Ext Core для управления свободно позиционируемыми элементами
- Реализация усовершенствованного поиска
- Создание контейнера с Web-формой поиска
- Написание Web-сценария, выполняющего поиск
- Что дальше?21
- Программируемая графика
- Канва
- Контекст рисования
- Рисование простейших фигур
- Задание цвета, уровня прозрачности и толщины линий
- Рисование сложных фигур
- Как рисуются сложные контуры
- Перо. Перемещение пера
- Прямые линии
- Дуги
- Кривые Безье
- Прямоугольники
- Задание стиля линий
- Вывод текста
- Использование сложных цветов
- Линейный градиентный цвет
- Радиальный градиентный цвет
- Графический цвет
- Вывод внешних изображений
- Создание тени у рисуемой графики
- Преобразования системы координат
- Сохранение и загрузка состояния
- Перемещение начала координат канвы
- Поворот системы координат
- Изменение масштаба системы координат
- Управление наложением графики
- Создание маски
- Создание графического логотипа Web-сайта
- Заключение
- Расширения CSS
- Многоцветные рамки
- Рамки со скругленными углами
- Выделение со скругленными углами
- Многоколоночная верстка
- Преобразования CSS
|