Что такое дивный дизайн

Почему дивный? В HTML есть такой тег, поэтому и дизайн стали называть дивным, DIV-ный дизайн отличается от табличного тем, что в данном случае используются слои (блоки), которые располагаются на странице в определённом порядке. Порядок, положение и размеры слоёв задаёт отдельный файл style.css

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

На рисунке ниже видно, что использовано 4 блока:
1 - основной, вмещает в себе три остальных;
2 - шапка сайта;
3 - меню;
4 - контент;

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

Дивный дизайн имеет ряд преимуществ в отличие от табличного:

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

Посмотрим на HTML-код страницы с табличным дизайном:

А теперь посмотрим хтмл-код с дивным дизайном:

Как видите хтмл-код с дивным дизайном намного проще, а результат ощутим! Но, обратите внимание, что в коде дивного дизайна присутствует строчка:

<link rel="stylesheet" href="style.css" type="text/css">

Эта строка говорит о том, что все стили для этой страницы хранятся в файле style.css (таблица стилей). То есть, если в табличном дизайне для таблицы высота и ширина задаются так:

<table width="500" height="295">

В дивном же дизайне они задаются в файле style.css, в таблице стилей. Для кода дивного дизайна привёденного выше файл style.css содержит следующие строки:

Bли если без строчек с пояснениями, то так:

Разберём что значит первая строка:

#page { width:500px; height:100% auto; margin: 10px; }

#page - идентификатор слоя (блока);
{ } - в скобках указывают все атрибуты для данного слоя;
width:500px - задание ширины слоя;
; - точка с запятой разделяют атрибуты;
height:100% auto - задание высоты слоя;
margin: 10px - задание отступов со всех сторон.

В других строках таблицы стилей использованы:

float:left - выравнивание слоя по левому краю;
background:#FDE2CC - задание цвета для фона слоя;
margin-top: 10px - отступ сверху 10 пикселей.

Таким образом в дивном дизайне все атрибуты отображения слоёв, текста, изображений, цвет гиперссылок, размеры заглавных букв и других объектов можно задать в одном файле. Если у вас сайт состоит из 100… страниц, и вам вдруг срочно нужно меню сделать на пару пикселей больше, то вы без проблем сделаете это, изменив всего один файл style.css. Для табличного дизайна в таком случае придётся изменить все ваши 100… страниц, на это уйдёт минимум 100… минут.

Как видите DIV-ный дизайн имеет ряд преимуществ, именно поэтому сегодня большинство сайтов строятся именно в таком формате.

Уроки по CSS (дивный дизайн)

Урок 1. Делаем сайт на div-ах
Урок 2. Создание таблицы стилей и привязка к страницам сайта
Урок 3. Задаём цвет фона для слоёв
Урок 4. Ширина и высота слоёв (div)
Урок 5. Собираем 3 блока в один (в 4-й)
Урок 6. Положение слоёв относительно вертикали
Урок 7. Задание отступов (полей, отбивок) для слоёв
Урок 8. Форматирование шрифтов (CSS)
Памятка вебмастеру по CSS