 |
На заметку |
| Установите на своем сайте нашу кнопку: |
|
Показ и скрытие свободно позиционируемых элементов ( Show - Hide Layers )
Показ и скрытие свободно позиционируемых элементов страницы можно использовать в разных целях. Например, показывать различные подсказки при наведении курсора мыши на гиперссылки или графические изображения. Также можно на их основе создавать начальные заставки, показываемые посетителю сайта на самой первой его странице. (Почти всегда, однако, для этого используются фильмы форматов Flash , RealMedia или GIF . Но эту традицию стоит нарушить.) И, разумеется, появляющиеся и пропадающие в ответ на действия пользователя элементы страницы незаменимы при создании игр, обучающих пособий и программ, созданных на основе Web -страниц. Вы уже знаете, как создать на странице свободный элемент, как задать его размеры и сделать невидимым (до поры до времени). Поговорим теперь, как заставить его появляться и исчезать в ответ на события. А для этого Dreamweaver предоставляет поведение Show - Hide Layers .
Выберите пункт Show - Hide Layers в меню поведений. На экране появится диалоговое окно Show - Hide Layers . Все имеющиеся на странице свободно позиционируемые элементы перечислены в списке Named Layers . Вы можете выбрать в этом списке любой из них и задать для него выполняемое действие: показ или скрытие.
Для задания действия же служат три кнопки, расположенные под списком:
Show — показывает свободный элемент (при этом в соответствующей строке списка правее его имени появляется надпись "( show )");
Hide — скрывает свободный элемент (надпись "( hide )");
Default — восстанавливает видимость свободного элемента, заданную при его создании (надпись "( default )").
Выберите необходимый свободный элемент в списке и нажмите нужную кнопку. Чтобы отменить ошибочно выбранное действие, нажмите ту же кнопку еще раз. После этого нажмите кнопку ОК, чтобы сохранить сделанные установки.
Останов проигрывания анимации ( Stop Timeline )
Поведение stop Timeline позволяет вам остановить проигрывание анимации, запущенной ранее поведением Play Timeline . Для его создания воспользуйтесь пунктом Stop Timeline подменю Timeline меню поведений. На экране появится диалоговое окно Stop Timeline .
Это диалоговое окно содержит только раскрывающийся список Stop Time line . В этом списке выбирается анимация, которую нужно остановить. Пункт ** ALL TIMELINES ** позволяет остановить проигрывание всех анимаций, созданных на данной странице. После выбора анимации не забудьте нажать кнопку ОК.
Изменение графического изображения ( Swap Image )
Dreamweaver предоставляет вам возможность изменить рисунок, отображающийся в любом имеющемся на странице элементе графического изображения. Для этого используется поведение Swap image ; специальный Web -сценарий меняет значение атрибута src тега < img >. Это будет полезно во многих случаях.
Выберите пункт Swap Image меню поведений. На экране появится диалоговое окно Swap Image
Все имеющиеся на странице фафические изображения перечислены в списке Images . Выберите нужное. После этого введите имя файла нового изображения в поле ввода Set Source to ; также вы можете нажать кнопку Browse и выбрать нужный файл в появившемся на экране диалоговом окне Select File .
Если вы хотите изменить сразу несколько изображений, выполните вышеприведенную последовательность действий для всех нужных элементов. Созданный Dreamweaver Web -сценарий выполнит все эти замены одновременно.
Если включен флажок Preload Images (а он включен по умолчанию), Dreamweaver создаст еще один сценарий, выполняющий предварительную загрузку нужных файлов изображений. (Фактически для этого он создаст поведение Preload images .) Если вы отключите этот флажок, то сами должны будете выполнить их предзагрузку, либо мириться с задержками при изменении изображений.
Если вы привязываете поведение swap image к событию onMouseOver , то Dreamweaver автоматически создаст поведение Swap image Restore , восстанавливающее все изначальные изображения, и привязывает его к событию onMouseOut . Если вы не хотите, чтобы он так делал, отключите флажок Restore Images onMouseOut .
Закончив работу, нажмите кнопку ОК.
Восстановление всех изначальных изображений ( Swap Image Restore )
Если вы хотите после вызова поведения swap image восстановить изображения, отображавшиеся на странице изначально, создайте поведение Swap image Restore . Для этого выберите пункт Swap Image Restore меню поведений. На экране появится небольшое окно-предупреждение; нажмите кнопку ОК, чтобы закрыть его. Нажатие кнопки Cancel позволит вам отказаться от создания этого поведения.
Внимание!
Создавать поведение Swap Image Restore можно только после создания поведения Swap Image .
Написание своих Web - сценариев
Как видите, Dreamweaver предлагает достаточно ограниченный набор поведений и, стало быть, Web -сценариев, которые могут быть созданы на страницах. Конечно, они покрывают 95% нужд начинающего и даже опытного Web -дизайнера, и у вас, возможно, очень и очень нескоро появится потребность писать JavaScript -код самим. И все же...
Но вспомните, что Dreamweaver — гибридный Web -редактор! Он предоставляет не только удобный интерфейс для визуального создания и редактирования Web -страниц, но и такой же удобный доступ к их исходному HTML -коду. Поэтому вы можете без труда "вписать" туда свои сценарии, реализующие все, что вашей душе угодно. Правда, Dreamweaver в этом случае никак облегчить вашу работу не сможет...
Особые случаи создания поведений
Итак, создание поведений и привязку их к элементам страницы и событиям мы рассмотрели. Но все это были весьма тривиальные случаи. Сейчас же поговорим кое о чем особенном...
Привязка поведений к тексту
Мы знаем, как привязать поведение к элементу страницы, например гиперссылке или графическому изображению. Но что делать, если мы хотим привязать его к фрагменту текста в абзаце?
Если вы готовы пожертвовать совместимостью с Navigator , можете использовать такой прием:
<Р>Это < 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 требует гиперссылки, дадим ему гиперссылку.
Взгляните на следующий код:
<Р>Это <А HREF =" javascript :;" onClick =" doSomething ();">текст, по которому можно щелкать</А>.</Р>
Мы преобразовали нужный нам фрагмент текста в гиперссылку, привязали к ней обработчик события onclick . В качестве значения интернет-адреса мы задали " javascript :;", чтобы Web -обозреватель при щелчке по такой гиперссылке никуда не переходил. Можете проверить — такой код будет работать и в Internet Explorer , и в Navigator .
Чтобы созданная нами гиперссылка совсем уж не походила на гиперссылку, вы можете встроить в тег <а> стиль. Задайте атрибуту стиля text - decoration значение попе, чтобы отключить подчеркивание, а атрибуту color — значение цвета вашего текста. И пусть после этого ктонибудь скажет, что это гиперссылка!
Конечно, все вышеописанные манипуляции вы можете выполнить и в среде Dreamweaver . Вы можете ввести текст javascript :; в поле ввода Link редактора свойств, поставить в только что созданную гиперссылку текстовый курсор и воспользоваться панелью Behaviors . Автор описал все это в HTML , чтобы вам было понятнее.
|
