Как спроектировать современный сайт (Вин) - страница 20

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

Базовая сетка

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

Горизонтальная или вертикальная ориентация

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

Промежутки между колонками

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

Поля страницы и отступы

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

Элемент

Элементы – это любые единичные компоненты структуры, например, заголовок, абзац текста, фотография или кнопка.

Модуль

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

Глава 4. Начинаем творить

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

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