Что такое модульная сетка?

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

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

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

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

modulnaya_setka_1modulnaya_setka_2modulnaya_setka_2modulnaya_setka_3

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

Одноколонный макет

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

Такой дизайн отличает минимализм оформления. Здесь основное внимание уделяется содержательной части, а дизайн, как таковой, практически отсутствует. В основном такой академический дизайн можно встретить в научной среде.

Рассмотрим типичную схему одноколонной модульной сетки. Обычно здесь присутствуют четыре основных блока — это заголовок страницы, навигация по сайту, основной текст, контактная и правовая информация в самом низу страницы. При большом объеме основного текста, когда высота страницы очень большая, то внизу дублируют блок навигации по сайту или ставят ссылку «Наверх».

Одноколонная модульная сетка

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

Одноколонный макет

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

Такой дизайн отличает минимализм оформления. Здесь основное внимание уделяется содержательной части, а дизайн, как таковой, практически отсутствует. В основном такой академический дизайн можно встретить в научной среде.

Рассмотрим типичную схему одноколонной модульной сетки. Обычно здесь присутствуют четыре основных блока — это заголовок страницы, навигация по сайту, основной текст, контактная и правовая информация в самом низу страницы. При большом объеме основного текста, когда высота страницы очень большая, то внизу дублируют блок навигации по сайту или ставят ссылку «Наверх».

Одноколонная модульная сетка

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

Двухколонный макет

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

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

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

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

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

Трехколонный макет

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

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

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

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

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

Трехколонный макет

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

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

В таком макете в одной колонке размещают навигацию, во второй — под основной текст, а в третьей колонке помещают дополнительную информацию (ссылки, рекламу и т.д.)

Такая сетка дает больше простора для дизайнера: можно разбить контент на отдельные фрагменты, объединить колонки или отделить различные блоки. При этом макет получится достаточно сложным, однако результат стоит того.

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

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

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

Итак:

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

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

P.S. Давно мечтаю купить Honda в Санкт-Петербурге.

Наверх

Понравилась статья? Поделиться с друзьями:

Отправить ответ

2 Комментарий на "Что такое модульная сетка?"

Уведомить
avatar
Sort by:   newest | oldest | most voted
Анонимно
Гость

Где-то были он-лайн сервисы созания модульных сеток

Анонимно
Гость

Вот недавно выровнял свой сайт xmarkup.ru по модульной сетке. Так верстать намного удобнее!

wpDiscuz