Adobe Dreamweaver CC Classroom in a book / Adobe Dreamweaver CC Официальный учебный курс (+ CD-ROM) [2014, PDF, RUS]

ЧТО НАХОДИТСЯ НА ДИСКЕ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
НАЧАЛО РАБОТЫ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
Об официальном учебном курсе Adobe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .12
Сокращенные URL-адреса . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .12
Предварительные требования . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .13
Установка программы Adobe Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .13
Копирование файлов официального учебного курса. . . . . . . . . . . . . . . . . . . . . . . .13
Рекомендуемый порядок уроков. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .14
Быстрый старт . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .14
Настройка рабочего пространства. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .16
Инструкции для операционных систем Windows и OS X. . . . . . . . . . . . . . . . . . . . . .16
Поиск информации о программе Dreamweaver. . . . . . . . . . . . . . . . . . . . . . . . . . . . .17
Проверка обновлений. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .17
Дополнительные ресурсы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .17
Сертификация Adobe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .18
1 НАСТРОЙКА РАБОЧЕГО ПРОСТРАНСТВА
Экскурсия по рабочему пространству . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .22
Переключение и разделение представлений . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .23
Представление Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .23
Представление Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .24
Представление Split. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .24
Представление Live . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .25
Режим Live Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .26
Режим Inspect . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .26
Работа с панелями . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .27
Сворачивание панелей. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .28
Открепление панелей . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .29
Перетаскивание панелей. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .29
Группировка, состыковка и закрепление панелей . . . . . . . . . . . . . . . . . . . . . . .30
Выбор рабочего пространства . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .31
Настройка панелей инструментов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .32
Персонализация рабочего пространства . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .33
Назначение пользовательских сочетаний клавиш. . . . . . . . . . . . . . . . . . . . . . . . . .34
Инспектор Property . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .36
Вкладка HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .36
Вкладка CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .36
Свойства изображения. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .36
Свойства таблицы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .37
Панель CSS Designer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .37
Исследуйте, экспериментируйте, учитесь . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .39
Контрольные вопросы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .40
6 ОГЛАВЛЕНИЕ
2 ОСНОВЫ HTML
Что такое HTML? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .44
История HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .44
Верстка HTML-кода . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .46
Синтаксис HTML-кода . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .46
Вставка HTML-кода . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .47
Форматирование текста с помощью HTML. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .48
Применение встроенного форматирования . . . . . . . . . . . . . . . . . . . . . . . . . . . .49
Добавление структуры . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .50
Верстка HTML-кода в программе Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . .51
Часто используемые элементы языка HTML 4. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .55
HTML-элементы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .56
Символьные сущности HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .58
Версия HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .58
Что нового в версии HTML5. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .59
HTML5-элементы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .59
Семантический веб-дизайн . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .60
Новые методы и технологии . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .61
Контрольные вопросы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .63
3 ОСНОВЫ CSS
Что такое CSS? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .66
Сравнение HTML- и CSS-форматирования . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .67
HTML по умолчанию . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .69
HTML5 по умолчанию? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .70
Блочная модель CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .71
Множества, классы и идентификаторы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .73
Применение форматирования к множеству элементов . . . . . . . . . . . . . . . . . . . . .73
Создание классов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .74
Создание идентификаторов. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .74
Форматирование текста . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .75
Концепция каскадирования . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .77
Концепция наследования . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .79
Концепция потомков. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .82
Концепция специфичности . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .87
Навигатор по коду . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .89
Панель CSS Designer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .92
Форматирование объектов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .95
Ширина. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .95
Высота . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100
Поля и отступы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104
Позиционирование . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107
Границы и фоны . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
Обзор и поддержка CSS3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111
Функции и эффекты CSS3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112
Дополнительная информация по языку CSS . . . . . . . . . . . . . . . . . . . . . . . . . . 113
Контрольные вопросы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115

