Grid 960 – это CSS Framework, который позволяет разработчикам быстро делать конструкции прототипа. Это отличные инструменты для создания макетов. Почему? Потому что они делают всю тяжелую работу, позволяя получить быстрый результат.
Также Вы можете скачать исходный код нашего макета:
Звучит замечательно, но как это сделать? Есть много статей по поддержке CSS Framework-ов, но ни одна из них не содержит ничего, чтобы помочь неопытным читателям. Эта статья будет отличаться. Она охватывает весь процесс создания прототипа. Представьте, что вы получаете дизайн, и вам нужно сделать макет для клиента. Эта статья объясняет основы Grid960 , планирования сетки для проектирования и кодирования. Выборки будут использовать наиболее возможные Grid 960, давая вам твердую базу знаний для работы. После того как вы увидите дизайн ниже, самое время узнать о том, как Grid 960 работает.
Создаем сетку
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, а вторая строка содержит два равных столбца.
|
1 2 3 4 5 6 7 |
<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> |
При создании строки в сетке, убедитесь, что все дочерние grid_X число сложены с числом столбцов, которые вы используете. Это обеспечивает правильную ширину. Два grid_6 div-а добавляются к 12. Вы не ограничены теми же номерами. Вы также можете использовать 6, 4 и 2. Когда вы все сделаете, сетка готова к заполнению. Теперь, когда вы знаете, как Grid 960 работает, давайте посмотрим, как создать макет.
Создаем макет
Визуализация сетки дизайна легка. Существует одна строка для заголовка изображения, строки для навигационной панели, строки с 2 колонками для истории заголовков и плакатов, ниже 4 колонки, затем нижний колонтитул с 3 столбцами.
После проверки визуализации, вы должны понять, как создать сетку макета. Использование ширины, совпадения до класса из списка позволяет создать некий код. Не забудьте добавить Div с классом clear в конце каждой строки. Не забудьте включить стили в Grid 960.
|
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 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> |
Скелет готов. Время начинать накладывать дизайн. Зеленые панели — просто div-ы с цветом фона и высотой. Блок меню не имеет установленной высоты. Его высота будет управляться размером ссылок, которые лежат внутри блока. Так же не забудьте картинку в header сайта.
|
1 2 3 4 5 6 7 8 9 |
div.spacer { background-color: #8FC73E; height: 1em; } div#navbar { background-color: #8FC73E; padding: 10px 0; } |
Примените класс для корректировки grid_12 и установите ID.
|
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 class="container_12"> <div class="grid_12"><a href="images/header.png" 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> |
Средние столбцы не требует какого-либо содержания. Добавьте какой-либо текст в эти блоки. Вы можете сделать это здесь. Прежде чем приступать к верхней части, переходите к колонтитулу. На скриншоте, нижний колонтитул залит сплошным цветом. Вы не можете сделать это при данной разметке. Оберните три нижних столбца в Div, чтобы решить эту проблему. Или просто вставьте див (DIV). Это нарушает сетку из-за того, что Grid 960 полагается на родительские и дочерние ячейки, чтобы применить стили (помните селектор container_12. Grid_4?). Подсетка решает эту проблему. Grid 690позволяет использовать вложенные сетки. Создайте подсетку, добавив grid_12 DIV, затем поместите grid_4 внутри его. При использовании вложенных сеток в дочерние элементы требуют специальных классов. Первая клетка нуждается в классе «alpha» а последняя — класс “omega». Измените разметку, чтобы отразить изменения и применить стилистические изменения в колонтитуле.
|
1 2 3 4 5 6 |
<div class="grid_12" id="footer"> <div class="grid_4 alpha"></div> <div class="grid_4"></div> <div class="grid_4 omega"></div> </div> |
|
1 2 3 |
div#footer { background-color: #e5e5e6; } |
Отлично! Теперь колонтитул имеет сплошной цвет фона, и вы можете настроить размер столбцов, если необходимо. Добавьте какой-либо текст в столбцы нижнего колонтиула прямо сейчас, что позволит перейти к блоку навигации. Блок навигации (меню) — простой неупорядоченный список. Добавьте несколько ссылок и надлежащие стили.
|
1 2 3 4 5 6 7 8 9 10 11 |
<div class="grid_12" id="navbar"></div> <ul> <li>Articles</li> <li>Topics</li> <li>About</li> <li>Editors</li> <li>Contact</li> </ul> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 |
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 для встроенных элементов. Это создает желаемый эффект, а текст обтекает в нужной мере.
|
1 2 3 4 5 6 |
<div class="grid_7 topSection"> <div> </div> </div> <div class="grid_5 topSection"> </div> |
Используйте класс вместо ID, потому что класс topSection применим к двум Div-ам. Это также позволяет изменять проще высоту. Выберите высоту и создайте класс.
|
1 2 3 4 5 6 7 8 |
div.topSection div { border: solid 10px #e5e5e6; height: 280px; } div.topSection div p { margin: 10px; } |
Круто! Давайте проверим наш прогресс.
Готовы для заполнения двух контейнеров?
Вернитесь назад и заполните левое свободное пространство текстом. Не наполняйте большим объемом текста, чтобы не переполнить пустое пространство. Это может создать проблему в окончательном дизайне.
Пришло время получить плакатное изображение. Перед вставкой изображения определите его размеры. Если ты хороший математик и сможешь сделать прикидку свободного пространства, то вы сами знаете, насколько большим оно должно быть. Если нет – пулей в FireBug и отправляйтесь в DOM. Нажмите на инспекцию (Inspect – в английской версии). Спускайтесь на Div в вопросах и нажмите на нее. Откройте вкладку Макет (Layout). FireBug будет отображать рекомендации эталонной модели окна. Проверьте изображение в разделе помощь. Нажмите на картинку для получения реальных рзмеров.
Скриншот показывает картинку размером 360×280 px. Найдите изображение и создайте свой стиль. Я решил, чтобы изображение полностью заполнило пустое пространство.
|
1 2 3 4 |
img#poster { width: 360px; height: 280px; } |
Вы должны получить это результат. Макет завершен. Не стесняйтесь менять изображения вокруг текста.
Знайте границы
Теперь, когда прототип готов, подведем итоги того, что было сделано. Вы смогли быстро создать прототип дизайна. Grid 960 легко создает сетки для нас. Куда идти дальше? Естественно, мы хотели бы показать работу клиенту и посмотреть, что они думают. Есть несколько предостережений. Вы проверили этот дизайн в IE6 и IE7? Нет. Должны ли мы? Нет. Это прототип. Это то, как он будет выглядеть в производстве. Вполне естественно, что любые причуды браузера будут устранены до производства. Что делать, если клиент хочет создать более сложный дизайн? В этом случае, вы быстро начнете видеть пределы этих рамок. Что делать, если дизайн должен быть «жидким»? Рамки не будут делать этого. Вам будет необходимо начать с нуля. Помните, что CSS framework не решат все ваши проблемы, но они помогут с решением некоторых задач . Grid 960, а также другие сетки великолепны для лепки воедино прототипов.
Редакция: Рог Виктор и Андрей Бернацкий.
Комментарии (1)