Сетка 960 – Как установить плагин 960 grids. Зачем мне необходима сеточная система? Дизайн на базе сетки

Создаем дизайн веб-страницы с помощью 960 Grid

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

Начнем с создания нового документа в Photoshop, шириной 1680 px и высотой 1100 px. Фон заливаем светло-серым цветом (# F9F9F9).

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

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

Для начала скачайте 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.

Мы выбрали именно эти точки, потому как при ширине рабочей области в 960px, между точками 360px и 1320px — центральная 840px.

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

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

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

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

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

1. Header;
2. Callout;
3. Content – Left;
4. Content – Right;
5. Footer.

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

С помощью Rectangular Marquee Tool выбираем область шириной во весь документ и высотой в 120px — вам могут помочь направляющие или же тяните за край прямоугольного выделения до тех пор, пока не заполните пять горизонтальных маркеров, затем заливайте выделенную область серым цветом (#2C2C2C).

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

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

Первое слово — залито светло-голубым (#ADC7D9), второе выделено жирным и залито белым (#FFFFFF). Далее применяем внутреннюю тень к элементам лого.

Я уменьшил внутреннюю непрозрачность до 25%, поставил значения Distance равное 2px , Choke равное 0% и Size — 5px:

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

Цвет активной ссылки, которая, в нашем случае, Home, имеет белый цвет (#FFFFFF), а остальные заполняем серым (#BBBBBB). Совмещаем эти элементы и помещаем их в центре верхней части заголовка:

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

Повторим действия на примере тех, что выполнили, создавая заголовок. С помощью инструмента Rectangular Marquee, выбирая высоту, равную 240px и заполняя голубым цветом (#ADC7D9), как и лого, делаем прямоугольник.

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

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

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

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

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

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

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

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

Следующее, что мы должны сделать — убедиться в том, что решетчатый участок распространяется только на область рабочей зоны шириной в 960px. Используйте View > Show > Guides, затем добавьте маску слоя к решетчатому слою:

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

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

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

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

Область callout необходимо наполнить контентом, который будет выполнен шрифтом Arial 45pt (#2C2C2C) и выделить необходимые слова жирным.

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

Берите в руки Rectangular Marquee Tool и растягивайте прямоугольник между крайними правыми и средними направляющими, ставьте высоту в 8 линий, оставляя 1 линию вверху и 1 линию внизу, и заливайте темно-серым цветом (#2C2C2C).

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

Добавьте тень к фону, дважды кликнув на панели Layer style и выбрав drop shadow, изменив цвет на # (2C2C2C) и выбрав Distance равный 1px и size, равный 10px:

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

Для начала добавим легкий градиент в этой секции. Сначала используйте Rectangular Marquee Tool, чтобы выбрать область для размещения контента, затем — Gradient Tool (G).

Выберите градиент от цвета (# f0f0f0) к прозрачности и перетащите его вниз. Не заходите слишком далеко. Фон у границы нижней части страницы должен вернуться к цвету (# F9F9F9):

Добавьте параграф описания шрифтом Arial 18pt #9C9C9C и со стилем ссылки Underlined #A3BBCC:

Для начала добавьте заголовок шрифтом Arial 25pt Bold #262626, затем добавьте элементы списка шрифтом Arial, цветом # 9C9C9C и величиной в 18 пунктов.

Пункт маркированного списка можно иллюстрировать с помощью Elliptical Marquee Tool или же использовать комбинацию клавиш Alt +7.

Выкрасите все пункты списка в светло-голубой цвет (# A4BCCD) и выровняйте по сетке:

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

Наш последний раздел — подвал. Он будет содержать форму для авторизации, контактные данные и несколько ссылок. Начните с выбора нижней секции инструментом Rectangular Marquee Tool и залейте её темно-серым цветом (# 262626):

Добавим форму. Создайте заголовок шрифтом Arial 20pt Bold (#FFFFFF) и поместите в левую часть подвала. Затем с помощью инструмента Rectangular Marquee Tool нарисуйте два прямоугольника, которые будут полями для ввода данных.

Добавьте описания этим полям шрифтом Arial 16pt #9C9C9C:

Добавьте кнопку подтверждения ввода подобным же образом, но используя инструмент Rounded Rectangle Tool(U), затем добавьте Inner shadow к созданным элементам, установите значения параметра opacity в 30%, а size и spread в «0» и distance в 10px.

Добавьте ссылку «восстановить пароль» шрифтом Arial 13pt Underline #A4BDCD:

И наконец. Давайте закончим наш дизайн, добавив информацию о наших контактах. Заголовок исполните шрифтом Arial 20pt Bold (#FFFFFF) и подчеркните его, и ниже добавьте сами контакты шрифтом Arial 16pt #FFFFFF:

Используя сетку и направляющие, проверьте, что все выровнено и сбалансировано. Если нет — подстройте:

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

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

Скачать PSD-файл

Данная публикация представляет собой перевод статьи «Design a Clean Web Layout with the 960 Grid» , подготовленной дружной командой проекта Интернет-технологии.ру

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

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-ти колоночной сетки:

1. 60px
2. 140px
3. 220px
4. 300px
5. 380px
6. 460px
7. 540px
8. 620px
9. 700px
10. 780px
11. 860px
12. 940px

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

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

<div> 
  <div><p>940px</p></div> 
 
  <div></div> 
  <div><p>460px</p></div>  
  <div><p>460px</p></div> 
 
  <div></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> 
  <div></div> 
  <div></div> 
 
   
  <div></div> 
  <div> </div> 
   
  <div></div> 
  <div></div> 
 
  <div></div> 
   
  <div></div> 
  <div></div> 
   
  <div></div> 
 
  <div></div> 
  <div></div> 
  <div></div> 
  <div></div> 
 
   
  <div></div> 
  <div></div> 
   
  <div></div> 
  <div></div> 
 
  <div></div> 
</div> 

* This source code was highlighted with Source Code Highlighter.

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

div.spacer { 
  background-color: #8FC73E; 
  height: 1em; 
} 
 
div#navbar { 
  background-color: #8FC73E; 
  padding: 10px 0; 
} 

* This source code was highlighted with Source Code Highlighter.

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

<div> 
  <div><a href="images/header.png" alt=""/></div> 
  <div></div> 
 
   
  <div></div> 
  <div> </div> 
   
  <div></div> 
 
  <div></div> 
  <div></div> 
   
  <div></div> 
  <div></div> 
 
   
  <div></div> 
  <div></div> 
  <div></div> 
  <div></div> 
 
  <div></div> 
   
  <div></div> 
  <div></div> 
   
  <div></div> 
 
  <div></div> 
  <div></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> 
  <div></div> 
  <div></div> 
 
  <div></div> 
</div> 

* This source code was highlighted with Source Code Highlighter.

div#footer { 
  background-color: #e5e5e6; 
} 

* This source code was highlighted with Source Code Highlighter.

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

<div></div> 
  <ul> 
    <li>Articles</li> 
    <li>Topics</li> 
 
    <li>About</li> 
    <li>Editors</li> 
    <li>Contact</li> 
  </ul> 
 
</div> 

* This source code was highlighted with Source Code Highlighter.

div#navbar ul { 
  list-style: none; 
  display: block; 
  margin: 0 10px; 
} 
 
div#navbar ul li { 
  float: left; 
  margin: 0 1.5em; 
  font: bold 1em Arial; 
} 

* This source code was highlighted with Source Code Highlighter.

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

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

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

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

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

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

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

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

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

<div> 
  <div> </div> 
</div> 
<div> 
 
</div> 

* This source code was highlighted with Source Code Highlighter.

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

div.topSection div { 
  border: solid 10px #e5e5e6; 
  height: 280px; 
} 
 
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 пикселей с каждой стороны.

img#poster { 
  width: 360px; 
  height: 280px; 
} 

* This source code was highlighted with Source Code Highlighter.

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

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

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

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

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

Скачать архив с примером.

Фреймворк 960 Grid | Vaccina

960 Grid — это CSS Фреймворк, с помощью которого можно легко создать сайт не беспокоясь о кроссбраузерности. Система создаёт каркас шириной 960 пикселей в ширину и все блоки, созданные в этом каркасе должны соответствовать определённым пропорциям. Почему именно 960? И почему блоки должны быть фиксированной ширины?  Во-первых, т.к. данная ширина позволяется сделать n-ое количество пропорциональных сегментов из которых будет состоять страница, и ещё данная длина «удовлетворяет» подавляющее большинство экранных расширений. Во вторых, блоки с фиксированной шириной обеспечат нормальное отображение во всех браузерах, даже в IE6).

Рассмотрим его подробнее.

Начнем с недостатков.

Если вы хоть немного интересовались темой, то, конечно, знаете, что есть много возражений против применении CSS фреймворков как таковых.

Основные возражения такие.

 1) Фреймворки увеличивают размер страницы.

2) Загоняют разработчика в определенные рамки. Например, 960 grid предназначен для верстки страниц с шириной 960рх.

3) Многим не нравятся имена классов вроде «grid-16».

4) Кто-то считает, что нужно самому создавать фреймворк «под себя».

Но давайте посмотрим насколько существенны эти недостатки.

1) Объем файлов действительно увеличивается. Но 960 Grid System состоит из трех файлов, суммарный размер которых – 8 кБ (сжатая версия). Если использовать архивацию размер уменьшается до 1,6кБ.

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

2) По поводу ограничений. Фреймворк, как и любую библиотеку, имеет смысл использовать в случаях, для которых он разрабатывался. Т.е. если нужна «резиновая» верстка, 960 Grid – не подходящее решение (хотя есть проект Fluid 960 Grid System). Но если в тех. задании сказано, что страница должна иметь фиксированную ширину 960px, то ситуация меняется.

