Сетка 960 grid как пользоваться

Обновлено: 08.01.2025

В этом уроке мы разработаем дизайн веб-страницы, используя 960 Grid System . Вы увидите, как работая с этой системой можно рационализировать процесс веб-разработки и как пользоваться системой сетки:

Container

Контейнер – корневой элемент разметки 960gs, задающий параметры для модульной сетки. «Корневой элемент» — означает, что только дочерние по отношению к нему элементы фреймворка будут участвовать в формировании модульной сетки, «задающий параметры» — означает, что все элементы фреймворка, что находятся внутри контейнера, подчиняются его параметрам единообразным образом.
Контейнер с 12 колонками может выглядеть так:

Контейнер задает следующие параметры для модульной сетки:

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

Несколько контейнеров удобно использовать, к примеру для того, что бы разделить страницу на области на шапки/основного содержимого/подвала (header/content/footer).

Вложенные контейнеры в рамках идеологии 960gs являются абсурдом (представьте себе вложенные <body> в html), однако путем манипуляций с отступам в css вложить контейнеры друг в друга возможно. Вот только зачем?

Ширина колонки: 60px
Кол-во колонок: 12
Ширина канавки: 20px
Ширина контейнера = (60*12) + (20 * 11) + (20/2 * 2) = 960px

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

Grid – один из двух базовых элементов разметки, предназначенный для расположения html-элеменов на модульной сетке контейнера. Ячейка (grid), всегда ориентирует свое содержимое в горизонтальной плоскости по отношению к контейнеру. Одна ячейка может занимать как одну колонку модульной сетки, так и все сразу, названия классов отражают данное свойство: для ячейки, занимающей одну колонку, класс будет иметь имя grid_1, для ячейки в две колонки – grid_2, для пятиколоночной ячейки — grid_5 и т.д. Следоватльно, в общем виде мы можем представить класс, как grid_X, где X – необходимая нам ширина ячейки в колонках модульной сетки. Рассмотрим пример с сетками grid_1, grid_6 и grid_12 соответственно:

Одна ячейка вполне себе может соседствовать с другими ячейками по горизонтали, при условии, что они все вместе покрывают колонок не более, чем есть в контейнере:

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

Шаг 19: Расслабьтесь. Финиш!

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

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

Полностью пустые пространства

Чтобы достичь этого, для блоков div применяются классы prefix и suffix . Их реализация очень похожа на реализацию классов push и pull.

Например, чтобы оставить пустое пространство, которое будет по ширине равно одному столбцу, используйте перед элементом класс prefix_1 или после элемента класс suffix_1 :

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

Сессии CSS классов

Когда вы смотрите на приведенные выше диаграммы, то каждую из темно-синих горизонтальных полос можно рассматривать в 960 Grid System , как класс CSS.

Чтобы создать объект в структуре вашей страницы, ширина которого соответствует ширине одного из этих блоков, нужно просто присвоить ему в div надлежащий класс – вот и все!

Таким образом, еще раз взгляните на приводимое раньше изображение, но на этот раз думайте о разных размерах ширины столбцов, как о классах CSS:

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

Например, в версии с 12 столбцами, если у вас есть 3 блока текста, которые вы хотите разместить бок о бок в 3 столбца, просто присвойте класс grid_4 каждому из них, что в сумме составит 12 (4+4+4=12):

Аналогично, присвоив класс CSS grid_4 в версии с 16 столбцами, можно легко создать макет из 4 столбцов (4+4+4+4=16):

Чтобы быть уверенными, что вы использовали соответствующие классы, не забудьте разместить элементы 12-разрядной версии внутри div с классом container_12, а классы 16-разрядной версии внутри div с классом container_16 .

Если вы никогда до этого не работали с 960 GS, я рассчитываю, что прямо сейчас у вас вырвется восклицание на манер « Вот оно как! », которое будет относиться к тому, насколько просто манипулировать макетом с помощью этой системы.

Шаг 14: Добавляем список услуг

Повторяйте этот шаг для добавления данных:

Дизайн на базе сетки

Прежде чем перейти к специфике 960 Grid System , давайте кратко рассмотрим дизайн на основе сетки в целом. Эта идея, конечно, не возникла с появлением Интернета. На самом деле, она происходит от одного из старейших и фундаментальных принципов проектирования: выравнивания.

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

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

Рассмотрим два макета страниц, которые представлены на рисунке ниже:

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

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

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

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

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

