Сегодня Интернет является частью нашей жизни. Обычные его пользователи вряд ли задумываются над тем, какой путь становления прошел их любимый сайт прежде, чем появился в поисковых системах всемирной паутины. Рождение сайта начинается с задумки дизайнера – художника и человека, занимающегося созданием основного макета. После того, как рисование макета полностью завершено, начинается не менее важный процесс – верстка шаблона сайта.
Шаблон или макет – это еще не готовый сайт, это некая созданная дизайнером модель, на основе которой в последующем может быть создан полноценный сайт. С точки зрения программирования, шаблон – это набор определенных правил для отображения информации. Для создания наиболее простого статического сайта обычно используется HTML-шаблон. HTML является стандартным языком разметки гипертекста (документов) в сети Интернет.
Верстка макета сайта – это процесс формирования его веб-страниц по изготовленному дизайнером шаблону. Данным видом деятельности занимается верстальщик сайтов. Основная задача верстальщика заключается в создание HTML-кода, который позволяет размещать текст, изображения и другие элементы веб-страницы в определенных местах документа и отображать их в окне любого современного Интернет-браузера согласно разработанному дизайнером макету. Во время своей работы верстальщик должен постоянно следить за тем, чтобы сверстанная им часть макета одинаково корректно отображалась во всех браузерах. Несколькими годами ранее HTML-верстка сайта основывалась на использовании таблиц. Со временем в языке HTML появляются новые элементы (теги). Одним их таких элементов стал div. Если на протяжении последних лет верстка div была наиболее предпочтительна при создании страниц сайта, сегодня она является обязательной. В настоящее время с помощью таблиц сайты практически не верстаются. Вместо понятия «верстка div» наиболее часто употребляется понятие «верстка слоями» или «верстка блоками».
Div – это тег, при помощи которого может быть выделен отдельный фрагмент HTML кода страницы. Данный тег является блочным элементом.
Тег div имеет два основных параметра:
- Align, позволяющий выравнивать его содержимое (по левому, правому краю страницы, по центру или по ширине);
- Title, добавляющий всплывающую подсказку к его содержимому.
Верстка div: основные плюсы:
- небольшой по сравнению с табличной версткой код разметки;
- возможность создания «резинового» дизайна страницы;
- быстрая в последующем загрузка страниц в браузере пользователя;
- облегчение работы со стилями (CSS), присвоение стиля элементам с помощью id.
Верстка div: основные минусы:
- невозможность правильного отображения страницы в некоторых устаревших браузерах (IE6);
- сложность размещения блоков на странице и управления ими.
В зависимости от создаваемого проекта допускается сочетание блочной и табличной верстки.
Почему в настоящее время большинство профессионалов отходит от использования таблиц при верстке?
В случае применения табличной верстки сайта его код получается огромным, что затрудняет дальнейшую работу над ним программистов. Для того чтобы найти сделанную в таком HTML-коде ошибку, понадобится сравнительно большое количество времени. Табличная верстка создает дополнительную нагрузку на веб-сервер, тем самым замедляя его работу, а значит, замедляя процесс выдачи информации браузером. В результате страница сайта довольно долго загружается.
Верстка сайта является важным этапом его создания, без нее не обходится ни один, даже самый простой, Интернет-ресурс. После того, как работа верстальщика завершена, сверстанный макет отправляется в руки веб-программистов, обеспечивающих его интеграцию на хостинг и внедрение в CMS-систему, на которой он и будет находиться во время своего существования.
