Звоните: (067) 644-70-74
Напишите нам burtrest@gmail.com

HTML и CSS: путь к совершенству. Хеник

167.70 грн.

Артикул: 1c8d6e6d856f Категория:

Описание

год-2011

336 страниц

HTML и CSS являются главными рабочими инструментами в сегодняшнем веб-дизайне и веб-программировании. Параллельное применение таких технологий для создания качественных интернет-сайтов требует от разработчика не только лишь познания самих языков, но еще и «продвинутых» техник и приемов, позволяющих изящно решать поставленные задачи, тратя на это гораздо менее времени и усилий. При помощи данной книжки HTML и CSS: путь к совершенству. Хеник вы узнаете, как эффективно применять в собственной работе такие техники. Неважно, верстаете ли вы HTML-страницы руками или используете в собственной работе готовые шаблоны, — это издание книги поможет вам более продуктивно вести работу на каждом из этапов разработки сайта: от разметки страниц до эксплуатации типографики и работы с цветом.

Оглавление книги:
HTML и CSS: путь к совершенству. Хеник
Предисловие…………………………………………………………………………….15
Для кого и о чем эта книга?……………………………………………………………………………………. 15
Что значит «самое интересное»? ……………………………………………………………………………… 15
Что нужно знать для чтения этой книги …………………………………………………………………. 16
Идеальный читатель …………………………………………………………………………………………………… 16
Книга может показаться скучной (либо слишком сложной)  ……………………………… 17
Цели этой книги ………………………………………………………………………………………………………. 18
Чего нет в этой книге …………………………………………………………………………………………………. 19
Веб-стандарты …………………………………………………………………………………………………………….. 20
Photoshop ……………………………………………………………………………………………………………………… 21
Чем интересен сопутствующий сайт  ………………………………………………………………………. 21
Условные обозначения ……………………………………………………………………………………………….. 22
«Почувствуй силу, Люк!» ………………………………………………………………………………………….. 24
Примеры кода ……………………………………………………………………………………………………………… 24
Слова благодарности ………………………………………………………………………………………………….. 25
Глава 1. Сущность гипертекста ………………………………………………….27
Интернет без ссылок ………………………………………………………………………………………………. 27
URI ……………………………………………………………………………………………………………………………. 28
Управление ссылками …………………………………………………………………………………………….. 29
Усовершенствование взаимодействия с пользователем с помощью ссылок …….. 29
Проблемы применения гипертекста …………………………………………………………………….. 30
Глава 2. Работа с разметкой HTML …………………………………………….32
Синтаксис HTML ……………………………………………………………………………………………………. 32
Теги, элементы и атрибуты ………………………………………………………………………………………… 33
Структура страницы …………………………………………………………………………………………………… 35
Режимы отображения, версии HTML и объявление
типа документа (DTD) …………………………………………………………………………………………. 35
HTML или XHTML? …………………………………………………………………………………………………. 36
Strict, Transitional или Frameset? ……………………………………………………………………………… 36
Два типа блочных моделей ……………………………………………………………………………………….. 37
Выбор правильного типа документа ………………………………………………………………………… 38
Универсальные атрибуты ………………………………………………………………………………………. 38
Создание стилевых крючков с помощью class and id …………………………………………….. 38
Описание контента с помощью title и lang ……………………………………………………………… 39
Атрибут contenteditable в HTML5 …………………………………………………………………………… 41
Разделение контента, структуры, презентации и интерфейса  …………………………. 42
Создание абсолютно безопасного сайта ………………………………………………………………….. 42
Разделение на практике …………………………………………………………………………………………….. 42
Работа с деревом документа  …………………………………………………………………………………….. 43
Браузеры, парсинг и отображение ………………………………………………………………………… 45
Динамический HTML, Ajax и отображение ……………………………………………………………. 46
Глава 3. Обзор CSS ……………………………………………………………………47
Связь таблиц стилей с HTML-документом ……………………………………………….47
Связь с помощью тега link …………………………………………………………………………………………. 47
Определение версии Internet Explorer с помощью условных комментариев ……. 48
Замена тега link тегом style  ………………………………………………………………………………………. 49
Применение @import ………………………………………………………………………………………………….. 49
Будьте осторожны с атрибутами style! …………………………………………………………………….. 50
Определение правил
для специфических сред ………………………………………………………………………………………….. 50
Применение селекторов стилей ……………………………………………………………………………. 51
Родительские, дочерние и братские элементы: отношения узлов элементов ……. 52
Простые селекторы …………………………………………………………………………………………………….. 53
Комбинации селекторов ……………………………………………………………………………………………. 53
Селектор дочерних элементов ………………………………………………………………………………….. 54
Конфликты правил, приоритеты и очередность ………………………………………………… 55
Приоритет селекторов ……………………………………………………………………………………………….. 55
Конфликты правил …………………………………………………………………………………………………. 56
Наследование значений …………………………………………………………………………………………….. 56
Параметры CSS и обзор единиц измерения ………………………………………………………… 57
Единицы измерения CSS  ………………………………………………………………………………………. 57
Единицы измерения в переменных средах ……………………………………………………………… 58
Зерно и размер пиксела ……………………………………………………………………………………………… 58
Единицы измерения для печатных форм………………………………………………………………… 59
Размер шрифта. Ключевые слова …………………………………………………………………………….. 60
Цвет. Единицы измерения…………………………………………………………………………………………. 60
Основные свойства визуализации в CSS  ……………………………………………………………….. 61
Глава 4. Разработка в соответствии со стандартами …………………..64
Обзор стандартов Всемирной паутины  ………………………………………………………………. 64
Для чего нужны стандарты? ………………………………………………………………………………….. 65
Интероперабельность ………………………………………………………………………………………………… 66
Рыночные силы  ………………………………………………………………………………………………………….. 66
Совместимость снизу вверх  ……………………………………………………………………………………… 66
Доступность  ………………………………………………………………………………………………………………… 67
Приоритеты поставщиков …………………………………………………………………………………………. 67
Косность стандартов …………………………………………………………………………………………………… 67
Факторы успеха (и их отсутствие) …………………………………………………………………………… 68
Жесткий конструктивизм …………………………………………………………………………………………. 68
Третий путь — дружественность к стандартам ……………………………………………………. 68
Преимущества дружественной к стандартам разработки …………………………………….. 69
Правила дружественной к стандартам разработки ……………………………………………….. 69
Глава 5. Создание эффективных стилей и структуры …………………71
Четыре правила
для эффективного создания стиля ……………………………………………………………………… 71
Правило № 1. Будь проще …………………………………………………………………………………………. 72
Правило № 2. Будь гибким ……………………………………………………………………………………….. 75
Правило № 3. Будь последовательным …………………………………………………………………… 78
Правило № 4. Придерживайся своего курса …………………………………………………………… 80
CSS-дзен …………………………………………………………………………………………………………………… 82
Информационная архитектура и удобство использования Интернета ………….. 84
Мультиразмерность ……………………………………………………………………………………………………. 85
Навигация: ориентация и указатели ………………………………………………………………………… 86
Стратегия посещения сайтов…………………………………………………………………………………….. 88
Рекомендации по созданию удобных интерфейсов ………………………………………………. 89
Предсказание поведения пользователей с помощью сценариев и тестов  …………. 91
Таксономия и номенклатура ……………………………………………………………………………………… 92
Применение таксономии к таблицам стилей страницы ……………………………………….. 93
Новые структурные элементы (HTML5) ……………………………………………………………….. 95
Глава 6. Создание макета в CSS …………………………………………………97
Блочная модель CSS
и контроль размера элементов ……………………………………………………………………………. 97
Режим совместимости и строгий режим ……………………………………………………………… 97
Значение auto …………………………………………………………………………………………………………… 98
Свойство over? ow ……………………………………………………………………………………………………….. 99
Ограниченные, но не фиксированные размеры элементов ………………………………… 101
Управление непредсказуемым ………………………………………………………………………………… 102
Отступы, поля и рамки  …………………………………………………………………………………………103
Отрицательные поля  ……………………………………………………………………………………………….. 103
Схлопывание полей ………………………………………………………………………………………………….. 104
Рамки ………………………………………………………………………………………………………………………….. 105
Отступы  …………………………………………………………………………………………………………………….. 106
Блочное поведение корневых элементов документа …………………………………………… 106
Параметры блоков и процентное значение …………………………………………………………… 107
Поток элементов …………………………………………………………………………………………………….107
Элементы inline  ………………………………………………………………………………………………………… 108
Элементы block …………………………………………………………………………………………………………. 108
Элементы inline-block  ……………………………………………………………………………………………… 109
Использование display для изменения потока элементов ………………………………..109
Свойство display ………………………………………………………………………………………………………… 110
Свойства ? oat и clear ……………………………………………………………………………………………..110
Правила свойства ? oat  …………………………………………………………………………………………….. 111
Отмена значений ? oat с помощью clear  ………………………………………………………………… 112
Контекст ? oat  ……………………………………………………………………………………………………………. 112
Создание макета с несколькими колонками ………………………………………………………113
Конвертация двухколоночных макетов из разметки в CSS  ………………………………. 114
Как работают двухколоночные стили ……………………………………………………………………. 115
Преимущества использования CSS для создания макетов ………………………………… 117
Переход с двух колонок на три ……………………………………………………………………………….. 118
Если колонок больше трех ………………………………………………………………………………………. 120
Семантически пустые контейнеры для многоколоночных макетов  ………………… 120
Дополнительные функции в CSS3 …………………………………………………………………………. 121
Свойства позиционирования в CSS …………………………………………………………………….121
Как работает позиционирование  …………………………………………………………………………… 121
Связанные элементы позиционирования ……………………………………………………………… 122
Видимость и свойство z-index  ……………………………………………………………………………..124
Изменение видимости, не затрагивающее поток документов ……………………………. 124
Стек …………………………………………………………………………………………………………………………….. 125
Создание точного кода и макета для навигации ………………………………………………..126
Ориентирование списка …………………………………………………………………………………………… 127
Размещение навигационного списка в заданной области …………………………………… 129
Типы верстки и сетка……………………………………………………………………………………………..131
Фиксированные, пропорциональные и «резиновые» макеты ……………………………. 131
Создание сетки ………………………………………………………………………………………………………….. 133
Правило третей, золотое сечение и ряд Фибоначчи ……………………………………………. 135
Внедрение гибкой сетки …………………………………………………………………………………………… 136
Глава 7. Работа со списками  …………………………………………………..139
Упорядоченные и неупорядоченные списки………………………………………………………139
Стили по умолчанию для упорядоченных и неупорядоченных списков
в разных браузерах …………………………………………………………………………………………………. 139
Создание эффективных упорядоченных и неупорядоченных списков ……………. 140
Свойство list-style-type и атрибут type ………………………………………………………………….. 140
Nav-элемент (HTML5) …………………………………………………………………………………………….. 141
Изменение области упорядоченного списка ………………………………………………………… 143
Другие функции списков ………………………………………………………………………………………144
Контурные списки …………………………………………………………………………………………………….. 144
Внутристрочные серийные списки ………………………………………………………………………… 145
Изменение внешнего вида ссылок в футере …………………………………………………………. 145
Фоновые буллиты?  ………………………………………………………………………………………………….. 145
Оформление навигации ………………………………………………………………………………………..146
Размещение навигации в коде документа ……………………………………………………………… 146
Способ расположения основной навигации …………………………………………………………. 147
Размещение навигации в футере ……………………………………………………………………………. 148
Cписки определений ………………………………………………………………………………………………… 149
Создание стилей для списков определений  …………………………………………………………. 150
Пример разметки текста словаря ……………………………………………………………………………. 150
Пример разметки диалога………………………………………………………………………………………… 153
Глава 8. Заголовки, гиперссылки,
строковые элементы и цитаты ………………………………………………….. 155
Заголовки и их правильное использование ……………………………………………………….155
Заголовки в печати …………………………………………………………………………………………………… 155
Оптимальное размещение заголовка   ……………………………………………………………………. 157
Оформление элементов заголовка ………………………………………………………………………158
Размеры и шрифты заголовков ………………………………………………………………………………. 158
Нормализация размеров заголовка ………………………………………………………………………… 158
Выделение заголовков    …………………………………………………………………………………………… 159
Разметка ссылки …………………………………………………………………………………………………….159
Атрибуты ссылок ………………………………………………………………………………………………………. 160
Эффективное применение атрибута href ………………………………………………………………. 160
Создание ссылок на специальные области документа ………………………………………… 161
Эффективные названия ссылок и значения заголовка  ………………………………………. 162
Оформление ссылок ………………………………………………………………………………………………163
Псевдоклассы ссылок  ……………………………………………………………………………………………… 164
Применение display: block для улучшения внешнего вида ссылки  ………………….. 165
Свойство text-decoration ………………………………………………………………………………………….. 166
Свойство cursor …………………………………………………………………………………………………………. 166
Добавление семантических значений  строковыми элементами …………………….167
Цитаты ……………………………………………………………………………………………………………………..168
Глава 9. Цвета и фоны …………………………………………………………….170
Теория цвета и практика применения веб-цветов  ……………………………………………170
Удобство, доступность и цвет ………………………………………………………………………………….. 170
Аддитивная цветовая модель ………………………………………………………………………………….. 171
Цветовая модель HSB ………………………………………………………………………………………………. 172
Субтрактивная цветовая модель  ……………………………………………………………………………. 172
Дизайн, контраст и дополняющие цвета ……………………………………………………………….. 173
Идентификация цветов, вкратце ……………………………………………………………………………. 174
Графические приложения и палитра, безопасная для Сети ……………………………….. 176
Разработка собственной палитры  ………………………………………………………………………….. 176
Фоны CSS ……………………………………………………………………………………………………………….178
Свойство background-position  ………………………………………………………………………………… 178
Свойство CSS background: краткая запись  ………………………………………………………….. 179
Составление фоновых изображений …………………………………………………………………..180
«Ложные колонки» …………………………………………………………………………………………………… 181
Текстуры и образцы черепичного фона …………………………………………………………………. 183
Огромные фоновые текстуры и специальные вставки ……………………………………….. 183
Падающие тени, глянцевые эффекты и закругленные углы ………………………………. 184
Растровая копия и замена изображений по методу Фарнера   ………………………..185
Правила таблицы стилей FIR …………………………………………………………………………………. 187
Минусы FIR ………………………………………………………………………………………………………………. 187
Оптимизация работы сервера с помощью спрайтов  ………………………………………..188
Глава 10. Таблицы данных………………………………………………………191
Недостатки макетных таблиц ………………………………………………………………………………191
Исходный порядок: квадратный стержень, круглая дыра ………………………………….. 191
CSS-дзен становится легендой ……………………………………………………………………………….. 192
Неизбежное рабство перед шаблонами …………………………………………………………………. 192
Позиционирование оказывается бесполезным …………………………………………………….. 193
Части таблицы данных ………………………………………………………………………………………….193
Пример разметки таблицы: все вперемешку ………………………………………………………… 195
Создание ячеек ……………………………………………………………………………………………………….197
Построение таблицы и размещение данных …………………………………………………………. 199
Верхние/нижние шапки и заголовочные ячейки таблицы ………………………………201
Селекторы атрибутов и дочерние селекторы ……………………………………………………….. 202
Уменьшение контраста верхней и нижней шапки ……………………………………………….. 202
Добавление эффектов наведения …………………………………………………………………………… 204
Глава 11. Изображения и мультимедиа ……………………………………205
Замещенные элементы ………………………………………………………………………………………….205
Подготовка изображения к обработке ………………………………………………………………..207
Что такое атрибут alt ………………………………………………………………………………………………… 207
Размеры и границы изображения …………………………………………………………………………… 207
Обработка изображений ……………………………………………………………………………………….209
Обрезка ………………………………………………………………………………………………………………………. 209
Матирование: создание воображаемой «рамки» ………………………………………………….. 210
Ресемплинг: изменение абсолютного размера изображения ……………………………… 211
Изменения уровня: оптимизация контраста фотографий ………………………………….. 212
Применение нескольких настроек …………………………………………………………………………. 214
Работа с цветовыми профилями ………………………………………………………………………….214
Оптимизация изображений ………………………………………………………………………………….216
Выбор правильного формата изображения…………………………………………………………… 216
Как найти золотую середину между размером и качеством ………………………………. 216
Публикация изображений …………………………………………………………………………………….217
Сохранение изображений в порядке ……………………………………………………………………… 218
Публикация изображений и управление сайтом с помощью CMS …………………… 218
Правила публикации изображений ……………………………………………………………………….. 220
Оформление изображений и встраиваемого контента …………………………………….220
Расположение изображения в колонке………………………………………………………………….. 221
Создание заголовков для изображений …………………………………………………………………. 221
Работа с эскизами в режиме галереи и показа слайдов …………………………………….222
Lightbox: эскизы, галереи и показ слайдов ……………………………………………………………. 224
SlideShowPro ……………………………………………………………………………………………………………… 224
Движение и звук: добавление Flash-видео и Flash-презентаций
с помощью SWFObject………………………………………………………………………………………..225
Добавление мультимедиа без контейнера …………………………………………………………..226
Рассказ о трех компаниях ………………………………………………………………………………………… 228
Использование Flash ………………………………………………………………………………………………… 228
Использование простой разметки для публикации
мультимедийного контента …………………………………………………………………………………… 229
Стили для встраиваемого контента ……………………………………………………………………….. 229
Как решить проблемы встраиваемого контента с помощью поля заголовка
HTTP Content-Disposition ……………………………………………………………………………………. 230
Важно сохранять объективность …………………………………………………………………………….. 230
Элементы video и audio (HTML5) …………………………………………………………………………. 230
Элемент canvas (HTML5) ……………………………………………………………………………………….. 232
Глава 12. Веб-типографика……………………………………………………..234
Краткая история буквенных форм ………………………………………………………………………234
Происхождение современных западных буквенных форм …………………………………. 235
Пресс Гутенберга и искусство типографики …………………………………………………………. 235
Появление цифрового типографского набора ……………………………………………………… 236
Ограничений много, но ожидания не меняются…………………………………………………… 237
Типографский глоссарий на практике ………………………………………………………………..237
Алиасинг и сглаживание ……………………………………………………………………………………….240
Стили шрифтов, читаемость и разборчивость …………………………………………………..243
Обеспечение читаемости …………………………………………………………………………………………. 243
Обеспечение разборчивости ……………………………………………………………………………………. 244
Шапка и мелкий шрифт …………………………………………………………………………………………… 245
Размер шрифта ……………………………………………………………………………………………………….246
Выбор правильных единиц размера шрифта ………………………………………………………… 247
Пересчет размеров для em и процентов …………………………………………………………………. 248
Ключевые слова для размеров шрифтов ……………………………………………………………….. 248
Работа со шрифтами ………………………………………………………………………………………………249
Проблема небольшого выбора ………………………………………………………………………………… 249
Использование шрифтов: свойство font-family ……………………………………………………. 252
Поиск канонических названий гарнитур ………………………………………………………………. 254
Доступ к шрифту системы по умолчанию при помощи свойства font ……………… 255
Кратко о кодировке ………………………………………………………………………………………………..255
Что такое кодировка? ……………………………………………………………………………………………….. 256
ASCII, ISO 8859-1, Unicode и UTF-8 …………………………………………………………………….. 256
Выбор кодировки………………………………………………………………………………………………………. 257
Представления символов, не принадлежащих ASCII, в виде сущностей ………… 258
Руководство по использованию шрифтов ………………………………………………………….261
Предсказуемость, предпочтение, паника ………………………………………………………………. 261
Оценка масштабов содержимого ……………………………………………………………………………. 261
Как разнообразить шрифт: гарнитура, размер, вес, стиль, цвет …………………………. 263
Настройка шрифтов вокруг разрывов …………………………………………………………………… 264
Оформление отрывков одинакового приоритета ………………………………………………… 265
Работа со шрифтами …………………………………………………………………………………………………. 266
Разное о типографике в CSS …………………………………………………………………………………267
Свойство line-height …………………………………………………………………………………………………. 267
Свойства font-variant и text-transform …………………………………………………………………… 268
Свойства letter-spacing и word-spacing ………………………………………………………………….. 268
Свойство white-space ………………………………………………………………………………………………… 269
Веб-типографика на практике ……………………………………………………………………………..269
Глава 13. Понятные и доступные формы …………………………………270
Разработка эффективных форм …………………………………………………………………………..270
Сетевые приложения, пользовательская перспектива и выбор дизайна ………….. 270
Организация пользовательского интерфейса при помощи функций ……………….. 272
Десять правил разработки эффективных веб-форм и приложений ………………….. 273
Оценка и структура ………………………………………………………………………………………………..274
Определение требований …………………………………………………………………………………………. 275
Разметка и структура …………………………………………………………………………………………….277
Структура, отображение и поведение простой формы …………………………………….280
Созданные формой запросы get ……………………………………………………………………………… 281
Кодирование символов в URL: сущности ASCII …………………………………………………. 282
Метод post и загрузки файлов ………………………………………………………………………………… 283
Изменение размера и внешнего вида отдельных элементов управления …………. 283
Создание прототипа и макета ………………………………………………………………………………285
Основы прототипирования ……………………………………………………………………………………… 285
Дизайнерские шаблоны, исходные стили и макеты форм ………………………………….. 286
Группировка элементов управления по внешнему виду …………………………………….. 288
Обязательные для заполнения поля и другие ограничения
при подтверждении ……………………………………………………………………………………………..290
Определение обязательных для заполнения полей …………………………………………….. 290
Поиск и распознавание пользовательских ошибок ввода …………………………………… 291
Атрибуты disabled и readonly ………………………………………………………………………………….. 292
Создание форм, доступных для всех …………………………………………………………………..293
Реализация форм с учетом доступности ……………………………………………………………….. 294
Поддержка перемещения по форме при помощи клавиатуры …………………………… 296
Свойства форм в HTML5 ……………………………………………………………………………………..297
Новые типы вводимых данных ……………………………………………………………………………….. 297
Атрибут required ……………………………………………………………………………………………………….. 298
Глава 14. Отрицательные стороны …………………………………………..300
Поразительные свойства Internet Explorer (особенно IE 6) ……………………………300
Войны браузеров: версия 2.0 …………………………………………………………………………………… 301
Слабая поддержка селекторов (или ее отсутствие) …………………………………………….. 302
Свойство hasLayout ………………………………………………………………………………………………….. 303
Удвоение отступа ………………………………………………………………………………………………………. 304
Значения expression() ………………………………………………………………………………………………. 304
Фильтры и переходы ActiveX …………………………………………………………………………………. 305
Поддержка PNG (или ее отсутствие) …………………………………………………………………….. 306
Слабая поддержка свойств ………………………………………………………………………………………. 306
Проблемы с XHTML и XML …………………………………………………………………………………… 307
Системное безобразие ……………………………………………………………………………………………307
Слабость шаблонов и сторонний контент …………………………………………………………….. 307
Валидация разметки как предпосылка к правильной реализации стилей……….. 308
Рекомендуется просматривать в… ………………………………………………………………………….. 308
Ступенчатая поддержка …………………………………………………………………………………………… 309
embed и object ……………………………………………………………………………………………………………. 311
Управление формами, встраиваемые модули и наложение элементов …………….. 311
Глупые причины неправильной разметки …………………………………………………………….. 312
Плохие соседи HTML и «тупиковые» элементы ………………………………………………313
Фреймы ………………………………………………………………………………………………………………………. 313
Элемент strike ……………………………………………………………………………………………………………. 315
Атрибут name …………………………………………………………………………………………………………….. 316
Элементы noscript и noframes ………………………………………………………………………………….. 317
Семантические искажения и ограниченный словарный запас HTML……………… 317
Строковые элементы ………………………………………………………………………………………………… 318
Управление вертикальным пространством: hr и br ……………………………………………… 318
Элемент pre и свойство white-space ……………………………………………………………………….. 319
Пародии на CSS ……………………………………………………………………………………………………..319
Директивы…………………………….