Бен Хеник
HTML и CSS. Путь к совершенству
Примеры текста из книги
СОДЕРЖАНИЕ
Предисловие ....15
Для кого и о чем эта книга?
Что значит «самое интересное»?
Что нужно знать для чтения этой книги
Идеальный читатель
Книга может показаться скучной (либо слишком сложной)
Цели этой книги
Чего нет в этой книге
Веб-стандарты
Photoshop
Чем интересен сопутствующий сайт
Условные обозначения
«Почувствуй силу, Люк!»
Примеры кода
Слова благодарности
Глава 1. Сущность гипертекста ....27
Интернет без ссылок
URI
Управление ссылками
Усовершенствование взаимодействия с пользователем с помощью ссылок
Проблемы применения гипертекста
Глава 2. Работа с разметкой HTML ....32
Синтаксис HTML
Теги, элементы и атрибуты
Структура страницы
Режимы отображения, версии HTML и объявление типа документа (DTD)
HTML или XHTML?
Strict, Transitional или Frameset?
Два типа блочных моделей
Выбор правильного типа документа
Универсальные атрибуты
Создание стилевых крючков с помощью class and id
Описание контента с помощью title и lang
Атрибут contenteditable в HTML5
Разделение контента, структуры, презентации и интерфейса
Создание абсолютно безопасного сайта
Разделение на практике
Работа с деревом документа
Браузеры, парсинг и отображение
Динамический HTML, Ajax и отображение
Глава 3. Обзор CSS ....47
Связь таблиц стилей с HTML-документом
Связь с помощью тега link
Определение версии Internet Explorer с помощью условных комментариев
Замена тега link тегом style
Применение ©import
Будьте осторожны с атрибутами style!
Определение правил для специфических сред
Применение селекторов стилей
Родительские, дочерние и братские элементы: отношения узлов элементов
Простые селекторы
Комбинации селекторов
Селектор дочерних элементов
Конфликты правил, приоритеты и очередность
Приоритет селекторов
Конфликты правил
Наследование значений
Параметры CSS и обзор единиц измерения
Единицы измерения CSS
Единицы измерения в переменных средах
Зерно и размер пиксела
Единицы измерения для печатных форм
Размер шрифта. Ключевые слова
Цвет. Единицы измерения
Основные свойства визуализации в CSS
Глава 4. Разработка в соответствии со стандартами ....64
Обзор стандартов Всемирной паутины
Для чего нужны стандарты?
Интероперабельность
Рыночные силы
Совместимость снизу вверх
Доступность
Приоритеты поставщиков
Косность стандартов
Факторы успеха (и их отсутствие)
Жесткий конструктивизм
Третий путь — дружественность к стандартам
Преимущества дружественной к стандартам разработки
Правила дружественной к стандартам разработки
Глава 5. Создание эффективных стилей и структуры ....71
Четыре правила для эффективного создания стиля
Правило № 1. Будь проще
Правило № 2. Будь гибким
Правило № 3. Будь последовательным
Правило № 4. Придерживайся своего курса
CSS-дзен
Информационная архитектура и удобство использования Интернета
Мультиразмерность
Навигация: ориентация и указатели
Стратегия посещения сайтов
Рекомендации по созданию удобных интерфейсов
Предсказание поведения пользователей с помощью сценариев и тестов
Таксономия и номенклатура
Применение таксономии к таблицам стилей страницы
Новые структурные элементы (HTML5)
Глава 6. Создание макета в CSS ....97
Блочная модель CSS и контроль размера элементов
Режим совместимости и строгий режим
Значение auto
Свойство overflow
Ограниченные, но не фиксированные размеры элементов
Управление непредсказуемым
Отступы, поля и рамки
Отрицательные поля
Схлопывание полей
Рамки
Отступы
Блочное поведение корневых элементов документа
Параметры блоков и процентное значение
Поток элементов
Элементы inline
Элементы block
Элементы inline-block
Использование display для изменения потока элементов
Свойство display
Свойства float и clear
Правила свойства float
Отмена значений float с помощью clear
Контекст float
Создание макета с несколькими колонками
Конвертация двухколоночных макетов из разметки в CSS
Как работают двухколоночные стили
Преимущества использования CSS для создания макетов
Переход с двух колонок на три
Если колонок больше трех
Семантически пустые контейнеры для многоколоночных макетов
Дополнительные функции в CSS3
Свойства позиционирования в CSS
Как работает позиционирование
Связанные элементы позиционирования
Видимость и свойство z-index
Изменение видимости, не затрагивающее поток документов
Стек
Создание точного кода и макета для навигации
Ориентирование списка
Размещение навигационного списка в заданной области
Типы верстки и сетка
Фиксированные, пропорциональные и «резиновые» макеты
Создание сетки
Правило третей, золотое сечение и ряд Фибоначчи
Внедрение гибкой сетки
Глава 7. Работа со списками ....139
Упорядоченные и неупорядоченные списки
Стили по умолчанию для упорядоченных и неупорядоченных списков в разных браузерах
Создание эффективных упорядоченных и неупорядоченных списков
Свойство list-style-type и атрибут type
Nav-элемент (HTML5)
Изменение области упорядоченного списка
Другие функции списков
Контурные списки
Внутристрочные серийные списки
Изменение внешнего вида ссылок в футере
Фоновые буллиты?
Оформление навигации
Размещение навигации в коде документа
Способ расположения основной навигации
Размещение навигации в футере
Списки определений
Создание стилей для списков определений
Пример разметки текста словаря
Пример разметки диалога
Глава 8. Заголовки, гиперссылки, строковые элементы и цитаты ....155
Заголовки и их правильное использование
Заголовки в печати
Оптимальное размещение заголовка
Оформление элементов заголовка
Размеры и шрифты заголовков
Нормализация размеров заголовка
Выделение заголовков
Разметка ссылки
Атрибуты ссылок
Эффективное применение атрибута href
Создание ссылок на специальные области документа
Эффективные названия ссылок и значения заголовка
Оформление ссылок
Псевдоклассы ссылок
Применение display: block для улучшения внешнего вида ссылки
Свойство text-decoration
Свойство cursor
Добавление семантических значений строковыми элементами
Цитаты
Глава 9. Цвета и фоны ....170
Теория цвета и практика применения веб-цветов
Удобство, доступность и цвет
Аддитивная цветовая модель
Цветовая модель HSB
Субтрактивная цветовая модель
Дизайн, контраст и дополняющие цвета
Идентификация цветов, вкратце
Графические приложения и палитра, безопасная для Сети
Разработка собственной палитры
Фоны CSS
Свойство background-position
Свойство CSS background: краткая запись
Составление фоновых изображений
«Ложные колонки»
Текстуры и образцы черепичного фона
Огромные фоновые текстуры и специальные вставки
Падающие тени, глянцевые эффекты и закругленные углы
Растровая копия и замена изображений по методу Фарнера
Правила таблицы стилей FIR
Минусы FIR
Оптимизация работы сервера с помощью спрайтов
Глава 10. Таблицы данных ....191
Недостатки макетных таблиц
Исходный порядок: квадратный стержень, круглая дыра
CSS-дзен становится легендой
Неизбежное рабство перед шаблонами
Позиционирование оказывается бесполезным
Части таблицы данных
Пример разметки таблицы: все вперемешку
Создание ячеек
Построение таблицы и размещение данных
Верхние/нижние шапки и заголовочные ячейки таблицы
Селекторы атрибутов и дочерние селекторы
Уменьшение контраста верхней и нижней шапки
Добавление эффектов наведения
Глава 11. Изображения и мультимедиа ....205
Замещенные элементы
Подготовка изображения к обработке
Что такое атрибут alt
Размеры и границы изображения
Обработка изображений
Обрезка
Матирование: создание воображаемой «рамки»
Ресемплинг: изменение абсолютного размера изображения
Изменения уровня: оптимизация контраста фотографий
Применение нескольких настроек
Работа с цветовыми профилями
Оптимизация изображений
Выбор правильного формата изображения
Как найти золотую середину между размером и качеством
Публикация изображений
Сохранение изображений в порядке
Публикация изображений и управление сайтом с помощью CMS
Правила публикации изображений
Оформление изображений и встраиваемого контента
Расположение изображения в колонке
Создание заголовков для изображений
Работа с эскизами в режиме галереи и показа слайдов
Lightbox: эскизы, галереи и показ слайдов
SlideShowPro
Движение и звук: добавление Flash-видео и Flash-презентаций с помощью SWFObject
Добавление мультимедиа без контейнера
Рассказ о трех компаниях
Использование Flash
Использование простой разметки для публикации мультимедийного контента
Стили для встраиваемого контента
Как решить проблемы встраиваемого контента с помощью поля заголовка HTTP Content-Disposition
Важно сохранять объективность
Элементы video и audio (HTML5)
Элемент canvas (HTML5)
Глава 12. Веб-типографика ....234
Краткая история буквенных форм
Происхождение современных западных буквенных форм
Пресс Гутенберга и искусство типографики
Появление цифрового типографского набора
Ограничений много, но ожидания не меняются
Типографский глоссарий на практике
Алиасинг и сглаживание
Стили шрифтов, читаемость и разборчивость
Обеспечение читаемости
Обеспечение разборчивости
Шапка и мелкий шрифт
Размер шрифта
Выбор правильных единиц размера шрифта
Пересчет размеров для em и процентов
Ключевые слова для размеров шрифтов
Работа со шрифтами
Проблема небольшого выбора
Использование шрифтов: свойство font-family
Поиск канонических названий гарнитур
Доступ к шрифту системы по умолчанию при помощи свойства font
Кратко о кодировке
Что такое кодировка?
ASCII, ISO 8859-1, Unicode и UTF-8
Выбор кодировки
Представления символов, не принадлежащих ASCII, в виде сущностей
Руководство по использованию шрифтов
Предсказуемость, предпочтение, паника
Оценка масштабов содержимого
Как разнообразить шрифт: гарнитура, размер, вес, стиль, цвет
Настройка шрифтов вокруг разрывов
Оформление отрывков одинакового приоритета
Работа со шрифтами
Разное о типографике в CSS
Свойство line-height
Свойства font-variant и text-transform
Свойства letter-spacing и word-spacing
Свойство white-space
Веб-типографика на практике
Глава 13. Понятные и доступные формы ....270
Разработка эффективных форм
Сетевые приложения, пользовательская перспектива и выбор дизайна
Организация пользовательского интерфейса при помощи функций
Десять правил разработки эффективных веб-форм и приложений
Оценка и структура
Определение требований
Разметка и структура
Структура, отображение и поведение простой формы
Созданные формой запросы get
Кодирование символов в URL: сущности ASCII
Метод post и загрузки файлов
Изменение размера и внешнего вида отдельных элементов управления
Создание прототипа и макета
Основы прототипирования
Дизайнерские шаблоны, исходные стили и макеты форм
Группировка элементов управления по внешнему виду
Обязательные для заполнения поля и другие ограничения при подтверждении
Определение обязательных для заполнения полей
Поиск и распознавание пользовательских ошибок ввода
Атрибуты disabled и readonly
Создание форм, доступных для всех
Реализация форм с учетом доступности
Поддержка перемещения по форме при помощи клавиатуры
Свойства форм в HTML5
Новые типы вводимых данных
Атрибут required
Глава 14. Отрицательные стороны ....300
Поразительные свойства Internet Explorer (особенно IE 6)
Войны браузеров: версия 2.0
Слабая поддержка селекторов (или ее отсутствие)
Свойство hasLayout
Удвоение отступа
Значения expression()
Фильтры и переходы ActiveX
Поддержка PNG (или ее отсутствие)
Слабая поддержка свойств
Проблемы с XHTML и XML
Системное безобразие
Слабость шаблонов и сторонний контент
Валидация разметки как предпосылка к правильной реализации стилей
Рекомендуется просматривать в
Ступенчатая поддержка
embed и object
Управление формами, встраиваемые модули и наложение элементов
Глупые причины неправильной разметки
Плохие соседи HTML и «тупиковые» элементы
Фреймы
Элемент strike
Атрибут name
Элементы noscript и noframes
Семантические искажения и ограниченный словарный запас HTML
Строковые элементы
Управление вертикальным пространством: hr и br
Элемент pre и свойство white-space
Пародии на CSS
Директивы
Вычисленные значения и их округление
Префиксы свойств -moz и -webkit, специфичные для производителей
Значение inherit
Как прятать вещи: z-index и clip
Счетчики
Модели визуального представления элементов
Значения кодовых позиций Unicode и свойство content
Ужасные стороны
Элементы marquee и blink
Свойства пользовательского интерфейса MSIE
Атрибут align
Атрибут style
div-itis
Атрибуты обработчика событий
Беспричинное подчеркивание
Атрибут http-equiv
Подводя итог
Приложение. URI, архитектура клиент-сервер и HTTP ....329
Базовая архитектура клиент-сервер
Что каждый веб-разработчик должен знать о HTTP
Коротко о MIME-типах
Управление объемом запроса
Предисловие
HTML и CSS применяются уже более десяти лет, и их развитие не стоит на месте. За пятнадцать лет работы разработчиками были реализованы всевозможные типы проектов, опробованы различные функции и выявлены их достоинства и недостатки.
Но разработчикам HTML и CSS, несмотря на все их усилия, не всегда удавалось применять правильно эти технологии. Ряд экспериментов оказался не особо успешным. С другой стороны, потенциал некоторых решений превзошел все ожидания. Для совершенствования этих технологий было необходимо выявить бесперспективные элементы и прекратить работу с ними, а также выбрать наиболее удачные элементы, заслуживающие самого широкого применения. Уделяя внимание передовым методам в HTML и CSS, вы не только создаете работоспособные сайты, но и эффективнее проектируете наиболее перспективные их образцы с минимальными материальными и временными затратами.
Но разработчикам HTML и CSS, несмотря на все их усилия, не всегда удавалось применять правильно эти технологии. Ряд экспериментов оказался не особо успешным. С другой стороны, потенциал некоторых решений превзошел все ожидания. Для совершенствования этих технологий было необходимо выявить бесперспективные элементы и прекратить работу с ними, а также выбрать наиболее удачные элементы, заслуживающие самого широкого применения. Уделяя внимание передовым методам в HTML и CSS, вы не только создаете работоспособные сайты, но и эффективнее проектируете наиболее перспективные их образцы с минимальными материальными и временными затратами.
Рекомендации по созданию удобных интерфейсов
Для создания интерфейса мало объявить что «x ведет туда-то». Первейшая цель любого интерфейса — быть удобным для пользователей. Однако простого следования за вкусами толпы еще недостаточно для того, чтобы создать хороший интерфейс.
Первейшая и важнейшая цель, которую нужно преследовать, — это последовательность. Рассмотрим несколько различных интернет-страниц. Для пользователя ситуация будет идеальной, если на каждой из них элементы навигации и интерфейса (ссылки, теги, окно поиска, заголовки и т.д.) будут располагаться на одних и тех же местах.
Еще лучшим (хотя и гораздо более трудным) вариантом было бы сохранение этой последовательности внутри отдельных секций страницы, так, чтобы пользователь мог очень быстро найти как необходимую ему информацию, так и подсказку, иллюстрирующую его положение на странице.
Теперь перейдем к различным техникам создания указателей, которые, пусть и постепенно, упростят пользователям достижение их целей.
• Площадь, занимаемая навигационными ссылками или тегами, должна быть по возможности большой. Как минимум для каждого элемента свойству display следует присвоить значение block и добавить дополнительный отступ (см. главу 8). Также рекомендуется добавлять к поисковому окну кнопку подтверждения.
• Следует избегать использования всплывающих меню, выводящих внутренние ссылки, при наведении на них мышки (такие же, как например «Все программы» в меню «Пуск» в Windows), поскольку подобные меню требуют от пользователя очень хорошей моторики, что неудобно для людей с ограниченными возможностями, а подчас и для обычных пользователей. Microsoft применяет подобное меню, для того чтобы сохранить область отображения с целью приведения к наименьшему общему знаменателю аппаратной конфигурации. Так же в Windows реализована поддержка обращения к меню «Пуск» с клавиатуры и возможность помещать ссылки на программы прямо на рабочий стол. Указатели на странице должны быть подобны иконкам на рабочем столе Windows. Они должны быть так же хорошо заметны и информативны.
• На многих страницах ссылки первичной навигации сделаны меньшими по размеру, чем основной текст, а некоторые дизайнеры еще и уменьшают их контрастность. На самом деле, все следует делать наоборот — ваши усилия необходимо направить на увеличение размера и контрастности этих элементов, помогающих пользователям ориентироваться и перемещаться по сайту.
• Делайте пометки и подсказки четкими и ясными. Иначе они рискуют превратиться в так называемую «мистическую навигацию» (термин предложен Винсентом Фландерсом), когда вы знаете, что на другом конце ссылки что-то есть, но вот что там — совершенно непонятно. Переход по такой ссылке чем-то сродни прогулке по неосвещенным аллеям парка глубокой ночью.
• Старайтесь не пользоваться миниатюрными полями input type="text" в поисковых формах. Уменьшенный размер полей приводит к тому, что поисковый запрос хуже читается, что сразу же повышает вероятность ошибки и потратить время впустую. Конечно, не стоит делать эти поля гигантскими, но их размер должен дать возможность пользователю легко прочитывать все, что он туда вводит.
• При отображении текущего документа в навигационном контексте, четко выделяйте его из окружения. Если возможно, удалите элемент a, сохранив его содержание.
Первейшая и важнейшая цель, которую нужно преследовать, — это последовательность. Рассмотрим несколько различных интернет-страниц. Для пользователя ситуация будет идеальной, если на каждой из них элементы навигации и интерфейса (ссылки, теги, окно поиска, заголовки и т.д.) будут располагаться на одних и тех же местах.
Еще лучшим (хотя и гораздо более трудным) вариантом было бы сохранение этой последовательности внутри отдельных секций страницы, так, чтобы пользователь мог очень быстро найти как необходимую ему информацию, так и подсказку, иллюстрирующую его положение на странице.
Теперь перейдем к различным техникам создания указателей, которые, пусть и постепенно, упростят пользователям достижение их целей.
• Площадь, занимаемая навигационными ссылками или тегами, должна быть по возможности большой. Как минимум для каждого элемента свойству display следует присвоить значение block и добавить дополнительный отступ (см. главу 8). Также рекомендуется добавлять к поисковому окну кнопку подтверждения.
• Следует избегать использования всплывающих меню, выводящих внутренние ссылки, при наведении на них мышки (такие же, как например «Все программы» в меню «Пуск» в Windows), поскольку подобные меню требуют от пользователя очень хорошей моторики, что неудобно для людей с ограниченными возможностями, а подчас и для обычных пользователей. Microsoft применяет подобное меню, для того чтобы сохранить область отображения с целью приведения к наименьшему общему знаменателю аппаратной конфигурации. Так же в Windows реализована поддержка обращения к меню «Пуск» с клавиатуры и возможность помещать ссылки на программы прямо на рабочий стол. Указатели на странице должны быть подобны иконкам на рабочем столе Windows. Они должны быть так же хорошо заметны и информативны.
• На многих страницах ссылки первичной навигации сделаны меньшими по размеру, чем основной текст, а некоторые дизайнеры еще и уменьшают их контрастность. На самом деле, все следует делать наоборот — ваши усилия необходимо направить на увеличение размера и контрастности этих элементов, помогающих пользователям ориентироваться и перемещаться по сайту.
• Делайте пометки и подсказки четкими и ясными. Иначе они рискуют превратиться в так называемую «мистическую навигацию» (термин предложен Винсентом Фландерсом), когда вы знаете, что на другом конце ссылки что-то есть, но вот что там — совершенно непонятно. Переход по такой ссылке чем-то сродни прогулке по неосвещенным аллеям парка глубокой ночью.
• Старайтесь не пользоваться миниатюрными полями input type="text" в поисковых формах. Уменьшенный размер полей приводит к тому, что поисковый запрос хуже читается, что сразу же повышает вероятность ошибки и потратить время впустую. Конечно, не стоит делать эти поля гигантскими, но их размер должен дать возможность пользователю легко прочитывать все, что он туда вводит.
• При отображении текущего документа в навигационном контексте, четко выделяйте его из окружения. Если возможно, удалите элемент a, сохранив его содержание.
Перейти на страницу скачивания книги: Хеник Б. - HTML и CSS. Путь к совершенству