Шаг 11: Добавляем слайд-шоу

Это фон к слайдшоу:

Далее вам понадобится некий фиктивный контент для размещения в слайд-шоу. Я использовал скриншот моего блога. Размер меняем под размер области слайд-шоу с помощью меню Select> Modify> Contract 10px , выбрав инверсию, как ранее, далее delete :

Шаг 17: Подвал – правая часть

Push Me, Pull Me

960 Grid System позволяет независимо перемещать элементы, перетаскивая их вдоль горизонтального края. Это достигается с помощью классов CSS push и pull .

Рассмотрим два примера, приведенные на рисунке ниже. Первый пример является макетом, состоящим из 4 столбцов, использующим только класс grid_3 .

А во втором варианте, я потянул первый столбец и поставил его на место последнего, в результате чего столбцы сместились на одну позицию, относительно того, как они обычно располагаются в макете:

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

Система push/pull глубоко затрагивает структуру страницы в HTML-документе.

Например, представьте, что в приведенном ниже примере мы вводим имя сайта в логотипе и помещаем его в первый элемент на странице.

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

Чтобы визуально расположить элемент логотипа между двумя текстовыми столбцами, вы должны использовать следующий HTML-код:

В результате выводимый макет будет выглядеть следующим образом:

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

960 Grid System - это очень просто

Когда я впервые столкнулся с 960 Grid System, я был чрезвычайно взволнован тем, как просто с ее помощью можно реализовать сложные макеты.

Однако, так как в то время я был еще относительным новичком в веб-дизайне, когда я скачал файлы, там было столько информации, что очень быстро все это мне стало казаться очень сложным:

При наличии такого количества кодов, разве можно просто создать макет?

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

Мы рассмотрим конкретно 960 Grid System , однако после прочтения этого руководства, вы увидите, что большинство других систем сеток очень похожи, и вам будет проще с ними работать после того, как вы поймете несколько основных принципов.

Шаг 10: Добавляем содержимое в область Callout

Под этим местом сделаем небольшое вводное предложение шрифтом 17pt и поместим его в левой части области:

Начало и конец

Очевидно, что класс alpha будет применяться к первому дочернему элементу, а класс omega к последнему.

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

Шаг 12: Секция содержимого

Шаг 6: Добавляем меню

Меню. Чтобы сохранить простой и строгий вид, мы будем использовать текст в основе меню. Выбираем для меню шрифт 18pt Arial .

Шаг 16: Подвал

Шаг 13: Содержимое – левая область

Все о 960gs — отличном css-фреймворке для построения модульных сеток

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

960gs получил свое название из-за выбора Натаном Смитом (Nathan Smith), автором фреймворка, полной ширины контейнеров по-умолчанию в 960 пикселей. Однако, 960 px – совсем не железное ограничение.

Все элементы 960gs описаны как классы для css. Очевидно, использовать их следует как <тег >.
В данной статье я буду использовать код фреймворка с официального сайта, 960.gs/css/960.css. Для чтения и понимания статьи этот код смотреть совсем не обязательно, в конце повествования я остановлюсь на способах получения css-кода подробнее.
В примерах, в качестве элементов разметки, я буду использовать дивы, а, для удобства – называть такие дивы по имени их 960gs-класса. К примеру, див с классом .container_12 я буду называть элементом container. Надеюсь, эта небольшая вольность найдет понимание в глазах гуру от верстки.
Так же, при описании параметров элементов фреймворка, я буду описывать только параметры оригинального css-кода. Разумеется, верстальщик волен менять их или дополнять новыми свойствами так, как ему будет нужно.
При переводе, элемент grid получил название «ячейка», что несколько далеко от дословного «сетка», зато звучит не так уродливо и гораздо ближе к реальному назначению. Сравните: «поместить три сетки в одну строку» и «поместить три ячейки в одну строку».
Надеюсь с шероховатостями покончено, поэтому перехожу непосредственно к теме данной статьи.

Clear

Вероятно, все, кто читал предшествующий код заметили, что в нем появился новый элемент:

Clear – второй базовый элемент разметки 960gs. Что бы понять, что же делает clear, рассмотрим следующую ситуацию: я попытаюсь переписать последний пример, не используя clear, для удобства добавив контейнеру красный ободок.

