Верстка починає свій шлях з тих часів, коли код писався в HTML, а розмітка виконувалася за допомогою таблиць. З часом від цього відійшли, а розмітку переклали на CSS. Зараз існує кілька способів верстки. Сучасними можна вважати Flex-box, набір інструментів Bootstrap, а також самі останні Grids, дають величезні можливості творцям. Одним із перехідних варіантів у становленні Web-а є блочна верстка. Раніше використовувалася для створення розмітки сторінки, нині вона вважається застарілою, але тим не менше все ще знаходить широке застосування в окремих випадках.
Що являє собою блокова верстка?
Вона замінила застарілу і недосконалу табличну. Сторінка складається з так званих шарів, чи блоків, а цеглинками для цього служить закриваючий тег
. Це блоковий тег, що займає всю ширину батьківського елемента і висоту за розміром контенту. Пізніше таку верстку стали називати “дивна”. Основою для орієнтування на сторінці є так звані класи.
У даний момент такий тип верстки значно застарів, а сам тег
повинен використовуватися тільки за призначенням. З’явилася маса семантично правильних тегів, які полегшують орієнтування в коді. Наприклад, для навігаційного меню існує спеціальний тег .
Для наочності блочну верстку можна представити наступним чином:
контент
контент
контент
Div з класом wrapper являє собою батьківський контейнер або, іншими словами, обгортку. Елементи з класом element – це своєрідні “цеглинки” нашої складної структури. Зверніть увагу, що різний відступ від краю, в порівнянні з батьківським елементом, використовується в коді для наочності, щоб легше було визначити структуру та ієрархію елементів.
Використання таблиць
Таблична верстка сайтів довгий час була головним болем всіх програмістів. Після переходу на блокову модель сайтів деякий час не віталося використання таблиць взагалі, навіть за прямим призначенням.
Такий підхід, безумовно, є недоцільним і навіть шкідливим. Він змушує прості речі виконувати більш складними і незручними шляхами. Зараз же таблиця використовується тільки для відображення відповідних даних. Іншими словами – за прямим її призначенням.
Розподіл ролей
Якщо раніше всі побудова виконували на HTML, блокова верстка принесла з собою повне розділення ролей. Зараз HTML служить тільки для розмітки, логічного форматування і створення каркаса сторінки. Стилі ж повністю винесені і входять в окремий файл, який підключається в документ. Для розміщення елементів і створення привабливого і чуйного дизайну служить CSS. Для звернення до блоку використовуються класи, яким задається ім’я елемента. Наприклад, для блоку заголовка ми призначимо клас header. Це також дозволяє легше орієнтуватися в коді. Зараз же це почасти виконують спеціалізовані теги, що з’явилися в HTML5.
Використання блоків
При блокової верстки активно використовується тег
. Він схожий з цеглою при будівництві будівлі. Складаючи основу, конструкцію сайту, він, тим не менш, не є єдиним. Подібно до дверей, вікон, вентиляції, балкону тощо, для верстки використовуються і інші елементи HTML. Це посилання, форми, картинки, списки і таблиці.
Використання тега
дозволило зробити код більш компактним і наочним. Перехід до блокової верстки дозволив позбавити html від зайвого, а саме від стилів. Дав можливість повністю прибрати перевантажену і складну для орієнтування табличну верстку.
Активно використовує CSS блочна верстка. За допомогою доступних інструментів можна створити будь-побудова сторінки з точністю до пікселя. Така верстка називається pixel perfect. Вона має на увазі ідеальний збіг сайту з макетом. На фото, представленому вище, видно, що і з блочною версткою не все так просто. Перший час без таблиць обійтися було просто неможливо. Вони використовувалися для створення основного побудови сторінок, а блоки застосовувалися для окремих елементів. Так було до тих пір, поки не навчилися ставити блокам висоту.
Переваги
Блокова верстка сайту має наступні переваги:
- Немає прозорих кордонів шириною в піксель, як було при верстці таблицями.
- Блоки легко позиціонувати відносно один одного.
- Блоки можуть змінювати розмір, що дозволяє створювати адаптивний дизайн.
- Можливість накладатися один на одного не порушує побудова сторінки, але дозволяє додавати цікаві ефекти.
Подальший розвиток
В даний час блокова верстка div є застарілою і знаходить лише обмежене застосування лише як окремий випадок для певних ситуацій. На зміну їй у верстку прийшло позиціонування і обтікання. Вони мали масу недоліків, але в цілому дозволяли більше, ніж блочна верстка.
Далі з’явилося побудова за допомогою терміново-блочних елементів. Це істотно полегшило роботу програмістів. Цей спосіб має переваги обох типів блоків і дозволяє створювати більш чуйний і адаптивний дизайн. Варто зазначити, що всі способи, так чи інакше складалися з елемента div, що і дало назву “дивна верстка”.
В даний час для побудови сторінки використовуються Flex-box і bootstrap. Вони помітно зменшують код і дозволяють швидше й простіше створювати якісний адаптивний дизайн. Дають можливість переміщати блоки, не ламаючи всю сторінку.
На вістрі прогресу варто нова технологія – Grids. Вона дозволяє дуже швидко і легко створювати дизайн будь-якої складності. А блоки, обтікання, позиціонування, як свого часу сталося з таблицями, використовуються лише за прямим призначенням.