4 СОЗДАНИЕ МАКЕТА СТРАНИЦЫ
Основы веб-дизайна . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
Какова цель создания сайта? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
Кем будут посетители сайта? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
Как посетители попадут на сайт? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119
Сценарий . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121
Каркасные модели и эскизы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121
Создание эскизов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121
Создание дизайна страницы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122
Создание каркасных моделей. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123
Определение сайта в программе Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . 125
Использование окна Welcome screen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127
Начало работы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128
Изменение существующего CSS-макета . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129
Добавление фонового изображения в верхний колонтитул. . . . . . . . . . . . . . . . 134
Вставка новых компонентов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139
Вставка компонентов навигации . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143
Выравнивание элементов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144
Изменение ширины страницы и цвета ее фона. . . . . . . . . . . . . . . . . . . . . . . . . . . 146
Изменение существующего контента и форматирования. . . . . . . . . . . . . . . . . . 149
Вставка заполнителя изображения . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154
Вставка заполнителя текста . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155
Изменение нижнего колонтитула . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156
Проверка веб-страниц . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157
Контрольные вопросы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159
5 РАБОТА С КАСКАДНЫМИ ТАБЛИЦАМИ СТИЛЕЙ
Начало работы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162
Работа с панелью CSS Designer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163
Работа со шрифтами . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167
Настройка свойства font-family. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171
Использование сервиса Edge Web Fonts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176
Создание стека шрифтов с помощью веб-шрифтов. . . . . . . . . . . . . . . . . . . . 179
Изменение размера шрифта . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181
Работа с фоновыми изображениями . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182
Управление селекторами классов, идентификаторов и потомков . . . . . . . . . . 184
Создание пользовательских классов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185
Управление пользовательскими идентификаторами . . . . . . . . . . . . . . . . . . 187
Различия классов и идентификаторов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190
Создание интерактивного меню . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192
Устранение конфликтов CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193
Создание селекторов потомков . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195
Создание динамических гиперссылок с помощью CSS. . . . . . . . . . . . . . . . . 197
Создание эффекта замещающей гиперссылки. . . . . . . . . . . . . . . . . . . . . . . . 199
Изменение поведения существующей гиперссылки . . . . . . . . . . . . . . . . . . . 201
Добавление меню привлекательности . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202
Создание псевдоколонок . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204
Последние штрихи . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206
Экспорт правил во внешнюю таблицу стилей . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207
Создание таблиц стилей для других типов носителей . . . . . . . . . . . . . . . . . . . . . 209
Создание таблицы стилей для печати . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210
Сокрытие нежелательных элементов страницы . . . . . . . . . . . . . . . . . . . . . . . 211
Удаление ненужных стилей . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214
Контрольные вопросы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217
8 ОГЛАВЛЕНИЕ
6 РАБОТА С ШАБЛОНАМИ
Начало работы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220
Создание шаблона из существующего макета . . . . . . . . . . . . . . . . . . . . . . . . . . . 221
Вставка редактируемых областей . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222
Создание дочерних страниц. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224
Обновление шаблона . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 228
Использование элементов библиотеки. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231
Создание элемента библиотеки . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231
Обновление элементов библиотеки . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235
Использование включений на стороне сервера. . . . . . . . . . . . . . . . . . . . . . . . . . 237
Создание серверных включений . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238
Вставка серверных включений. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239
Обновление серверных включений . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242
Контрольные вопросы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245
7 СОЗДАНИЕ ТЕКСТА, СПИСКОВ И ТАБЛИЦ
Начало работы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 248
Создание и форматирование текста . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250
Импорт текста . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250
Создание семантических структур . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253
Создание заголовков . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 254
Создание списков . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 256
Создание текста с отступом . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 259
Создание и форматирование таблиц. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264
Создание таблиц . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265
Копирование и вставка таблиц. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 267
Форматирование таблиц с помощью правил CSS . . . . . . . . . . . . . . . . . . . . . 268
Форматирование ячеек таблицы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270
Управление шириной столбцов. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272
Вставка таблиц из других источников . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275
Настройка вертикального выравнивания . . . . . . . . . . . . . . . . . . . . . . . . . . . . 277
Добавление и форматирование описания таблицы. . . . . . . . . . . . . . . . . . . . 278
Проверка правописания веб-контента . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 280
Поиск и замена текста. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 281
Контрольные вопросы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 286
8 УПРАВЛЕНИЕ ИЗОБРАЖЕНИЯМИ
Основные сведения о веб-графике . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 290
Векторная графика . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 290
Растровая графика . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 290
Разрешение. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 291
Размерность . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 292
Цвет . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 293
Форматы растровых изображений . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 294
Начало работы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 296
Вставка изображений . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 297
Настройка расположения изображений с помощью CSS . . . . . . . . . . . . . . . . . . 299
Работа с панелью Insert . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 301
Использование приложения Adobe Bridge для добавления
изображений . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 302
Добавление файлов, неподдерживаемых во Всемирной паутине . . . . . . . . . . 305
Работа со смарт-объектами Photoshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 309
Копирование и вставка изображений из приложений Fireworks
и Photoshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 311
Вставка изображений путем перетаскивания. . . . . . . . . . . . . . . . . . . . . . . . . . . . 315
Оптимизация изображений с помощью инспектора Property . . . . . . . . . . . . . . 316
Дополнительное упражнение: завершение страницы
с новостями . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 319
Контрольные вопросы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 322
9 СОЗДАНИЕ НАВИГАЦИИ
Основные сведения о гиперссылках . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 326
Внешние и внутренние гиперссылки . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 326
Относительные и абсолютные гиперссылки . . . . . . . . . . . . . . . . . . . . . . . . . . 326
Начало работы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 327
Создание внутренних ссылок. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 330
Создание изображений-ссылок . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 334
Создание внешних ссылок . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 335
Создание ссылок на адреса электронной почты . . . . . . . . . . . . . . . . . . . . . . . . . . 337
Создание ссылок на элементы страницы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 339
Создание ссылки с помощью идентификатора . . . . . . . . . . . . . . . . . . . . . . . . 341
Добавление идентификатора в HTML-таблицу . . . . . . . . . . . . . . . . . . . . . . . . 342
Переходы с помощью ссылок, основанных на идентификаторах . . . . . . . . . . . 343
Проверка страницы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 344
Контрольные вопросы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 346
10 ОБЕСПЕЧЕНИЕ ИНТЕРАКТИВНОСТИ
Поведения Dreamweaver. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 350
Начало работы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 352
Работа с поведениями программы Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . 353
Применение поведения . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 356
Применение поведения Swap Image Restore. . . . . . . . . . . . . . . . . . . . . . . . . . 358
Удаление примененных поведений . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 359
Добавление поведений к гиперссылкам . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 359
Размещение виджетов jQuery Accordion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 362
Добавление виджета jQuery Accordion на страницу . . . . . . . . . . . . . . . . . . . . 363
Настройка виджета jQuery Accordion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 365
Контрольные вопросы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 372
11 ДОБАВЛЕНИЕ АНИМАЦИИ И ВИДЕОРОЛИКОВ НА ВЕБ-СТРАНИЦУ
Знакомство с анимацией и видеороликами во Всемирной паутине . . . . . . . . 376
Начало работы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 377
Добавление веб-анимации на страницу . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 379
Добавление видеоконтента на страницу . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 383
Свойства HTML5-элемента video . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 388
Контрольные вопросы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 391
12 РАБОТА С ФОРМАМИ
Начало работы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 394
Веб-формы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 395
Элементы формы HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 396
Отправка данных формы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 397
Добавление формы на страницу. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 397
Добавление текстовых элементов формы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 399
Обеспечение доступности форм . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 399
Создание текстовых полей. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 400
Настройка атрибутов элементов формы. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 403
Метки элементов формы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 404
10 ОГЛАВЛЕНИЕ
Добавление поля для ввода адреса электронной почты. . . . . . . . . . . . . . . . 405
Создание набора элементов формы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 406
Добавление флажков . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 407
Добавление переключателей . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 410
Добавление текстовых областей . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 412
Работа со списками . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 414
Добавление кнопки отправки данных . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 417
Определение действий с формой . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 419
Отправка данных формы по электронной почте . . . . . . . . . . . . . . . . . . . . . . . . . . 421
Стилизация форм . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 425
Дополнительная информация о формах . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 428
Контрольные вопросы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 429
13 ПУБЛИКАЦИЯ ВО ВСЕМИРНОЙ ПАУТИНЕ
Удаленный сайт . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 432
Настройка удаленного сайта FTP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 433
Установка удаленного сайта на локальный или сетевой веб-сервер. . . . . 438
Маскирование папок и файлов. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 440
Завершение работы. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 443
Создание главной страницы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 443
Обновление ссылок . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 445
Публикация сайта во Всемирной паутине. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 446
Синхронизация локального и удаленного сайтов . . . . . . . . . . . . . . . . . . . . . . . . . 449
Контрольные вопросы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 452
14 ВЕБ-ДИЗАЙН ДЛЯ МОБИЛЬНЫХ УСТРОЙСТВ
Начало работы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 456
Веб-дизайн для мобильных устройств . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 457
Тип носителя . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 458
Медиазапросы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 459
Медиазапросы для смартфонов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 461
Добавление правил к медиазапросу . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 465
Адаптация CSS-навигации к мобильным средам . . . . . . . . . . . . . . . . . . . . . . . . . 470
Форматирование основного контента. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 472
Тестирование медиазапросов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 473
Отзывчивый дизайн . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 476
Адаптация компонентов страницы. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 479
Адаптация HTML-таблицы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 481
Адаптация виджета jQuery Accordion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 483
Создание таблиц стилей для планшетов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 484
Программа Edge Inspect . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 486
Дополнительная информация . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 488
Контрольные вопросы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 489
ПРИЛОЖЕНИЕ. СОКРАЩЕННЫЕ URL-АДРЕСА . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .490
ПРЕДМЕТНЫЙ УКАЗАТЕЛЬ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 491