3) Имена классов. На мой взгляд – это вопрос привычки. Цифры в имени означают ширину блока и по ним достаточно просто ориентироваться. Кроме того, никто не запрещает использовать одновременно несколько классов, например,

<div class=”grid_4 sidebar”>…</div>

Класс grid_4 будет использовать фреймворк, sidebar – вашими стилями. 4) Свой фреймворк – это хорошо… если у вас есть время на его разработку и вы уверены, что он получится лучше существующих решений.

 

Теперь о преимуществах. 1) Время разработки. Оно сокращается и значительно, особенно если у вас есть минимальный опыт работы с фреймворком и вы используете его в подходящей ситуации. Т.е. нужно потратить какое-то время на изучение, но окупается оно очень быстро. 2) Фреймворки содержат «хаки» для наиболее распространенных браузеров. Каждый раз решать одни и те же проблемы с позиционированием элементов в IE очень быстро надоедает   3) Упрощается поддержка. Вам будет легче прочитать свой же код, написанный полгода назад, если вы все время используете одинаковые имена классов.

Дизайн основанный на сетке

Перед тем, как перейти к специфике системы 960 Grid, я хочу разъяснить что такое дизайн основанный на сетке. В принципе в этой системе нет ничего нового, т.к. она основана на старом и добром «выравнивании»