Хм, контейнер не растянулся дочерними ячейками, а остался худеньким и одиноким. Следовательно, первая задача clear – растягивать родительский контейнер до ожидаемых размеров. Теперь, предлагаю посмотреть внимательно на первый пример из раздела grid, в котором каждая ячейка единолично занимает всю строчку. Из этого примера логично сделать вывод, что вторая задача clear – завершать текущую строку, независимо от того, сколько в ней осталось свободных колонок.
Из этих двух правил следует хорошая привычка при работе с 960gs всегда завершать любую строку с помощью clear, даже если эта строка последняя или единственная в контейнере.

Не секрет, что дивы с классом clear используются верстальщиками относительно часто. Для того, что бы избежать возможных конфликтов между кодом всего сайта и кодом 960gs в будущем, вероятно, верстальщику следует либо переименовать в коде css файла фреймворка класс clear на какой-нибудь другой (к примеру, на clr), либо уточнить его, (например, .container_12 .clear). Всё же, по моему мнению, переименование в случае вероятных конфликтов – более подходящий способ.

Далее я перечислю все дополнительные классы для элемента grid. Дополнительные они потому, что существуют только как добавочные классы к основному классу grid_X. К примеру,

Шаг 9: Добавляем фон для секции Callout

Создайте новый слой поверх слоя Callout и заполните его созданным на шаге 8 паттерном с помощью меню Edit > Fill :

Поверните этот слой на 15 градусов, примените к нему наложение белого цвета и поместите его над секцией callout . Затем создайте новый слой и объедините его с белым решетчатым слоем. Дайте ему имя:

Примените режим наложения Soft Light к этому слою. Выберите область callout также с помощью инструмента Rectangular Marquee Tool или клавишей CTRL + клик мышкой на слое.

Затем выберите Rectangular Marquee Tool правым кликом мыши (CTRL + клик мышкой) и выберите select inverse и затем Delete . Эти действия уберут всю сетку, которая не находится в области блока callout :

Выберите маску слоя, щелкнув по ней, затем, используя инструмент Gradient Tool (G) , выберите градиент от черного к прозрачному.

Мы собираемся использовать данный способ для того, чтобы уничтожить сетку, которая располагается за переделами области в 960px.

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

Шаг 2: Добавляем сетку

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

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

Для начала скачайте 960 grid system . После этого распакуйте 960 Grid System Натана

Смита в папку с шаблонами. Открываем 12 столбцовый макет 960 grid в Adobe Photoshop :

Теперь нам нужно создать базовую сетку. Базовая сетка поможет с промежутками между элементами и высотой линий. Создадим новый документ 24 на 24 пикселя, удалим фон, нарисуем линию, толщиной 1 px в нижней части документа.

Мы определим этот документ как шаблон: Edit > Define Pattern и присвоим ему запоминающееся название:

Далее возвращаетесь к нашему документу и создаете новый слой. Заполняете этот слой шаблоном, Edit> Fill . Так мы создадим базовую сетку:

И наконец, мы выделим нашу рабочую область, используя направляющие. Создаем новую направляющую View > New Guide , выбираем вертикальный тип и создаем направляющие в точках 360px, 840px и 1320px.

Шаг 5: Вставляем лого

Далее вставляем лого в левый верхний угол, равняем его по второму столбцу сетки, оставляя отступ в 40px. Для этого проекта я использовал лого, основанное на шрифте 50 pt Century Gothic .

Шаг 3: приступаем к дизайну

Теперь, когда у нас настроен шаблон, мы можем приступить непосредственно к дизайну.

Мы разделим страницу на пять секций:

Header;
Callout;
Content – Left;
Content – Right;
Footer.

Шаг 8: Делаем фон для области Callout

Так как мы назвали компанию « blue grid », добавим фон для секции Callout в стиле решетки. Для этого будем использовать технологию, схожую с той, которой пользовались, добавляя горизонтальные линии.

Для начала создаем документ размерами 25px на 25px. Снова удаляем фон, делая документ прозрачным, и рисуем одиночную линию шириной в 1px вдоль нижней части и еще одну в верхней части.

Завершаем этот шаг, присваивая этому документу вид шаблона путем Edit > Define Pattern :

Шаг 18: Проверьте выравнивание и баланс всей страницы

Шаг 4: Добавляем заголовок (Header)

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

Эта область будет использоваться под лого и панель меню:

Prefix, Suffix, Push и Pull

