Основы Web-дизайна. Самоучитель. 2 изд.

479 Pages·015.036 MB·479\479

by  Дунаев В.

Вадим Дунаев

2-е издание

Санкт-Петербург
«БХВ-Петербург»
2012
УДК 681.3.06
ББК 32.973.26-018.2
Д83

Дунаев В. В.
Д83 Основы Web-дизайна. Самоучитель. — 2-е изд., перераб. и доп. — СПб.:
БХВ-Петербург, 2012. — 480 с.: ил.
ISBN 978-5-9775-0110-1
Рассмотрены основные сведения по разработке Web-приложений, необходимые
начинающему Web-разработчику. Приведены общие понятия, а также вопросы,
связанные с разработкой, публикацией и дальнейшим сопровождением сайта в це-
лом. Подробно рассмотрены разметка гипертекстовых документов (XHTML,
HTML 4 и HTML 5) и применение каскадных таблиц стилей (CSS 2/3). Описаны
основные средства разметки страниц сайта и форматирования текстов. Показано,
как помещать в HTML-документ содержимое из внешних источников (графиче-
ские изображения, Flash-ролики, звук, видео и т. п.), а также как создавать специ-
альные визуальные эффекты. Уделено большое внимание элементам пользователь-
ского интерфейса, с помощью которых обеспечивается интерактивность Web-
страниц. Рассказано о решении различных задач с помощью сценариев, написан-
ных на языке JavaScript. Второе издание переработано и дополнено с учетом со-
временных Web-технологий.
Для начинающих Web-дизайнеров
УДК 681.3.06
ББК 32.973.26-018.2
Группа подготовки издания:

Главный редактор Екатерина Кондукова
Зам. главного редактора Игорь Шишигин
Зав. редакцией Григорий Добин
Редактор Игорь Цырульников
Компьютерная верстка Ольги Сергиенко
Корректор Зинаида Дмитриева
Дизайн серии Инны Тачиной
Оформление обложки Елены Беляевой
Зав. производством Николай Тверских

Подписано в печать 30.09.11.
Формат 70 1001/16. Печать офсетная. Усл. печ. л. 38,7.
Тираж 1500 экз. Заказ №
"БХВ-Петербург", 190005, Санкт-Петербург, Измайловский пр., 29.
Санитарно-эпидемиологическое заключение на продукцию
№ 77.99.60.953.Д.005770.05.09 от 26.05.2009 г. выдано Федеральной службой
по надзору в сфере защиты прав потребителей и благополучия человека.
Отпечатано с готовых диапозитивов
в ГУП "Типография "Наука"
199034, Санкт-Петербург, 9 линия, 12

ISBN 978-5-9775-0110-1 © Дунаев В. В., 2011
© Оформление, издательство "БХВ-Петербург", 2011
Оглавление

