Большая книга веб-дизайна

Введение ......................................................................................................................18
Организация текста ..........................................................................................19
Краткий обзор каждой главы ........................................................................19
Особенности книги ..........................................................................................22
Благодарности ....................................................................................................22
Об авторе..............................................................................................................23
Глава 1. Интернет и Всемирная паутина .........................................................25
1.1. Интернет и Всемирная паутина ...........................................................25
Интернет .......................................................................................................... 26
Развитие Интернета .................................................................................... 26
Зарождение Всемирной паутины .......................................................... 27
Первый графический браузер ................................................................. 27
Слияние технологий ................................................................................... 28
Кто управляет Интернетом? .................................................................... 28
Интранет и Экстранет ................................................................................ 29
1.2. Стандарты Всемирной паутины...........................................................30
Рекомендации Консорциума W3C ........................................................ 30
Веб-стандарты и доступность .................................................................. 31
Требования по доступности веб-сайтов
в Российской Федерации .......................................................................... 31
1.3 Информация во Всемирной паутине ..................................................32
Достоверность источников информации
во Всемирной паутине ................................................................................ 32
Этичное использование информации
во Всемирной паутине ................................................................................ 33
1.4. Краткий обзор сети ...................................................................................34
1.5. Модель клиент-сервер .............................................................................36
1.6. Интернет-протоколы ...............................................................................38
Протокол передачи файлов (FTP) ........................................................ 38
Протоколы электронной почты .............................................................. 38
Протокол передачи гипертекста (HTTP) ........................................... 39
Протокол управления передачей/межсетевой
протокол (TCP/IP) ..................................................................................... 39Оглавление
6
1.7. Унифицированные идентификаторы ресурса
и доменные имена .............................................................................................41
URI и URL ...................................................................................................... 41
Доменные имена ........................................................................................... 42
1.8. Языки разметки .........................................................................................45
Стандартный обобщенный язык разметки (SGML)....................... 45
Язык разметки гипертекста (HTML ) ................................................... 45
Расширяемый язык разметки (XML) .................................................. 45
Расширяемый язык разметки гипертекста (XHTML ) ................... 46
HTML 5 — Следующая версия (X)HTML .......................................... 46
1.9. Популярные решения во Всемирной паутине ................................46
Электронная коммерция ........................................................................... 46
Доступ с мобильных устройств .............................................................. 47
Блоги ................................................................................................................. 47
Вики .................................................................................................................. 48
Социальные сети .......................................................................................... 48
RSS-каналы .................................................................................................... 49
Подкасты ......................................................................................................... 50
Веб 2.0 ............................................................................................................... 50
Глава 2. Основы разметки веб-страниц ............................................................51
2.1. Обзор HTML ...............................................................................................52
HTML ............................................................................................................... 52
XHTML ............................................................................................................ 53
HTML 5 ............................................................................................................. 54
2.2. Определение типа документа................................................................55
2.3. Пример веб-страницы XHTML ............................................................56
2.4. Пример веб-страницы HTML 5 .............................................................57
2.5. Элементы head, title, meta и body ........................................................58
Раздел заголовка страницы ...................................................................... 58
Раздел тела страницы ................................................................................. 59
2.6. Ваша первая веб-страница .....................................................................60
Сохранение файла ....................................................................................... 61
Тестирование страницы ............................................................................. 62
2.7. Элемент заголовка ....................................................................................63
Дополнительные параметры заголовков
в синтаксисе HTML 5 .................................................................................. 65
2.8. Элемент абзаца ...........................................................................................65
Выравнивание текста .................................................................................. 66
2.9. Элемент разрыва строки .........................................................................67
2.10. Элемент цитирования ...........................................................................69
2.11. Элементы логического стиля ..............................................................70Оглавление
7
2.12. Неупорядоченные списки ....................................................................73
Атрибут type ................................................................................................... 74
HTML 5 и неупорядоченные списки ..................................................... 74
2.13. Упорядоченные списки .........................................................................75
Атрибут type ................................................................................................... 76
HTML 5 и упорядоченные списки .......................................................... 76
2.14. Списки определений ..............................................................................78
2.15. Специальные символы ..........................................................................80
2.16. Элемент div ...............................................................................................83
2.17. Элемент привязки...................................................................................85
Абсолютные ссылки .................................................................................... 87
Относительные ссылки .............................................................................. 87
Ссылки на адрес электронной почты ................................................... 91
Привязка блока ............................................................................................. 93
2.18. Проверка HTML- кода ...........................................................................93
Глава 3. Изменение цвета и текста с помощью CSS .....................................97
3.1. Краткий обзор каскадных таблиц стилей .........................................98
Преимущества каскадных таблиц стилей ........................................... 99
Типы каскадных таблиц стилей ............................................................100
Селекторы и определения CSS .............................................................101
Свойство background-color .....................................................................101
Свойство color .............................................................................................101
Конфигурирование цвета фона и текста ...........................................102
3.2. Использование цвета на веб-страницах ..........................................103
Шестнадцатеричные значения цветов ...............................................104
Веб-палитра «безопасных» цветов ......................................................104
Синтаксис CSS при определении цвета ............................................105
3.3. Разметка внутренних стилей CSS .....................................................105
Атрибут style ................................................................................................105
3.4. Разметка глобальных стилей CSS .....................................................108
Элемент style ................................................................................................108
3.5. Изменение текста с помощью таблиц стилей ................................112
Свойство font-family..................................................................................113
Дополнительные правила CSS для форматирования
шрифтов .........................................................................................................114
3.6. Селекторы класса, идентификатора
и потомка ...........................................................................................................120
Селекторы класса .......................................................................................120
Селекторы идентификатора...................................................................121
Селекторы потомка ...................................................................................124
3.7. Элемент span .............................................................................................124Оглавление
8
3.8. Использование внешних таблиц стилей .........................................126
Элемент link .................................................................................................126
3.9. Центрирование HTML- элементов с помощью CSS ...................132
3.10. Каскадность стилей CSS ....................................................................134
3.11. Валидация CSS ......................................................................................138
Глава 4. Графические элементы и рисунки ...................................................141
4.1. Конфигурирование линий и границ .................................................142
Горизонтальные линии .............................................................................142
Свойства border, border-style и padding .............................................143
4.2. Типы графических изображений .......................................................150
Изображения в формате GIF .................................................................151
Изображения в формате JPEG .............................................................152
Изображения в формате PNG ...............................................................155
Новый формат WebP ................................................................................155
4.3. Элемент изображения ...........................................................................155
Изображения-ссылки ...............................................................................157
Оптимизация изображений для Всемирной паутины .................160
4.4. Визуальные элементы HTML 5 ..........................................................163
Элемент figure ..............................................................................................163
Элемент figcaption......................................................................................163
Элемент meter ..............................................................................................165
Элемент progress .........................................................................................166
4.5. Фоновые изображения ..........................................................................167
Свойство background-image ...................................................................167
Отображение фонового изображения браузером ..........................167
Свойство background-repeat ...................................................................169
Свойство background-position ...............................................................170
Свойство background-attachment .........................................................172
4.6. Дополнительные возможности при работе
с изображениями .............................................................................................173
Карты изображений ..................................................................................173
Значки веб-сайтов ......................................................................................176
Разрезание изображения .........................................................................178
CSS-спрайты ................................................................................................179
4.7. Источники графических файлов и советы по работе
с графикой .........................................................................................................179
Источники графических файлов ..........................................................179
Советы по использованию графических файлов ...........................181
4.8. Визуальные эффекты CSS3 .................................................................183
Свойство background-clip ........................................................................183
Свойство background-origin ...................................................................184Оглавление
9
Свойство background-size ........................................................................185
Множественные фоновые изображения ...........................................186
Скругление углов .......................................................................................189
Свойство box-shadow ................................................................................193
Свойство text-shadow ...............................................................................194
Свойство opacity .........................................................................................196
Цветовая модель RGBA ...........................................................................199
Градиенты ......................................................................................................201
Глава 5. Веб-дизайн ...............................................................................................205
5.1. Создание дизайна для целевой аудитории .....................................205
5.2. Структура веб-сайта ...............................................................................207
Иерархическая структура .......................................................................207
Линейная структура ..................................................................................209
Хаотичная структура ................................................................................209
5.3. Принципы визуального дизайна ........................................................210
Повторяемость: повторение элементов дизайна
на всем сайте ................................................................................................211
Контраст: добавление эмоциональности и привлечение
внимания .......................................................................................................211
Приближенность: группирование ........................................................211
Выравнивание: выравнивание элементов для создания
единства стиля.............................................................................................211
5.4. Методы обеспечения доступности ....................................................212
Кто выигрывает от повышения доступности? ................................212
Доступный дизайн может помочь при индексации сайта
поисковыми системами ...........................................................................213
Доступность — это правильно ...............................................................213
5.5. Написание текстов для Всемирной паутины ................................215
Структурируйте контент на странице ................................................215
Текст в гиперссылках ................................................................................216
Навыки чтения ............................................................................................216
Используйте общепринятые шрифты ................................................216
Размер и толщина шрифтов ...................................................................216
Контрастные цвета шрифтов .................................................................217
Орфография и грамматика .....................................................................217
5.6. Использование цвета .............................................................................217
Подбор цветов .............................................................................................217
Цвет и доступность ....................................................................................218
Цвета и целевая аудитория ....................................................................218
5.7. Размещение графических и мультимедийных элементов ........219
Размер файла и изображения имеют значение ...............................219Оглавление
10
Сглаживание изображений текста ......................................................220
Используйте мультимедийные файлы только при
необходимости ............................................................................................220
Предоставьте замещающий текст .........................................................221
5.8. Дизайн навигационных элементов ...................................................222
Навигационные панели ...........................................................................222
Навигация из «хлебных крошек» ........................................................222
Использование графики для навигации............................................222
Пропуск повторяющейся навигации .................................................223
Динамическая навигация ........................................................................223
Карта сайта ...................................................................................................223
Система поиска по сайту .........................................................................224
5.9. Дизайн макетов веб-страниц ...............................................................224
Блок-схемы и макеты веб-страниц ......................................................224
Техники дизайна макетов веб-страниц ..............................................225
Дизайн для мобильного Интернета ....................................................228
5.10. Другие приемы дизайна веб-страниц.............................................230
Время загрузки ............................................................................................230
Размещение на верхней половине полосы .......................................231
Воздух .............................................................................................................232
Не используйте горизонтальную прокрутку ...................................232
Наиболее значимые области веб-страницы .....................................232
Поддержка браузерами ............................................................................233
Разрешение экрана ....................................................................................234
5.11. Таблица проверки аспектов веб-дизайна ......................................234
Глава 6. Разработка макета страницы .............................................................237
6.1. Блочная модель ........................................................................................237
Контент ..........................................................................................................238
Отступ ............................................................................................................238
Граница ...........................................................................................................238
Поле .................................................................................................................238
Блочная модель в действии ....................................................................239
6.2. Нормальный поток .................................................................................240
Свойства CSS-макета ...............................................................................243
6.3. Позиционирование с помощью CSS .................................................243
Относительное позиционирование .....................................................243
Абсолютное позиционирование ...........................................................245
6.4. Свойство float ...........................................................................................248
6.5. CSS: Отмена свойства float ..................................................................252
Свойство clear ..............................................................................................252
Удаление обтекаемого элемента с помощью разрыва строки ....252Оглавление
11
Другой способ удалить обтекаемый элемент...................................253
Свойство overflow ......................................................................................254
Удаление обтекаемого элемента ...........................................................254
Конфигурирование полосы прокрутки .............................................255
6.6. CSS: Макеты страниц в две колонки ................................................256
Две колонки с навигацией слева ..........................................................257
Две колонки с заголовком вверху и навигацией слева ................259
6.7. Гиперссылки в виде неупорядоченного списка ............................261
Конфигурирование маркеров списка с помощью CSS ................261
Вертикальная панель навигации с неупорядоченным
списком ..........................................................................................................263
Горизонтальная панель навигации с неупорядоченным
списком ..........................................................................................................265
6.8. Интерактивность CSS с помощью псевдоклассов .......................266
6.9. Практическое задание с макетом CSS в две колонки .................269
6.10. Советы по отладке CSS .......................................................................273
Проверьте синтаксические ошибки в HTML- коде .......................274
Проверьте синтаксические ошибки в CSS ........................................274
Создайте временные цвета фона ..........................................................274
Создайте временные рамки ....................................................................274
Используйте комментарии для поиска
незапланированных связей ....................................................................275
6.11. Веб-ресурсы, посвященные CSS ......................................................275
6.12. Структурные элементы HTML 5 ......................................................276
Элемент header ............................................................................................277
Элемент hgroup ...........................................................................................277
Элемент nav ..................................................................................................277
Элемент footer .............................................................................................277
HTML 5 и современные браузеры ........................................................284
Глава 7. Дополнительные сведения о ссылках, макетах
и мобильных устройствах ...................................................................................286
7.1. Другой подход к гиперссылкам ..........................................................286
Дополнительная информация об относительных ссылках ........287
Идентификаторы фрагментов ...............................................................288
Атрибут target ..............................................................................................292
Блочная привязка ......................................................................................293
Гиперссылки голосовых вызовов и текстовых сообщений ........293
7.2. CSS-спрайты .............................................................................................294
7.3. Создание макетов веб-страниц с тремя колонками
с помощью CSS ................................................................................................297
7.4. Подготовка страницы к печати с помощью CSS ..........................306Оглавление
12
7.5. Стили CSS для отображения веб-сайтов на мобильных
устройствах .......................................................................................................313
Рекомендации по дизайну веб-страниц для мобильных
устройств .......................................................................................................313
Метатег viewport ........................................................................................317
Медиазапросы CSS ....................................................................................320
Глава 8. Таблицы .....................................................................................................330
8.1. Краткий обзор HTML- таблиц ............................................................330
Элемент таблицы .......................................................................................331
Элемент описания таблицы ...................................................................332
8.2. Строки, ячейки и заголовки таблицы ..............................................333
Элемент строки таблицы .........................................................................333
Элемент данных таблицы .......................................................................334
Элемент заголовка таблицы ...................................................................334
8.3. Объединение строк и столбцов ..........................................................336
8.4. Конфигурирование доступной таблицы .........................................339
8.5. Использование CSS для оформления таблиц ...............................342
8.6. Структурные псевдоклассы в CSS3 ..................................................345
8.7. Конфигурирование разделов таблицы ............................................347
Глава 9. Формы .......................................................................................................351
9.1. Краткий обзор форм ...............................................................................352
Элемент form ................................................................................................354
Элементы управления формы ...............................................................355
9.2. Элемент ввода данных ...........................................................................355
Текстовое поле .............................................................................................355
Кнопка отправки данных ........................................................................358
Кнопка сброса ..............................................................................................358
Флажок ..........................................................................................................361
Переключатель ............................................................................................362
Скрытый элемент формы ........................................................................364
Поле ввода пароля .....................................................................................365
9.3.Текстовая область с прокруткой .........................................................365
Элемент textarea .........................................................................................365
9.4. Раскрывающийся список ......................................................................369
Элемент select ..............................................................................................370
Элемент option ............................................................................................370
9.5. Кнопки-изображения и элемент button ..........................................372
Кнопка-изображение ................................................................................372
Элемент button ............................................................................................373Оглавление
13
9.6. Доступность и формы ............................................................................374
Элемент label ................................................................................................374
Элементы fieldset и legend ......................................................................376
Атрибут tabindex ........................................................................................379
Атрибут accesskey .......................................................................................379
9.7. Стилизация форм ....................................................................................380
9.8. Обработка на стороне сервера ............................................................386
Конфиденциальность и формы ............................................................390
Ресурсы, посвященные обработке на стороне сервера .................391
Изучение технологий обработки на стороне сервера ...................391
9.9. Элементы управления формы в HTML 5 ........................................392
Поле ввода адреса электронной почты ..............................................392
Поле ввода URL-адреса ...........................................................................393
Поле ввода номера телефона .................................................................394
Поле поиска ..................................................................................................395
Список данных ............................................................................................395
Ползунок .......................................................................................................398
Счетчик ..........................................................................................................400
Календари .....................................................................................................401
Палитра ..........................................................................................................402
HTML 5 и прогрессивное улучшение .................................................406
Глава 10. Разработка веб-сайта ..........................................................................407
10.1. Успешная разработка широкомасштабного проекта ................408
Роли участников проекта ........................................................................408
Критерии отбора персонала ...................................................................410
10.2. Процесс разработки .............................................................................411
Концептуализация .....................................................................................413
Анализ ............................................................................................................414
Проектирование .........................................................................................416
Реализация ...................................................................................................417
Тестирование ...............................................................................................418
Запуск .............................................................................................................424
Сопровождение ...........................................................................................424
Оценка ............................................................................................................424
10.3. Доменное имя .........................................................................................425
Выбор доменного имени ..........................................................................425
Регистрация доменного имени .............................................................427
10.4. Веб-хостинг .............................................................................................427
Хостинг-провайдеры.................................................................................427
Типы веб-хостинга .....................................................................................428
10.5. Выбор виртуального хостинга ..........................................................430Оглавление
14
Глава 11. Мультимедийные и интерактивные элементы
на веб-страницах ....................................................................................................432
11.1. Плагины, контейнеры и кодеки .......................................................433
11.2. Начало работы с аудио- и видеофайлами .....................................436
Предоставление гиперссылки ...............................................................436
Элемент object .............................................................................................437
Элемент param .............................................................................................438
Добавление аудиофайлов на веб-страницу ......................................439
Добавление видеофайлов на веб-страницу ......................................444
Мультимедийные файлы во Всемирной паутине ..........................446
Проблемы совместимости браузеров .................................................449
11.4. Технология Adobe Flash ......................................................................449
Добавление Flash-анимации на веб-страницу .................................451
Элемент embed ............................................................................................454
Ресурсы с материалами по технологии Flash ..................................456
11.5. Элементы HTML 5 для добавления аудио- и видеофайлов ....458
Элемент audio ..............................................................................................458
Элемент source ............................................................................................459
Элемент audio на веб-странице .............................................................459
Элемент video ..............................................................................................462
Элемент source ............................................................................................463
Элемент video на веб-странице .............................................................463
11.6. Вопросы авторского права и мультимедийные файлы ............466
11.7. CSS3 и интерактивность ....................................................................467
Создание галереи изображений с помощью CSS ...........................467
Свойство transform ....................................................................................470
Свойство transition ....................................................................................473
11.8. Технология Java .....................................................................................476
Ресурсы Java-апплетов .............................................................................482
11.9. Технология JavaScript..........................................................................483
Бесплатные ресурсы по технологии JavaScript ..............................485
11.10. Технология Ajax ..................................................................................485
Ресурсы по технологии Ajax ..................................................................487
11.11. Элемент canvas ....................................................................................488
11.12. Доступность и мультимедиа/интерактивность .......................491
Глава 12. Электронная коммерция...................................................................493
12.1. Что такое электронная коммерция? ...............................................493
Преимущества электронной коммерции ...........................................493
Риски электронной коммерции ............................................................495
12.2. Бизнес-модели электронной коммерции .....................................496
12.3. Электронный обмен данными ..........................................................497Оглавление
15
12.4. Статистика электронной коммерции .............................................498
12.5. Проблемы, касающиеся электронной коммерции ....................499
12.6. Безопасность в электронной коммерции ......................................500
Шифрование ................................................................................................500
Целостность .................................................................................................502
Протокол безопасных соединений SSL .............................................502
Цифровой сертификат .............................................................................504
Протокол SSL и цифровые сертификаты .........................................505
12.7. Процессы обработки заказа и его оплаты .....................................506
Модель оплаты наличными ...................................................................507
Модель оплаты чеком ...............................................................................507
Модель оплаты банковской картой .....................................................507
Модель оплаты смарт-картой ................................................................508
Модель оплаты с помощью мобильного телефона ........................508
12.8. Варианты решений интернет-магазинов ......................................509
Мгновенный онлайн-каталог ................................................................509
Готовое программное обеспечение системы электронной
коммерции ....................................................................................................510
Магазин «под заказ» .................................................................................510
Бюджетный магазин «частично под заказ» ......................................510
Глава 13. Продвижение сайта.............................................................................512
13.1. Обзор поисковых систем ....................................................................512
13.2. Популярные поисковые системы ....................................................513
13.3. Устройство поисковых систем ..........................................................514
Робот ...............................................................................................................514
База данных ..................................................................................................514
Поисковые формы .....................................................................................515
13.4. Создание веб-страниц для продвижения .....................................516
Ключевые слова ..........................................................................................516
Названия страниц ......................................................................................516
Теги заголовков ...........................................................................................516
Описания .......................................................................................................517
Метатег description ....................................................................................517
Ссылки ...........................................................................................................518
Изображения и мультимедийные файлы ..........................................518
Валидный код ..............................................................................................519
Значимый контент .....................................................................................519
13.5. Регистрация сайта в поисковых машинах и каталогах ............519
Карта сайта ...................................................................................................521
Альянсы .........................................................................................................522
13.6. Мониторинг сайта в каталогах .........................................................522Оглавление
16
13.7. Популярность ссылок..........................................................................525
13.8. Продвижение сайта в социальных сетях ......................................526
Блоги и RSS-ленты ....................................................................................526
Социальные сети ........................................................................................527
13.9. Другие способы продвижения сайта ..............................................528
QR-коды ........................................................................................................528
Партнерские программы .........................................................................528
Баннерная реклама ....................................................................................529
Обмен баннерами .......................................................................................530
Обмен ссылками .........................................................................................530
Новостные рассылки ................................................................................531
Элементы сайта, удерживающие посетителей ................................532
Персональные рекомендации ................................................................532
Группы новостей и серверы подписки ...............................................533
Традиционная мультимедийная реклама и существующие
маркетинговые материалы......................................................................533
13.10. Сопровождение динамичного контента с помощью
внутренних фреймов......................................................................................533
Элемент iframe .............................................................................................534
Размещение видео с сайта YouTube во встроенном фрейме .......536
Глава 14. Краткий обзор JavaScript ..................................................................538
14.1. Обзор языка программирования JavaScript ................................538
14.2. Развитие языка программирования JavaScript ..........................540
14.3. Популярные приемы использования JavaScript ........................540
Сообщение с предупреждением ...........................................................541
Всплывающие окна ...................................................................................541
Jump-меню ....................................................................................................542
Техники перемещения мыши ................................................................543
14.4. Добавление в веб-страницу кода JavaScript ................................544
Элемент script ..............................................................................................545
Шаблон блока операторов JavaScript .................................................545
Окно с сообщением ...................................................................................545
Практикум отладки ...................................................................................547
14.5. Краткий обзор объектной модели документа .............................548
14.6. События и обработчики событий ....................................................552
14.7. Переменные ............................................................................................556
Создание переменной для веб-страницы ..........................................557
Сбор значений переменной с помощью метода prompt() ...........559
14.8. Введение в концепции программирования ..................................561
Арифметические операции ....................................................................562
Принятие решений ....................................................................................563
Функции ........................................................................................................566Оглавление
14.9. Обработка форм ....................................................................................570
14.10. Доступность и JavaScript .................................................................578
14.11. Ресурсы по JavaScript ........................................................................579
Справочник веб-разработчика ..........................................................................580
Приложение А. Справочник HTML 5 .............................................................581
Приложение Б. Специальные символы .........................................................587
Приложение В. Справочник свойств CSS .....................................................589
Приложение Г. Использование протокола FTP
для публикации сайтов ........................................................................................595
Приложения FTP ............................................................................................595
Соединение с FTP ...........................................................................................596
Обзор приложения FileZilla ........................................................................596
Запуск и авторизация ...............................................................................596
Загрузка файлов .........................................................................................597
Скачивание файлов ...................................................................................597
Удаление файлов ........................................................................................598
Предметный указатель .........................................................................................599