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

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

Одним из основных этапов создания сайта является верстка — компоновка элементов страниц в соответствии с заданными параметрами. Именно в процессе верстки специалист собирает готовый макет веб-ресурса, придавая ему завершенный вид. И этот своеобразный каркас является своего рода базой для дальнейшей работы — наполнения страниц контентом и запуска ресурса в работу. Какие же бывают виды верстки сайта? И в чём их отличия друг от друга? Попробуем разобраться.

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

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

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

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

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

Но есть и недостатки: достаточно объёмный код, утяжеляющий вес каждой страницы в отдельности и сайта в целом, сложность в применении некоторых вариантов дизайна, медленная скорость загрузки страниц.

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

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

Фактически, при блочной верстке создаётся основной блок в который можно поместить необходимое количество блоков поменьше, в которые, в свою очередь, можно поместить ещё блоки. Для настройки блоков применяют правила css стилей. Они позволяют определить не только внешний облик, но и месторасположение каждого блока.

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

Но есть и сложности. В частности, высокая сложность самого процесса верстки. Есть проблемы и с адаптацией блочной верстки под различные браузеры, а для сохранения неизменного положения макета при отображении на экранах с разным разрешением приходится отдельно устанавливать настройки в css.

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

Этот вид верстки подразумевает возможность присвоения каждому элементу фиксированного размера. В этом случае при меньшем разрешении экрана пользователь будет получать возможности для прокрутки страницы, а при большем отображаться будет только стандартная (заданная) ширина страниц. При этом пользователь получит возможность для увеличения ширины за счёт расширения изображения в окне браузера.

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

Этот вариант верстки подразумевает применение css стилей и haki для того, чтобы добиться однообразного отображения сайта во всех типах браузеров. Для того чтобы проверить реализацию кроссбраузерной верстки, лучше провести полевые испытания — загрузить и открыть страницу во всех доступных версиях популярных браузеров. Желательно, чтобы в итоге сайт одинаково хорошо адаптировался к взаимодействию с большинством популярных браузеров — от Opera и Safari до IE, Chrome и FireFox.

Резиновая верстка (тянущаяся)

Верстка, позволяющая мгновенно адаптировать ширину страницы под разрешение экрана устройства, на котором её просматривают, называется резиновой.

Практическая реализация таких решений основывается на применении:

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

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

При адаптивной верстке веб-страница отображается хорошо на всех устройствах, подключённых к интернету, независимо от размера, например, монитор компьютера, телефон, планшет, ноутбук, телевизор. Для того, чтобы сайт удобно смотрелся на всех указанных устройствах, задаются собственные настройки стилей CSS. С каждым днем адаптивных сайтов становится все больше и больше, а сама адаптивная верстка становится очень востребованной, в связи с стремительным увеличением пользователей различных гаджетов.

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

Похожие материалы