Сайты с переменным числом столбцов: манипуляции с классами и выводом

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

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

Однако даже при использовании дополнительных вставок дизайнеры по прежнему встречаются с различиями в компоновке; как лучше всего это обработать?

Наиболее простой подход состоит в присоединении class к body любой страницы, которая может в этом нуждаться. Это может использовать порядковую природу, которая соответствует некоторым последовательностям компоновок, предложенных в рекомендациях по идентичности, или связанных с контентом и приводящих к мультиселекторным правилам, таким как следующие:

.about #bodyCopy,

.contact #bodyCopy,

.privacy #bodyCopy {

float: none; width: auto;

}

.about #sidebar,

.contact #sidebar,

.privacy #sidebar {

display: none;

}

Одним из недостатков такого подхода без преимуществ операторов include (простого способа сделать контент исчезающим и появляющимся по вашему желанию) состоит в том, что политики операторов машин поиска вполне могут уменьшить вес этих страниц в результатах — или в случае эффектных громоздких реализаций, совершенно исключить сайты, которые их используют. В связи с этим (среди слишком многих других факторов, которые необходимо учитывать), любые полученные организации размещения должны поддерживать некоторый вид функций включения.

Сводка

Хотя и соблазнительно — особенно, если вы все еще являетесь новичком — просто сесть и начать писать разметку и код, такой процесс не создаст сам по себе особенно привлекательных, полезных, или удобных в сопровождении сайтов.

Однако, принимая во внимание контент, который будет размещен на сайте, и способ, которым он должен быть организован, можно залить любой сайт в инфраструктуру, которая вытекает из его требований.

Базовые шаблоны:

• один столбец (http://dev.opera.com/articles/view/38-headers-footers-columns-templates/template_1col.html.txt)

• два столбца (http://dev.opera.com/articles/view/38-headers-footers-columns-templates/template_2col.html.txt)

• три столбца (http://dev.opera.com/articles/view/38-headers-footers-columns-templates/template_3col.html.txt)

Контрольные вопросы

• 1. Для данного списка возможных ссылок, предоставленных инструктором, разделите эти ссылки на первичные ссылки (верхний колонтитул) и вторичные (нижний колонтитул). Обоснуйте свой выбор, используя примеры из этой статьи.

• 2. Возьмите композицию, созданную одноклассником и определите:

1. число столбцов, которое будет использоваться в дизайне;

2. значения ширины этих столбцов; и

3. float/width/margin

4. схему float/width/margin, если возможно, которая должна использоваться для реализации представления этих столбцов.