Macromedia Dreamweaver MX

Особые случаи создания поведений

Итак, создание поведений и привязку их к элементам страницы и событиям мы рассмотрели. Но все это были весьма тривиальные случаи. Сейчас же поговорим кое о чем особенном...

Привязка поведений к тексту

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

Если вы готовы пожертвовать совместимостью с Navigator, можете исполь­зовать такой прием:

<Р>Это <SPДN onClick="doSomething();">текст, по которому можно Ч>щелкать</ЗРАЫ>.</Р>

Function doSomething() {

Что-то делаем...

}

Как видите, нужный фрагмент текста выделен тегом <spдn> и привязан к этому тегу обработчик события onciick. Это работать будет, но только в Internet Explorer. Этот Web-обозреватель предоставляет Web-программисту доступ к любому элементу страницы и, соответственно, может обрабатывать события, происходящие в них.

Это можно сделать и в среде Dreamweaver, воспользовавшись диалоговым окном Tag Chooser. Выделите нужный фрагмент текста и выберите пункт Tag меню Insert или нажмите комбинацию клавиш <Ctrl>+<E>. В левом списке окна Tag Chooser разверните ветвь HTML Tags и выберите пункт Formatting and Layout, далее выберите в правом списке пункт span и нажми­те кнопку Insert. После этого выделенный вами фрагмент текста будет "взят" в тег <spдn>. Вы можете поставить в него текстовый курсор и привя­зать к нему любое поведение.

Кстати, так можно привязать поведение к любому тегу. Смотрите сюда:

<FONT SIZE="+2" onClick="doSomething();">Это текст, по которому можно 4>щелкать. </FONT>

И в этом случае Dreamweaver придет вам на помощь. Вам останется только поставить текстовый курсор на нужный текст и создать поведение.

Но это будет работать только в Internet Explorer.

У Navigator поддержка Web-программирования значительно ограничена. Он дает доступ к ограниченному набору элементов: гиперссылкам, графиче­ским изображениям, внедренным элементам, фреймам, свободно позицио­нируемым элементам и еще кое-чему. К обычным абзацам текста и уж тем более элементам <span> нашему брату Web-программисту путь заказан.

Что делать?

Есть один способ. Если уж Navigator требует гиперссылки, дадим ему ги­перссылку.

Взгляните на следующий код:

<Р>Это <А HREF="javascript:;" onClick="doSomething();">текст, по которому Ч>можно щелкать</А>.</Р>

Мы преобразовали нужный нам фрагмент текста в гиперссылку, привязали к ней обработчик события onciick. В качестве значения интернет-адреса мы задали "javascript:;", чтобы Web-обозреватель при щелчке по такой гипер­ссылке никуда не переходил. Можете проверить — такой код будет работать и в Internet Explorer, и в Navigator.

Чтобы созданная нами гиперссылка совсем уж не походила на гиперссылку, вы можете встроить в тег <а> стиль. Задайте атрибуту стиля text-decoration значение попе, чтобы отключить подчеркивание, а атрибуту color — значе­ние цвета вашего текста. И пусть после этого кто-нибудь скажет, что это гиперссылка!

Конечно, все вышеописанные манипуляции вы можете выполнить и в среде Dreamweaver. Вы можете ввести текст javascript:; в поле ввода Link редак­тора свойств, поставить в только что созданную гиперссылку текстовый курсор и воспользоваться панелью Behaviors. Автор описал все это в HTML, чтобы вам было понятнее.

Поведения и анимации

Вы познакомились с двумя, можно сказать, "детищами" Dreamweaver: ани­мацией и поведением. Они называются так потому, что не являются воз­можностями ни HTML, ни JavaScript, ни объектной модели документа DOM. И анимация, и поведения "придуманы" самим Dreamweaver, чтобы помочь вам создавать сложные Web-сценарии, решающие весьма непростые задачи. Вы работаете с анимациями и поведениями, используя удобный ин­терфейс Web-редактора, создаете их, изменяете и удаляете, a Dreamweaver за вашей спиной выполняет над кодом довольно сложные действия.

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

Давайте еще раз откроем панель Timelines, выбрав пункт Timelines подменю Others меню Window, или иным способом. И еще раз посмотрим на нее (см. рис. 12.1). Над серой линейкой с отметками времени (в кадрах) вы можете увидеть еще один канал анимации, пока еще нами не использованный. Это канал поведений. Он обозначен буквой В, от англ. behavior — поведение.

Чтобы привязать к какому-либо кадру анимации поведение, сначала выбе­рите необходимый кадр в канале поведений. В результате этот кадр будет выделен черным. Далее выберите в меню поведений нужный пункт, напри­мер, Show-Hide Layers. Как обычно, на экране появится диалоговое окно задания параметров выбранного поведения, в нашем случае — Show-Hide Layers. Введите параметры и нажмите кнопку ОК. И поведение, привязан­ное к кадру анимации, будет создано.

Против соответствующего кадра анимации в канале поведений появится небольшой значок (рис. 13.35). А в списке панели Behaviors — новое пове­дение, привязанное к событию onFramе<номер кадра> (рис. 13.36). Такого события в объектной модели документа не предусмотрено; Dreamweaver сам создал его так же, как создал анимации и поведения.

Таким образом, вы можете создать сколько угодно поведений, привязанных к кадрам анимации. Чтобы просмотреть поведения, привязанные к какому - либо кадру, просто выберите его в канале поведений панели Timelines. Имейте в виду, что выбирать можно только кадры, помеченные знаком, по­казанным на рис. 13.35. Также вы можете привязать к одному кадру не­
сколько поведений, просто добавив их в список поведений при выбранном кадре.

Вы можете изменить параметры привязанного к кадру анимации поведения, дважды щелкнув по соответствующей строке в списке поведений. Чтобы удалить ненужное поведение, либо удалите его из списка поведений, либо используйте пункт Remove Behavior контекстного меню панели Timelines или одноименный пункт подменю Timeline меню Modify.

Вы можете удивиться, почему автор не использовал для создания поведений пункт Add Behavior контекстного меню панели Timelines. (Кроме того, в подменю Timeline меню Modify есть пункт Add Behavior to Timeline.) Если вы выберете этот пункт, Dreamweaver выведет на экран предупреждение, предлагающее вам воспользоваться для создания поведения тем самым пу­тем, который мы описали. Зачем разработчикам Dreamweaver это понадоби­лось, непонятно.

Ну, вот и все о создании поведений и о написании Web-сценариев вообще. Поговорим о следующем, последнем шаге работы над любой программой — об отладке.