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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Статья закончилась. Вопросы остались?
Комментарии 0
Подписаться
Я хочу получать
Правила публикации
Редактирование комментария возможно в течении пяти минут после его создания, либо до момента появления ответа на данный комментарий.