38. Верхние и нижние колонтитулы, столбцы и шаблоны

В лекции рассказано как с помощью изложенного материала в предыдущих лекциях создать шаблон всего сайта.

Содержание

• Критически важные этапы работы дизайнера

• Сбор требований

• Классификация контента

• Совместное создание эскизов и композиции

• Создание внутренней и взаимной структуры документов

• Требования, классификация, и вложенность элементов более подробно

• Определение бизнес-целей

• Определение и удовлетворение требований посетителей

• Классификация контента

• Порядок исходного кода: доступность и другие рассмотрения

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

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

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

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

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

• Проблемы композиции в компоновках с одним и двумя столбцами

• Размещение #sidebar слева, несмотря на порядок исходного кода

• Ложные столбцы: использование фонового изображения для выравнивания длин столбцов, когда длина их контента различна

• Перемещение основных средств навигации во второй столбец, сохраняя при этом порядок исходного кода

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

• Самая большая трудность дизайна с тремя столбцами, и ее простое решение

• Рассмотрение верхнего и нижнего колонтитулов в общих чертах

• Персональный сайт: Cindy Li

• Идентичность

• Контраст

• Социальная сеть: Facebook

• Корпоративная служба маркетинга и поддержки клиентов: BNSF Railway

• Еще раз об идентичности

• Дизайн верхнего и нижнего колонтитулов: низкоуровневые детали

• Дополнительно о реализации компоновки средств навигации

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

• Заключение

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

• Библиография

Введение

До этого момента каждая статья в учебном курсе была посвящена рассмотрению только одной темы, начиная от пластичных концепций, таких как шрифтовое оформление и цвет, и до жестких технических инструкций о подмножествах CSS 2.1. Эта статья берет на себя более сложную задачу, она должна показать читателю, как с помощью изложенного ранее материала создать шаблон всего сайта.

Основное предположение данного материала состоит в том, что вы уже знакомы со свойствами CSS float, display, и position.

Самостоятельно изучающие материал учащиеся, которые хотят сразу перейти к сути применения CSS, приглашаются, скрипя сердце, перейти к разделу этой статье "Реализация компоновки с одним столбцом" - но нужно отметить, что в этом случае они пропустят обсуждение того, как успешное планирование проекта ведет к компоновке и реализации Web-сайта.

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

Примечание: Вы можете загрузить весь код примеров (http://dev.opera.com/articles/view/38-headers-footers-columns-templates/layout_template_code.zip) одним удобным пакетом для экспериментов на своей локальной машине.

Хорошо созданный сайт обычно является результатом обдуманного, по большей части последовательного процесса, даже если сайт создан одним или двумя людьми, а не целой командой специалистов. Достаточно подробное представление такого процесса показано на рисунке 1, и из десяти показанных там шагов данная статья рассматривает четыре, в частности:

1. Сбор требований на основе бизнес-целей и соответствующих целях посетителей

2. Классификация контента

3. Совместное создание эскизов и композиции

4. Создание структуры документов, которые будут использоваться на сайте

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

Даже после того как выбраны дизайн и структура остается вопрос о том, как будет обрабатываться производственная версия, если сайт должен создаваться поверх Системы управления контентом (CMS - Content Management System), такой как Wordpress или Drupal.

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