Вёрстка сайта: виды, особенности, отличия
Вёрстка сайта - это процесс, в ходе которого макет страниц превращается в полноценные веб-документы, готовые для просмотра и размещения в формате сайта. Вёрстка определяет направление дальнейшего использования сайта в процессе работы. В частности, именно она определяет будет ли сайт иметь фиксированные размеры макета, либо сможет расширяться и адаптироваться к размерам экранов, особенностям браузеров и прочим факторам, влияющим на корректность его отображения.
Так, выделяют три вида макетов вёрстки:
- расширяемые эластичные (одинаково хорошо отображаемые в любых типах браузеров, но может создавать проблемы в ходе работы);
- жёстко фиксированные (строго в рамках шаблона, с соблюдением размера строки и общих параметров);
- адаптивные "резиновые" (адаптирующиеся под любое разрешение и размер экрана).
Вёрстка сайта: процессы
Существует два типа верстки веб-страниц:
- блочная, предполагающая формирование страницы из отдельных компонентов (блоков) и таблиц стилей (CSS). Такую верстку ещё называют семантичной;
- табличная, то есть основанная на применении таблиц, верстка позволяет выравнивать элементы дизайна, создавать рамки, модульные сетки, создавать цветовой фон для страниц.
Принято считать, что табличная верстка гораздо проще блочной в работе. Однако, современные тенденции в веб-дизайне всё же направлены в сторону отказа от таблиц в пользу блочного варианта вёрстки.
В рамках верстки применяют различные виды разметки:
- логическую, то есть ориентированную логически на дальнейшее предназначение элемента страницы;
- физическую, ориентированную на эстетическую гармонию оформления страниц.
Логическая разметка позволяет применять отдельные файлы стилей для верстки, тем самым давая возможность для её использования в печати, на мобильных устройствах и стационарных ПК.
Достоинства и недостатки типов вёрстки
Табличная вёрстка имеет свои недостатки. Так, для вывода содержимого страницы на экран ей требуется больше времени. Именно табличная верстка нередко утяжеляет сайты, делая их загрузку чрезмерно долгой, перегружая браузер, особенно если страницы с табличной версткой оказываются "вложенными" друг в друга.
Также табличная вёрстка не предполагает семантической ориентированности, то есть - смыслового соответствия используемых элементов их назначению.
Блочная вёрстка предполагает размещение слоёв (структурных элементов) на страницах с высокой степенью точности (до 1 пикс). В рамках блочной верстки с применением XHTML и HTML 4 слои создаются с помощью специального тега -
.
Таблицы в блочной верстке используются только как элемент оформления и несут чисто утилитарную функцию.
При этом блочная верстка позволяет использовать скрипты, заметно разнообразящие её оформительский арсенал. А используя настройку стилей (CSS), можно создавать дизайн любой сложности без лишних затрат времени и сил. Послойная вёрстка позволяет ускорить загрузку страниц, уменьшает "вес" документов в браузере. При этом главной проблемой блочной вёрстки остаётся создание универсального кода, удобного для работы с любыми браузерами и типами экраном. Но и эти сложности сегодня вполне по силам разработчику, знакомому с принципами работы и особенностями различных типов браузеров.