Предисловие ко второму изданию .............................................................................. 9
Введение .......................................................................................................................... 11
Глава 1. Что такое Web-дизайн .................................................................................. 15
1.1. С чего начать? ........................................................................................................................ 15
1.2. Графический дизайн .............................................................................................................. 17
1.3. Шаблоны страниц .................................................................................................................. 19
1.4. Реализация проекта ................................................................................................................ 20
1.5. Наполнение информационным содержимым ...................................................................... 24
1.6. Тестирование и опытная эксплуатация ................................................................................ 26
1.7. Публикация и оптимизация сайта для поисковых систем .................................................. 28
1.7.1. Доменное имя сайта .................................................................................................... 28
1.7.2. Регистрация и индексирование в поисковых системах ........................................... 29
Глава 2. Как устроен HTML-документ ..................................................................... 33
2.1. Что такое HTML .................................................................................................................... 33
2.2. Определение типа документа ................................................................................................ 41
2.3. Структура (X)HTML-кода ..................................................................................................... 44
2.3.1. Раздел заголовка документа <head> ......................................................................... 46
2.3.2. Раздел тела документа <body> ................................................................................... 52
2.4. Основные атрибуты тегов ..................................................................................................... 53
Глава 3. Основы каскадных таблиц стилей ............................................................ 56
3.1. Что такое CSS ......................................................................................................................... 56
3.2. Присоединение таблиц стилей к (X)HTML-документу ..................................................... 59
3.3. Правила форматирования ...................................................................................................... 60
3.3.1. Селекторы..................................................................................................................... 61
3.3.2. Контекстные селекторы .............................................................................................. 62
3.3.3. Псевдоселекторы и псевдоэлементы ......................................................................... 63
3.4. Приоритеты определений параметров стилей .................................................................... 65
3.5. Размерность ............................................................................................................................ 68
3.6. Цвет ......................................................................................................................................... 69
3.7. Поля, отступы, границы и размеры ...................................................................................... 70
3.8. Наследование параметров ..................................................................................................... 81
4 Оглавление
Глава 4. Позиционирование элементов .................................................................... 83
4.1. Расположение элементов в нормальном потоке ................................................................ 83
4.2. Позиционирование с помощью CSS .................................................................................... 86
4.2.1. position:static ................................................................................................................ 87
4.2.2. position:relative ............................................................................................................. 87
4.2.3. position:absolute ........................................................................................................... 87
4.2.4. position:fixed ................................................................................................................. 91
4.3. Отсчет координат ................................................................................................................... 92
4.4. Слои, или третья пространственная координата ................................................................ 93
4.5. Обтекание (float) .................................................................................................................... 94
4.6. Видимость .............................................................................................................................. 97
4.6.1. overflow ......................................................................................................................... 97
4.6.2. clip ................................................................................................................................. 98
4.6.3. visibility ......................................................................................................................... 98
4.6.4. display ........................................................................................................................... 99
4.7. Размеры элементов .............................................................................................................. 100
4.8. Практические примеры ....................................................................................................... 102
4.8.1. Центрирование элемента........................................................................................... 102
4.8.2. Управление положением элемента с помощью мыши .......................................... 104
4.8.3. Раскрывающаяся панель ........................................................................................... 105
Глава 5. Фон элементов и границ ............................................................................ 107
5.1. background ............................................................................................................................ 107
5.2. Прозрачность ........................................................................................................................ 111
5.3. Тень ....................................................................................................................................... 115
Глава 6. Компоновка страницы ............................................................................... 117
6.1. Базовые схемы компоновки страницы ............................................................................... 117
6.2. Жесткая схема ...................................................................................................................... 123
6.3. Резиновая схема ................................................................................................................... 125
6.4. Центрирование страницы .................................................................................................... 126
6.5. Декорация схемы ................................................................................................................. 126
6.6. Вставка плавающего фрейма (<iframe>) ........................................................................... 129
Глава 7. Ссылки .......................................................................................................... 133
7.1. Текстовые ссылки ................................................................................................................ 134
7.1.1. Простое меню ссылок ............................................................................................... 134
7.1.2. Двухуровневое меню ссылок .................................................................................... 139
7.2. Графические и комбинированные ссылки ......................................................................... 143
7.3. Графические карты ссылок ................................................................................................. 144
7.4. Внутренние ссылки .............................................................................................................. 146
7.5. URL-адреса ........................................................................................................................... 148
7.5.1. Структура URL........................................................................................................... 148
7.5.2. Абсолютные и относительные пути ......................................................................... 150
7.5.3. Псевдо-URL JavaScript .............................................................................................. 151
Глава 8. Форматирование текстов .......................................................................... 152
8.1. Шрифты ................................................................................................................................ 152
8.2. Основные теги разметки текстов ........................................................................................ 156
Оглавление 5
8.3. Специальные символы ......................................................................................................... 158
8.4. Работа с текстом................................................................................................................... 158
8.4.1. Красная строка ........................................................................................................... 159
8.4.2. Выравнивание ............................................................................................................ 159
8.4.3. Межстрочное расстояние .......................................................................................... 159
8.4.4. Межсловное расстояние ............................................................................................ 160
8.4.5. Межбуквенное расстояние ........................................................................................ 161
8.4.6. Декорация ................................................................................................................... 161
8.4.7. Индексы ...................................................................................................................... 163
8.4.8. Выделение первой буквы строки и первой строки в блоке текста ....................... 163
8.4.9. Текст с тенью ............................................................................................................. 163
8.4.10. Преобразование регистра ........................................................................................ 166
8.4.11. Мультиколоночная верстка..................................................................................... 166
8.5. Предварительно отформатированный текст ...................................................................... 166
8.6. Генерируемое содержимое .................................................................................................. 167
Глава 9. Списки ........................................................................................................... 172
9.1. Маркированный список ....................................................................................................... 172
9.2. Нумерованный список ......................................................................................................... 174
9.3. Автоматическая нумерация элементов списка ................................................................. 175
9.4. Иерархический раскрывающийся список ......................................................................... 179
9.5. Меню на основе списка ....................................................................................................... 184
9.6. Выравнивание элементов списка ........................................................................................ 188
9.7. Список определений ............................................................................................................ 191
Глава 10. Таблицы ...................................................................................................... 193
10.1. Табличные теги .................................................................................................................. 193
10.2. Рамки таблицы ................................................................................................................... 195
10.3. Размеры таблицы ............................................................................................................... 199
10.4. Выравнивание содержимого ячеек таблицы ................................................................... 203
10.5. Задание параметров столбцов ........................................................................................... 206
10.6. Сложные таблицы .............................................................................................................. 208
10.6.1. Расширение ячеек .................................................................................................. 208
10.6.2. Прокручиваемая таблица ...................................................................................... 212
10.7. Декорирование таблицы .................................................................................................... 214
Глава 11. Формы и элементы пользовательского интерфейса ......................... 216
11.1. Поля ввода, кнопки и переключатели: тег <input> ....................................................... 216
11.2. Кнопка: тег <button> ......................................................................................................... 219
11.3. Комбинированный раскрывающийся список: тег <select>............................................ 222
11.4. Текстовая область: тег <textarea> .................................................................................... 225
11.5. Декорации элементов интерфейса .................................................................................... 227
11.6. Форма: тег <form> ............................................................................................................. 229
Глава 12. Вставка внешнего содержимого ............................................................. 232
12.1. Графические изображения ................................................................................................ 232
12.1.1. Растровая графика ................................................................................................. 232
12.1.2. Основные форматы растровой графики .............................................................. 240
12.1.3. Векторная графика................................................................................................. 241
12.1.4. Вставка графики в (X)HTML-документ ............................................................... 243
6 Оглавление
12.2. Звук и видео ........................................................................................................................ 251
12.2.1. Основные форматы звуковых и видеофайлов ..................................................... 251
12.2.2. Вставка звука и видео в (X)HTML-документ ...................................................... 252
12.2.3. Вставка FLV-видео ................................................................................................ 255
12.2.4. Вставка Flash-фильмов .......................................................................................... 257
12.3. Вставка (X)HTML-документов ......................................................................................... 260
12.4. Вставка элементов управления ActiveX ........................................................................... 261
12.4.1. Что такое ActiveX .................................................................................................. 261
12.4.2. Примеры элементов ActiveX ................................................................................ 262
12.5. Вставка апплетов Java ....................................................................................................... 269
12.5.1. Что такое апплет .................................................................................................... 269
12.5.2. Вставка апплета посредством тега <applet> ....................................................... 270
12.5.3. Вставка апплета посредством тега <object> ....................................................... 271
Глава 13. Что такое JavaScript ................................................................................. 274
13.1. Из истории .......................................................................................................................... 274
13.2. Общая характеристика языка ............................................................................................ 277
13.3. Вставка сценариев в (X)HTML-документ ........................................................................ 278
13.4. Специальные термины и понятия ..................................................................................... 283
Глава 14. Объектная модель браузера и документа ............................................ 286
14.1. Общие сведения ................................................................................................................. 286
14.2. Доступ к объектам ............................................................................................................. 290
14.3. Доступ к свойствам элементов документа ....................................................................... 294
14.3.1. Доступ к атрибутам ............................................................................................... 294
14.3.2. Доступ к свойствам CSS........................................................................................ 295
14.3.3. Доступ к содержимому элемента ......................................................................... 300
14.4. Обработка событий ............................................................................................................ 302
14.4.1. Привязка обработчиков событий ......................................................................... 303
14.4.2. Область видимости обработчиков событий ........................................................ 309
14.4.3. Изменение поведения элементов по умолчанию ................................................ 310
14.4.4. Программный вызов обработчика события ......................................................... 311
14.4.5. Прохождение событий .......................................................................................... 314
14.4.6. Информация о событии: объект Event ................................................................. 317
14.4.7. Основные события ................................................................................................. 323
14.5. Основные объекты браузера и документа ....................................................................... 326
14.5.1. Объект window ....................................................................................................... 326
14.5.2. Объект screen ......................................................................................................... 329
14.5.3. Объект location ....................................................................................................... 329
14.5.4. Объект history ......................................................................................................... 331
14.5.5. Объект navigator .................................................................................................... 331
14.5.6. Объект document .................................................................................................... 333
Глава 15. Работа с основными объектами посредством JavaScript .................. 336
15.1. Управление окнами и фреймами ...................................................................................... 336
15.1.1. Создание окон ........................................................................................................ 336
15.1.2. Взаимодействие окон ............................................................................................ 338
15.1.3. Работа с фреймами ................................................................................................ 340
15.1.4. Окно PopUp в Internet Explorer ............................................................................. 345
Оглавление 7
15.2. Работа с таблицами ............................................................................................................ 346
15.3. Работа с табличными данными в текстовых файлах ..................................................... 350
15.3.1. Применение ActiveX Tabular Data Control ........................................................... 350
15.3.2. Применение объекта XMLHttpRequest ................................................................. 356
15.4. Работа с формами .............................................................................................................. 358
15.4.1. Проверка данных перед отправкой ...................................................................... 358
15.4.2. Баннер как форма................................................................................................... 360
15.4.3. Переходы между полями по клавише <Enter> ................................................... 361
15.5. Работа с локальным хранилищем данных ...................................................................... 363
15.5.1. Cookie...................................................................................................................... 363
15.5.2. Объект localStorage ............................................................................................... 368
15.6. Работа с графическими изображениями .......................................................................... 369
15.6.1. Объект элемента <img> ........................................................................................ 369
15.6.2. Объект Image .......................................................................................................... 370
15.6.3. Управление свойствами изображения ................................................................. 370
15.6.4. Предварительная загрузка изображений ............................................................. 372
15.6.5. Нетипичные применения объекта Image ............................................................. 375
15.7. Взаимодействие с сервером: объект XMLHttpRequest и AJAX ..................................... 380
15.7.1. Объект XMLHttpRequest ........................................................................................ 381
15.7.2. AJAX ....................................................................................................................... 391
15.8. Управление во времени ..................................................................................................... 391
Глава 16. Примеры сценариев на JavaScript ......................................................... 396
16.1. Подсветка кнопки .............................................................................................................. 396
16.2. Меню ................................................................................................................................... 399
16.2.1. Моментально раскрывающееся вертикальное меню ......................................... 399
16.2.2. Плавно раскрывающееся меню ............................................................................ 401
16.3. Раскрывающийся комбинированный список.................................................................. 403
16.4. Иерархический раскрывающийся список ....................................................................... 404
16.5. Эффект пишущей машинки .............................................................................................. 406
16.6. Отображение кода на странице ......................................................................................... 407
16.7. Перемещение элементов мышью ..................................................................................... 411
16.8. Движение по траектории ................................................................................................... 414
16.8.1. Движение по произвольной кривой ..................................................................... 415
16.8.2. Движение по эллипсу ............................................................................................ 417
16.9. Рисование линий посредством <div> .............................................................................. 418
16.9.1. Прямая линия ......................................................................................................... 419
16.9.2. Произвольная линия .............................................................................................. 422
16.9.3. Графики зависимостей .......................................................................................... 426
16.9.4. Перерисовка линий ................................................................................................ 428
16.10. Рисование посредством <canvas> .................................................................................. 429
16.10.1. Как вставить <canvas> в (X)HTML-документ .................................................. 429
16.10.2. Фигуры и линии ................................................................................................... 431
16.10.3. Градиенты ............................................................................................................. 437
16.10.4. Трансформации .................................................................................................... 438
16.10.5. Импорт растровых графических изображений ................................................. 440
16.10.6. Анимация .............................................................................................................. 443
16.10.7. Композиция графики ........................................................................................... 446
16.10.8. Текст ..................................................................................................................... 448
8 Оглавление
16.11. Дата и время ..................................................................................................................... 450
16.11.1. Отображение даты и времени в виде текста ...................................................... 450
16.11.2. Часы ...................................................................................................................... 451
16.11.3. Вечный календарь ................................................................................................ 453
16.12. Виджет .............................................................................................................................. 458

