03.04.2011 15:33
960 Grid - это CSS Фреймворк, с помощью которого можно легко создать сайт не беспокоясь о кроссбраузерности. Система создаёт каркас шириной 960 пикселей в ширину и все блоки, созданные в этом каркасе должны соответствовать определённым пропорциям. Почему именно 960? И почему блоки должны быть фиксированной ширины? Во-первых, т.к. данная ширина позволяется сделать n-ое количество пропорциональных сегментов из которых будет состоять страница, и ещё данная длина "удовлетворяет" подавляющее большинство экранных расширений. Во вторых, блоки с фиксированной шириной обеспечат нормальное отображение во всех браузерах, даже в IE6).
Итак, приступим к интеграции системы 960 на Вашу страницу:
1. Идём на сайт разработчика системы и скачиваем css файлы, необходимые для интеграции.
2. Ищем нужные файлы. Заходим в папку code-->css-->min архива и видим следующие файлы: 960.css, 960_24_col.css, reset.css, rtl_960.css, rtl_960_24_col.css, rtl_text.css, text.css. Из этого списка нам нужно только 3 файла, 2 из которых стандартные, а 1 нужно выбрать, в зависимости эт Вашего проекта. Стандартные файлы - reset.css, text.css, а третий файл 960.css (Здесь можно выбрать 960_24_col.css, который делит макет на максимальные 24 блока. В стандартном 960 каркасе используется только 12 и 16 блоков.)
Остальные файлы - различные вариации нестандартных сборок
Ниже представлены все возможные размеры блоков в данной системе:
12 колоночная система
В 12 колоночной системе первый блок имеет 60px, а все остальные 80. Так что вы можете делать div-ы шириной: 60, 140, 220, 300, 380, 460, 540, 620, 700, 780, 860 и 940 пикселей.
16 колоночная система
Следовательно в 16 колоночной системе, первая будет составлять 40px, а все остальные 60px. Значит, что ширина колонки может быть следующей: 40, 100, 160, 220, 280, 340, 400, 460, 520, 580, 640, 700, 760, 820, 880 и 940 px.
3. В теге <head> подключает эти 3 css файла:
<head>
<link rel="stylesheet" type="text/css" href="/css/reset.css" />
<link rel="stylesheet" type="text/css" href="/css/960.css" />
<link rel="stylesheet" type="text/css" href="/css/text.css" />
</head>
4. Вставляем сетку в Ваш проект с помощью классов grid_n (где n - ширина колонки, от 1 до 12). Для того, чтобы начать разрабатывать каркас сайта на 960 grid нужно стачало добавить родительскому div-у класс container_12 или container_16. Например:
<div class="container_12">
<div class="grid_4">logo</div>
<div class="grid_4">text</div>
<div class="grid_2">photo</div>
<div class="grid_2">block</div>
</div>
Элементы выстроятся в один ряд, т.к. в сумме эти блоки равны 12 (grid_4+grid_4+grid_2+grid_2). Если же сумма равна >12, то последний блок переносится на следующую строчку.
Родительский класс container_12 можно присваивать и отдельным разделам. Например: только шапке сайта, только контенту или только подвалу.
На этом интеграция системы 960 grid закончена. PS: Чтобы прописать стили к блокам нужно добавить id в теге div.
Free Driver Scan - бесплатный сканер установленных драйверов
| < Предыдущая | Следующая > |
|---|