Итак, расслабляем мозги и начинаем впитывать информацию. Рассмотрим несколько макетов страниц:

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

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

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

Зачем мне необходима сеточная система?

960 Grid и подобные ей системы, позволяют быстро создать вёрстку основанную на сетке. Данный результат достигается при помощи протестированных на кроссбраузерность пресетов ширины страницы, куда вы помещаете свой код.

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

К примеру, у вас есть контейнер шириной 1000px и вы хотите разделить его на три колонки. При подсчёте вы выясняли, что вам понадобится 333px на одну колонку. Потом начинались заморочки с отступами, потому что если мы хотели добавить внешний отступ в 10 пикселей, то это значило, что нам надо отнять 20 пикселей у каждой колонки. В итоге у нас получались 3 колонки по 313px что в сумме давало 999px, но никак не 1000px.

А что если вам надо сделать ниже ещё 4 колонки? Всё сначала! Вам надо отнять 80px от ширины родительского контейнера. Остаётся 920px, которые мы делим на 4 колонки шириной 230px.

В конце концов, вы хотите добавить блок меню, который будет занимать 1/4 страницы. Вам надо разделить родительский контейнер на 2: один 250px, другой 750px. Далее опять отнять компенсирующую длину в 40px из-за отступов, и получить колонки шириной 730px и 250px
Вот это морока…

Многие дизайнеры сталкивались с этим. Это конечно не высшая математика, но на всё это уходит время и нервы. Представьте, что к всему вышеперечисленному надо добавить ещё и рамку в 1px (и всё по новой).

Где же тот кто нас спасёт от всего этого сумасшествия? Вот он — Nathan Smith, создатель 960 Grid.

Система 960 Grid

Данная система — это прекрасное решение для тех, кто не имеет ничего против сайтов шириной 960px.

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

Система 960 Grid может быть представлена нам в 2х начальных вариантах, состоящая из 12 или 16 колонок (Но так же есть и 24 колоночная система — но эт для извращенцев).

