www html, html уроки, html теги, css, верстка
Уроки книги по css и html урокам вопросы и ответы Помощь сайту
Главная страница > Уроки > Основы верстки > Модульные сетки

Модульные сетки

контентовая версия  

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

web-страница фактически рассматривается как набор прямоугольных блоков, которые выкладываются в определенном порядке. При этом, как правило, данные располагаются по колонкам, поэтому при верстке применяют термин одно-, двух-, трехколонный макет и т.д. Для примера просмотрим главную страницу с нашего сайта deviantart.com (рис. 1).

Рис. 1. Трехколонный макет главной страницы deviantart.com

Рис. 1. Главная страница deviantart.com

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

Рис. 2. Модульная сетка для главной страницы deviantart.com

Рис. 2. Модульная сетка для главной страницы deviantart.com

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

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

Рис. 3. Обозначение контента в макетах

Рис. 3. Обозначение контента в макетах

Рис. 4. Обозначение изображений в макетах

Рис. 4. Обозначение рисунков в макетах

Далее эти обозначения будем применять при рассмотрении наиболее распространенных модульных сеток.

Одноколонная сетка

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

Замечание

Академический дизайн характеризуется минимализмом оформления и даже аскетизмом. Основной упор делается на содержательную часть, а дизайну как таковому практически не уделяется внимания. Преимущественно академический дизайн встречается в научной среде.

На рис. 5 показана типичная схема одноколонной модульной сетки. Как правило, наблюдается четыре основных блока — заголовок страницы, набор ссылок на другие страницы с нашего сайта (навигация), собственно сам контент и в самом низу контактная информация. Если высота страницы дастаткова велика, то блок навигации дублируют внизу или делают ссылку «Наверх», которая перемещает к началу объекта.

Рис. 5. Одноколонная модульная сетка

Рис. 5. Одноколонная модульная сетка

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

Рис. 6. Главная страница с нашего сайта victoriassecret.com

Рис. 6. Главная страница с нашего сайта victoriassecret.com

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

Рис. 7. Модульная сетка для главной страницы с нашего сайта victoriassecret.com

Рис. 7. Модульная сетка для главной страницы с нашего сайта victoriassecret.com

Двухколонная сетка

Это один из самых распространенных наборов при использовании на с нашего сайтах. При такой модульной сетке используется две колонки — одна отводится под основной контент, а вторая используется для навигации и другой полезной информации (рис. 8).

Рис. 8. Двухколонная модульная сетка

Рис. 8. Двухколонная модульная сетка

Принципиального значения не имеет, слева или справа располагается колонка с навигацией, встречается и тот и другой вариант.

В каком-то смысле двухколонная сетка стала стандартом де-факто для информационных сайтов из-за своего удобства. Действительно, все «под рукой» — и контент и ссылки, к тому же данная сетка не исключает подключения горизонтальной навигации, как это принято в одноколонной сетке.

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

Трехколонная сетка

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

Рис. 9. Трехколонная модульная сетка

Рис. 9. Трехколонная модульная сетка

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

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

Рис. 10. Модульная сетка для главной страницы deviantart.com

Рис. 10. Модульная сетка для главной страницы deviantart.com

На сайте deviantart.com применяется три колонки, две из них часто объединяются для получения более широкой области. Это оправданно, поскольку требуется разместить 5 фотографий или три колонки с контентом.

К недостаткам трехколонной сетки относится достаточная сложность верстки макета. Чтобы получить нужный результат приходится иной раз затратить много времени на создание стилевого файла и отладку объекта в разных браузерах.

 

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

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

Резюме

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

Прежде чем переходить к созданию web-страницы в ШТМЛ-редакторе, сделайте ее набросок на листе бумаги. Это позволит сократить время на выбор модульной сетки, которая будет применяться в дальнейшем. В зависимости от целей с нашего сайта и количества материала применяют одно-, двух, трех или многоколонную модульную сетку. Чем больше колонок применяется, тем шире возможности по управлению видом дизайна, но за это приходится платить сложностью верстки объекта. Не стоит также забывать, что наиболее популярными на с нашего сайтах являются двух и трехколоночные сетки.

Статья опубликована: 13.11.2009 Последнее обновление: 25.04.2009
Поиск по сайту
Основы верстки
Разделы

Copyright 2009 Все права защищены

О нашем Internet проекте | Наши планы | Контент нашего сайта | Есть ошибки... | Технологии | Поддержать проект