Контейнерные элементы, задание class и id

Откладывая в сторону вопросы таксономии, мы можем предположить, что любой заданный сайт будет охватывать некоторый ряд связанных тем в некоторой подразумеваемой области - будет ли это деятельность и продукция компании, специальные типы событий, или специфические виды развлечений, называя только несколько примеров, которые можно обычно перечислить, чтобы пробудить интерес для нетехнической аудитории.

Поэтому дизайнер-оформитель будет, скорее всего, связывать маркеры таблицы стилей как со структурными элементами контента сайта - например, элементы навигации, верхний колонтитул, основной текст - так и с областью контента, узкой или широкой.

Можно использовать различные подходы, но автор обычно присваивает следующие маркеры компоновки в своих шаблонах, маркеры, которые будут использоваться в этой статье:

#main

канва контента

h1 (уникальный)

заголовок сайта

ul#nav

навигационный код сайта

#breadcrumb

навигационная цепочка (если используется)

#bodyCopy

основная статья

#bodyCopy>h2 (уникальный)

заголовок основного документа

#sidebar

вторичный контент

#footer

код нижнего колонтитула

ul#secondaryNav

вторичные средства навигации

Кроме этого - и что более важно - в элемент body каждой страницы добавляется id (как упоминалось выше), который дает некоторое указание на область действия основного контента, связанного со всем документом. Некоторые проекты генерируют также требование для задания class в элементах body.

Реализация компоновки с одним столбцом

Рис. 38.2.  Элементы компоновки с одним столбцом; разметка будет, скорее всего, вложена, как показано здесь

Рисунок 38.2 показывает, что #main находится непосредственно внутри body, и в свою очередь содержит все #header, #bodyCopy, и #footer.

Центрирование компоновки

Центрирование канвы контента выполняется добавлением (в данном случае) в таблицу стилей #main { width: 960px; margin: auto; }. (Выбранное значение width является произвольным.)

Обязательно ли требуется контейнер по всей ширине документа?

На сайте, который полностью полагается на компоновки с одним столбцом, не существует абсолютного требования включать #main; можно также легко применить для компоновки в некотором сочетании те же самые пары свойство/значение, использованные выше для #header, #bodyCopy, и #footer. Однако нет ничего семантически неправильного с включением #main, и его использование предлагает дизайнеру большую гибкость в отношении таких вещей как правила, интервалов между колонками, фоновых изображений, и создания выделения определенных элементов в структуре шаблона.

Реализация компоновки с двумя столбцами

Рис. 38.3.  Элементы компоновки с двумя столбцами; разметка будет, скорее всего сделана, как показано здесь, при этом #sidebar будет на самом деле в исходном коде следовать за #bodyCopy

Различие между одно- и двухстолбцовыми компоновками состоит в добавлении второго контейнерного элемента для вторичного контента (( #sidebar, который фактически следует за #bodyCopy в исходном коде), и некоторые изменения в таблице стилей скорее всего будут использоваться для компоновки с одним столбцом.