В 12 колоночной системе первая ячейка имеет 60px, а все последующие 80.

Так что вы можете делать колонки шириной: 60, 140, 220, 300, 380, 460, 540, 620, 700, 780, 860 и 940 пикселей.

Соответственно в 16 колоночной версии, первая будет составлять 40px, а все последующие 60px.

Это значит, что ширина колонки может быть следующей: 40, 100, 160, 220, 280, 340, 400, 460, 520, 580, 640, 700, 760, 820, 880 и 940 пикселей.

CSS классы

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

Для того, чтобы создать такой контейнер необходимо блоку присвоить соответствующий класс и всё!

Названия данных классов очень просты и говорят сами за себя. Например grid_1 — представляет самую короткую ширину, а grid_12 — саму длинную (в 12 колоночной системе).

Теперь, глядя на этот рисунок вы будете видеть не тёмные прямоугольники, а CSS классы:

Как я уже упомянула ранее названия классов говорят сами за себя. Однако запомните, что в 12 колоночной системе на одну строку не может быть больше 12 одно колоночных элементов и т.д. Так что в какой-то степени считать всё-таки надо будет. Но теперь намного легче). В системе с 16 колонками всё то же самое.

К примеру, если у вас 12 колоночная система и вы хотите создать 3 блока текста, следующие друг за другом, то вам этим трём блокам необходимо задать класс grid_4, что в сумме даст 12 (4+4+4)

Точно такая же логика рассуждения справедлива и к 16 колоночной системе для 4х блоков: 4+4+4+4 = 16.

Теперь внимание: для того, что всё это работало все ваши блоки нужно поместить в один родительский контейнер с классом container_12 или container_16.

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

Пихай туда, пихай сюда!

Кроме примитивных классов, который мы только что с вам видели, система 960 Grid поддерживает ещё несколько полезных фичей, таких к примеру, как перемещение колонки вперёд или назад. Соответственно классы будут push и pull.

Примеры вы можете увидеть на изображении, которое находится ниже. Первая часть изображения состоит из четырёх колонок с классом grid_3.

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

Помните, что вы можете перемещать колонки столько, сколько вам надо (но в пределах сетки). Если вы хотите переместить колонку на 2 ячейки, то вам надо выставить ей класс push_2 и т.д.

Данная система позволяет разместить элементы на странице.

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

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

До перемещения:

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

<div>
    <p>logo</p>
</div>

<div>
    <p>text column</p>
</div>

<div>
    <p>text column</p>
</div>

<div>
    <p>big box</p>
</div>

Результаты не заставят себя долго ждать.
После перемещения:

Цель достигнута!

Широкие открытые пространства

Если же вам понадобится создать некоторое открытое пространство между блоками, то тут на помощь к вам придут классы prefix и suffix, которые работают практически как push и pull.

К примеру для того, чтобы оставить 1 колонку пустой после блока используйте класс suffix_1 и prefix_1 для пустой колонки до элемента.

В примере выше, вы видите результат применения класса suffix_3 к первому элементу на странице.

В начало и в конец

Последнее что вам нужно знать это ещё два класса: alpha (первый) и omega (последний), которые должны применться только если элемент является потомком элемента с одним из вышеперечисленных классов.

Данные классы поставят элементы на соответствующие места — на первое и последнее.

Подытожим:

Всё! Теперь вы эксперт в системе 960 Grid.

Вам следует помнить 5 главных идей:
1.Используйте для родительского элемента класс container_12 если вы хотите использовать 12-колоночную систему и container_16 если 16 колоночную;
2.Используйте класса grid_1, grid_2, grid_3 и т.д. для того, чтобы задать ширину элемента. Помните об ограничениях (grid_4 + grid_2 + grid_6 = 12). В 16 колоночной системе соответственно;
3.Используйте классы push и pull для того, чтобы двигать колонки влево или вправо;
4.Используйте класса prefix и suffix для создания пустых промежутков между блоками;
5.И наконец используйте класс alpha и omega для перемещения колонки на первую или последнюю позицию;
Ресурсы системы 960 Grid

Последние мысли

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

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

Прототипы с Grid 960 CSS Framework

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

Также Вы можете скачать исходный код нашего макета:

Скачать исходный код

