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

Текстовая версия   Добавить комментарий

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

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

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

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

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

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

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

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

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

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

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

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

Замечание

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Резюме

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

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

Комментарии к статье

Вася

05.06.2006

Что за бред вы тут написали? Фигня какая-то!

/7aGaNKa

17.07.2006

Весьма зачетно написано для начинающих.

аня

08.09.2006

спасибо, хорошая статья. наглядно, компактно и понятно. ...не для "Васи"

Bakha

11.10.2006

Знать основы всегда хорошо даже для профессионалов. Спасибо, хорошая статья.

Вася

31.10.2006

Ну вы козлы!
Я все равно не пойму в чем суть этой модульной сетки... Бред. Дизайн не должен подчинятся каким то сеткам, это творчество и оно должно быть свободным!

Влад Мержевич

01.11.2006

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

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

Intagra13

09.11.2006

Потрясно! Я восхищена Вашим сайтом. Все сделано просто великолепно! Страницы грузяться очень быстро, материал достаточно прост для понимания, а качество самого материала ВАУ, нет слов!

Андрей

13.11.2006

А в чем суть этих сеток? Просто легче верстать когда они есть?

magi

03.12.2006

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

Sergey-maker

26.12.2006

Да-да-да. Полезных материалов на этом сайте предостаточно. Спасибо Владу

Андрей

17.01.2007

Автор прав,статья супер.Вася, ты слышал про
золотое сечение? От правил никуда не деться.

Денис

20.03.2007

Статья очень хорошая. Этой информации как раз не хватает, когда начинаешь заниматься в?рсткой - это про принцип, а про технику много написано во множестве книг по HTML/CSS. У меня вопрос: термин "блочная в?рстка" равносилен термину - "макетная в?рстка"?

Влад Мержевич

21.03.2007

Денис, "блочная верстка" означает верстку при помощи слоев.

N/A

18.04.2007

скажите пж.,каким образом и можно ли вообще использовать ячеки сетки как фреймы

Влад Мержевич

18.04.2007

Нет, нельзя. Если надо загружать данные в определенное место, то используйте IFRAME или AJAX.

Дикий

26.04.2007

Здравствуйте ! А если разместить три колонки абсолютным позиционированием и окажется что содержимое одной колонки не вмещается и выходит за рамки. Как создать прокрутку в одной колонке.

Влад Мержевич

27.04.2007

Есть свойство overflow, оно для таких целей и применяется как полосы прокрутки.

developer.ru

25.06.2007

Влад поделитесь секретом, в ч?м скомпонованно последняя к0ртинка - "Модульная сетка для главной страницы deviantart.com", а то у меня в ФШ вот такие выходят, http://www.diavol.org/img/for_web/shablon.jpg. Лень мне для шаблона со стилями заморачиваться, ведь его кроме меня и пары человек никто не увидит, а с вектором я не работаю.

Спасибо.

Влад Мержевич

25.06.2007

Векторный редактор Adobe Illustrator.

developer.ru

25.06.2007

вс? таки вектор, да ещ? такой тяжелый как иллюстратор, эмм, а не посоветуете, что-нибудь полегче, не проще (4 года к AI не подходил конечно, но там вс? то же, видел), а полегче. Меня монструозность адоба уже доставать начинает. КС3 штука конечно хорошая, особенно с интеграцией продуктов макромедии (не пробовали?), но я вс? больше к маленьким продуктам начинаю тяготеть.
P.S. Возрастное что ли? Под рукой сервер с полутром терабайт, а нет, вс? маленького хочется.

Влад Мержевич

27.06.2007

Нет, ничего не посоветую, разве что посмотрите на Xara X.

Сэмюэл Л. Джексон

10.08.2007

Все никак не мог понять, что представляет из себя 3-хколонка, а теперь, после прочтения данной статьи все стало понятно, спасибо за доходчивость

Daily Grind

27.12.2007

Это все конечно интересно-познавательно. Но я надеялся здесь увидеть разбор конкретного примера создания страницы с такими сетками. ЧТо Вы используете для верстки - таблицы или div-ы?

Влад Мержевич

28.12.2007

Конкретные примеры в разделе "Табличная верстка" и "Верстка с помощью слоев".

Rek'Shak

29.12.2007

Хорошая, полная статья, как в принципе и все остальные.

pilgrim

10.01.2008

хочу выразить благодарность автору проекта. Я, как преподаватель, могу особенно оценить доступность изложенного текста и мудрое переплетение простого начального и более сложного профессионального. Спасибо Вам!

Валентин

12.01.2008

Замечателная статья для начинающих в самый раз

Дима

12.02.2008

Статья понятная и полезная!!!

Sheena

18.02.2008

Хорошая статья, для таких, как я.

Михаил

15.03.2008

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

Андрей

07.04.2008

Скажите, влад. Почему сдесь на форуме не читается буква "?" (йо)? с чем это связано? с моим браузером или проблема в ч?м-то еще?

Тарас

12.04.2008

С движком форума.

PICMaestro

13.04.2008

Спасибо за хорошую статью!

Андрей

14.04.2008

Спасибо, Тарас. А нельзя ли поподробнее? я только начинаю заниматься вэб-дизайном. (но есть 6 лет стажа в типографии Дизайнером и Верстальщиком)

camlost

03.06.2008

2Андрей

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

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

Подробнее боюсь у меня не получится

Q

09.06.2008

HatoL

18.07.2008

Похоже здесь следующее: движок форума фильтрует полученные от пользователя данные примерно таким образом: preg_replace ('/[^0-9a-zA-Zа-яА-Я]/i' , ''). Т.е. из текста, полученного от пользователя, вырезаются все символы, кроме цифр от 0 до 9, букв от a до z, от A до Z, от а до я, от А до Я. Дело в том, что в диапазон А-Я не входит буква "йо", ее надо указывать явно. Влад, вы можете исправить этот баг, добавив символ "йо" в ваше регулярное выражение.

Для пользователей: вообще вместо "йо" лучше писать "е" (везде, не только здесь).

Рамиль

24.07.2008

Спасибо за интересную статью. Купил книгу html и xhtml но, она читается трудно. Книга переведена на русский язык неким неопытным переводчиком.
Тут нашел много интересного для себя(начинающего верстальшика). Хорошо что есть такие полезные сайты для людей

Arion

05.08.2008

Да, статья интересная, читается и понимается легко. Буду читать и другие статьи с Вашего сайта, уде добавил в избранное. Спасибо.

Добавить комментарий

Имя

Комментарий

Сохранить имя (используется cookie)

Copyright 2002–2008 Влад Мержевич, по всем вопросам пишите по адресу: vlad@htmlbook.ru

О сайте | Планы на будущее | Использование сайта | Борьба с ошибками | Технологии | Поддержать проект