Эти четыре дополнительных класса, по сути, являются более абстрактной заменой padding-left, padding-right, left и right соответственно. Стоит отметить, что пользоваться этими классами гораздо удобнее, чем вычислять нужные отступы в уме или на калькуляторе.
Все они имеют названия классов, сходные с названиям классов ячеек: имякласса_X, где Х – количество столбцов модульной сетки.
Рассмотрим простой пример:

А теперь применим к каждой из ячеек со стишком классы prefix_1, suffix_1, push_1 и pull_1 соответственно:

На сим позвольте откланяться, желаю интересных и сложных вам проектов в новом году!

960 Grid System

960 Grid System – это простой способ создавать макеты сайтов с использованием сетки, которая имеет ширину 960 пикселей:

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

960 GS выпускается в двух основных вариантах: сетка с 12 столбцами и сетка с 16 столбцами (возможно подключение 24-разрядной версии, для тех, кому нужен экстремальный контроль дизайна).

В версии из 12 столбцов, самый узкий столбец имеет ширину 60 пикселей. Ширина каждого следующего столбца увеличивается на 80 пикселей.

Таким образом, доступные размеры ширины столбцов составляют: 60, 140, 220, 300, 380, 460, 540, 620, 700, 780, 860 и 940 пикселей:

В 16-разрядной версии самый узкий столбец имеет ширину 40 пикселей, и каждый следующий столбец становится шире на 60 пикселей.

Таким образом, доступные размеры ширины столбцов составляют: 40, 100, 160, 220, 280, 340, 400, 460, 520, 580, 640, 700, 760, 820, 880 и 940 пикселей:

Уже запутались?

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

Решение? Найти кого-то другого, кто разберется с этими сумасшедшими вычислениями ширины столбцов, забьет их в CSS-документ и позволит вам скачать его бесплатно. (Этим человеком оказался Натан Смит , создатель 960 Grid System ).

Сохраняем документ как шаблон

Вы можете сохранить этот документ в качестве шаблона и использовать по мере необходимости. Это сэкономит вам кучу времени.

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

Ваши мысли по поводу сеточных систем?

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

Создание прототипа с помощью CSS-фреймворка Grid 960

Grid 960 — это CSS Фреймворк, который позволяет разработчикам быстро конструировать прототипы дизайна. Они являются замечательным инструментом для создания макетов. Почему? Потому что они делают за вас всю тяжелую работу, позволяя получить быстрые результаты.

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

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

Создание Сетки

Grid 960 работает на основе наследования классов. Этот фреймворк предоставляет две сетки: 12 и 16 колонок. Основной контейнер всегда имеет ширину 960px. Использование числа 960 позволяет применять большинство различных комбинаций колонок, без усложнения работы с ними. Для верстки этого дизайна, мы будем использовать сетку из 12-ти колонок, но мы не будем использовать все 12 колонок. Каждой ячейке сетки назначено свойство margin: 0 10px. Это создает промежуток в 20 пикселей. При создании строки, сумма ширины всех элементов добавляется к 960. Взгляните на демонстрационную страницу Grid 960. Вы увидите сетку со всеми видами комбинаций. Каждая ячейка сетки имеет класс, который определяет, какой она будет ширины. Далее представлена разбивка ширины столбцов для 12-ти колоночной сетки:

Каждая ширина соответствует имени класса, оформленного в виде: grid_X, где X это порядковый номер из представленного выше списка. Если вам нужен блок, шириной 940px, используйте класс grid_12. Откуда же Grid 960 знает, какая должна использоваться ширина? Каждый grid_X представляет собой селектор container_Y .grid_X, где значение Y равно 12 либо 16 колонок.

Давайте немного рассмотрим сам код. Вот как можно создать сетку из двух строк в 12-ти колоночном контейнере. Здесь первая строка шириной 940 пикселей, и вторая строка содержит две одинаковых колонки.

< div class ="container_12" >
< div class ="grid_12" >< p > 940px </ p ></ div >

< div class ="clear" ></ div >
< div class ="grid_6" >< p > 460px </ p ></ div >
< div class ="grid_6" >< p > 460px </ p ></ div >

< div class ="clear" ></ div >
</ div >

* This source code was highlighted with Source Code Highlighter .

Когда вы создаете строку в сетке, убедитесь, что все дочерние номера gird_X в сумме дают число колонок, которое вы используете. Это гарантирует правильную ширину. Два дива с классом grid_6, дают в сумме 12. Вы не ограничены только этими значениями, и также можете использовать 6, 4 и 2. Вот и все, сетка готова для контента. Теперь, после того как вы узнали как работает Grid 960, давайте посмотрим как создается макет.

