Создание эффекта
Первым делом, вам необходимо выбрать объект на странице, к которому будет прикреплен эффект. Это может быть ссылка, изображение, слой, элемент формы, а также некоторые другие элементы страницы. Кроме того, если ни один объект не выделен, эффекты можно прикреплять к самой странице — точнее, к тегу <body>. К некоторым объектам, таким, как текст, никаких эффектов напрямую прикрепить нельзя. Но можно сделать обходной маневр, как говорят еще — хитрый финт ушами, и разместить требуемый объект внутри слоя — к которому, как только что было сказано, можно прикреплять эффекты.
Итак, какой же объект все-таки выбрать? Как правило, это зависит от того, что вы хотите определить в качестве зоны реагирования на действия пользователя. Если хотите, к примеру, чтобы эффект возникал при щелчке на картинке, выберите картинку. Если вам нужно, чтобы эффект срабатывал при щелчке в любом месте страницы, то выберите тег <body>.
Универсальным объектом на все случаи жизни можно назвать слой — в силу того, что внутри него можно размещать любые другие элементы Web- страницы. Считайте это советом. Хотите создать "живой" текст или "живую" таблицу, реагирующую на действия посетителя? Разместите их внутри слоя и — внимание! — дальше выделяйте сам слой и работайте с ним.
О том, к какому объекту будут назначаться эффекты (то есть, какой объект сейчас выделен), можно догадаться по надписи в верхней части панели Behaviors. Там написано <fag>Actions, где вместо <tag> подставляется тег HTML, соответствующий текущему выделенному объекту.
Выбрав объект, обращаемся к панели Behaviors (рис. 15.2). Нажмите кнопку с плюсом на этой панели, чтобы открыть список эффектов. У-у-у, как их много! Но это не беда — чуть попозже я дам краткую расшифровку того, что делает каждый эффект в этом списке. Часть эффектов может быть неактивна (выделена серым цветом) — это означает, что для их применения нет никаких предпосылок. К примеру, если на странице не используются слои, вы не сможете использовать замечательный эффект Show-Hide Layers, который может убирать или показывать уже скрытые слои вместе с их содержимым.
|
Рис. 15.2. Панель Behaviors используется в Dreamweaver для работы с динамическими эффектами: 1 — кнопки добавления и удаления эффектов, 2 — надпись-подсказка, с каким объектом идет работа, 3 — кнопки для изменения порядка выполнения эффектов, стартующих по одному событию; 4 — событие, по которому запускается выделенный эффект; 5 — название самого эффекта |
При выборе нужного эффекта появляется диалоговое окно с его настройками. Так, для эффекта Show-Hide Layers возникает список имеющихся слоев на странице, из которых можно выбирать отдельные слои и приказывать спрятать их (кнопка Hide) или показать (кнопка Show) (рис. 15.3).
|
Рис. 15.3. После выбора эффекта появляется одноименное диалоговое окно с его настройками (пример для эффекта Show-Hide Layers) |
После того как окно с настройками будет закрыто, на панели Behaviors появится строка, соответствующая эффекту. В первой части строки содержится название события, по которому будет запускаться эффект, а во второй — название самого эффекта.
Чтобы удалить эффект, выделите его на панели Behaviors и нажмите кнопку с минусом. А если надо изменить настройки эффекта, выполните двойной щелчок по его строке на панели Behaviors. При этом откроется уже знакомое диалоговое окно с параметрами, которое появлялось при добавлении эффекта.
Теперь самое время заняться настройкой событий. Выделите строку с описанием эффекта на панели, после чего текстовое название события превратится в раскрывающийся список. Откройте этот список и выберите нужное событие. Их количество, кстати, не меньше, чем у эффектов. Рассмотрим наиболее популярные события для слоя в браузере Microsoft Internet Explorer 5 (рис. 15.4):
□ onClick — щелчок мышью по объекту;
□ onDblClick — двойной щелчок мышью по объекту;
□ onHelp — вызов контекстной помощи (нажатие клавиши F1). Можно использовать для создания системы подсказок по сайту;
□ onKeyDown — нажатие клавиши;
□ onKeyUp — отжатие нажатой клавиши;
□ onKeyPress — при нажатии и отпускании клавиши;
□ onMouseDown — нажатие кнопки мыши;
□ onMouseUp — отпускание нажатой ранее кнопки мыши;
□ onMouseMove — перемещение мыши над объектом;
□ onMouseOver — попадание курсора мыши на объект;
□ onMouseOut — выход курсора мыши за пределы объекта.
|
Рис. 15.4. Раскрытый список событий для браузера Microsoft Internet Explorer 5 |
Отдельные события являются уникальными для некоторых объектов. Так, например, для элементов формы и тела Web-страницы, среди описанных ранее, становятся доступны следующие события:
□ onLoad — загрузка страницы;
□ onResize — изменение размеров окна браузера;
□ onScroll — прокрутка страницы;
□ onFocus — объект получает фокус, то есть становится выделенным посетителем;
□ onBlur — объект теряет фокус, что обычно происходит при переходе к другим объектам или даже вообще к другим окнам Windows.
Последние два события доступны также и для элементов форм — кнопок, списков, текстовых полей ввода.
И хотя разные браузеры поддерживают разные наборы событий, описанные события будут срабатывать у большинства пользователей Web — если верить статистике, более 90% посетителей использует браузеры Microsoft Explorer пятой и более старших версий.
Чтобы в списке отображались события, доступные для определенного браузера, выберите в нем пункт Show Events for и в открывшейся группе укажите тип нужного браузера. Думаю, что не нужно особо расшифровывать пункты в данном списке. Укажу только, что новая популярная модель браузеров на ядре Mozilla, которая не указана в данном списке, больше соотносится с Microsoft Internet Explorer, чем с Netscape Navigator. Оптимальным, на мой взгляд, является выбор браузера Microsoft Internet Explorer 5 — он реагирует на достаточно большое количество событий, достаточно распространен среди пользователей. А кроме того, набор событий для пятого Microsoft Internet Explorer обеспечивает хорошую совместимость как с более современным Microsoft Internet Explorer 6, так и с браузерами на ядре Mozilla.
Одному и тому же объекту можно назначать несколько эффектов. Если есть желание, то можно даже от одного события запускать сразу не один эффект, а два, три… кто больше? Единственно, что эффекты, срабатывающие от одного события, будут запускаться не одновременно, а по очереди. Порядок выполнения такой же, как в панели Behaviors, — то есть сверху вниз. Чтобы изменить порядок, выделите строку с эффектом и щелкните на кнопке со стрелкой, указывающей вверх или вниз, в правом верхнем углу панели.
Итак, как видим, в Dreamweaver особой сложности в создании эффектов нет. Знай себе, выбирай из списка нужные действия и определяй для них стартовые события. Все эффекты DHTML в Dreamweaver работают в браузерах Microsoft Internet Explorer и Netscape Navigator, начиная с четвертой версии. Но вот набор событий, по которым могут запускать эти эффекты, до сих пор различается в разных браузерах.