Главная » Создание сайтов » Верстка » Основы верстки

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

основы, верстка, верстки, основы верстки, osnovy verstki

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

Комментарии — 8 комментариев

  1. #14 ProG в 14:51, 4 октября 2008:

    Ответить | Цитировать

    Молодец статья супер!

  2. #481 Вода в 20:00, 23 февраля 2009: (подписался)

    Ответить | Цитировать

    ВОзьмите меня учеником :)

  3. #485 WebMast в 10:50, 24 февраля 2009:

    Ответить | Цитировать

    ВОзьмите меня учеником :)

    С большим удовольствием...

  4. #1430 Almas в 5:56, 8 июня 2009:

    Ответить | Цитировать

    Класная тема но в IE все ОК а в Мозиле не выходить карява!Помогите!!!

  5. #1433 WebMast в 8:11, 8 июня 2009:

    Ответить | Цитировать

    Almas, версталось все под мозилой. Должно работать все супер...

  6. #1511 Вода в 20:53, 8 июня 2009: (подписался)

    Ответить | Цитировать

    WebMast сообщил:

    Февраль 24th, 2009 10:50

    ВОзьмите меня учеником :)

    С большим удовольствием...

    -КОГДА НАЧИНАЕМ?

  7. #1534 WebMast в 12:52, 9 июня 2009:

    Ответить | Цитировать

    Вода, напиши мне... Или на мыло или icq.

  8. #1539 vanoID в 18:30, 9 июня 2009:

    Ответить | Цитировать

    wmast.org — вот форум для ваших бесед

Добавить комментарий

имя:

e-mail:

сайт:

текст:

Подписаться, не комментируя