Верстка страницы

HTML верстка страниц сайта – один из этапов его создания.

Верстку web - страниц можно разделить на 4 технологии:

• «прямая» верстка;
• фреймовая структура;
• табличная верстка;
• блочная верстка.

Прямая верстка - самая первая и самая простая технология создания веб - документов. Возникла она вместе с первой реализацией HTML, и до наших дней претерпела ряд определенных изменений, заключавшихся в определенном расширении возможностей технологии.

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

Достоинствами этой технологии верстки веб - документов является:

• простота и хорошая восприимчивость поисковыми системами, поскольку блок полезной информации в документе не разделяется на сегменты макетирующими элементами, что позволяет индексатору трактовать информацию однозначно;
• веб - страницы имеют минимальный размер, вследствие того, что такие документы, кроме полезной информационной составляющей, содержат минимум служебных элементов (макетирующих тегов и структур);
• одинаковое отображение всеми браузерами (кроссбраузерность).

Однако прямая верстка имеет очень серьезный недостаток - невозможность создания более сложного дизайна.

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

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

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

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

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

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

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

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

• плохая кроссбраузерность (из-за различного трактовки CSS разными производителями ПО);
• сложность реализации;
• плохая адаптация под разные размеры окна браузера.

Следует отметить, что все перечисленные технологии не являются самостоятельными и практически не встречаются в чистом виде. Они могут быть скомбинированы в любом виде. Например, три последних технологии включают в себя первую и базируются на ней, внутри блоков легко разместить табличные вставки, а во фреймы могут быть вложены любые HTML-документы.