Отправляет email-рассылки с помощью сервиса Sendsay

Школа Web - пошаговые инструкции для создания сайта

Рассылка закрыта

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Август 2001   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Автор Гость

Статистика

5.926 подписчиков
за неделю
←   Все выпуски   →

Школа Web - пошаговые инструкции для создания сайта


Служба Рассылок Subscribe.Ru проекта Citycat.Ru

Школа Веб - Dreamweaver
Выпуск 20 от 2001-08-20

Школа Веб ∙ Ведущий рассылки Eris

Навигационные панели


Рис. 1

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

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

Как создавать фреймы, мы разберем на одном из следующих уроков, а сейчас давайте попробуем создать навигационную панель из трех кнопок. Прежде всего подготовьте изображения. У нас три кнопки, соответственно понадобится 12 изображений. Для каждой кнопки понадобится изображение

  • выключенной пассивной кнопки
  • выключенной активной (когда над ней проходит курсор мыши)
  • включенной пассивной
  • включенной активной

Рис. 1

Нажимаем на кнопку Navigation Bar на панели инструментов (рис. 1) и вызываем окно Insert Navigation Bar. В поле Element Name напишите имя кнопки. Правила те же, что и для имен переменных JavaScript - допускаются английские буквы, цифры, знаки подчеркивания и имя не должно начинаться с цифры. Для каждой кнопки будет свое имя. Можете, в принципе, оставить то, что предлагает Dreamweaver, но имена типа unnamed1 в программировании считаются дурным тоном. Далее следуют четыре поля для изображении кнопки в различных состояниях.

  • Up Image - невключенная кнопка
  • Over Image - невключенная, но мышь над кнопкой
  • Down Image - включенная кнопка
  • Over While Down Image - включенная, при этом мышь над кнопкой.

В поле When Clicked, Go To URL вводите адрес странички которая будет загружена в в фрейм, имя которого вы можете в поле in.

Поле Preload Images заставит выполнить предзагрузку всех изображений кнопки. Если при загрузке данная кнопка сразу же должна быть включенной, то поставьте птичку в Show "Down Image" Initially. После этого возвращаетесь наверх окна и нажимаете кнопку "+" Выполняете описанную выше процедуру для всех кнопок. Теперь вы имеете в поле Nav Bar Elements список кнопок. Перемещаясь по нему можете увидеть настройки всех кнопок. Убедитесь, что все правильно, поскольку редактировать потом эту панель будет сложно, проще переделать.

После того, как кнопки настроены, настраиваем всю панель. В поле Insert выбираете Vertically усли вам нужна вертикальная панель, или Horizontally если кнопки должны располагаться горизонтально. Оставьте включенной опцию Use Table, это заставит использовать таблицу для размещения кнопок.

Вот и все о создании навигационной панели. Как видите, все не намного сложнее, чем вставить обычную картинку. Имейте ввиду, что Dreamweaver вставит в текст страницы некоторое количество кода на JavaScript. Не стоит удалять этот код или изменять его на важных страничках, если не очень понимаете, что делаете.
http://subscribe.ru/
E-mail: ask@subscribe.ru 		Отписаться Рейтингуется SpyLog
В избранное