Шаблон сайта. Часть первая
В классическом варианте сайт должен содержать горизонтальное и вертикальное меню, из которых посетитель выбирает нужные ему пункты. Ну, что-то вроде такого:
При наведении мыши на ссылку она должна как-то меняться (или должно появляться выпадающее меню), при нажатии в основном поле должна появляться соответствующая информация. Попробуем сделать нечто похожее на картинку. Текст примера:
<HTML>
<head>
<style>
body{background:#fffff0;}
.pm{height:30px;
width:160px;
background:#0f0;
text-decoration:none;
text-align:center;}
.pm:hover{text-decoration:none;
background:#ff0;
color:#f00;}
.pm{float:left;}
#tbl{display:block;
position:absolute;
top:120px;
left:5px;
width:20%;}
#out{float:right;
width:75%;
height:600px;
border:1px solid #aaa;}
</style>
<head>
<body>
<div id=box>
<a href='#' class=pm>Ссылка</a><a href='#' class=pm>Ссылка</a><a href='#' class=pm>Ссылка</a><a href='#' class=pm>Ссылка</a>
<div id=out>
</div>
<div id=tbl>
<a href='#' class=pm>Ссылка</a><a href='#' class=pm>Ссылка</a><a href='#' class=pm>Ссылка</a><a href='#' class=pm>Ссылка</a><BR>
</div>
</div>
</body>
</HTML>
и он же в работе. Обратите внимание на стиль класса .pm float:left; - объекты этого класса всплывают в пределах содержащего их объекта влево, каждый прилипает к правой части предыдущего. Так в горизонтальном меню. В вертикальном меню придется все .pm собрать в div с именем tbl, чтобы не разбежались. И, наконец, div с именем out всплывает вправо, именно он содержит основную информацию страницы. Внешний вид шаблона легко изменить, ну, например, переставить левое меню направо, разницу в коде сами заметите:
<HTML>
<head>
<style>
body{background:#fffff0;}
.pm{height:30px;
width:160px;
background:#0f0;
text-decoration:none;
text-align:center;}
.pm:hover{text-decoration:none;
background:#ff0;
color:#f00;}
.pm{float:left;}
#tbl{display:block;
position:absolute;
top:120px;
right:5px;
width:20%;}
#out{float:left;
width:75%;
height:600px;
border:1px solid #aaa;}
</style>
<head>
<body>
<div id=box>
<a href='#' class=pm>Ссылка</a><a href='#' class=pm>Ссылка</a><a href='#' class=pm>Ссылка</a><a href='#' class=pm>Ссылка</a>
<div id=out>
</div>
<div id=tbl>
<a href='#' class=pm>Ссылка</a><a href='#' class=pm>Ссылка</a><a href='#' class=pm>Ссылка</a><a href='#' class=pm>Ссылка</a><BR>
</div>
</div>
</body>
</HTML>
Смотрим результат. Оформим вертикальное меню: разнесем ссылки и расположим каждую из них на своем поле, в котором может содержаться какой-то текст.
<HTML>
<head>
<style>
body{background:#fffff0;}
.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:120px;
right:5px;
width:20%;}
#out{float:left;
width:75%;
height:600px;
border:1px solid #aaa;}
</style>
<head>
<body>
<div id=box>
<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></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>
Смотрим, как это работает и переходим к дальнейшему оформлению.