Версия для печати

Полная версия

Сейчас уже все совсем просто. Необходимо лишь расставить имеющиеся части по своим местам.

Что касается верхней части, то ее html-css-код переносим в исходный документ без изменений. Также копируем туда все наши CSS-правила для элементов верхней части (шапки) и меню.

Теперь займемся верхним правым меню. Для того, чтобы использовать для него код левого нижнего меню, необходимо изменить высоту и ширину его элементов и правильно позиционировать. Код будет такой:

<div id=mainmenu style="width: 247px; right: 15%">
	<div id=item style="height: 30px">
	<div id=left style="background-color:#CC3333">
	</div>
	<div id=right class=art style="width: 200px" >
	О БНТУ</div></div><div id=item style="height: 30px">
	<div id=left style="background-color:#CCCC33">
	</div>
	<div id=right style="width: 200px" class=art>
	Об авторах</div></div><div id=item style="height: 30px">
	<div id=left style="background-color:#33CC33">
	</div>
	<div id=right style="width: 200px" class=art>
	Ресурсы</div></div><div id=item style="height: 30px">
	<div id=left style="background-color:#3333CC">
	</div>
	<div id=right style="width: 200px" class=art>
	Гостевая книга</div></div><div id=item>
	<div id=left style="background-color:#fff; border: 0px">
	</div>
	<div id=right style="width: 200px">
	</div></div></div>

Для левого меню мы изменим только позиционирование:

<div id=mainmenu style="left: 15%">
	...</div>

Осталась самая малость - надпись Design by Vektor внизу страницы. Для нее создадим следующие определения:

	#vektor	{
	float: right;
 	background-color: #003366;}
	.vek{
  	font-family: Arial, Helvetica, sans-serif;
 	font-size: 12px;
	color: #fff;
 	width: 150px;
 	letter-spacing: 2px}

Ну вот и все .

Верстаем шапку сайта.

Верхнее и нижнее меню.

Некотрые аспекты табличной верстки тестового примера.

Вместо заключения.