Що таке верстка сайту?

Що таке верстка сайту?

Для людей, зайнятих в IT сфері, поняття верстки здається очевидним. Тим більше складно пояснити людині, що з сайтами стикається тільки в якості користувача.

Коли створений дизайн сайту, коли готові всі функціональні модулі й компоненти, необхідно з’єднати всі елементи в єдине ціле, тобто зверстати сайт. Верстка сайту – це кінцевий етап розробки сайту, створення структури сайту, що буде визначати відображення тексту й графіки на сайті в різних браузерах.

Розрізняють «жорстку» (фіксовану) і «гумову» (змінювану) верстку сайту. При «жорсткій» верстці всі елементи web-сторінки мають завжди фіксовані розміри, незалежно від розміру монітора користувача й установленого дозволу екрана. «Гумова» верстка сайту дозволяє змінювати розміри елементів сторінки, підлаштовуючись під різні розміри й дозволи моніторів.

Верстка сайту на сьогоднішній день може бути виконана безліччю різних способів. Розглянемо найпоширеніші з них.

HTML-верстка сайту

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

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

Блокова верстка сайту, або як її ще називають верстка div’ами, – це верстка сайту на основі елементів <div>. Така верстка сайту має ряд переваг: стислість коду, висока швидкість завантаження коду й т.д.

CSS-верстка сайту

CSS-верстку іноді виділяють в окремий вид верстки сайту, хоча в сучасному веб-дизайні каскадні таблиці стилів (css) використовуються практично при будь-якій верстці. Каскадні таблиці стилів описують зовнішній вигляд сторінок сайту, написаних мовою розмітки: HTML, XHTML, XML.

Верстка з використанням css може використовувати зв’язані стилі, глобальні стилі, внутрішні стилі. Зв’язані стилі (таблиці зв’язаних стилів) дозволяють «відокремити» код від зовнішнього оформлення: всі параметри форматування тегів розміщаються в окремому файлі css. Достатньо лише підключити цей файл у потрібному місці web-сторінки. Один файл css може бути використаний для безлічі різних web-сторінок.

Глобальні стилі описуються в тегу <style>, що розташовується в заголовку (<head>) web-сторінки. Описані стилі будуть застосовані тільки до однієї сторінки. Внутрішні стилі, у свою чергу, призначаються для кожного конкретного тегу й застосовуються тільки стосовно нього.

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

Верстка повинна відповідати певним стандартам, щоб сайт коректно відображався в будь-якому браузері, що підтримує ці стандарти. Здатність сайту коректно «працювати» незалежно від браузера, називається кросбраузерністю. Кросбраузерна верстка сайту – важлива вимога до якості сучасних сайтів.

Поруч із поняттям кросбраузерності верстки завжди стоїть поняття її валідности. Валідность – це відповідність коду всім стандартам якості, установлених для використовуваної на сайті мови розмітки (HTML, XHTML, XML). У наш час багато фахівців з верстки сайтів орієнтуються на стандарти w3c.