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

Текстовое меню. Представляет собой набор текстовых строк-ссылок, обеспечивающих навигацию по сайту. Имеет наименьшие из всех выразительные возможности, но грузится очень быстро. Рекомендуется для индексных страничек, на которых кроме ссылок, в общем-то ничего и нет, но зато их очень много.

Простое графическое меню. Набор кнопок или картинок, щелкнув на которые, вы направляете посетителя на нужную страничку. Строятся на базе создания ссылок на изображениях (этот метод был описан в прошлом уроке). Требует загрузки изображений - по одному на каждый из пунктов меню

Карты изображений. Отличается он предыдущего тем, что загружается одно изображение, а переход пользователя в нужном направлении осуществляется кликом на части изображения. Аналогом может служить географическая карта. Кликнув на изображении Африки на карте - попадаем на ту часть сайта, которая посвящена Африке. Этот метод мы разберем в одном из следующих уроков.

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

Навигационная панель. Ее ближайший аналог - переключатель. Графические эффекты более разнообразны, но требуют загрузки четырех изображений, поэтому рекомендуется для фреймовых структур, когда нет необходимости загружать картинки при загрузке каждой странчки Мы разберем ее в одном из ближайших занятий.

Flash-меню. Использование технологии Macromedia Flash. Позволяет добиться очень выразительных эффектов, но требует наличие соответствующего плагина к броузеру. Последнее время флаш завоевывает все более прочные позиции, во всяком случае в американском интернете, поэтому таким плагином я рекомендую обзавестись в любом случае. Взять его вы можете на сайте компании.

Динамические меню с использованием Java или JavaScript. Меню, которые меняют свое содержание, вид, подменю при выборе тех или иных пунктов. Эти меню будут рассмотрены в уроках, посвященных соответствующим языкам программировния.

Сегодня же мы рассмотрим создание ролловеров с помощью Dreamweaver. Сразу должен заметить, что ролловер требует использования JavaScript. Но программировать сегодня нам не придется; все, что нам нужно будет сделать - выполнить некоторые подготовительные работы и сделать несколько щелчков мышкой, чтобы собрать все это вместе.

Для начала нам нужно подготовить по два изображения на каждую кнопку. Первое я буду называть пассивным - пункт меню не реагирует на пользователя и находится в пассивном состоянии. Второе - активное, оно будет показано пользователю, когда он наведет на него курсор мышки.

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

Рис.1

Теперь из подготовленных изображений собираем ролловер. Вызовите палитру инструментов и нажмите на питограммку ролловера (рис.1). Появится диалоговое окно Insert Rollover Image (рис. 2). В этом окне в поле Image Name задайте имя ролловера. Можете отавить то имя, которое он вам предложит, но я рекомендую завести себе привычку давать объектам осмысленные имена. Правила для имен те же, что и для любой переменной - литинские буквы, цифры, знак подчеркивания и не должны начинаться с цифры.

В поле Original Image вписываем путь к пассивной картинке, в Rollover Image - к активной. Обязательно оставьте выбранным поле Preload Rollover Image. Это заставит Dreamweaver добавить к страничке скрипт, который загрузит в броузер обе картинки. В противном случае броузер пошлет запрос на загрузку активного изображения только после того, как курсор окажется над ролловером, а на это потребуется время. В результате появится эффект пропадания пункта меню, когда мышь проходит над ним. И, наконец, в поле When Clicked, Go To URL введите ссылку, по которой пользователь должен будет отправиться, щелкнув на ролловере.

Рис.2

Впрочем, сделать это можно и позже. Нажимаем OK - Dreamweaver покажет вам только пассивную картинку, эффект ролловера здесь не проявится. Нажмите F12 для просмотра вашей странички в броузере и проведите над ролловером мышкой.

Если вы захотите изменить ссылку, которая соответствует пункту меню то просто в Dreamweaver щелкните мышкой ролловер а затем, в поле Link на панели свойств объектов измените адрес перехода. Не рекомендую менять таким образом изображение на новое - вы не забыли, изображения предварительно подгружаются специальным скриптом? Проще удалить старый ролловер и создать новый.

Посмотрим теперь, что случилось с кодом нашей странички. Щелкните на ролловер и откройте окно с html-кодом. Первое, что вы увидите необычного будет код для картинки

<a href="http://www.macromedia.com"
     onMouseOut="MM_swapImgRestore()"
     onMouseOver="MM_swapImage('Image5','','/web/dreamweaver/imgs/btn_nav1_o.png',1)">
<img  name="Image5" border="0"
     src="/web/dreamweaver/imgs/btn_nav1_p.png"
     width="100" height="25">
</a> 

И если с тегом <img> все понятно, то с тегом <a> нам придется разобраться. Прежде всего, картинка (<img>) заключена между тегами <a></a>. Это означает, что изображение является ссылкой. Параметр href указывает на адрес перехода. Осталось два непонятных параметра onMouseOut и onMouseOver. Оба они являются событиями. Первое из них вызывается, когда мышь покидает объект. Второе - когда мышь над объектом. В целом строки 2 и 3 говорят следующее - когда мышь покинет зону, для которой определена ссылка, вызвать скрипт MM_swapImgRestore(), а когда мышь попадет в эту зону - скрипт MM_swapImage(). Как вы уже наверное догадались, именно эти два скрипта и занимаются подменой картинки. Эти функции я не стану здесь приводить -вы можете взглянуть на них сами, они находятся между тегами <head> и </head>. Мы будем разбирать нечто подобное на уроках JavaScript. Здесь я это указываю только потому, что бы вы понимали, откуда взялись непонятные участки кода на вашей страничке.

Еще одна функция, на которую нам надо обратить внимание MM_preloadImages(). Она вызывается из тега <body> как событие onLoad. Эту функцию тоже не стоит удалять, именно она выполняет предварительную загрузку изображений ролловера.