Глава 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
Тег 361
Макет формы 362
Форматирование средствами HTML 362
Использование CSS 362
Глава 18. Тестирование Web-страниц
365
Чистка HTML-кода 365
Отчеты для проверки сайта 367
Проверка правильности HTML-кода 367
Проверка совместимости HTML-кода 369
Проверка корректности гиперссылок 370
Замена гиперссылок 371
Приложение. Описание компакт-диска 373
Предметный указатель 375