Види верстки сайтів — блог Drudesk
050 640 98 44
support@drudesk.com

Види верстки: від А до Я

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

Види верстки сайту

Таблична верстка

Цей варіант верстки заснований на побудові HTML-таблиць, що дозволяють ділити структуру сторінки на окремі елементи — колонки і осередки, в яких і будуть надалі розміщуватися компоненти сайту. Кожна комірка в ході верстки може стати «шапкою» або «підвалом», розділом меню або областю розміщення контенту.

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

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

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

Блочна (верстка слоями)

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

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

Серед очевидних переваг блочної верстки — компактність коду і малу вагу окремих документів (сторінок сайту). Такі веб-ресурси зручні для індексації пошуковими системами, а швидкість завантаження сторінок у них завжди залишається на висоті.

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

Фіксована верстка (статична)

Цей вид верстки має на увазі можливість присвоєння кожному елементу фіксованого розміру. У цьому випадку при меншому розширенні екрану користувач буде отримувати можливості для прокрутки сторінки, а при більшому відображатися буде тільки стандартна (задана) ширина сторінок. При цьому користувач отримає можливість для збільшення ширини за рахунок розширення зображення у вікні браузера.

Кросбраузерна верстка

Цей варіант верстки має на увазі застосування css стилів і haki для того, щоб домогтися одноманітного відображення сайту у всіх типах браузерів. Для того щоб перевірити реалізацію кросбраузерної верстки, краще провести польові випробування — завантажити і відкрити сторінку у всіх доступних версіях популярних браузерів. Бажано, щоб у підсумку сайт однаково добре адаптувався до взаємодії з більшістю популярних браузерів - від Opera і Safari до IE, Chrome і FireFox.

Гумова (резинова) верстка

Верстка, що дозволяє миттєво адаптувати ширину сторінки під дозвіл екрану пристрою, на якому її переглядають, називається гумовою.

Практична реалізація таких рішень ґрунтується на застосуванні:

  • табличної верстки;
  • верстки із зазначенням розміру елементів в процентному співвідношенні;
  • одночасно двох видів верстки — наприклад, резинової для контенту та фіксованої для сайдбару.

Респонсив (адаптивна) верстка

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

Служба підтримки сайтів Drudesk може задовольнити всі потреби клієнтів і легко може допомогти вам з макетом для вашого веб-сайту. На закінчення зазначимо, що вибір верстки залежить від призначення сайту, так що зовсім не важливо, який вид верстки у вас, головне щоб вона була виконана грамотно і дотримувалася всіх стандартів. У наступних статтях ми розберемо кожен з варіантів більш детально. До зустрічі.