umade.ru

Сеточный дизайн. Выравниваем сайт

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

Чтобы увидеть о чём далее пойдёт речь, добавь значение ?grid=1 в конец любой внутренней ссылки этого сайта, например umade.ru/?grid=1. Появится сетка.

Как используется сетка?

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

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

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

Методы выравнивания прямо на сайте

Самым навороченным методом, на мой взгляд, является 960 Gridder (использует jQuery), поиграть с которым можно на странице Implemented Demo с помощью клавиш Ctrl+Alt+Z и Ctrl+Alt+X. При нажатии этих клавиш появляются горизонтальные и вертикальные строки.

Все современные мониторы поддерживают разрешение 1024 x 768, поэтому этот метод использует фиксированную ширину сетки 960 пикселей. Это очень удобное и универсальное значение, так как оно делится на 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 и 480. При этом можно задать собственную ширину и изменять все параметры под свой дизайн.

Есть другой, менее навороченный метод, который также с помощью jQuery показывает сетку. Этот метод позволяет выравнивать только по столбцам. Автор метода советует использовать калькулятор величин Grid Calculator.

Самый простой способ, который уже давно используют на Западе — HTML-элементу body присваивается CSS-свойство background, в котором прописывается адрес картинки с вертикальной сеткой:

BODY {background: url(images/grid.gif) repeat-y;}

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

Выравнивание по горизонтальным линиям

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

Всего оставлено 5 комментариев

  1. Роман 13 июня 2009

    Отличный материал. Действительно бывает легко запутаться в отступах. Попробовал метод выравнивания через простой CSS – работает ;)

  2. ilya 15 июня 2009

    Никита, я очень рад что ты опять начал обновлять свой блог. Тема поста хоть и не сверх-новая, но отличная для «почина» :)

  3. Никита 15 июня 2009

    Илья, спасибо!

    На самом деле этой идее как таковой уже более 5-ти лет. Но в Рунете об этих инструментах никакой информации нет.

    Кстати для Firefox есть плагин GridFox, который хорошо справляется с наложением сетки на сайт. Для Opera есть нечто подобное — easyGRID (Простая модульная сетка в дизайне).

    Жаль, что такое удобство не встроено в Web Developer Toolbar.

  4. Роман 30 июня 2009

    Спасибо за easyGRID оч полезная штучка. А Вот как ?grid=1 пользоваться я не понял, ну вставил, ну появилась, а размеры менять не знаю как)

  5. Роман, сетка easyGRID (расширение для Opera) никак не связано с ?grid=1. Это значение сделано специально для этого сайта, чтобы с помощью PHP изменить в CSS картинку заднего фона на сетку.

Поиск по сайту

Следующая запись

Предыдущая запись

Из последнего

Архив статей и записей