Adobe Dreamweaver. Справка и учебные материалы. Официальное руководство пользователя Dreamweaver CC

497 Pages·27.09 MB·Russian

by  Райтман М.А.

Adobe®
Dreamweaver®CC
classroom in a book®
The official training workbook from Adobe Systems
9780321919410_ADreamweaverCIB_Title.indd 1 6/18/13 10:22 PM
ÓÄÊ 004.45
ÁÁÊ 32.973-018.2
À 31
Authorized translation from the English language edition, entitled ADOBE DREAMWEAVER CC
CLASSROOM IN A BOOK; ISBN 0321919416; by the ADOBE CREATIVE TEAM; published by Pearson Education,
Inc, publishing as Adobe Press. Copyright © 2013 by Adobe Systems, Inc. All rights reserved. No part of this book
may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying,
recording or by any information storage retrieval system, without permission from Pearson Education, Inc.
Âñå ïðàâà çàùèùåíû. Íèêàêàÿ ÷àñòü íàñòîÿùåãî èçäàíèÿ íè â êàêèõ öåëÿõ íå ìîæåò áûòü âîñïðîèçâåäåíà
â êàêîé áû òî íè áûëî ôîðìå è êàêèìè áû òî íè áûëî ñðåäñòâàìè, áóäü òî ýëåêòðîííûå èëè ìåõàíè÷åñêèå,
âêëþ÷àÿ ôîòîêîïèðîâàíèå è çàïèñü íà ìàãíèòíûé íîñèòåëü, åñëè íà ýòî íåò ïèñüìåííîãî
ðàçðåøåíèÿ ïðàâîîáëàäàòåëÿ Pearson Education, Inc.
Adobe Dreamweaver CC : Îôèöèàëüíûé ó÷åáíûé êóðñ ; [ïåð. ñ
À 31 àíãë. Ì. À. Ðàéòìàíà]. — Ìîñêâà : Ýêñìî, 2014. — 496 ñ. — (Îôèöè-
àëüíûé ó÷åáíûé êóðñ).
ISBN 978-5-699-69655-0
Ïåðåä âàìè îôèöèàëüíûé ó÷åáíûé êóðñ ïî ïðîãðàììå Adobe Dreamweaver CC,
âõîäÿùèé â çíàìåíèòóþ ñåðèþ «Classroom in a Book». Ýòà ïîëíîöâåòíàÿ êíèãà ïðåä-
íàçíà÷åíà êàê íà÷èíàþùèì, òàê è îïûòíûì ïîëüçîâàòåëÿì, æåëàþùèì ïîëó÷èòü îò
Adobe Dreamweaver ìàêñèìóì âîçìîæíîãî. Ñåðèè ïðîñòûõ, ïðåêðàñíî ïîäîáðàííûõ
ïîøàãîâûõ èíñòðóêöèé ïîçâîëÿò âàì íà ïðàêòèêå îñâîèòü âñå èíñòðóìåíòû Adobe
Dreamweaver CC.
Íà äèñêå ïðåäñòàâëåíû ôàéëû äëÿ óðîêîâ. Ñ èõ ïîìîùüþ âû áûñòðî è ëåãêî ñòàíå-
òå íàñòîÿùèì ìàñòåðîì ðàáîòû ñ Adobe Dreamweaver CC.
ÓÄÊ 004.45
ÁÁÊ 32.973-018.2
7.Profaq
© Ðàéòìàí Ì.À., ïåðåâîä íà ðóññêèé ÿçûê, 2014
ISBN 978-5-699-69655-0 © Îôîðìëåíèå. ÎÎÎ «Èçäàòåëüñòâî «Ýêñìî», 2014

ОГЛАВЛЕНИЕ
ЧТО НАХОДИТСЯ НА ДИСКЕ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .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
ADOBE DREAMWEAVER CC. ОФИЦИАЛЬНЫЙ УЧЕБНЫЙ КУРС 5
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
6 ОГЛАВЛЕНИЕ
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
ADOBE DREAMWEAVER CC. ОФИЦИАЛЬНЫЙ УЧЕБНЫЙ КУРС 7
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
8 ОГЛАВЛЕНИЕ
Вставка изображений путем перетаскивания. . . . . . . . . . . . . . . . . . . . . . . . . . . . 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
ADOBE DREAMWEAVER CC. ОФИЦИАЛЬНЫЙ УЧЕБНЫЙ КУРС 9
Добавление поля для ввода адреса электронной почты. . . . . . . . . . . . . . . . 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
10 ОГЛАВЛЕНИЕ