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

Четверг, Октябрь 2, 2008 22:08

Давно пошел спор насчет того, что же лучше всего употреблять 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! Желаю удачи.. Если есть вопросы по статье или по данной теме, то обращайтесь!