Написание своих Web-сценариев. Особые случаи создания поведений. Привязка поведений к тексту.
Как видите, Dreamweaver предлагает достаточно ограниченный набор поведений и, стало быть, Web-сценариев, которые могут быть созданы на страницах. Конечно, они покрывают 95% нужд начинающего и даже опытного Web-дизайнера, и у вас, возможно, очень и очень нескоро появится потребность писать JavaScript-код самим. И все же…
Но вспомните, что Dreamweaver – гибридный Web-редактор! Он предоставляет не только удобный интерфейс для визуального создания и редактирования Web-страниц, но и такой же удобный доступ к их исходному HTML-коду. Поэтому вы можете без труда "вписать" туда свои сценарии, реализующие все, что вашей душе угодно. Правда, Dreamweaver в этом случае никак облегчить вашу работу не сможет…
Особые случаи создания поведений
Итак, создание поведений и привязку их к элементам страницы и событиям мы рассмотрели. Но все это были весьма тривиальные случаи. Сейчас же поговорим кое о чем особенном…
Привязка поведений к тексту
Мы знаем, как привязать поведение к элементу страницы, например гиперссылке или графическому изображению. Но что делать, если мы хотим привязать его, к фрагменту текста в абзаце?
Если вы готовы пожертвовать совместимостью с Navigator, можете использовать такой прием:
<P>Это <SPAN onClick="doSomething();">текст, по которому можно щелкать</span>.</P>function doSomething() {Что-то делаем… }Как видите, нужный фрагмент текста выделен тегом <SPAN> и привязан к этому тегу обработчик события onclick. Это работать будет, но только в Internet Explorer. Этот Web-обозреватель предоставляет Web-программисту доступ к любому элементу страницы и, соответственно, может обрабатывать события, происходящие в них.
Это можно сделать и в среде Dreamweaver, воспользовавшись диалоговым окном Tag Chooser. Выделите нужный фрагмент текста и выберите пункт Tag меню Insert или нажмите комбинацию клавиш CTRL + E. В левом списке окна Tag Chooser разверните ветвь HTML Tags и выберите пункт Formatting and Layout, далее выберите в правом списке пункт span и нажмите кнопку Insert. После этого выделенный вами фрагмент текста будет "взят" в тег <SPAN>. Вы можете поставить в него текстовый курсор и привязать к нему любое поведение.
Кстати, так можно привязать поведение к любому тегу. Смотрите сюда:
<FONT SIZE="+2" onClick="doSomething();">Это текст, по которому можно щелкать.</FONT>И в этом случае Dreamweaver придет вам на помощь. Вам останется только поставить текстовый курсор на нужный текст и создать поведение.
Но это будет работать только в Internet Explorer.
У Navigator поддержка Web-программирования значительно ограничена. Он дает доступ к ограниченному набору элементов: гиперссылкам, графическим изображениям, внедренным элементам, фреймам, свободно позиционируемым элементам и еще кое-чему. К обычным абзацам текста и уж тем более элементам <SPAN> нашему брату Web-программисту путь заказан.
Что делать?
Есть один способ. Если уж Navigator требует гиперссылки, дадим ему гиперссылку.
Взгляните на следующий код:
<P>Это <A HREF="javascript:;" onClick="doSomething();">текст, по которому можно щелкать</A>.</P>Мы преобразовали нужный нам фрагмент текста в гиперссылку, привязали к ней обработчик события onclick. В качестве значения интернет-адреса мы задали "javascript:;", чтобы Web-обозреватель при щелчке по такой гиперссылке никуда не переходил. Можете проверить – такой код будет работать и в Internet Explorer, и в Navigator.
Чтобы созданная нами гиперссылка совсем уж не походила на гиперссылку, вы можете вставить в Тег <А> стиль. Задайте атрибуту стиля text-decoration значение попе, чтобы отключить подчеркивание, а атрибуту color – значение цвета вашего текста. И пусть после этого кто-нибудь скажет, что это гиперссылка!
Конечно, все вышеописанные манипуляции вы можете выполнить и в среде Dreamweaver. Вы можете ввести текст javascript:; в поле ввода Link редактора свойств, поставить в только что созданную гиперссылку текстовый курсор и воспользоваться панелью Behaviors. Автор описал все это в HTML, чтобы вам было понятнее.