Способы и методы HTML-верстки

Эта статья будет в первую очередь полезна новичкам в деле HTML-верстки, поскольку в ней я коснусь основных принципов и технологий, используемых веб-дизайнерами при верстке веб-страниц. По мере развития HTML, и появления других стандартов и технологий, таких как CSS, до нашего времени сформировались 4 основные технологии верстки веб-страниц, которые определяются использованием определенных инструментов, предоставляемых разработчику возможностями HTML и СSS. Я сознательно сейчас не разделяю HTML, XHTML и XML, поскольку возможности в отношении верстки в них значительных различий не имеют. Перед тем, как начать верстку документа, необходимо выбрать, какого направления в верстке придерживаться и с чего начать. Поскольку то, как сверстан будет документ, влияет не только на его внешний вид, но и на время загрузки пользователем с сервера, на восприимчивость поисковыми системами информации, размещенной на странице и на множество других факторов. Как я уже сказал, в верстке веб-страниц можно выделить 4 технологии:

• "Прямая" верстка
• Фреймовая структура
• Табличная верстка
• Блочная верстка

Прямая верстка - самая первая и самая простая технология создания веб-документов. Возникла она вместе с первой реализацией HTML, и до наших дней претерпела ряд определенных изменений, заключавшихся в определенном расширении возможностей технологии. Основным отличием прямой верстки является то, что она лишена макетных структур. Единственным элементом, который структурно организует информацию на плоскости страницы является граница самой страницы. Документ в таком случае составляется прямо, сверху-вниз. Абзацы информационного текста, заголовки, рисунки находятся непосредственно в теле документа, т.е. в теге "BODY". Достоинствами этой технологии верстки веб-документов является простота и хорошая восприимчивость поисковыми системами, поскольку блок полезной информации в документе не разделяется на сегменты макетирующими элементами, что позволяет индексатору трактовать информацию однозначно. Кроме того, веб-страницы, созданные по этой технологии имеют минимальный размер, вследствие того что такие документы, кроме полезной информационной составляющей содержат минимум служебных элементов (макетирующих тегов и структур). Однако прямая верстка имеет очень серьезный недостаток - невозможность создания более сложного дизайна.

Фреймовая структура - документ, состоящий из фреймсета - набора кадров (frameset - frame set), каждый кадр в котором является отдельным документом, собранным прямой версткой. Поскольку фреймсеты обладают возможностью каскадирования (вложения одного в другой), фреймовые структуры позволяют создавать более сложные решения в плане дизайна, такие как полосы меню и заголовочные блоки, единые для всего сайта. Однако, такая верстка все же не позволяет создать современный дизайн вследствие ограниченных возможностей макетирования. Еще одним недостатком фреймов является неадекватная индексация поисковым роботом, который воспринимает каждый фрейм как отдельный самостоятельный документ. Следствием этого часто является выдача в результатах поиска ссылки на один из фреймов документа, при этом другие фреймы, которые должны дополнить найденный фрейм (например, фреймы с навигацией), открыты не будут. Для предотвращения этого приходится применять различные скрипты, проверяющие открываеся ли фрейм самостоятельно, или же в составе структуры.

Табличная верстка - самая распостраненная на сегодняшний день технология верстки и макетирования HTML-документов. Она позволяет разместить элементы содержания и дизайна относительно друг-друга в ячейках таблицы, которая в данном контексте нахывается макетной, и таким образом, позволяет придать документу четкую оформленность, а дизайн сделать законченным. Если рассмотреть табличную верстку более подробно на примере какого-нибудь готового документа, то можно заметить, что макетирующая составляющая чаще всего состоит не из одной таблицы, а из нескольких, определенным образом вложенных одны в другую. Это позволяет расширить возможности создания сложного дизайна, позволяя создавать макетные сетки сложной структуры. Такой способ верстки имеет и свои недостатки: веб-страницы, сверстанные по такой технологии, при индексации поисковыми роботами, могут быть оценены немногонеадекватно, поскольку важный информационный текст, составляющий информационное ядро страницы, вследствие размещения его в ячейках макетных таблиц, может оказаться расположенным в конце веб-страницы, что приведет к понижению его значимости для поисковых роботов. Еще одним недостатком является большой объем служебных данных, необходимых для оформления страницы, размер которого иногда превышает размер информационной части документа. К стати, страница, которую вы сейчас читаете, тоже сверстана с использованием табличной верстки.

Блочная верстка - способ HTML-верстки, основанный на размещении информации и элементов дизайна на странице при помощи CSS. Сегменты информационного текста и элементы оформления помещаются в блоки (DIV) , которые затем размещаются на плоскости документа средствами позиционирования, предоставляемыми CSS. Веб-страницы, собранные по этой технологии, имеют сравнительно небольшой объем служебных данных, основная часть которых вынесена в отдельный файл каскадной таблицы стилей, который загружается на компьютер клиента один раз, а потом используется из кэша. К стати, страница, которую вы сейчас читаете, тоже сверстана с использованием блочной верстки. Веб-страницы, сверстанные на блоках, лишены всех недостатков, описанных для трех предыдущих технологий поскольку блоки можно располагать на странице любым необходимым образом, что дает возможность поместить наиболее важную информацию физически в начало документа. Однако они имеют и свои недостатки: плохая кросс-браузерность (из-за различного трактования CSS разными производителями ПО), сложность реализации, плохая адаптируемость под разные размеры окна браузера. Следует отметить, что все перечисленные технологии не являются самостоятельными и практически не встречаются в чистом виде. Они могут быть скомбинированы в любом виде. Например, три последних технологии включают в себя первую и базируются на ней, внутри блоков легко разместить табличные вставки, а во фреймы могут быть вложены любые HTML-документы. Таким образом, здесь я попытался вкратце охватить все технологии верстки HTML-документов.