Оглавление
Введение |
1 |
Как работать с книгой |
1 |
Сайт поддержки |
2 |
Благодарности |
2 |
Глава 1. Основные понятия Web-дизайна |
3 |
Понятие Web-дизайна |
3 |
Web-страница, Web-сайт |
4 |
Цели создания Web-ресурса |
4 |
Целевая аудитория сайта |
5 |
Логическая структура сайта |
5 |
Карта сайта |
6 |
Физическая структура сайта |
8 |
Графический интерфейс пользователя |
9 |
Юзабилити — удобство пользования сайтом |
9 |
Глава 2. Базовые технологии Web-дизайна |
11 |
World Wide Web (Web) |
11 |
Технология гипертекста — язык HTML |
12 |
Каскадные таблицы стилей — CSS |
13 |
HTML+CSS |
14 |
Кроссбраузерность |
14 |
Кодировки |
15 |
Заключение |
16 |
Глава 3. Основы работы с программой |
17 |
Средства для создания Web-страниц |
17 |
Стартовая страница |
18 |
Установка базовых настроек |
19 |
Рабочая среда программы Dreamweaver |
20 |
Панель Insert |
21 |
Панель Document |
22 |
Окно документа |
23 |
Строка состояния |
23 |
Панель свойств |
25 |
Группы панелей |
26 |
Панель History |
27 |
Правила именования файлов и каталогов |
28 |
Панель Files |
28 |
Меню Files |
31 |
Сохранение нового документа |
32 |
Структура HTML-файла |
33 |
Указание стандарта разработки |
33 |
Теги HTML-документа |
35 |
Заголовок документа |
37 |
Глава 4. Средства для работы с HTML–кодом |
41 |
Выделение и просмотр элементов в окне документа |
41 |
Установка настроек просмотра |
42 |
Особенности форматирования HTML-документа |
44 |
Отображение невидимых символов |
44 |
Дополнительные возможности форматирования |
45 |
HTML-сущности |
45 |
Вставка тегов с помощью окна Tag Chooser (Выбор тега) |
47 |
Определение или изменение атрибутов тега |
49 |
Использование Coding toolbar (Панели кодирования) |
50 |
Использование селектора тегов |
52 |
Подсказки при наборе кода |
53 |
Предварительный просмотр в браузере |
54 |
Глава 5. Форматирование текста |
57 |
Вставка текста на Web-страницу |
57 |
Текстовые строки и блоки |
58 |
Типы элементов HTML-разметки |
59 |
Абзац |
59 |
Заголовки |
61 |
Визуальное выделение фрагментов текста |
61 |
Определение атрибутов тега (выравнивание блоков текста) |
62 |
Стилевое оформление текста |
63 |
Стиль элемента |
63 |
Свойства оформления текста |
65 |
Единицы измерения |
65 |
Выбор цвета в Dreamweaver |
66 |
Цвет для Web |
66 |
Использование Палитры цветов |
67 |
Другие структурные элементы |
70 |
Горизонтальная линия |
70 |
Комментарии |
71 |
Глава 6. Форматирование текста с помощью Панели свойств |
73 |
Теги-контейнеры |
73 |
Особенности работы Панели свойств |
76 |
Меню Font — определение гарнитуры шрифта |
76 |
Шрифтовое семейство |
76 |
Редактирование списка шрифтовых семейств |
77 |
Меню Style — стиль фрагмента |
79 |
Меню Size — размер шрифта |
80 |
Кнопки начертания шрифта |
81 |
Кнопки выравнивания абзацев |
81 |
Кнопки определения отступа |
81 |
Создание "красной строки" |
82 |
Логические стили |
82 |
Списки |
85 |
Маркированный список |
85 |
Нумерованный список |
86 |
Список определений |
86 |
Вложенные списки |
89 |
Глава 7. HTML-таблицы |
91 |
Структура HTML-таблиц |
91 |
Табличные теги |
91 |
Вставка таблицы и содержимого таблицы |
93 |
Параметр Table Widths (Ширина таблицы) |
96 |
Выделение элементов таблицы |
98 |
Панель свойств таблицы |
99 |
Изменение структуры таблицы |
102 |
Объединение ячеек таблицы |
102 |
Разбиение ячеек таблицы |
102 |
Добавление строк и столбцов |
104 |
Удаление строк/столбцов |
106 |
Импорт табличных данных |
107 |
Режим расширенных таблиц |
108 |
Вложенные таблицы |
110 |
Сортировка таблиц |
111 |
Глава 8. Определяем сайт |
113 |
Адреса в Интернете |
113 |
Абсолютный адрес |
113 |
Относительный адрес |
114 |
Определение сайта в Dreamweaver |
115 |
Определение локальной копии сайта |
116 |
Управление сайтами |
120 |
Экспорт сайтов |
121 |
Импорт сайтов |
122 |
Карта сайта в Dreamweaver |
122 |
Функции карты сайта в Dreamweaver |
123 |
Настройка параметров карты сайта |
125 |
Создание гиперссылок в режиме карты сайта |
127 |
Создание нового файла и редактирование гиперссылок
в режиме карты сайта |
127 |
Гиперссылки |
129 |
Параметры гиперссылки |
129 |
Типы гиперссылок |
130 |
Создание обычных гиперссылок |
130 |
Почтовые гиперссылки |
135 |
Ссылки на разделы |
135 |
Глава 9. Графика в Web |
143 |
Графические элементы Web-страниц |
143 |
Цели размещения графики |
143 |
Особенности подбора графики для Web-страниц |
144 |
Форматы графических файлов |
144 |
Подготовка Web-графики |
146 |
Размещение изображений в Dreamweaver |
146 |
Вставка изображения в HTML-документ |
146 |
Установка свойств изображения в Панели свойств |
149 |
Редактирование изображения средствами Dreamweaver |
151 |
Вставка местозаполнителя изображения |
155 |
Замена местозаполнителя изображением |
156 |
Изображения-гиперссылки |
157 |
Создание карты ссылок на изображении |
159 |
Создание клиентской карты ссылок |
159 |
HTML-код карты изображений |
162 |
Активные изображения |
163 |
Создание замещающего изображения |
163 |
Панель навигации |
167 |
Использование внешнего редактора изображений |
172 |
Глава 10. Макет Web-страницы |
175 |
Параметры макета |
175 |
Выбор базового размера макета |
175 |
Виды дизайна макета web-страницы |
176 |
Использование вспомогательных элементов при макетировании |
176 |
Линейки |
176 |
Направляющие макета |
177 |
Сетка макета |
178 |
Разметка макета с помощью таблиц |
179 |
Основные элементы макета |
179 |
Структурная HTML-разметка |
179 |
Табличная верстка |
181 |
Свойства таблиц разметки |
181 |
Создание таблиц разметки |
183 |
Глава 11. Средства Dreamweaver для работы с CSS |
195 |
Основные понятия CSS |
195 |
Стиль |
195 |
Селектор |
196 |
Способы применения стилей |
198 |
Дерево документа. Наследуемость |
199 |
Единицы измерения CSS |
200 |
Работа со стилями в Dreamweaver |
201 |
Определение стилей при форматировании текста |
201 |
Работа со стилями CSS в Панели свойств |
202 |
Панель CSS Styles |
203 |
Режимы панели CSS Styles |
204 |
Создание нового правила CSS |
206 |
СSS-cвойства шрифта |
208 |
Применение нового правила к элементу страницы |
210 |
Комментарии CSS |
212 |
Создание внешней таблицы стилей |
212 |
Редактирование таблицы стилей |
212 |
Присоединение внешней таблицы стилей |
213 |
Изменение правила CSS |
216 |
Изменение имени селектора CSS |
216 |
Изменение таблицы стилей CSS |
217 |
Глава 12. Основные свойства CSS |
219 |
Определение основных свойств страницы |
219 |
Внешний вид страницы |
220 |
Псевдостили гиперссылок |
221 |
Ссылки |
222 |
Заголовки |
223 |
Кодировка |
224 |
Изображение-образец |
225 |
Свойства CSS |
227 |
Типы элементов |
227 |
Свойства CSS блочных элементов |
228 |
Стили браузеров и универсальный селектор |
229 |
Определение свойств в Dreamweaver |
230 |
Высота, ширина, границы, отступы, поля блока |
230 |
Свойства фона элемента |
235 |
Свойства абзаца |
238 |
Приемы по определению селекторов CSS |
242 |
Контекстные селекторы |
242 |
Группирование селекторов |
243 |
Перенос правил CSS из внутренней таблицы стилей
во внешнюю таблицу |
245 |
Сокращенные формы записи свойств CSS |
247 |
Псевдоэлементы |
248 |
Псевдоэлемент first-line |
249 |
Псевдоэлемент first-letter |
249 |
Глава 13. Списки |
251 |
Типы HTML-списков |
251 |
Маркированный список |
251 |
Нумерованный список |
252 |
Создание маркированного или нумерованного списка |
253 |
Создание списка на основе существующего текста |
253 |
Задание свойств списка |
254 |
Списки-определения |
255 |
Вложенные списки |
256 |
Создание вложенного списка в Dreamweaver |
257 |
Определение свойств списка для стиля CSS |
258 |
Сокращенная запись свойств CSS для списков |
259 |
Создание вертикального списка гиперссылок |
260 |
Глава 14. Блочная верстка. Перемещаемые элементы |
269 |
Определение логических блоков страницы с помощью
тегов-контейнеров |
269 |
Определение слоя. Блочная верстка |
270 |
Нормальный поток позиционирования |
270 |
Особенности блочной верстки |
270 |
Свойство float |
271 |
Определение свойства float |
271 |
Обтекание изображения текстом |
271 |
Использование float-элементов в блочной верстке |
273 |
Определение колонок |
273 |
Горизонтальное меню на основе списка |
274 |
Использование свойства clear |
275 |
Вложенные блоки (слои) |
277 |
Макеты на основе float-блоков |
278 |
Одна колонка с заголовком и "подвалом" |
278 |
Две колонки с заголовком и "подвалом" |
280 |
Три колонки с заголовком и "подвалом" |
282 |
Верстка элементов страницы. "Плавающее позиционирование" |
285 |
Создание меню навигации с использованием фоновых изображений (определение css-ролловеров) |
285 |
Отображение ссылки текущей страницы (юзабилити меню) |
288 |
Использование фоновых изображений при формировании внешнего
вида ссылок |
290 |
Разработка страницы фиксированного дизайна на основе макета.
Пример блочной верстки |
293 |
Определение основных блоков страницы |
294 |
Глава 15. Свойства позиционированных элементов |
307 |
CSS-позиционирование |
307 |
Типы позиционирования. Свойство position |
307 |
Определение свойств позиционированных элементов |
308 |
Абсолютное позиционирование |
310 |
Создание двух колонок с использованием абсолютного
позиционирования |
312 |
Вложенные абсолютно позиционированные блоки |
313 |
AP-элементы в Dreamweaver |
314 |
Создание AP Div-элемента |
315 |
Отображение и редактирование свойств AP-элемента (слоя)
в окне Design |
317 |
"Рисование" слоя |
318 |
Панель AP Elements |
319 |
Удаление слоя |
320 |
Вложенные элементы AP Div |
320 |
Свойство z-index |
321 |
Управление отображением содержимого слоя |
321 |
Изменение видимости слоя |
321 |
Область отсечения |
322 |
Переполнение слоя |
323 |
Использование изображения-образца для разработки макета
с AP-элементами |
324 |
Относительное позиционирование |
328 |
Глава 16. Активы и шаблоны |
331 |
Внедренные элементы Web-страницы. Панель Assets |
331 |
Использование панели Assets |
332 |
Обновление содержимого панели Assets |
332 |
Список избранных элементов (Favorites) |
333 |
Библиотека |
335 |
Элемент библиотеки |
335 |
Шаблоны |
338 |
Свойства шаблонов |
338 |
Создание шаблонов |
339 |
Использование шаблона из набора Dreamweaver |
344 |
Глава 17. Элементы Web-форм |
347 |
Средства создания элементов форм |
347 |
Создание формы |
348 |
Текстовое поле |
349 |
Скрытое поле |
350 |
Многострочный текст |
350 |
Поля только для чтения |
351 |
Флажок |
352 |
Переключатели |
352 |
Группа переключателей |
352 |
Список/Меню |
354 |
Группирование элементов списка (тег |
356 |
Выпадающее меню |
357 |
Поле изображения |
358 |
Файловое поле |
360 |
Кнопка |
360 |
Применение тега |
360 |
Тег <fieldset> |
361 |
Макет формы |
362 |
Форматирование средствами HTML |
362 |
Использование CSS |
362 |
Глава 18. Тестирование Web-страниц |
365 |
Чистка HTML-кода |
365 |
Отчеты для проверки сайта |
367 |
Проверка правильности HTML-кода |
367 |
Проверка совместимости HTML-кода |
369 |
Проверка корректности гиперссылок |
370 |
Замена гиперссылок |
371 |
Приложение. Описание компакт-диска |
373 |
Предметный указатель |
375 |
|