На основе этого урока для Фотошопа У нас уже есть картинки нашего меню (back.png и hover.png), а значит мы можем приступить к "приготовлению" HTML кода для него. По умолчанию картинки хранятся в той же директории, что и файлы с HTML и CSS.
01. Перво наперво создадим файлик index.html - для этого откроем блокнот в Windows, и впишем туда следующие строчки:
Code
<html>
<head>
<title>Меню сайта</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- Наша рабочая область -->
</body>
</html>
Добавляем элементы меню
Code
<html>
<head>
<title>Меню сайта</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- Меню сайта -->
<div id="container">
<ul class="navigation">
<li id="m1"><a href="/" title="Ваш текст описания"></a></li>
<li id="m2"><a href="/" title="Ваш текст описания"></a></li>
<li id="m3"><a href="/" title="Ваш текст описания"></a></li>
<li id="m4"><a href="/" title="Ваш текст описания"></a></li>
<li id="m5"><a href="/" title="Ваш текст описания"></a></li>
</ul>
</div>
</body>
</html>
Обратите внимание, что текст ссылок должен оставаться пустым! Сохраняем файлик, и переходим к таблице стилей.
02. Теперь в блокноте создадим файл style.css
Перво наперво добавляем стиль для body:
Code
body {
background: #000000;
font-family: Verdana;
font-size: 11px;
}
Хотя Вы можете настроить её по своему вкусу 
Далее добавляем стиль для div-а:
Code
#container {
margin-top: 30px; /* отступ от верхнего края */
}
А теперь приступаем непосредственно к оформлению меню. Стиль для тега li :
Code
.navigation li {
float: left; /* выравнивает элемент по левому краю, а все остальные элементы обтекают справа. Необходимо для создания горизонтального меню */
list-style-type: none; /* убираем маркеры для списка.*/
}
.navigation li a {
display: block; /* отображает данный элемент как блок*/
height: 75px; /* высота блока */
line-height: 40px; /* параметры height и line-height , желательно, должны быть одинаковыми - так текст будет точно отцентрирован по вертикали */
width: 100px; /* ширина блока */
}
Всё ещё не похоже на меню? Следующий шаг поправит эту ситуацию
Code
#m1 {
background: url('back.png'); /* цвет фона неактивного меню */
}
#m2 {
background: url('back.png') 400px 0px; /* цвет фона неактивного меню */
}
#m3 {
background: url('back.png') 300px 0px; /* цвет фона неактивного меню */
}
#m4 {
background: url('back.png') 200px 0px; /* цвет фона неактивного меню */
}
#m5 {
background: url('back.png') 100px 0px; /* цвет фона неактивного меню */
}
Вот, меню приобрело цивильный вид. Осталось добавить реакцию меню на наведение мышки.
Code
#m1 a:hover {
background: url('hover.png'); /* цвет фона активного меню */
}
#m2 a:hover {
background: url('hover.png') 400px 0px; /* цвет фона активного меню */
}
#m3 a:hover {
background: url('hover.png') 300px 0px; /* цвет фона активного меню */
}
#m4 a:hover {
background: url('hover.png') 200px 0px; /* цвет фона активного меню */
}
#m5 a:hover {
background: url('hover.png') 100px 0px; /* цвет фона активного меню */
}
циферки после ссылки на картинку означают, на сколько пикселей будет смещено её начало относительно нормального положения. Первое значение - соответственно сдвиг по горизонтали, второе - по вертикали.
Если всё сделано правильно, то у Вас должно получится работоспособная навигация по сайту
© otherside.ws
