[valeri[µ]]

HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов.


Год: 2011
Автор: Дронов В. А.
Жанр: Практическое руководство
Издательство: БХВ-Петербург
ISBN: 978-5-9775-0596-3
Язык: Русский
Формат: PDF
Качество: Изначально компьютерное (eBook)
Количество страниц: 414Описание: Практическое руководство по созданию современных Web-сайтов, соответст-вующих концепции Web 2.0. Описаны языки HTML 5 и CSS 3, применяемые, со-ответственно, для создания содержимого и представления Web-страниц. Даны принципы Web-программирования на языке JavaScript с использованием библио-теки Ext Core. Рассказано о создании интерактивных Web-страниц, приведены примеры интерактивных элементов, позволяющие сделать Web-страницы удобнее для посетителя. Раскрыты вопросы реализации подгружаемого и генерируемого содержимого, семантической разметки, применения баз данных для формирования Web-страниц. Показаны способы расширения функциональности Web-сайтов с ис-пользованием Web-форм, элементов управления, свободно позиционируемых эле-ментов и программного рисования средствами HTML 5.

Оглавление
Введение .......................................................................................................................... 11
Что грядет нового в Web-дизайне ............................................................................................... 11
О чем эта книга ............................................................................................................................. 12
Какие программы используются в этой книге............................................................................ 13
Типографские соглашения ........................................................................................................... 13
Благодарности ............................................................................................................................... 14
ЧАСТЬ I. СОДЕРЖИМОЕ WEB-СТРАНИЦ. ЯЗЫК HTML 5 ............................ 15
Глава 1. Введение в современный Web-дизайн. Web 2.0. Создание Web-страниц ................................................................................................ 17
Современный Web-дизайн. Концепция Web 2.0 ........................................................................ 17
Что требуется от современного Web-сайта ........................................................................ 17
Концепция Web 2.0 ............................................................................................................... 19
Интернет: как все это работает .................................................................................................... 22
Клиенты и серверы Интернета. Интернет-адреса .............................................................. 22
Web-сайты и Web-серверы ................................................................................................... 24
Основные принципы создания Web-страниц. Язык HTML 5 ................................................... 25
Язык HTML и его теги .......................................................................................................... 26
Вложенность тегов ................................................................................................................ 29
Секции Web-страницы .......................................................................................................... 30
Метаданные и тип Web-страницы ....................................................................................... 31
Атрибуты HTML-тегов ......................................................................................................... 32
Программы, которыми мы будем пользоваться ......................................................................... 33
Web-обозреватель ................................................................................................................. 33
Web-сервер ............................................................................................................................ 34
Что дальше? .................................................................................................................................. 35
Глава 2. Структурирование текста ........................................................................... 36
Абзацы .......................................................................................................................................... 36
Заголовки ...................................................................................................................................... 38
Списки ........................................................................................................................................... 39
Цитаты .......................................................................................................................................... 42
Текст фиксированного формата .................................................................................................. 42
Горизонтальные линии ................................................................................................................. 45
Адреса ........................................................................................................................................... 46
Комментарии ................................................................................................................................ 47
Что дальше? .................................................................................................................................. 47
Глава 3. Оформление текста ....................................................................................... 48
Выделение фрагментов текста ..................................................................................................... 48
Разрыв строк ................................................................................................................................. 50
Вставка недопустимых символов. Литералы ............................................................................. 51
Что дальше? .................................................................................................................................. 54
Глава 4. Графика и мультимедиа .............................................................................. 55
Внедренные элементы Web-страниц ........................................................................................... 55
Графика ......................................................................................................................................... 56
Форматы интернет-графики ................................................................................................. 56
Вставка графических изображений ..................................................................................... 57
Мультимедиа ................................................................................................................................ 60
Форматы файлов и форматы кодирования ......................................................................... 60
Типы MIME ........................................................................................................................... 62
Вставка аудиоролика ............................................................................................................ 63
Вставка видеоролика ............................................................................................................ 65
Дополнительные возможности тегов <AUDIO> и <VIDEO> .......................................... 68
Что дальше? .................................................................................................................................. 69
Глава 5. Таблицы .......................................................................................................... 70
Создание таблиц ............................................................................................................................ 70
Заголовок и секции таблицы ........................................................................................................ 75
Объединение ячеек таблиц ........................................................................................................... 78
Что дальше? .................................................................................................................................. 80
Глава 6. Средства навигации ..................................................................................... 81
Текстовые гиперссылки................................................................................................................ 81
Создание гиперссылок .......................................................................................................... 81
Интернет-адреса в WWW ..................................................................................................... 83
Почтовые гиперссылки ......................................................................................................... 85
Дополнительные возможности гиперссылок ...................................................................... 86
Графические гиперссылки ........................................................................................................... 87
Изображения-гиперссылки ................................................................................................... 87
Изображения-карты .............................................................................................................. 88
Полоса навигации ......................................................................................................................... 90
Якоря ............................................................................................................................................. 91
Что дальше? .................................................................................................................................. 92
ЧАСТЬ II. ПРЕДСТАВЛЕНИЕ WEB-СТРАНИЦ. КАСКАДНЫЕ ТАБЛИЦЫ СТИЛЕЙ CSS 3 ............................................................ 93
Глава 7. Введение в стили CSS ................................................................................... 95
Понятие о стилях CSS................................................................................................................... 95
Создание стилей CSS .................................................................................................................... 96
Таблицы стилей ........................................................................................................................... 101
Правила каскадности и приоритет стилей ........................................................................ 103
Важные атрибуты стилей ........................................................................................................... 105
Какие стили в каких случаях применять ................................................................................... 106
Комментарии CSS ....................................................................................................................... 107
Что дальше? ................................................................................................................................ 108
Глава 8. Параметры шрифта и фона. Контейнеры .............................................. 109
Параметры шрифта ..................................................................................................................... 109
Параметры, управляющие разрывом строк .............................................................................. 114
Параметры вертикального выравнивания ................................................................................. 116
Параметры тени у текста ............................................................................................................ 117
Параметры фона .......................................................................................................................... 118
Контейнеры. Встроенные контейнеры ...................................................................................... 120
Представление для нашего Web-сайта, часть 1 ........................................................................ 122
Что дальше? ................................................................................................................................ 125
Глава 9. Параметры абзацев, списков и отображения ........................................ 126
Параметры вывода текста .......................................................................................................... 126
Параметры списков ..................................................................................................................... 127
Параметры отображения ............................................................................................................ 129
Представление для нашего Web-сайта, часть 2 ........................................................................ 131
Создание полосы навигации ...................................................................................................... 132
Параметры курсора ..................................................................................................................... 133
Что дальше? ................................................................................................................................ 134
Глава 10. Контейнерный Web-дизайн .................................................................... 135
Блочные контейнеры .................................................................................................................. 135
Основы контейнерного Web-дизайна ........................................................................................ 136
Старые разновидности Web-дизайна и их критика .......................................................... 137
Сущность контейнерного Web-дизайна ............................................................................ 139
Представление для нашего Web-сайта, часть 3 ........................................................................ 140
Стили, задающие параметры контейнеров ............................................................................... 142
Параметры размеров ........................................................................................................... 142
Параметры размещения. Плавающие контейнеры ........................................................... 143
Представление для нашего Web-сайта, часть 4 ........................................................................ 145
Параметры переполнения. Контейнеры с прокруткой ............................................................ 146
Представление для нашего Web-сайта, часть 5 ........................................................................ 148
Что дальше? ................................................................................................................................ 150
Глава 11. Отступы, рамки и выделение ................................................................. 151
Параметры отступов ................................................................................................................... 151
Параметры рамки ........................................................................................................................ 154
Представление для нашего Web-сайта, часть 6 ........................................................................ 156
Полная полоса навигации ........................................................................................................... 160
Параметры выделения ................................................................................................................ 163
Что дальше? ................................................................................................................................ 165
Глава 12. Параметры таблиц .................................................................................... 166
Параметры выравнивания .......................................................................................................... 166
Параметры отступов и рамок ..................................................................................................... 167
Параметры размеров ................................................................................................................... 168
Прочие параметры ...................................................................................................................... 169
Представление для нашего Web-сайта, часть 7 ........................................................................ 170
Что дальше? ................................................................................................................................ 171
Глава 13. Специальные селекторы ......................................................................... 172
Комбинаторы ............................................................................................................................... 172
Селекторы по атрибутам тега .................................................................................................... 174
Псевдоэлементы .......................................................................................................................... 176
Псевдоклассы .............................................................................................................................. 177
Псевдоклассы гиперссылок ................................................................................................ 177
Структурные псевдоклассы ................................................................................................ 178
Псевдоклассы :not и * ......................................................................................................... 182
Представление для нашего Web-сайта, часть 8 ........................................................................ 182
Что дальше? ................................................................................................................................ 184
ЧАСТЬ III. ПОВЕДЕНИЕ WEB-СТРАНИЦ. WEB-СЦЕНАРИИ ..................... 187
Глава 14. Введение в Web-программирование. Язык JavaScript ...................... 189
Примеры Web-сценариев ........................................................................................................... 189
Простейший Web-сценарий ............................................................................................... 189
Более сложный Web-сценарий ........................................................................................... 190
Как Web-сценарии помещаются в Web-страницу .................................................................... 192
Язык программирования JavaScript ........................................................................................... 193
Основные понятия JavaScript ............................................................................................. 194
Типы данных JavaScript ...................................................................................................... 195
Переменные ................................................................................................................................ 197
Именование переменных .................................................................................................... 197
Объявление переменных .................................................................................................... 197
Операторы .................................................................................................................................. 198
Арифметические операторы .............................................................................................. 198
Оператор объединения строк ............................................................................................. 199
Операторы присваивания ................................................................................................... 199
Операторы сравнения ......................................................................................................... 200
Логические операторы ........................................................................................................ 201
Оператор получения типа typeof ........................................................................................ 202
Совместимость и преобразование типов данных ............................................................. 203
Приоритет операторов ........................................................................................................ 204
Сложные выражения JavaScript ................................................................................................. 206
Блоки ................................................................................................................................... 206
Условные выражения .......................................................................................................... 206
Условный оператор ? .......................................................................................................... 207
Выражения выбора ............................................................................................................. 208
Циклы .................................................................................................................................. 209
Цикл со счетчиком ..................................................................................................... 209
Цикл с постусловием ................................................................................................. 210
Цикл с предусловием ................................................................................................. 211
Прерывание и перезапуск цикла ............................................................................... 211
Функции ...................................................................................................................................... 212
Объявление функций .......................................................................................................... 212
Функции и переменные. Локальные переменные ............................................................ 213
Вызов функций .................................................................................................................... 213
Присваивание функций. Функциональный тип данных .................................................. 215
Массивы ...................................................................................................................................... 215
Ссылки ........................................................................................................................................ 217
Объекты ...................................................................................................................................... 218
Понятия объекта и экземпляра объекта ............................................................................ 218
Получение экземпляра объекта .......................................................................................... 219
Работа с экземпляром объекта ........................................................................................... 222
Встроенные объекты языка JavaScript .............................................................................. 223
Объект Object и использование его экземпляров ............................................................. 225
Объекты Web-обозревателя. Объектная модель документа DOM ................................. 226
Свойства и методы экземпляра объекта ............................................................................ 227
Правила написания выражений ................................................................................................. 228
Комментарии JavaScript ............................................................................................................. 229
Что дальше? ................................................................................................................................ 229
Глава 15. Библиотека Ext Core и объекты Web-обозревателя........................... 230
Библиотека Ext Core ................................................................................................................... 230
Зачем нужна библиотека Ext Core ..................................................................................... 230
Использование библиотеки Ext Core ................................................................................. 232
Ключевые объекты библиотеки Ext Core .......................................................................... 233
Доступ к нужному элементу Web-страницы..................................................................... 234
Доступ сразу к нескольким элементам Web-страницы .................................................... 236
Доступ к родительскому, дочерним и соседним элементам Web-страницы ................. 239
Получение и задание размеров и местоположения элемента Web-страницы ................ 241
Получение размеров Web-страницы и клиентской области окна Web-обозревателя ... 243
Получение и задание значений атрибутов тега ................................................................ 243
Управление привязкой стилевых классов ......................................................................... 244
Получение и задание значений атрибутов стиля .............................................................. 246
Управление видимостью элементов Web-страницы ........................................................ 248
Добавление и удаление элементов Web-страницы .......................................................... 249
Обработка событий ............................................................................................................. 254
Понятие события и его обработки ............................................................................ 254
События объекта Element .......................................................................................... 255
Привязка и удаление обработчиков событий .......................................................... 256
Всплытие и действие по умолчанию ........................................................................ 258
Получение сведений о событии. Объект EventObject ............................................. 260
Объект CompositeElementLite ............................................................................................. 261
Объекты Web-обозревателя ....................................................................................................... 263
Что дальше? ................................................................................................................................ 265
Глава 16. Создание интерактивных Web-страниц ............................................... 266
Управление размерами блочных контейнеров ......................................................................... 266
Выделение пункта полосы навигации при наведении на него курсора мыши ...................... 269
Переход на целевую Web-страницу при щелчке на пункте полосы навигации..................... 270
Скрытие и открытие вложенных списков ................................................................................. 273
Выделение пункта полосы навигации, соответствующего открытой в данный момент Web-странице .............................................................................................................................. 275
Скрытие и открытие текста примеров ...................................................................................... 279
Что дальше? ................................................................................................................................ 282
ЧАСТЬ IV. ПОДГРУЖАЕМОЕ И ГЕНЕРИРУЕМОЕ СОДЕРЖИМОЕ. СЕМАНТИЧЕСКАЯ РАЗМЕТКА ........................................... 283
Глава 17. Подгружаемое содержимое ...................................................................... 285
Монолитные и блочные Web-страницы .................................................................................... 285
Подгрузка содержимого Web-страниц ...................................................................................... 287
Реализация подгрузки содержимого ......................................................................................... 288
Что дальше? ................................................................................................................................ 296
Глава 18. Генерируемое содержимое ....................................................................... 297
Введение в генерируемое содержимое. Базы данных.............................................................. 297
Реализация генерируемого содержимого ................................................................................. 299
Создание базы данных ........................................................................................................ 300
Генерирование полосы навигации ..................................................................................... 301
Сортировка базы данных .................................................................................................... 303
Что дальше? ................................................................................................................................ 304
Глава 19. Семантическая разметка данных .......................................................... 305
Введение в семантическую разметку данных ........................................................................... 305
Реализация семантической разметки средствами JavaScript ................................................... 306
Создание раздела "См. также" ................................................................................................... 308
Что дальше? ................................................................................................................................ 314
ЧАСТЬ V. ПОСЛЕДНИЕ ШТРИХИ ....................................................................... 315
Глава 20. Web-формы и элементы управления .................................................... 317
Web-формы и элементы управления HTML ............................................................................. 317
Назначение Web-форм и элементов управления. Серверные приложения............................ 318
Создание Web-форм и элементов управления.......................................................................... 320
Создание Web-форм ........................................................................................................... 320
Создание элементов управления ........................................................................................ 320
Поле ввода .................................................................................................................. 321
Поле ввода пароля ...................................................................................................... 322
Поле ввода значения для поиска ............................................................................... 323
Область редактирования............................................................................................ 323
Кнопка ......................................................................................................................... 324
Флажок ........................................................................................................................ 325
Переключатель ........................................................................................................... 325
Список, обычный или раскрывающийся .................................................................. 326
Надпись ....................................................................................................................... 328
Группа ......................................................................................................................... 329
Прочие элементы управления ................................................................................... 330
Специальные селекторы CSS, предназначенные для работы с элементами управления .................................................................................................................. 330
Работа с элементами управления ....................................................................................... 331
Свойства и методы объекта HTMLElement, применяемые для работы с элементами управления .......................................................................................... 331
Свойства и методы объекта Element, применяемые для работы с элементами управления .................................................................................................................. 336
События элементов управления ................................................................................ 336
Реализация поиска на Web-сайте ............................................................................................... 337
Подготовка базы данных .................................................................................................... 338
Создание Web-формы ......................................................................................................... 338
Написание Web-сценария, выполняющего поиск ............................................................ 339
Что дальше? ................................................................................................................................ 345
Глава 21. Свободно позиционируемые элементы Web-страницы .................... 346
Свободно позиционируемые контейнеры ................................................................................. 347
Понятие свободно позиционируемого элемента Web-страницы .................................... 347
Создание свободно позиционируемых элементов ........................................................... 348
Средства библиотеки Ext Core для управления свободно позиционируемыми элементами .......................................................................................................................... 351
Реализация усовершенствованного поиска .............................................................................. 351
Создание контейнера с Web-формой поиска .................................................................... 352
Написание Web-сценария, выполняющего поиск ............................................................ 354
Что дальше? ................................................................................................................................ 358
Глава 22. Программируемая графика .................................................................... 359
Канва ........................................................................................................................................... 359
Контекст рисования .................................................................................................................... 360
Рисование простейших фигур .................................................................................................... 361
Задание цвета, уровня прозрачности и толщины линий .......................................................... 362
Рисование сложных фигур ......................................................................................................... 363
Как рисуются сложные контуры ........................................................................................ 363
Перо. Перемещение пера .................................................................................................... 364
Прямые линии ..................................................................................................................... 364
Дуги ..................................................................................................................................... 365
Кривые Безье ....................................................................................................................... 366
Прямоугольники .................................................................................................................. 368
Задание стиля линий ........................................................................................................... 369
Вывод текста ............................................................................................................................... 370
Использование сложных цветов ................................................................................................ 372
Линейный градиентный цвет ............................................................................................. 372
Радиальный градиентный цвет .......................................................................................... 375
Графический цвет................................................................................................................ 376
Вывод внешних изображений .................................................................................................... 378
Создание тени у рисуемой графики .......................................................................................... 380
Преобразования системы координат ......................................................................................... 380
Сохранение и загрузка состояния ...................................................................................... 381
Перемещение начала координат канвы ............................................................................. 381
Поворот системы координат .............................................................................................. 382
Изменение масштаба системы координат ......................................................................... 383
Управление наложением графики ............................................................................................. 384
Создание маски ........................................................................................................................... 386
Создание графического логотипа Web-сайта ........................................................................... 386
Заключение .................................................................................................................. 391
Приложение. Расширения CSS ................................................................................. 393
Многоцветные рамки .................................................................................................................. 394
Рамки со скругленными углами ................................................................................................. 394
Выделение со скругленными углами ........................................................................................ 396
Многоколоночная верстка.......................................................................................................... 397
Преобразования CSS ................................................................................................................... 401
Предметный указатель .............................................................................................. 405