Шаблон сайта. Часть вторая
Добавим заголовочную часть (div по имени top):
<HTML>
<head>
<style>
body{background:#fffff0;}
#top{height:80px;
background:#fae;
font:48pt courier,serif;
color:#fff;
text-align:center;}
.pm{height:30px;
width:120px;
background:#0f0;
text-decoration:none;
text-align:center;}
.pm:hover{text-decoration:none;
background:#ff0;
color:#f00;}
.pm{float:left}
.pi{float:right;
margin:5px 20px 5px 0px;
height:80px;
width:160px;
background:#eee;}
#hm{float:right}
#tbl{display:block;
position:absolute;
top:140px;
right:5px;
width:20%;}
#out{float:left;
width:75%;
height:600px;
border:1px solid #aaa;}
</style>
<head>
<body>
<div id=box>
<div id=top>Заголовок
</div>
<div id=hm>
<div class=pi><a href='#' class=pm>Ссылка</a><BR><BR></div><div class=pi><a href='#' class=pm>Ссылка</a></div><div class=pi><a href='#' class=pm>Ссылка</a></div><div class=pi><a href='#' class=pm>Ссылка</a></div>
</div>
<div id=out>
</div>
<div id=tbl>
<div class=pi><a href='#' class=pm>Ссылка</a><BR><BR></div><div class=pi><a href='#' class=pm>Ссылка</a></div><div class=pi><a href='#' class=pm>Ссылка</a></div><div class=pi><a href='#' class=pm>Ссылка</a></div>
</div>
</div>
</body>
</HTML>
Стало больше похоже на сайт? В стиле появилось margin:5px 20px 5px 0px; - это задает отступ блока от соседних блоков, сначала - верх, потом - правая сторона и так далее по часовой стрелке. Выражение margin-left:20px; задаст отступ только левой стороны блока. Теперь поменяем цвет, например, на яшму (или на любой другой):
<HTML>
<head>
<style>
body{background:#fffff0;}
#top{height:80px;
background:#5c0900;
font:48pt courier,serif;
color:#fff;
text-align:center;}
.pm{height:30px;
width:120px;
margin:0 0px 0 0px;
background:#5c0900;
text-decoration:none;
text-align:center;
color:#fff;}
.pm:hover{text-decoration:none;
background:#ff0;
color:#5c0900;}
.pm{float:left}
.pi{float:right;
margin:5px 20px 5px 0px;
height:80px;
width:160px;
background:#eee;
text-align:left;
font:8pt courier,serif;}
#hm{float:right}
#tbl{display:block;
position:absolute;
top:140px;
right:5px;
width:20%;}
#out{float:left;
width:72%;margin-left:20px;
height:600px;
border:1px solid #aaa;}
</style>
<head>
<body>
<div id=box>
<div id=top>Заголовок
</div>
<div id=hm>
<a href='#' class=pm>Ссылка</a><a href='#' class=pm>Ссылка</a><a href='#' class=pm>Ссылка</a><a href='#' class=pm>Ссылка</a>
</div>
<div id=out>
</div>
<div id=tbl>
<div class=pi><a href='#' class=pm>Ссылка</a><BR><BR></div><div class=pi><a href='#' class=pm>Ссылка</a></div><div class=pi><a href='#' class=pm>Ссылка</a></div><div class=pi><a href='#' class=pm>Ссылка</a></div>
</div>
</div>
</body>
</HTML>
Проверим в работе. Последние детали: добавим форму для поиска (что это и зачем нужно - в следующем разделе) и подвал. Когда к вам на сайт начнут ходить по 10000 посетителей в час - будете размещать там рекламу. Окончательно (вертикальное меню перенесено влево) в виде кода :
<HTML>
<head>
<style>
body{background:#fffff0;}
#top{height:80px;
background:#5c0900;
font:48pt courier,serif;
color:#fff;
text-align:center;}
.pm{height:30px;
width:120px;
margin:0 0px 0 0px;
background:#5c0900;
text-decoration:none;
text-align:center;
color:#fff;}
.pm:hover{text-decoration:none;
background:#ff0;
color:#5c0900;}
.pm{float:left}
.pi{float:left;
margin:5px 20px 5px 0px;
height:80px;
width:160px;
background:#eee;
text-align:left;
font:8pt courier,serif;}
#hm{float:right}
#tbl{display:block;
position:absolute;
top:140px;
left:5px;
width:20%;}
#out{float:right;
width:65%;
margin:0 20px 0 20px;
height:500px;
border:1px solid #aaa;}
#bottom{clear:both;
height:100px;
border:1px solid #aaa;}
</style>
<head>
<body>
<div id=box>
<div id=top>Заголовок
</div>
<div id=hm><a href='#' class=pm>Ссылка</a><a href='#' class=pm>Ссылка</a><a href='#' class=pm>Ссылка</a><a href='#' class=pm>Ссылка</a>
</div>
<div id=out>
</div>
<div id=tbl>
<div class=pi>Search <form><input type=text size=12> <input type=image src=go_r.ico width=16 height=12></form></div>
<div class=pi><a href='#' class=pm>Ссылка</a><BR><BR></div><div class=pi><a href='#' class=pm>Ссылка</a></div><div class=pi><a href='#' class=pm>Ссылка</a></div><div class=pi><a href='#' class=pm>Ссылка</a></div>
</div>
</div>
<div id=bottom>
</div>
</body>
</HTML>
Пример в работе. Следующий экспонат - JavaScript.