Что такое «верстка div» при создании сайта, ее плюсы и минусы

Сегодня Интернет является частью нашей жизни. Обычные его пользователи вряд ли задумываются над тем, какой путь становления прошел их любимый сайт прежде, чем появился в поисковых системах всемирной паутины. Рождение сайта начинается с задумки дизайнера – художника и человека, занимающегося созданием основного макета. После того, как рисование макета полностью завершено, начинается не менее важный процесс – верстка шаблона сайта.

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

Верстка макета сайта – это процесс формирования его веб-страниц по изготовленному дизайнером шаблону. Данным видом деятельности занимается верстальщик сайтов. Основная задача верстальщика заключается в создание HTML-кода, который позволяет размещать текст, изображения и другие элементы веб-страницы в определенных местах документа и отображать их в окне любого современного Интернет-браузера согласно разработанному дизайнером макету. Во время своей работы верстальщик должен постоянно следить за тем, чтобы сверстанная им часть макета одинаково корректно отображалась во всех браузерах. Несколькими годами ранее HTML-верстка сайта основывалась на использовании таблиц. Со временем в языке HTML появляются новые элементы (теги). Одним их таких элементов стал div. Если на протяжении последних лет верстка div была наиболее предпочтительна при создании страниц сайта, сегодня она является обязательной. В настоящее время с помощью таблиц сайты практически не верстаются. Вместо понятия «верстка div» наиболее часто употребляется понятие «верстка слоями» или «верстка блоками».

Div– это тег, при помощи которого может быть выделен отдельный фрагмент HTML кода страницы. Данный тег является блочным элементом.

Тег div имеет два основных параметра:

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

Верстка div: основные плюсы:

Видео: Особенности тега DIV [CSS - Урок 11]

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

Верстка div: основные минусы:

Видео: Видео урок: HTML-блоки. Тег div и span. Блочная верстка. #24

• невозможность правильного отображения страницы в некоторых устаревших браузерах (IE6);
• сложность размещения блоков на странице и управления ими.

В зависимости от создаваемого проекта допускается сочетание блочной и табличной верстки.

Почему в настоящее время большинство профессионалов отходит от использования таблиц при верстке?

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

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