Приложение 1. Перечень тегов HTML 5 ................................................................ 465
Приложение 2. Перечень параметров CSS ............................................................. 470
Позиционирование ...................................................................................................................... 470
Размеры ........................................................................................................................................ 470
Цвет и фон ................................................................................................................................... 471
Текст............................................................................................................................................. 471
Шрифты ....................................................................................................................................... 471
Блоки (поля, отступы и границы) .............................................................................................. 471
Таблицы ....................................................................................................................................... 472
Печать .......................................................................................................................................... 472
Интерфейс.................................................................................................................................... 472
Звук .............................................................................................................................................. 472
Прочее .......................................................................................................................................... 472
Предметный указатель .............................................................................................. 473
Предисловие
ко второму изданию
Второе издание настоящей книги кардинально отличается от предыдущего как по
структуре, так и по содержанию. Существенно расширены главы, посвященные языку
разметки гипертекста HTML и CSS. При этом рассматриваются некоторые новые эле-
менты HTML 5 и CSS 3, которые поддерживаются всеми ведущими браузерами.
Я старался раскрыть возможности (X)HTML, CSS и JavaScript для разработки Web-
сайтов, не претендуя на полноту изложения. Это не справочник, а расширенное практи-
ческое руководство по самостоятельному изучению разнообразных средств и приемов
Web-программирования, рассчитанное в первую очередь на начинающих.
10 Введение