Блочная вёрстка

Название сайта

Рекламный блок или информация которую посититель не должен пропустить


<head>

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

<body>
<DIV id="container">

<!--Начало главного блока-->

    <div class="name">Название сайта</div>

    <div id="info">

    Рекламный блок или информация которую посититель не должен пропустить</div>

    <div  id="menu">

     <a href="">&nbsp;Главная</a></td>&nbsp;&nbsp;&nbsp;

     <a href="">Первая</a>&nbsp;&nbsp;&nbsp;

     <a href="">Вторая</a>&nbsp;&nbsp;&nbsp;

     <a href="">Третья</a>&nbsp;&nbsp;&nbsp;

     <a href="">Четвёртая</a>&nbsp;&nbsp;&nbsp;

     <a href="">Пятая</a>&nbsp;&nbsp;&nbsp;

     <a href="">Шестая</a>

    </div>

    <div class="clear"></div>

    <div id="main">Основной текст

       <div id="publ">Дополнительный блок </div> 

    </div>

  <DIV id="rcol"><!--Начало правой колонки-->

      <div id="box4"><b>Содержание файла test.css</b><hr></div>

  </DIV><!--Конец правой колонки-->;

  <div class="clear"></div>

  <div class="footer">
      <span><a href="" target="blank">Название сайта (Имя   владельца)</a>     &copy; 2011</span>

      <span id="center"><a href="">Правила     перепечатки</a></span>

      <span id=right>

      <a href="">адрес</a></span>

  </div>

</DIV><!--Конец главного блока-->

</body>

Это примёр вёрстки блоками или как ещё называют слоями. Как можно видеть, все основные настройки вынесены в файл стилей test.css. На странице остаются только теги <div>, с указанием идентификатора id или класса class.
С помощью свойства float, элемент выравнивается по левому или правому краю. Остальные элементы или текст обтекают его с другой стороны. Свойство clear, запрещает обтекание элемента с той или иной стороны. В данном случае отменяет действие свойства float. Значение both отменяет обтекание со всех сторон. По аналогии с табличной вёрсткой <div class="clear"></div>, можно условно сравнить с окончанием строки </tr>.
Всё остальное, как мне кажеться, довольно наглядно. В общем пробуйте самостоятельно, используя справочник CSS.

Содержание файла test.css

a {
text-decoration: none;
color:#EEF2ED;
}
a:hover{
color:#000000;}
#container{
width: 760px;
margin: 0 auto;
}
.name {border: 1px solid #998C00;
color:#B18F83;
width:560px;
height:90px;
padding-top:40px;
text-align:center;
font-size:24pt;
float: left;
}
#info {border: 1px solid #998C00;
width:190px;
height:125px;
text-align:center;
font-size:16px;
padding:20px 2px;
float: right;
}
#menu {border: 1px solid #998C00;
background:#B18F83;
color:#609BBF;
width:560px;
height:35px;
padding:4px 0px;
text-align:justify;
font-size:18px;
float: left;
}
div.clear {clear: both;
}
#main {width:550px;
text-align:left;
font-size:14px;
padding:4px;
margin-top:4px;
float:left;
}
#publ {border: 1px solid #998C00;
background:#E6E4CF;
width:545px;
height:250px;
text-align:left;
font-size:14px;
padding:4px;
float:left;
}
#rcol {background:#DFDFFF;
width:190px;
text-align:left;
font-size:12px;
padding:2px 2px;
margin-top:4px;
float: right;
}
.footer {margin-top:4px;
background:#B18F83;
width: 755px;
height: 20px;
color: #D2E6CF;
padding:4px;
font-size:12px;
}
#center {
margin-left:120px;
}
#right {margin-left:230px;}