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

Директивы................................................................................................................................... 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

Каталог книг

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

Доставка HTML и CSS: путь к совершенству. Хеник почтой наложным платежом.