Studio AD : Рисуем и верстаем спрайт меню

Страница 1 из 1
1

Рисуем и верстаем спрайт меню (средствами html и css)

Рисуем и верстаем спрайт меню

php_expert

Дата: Пятница, 23.10.2009, 19:24 | Сообщение # 1

Группа: Удаленные

Этот способ будет работать во всех браузерах, он отличается от других тем что при наведение курсором на меню в худшем случае браузер только начнет грузить кнопку нажатия, здесь же иначе сначало браузер грузит полный набор кнопок одним рисунком (это называется спрайт) а затем уже работает с ним.

Шаг 1
Создайте новый слой в фотшопе 300 на 200.

Шаг 2
Создайте папку "Кнопки" а в ней под папки "По умолчанию", "Наведенные", "Нажатые", "Выбранные".

Шаг 3
В папке "По умолчанию" создайте новый слой и в нем слева сверху нарисуйте прямоугольник 100 на 50 затем напишите "меню1" шрифт "Arial", "Narrow", цвет #999999.

Шаг 4
Нарисуйте также в середине сверху и справа сверху.

Шаг 5
У вас должно получится это.

Шаг 6
Создайте дубликат слоев из папки "По умолчанию" в "Наведенные", "Нажатые", "Выбранные" измените цвет текста у папки "Наведенные" и "Нажатые" на #555555 а у "Выбранные" на #eeeeee.

Шаг 7
Вернить к папке "По умолчанию", запустите окно стиля слоя в котором находится прямоугольник, дальнейшие действия описаны в инструкции что на скрине.

Шаг 8
У вас должно получится это.

Шаг 9
Скопируйте стиль слоя в следущую папку "Наведенные".

Шаг 10
Скопируйте стиль слоя в следущую папку "Выбранные" и добавте внутреннее свечение.

Шаг 11
У вас должно получится это.

Шаг 12
В следущей папке "Выбранные".

Шаг 13
У вас должно получится это.

Шаг 14
Сохраните как main.jpg и спрайт готов.
Шаг 15
Создайте index.html и скопируйте туда это.

Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<meta http-equiv="imagetoolbar" content="no"/>
<meta name="author" content="php_expert"/>
<meta name="description" content="Как написать спрайт меню, средствами html и css"/>
<meta name="keywords" content="sprite, menu, css, html"/>
<style type="text/css">
*{outline:none}
#menu li{display:inline}
#menu li a{display:block;width:100px;height:50px;background:url(menu.jpg) top left no-repeat;float:left}
#menu #menu1 a:hover{background-position:0 -50px}
#menu #menu1 a:active{background-position:0 -100px}
#menu #menu1 a.active{background-position:0 -150px}
#menu #menu1 a.active:hover{background-position:0 -150px}
#menu #menu1 a.active:active{background-position:0 -150px}
#menu #menu2 a{background-position:-100px 0}
#menu #menu2 a:hover{background-position:-100px -50px}
#menu #menu2 a:active{background-position:-100px -100px}
#menu #menu2 a.active{background-position:-100px -150px}
#menu #menu2 a.active:hover{background-position:-100px -150px}
#menu #menu2 a.active:active{background-position:-100px -150px}
#menu #menu3 a{background-position:-200px 0}
#menu #menu3 a:hover{background-position:-200px -50px}
#menu #menu3 a:active{background-position:-200px -100px}
#menu #menu3 a.active{background-position:-200px -150px}
#menu #menu3 a.active:hover{background-position:-200px -150px}
#menu #menu3 a.active:active{background-position:-200px -150px}
</style>
<title>Как написать спрайт меню, средствами html и css</title>
</head>
<body>
<ul id="menu"><li id="menu1"><a href="#"></a></li><li id="menu2"><a href="#"></a></li><li id="menu3"><a class="active" href="#"></a></li></ul>
</body>
</html>

Автор: Php_expert
Скачать пример урока