В корзину
Купить в 1 клик
Бесплатная доставка Новой Почтой
Отправка на следующий рабочий день
Отправка на следующий рабочий день
Описание
2011г.
Количество странциц: 336
HTML и CSS являются основными рабочими инструментами в современном веб-дизайне и веб-программировании. Параллельное использование этих технологий для создания качественных интернет-сайтов требует от разработчика не только знания самих языков программирования, но и «продвинутых» техник и приемов, позволяющих изящно решать поставленные задачи, тратя на это намного меньше времени и усилий. С помощью данной книги HTML и CSS: путь к совершенству. Хеник вы узнаете, как эффективно использовать в своей работе подобные техники. Неважно, верстаете ли вы HTML-страницы вручную или используете в своей работе готовые шаблоны, — это издание поможет вам более продуктивно работать на каждом из этапов разработки сайта: от разметки страниц до использования типографики и работы с цветом.
Оглавление книги:
Предисловие........................................................................................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 Директивы................................................................................................................................... 319 Вычисленные значения и их округление ...................................................................................................................... 320 Префиксы свойств -moz и -webkit, специфичные для производителей ................ 321 Значение inherit ........................................................................................................................ 321 Как прятать вещи: z-index и clip .......................................................................................... 322 Счетчики ...................................................................................................................................... 322 Модели визуального представления элементов ............................................................ 323 Значения кодовых позиций Unicode и свойство content ........................................... 324 Ужасные стороны .................................................................................................................324 Элементы marquee и blink ..................................................................................................... 325 Свойства пользовательского интерфейса MSIE ........................................................... 325 Атрибут align .............................................................................................................................. 325 Атрибут style .............................................................................................................................. 326 div-itis ........................................................................................................................................... 326 Атрибуты обработчика событий ......................................................................................... 327 Беспричинное подчеркивание ............................................................................................. 327 Атрибут http-equiv ................................................................................................................... 328 Подводя итог ..........................................................................................................................328 Приложение. URI, архитектура клиент-сервер и HTTP .................329 Базовая архитектура клиент-сервер ..............................................................................329 Что каждый веб-разработчик должен знать о HTTP ...............................................330 Коротко о MIME-типах ......................................................................................................332 Управление объемом запроса ...........................................................................................332
Количество странциц: 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 Директивы................................................................................................................................... 319 Вычисленные значения и их округление ...................................................................................................................... 320 Префиксы свойств -moz и -webkit, специфичные для производителей ................ 321 Значение inherit ........................................................................................................................ 321 Как прятать вещи: z-index и clip .......................................................................................... 322 Счетчики ...................................................................................................................................... 322 Модели визуального представления элементов ............................................................ 323 Значения кодовых позиций Unicode и свойство content ........................................... 324 Ужасные стороны .................................................................................................................324 Элементы marquee и blink ..................................................................................................... 325 Свойства пользовательского интерфейса MSIE ........................................................... 325 Атрибут align .............................................................................................................................. 325 Атрибут style .............................................................................................................................. 326 div-itis ........................................................................................................................................... 326 Атрибуты обработчика событий ......................................................................................... 327 Беспричинное подчеркивание ............................................................................................. 327 Атрибут http-equiv ................................................................................................................... 328 Подводя итог ..........................................................................................................................328 Приложение. URI, архитектура клиент-сервер и HTTP .................329 Базовая архитектура клиент-сервер ..............................................................................329 Что каждый веб-разработчик должен знать о HTTP ...............................................330 Коротко о MIME-типах ......................................................................................................332 Управление объемом запроса ...........................................................................................332