Создание и раскрутка сайтов - веб-студия WebStudio2U Написать письмо в студию веб-дизайна WebStudio2U Авторизация Лента новостей студии веб-дизайна WebStudio2U Карта сайта

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

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

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

<div id="blok1">содержимое блока 1</div>
<div id="blok2">содержимое блока 2</div>
<div id="blok3">содержимое блока 3</div>
...

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

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

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

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

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

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

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

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