Макет

Визуализировать сетку дизайна довольно легко. Будет одна строка для картинки заголовка, строка для навигации, строка с двумя колонками для статьи заголовка и постера, разделитель, 4 колонки, затем подвал, состоящий из трех колонок.

После визуализации, вы должны понимать, как создать сетку макета. Используя значения ширины в имени класса, из приведенного списка, давайте вместе составим код. Помните, что необходимо добавлять очищающий div в конце каждой строки. Не забудьте включить CSS-файлы, входящие в состав Grid 960.

< div class ="container_12" >
< div class ="grid_12" ></ div >
< div class ="clear" ></ div >

< div class ="grid_12" ></ div >
< div class ="clear" > </ div >

< div class ="grid_7" ></ div >
< div class ="grid_5" ></ div >

< div class ="clear" ></ div >

< div class ="grid_12" ></ div >
< div class ="clear" ></ div >

< div class ="grid_3" ></ div >

< div class ="grid_3" ></ div >
< div class ="grid_3" ></ div >
< div class ="grid_3" ></ div >
< div class ="clear" ></ div >

< div class ="grid_12" ></ div >
< div class ="clear" ></ div >

< div class ="grid_4" ></ div >
< div class ="grid_4" ></ div >

< div class ="grid_4" ></ div >
</ div >

* This source code was highlighted with Source Code Highlighter .

Скелет готов. Пришло время накладывать дизайн. Зеленые панели – это просто блоки с фоновым цветом и высотой. У панели навигации высота не задана. Вместо этого, она будет контролироваться размером внутренних ссылок. Не забудьте добавить картинку заголовка.

* This source code was highlighted with Source Code Highlighter .

Применение классов для корректировки блоков grid_12 и установка ID

< div class ="container_12" >
< div class ="grid_12" >< a href ="images/header.jpg" alt ="" />
</ div >
< div class ="clear" ></ div >

< div class ="grid_12" id ="navbar" ></ div >
< div class ="clear" > </ div >

< div class ="grid_7" ></ div >

< div class ="grid_5" ></ div >
< div class ="clear" ></ div >

< div class ="grid_12 spacer" ></ div >
< div class ="clear" ></ div >

< div class ="grid_3" ></ div >
< div class ="grid_3" ></ div >
< div class ="grid_3" ></ div >
< div class ="grid_3" ></ div >

< div class ="clear" ></ div >

< div class ="grid_12 spacer" ></ div >
< div class ="clear" ></ div >

< div class ="grid_4" ></ div >

< div class ="grid_4" ></ div >
< div class ="grid_4" ></ div >
</ div >

* This source code was highlighted with Source Code Highlighter .

Центральным колонкам не требуются никакие эффекты. Добавим немного текста для заполнения дизайна. Прежде, чем приступать к верхней части, взглянем на подвал. На скриншоте подвал однородного цвета. У вас не получится реализовать это с существующим кодом. Оборачивающий div, вокруг этих трех колонок решит проблему. Вы думаете, ничего страшного, просто нужно вставить div. Но этот див поломает сетку, поскольку Grid 960 основывается на родительских и дочерних элементах, при использовании стилей (вспомните селектор container_12 .grid_4 ). В данном случае, проблему поможет решить вложенная сетка, которую Grid 960 позволяет использовать. Создайте вложенную сетку, путем добавления блока grid_12, затем расположите внутри блоки grid_4. При использовании вложенных сеток, дочерние элементы должны иметь специальные классы. Первый дочерний элемент должен иметь класс «alpha», а последний дочерний блок – класс «omega». Отредактируйте разметку для внесения необходимых изменений для подвала.

< div class ="grid_12" id ="footer" >
< div class ="grid_4 alpha" ></ div >
< div class ="grid_4" ></ div >

< div class ="grid_4 omega" ></ div >
</ div >

* This source code was highlighted with Source Code Highlighter .

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

< div class ="grid_12" id ="navbar" ></ div >
< ul >
< li > Articles </ li >
< li > Topics </ li >

< li > About </ li >
< li > Editors </ li >
< li > Contact </ li >
</ ul >

* This source code was highlighted with Source Code Highlighter .

CSS-фреймворки не решат всех ваших проблем

