Блочная верстка сайта — верстка div

Верстка сайта — один из важных этапов разработки сайта. Выделают различные виды верстки сайтов в зависимости от множества факторов и критериев. В частности, популярна так называемая блочная верстка сайта.

Блочная верстка сайта, называемая также версткой div’ами, в последнее время применяется наиболее часто. Верстка div представляет собой разновидность html-верстки сайтов и использует следующую синтаксическую конструкцию:

&lt,div id=’blok1’&gt,содержимое блока 1&lt,/div&gt,
&lt,div id=’blok2’&gt,содержимое блока 2&lt,/div&gt,
&lt,div id=’blok3’&gt,содержимое блока 3&lt,/div&gt,



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

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

Блочная верстка сайта имеет множество достоинств. Вот некоторые из них:

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

Однако, наряду с достоинствами, верстка div имеет также некоторые недостатки. К примеру, задача кроссбраузерности сайта решается сложнее при использовании блочной верстки, поскольку различные браузеры по-разному интерпретируют html-код страниц с блоками.

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

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

Теги:
блочная верстка сайта, верстка div, табличная верстка, html верстка, кроссбраузерность

Источник