- •38. Верхние и нижние колонтитулы, столбцы и шаблоны
- •Введение
- •Критически важные этапы работы дизайнера
- •Сбор требований
- •Классификация контента
- •Совместное создание эскизов и композиции
- •Создание внутренней и взаимной структуры документов
- •Требования, классификация, и вложенность элементов более подробно
- •Определение бизнес-целей
- •Определение и удовлетворение требований посетителей
- •Классификация контента
- •Порядок исходного кода: доступность и другие рассмотрения
- •Контейнерные элементы, задание class и id
- •Реализация компоновки с одним столбцом
- •Центрирование компоновки
- •Обязательно ли требуется контейнер по всей ширине документа?
- •Реализация компоновки с двумя столбцами
- •Проблемы композиции в компоновках с одним и двумя столбцами
- •Размещение #sidebar слева вместо его порядка в исходном коде
- •Ложные столбцы: использование фонового изображения для выравнивания длин столбцов, когда длина их контента различна
- •Перемещение основных средств навигации во второй столбец, сохраняя при этом порядок исходного кода
- •Реализация компоновки с тремя столбцами
- •Самая большая трудность дизайна с тремя столбцами, и ее простое решение
- •Рассмотрение верхнего и нижнего колонтитулов в общих чертах
- •Персональный сайт: Cindy Li
- •Социальная сеть: Facebook
- •Корпоративная служба маркетинга и поддержки клиентов: bnsf Railway
- •Еще раз об идентичности
- •Дизайн верхнего и нижнего колонтитулов: низкоуровневые детали
- •Дополнительно о реализации компоновки средств навигации
- •Сайты с переменным числом столбцов: манипуляции с классами и выводом
- •Контрольные вопросы
- •Библиография
Проблемы композиции в компоновках с одним и двумя столбцами
Изменения в разметке, необходимые для преобразования шаблона с одним столбцом в шаблон с двумя столбцами являются очевидными, но во многих ситуациях новые правила стилей оформления не требуются.
Размещение #sidebar слева вместо его порядка в исходном коде
Для этого существуют две процедуры; одна будет работать независимо от длины любого столбца, в то время как другая требует, чтобы #bodyCopy был длиннее #sidebar.
Первый и более распространенный подход состоит в использовании float:
Присвоить значение width для #bodyCopy.
Добавляем в это правило значение float для кода справа.
Присваиваем #sidebar подходящее значение width.
Присваиваем требуемым образом значения margin и padding для #bodyCopy и/или #footer обеспечивая существование требуемого промежутка между двумя элементами.
Присваиваем clear: both; для #footer.
Оба столбца имеют заданные значения width, так что оба будут иметь согласованные поля.
В том случае, когда #sidebar располагается по правому краю компоновки, уже описанные действия все равно должны выполниться, за исключением того, что значение float для #bodyCopy должно задаваться как left. Значение width, присвоенное #sidebar, необходимо заменить подходящим значением margin-left.
Можно также присвоить вместо width большое значение margin-left или margin-right (как потребуется) неплавающему элементу.
Второй подход, с меньшей вероятностью порождающий ошибки в Internet Explorer 6, состоит в присвоении большого значения margin-left или margin-right для #bodyCopy, как потребуется, и позиционировать абсолютно #sidebar. Однако этот подход будет менее гибким, так как в тех случаях, когда #sidebar будет длиннее #bodyCopy, предыдущий элемент будет проникать в #footer.
Ложные столбцы: использование фонового изображения для выравнивания длин столбцов, когда длина их контента различна
Более внимательное рассмотрение реализаций столбцов с помощью свойства float показывает, что когда требуются различные фоновые цвета или вертикальные линейки между столбцами, на них нельзя рассчитывать для распространения на всю длину области основного контента при применении со свойствами background-color или border.
Самое простое решение этой проблемы состоит в создании и определении фонового изображения (обычно высотой один пиксель) на одном из элементов предшественников столбцов, который - в связи с его присвоением элементу предшественнику - всегда будет повторяться сверху донизу самого высокого соответствующего столбца. Поэтому:
#main {
background-image: url(images/bg_2column.gif);
background-repeat: repeat-y;
}
Если bg_2column.gif состоит из двух полос высококонтрастного цвета, которые соответствуют более или менее точно по ширине столбцам контента, в результате будет два столбца, которые будут представляться имеющими одинаковую высоту … но на самом деле нет, что обнаружится, если вставить дальше следующие правила:
#bodyCopy {
background-color: #ccc;
}
#sidebar {
background-color: #999;
}
Выполнение этого шага не обязательно исключает необходимость применять свойства color или background-color к заданному столбцу; если используемый по умолчанию цвет текста плохо читается на одном или обоих столбцах, их фоновый цвет или цвет переднего плана должны быть явно определены в таблице стилей в качестве защиты от возможного отказа браузера загрузить фоновые изображения.