Створення якісного і затребуваного продукту - це, як правило, результат злагодженої роботи декількох виробничих ланцюжків. Важливо вміти «подружити» ці ланцюжки і налаштувати їх на спільну роботу.
Сьогодні хотілося б поговорити про те, як кодер бачить дизайн.
Зазвичай інформація на web-сторінках виводиться у вигляді прямокутних блоків (колонок), та й весь контент в цілому по суті являє собою один великий блок (назвемо його основний блок), всередині якого розташовуються блоки меншого розміру.
Розглянемо найпростіші макети web-сторінок:
Простий макет сайту - варіант 1:
основний блок має бекграунд, відмінний від основного бекграунду сайту
Приклади з виділеними основними областями розмітки
У основного блоку може не бути бекграунду, але в HTML основний блок все-одно буде.
Простий макет сайту - варіант 2:
у основного блоку немає бекграунду, його ширина показана напрямними
В такому випадку області розмітки будуть виглядати таким чином:
Подивимося на це очима верстальника - для створення структури сайту він повинен виділити основні частини макета - основний блок, блоки меншого розміру (хедер, контент, футер), потім він приступає до розмітки шаблону. Після цього потрібно описати параметри, які є у кожного блоку розмітки - ширина, колір бекграунду і т.д.
- Тут показаний код розмітки сайту - для обох варіантів (з видимим основним блоком і невидимим) він буде однаковий.
- На наступному малюнку перераховані параметри використовуваних блоків.
Весь контент сайту є прямокутним блок (основний блок), всередині якого розташовуються блоки меншого розміру (хедер, тематична частина і футер).
В реальності макети web-сторінок більш складні - тематична частина, хедер і футер поділені на блоки меншого розміру.
Якщо подивитися на картинку дуже уважно, то можна наочно переконатися як погано буває кодеру коли він бачить дизайн, який намальований не по сітці.
Розглянемо розмітку і опис параметрів блоків для такого макета:
Після поділу хедера, футера та тематичної частини на блоки, до первинних блокам додалося 25 нових - 15 колонок, кожна з яких має ширину, і 10 відступів, кожен з яких має свою ширину.
Перед тим, як створити розмітку макета і описати параметри використовуваних блоків, верстальник повинен виміряти ширину кожної колонки і ширину кожного відступу. Можливо для дизайнерів це стане відкриттям, але колонка шириною 100px і колонка шириною 101px для верстальника - це вже дві різні колонки, незважаючи на те, що різниця між ними незначна (1px) і візуально може бути взагалі непомітна. Це правило є актуальним і для відступів - відступ шириною 10px і відступ шириною 9px - це різні відступи.
Якщо подивитися на цей макет ще раз, то неважко помітити, що в розподілі хедера, тематичної частини і футера на блоки меншого розміру немає ніякої закономірності - всі внутрішні блоки (колонки) мають різний розмір і розташовуються на різних відстанях один від одного. Cодержімое хедера і футера на підлеглих як правило повторює вміст хедера і футера на головній, а ось зміна вмісту контентної частини на підлеглих в порівнянні з головною залежить тільки від фантазії дизайнера. Як ви розумієте, ймовірність того, що на підлеглих до вже наявних блокам додасться ще 30-50 нових дуже велика. Мало того, що це істотно збільшить час, який верстальник витратить на складання розмітки і опис параметрів блоків, так ще й розмір файлу опису параметрів стане таким, що ніякої висоти екрану не вистачить, щоб расмотреть його цілком і повністю.
Ось що трапиться з документом опису параметрів блоків, якщо до головної сторінки макета додасться кілька підсторінок з такою ж «шикарною» розміткою:
Відсутність закономірності в розподілі хедера, тематичної частини і футера на блоки призводить до значного збільшення розміру файлу опису параметрів блоків.
Але спосіб зменшити обсяг часу і розмір документа опису параметрів є - це верстка по сітці (з грід). Завдяки появі Grid Systems, з'явилася можливість істотно знизити часові витрати, пропорційно розмістити контент на сторінці (що важливо в умовах шаблонної верстки) і перетворити кілометровий файл опису параметрів блоків в красивий і лаконічний.
Основне призначення сітки - перетворити 100000 рядків коду в красивий і лаконічний документ, на розмір якого кількість підлеглих макета ніяк не впливає.
Сітка і її структура
Сітка складається з юнітів і проміжків між ними. Три основних параметри - це ширина всієї сітки, ширина юніта, і ширина відступів між юнитами.
Як грід-системи ми використовуємо 960 Grid System. ширина нашої сітки завжди 960px. Даний розмір є оптимальним для переважної більшості дозволів моніторів.
Щоб краще розуміти один одного, давайте визначимося з термінами:
Юніт - це будівельний «цеглинка» будь-сітки, найвужчий вертикальний об'єкт на сторінці (в юнитах вимірюють ширину), на основі якого формуються колонки. Як правило, юніти мають дуже маленьку ширину, щоб використовувати їх безпосередньо для розміщення текстових матеріалів.
Колонки - це групи юнітів, які об'єднуються, щоб створити робочу зону, яка підходить для розміщення матеріалу. Більшість текстових колонок складаються з двох або декількох юнітів. Наприклад, сітка з дванадцяти юнітів може утворювати шість колонок по два юніта в кожній або три колонки по чотири юніта в кожній і т.д.
6 колонок по 2 юніта
Є спеціальні ресурси. які генерують своєрідний css-фреймворк (файл опису параметрів блоків), верстальщику залишається тільки завантажити цей файл, підключити його, а далі просто використовувати вже готові блоки потрібної ширини.
Сss-фреймворк являє собою красивий і лаконічний документ опису параметрів блоків, у яких вже є ширина і відступи. Верстальщику більше не потрібно вимірювати ширину колонок і ширину відступів між ними, тепер для складання розмітки він повинен подивитися скільки юнітів займає та чи інша колонка, і вибрати потрібний блок.Ето істотно скорочує час верстки.
Ми виробляємо шаблони, а значить повинні використовувати однакові блоки і в кожному шаблоні, і в окремо взятому шаблоні. Завдяки сітці у нас є така можливість.
У сітки є ще одна істотна перевага - якщо шаблон зверстаний на базі сітки, у клієнта є можливість самостійно змінити розмітку свого сайту і таким чином зробити редизайн під себе.