Например, если бы этот же дизайн был шириной в 1000 пикселей. Grid 960 создает сетку шириной 960 пикселей, так что макеты большего размера уже использовать нельзя. Что если вы захотите расширить макет до 1000 пикселей, вместо 960-ти? Можно с уверенностью сказать, что вы не сможете это сделать без реализации нескольких сложных изменений кода.

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

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

Есть еще один аспект Grid 960, который следует принять во внимание, прежде, чем мы перейдем к верхней секции. Grid 960 основывается на размерах элементов и отступов, при создании строки правильного размера. Если вы используете рамку или внутренний отступ (padding), макет сломается. Следовательно, если вам нужно их использовать, вы должны предусмотреть это в размере блока, для отражения изменений. Это очень утомительно. Указание размеров элементов в двух местах, всегда будет приводить к путанице, к тому же макет будет гораздо сложнее в обслуживании. Вот и все. Давайте закончим верхнюю секцию.

Верхняя секция

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

< div class ="grid_7 topSection" >
< div > </ div >
</ div >
< div class ="grid_5 topSection" >

* This source code was highlighted with Source Code Highlighter .

Используйте классы, вместо ID, потому что класс topSection применяется к обоим блокам. Это к тому же, упрощает изменение высоты. Выберите значение высоты, и создайте класс.

div.topSection div p <
margin: 10px;
>

* This source code was highlighted with Source Code Highlighter .

Отлично! Давайте посмотрим на нашу работу.

Приступаем к наполнению контентом. Заполните левый блок небольшим количеством текста. Только не увлекайтесь, если текста будет слишком много, он вылезет за край блока. Это создает потенциальную проблему в макете. Как вы узнаете, какое количество текста будет слишком большим? В производственном дизайне, для предотвращения этой проблемы, дизайнеру пришлось бы создать функцию, выводящую определенное количество слов.

Теперь, давайте вставим картинку. Только, прежде чем ее вставлять, укажите размеры. Если вы нормальный математик и понимаете боксовую модель, вы, скорее всего, уже знаете, какого размера она должна быть. Если не знаете, запустите Firebug и взгляните на DOM. Включите кнопку Inspect и кликните по блоку, в котором будет размещаться картинка. Откройте вкладку Layout. Firebug отобразит боксовую модель выделенного вами блока.

Скриншот показывает размер картинки 360 x 280. Найдите картинку, и создайте стиль. Я решил позволить картинке целиком заполнить весь блок. Если вы хотите создать 10-ти пиксельные отступы, убедитесь в том, что уменьшили размеры по 20 пикселей с каждой стороны.

* This source code was highlighted with Source Code Highlighter .

У вас должно было получиться следующее. Можете смело менять текст или картинку.

Помните об ограничениях

Теперь, когда прототип готов, давайте подведем итоги проделанной работы. Вы научились быстро создавать прототипы дизайна. Grid 960 легко создает сетку для нас. И что же дальше? Естественно, нужно показать клиенту, и послушать, что он скажет. Хотя, есть несколько предостережений. Тестировался ли дизайн в IE6 и IE7? Нет. Нужно ли это делать? Нет. Это только прототип. Конечно же, все особенности браузеров будут учтены, до производства.

А что если клиенты захотят создать более комплексный дизайн? В таком случае, вы быстро обнаружите ограничения фреймворка. Что если дизайн должен быть резиновым или эластичным? Фреймворк не сможет вам в этом помочь, поэтому вам придется делать все с нуля. Помните, что CSS-фреймворки не решат все ваши проблемы, но они могут помочь с некоторыми. Grid 960 также как и другие фреймворки, замечательно подходит для создания прототипов.

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

Зачем нужна система сеток?

960 Grid System – как и другие подобные инструменты – обеспечивает быстрый и простой способ создания макетов на основе сетки с помощью CSS. Это делается путем предоставления протестированных на совместимость с браузерами и оптимизированных предустановленных размеров столбцов, в которых вы можете размещать контент.

До CSS3, не так то и просто было разбить веб-страницу на столбцы, не прибегая к утомительным математическим вычислениям.

Например, если у вас есть контейнер шириной в 1000 пикселей, и вы хотите разделить его на три столбца, то это будет 333 и 1/3 пикселя на столбец (не лучшее число). Кроме того, столбцы должны быть разделены, иначе их содержимое сольется – значит нужно добавить отступ.

