Блокова верстка сайту

20

Від автора: блокова верстка сайту, сьогодні як і раніше залишається самим популярним способом верстки шаблону. Чому вона так популярна і як вона робиться?

Блокова революція

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

Знаєте що, подивився я тут недавно на верстку макету таблиць. Це був неймовірно важкий код. Причому сам макет був гранично простим. Природно, веб-розробників теж це не влаштовувало. Тому пізніше з’явився спосіб, що дозволяє верстати з допомогою незалежних блоків.

div і span — це порожні контейнери, в які можна помістити що завгодно. Перший є блоком, а другий – рядком. Кожному елементу можна було задавати ширину, висоту, кордон, зовнішні і внутрішні відступи і багато чого іншого. І кому тепер потрібні були таблиці, коли сітку сайту можна було побудувати, написавши в 3-5 разів менше коду?

Потім прийшов HTML5

Але на цьому ми не будемо зупинятися. Верстка сайту блоками надовго стала стандартом веб-розробників, але її потрібно було покращувати. Все тому, що ці самі div-и були порожніми. Ні, йому можна було визначити клас, ідентифікатор, заповнити інформацією, вставити дочірні елементи і їх теж наповнити, але за змістом в мові html div – це просто порожній контейнер.

Так ось і вийшло, що з точки зору сенсу, сайт верстається як набір контейнерів. Веб-розробники вирішили додати більше сенсу. Так з’явився HTML5. Мова, в якому була маса нових тегів. Наприклад, header, article, footer і т. д. Тут вже навіть людина з обмеженими знаннями англійської розуміє, що header – це шапка сайту або статті, а article – сама стаття.

У зв’язку з цим блокова верстка стала складніше. За новими стандартами вже недостатньо пхати всю інформацію в порожні контейнери, а використовувати для цього нові, семантичні елементи. Хоча div-и раніше використовуються для різних декоративних ефектів.

Блокова верстка сайту

Рис. 1. Розмітка на HTML5 сильно відрізняється з-за великої кількості нових тегів.

Повернемося до початку

Все-таки я постарався описати процес еволюції, але зовсім мало сказав про те, як же зробити блочну верстку. Власне, на прикладі все буде зрозуміло. Візьмемо простий макет сайту, де є шапка, основна частина, одна бічна колонка і футер (низ). Як все це зробити на блоках?

Створюються чотири контейнери (залишимо поки в спокої теги HTML5, тому що там багато нюансів). Розмітка виглядає приблизно так:

Тобто створили контейнери і дали їм зрозумілі ідентифікатори, щоб потім стилізувати в таблиці стилів. Все, що буде між відкриваючим і закриваючим тегом, буде вмістом контейнера. Наприклад, у вас по макету в шапці є елементи, які незалежні один від одного (наприклад, логотип, назву сайту і невелике меню).

Приблизно так буде виглядати структура вашої шапки. Далі основна робота буде в CSS. Вам потрібно буде правильно розставити всі три блоки, прописати шлях до картинки з логотипом, поставити відступи і т. д. Природно, в першу чергу потрібно прописувати властивості для батьківського блоку з id =»header».

Таким чином верстаються та всі інші структурні частини сайту. Природно, в контенті буде більше якихось елементів. Якщо все це прописувати на HTML5, то змінюються лише назви тегів. Наприклад, не

а . Ідентифікатор, як правило, залишають, тому що на сторінці можуть бути й інші шапки (наприклад, шапка статті). Детальніше з усіма html5-елементами можна ознайомитися в будь-якому нормальному довіднику.

Після того, як верстка виконана, її зазвичай перевіряють. Для цього використовують різні інструменти, деякі з них описані в цій статті. Перевірка на кросбраузерність вважається однією з найважливіших.

Як бачите, особливих проблем з розміткою на блоках виникнути не повинно. Вона гранично проста. А якщо ви дотримуйтеся доброго форматування коду, то тим більше не заплутаєтеся. Основна робота відбувається саме в таблиці стилів. Якщо багато блоків, то доведеться для всіх них прописувати свої розміри, відступи та інші правила.

Це єдиний мінус блочної моделі. Якщо елементів на сторінці дуже багато, то вам доведеться повозитися зі стилями. Власне, якщо вам потрібно вивести на екран таблицю, то її не варто верстати блоками. Тому таблична верстка надовго залишиться з нами хоча б для того, щоб верстати безпосередньо таблиці.

Блокова верстка сайту

Рис. 2. Таблиця – єдине, що не дуже зручно верстати блоками.

Переваги блоків

В цілому, верстка сайту div-блоками є досить простою справою. Код не захаращується, особливих проблем з поведінкою і стилізацією немає, тег div підтримується навіть дуже старими браузерами. Якщо верстати з використанням HTML5 тегів, так, проблеми можуть виникнути в старих браузерах. Але вони, знову ж, легко виправляються різними файлами, написаними іншими розробниками.

Блочну сітку дуже легко адаптувати. Можна стверджувати, що блокова верстка сайту проживе ще досить довго? Думаю, можна. Це зручний і досить простий спосіб верстки, так чого ж від нього відмовлятися?

Довге життя блоків обумовлена хоча б тим, що цей стандарт постійно розвивається. Наприклад, звичайного блоку тепер можна зробити флексбокс, який володіє поруч переваг. Блочний елемент можна відцентрувати тільки по горизонталі. З флексбоксом це можна зробити навіть по вертикалі.

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

Висновок

Дивлячись на нові CSS3-властивості, я можу сміливо заявити, що сьогодні з блоками можна творити все, що душі завгодно. Хочете все це вивчити? Користуйтеся інформацією на нашому блозі (як безкоштовних, так і в платному розділі). І звичайно не пропускайте нові статті, щоб постійно покращувати свою кваліфікацію.