
- •38. Верхние и нижние колонтитулы, столбцы и шаблоны
- •Введение
- •Критически важные этапы работы дизайнера
- •Сбор требований
- •Классификация контента
- •Совместное создание эскизов и композиции
- •Создание внутренней и взаимной структуры документов
- •Требования, классификация, и вложенность элементов более подробно
- •Определение бизнес-целей
- •Определение и удовлетворение требований посетителей
- •Классификация контента
- •Порядок исходного кода: доступность и другие рассмотрения
- •Контейнерные элементы, задание class и id
- •Реализация компоновки с одним столбцом
- •Центрирование компоновки
- •Обязательно ли требуется контейнер по всей ширине документа?
- •Реализация компоновки с двумя столбцами
- •Проблемы композиции в компоновках с одним и двумя столбцами
- •Размещение #sidebar слева вместо его порядка в исходном коде
- •Ложные столбцы: использование фонового изображения для выравнивания длин столбцов, когда длина их контента различна
- •Перемещение основных средств навигации во второй столбец, сохраняя при этом порядок исходного кода
- •Реализация компоновки с тремя столбцами
- •Самая большая трудность дизайна с тремя столбцами, и ее простое решение
- •Рассмотрение верхнего и нижнего колонтитулов в общих чертах
- •Персональный сайт: Cindy Li
- •Социальная сеть: Facebook
- •Корпоративная служба маркетинга и поддержки клиентов: bnsf Railway
- •Еще раз об идентичности
- •Дизайн верхнего и нижнего колонтитулов: низкоуровневые детали
- •Дополнительно о реализации компоновки средств навигации
- •Сайты с переменным числом столбцов: манипуляции с классами и выводом
- •Контрольные вопросы
- •Библиография
Классификация контента
Когда вы определите рамки контента, который будет обслуживаться на сайте, можно будет придать ему некоторую организацию. Организация сайта может разрабатываться различными способами (посмотрите в предыдущей статье 23 несколько примеров).
Обычно контенту можно задать некоторый приоритет, который будет определять возможные компоновки:
Основной контент является материалом, вокруг которого создается отдельные конечные документы, такие как статьи, фото-альбомы, или множества данных.
Вторичный контент включает доступные человеку для чтения метаданные, присоединенные к основному контенту, и контент дополнительных вставок (например, пояснительный текст; выдержки из обзора; ссылки на связанные статьи на сайте; списки диаграмм, карт, или таблиц).
Третичный контент охватывает исходящие ссылки на связанный материал (такой как список ссылок на другие блоги), неизменяющиеся снимки контента из других источников, таких как сайты социальных сетей или ленты комментариев, и реклама.
Кроме контента компоновка почти наверняка будет включать два других раздела:
Верхний колонтитул будет включать заголовок сайта (который часто связан с самой верхней страницей сайта), основные средства навигации, ссылки на метаданные учетной записи пользователя (в приложении), и, наконец, форму поиска в основном контенте (если используется).
Нижний колонтитул содержит заявление об авторских правах в минимальном случае. Ссылки на документы, составленные из метаданных (такие как ленты RSS, схемы сайтов, и часть мета-контента сайта из контактной информации) также часто оказываются среди средств вторичной навигации сайта, которые обычно составляют часть нижнего колонтитула.
Основные средства навигации сайта и заголовок почти всегда являются частью (или располагаются на одном уровне) верхнего колонтитула в визуальном контексте, на усмотрение каждого дизайнера остается решение, должны ли они быть сделаны частью верхнего колонтитула сайта на уровне разметки.
Порядок исходного кода: доступность и другие рассмотрения
На начальном этапе проектирования шаблонов сайта необходимо принять решение о порядке исходного кода контента сайта, который должен быть согласован на сайте в целом.
Порядок исходного кода документа, который правильно воспроизводится без использования таблиц стилей существенно важен с точки зрения доступности и поддержки в различных информационных средах. В первом случае пользователи с недостатками зрения могут использовать так называемые считыватели экрана: пакеты программного обеспечения, которые читают для посетителя контент вслух, контент, который имеет немного или вообще не имеет смысла, если он упорядочен как попало для целей представления.
… И в то время как исходный код, организованный в оптимальном порядке для вывода на экране потребуется, вероятно, для четкости при чтении вслух, он может оказаться совершенно неподходящим для стилевого оформления для других средств медиа, таких как печать или вывод на дисплее мобильного устройства. В этом случае результатом обычно является дублирование контента, что имеет ряд недостатков:
Как минимум должна быть реализована логика дополнительного слоя View, чтобы учесть тот факт, что вывод одной записи базы данных может обслуживаться более чем одним образом.
В худшем случае контент дублируется не только в открывающейся пользователю среде, но также в базе данных или файловой системе хоста. Результатом будет дублирование некоторых требований по обслуживанию.
Поэтому чаще всего внешние разделы организуют в следующем порядке:
Верхний колонтитул
Заголовок [предпочтительно указывающий на верхнюю/домашнюю/целевую страницу]
Основные средства навигации
Основной контент
Заголовок документа
Основной текст
Вторичный контент
Третичный контент
Нижний колонтитул
Вторичные средства навигации
Дополнительные элементы (например, замечание об авторских правах)
Способ, которым эти разделы вкладываются друг в друга, будет зависеть от произвольного числа переменных требований, наиболее распространенным из которых является число статических столбцов компоновки сайта.