цКЮБМЮЪ
й АХАКХНРЕЙЕ

Mr De Sign

Модульные сетки в Веб-дизайне

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

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

Все сначала и по порядку.

Для начала вам нужна концепция блочного устройства вашей страницы

Общая конструкция страницы.

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

Логотип обычно находится вверху страницы, в начале подачи информации, может быть большим или маленьким, приоритетным или просто информационым (когда другие элементы берут на себя основные информационные задачи). Часто функции логотипа исполняет рубричная заставка (раньше ее называли баннер, но теперь баннер - это рекламная штука). Ее задача - определять общую тему, суть страницы. Часто на головной странице это лого, а на последующих - название рубрики с определенным набором графики. Пример для этого варианта - сайт GartnerGroup. Более крупное лого на первой странице, страница в основном выполняет функции распределителя без ярко выраженной навигационной панели. На следующих страницах лого становится меньше, появляется четко определенная левая панель навигации, выражающая основные темы сайта, сверху еще одна панель по основным разделам, справа - текущий распределитель.

Ниже лого - блок горизонтальной навигации (если он подразумевается). Часто, если содержание страницы умещается на экран - блок горизонтальной навигации находится внизу страницы или вообще отсутствует.

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

Существуют сайты с расширенным количеством навигационных панелей (3-4). Это связано в основном с обилием тем и обилием рубрик, а так же стремлением сократить количество кликов пользователя при переходе от реальной страницы к искомой. Третья и четвертая панели навигации в основном предназначены для переходов на конечный материал или же архивы. Нас в данном случае не интересует топология, а просто конкретное место под конкретную панель в структуре страницы (хотя вам наличие дополнительных панелей придется все-таки обосновать в своей концепции).

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

http://www.aol.com/

Еще один пример на тот же вариант, только в четырехколоночный макет. В общем-то чисто полиграфическое устройство сетки.

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

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

Размеры отдельных блоков сильно зависят от общей таблицы и своего предназначения. Часто в качестве модульного размера для ширин колон употребляются стандартные размеры баннеров (не значит, что ширина колонки будет именно 88 или 468 пикселов, но какой-то принцип привязки к этим модулям будет присутствовать). Наиболее часто употребляемые стандарты баннеров - 468х60, 88х31, 125х125 (западный стандарт, при котором высота может изменяться), 100х100 (стандарт, используемый в российской баннерной системе ВВ2). Есть и другие, менее распространенные стандарты.

Технологии загрузки информации в блок и обновления информации.

Современные серверные технологии позволяют значительно облегчить жизнь создателям крупных, расширенных сайтов в плане обновления и дополнения информации. Используя шаблон модульной сетки, вы можете размещать информацию прямо в блок (что удобно на маленьких сайтиках типа личных хом-пейджей), можно использовать технологии SSI (подгружаемые файлы, то есть информационная начинка блока может храниться в отдельном файле, базе данных или другом сервере). Популярными в среде информационных серверов становятся сайты на базе CGI-программ формирования конечных файлов, то есть когда CGI-программа полностью формирует код шаблона страницы, включает в него нужную информацию, формирует графику, нужные ссылки до уровня конечного пользовательского файла. Для обновления информации вам достаточно заменить старые информационные материалы на новые. Пока наиболее удобно использовать для этого базы данных, предоставляющие программе-генератору нужную информацию о материалах, хранящихся в базе данных.

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

Использование фреймов

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