Иллюстрированный самоучитель по Dreamweaver MX


         

Полоса навигации - часть 2


Более того, Dreamweaver HMeet встроенные средства создания полосы навигации из набора активных изображений. Вам нужно будет только заготовить соответствующее количество графических изображений, представляющих каждую гиперссылку. Это самая трудоемкая часть работы — все остальное возьмет на себя Dreamweaver.

Давайте же сделаем для нашего сайта такую полосу навигации.

Сначала заготовим набор графических изображений. На каждую гиперссылку нам понадобятся четыре изображения:

  • отображаемое в обычном состоянии;

  • отображаемое, когда пользователь помещает над ним курсор мыши;

  • отображаемое в "нажатом" состоянии (когда страница, на которую указывает эта гиперссылка, загружена);

  • отображаемое в "нажатом" состоянии, когда пользователь помещает над ним курсор мыши.

    Создадим набор небольших графических изображений в любом графическом редакторе, поддерживающем формат GIF. Он будет включать:

  • белую надпись на черном фоне, отображаемую в обычном состоянии;

  • красную надпись на черном фоне, отображаемую, когда пользователь помещает над ним курсор мыши;

  • черную надпись на белом фоне, отображаемую в "нажатом" состоянии;

  • красную надпись на белом фоне, отображаемую в "нажатом" состоянии, когда пользователь помещает над ним курсор мыши.

    Создадим в папке Pics подпапку Navbar. Сохраним все полученные файлы в ней, дав им имена в соответствии со следующим соглашением:

  • <имя страницы >_up.gif — для изображений, отображаемых в обычном состоянии;

  • <имя страницы>_over.gif — для изображений, отображаемых, когда пользователь помещает над ними курсор мыши;

  • <имя cmpaницы>_down.gif — для изображений, отображаемых в "нажатом" состоянии;

  • <имя страницы>_overdown.gif — для изображений, отображаемых в "нажатом" состоянии, когда пользователь помещает над ним курсор мыши.

    Всего у вас должно получиться 20 файлов изображений. Что ж, вам придется здорово потрудиться... (Вообще-то для таких дел лучше использовать специализированные пакеты Web-графики, например Macromedia Fireworks. Они автоматически формируют все необходимые изображения для полос навигации и создают соответствующий HTML-код и JavaScript-код, "оживляющий" их. Но описание этих пакетов выходит за рамки данной книги.)

    Подготовив изображения, задайте параметры Web-страницы. Как и в других страницах, отображаемых в остальных фреймах, цвет фона будет черным, цвет текста — белым... Короче говоря, подставьте те же значения, что и у страницы основного содержимого. Помните: все страницы сайта должны выглядеть идентично.

    Чтобы создать полосу навигации, поставьте текстовый курсор в левый фрейм и нажмите кнопку Navigation Bar (рис. 7.22) страницы Common панели объектов. Вы также можете выбрать пункт Navigation Bar подменю Interactive Images меню Insert. На экране появится диалоговое окно Insert Navigation Ваг, показанное на рис. 7.23.




    Содержание  Назад  Вперед