Звучит замечательно, но как это сделать? Есть много статей по поддержке CSS Framework-ов, но ни одна из них не содержит ничего, чтобы помочь неопытным читателям. Эта статья будет отличаться. Она охватывает весь процесс создания прототипа. Представьте, что вы получаете дизайн, и вам нужно сделать макет для клиента. Эта статья объясняет основы Grid960 , планирования сетки для проектирования и кодирования. Выборки будут использовать наиболее возможные Grid 960, давая вам твердую базу знаний для работы. После того как вы увидите дизайн ниже, самое время узнать о том, как Grid 960 работает.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Создаем сетку

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

60px

140px

220px

300px

380px

460px

540px

620px

700px

780px

860px

940px

Каждая ширина соответствует классу, формирующемуся следующим образом: grid_X, где Х — это номер из приведенного выше списка. Если вы хотите создать блок шириной 940, используйте класс grid_12. Как сетка 960 знает, какой должна быть ширина? Каждый grid_x является селектором container_Y. Grid_X где У равен 12 или 16 колонкам. Давайте посмотрим код. Вот как можно создать две строки сетки в столбце 12 контейнеров. Пусть первая строка будет 940px, а вторая строка содержит два равных столбца.

<div> <div><p>940px</p></div> <div></div> <div><p>460px</p></div> <div><p>460px</p></div> <div></div> </div>

<div> <div><p>940px</p></div> <div></div> <div><p>460px</p></div> <div><p>460px</p></div> <div></div> </div>

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

Создаем макет

Визуализация сетки дизайна легка. Существует одна строка для заголовка изображения, строки для навигационной панели, строки с 2 колонками для истории заголовков и плакатов, ниже 4 колонки, затем нижний колонтитул с 3 столбцами.

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

<div> <div></div> <div></div> <div></div> <div> </div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

<div> <div></div> <div></div>   <div></div> <div> </div>   <div></div> <div></div>   <div></div>   <div></div> <div></div>   <div></div>   <div></div> <div></div> <div></div> <div></div>   <div></div> <div></div>   <div></div> <div></div>   <div></div> </div>

Скелет готов. Время начинать накладывать дизайн. Зеленые панели — просто div-ы с цветом фона и высотой. Блок меню не имеет установленной высоты. Его высота будет управляться размером ссылок, которые лежат внутри блока. Так же не забудьте картинку в header сайта.

