Блочная вёрстка - это вёрстка с помощью блоков. Она пришла на смену морально устаревшей табличной вёрстке. Их отличия весьма заметны, табличная вёрстка, это огромное количество тегов и тяжёлый код. А более современная блочная вёрстка, это набор ID и class, с помощью которых намного быстрей и проще можно сверстать любую страницу. Также, блочная вёрстка легко подключается к CSS (таблице стилей).

Рассмотрим пример блочной вёрстки или по другому - вёрстка на DIVах. Нам нужно сверстать страницу которая будет состоять из:

1) шапка

1.1 логотип (в шапке)

2) контент

2.1 фото (в контенте)

3) футер

3.1 баннер (в футере)

Теперь переводим эту структуру в DIVы, выглядеть это будет так:

<nodiv id="shapka">
<nodiv class="logo"></nodiv>
</nodiv>

<nodiv id="kontent">
<nodiv class="photos"></nodiv>
</nodiv>

<nodiv id="footer">
<nodiv class="banner"></nodiv>
</nodiv>

Следует уточнить, что ID – это уникальное значение которое на странице будет использоваться только один раз, а class – значение которое может повторяться несколько раз, например одно и то же оформление для нескольких картинок.

Естественно, для того чтобы всё встало так как нужно, подключают css и прописывают соответствующие настройки дизайна. Как это делается я опишу в уроке по css.