Модульна сітка
Модульна сітка - це набір невидимих направляючих, вздовж яких розташовуються елементи веб-сторінки. Це спрощує розміщення даних в документі, забезпечує візуальний зв'язок між окремими блоками і зберігає послідовність дизайну при переході від однієї сторінки до іншої.
Веб-сторінка фактично розглядається як набір прямокутних блоків, які викладаються в певному порядку. Дані зазвичай розташовуються по колонках, тому під час верстки використовують термін одно-, дво-, трьохколонний макет і т.д. Наприклад, розглянемо головну сторінку сайту deviantart.com.
Кожен блок цієї сторінки чітко відокремлений від інших за допомогою порожнього простору, рамки або роздільника, у якості якого виступає кольоровий прямокутник з текстом заголовка. В деяких випадках складно відразу визначити, скільки колонок містить макет. У такому випадку слід розуміти, що колонки можуть об'єднуватися та містити не лише текст, але й графічні вставки. Якщо уявити основні блоки сторінки у вигляді однотонних прямокутників, отримаємо наочну модульну сітку, за якою відразу стає зрозуміло, як побудований документ.
Далі ці обозначення будемо використовувати при розгляді найпоширеніших модульних сіток.
Одноколонна сітка
Текст у одну колонку зазвичай зустрічається в академічному дизайні, при фіксованому макеті та публікації великого тексту.
На рис. 5 показана типова схема одноколонної модульної сітки. Зазвичай спостерігаються чотири основних блоки - заголовок сторінки, набір посилань на інші сторінки сайту (навігація), сам текст та у самому низу контактна інформація.
Ілюстрації в тексті зустрічаються по ходу, при цьому текст їх зазвичай обтікає по контуру.
Двоколонна сітка - один з найпоширеніших варіантів при використанні на сайтах. При такій модульній сітці використовується дві колонки - одна відводиться під основний текст, а друга використовується для навігації та іншої корисної інформації.
Трьохколонна сітка часто використовується на головних сторінках сайтів, де одночасно потрібно показати користувачу багато можливостей, які він виявить на даному сайті. Також трьохколонна сітка використовується і на внутрішніх сторінках, якщо для розміщення різної інформації двох колонок вже недостатньо.
Модульні сітки дозволяють спростити верстку сайту, розбиваючи всі матеріали на окремі блоки, які вирівнюються за невидимими направляючими лініями. Перш ніж переходити до створення веб-сторінки в HTML-редакторі, зробіть її набросок на аркуші паперу. Це дозволить скоротити час на вибір модульної сітки, яка буде застосовуватись в подальшому.