div.spacer { background-color: #8FC73E; height: 1em; } div#navbar { background-color: #8FC73E; padding: 10px 0; }

div.spacer { background-color: #8FC73E; height: 1em; } div#navbar { background-color: #8FC73E; padding: 10px 0; }

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

<div> <div><a href=»images/header.png» alt=»»/></div> <div></div> <div></div> <div> </div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

<div> <div><a href=»images/header.png» alt=»»/></div> <div></div>   <div></div> <div> </div>   <div></div>   <div></div> <div></div>   <div></div> <div></div>   <div></div> <div></div> <div></div> <div></div>   <div></div>   <div></div> <div></div>   <div></div>   <div></div> <div></div> </div>

Средние столбцы не требует какого-либо содержания. Добавьте какой-либо текст в эти блоки. Вы можете сделать это здесь. Прежде чем приступать к верхней части, переходите к колонтитулу. На скриншоте, нижний колонтитул залит сплошным цветом. Вы не можете сделать это при данной разметке. Оберните три нижних столбца в Div, чтобы решить эту проблему. Или просто вставьте див (DIV). Это нарушает сетку из-за того, что Grid 960 полагается на родительские и дочерние ячейки, чтобы применить стили (помните селектор container_12. Grid_4?). Подсетка решает эту проблему. Grid 690позволяет использовать вложенные сетки. Создайте подсетку, добавив grid_12 DIV, затем поместите grid_4 внутри его. При использовании вложенных сеток в дочерние элементы требуют специальных классов. Первая клетка нуждается в классе «alpha» а последняя — класс “omega». Измените разметку, чтобы отразить изменения и применить стилистические изменения в колонтитуле.

<div> <div></div> <div></div> <div></div> </div>

<div> <div></div> <div></div>   <div></div> </div>

div#footer { background-color: #e5e5e6; }

div#footer { background-color: #e5e5e6; }

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

<div></div> <ul> <li>Articles</li> <li>Topics</li> <li>About</li> <li>Editors</li> <li>Contact</li> </ul> </div>

<div></div> <ul> <li>Articles</li> <li>Topics</li>   <li>About</li> <li>Editors</li> <li>Contact</li> </ul>   </div>

div#navbar ul { list-style: none; display: block; margin: 0 10px; } div#navbar ul li { float: left; margin: 0 1.5em; font: bold 1em Arial; }

div#navbar ul { list-style: none; display: block; margin: 0 10px; }   div#navbar ul li { float: left; margin: 0 1.5em; font: bold 1em Arial; }

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

CSS framework не решит всех ваших проблем

Внимательные читатели, возможно, что-то поняли. Создание страницы является чрезвычайно сложным делом. Все имеет определенный размер, изменение размера создает проблемы или потенциально нарушает дизайн. Например, исходный дизайн был 1000px в ширину. Сетка же 960 только создает сетку 960px шириной, так что дополнительные размеры теряются. Что делать, если вы хотите сделать вашу страницу 1000px вместо 960px? Одним словом, вы не сделаете ничего, кроме как сделать множество сложных изменений в коде. Сетки ограничивают дизайнеров и создают множество препятствий. Скажем, клиент хочет, чтобы дизайн был шире или тоньше. Дизайнер должен будет, скорее всего, отказаться от кода, который написан для выполнения новых задач. Существует еще одна проблема, которая не была выявлена раньше – это равные по высоте столбцы. Т.к. все средние столбцы делят один задний фон, они имеют одинаковую высоту. В footer-е шаблона Div ставит фон за 3 столбцами. Сетка 960 не дает Вам равные по высоте столбцы. Конечно, вы можете все сделать по-своему. Поскольку мы создаем прототип, не тратьте времени на беспокойство по поводу деталей о том, как дизайн будет функционировать в процессе производства. Мы только пытаемся передать идеи на этом этапе.

Давайте закончим с верхней частью вкладки.

Верхняя часть

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

<div> <div> </div> </div> <div> </div>

<div> <div> </div> </div> <div>   </div>

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

div.topSection div { border: solid 10px #e5e5e6; height: 280px; } div.topSection div p { margin: 10px; }

div.topSection div { border: solid 10px #e5e5e6; height: 280px; }   div.topSection div p { margin: 10px; }

Круто! Давайте проверим наш прогресс.

Готовы для заполнения двух контейнеров?

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

Пришло время получить плакатное изображение. Перед вставкой изображения определите его размеры. Если ты хороший математик и сможешь сделать прикидку свободного пространства, то вы сами знаете, насколько большим оно должно быть. Если нет – пулей в FireBug и отправляйтесь в DOM. Нажмите на инспекцию (Inspect – в английской версии). Спускайтесь на Div в вопросах и нажмите на нее. Откройте вкладку Макет (Layout). FireBug будет отображать рекомендации эталонной модели окна. Проверьте изображение в разделе помощь. Нажмите на картинку для получения реальных рзмеров.

Скриншот показывает картинку размером 360×280 px. Найдите изображение и создайте свой стиль. Я решил, чтобы изображение полностью заполнило пустое пространство.

img#poster { width: 360px; height: 280px; }

img#poster { width: 360px; height: 280px; }

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

Знайте границы

Теперь, когда прототип готов, подведем итоги того, что было сделано. Вы смогли быстро создать прототип дизайна. Grid 960 легко создает сетки для нас. Куда идти дальше? Естественно, мы хотели бы показать работу клиенту и посмотреть, что они думают. Есть несколько предостережений. Вы проверили этот дизайн в IE6 и IE7? Нет. Должны ли мы? Нет. Это прототип. Это то, как он будет выглядеть в производстве. Вполне естественно, что любые причуды браузера будут устранены до производства. Что делать, если клиент хочет создать более сложный дизайн? В этом случае, вы быстро начнете видеть пределы этих рамок. Что делать, если дизайн должен быть «жидким»? Рамки не будут делать этого. Вам будет необходимо начать с нуля. Помните, что CSS framework не решат все ваши проблемы, но они помогут с решением некоторых задач . Grid 960, а также другие сетки великолепны для лепки воедино прототипов.

Редакция: Рог Виктор и Андрей Бернацкий.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Модульная сетка | maximsoldatkin.com

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

Модульная сетка сайта – для чего нужна?

Если вы поищите информацию в интернете про модульные сетки, то вы увидите что-то подобное (рис.1).

Рис. 960 grid

То есть, это модульная сетка 12-ти колонок, а также 14-ти, 16-ти и 18-ти. Это столбики розовые, которые делятся на какие-то модули там по 2-3- 4 и так далее колонки. Так называемый 960 grid. И какие еще есть рекомендации? Чтобы сделать макет, мы начинаем с какой-то сетки вертикальных колонок, горизонтальных колонок, горизонтальный ритм с какой-то базовой высотой строки. Дальше мы эти колонки и столбики как-то объединяем и получаем в результате какой-то очень красивый, гармоничный, выровненный по сетке макет (рис.2).

Рис.2 Модули, блоки, макет

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

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

Рис.3 Сетка рабица

Кстати, рекомендую посмотреть прямо сейчас:

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

Вот о чем я говорю. Давайте, я на примере покажу.

Вот есть сайт lenta.ru (рис.4).

Рис.4 Сайт lenta.ru

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

Видим, что у нас получилось 1, 2, 3, 4 колонки (рис. 5).Первая – 140 пикселей, остальные одинаковые по 210. И, в принципе, на этом наши оси могут закончиться.

Рис.5 Основные оси

Дальше мы имеем еще отступы. Отступы между колонками и отступы между блоками. Здесь, здесь, здесь и так далее. Вот отступы между блоками… Лучше использовать для их определения модули.

Мы видим, что у нас (вот я снизу их показал) есть определенные модули. 12 пикселей, 6 пикселей. Здесь 12, 6 12, 12, 12, 6 12 (рис.6).

Все это определенные единички, еще раз: модули, которые мы используем как для отступов между колонками, так и для отступов между блоками (для вертикальных отступов).

Тоже видим, что здесь 12, здесь 2 раза по 12, здесь тоже 2 раза по 12, но это все делится еще такой маленькой тоненькой полосочкой. Здесь 6 и 12, потому что у нас тут конец строки (рис.6).

У этого макета можно сформулировать определенные правила, определенные закономерности вертикальные и горизонтальные. Что у нас есть 4 оси и получилось колонки по 140 и 210 пикселей. И отступы, кратные 6 – это, как правило, 6 и 12. 6 и 12 и там еще 18, 24 как комбинация 6 и 12.

Зачем это нужно? Чтобы в дальнейшем… На самом деле, зачем нужны модульные сетки? Чтобы в дальнейшем, когда вы сделали одну страницу, когда вам понадобилось сделать какую-то следующую страницу, вы уже не думаете лишний раз, какие колонки использовать, как контент выровнять, какие отступы сделать – вы используете то, что есть.

Можем для контента использовать эти три колонки, а дальше сделать следующую колонку поменьше – для какой-то статьи, может быть (рис.7).

Рис.6 Отступы

Модульные сетки в веб дизайне: вертикальный и горизонтальный ритм

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

Какой еще может быть? Usatoday – сайт немножко посложнее. Принцип тот же на самом деле, просто здесь колонок больше. Тоже вертикальные оси основные. Вот здесь блоки начинаются, вот этот блок начинается. Здесь колонка маленькая (160 пикселей), эта тоже 240 (рис.8).

Рис.8. Сайт usatoday.com

То есть, здесь мы видим, что одна маленькая колонка в середине и три равнозначные – здесь две и здесь одна. И то же самое с модулями. Здесь только кратны они 9. 9, 9, 9, 9 12. Ну, здесь вот еще получается 12 – 9+3. То есть, кратно 3 получается. Потому что здесь решили отделить вот эту колонку чуть большим отступом.

И вертикальные тоже между блоками – тоже девятки, девятки, девятки. То есть, тоже видим модульность в этой всей штуке. И правила получаются: колонки – 160, 240; отступы – 3, 9. Основные – 3, 9. Вот это, в принципе, можно уже убрать. Которые у нас определяют – 3, 9, 12.

Давайте вернемся. Я то же самое использую в своих работах. Вот это макет я уже готовил для верстки модульной сетки (рис.9).

Рис.9 Вертикальные правила

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

У нас есть 200, 350, 600. Дальше кратность отступов – это кратность отступов вертикальных и размеры шрифтов модульной сетки. Вот про вертикальные отступы – у меня есть 80, есть 10-ки, есть 30, есть 50. И 80 – это, на самом деле 30+50=80 (рис.10).

Рис.10 Горизонтальные правила

И тут и вам проще – не нужно каждый раз думать, какой отступ вам отступить между блоками (как по вертикали, так и по горизонтали), и верстальщику, на самом деле, проще.

Вам не нужно на самом деле даже идеально пиксель в пиксель выравнивать макет – достаточно ему сказать, что у нас тут отступы вот такие. Если у меня в макете где-то 39 или 31, то это неправильно – нужно исправить на 30. Вдобавок я и шрифты тоже пишу, что у нас есть только такие шрифты.

Зачем нужны модульные сетки?

Не стоит сильно много развлекаться с осями. То, что здесь нарисовано – это не сетка, не правило – это хаос, в котором ни вам, ни верстальщику невозможно ориентироваться (рис.11).

Рис.11 Не сетка, а хаос

Используйте оси как направляющие для основных блоков, а для вот таких мелких деталей лучше использовать модули – они будут кратны 3, 4, 5 – не знаю, это на ваш выбор, на ваше усмотрение.

Какая здесь последовательность (рис.12)?

Рис.12 Последовательность создания сетки

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

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

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

Дальше – следование. И после этого – смещение. То есть, разумеется, то правило, те отступы, которые вы придумали в самом начале, когда у вас еще было 5-10% макета – у вас они могут измениться. У вас может что-то в дальнейшем не совпасть, что-то должно быть чуть меньше, чуть больше. Ту ось, которую вы провели, нужно пододвинуть, на следующей странице тоже что-то изменить и так далее.

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

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

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

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

Работаем с сеткой и «960 Grid System» —

— «С чего начать работу над макетом сайта?». Вопрос на который каждый дизайнер скорее всего ответит по своему. Лично я склоняюсь к тому что все зависит от того, над сайтом какого типа нам придется работать. Так ли нужна строгая модульная сетка, скажем, промо-сайту нового товара/услуги и что без нее будет делать информационный портал или блог? (пример ниже)

Определившись с функционалом страницы не лишним будет создать черновой прототип, либо по-старинке на бумаге, либо в программах вроде «Axure RP». В любом случае, при работе над чистовым вариантом нам понадобится сетка. И в этом моменте не лишним будет воспользоваться как «960 Grid System» (http://960.gs), с уже готовыми шаблонами для фотошопа, иллюстратора и пр., так и скриптом для создания заданного макета сетки в случае если рабочая область шире стандартных 960 пикселей .

Говорят цифры.
Все современные мониторы работают в разрешениях начиная, как минимум, с 1024×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. Что делает работу с такой сеткой очень гибкой.

Стандартные размеры. 12 и 16 колонок.
Сетка на 12 колонок разбита на равные части по 60 пикселей каждая, соответственно 16ти колонная сетка будет по 40 пикселей. Стандартный отступ слева и справа каждой колонки — 10 px., или 20 в сумме. Для нестандартных размеров стоит воспользоваться небольшим скриптом, работающим на основе этой системы(линк ниже).

Примеры использования: посмотреть
Все шаблоны одним архивом: скачать
Генератор произвольной сетки: перейти

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

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

Подписка на блог

Самый простой способ получать обновления прямо на почту
при добавлении новых материалов.

Колоночная вёрстка: сетка 960Grid

Сегодня мы поговорим колоночной (или сеточной) разметке сайта, и в частности о системе Grid960 и одном из её вариантов.

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

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

Сетка 960

Вот уже несколько лет самой популярной является «Grid960«. Её можно накладывать как в браузер, так и в любой графический редактор, в котором вы работаете над сайтом. Вообще, используется разное количество колонок, 12, 16, и вроде даже 24 есть. Наиболее популярна схема с 12 колонками:

• 12 колонок — 60px каждая
• Каждая колонка имеет margin:0 10px — образуются промежутки по 20px
• В итоге получается сетка 940px

В подвесной системе этой сетки сомневаться не приходится, и можно легко разбить страницу на любое соотношение колонок — 9х3, 3х3х3, 4х4х4х4, 10х2 и т.д.

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

Сетка 978

Более оптимизированная для разрешения 1024*768 — Сетка 978 (12 столбцов @ 54px шириной, 30px пробелы.)

Для получения этой и любой другой сетки — воспользуйтесь генератором сеток

Разумеется, в конце концов, всё зависит от Вас и от проекта.

________________

А вообще главное в нашем деле — хорошая и надёжная техника. Найти для себя что-то новое, а может, что-то подобрать для будущей работы можно на блоге о компьютерах и решении их проблем!

Naikom » Кодинг » Вёрстка