Если к этому добавить отступ в 10 пикселей с каждой стороны каждого столбца, мы должны дополнительно вычесть по 20 пикселей от ширины каждого столбца. Это дает нам 3 столбца примерно по 313 пикселей в ширину и с отступом в 10 пикселей с каждой стороны (даже в этом случае получается 999 пикселей, а не 1000).

Хотите создать 4 столбца чуть ниже? Тогда вы должны начать весь процесс подсчетов с начала и вычесть 80 пикселей отступа от 1000 пикселей общей ширины, а затем 920 пикселей разделить на 4, чтобы получить ширину столбцов в 230 пикселей.

Наконец, если вы хотите добавить боковую панель, которая будет иметь ширину в одну треть ширины страницы, вы должны создать столбец в 750 пикселей для контента и еще один в 250 пикселей для боковой панели, затем вычесть 40 пикселей отступа, чтобы получить ширину одного столбца 730 пикселей и 230 пикселей – ширину другого.

Шаг 1: Создаем новый документ

Полезные направляющие

Если вы работаете напрямую из файла 960 Template , направляющие уже созданы, и их необходимо только отобразить через меню View > Show > Guides :

Подводя итоги

Получив эти новые знания, теперь вы должны чувствовать себя экспертом 960 Grid System .

Базовые принципы системы включают в себя всего 5 концепций, которые вы должны помнить:

используйте класс container_12 для версии системы с 12 столбцами и container_16 для версии с 16 столбцами;
используйте классы grid_1 , grid_2 , grid_3 и т.д., чтобы установить ширину столбцов. Если вы хотите заполнить горизонтально всю ширину страницы, убедитесь, что сумма номеров классов равняется 12 или 16 соответственно ( grid_4 + grid_2 + grid_6 = 12);
используйте классы push и pull , чтобы самостоятельно размещать элементы на странице, независимо от их положения в документе разметки;
используйте классы prefix и suffix , чтобы создавать пустые пространства в макете;
используйте классы alpha и omega , чтобы установить границы для любых вложенных элементов сетки.

В 960 Grid System используется также сброс CSS. Это опциональный файл, в основе которого лежит популярный набор сброса CSS Эрика Мейера . Если он вам понравится, используйте его. Если нет, отправьте его в корзину!

Ресурсы 960 Grid System

Теперь, когда вы являетесь экспертом веб-дизайна на основе сетки и 960 Grid System , вот несколько инструментов и ресурсов, с которыми вы можете ознакомиться, чтобы еще больше разобраться в этой теме.

Fluid 960 Grid System

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

The 1KB CSS Grid

Чрезвычайно простая система сеток, элементарная и легкая для понимания. Она имеет много возможностей для настройки, но по умолчанию использует базу в 960 пикселей:

Variable Grid System

Простой и гибкий конструктор CSS сеток на базе 960 Grid System :

Grid-Based Design Gallery

Если вы скептически относитесь к 960 Grid System и к тому, что дизайн на основе сетки может предложить вам как веб-дизайнеру, ознакомьтесь с этой галереей макетов. Как видите, приложив немного фантазии и изобретательности, вы получаете просто безграничные возможности:

Typogridphy

Цитата с официального сайта: « Typogridphy – CSS фреймворк, разработанный, чтобы предоставить веб-дизайнерам и разработчикам интерфейсов возможность быстро создавать привлекательные сеточные макеты типографского качества »:

Tiny Fluid Grid

Это конструктор сеток для адаптивной версии описанной выше системы 1KB Grid System :

За рамки сетки

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

Кроме того, поэкспериментировав с 960 GS , вы увидите, что существует множество способов выйти за рамки системы, что заставит вас переосмыслить свои проекты.

Alpha и Omega

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

В таких случаях следует использовать классы alpha и omega. Суть проста – если в ячейку мы вкладываем несколько других ячеек, то у первой вкладываемой ячейки нужно поставить класс alpha, а у последней, очевидно, omega.

Кстати, пример является одним из редких случаев необходимости использования тега <br>.

Если нужно вложить только одну ячейку, достаточно использовать только класс alpha, без omega.

Шаг 7: Добавляем Callout

Я назвал эту секцию Выкладка потому как на самом деле это именно то, что она делает — выкладывает информацию о странице.

Мы добавим градиент в этой секции. Двойной клик для вызова Layer Style Panel и выбор Gradient Overlay . Тип окрашивания выставляем равным transparent overlay и меняем blend mode на overlay , уменьшаем opacity до 30%:

Читайте также: