Работа с поведениями
Здесь мы изучим приемы работы с поведениями в нашем любимом Dreamweaver . Изучать мы их будем на примере страницы default 2.htm , созданной в качестве новой главной страницы первого сайта Sample site 1. Откройте ее в окне документа.
Панель Behaviors
Вся работа с поведениями будет протекать в специальной панели Behaviors . Чтобы вызвать ее на экран, включите пункт-выключатель Behaviors меню Window или нажмите комбинацию клавиш < Shift >+< F3>.
Большую часть этой панели занимает список уже созданных к этому времени поведений, привязанных к выделенному в окне документов элементу страницы. Наименование тега элемента, к которому привязаны отображаемые в списке поведения (по умолчанию это сама страница), находится выше этого списка. Если вы выделите в окне документа другой элемент, в списке панели тотчас отобразятся привязанные к нему поведения. К сожалению, узнать, к какому элементу страницы привязаны поведения, иным способом нельзя.
Список поведений представляет собой таблицу из двух колонок: Events (событие) и Actions (действие, происходящее в ответ на событие). Вы можете выбрать любое поведение в списке и произвести над ним какие-либо манипуляции.
Если вы поставите текстовый курсор на саму Web -страницу, выделив ее таким образом, то увидите, что в списке уже присутствует одно поведение - Play Animation , привязанное к событию onLoad . Это поведение было добавлено самим Dreamweaver , когда мы включили флажок Autoplay в панели Timelines . Так что некоторые поведения создаются самим Dreamweaver без вашего ведома.
Вы, наверно, уже заметили, что в столбце Events списка, правее отображаемого в нем значения, находится небольшая кнопка со стрелкой, направленной вниз. При нажатии на эту кнопку на экране появляется меню событий, в котором вы можете выбрать событие, в ответ на которое будет происходить заданное вами действие. Таким образом, вы можете изменить событие, в ответ на которое выполняется какое-либо действие, например, заставить анимацию проигрываться в ответ на щелчок мышью.
Чтобы отобразить в этом меню только события, поддерживаемые какой-либо программой Web -обозревателя, выберите пункт Show Events For . На экране появится небольшое подменю; включите пункт-выключатель, соответствующий нужной программе. Все пункты этого подменю перечислены в табл. 13.4.
Dreamweaver также предоставляет вам возможность изменить параметры выбранного в списке поведения. Для этого просто дважды щелкните по нему мышью, после чего на экране появится диалоговое окно задания параметров соответствующего поведения. В раскрывающемся списке Play Timeline выберите нужную анимацию и не забудьте нажать кнопку ОК для сохранения сделанных изменений или Cancel — для отказа от них.
Внимание!
Когда будете изменять событие или параметры поведения , не забудьте выделить в окне документа нужный элемент страницы .
В верхней части панели Behaviors находятся четыре кнопки: +, —,
^
и
v
. Давайте рассмотрим их по очереди.
Кнопка со знаком "плюс" позволит вам создать новое поведение. При ее нажатии на экране появляется довольно большое меню поведений , в котором можно выбрать нужное поведение. Некоторые из пунктов этого меню могут быть недоступными; это обычно означает, что в данный момент времени на странице нет необходимых элементов. Также некоторые поведения могут "прятаться" в подменю, например поведения, управляющие анимациями, находятся в подменю Timeline .
С помощью пунктов уже знакомого вам подменю Show Events For , находящегося в этом же меню, можно задать, поддерживаемые каким Web -обозревателем события будут отображаться в меню событий. Пункты этого подменю перечислены в табл. 13.4. Чтобы вывести нужный набор событий, просто выберите соответствующий пункт-выключатель.
Итак, чтобы создать новое поведение, сначала выделите нужный элемент страницы. Вы также можете привязать поведение к самой странице, для чего щелкните по пустому месту на ней или выберите тег < body > в строке тегов. Затем выберите необходимый пункт в меню поведений. После этого на экране появится диалоговое окно задания параметров выбранного вами поведения. Задайте требуемые параметры и нажмите кнопку ОК. Диалоговые окна задания параметров для других поведений будут рассмотрены ниже.
Кнопка со знаком "минус" позволит вам удалить выбранное в списке поведение. С таким же успехом вы можете нажать клавишу < Del >. He забудьте только выделить в окне документа нужный элемент страницы.
Кнопки
^
и
v
перемещают выбранное в списке поведение на позицию вверх или вниз. Дело в том, что если несколько поведений привязано к одному и тому же событию, они выполняются в порядке следования в списке поведений. С помощью кнопок
^
и
v
вы можете изменить этот порядок.
Создание поведений
Теперь настало время рассмотреть все поведения, предлагаемые нам Dreamweaver , их создание и все их параметры, которые вы можете задать.
Название поведения в терминологии самого Dreamweaver приведено в скобках, так что вы сразу сможете найти его в меню поведений.
Имейте только в виду, что здесь приводятся не все поведения, поддерживаемые Dreamweaver . Поведения, служащие для поддержки форм и элементов управления, рассмотрим в главе 16.
Вызов JavaScript- кода (Call JavaScript)
Если вы хотите, чтобы в ответ на какое-либо событие, произошедшее в том или ином элементе страницы, выполнялся некий JavaScript -код, создайте для этого элемента поведение call JavaScript . Для этого вызовите одноименный пункт меню поведений. После этого на экране появится диалоговое окно Call JavaScript .
В этом окне находится единственное поле ввода JavaScript , в котором вводится нужный программный код. Это может быть, например, вызов какой-либо функции, написанной вами и помещенной в секцию заголовка страницы, вызов метода, принадлежащего какому-либо элементу или объекту, или иной код. Не забудьте только нажать кнопку ОК после того, как введете этот код.
Изменение значения свойства ( Change Property )
Чтобы изменить в ответ на происшедшее событие значение какого-либо свойства того или иного объекта, воспользуйтесь поведением change Property . Выберите одноименный пункт меню поведений. На экране появится диалоговое окно Change Property .
Прежде всего необходимо выбрать тег элемента страницы, свойство которого будет изменено. Это делается с помощью раскрывающегося списка Туре of Object . После этого выберите сам объект в раскрывающемся списке Named Object . Имейте в виду, что в этом списке отображаются имена элементов, чей тег выбран в списке Type of Object ; для элементов, не имеющих уникального имени, отображается строка unnamed . Поэтому автор рекомендует для всех элементов страницы, которые вы собираетесь использовать в сценариях, задавать уникальное имя.
Набор переключателей Property позволяет выбрать способ задания нужного свойства.
Если выбран переключатель Select , вы сможете выбрать нужное свойство в раскрывающемся списке, находящемся правее этого переключателя. Имейте, однако, в виду, что в этом списке для многих объектов отображаются как свойства самого этого объекта, так и его внутреннего объекта style . Таким образом, вы можете изменить также и значения атрибутов его стиля.
Правее раскрывающегося списка свойств находится еще один раскрывающийся список. С его помощью вы можете задать, поддерживаемые каким Web -обозревателем свойства будут отображаться в списке свойств. В этом списке доступны четыре пункта:
NS 3 — отображаются только свойства, поддерживаемые Navigator 3.0;
IE3 — Internet Explorer 3.0;
NS4 — Navigator 4.0;
IE4 — Internet Explorer 4.0 ( выбран по умолчанию ).
Если выбран переключатель Enter , вы можете ввести имя нужного свойства в поле ввода, расположенном правее. Используйте эту возможность для ввода имен свойств, поддерживаемых новейшими программами Web -обозревателей, но не "известных" Dreamweaver .
Осталось ввести новое значение свойства в поле ввода New Value — и можно нажимать кнопку ОК.
