Основы верстки

Давно пошел спор насчет того, что же лучше всего употреблять div или table! Конечно новичку будет намного понятней верстать с помощью таблиц. Однако сейчас я попытаюсь рассказать молейшую часть о создании каркаса (скелета) сайта с помощью div.

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

<table border=»1″ width=»60%» align=»center» cellspacing=»0″ cellpadding=»0″><tr><td>Это пример таблицами!!!</td></tr></table>

Теперь это выражаем через div:

1.  В таблице стилей прописываем:

.TPage {width:60%; border:1px solid #000000; margin-left:20%;}

Запомните, имя класса не должно начинаться с цифры! Ширину всегда указывать в %. Для легкости нахождения margin-left, надо 100% минус ширину (в процентах) и разделить на 2.

Теперь пишем код:

<div class=»TPage»></div>

Получаем то, что вы хотели!

2.  В таблице стилей пропиисываем id Div’а:

#table_1 {width:60%;margin-left:20%;border:1 solid #000000;

}

Теперь, естественно, добавляем тег div с именем table_1:

<div id=»table_1″></div>

Вот и все!!! Наш первый урок закончен. Читаем далее, как я обещал, каркас. Только для начала придумайте каким он будет! Вот мой:

Я уже привык и поэтому мне вариант в таблице не нужен. Вы, если зхотите, можете воссоздать его. Ну ладно, теперь преступим все это в таблице стилей:

.TPage {width:90%; border:1px solid #000; text-align:center; margin-left:5%; margin-top:1%;}

Я уже говорил, как кому удобно, так он и настраивает страницу. Если же вы не знаете, что здесь каждое значит, тогда закройте браузер и отойдите от компьютера ;). Это мы сделали всего лишь Обводку вокруг нашего содержимого сайта! Идем дальше. Дальше ВНУТРИ мы помещаем header (шапку) и записи (TNote)

.THead {width:90%; border:1px solid #000; margin-left:5%; margin-top:1%; margin-bottom:1%}

.TNote {width:90%; border:1px solid #000; margin-left:5%; margin-bottom:1%;}

Теперь ВНУТРЬ TNote добавляем TMenu и TInfo:

.TMenu {width:60%; border:1px solid #000; margin-bottom:1%; float:left;}

.TInfo {width:39%; border:1 solid #000; float:right;}

В принципе вот и все! Воплощаем это кодом, только там где я говорил внутрь, значит внутрь предыдущего div! Смотрим:

<div class=»TPage»><div class=»THead»>Header</div>

<div class=»TNote»>

<div class=»TMenu»>

Menu

</div>

<div class=»TInfo»>

Info

<div>

</div>

</div>

Однако это не все. На картинке показано, что внутри TMenu у меня находится еще две таблицы. Конечно это не сложно, но все же. Внутрь тега <div class=»TMenu»> добавляем div с классами:

.Menu {width:100%; border:1px solid #000; margin-bottom:1%}

.Content {width:100%; border:1px solid #000; margin-bottom:1%;}

Получаем полный код:

<div class=»TPage»><div class=»THead»>Header</div>

<div class=»TNote»>

<div class=»TMenu»>

<div class=»menu»>

Menu

</div>

<div class=»Content»>

Content

</div>

</div>

<div class=»TInfo»>

Info

<div>

</div>

</div>

Видим, что не очень красиво получается. Сливается несколько таблиц и получается жирная линия. Чтобы такого не случилось, убираем в некоторых классах border:1 на border:0. У меня например такими классами являются: TMenu и  TNote!  Желаю удачи.. Если есть вопросы по статье или по данной теме, то обращайтесь!