Macromedia Dreamweaver MX

Работа с поведениями

Здесь мы изучим приемы работы с поведениями в нашем любимом Dream­weaver. Изучать мы их будем на примере страницы default2.htm, созданной в качестве новой главной страницы первого сайта Sample site 1. Откройте ее в окне документа.

Панель Behaviors

Вся работа с поведениями будет протекать в специальной панели Behaviors. Чтобы вызвать ее на экран, включите пункт-выключатель Behaviors меню Window или нажмите комбинацию клавиш <Shift>+<F3>. Панель Behaviors показана на рис. 13.3.

Рис. 13.3. Панель Behaviors

Большую часть этой панели занимает список уже созданных к этому време­ни поведений, привязанных к выделенному в окне документов элементу страницы. Наименование тега элемента, к которому привязаны отображае­мые в списке поведения (по умолчанию это сама страница), находится вы­ше этого списка. Если вы выделите в окне документа другой элемент, в списке панели тотчас отобразятся привязанные к нему поведения. К со­жалению, узнать, к какому элементу страницы привязаны поведения, иным способом нельзя.

Список поведений представляет собой таблицу из двух колонок: Events (со­бытие) и Actions (действие, происходящее в ответ на событие). Вы можете выбрать любое поведение в списке и произвести над ним какие-либо мани­пуляции.

Если вы поставите текстовый курсор на саму Web-страницу, выделив ее та­ким образом, то увидите, что в списке уже присутствует одно поведение —

Play Animation, привязанное к событию onLoad. Это поведение было добав­лено самим Dreamweaver, когда мы включили флажок Autoplay в панели Timelines. Так что некоторые поведения создаются самим Dreamweaver без вашего ведома.

Вы, наверно, уже заметили, что в столбце Events списка, правее отображае­мого в нем значения, находится небольшая кнопка со стрелкой, направлен­ной вниз. При нажатии на эту кнопку на экране появляется меню событий, в котором вы можете выбрать событие, в ответ на которое будет происхо­дить заданное вами действие. Это меню показано на рис. 13.4. Таким обра­зом, вы можете изменить событие, в ответ на которое выполняется какое - либо действие, например, заставить анимацию проигрываться в ответ на щелчок мышью.

Рис. 13.4. Меню событий панели Behaviors

Чтобы отобразить в этом меню только события, поддерживаемые какой - либо программой Web-обозревателя, выберите пункт Show Events For. На экране появится небольшое подменю; включите пункт-выключатель, соот­ветствующий нужной программе. Все пункты этого подменю перечислены в табл. 13.4.

Dreamweaver также предоставляет вам возможность изменить параметры выбранного в списке поведения. Для этого просто дважды щелкните по не­му мышью, после чего на экране появится диалоговое окно задания пара­метров соответствующего поведения. Например, ДЛЯ поведения play Timeline такое окно выглядит так, как на рис. 13.5. В раскрывающемся списке Play Timeline выберите нужную анимацию и не забудьте нажать кнопку ОК для сохранения сделанных изменений или Cancel — для отказа от них.

Когда будете изменять событие или параметры поведения, не забудьте выде­лить в окне документа нужный элемент страницы.

В верхней части панели Behaviors находятся четыре кнопки: +, —, t и 4. Давайте рассмотрим их по очереди.

Кнопка со знаком "плюс" позволит вам создать новое поведение. При ее нажатии на экране появляется довольно большое меню поведений (рис. 13.6), в котором можно выбрать нужное поведение. Некоторые из пунктов этого меню могут быть недоступными; это обычно означает, что в данный момент времени на странице нет необходимых элементов. Также некоторые поведе­ния могут "прятаться" в подменю, например поведения, управляющие ани­мациями, находятся в подменю Timeline.

С помощью пунктов уже знакомого вам подменю Show Events For, находя­щегося в этом же меню, можно задать, поддерживаемые каким Web - обозревателем события будут отображаться в меню событий. Пункты этого подменю перечислены в табл. 13.4. Чтобы вывести нужный набор событий, просто выберите соответствующий пункт-выключатель.

— | <bodij> Actions Call JavaScript Change Property Check Browser Check Plugin

Control Shockwave or Flash

Drag Layer

Go To URL

Hide Pop-Up Menu

Jump Menu

Jump Menu Go

Open Browser Window

Play Sound

Popup Message

Preload Images

Set Mav Bar Image

Set Text ►

Show Pop-Up Menu

Show-Hide Layers

Swap Image

Swap Image Restore

Timeline ►

Validate Form

Show Events For ►

Get More Behaviors...

Рис. 13.6. Меню поведений панели Behaviors

Итак, чтобы создать новое поведение, сначала выделите нужный элемент страницы. Вы также можете привязать поведение к самой странице, для чего щелкните по пустому месту на ней или выберите тег <BODY> в строке тегов. Затем выберите необходимый пункт в меню поведений. После этого на экране появится диалоговое окно задания параметров выбранного вами поведения. Такое окно для поведения Play Timeline показано на рис. 13.5. Задайте требуемые параметры и нажмите кнопку ОК. Диалоговые окна за­дания параметров для других поведений будут рассмотрены ниже.

Кнопка со знаком "минус" позволит вам удалить выбранное в списке пове­дение. С таким же успехом вы можете нажать клавишу <Del>. Не забудьте только выделить в окне документа нужный элемент страницы.

Кнопки Т и 4- перемещают выбранное в списке поведение на позицию вверх или вниз. Дело в том, что если несколько поведений привязано к од­ному и тому же событию, они выполняются в порядке следования в списке поведений. С помощью кнопок t и I вы можете изменить этот порядок.

Создание поведений

Теперь настало время рассмотреть все поведения, предлагаемые нам Dreamweaver, их создание и все их параметры, которые вы можете задать.

Название поведения в терминологии самого Dreamweaver приведено в скоб­ках, так что вы сразу сможете найти его в меню поведений.

Имейте только в виду, что здесь приводятся не все поведения, поддержи­ваемые Dreamweaver. Поведения, служащие для поддержки форм и элемен­тов управления, рассмотрим в главе 16.

Вызов JavaScript-KOЯa (Call JavaScript)

Если вы хотите, чтобы в ответ на какое-либо событие, произошедшее в том или ином элементе страницы, выполнялся некий JavaScript-код, создайте для этого элемента поведение call JavaScript. Для этого вызовите одно­именный пункт меню поведений. После этого на экране появится диалого­вое окно Call JavaScript, показанное на рис. 13.7.

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

Изменение значения свойства (Change Property)

Чтобы изменить в ответ на происшедшее событие значение какого-либо свойства того или иного объекта, воспользуйтесь поведением change Property. Выберите одноименный пункт меню поведений. На экране по­явится диалоговое окно Change Property (рис. 13.8).

Прежде всего необходимо выбрать тег элемента страницы, свойство которо­го будет изменено. Это делается с помощью раскрывающегося списка Туре of Object. После этого выберите сам объект в раскрывающемся списке Named Object. Имейте в виду, что в этом списке отображаются имена эле­ментов, чей тег выбран в списке Type of Object; для элементов, не имеющих уникального имени, отображается строка unnamed. Поэтому автор рекомен­дует для всех элементов страницы, которые вы собираетесь использовать в сценариях, задавать уникальное имя.

Набор переключателей Property позволяет выбрать способ задания нужного свойства.

Если выбран переключатель Select, вы сможете выбрать нужное свойство в раскрывающемся списке, находящемся правее этого переключателя. Имей­те, однако, в виду, что в этом списке для многих объектов отображаются как свойства самого этого объекта, так и его внутреннего объекта style. Та­ким образом, вы можете изменить также и значения атрибутов его стиля.

Правее раскрывающегося списка свойств находится еще один раскрываю­щийся список. С его помощью вы можете задать, поддерживаемые каким Web-обозревателем свойства будут отображаться в списке свойств. В этом списке доступны четыре пункта:

□ NS3 — отображаются только свойства, поддерживаемые Navigator 3.0;

□ IE3 — Internet Explorer 3.0;

□ NS4 — Navigator 4.0;

□ IE4 - Internet Explorer 4.0 (выбран по умолчанию).

Если выбран переключатель Enter, вы можете ввести имя нужного свойства в поле ввода, расположенном правее. Используйте эту возможность для ввода имен свойств, поддерживаемых новейшими программами Web-обо­зревателей, но не "известных" Dreamweaver.

Осталось ввести новое значение свойства в поле ввода New Value — и мож­но нажимать кнопку ОК.

Перенаправление на другую страницу в зависимости от версии Web-обозревателя (Check Browser)

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

Тителя на соответствующую страницу, используются "говорящие" гипер­ссылки вида: "Пользователям Navigator 1.0 — сюда. А вы слышали: вышла версия 2.0!". Но чаще всего на главной странице сайта помещается Web - сценарий, определяющий версию программы Web-обозревателя и перена­правляющий посетителя на соответствующую ей страницу.

Практически всегда такие сценарии выполняются при наступлении события onLoad объекта страницы (тег <body>), т. е. когда страница полностью загру­зится. При этом посетитель перемещается на другую страницу автоматиче­ски, не делая никаких щелчков по гиперссылкам. (Конечно, если его про­граммное обеспечение поддерживает Web-сценарии. В противном случае нужно все-таки будет предусмотреть на главной странице соответствующие гиперссылки, иначе он не попадет, куда нужно.)

Автоматическое перенаправление на другую страницу стало в наше время настолько популярным, что все более-менее мощные Web-редакторы позво­ляют создавать такие штуковины. Dreamweaver не стал исключением. Если вы выберете пункт Check Browser меню поведений, вы в этом убедитесь.

А пока посмотрим на диалоговое окно Check Browser, показанное на рис. 13.9. Что же предлагает нам Dreamweaver?

А предлагает он нам три возможности:

□ остаться на текущей странице;

□ перейти на "основную" страницу ("основная" — в терминологии Dream­weaver) ;

□ перейти на "альтернативную" страницу ("альтернативная" — также в тер­минологии Dreamweaver).

Интернет-адрес "основной" страницы задается в поле ввода URL. Интернет - адрес "альтернативной" страницы — в поле ввода Alt URL. Конечно, вы мо­жете нажать кнопку Browse, находящуюся правее нужного поля ввода, и выбрать необходимый файл в диалоговом окне Select File.

Возможно, выбор всего из трех страниц покажется вам небогатым. Однако, если вы не делаете сверхзаумного сайта, где на каждую версию каждого Web-обозревателя отведена своя версия каждой страницы, вам должно этого хватить.

Группа элементов управления Netscape Navigator позволяет задать, на какие страницы будет произведено перенаправление, если посетитель сайта поль­зуется Navigator. Сама версия Web-обозревателя задается в небольшом поле ввода, называющемся так же — Netscape Navigator. Если версия Web - обозревателя окажется такой же, как вы ввели, или более поздней, осущест­вляется переход на страницу, заданную в раскрывающемся списке or later. В противном случае переход будет выполнен на страницу, заданную в раскрывающемся списке otherwise.

Раскрывающиеся списки or later и otherwise имеют по три пункта:

□ Stay on this Page — оставаться на текущей странице;

□ Go to URL — перейти на "основную" страницу;

□ Go to Alt URL — перейти на "альтернативную" страницу.

Как видите, все довольно просто.

Точно так же задаются страницы для пользователей различных версий Internet Explorer. Для этого служит группа элементов управления Internet Explorer. Для задания страницы, предназначенной для пользователей других программ Web-обозревателей, используется единственный раскрывающийся список Other Browsers.

По умолчанию Dreamweaver предлагает нам следующее:

□ пользователей Internet Explorer 4.0 и Navigator 4.0 или более новых вер­сий этих программ — переслать на "основную" страницу;

□ пользователей более старых версий Internet Explorer 4.0 и Navigator 4.0, а также других программ Web-обозревателей — переслать на "альтерна­тивную" страницу.

Как правило, этих установок бывает достаточно. Вам остается только задать интернет-адреса "основной" и "альтернативной" Web-страниц. И, разумеет­ся, нажать кнопку ОК.

Проверка наличия модуля расширения (Check Plugin)

В главе 4, посвященной графическим изображениям и мультимедийным элементам, помещаемым на Web-страницы, говорилось о модулях расшире­ния Web-обозревателя — специальных программах, работающих совместно с Web-обозревателем и предназначенных для обработки не поддерживаемых им непосредственно данных. Существуют модули расширения Web-обозре­вателя для проигрывания фильмов Flash, Shockwave, аудио - и видеоклипов форматов RealMedia, МРЗ и т. п. Некоторые из модулей расширения по­ставляются в составе Web-обозревателей, другие же должны покупаться или загружаться из Интернета отдельно.

Если вы используете в своих страницах мультимедийное или иное содержи­мое, не поддерживаемое ни самим Web-обозревателем, ни одним из постав­ляемых с ним модулем расширения, но для которого существуют модули расширения, доступные в Сети, вы должны выполнять проверку, установ­лен ли этот модуль на компьютере посетителя сайта.

Обычно такая проверка выполняется прямо на Web-странще с данными, отображаемыми с помощью модуля расширения. Если такой модуль уста­новлен, данные будут успешно отображены. В противном случае вы можете перенаправить посетителя на другую страницу с разъяснениями и предло­жением загрузить соответствующий модуль или теми же данными в более "удобоваримом" для Web-обозревателя формате. Как и в случае проверки версии Web-обозревателя, выполнять проверку установленного модуля рас­ширения лучше всего сразу после загрузки страницы, привязав поведение к событию onLoad тега <BODY>.

Для выполнения такой проверки вы можете воспользоваться поведением Check Plugin, для чего вам достаточно будет выбрать одноименный пункт меню поведений. После этого на экране появится диалоговое окно Check Plugin, показанное на рис. 13.10.

Группа переключателей Plugin задает способ, которым выбирается модуль расширения. Если вы включите переключатель Select (он, кстати, включен по умолчанию), то сможете выбрать нужный модуль расширения в раскры­вающемся списке, расположенном правее кнопки. В этом списке доступны пять пунктов:

□ Flash — модуль расширения Macromedia Flash;

□ Shockwave — Macromedia Shockwave;

□ LiveAudio — Creative LiveAudio;

□ QuickTime — Apple QuickTime;

□ Windows Media Player — стандартный проигрыватель мультимедийных файлов, поставляемый в составе Microsoft Windows.

Как видите, в этом списке перечислены не все модули расширения, кото­рые могут быть реально у вас установлены, а только "известные" Dream­weaver. Если же вам нужно проверить "существование" какого-то другого модуля, выберите переключатель Enter и введите имя нужного модуля рас­ширения в поле ввода, расположенное правее этого переключателя.

В поле ввода If Found, Go То URL вводится интернет-адрес страницы, на которую будет осуществлен переход в случае, если нужный модуль расши­рения будет найден на компьютере. Если вы хотите, чтобы в этом случае посетитель оставался на текущей странице, оставьте это поле пустым; часто так и делают.

В поле ввода Otherwise, Go То URL вводится интернет-адрес страницы, на которую будет осуществлен переход в случае, если нужного модуля расши­рения не будет найдено. Если вы хотите, чтобы в этом случае посетитель оставался на текущей странице, оставьте это поле пустым. Обычно, если какого-либо модуля расширения на компьютере клиента нет, выполняется переход на страницу с разъяснениями и предложением установить его, а если такой модуль есть, посетитель остается на той же странице и наблюдает данные, отображаемые с помощью этого модуля.

Бывает так, что Web-сценарий, определяющий присутствие модуля расши­рения, не работает или работает некорректно. (В частности, так происходит в некоторых версиях Internet Explorer.) В этом случае выполняется автома­тический переход на страницу, чей адрес указан в поле ввода Otherwise, Go То URL. Если же вы хотите, чтобы в этом случае всегда осуществлялся пе­реход на страницу, чей интернет-адрес указан в поле ввода If Found, Go То URL (т. е. как будто проверка прошла удачно, и модуль расширения был бы найден), включите флажок Always go to first URL if detection is not possible.

Как обычно, кнопка OK сохраняет сделанные вами установки, а кнопка Cancel — отменяет их.

Управление фильмом Shockwave или Flash (Control Shockwave or Flash)

Видеоролики разной длины и различного качества часто используются на современных Web-страницах. Нередко они управляются Web-сценариями.

Так, фильм Flash может запускаться в ответ на нажатие кнопки или наведе­ние курсора мыши на какой-либо элемент страницы. Существуют сайты, почти целиком реализованные на Flash-фильмах и Web-сценариях, которые ими управляют.

Dreamweaver предоставляет вам возможность управлять фильмом в формате Shockwave или Flash из обработчика того или иного события. Для этого ис­пользуется поведение control Shockwave or Flash. Для создания такого по­ведения выберите одноименный пункт меню поведений. Диалоговое окно Control Shockwave or Flash, показанное на рис. 13.11, позволит вам задать параметры этого поведения.

Прежде всего, выберите соответствующий нужному фильму элемент <EMBED> или <object> в раскрывающемся списке Movie. Имейте в виду, что в этом меню отображаются имена таких элементов; для тех из них, кто не имеет уникального имени, отображается строка unnamed. Поэтому автор рекомен­дует для всех фильмов, которыми вы собираетесь управлять из сценариев, задавать уникальное имя.

Выбрав фильм, задайте действия, которое хотите над ним совершить. Это действие задается с помощью набора переключателей Action. Всего пере­ключателей в этом наборе четыре:

□ Play — начинает проигрывание фильма;

□ Stop — останавливает его;

□ Rewind — перематывает его к началу;

□ Со to Frame — перематывает его к заданному в расположенном правее поле ввода кадру.

Задав нужные параметры, нажмите кнопку ОК.

Перетаскивание свободно позиционируемого элемента (Drag Layer)

Мы уже говорили об анимированных элементах страницы. Однако вы мо­жете предоставить возможность пользователю самому перетаскивать сво­бодно позиционируемые элементы по странице. Это может быть полезно, если вы делаете интерактивную игру, наподобие головоломки, учебное по­собие или полноценную программу в виде Web-страницы.

Поведение Drag Layer, реализующее перетаскивание свободных элементов, привязывается к событию onLoad тега <body>. Выберите одноименный пункт меню поведений; на экране появится диалоговое окно Drag Layer, показан­ное на рис. 13.12.

В раскрывающемся списке Layer выбирается свободный элемент, который вы хотите позволить посетителю перемещать.

Вы можете выбрать ограниченное или неограниченное движение выбранно­го свободного элемента. Это делается с помощью раскрывающегося списка Movement. Пункт Unconstrained задает неограниченное движение; в этом случае свободный элемент может перемещаться посетителем куда угодно. Пункт Constrained списка задает ограниченное движение; в этом случае сво­бодный элемент может двигаться в пределах прямоугольной области, чьи размеры задаются с помощью набора полей ввода, которые в этом случае появятся правее списка Movement:

□ Up — задает вертикальную координату верхней границы области в пик­селах;

□ Down — вертикальную координату нижней границы;

□ Left — горизонтальную координату левой границы;

□ Right — горизонтальную координату правой границы.

Вы также можете предусмотреть некую точку на странице, куда будет "стре­миться" перемещаемый свободный элемент. Координаты этой точки зада­ются в пикселах в полях ввода группы Drop Target: Left (горизонтальная) и Тор (вертикальная). Нажатие кнопки Get Current Position позволит вам по­местить в эти поля ввода текущие координаты свободного элемента. В поле ввода Snap if Within... Pixels of Drop Target задается расстояние в пикселах
до вышеуказанной точки, при достижении которого перемещаемый элемент сам "приклеивается" к ней.

Выше мы рассмотрели элементы управления, находящиеся на вкладке Basic диалогового окна Drag Layer, показанного на рис. 13.12. Если вы делаете простейшую головоломку, их вам будет достаточно. Если же хотите больше­го, переключитесь на вкладку Advanced (рис. 13.13).

______________________________________________________________ M

Basic | Advanced |

Drag Handle: 11BH -1l I T: | W: I H: [

While Dlagging W Bring Layer to Front, then | Leave on Top Call JavaScript:!

When Dropped: Call JavaScript | I?" Only if snapped

Drag Layer

Рис. 13.13. Диалоговое окно Drag Layer (вкладка Advanced)

По умолчанию, чтобы перетащить свободный элемент на другое место, по­сетитель должен "ухватиться" мышью за любое его место. С помощью рас­крывающегося списка Drag Handle и набора полей ввода правее его вы мо­жете задать ограниченную прямоугольную область внутри этого элемента, за которую его можно будет таскать. Для этого выберите в данном списке пункт Area Within Layer и введите в поля ввода соответствующие координаты:

□ в поле ввода L — горизонтальную координату левой границы области в пикселах;

□ Т — вертикальную координату верхней границы;

□ W — ширину области;

□ Н — высоту области.

Чтобы задать поведение по умолчанию, выберите пункт Entire Layer рас­крывающегося списка Drag Handle.

С помощью флажка While Dragging и раскрывающегося списка Bring Layer to Front, then вы можете задать поведение свободного элемента при пере­таскивании. Если включен флажок While Dragging, перетаскиваемый эле­мент будет находиться над всеми остальными свободными элементами, имеющимися на странице. При этом если в раскрывающемся списке Bring Layer to Front, then выбран пункт Leave on Top, то этот элемент так и оста­нется "наверху" после отпускания, а если выбран пункт Restore z-index, то он будет помещен на ту же позицию в порядке перекрытия, на которой на­ходился до начала перетаскивания.

В поле ввода Call JavaScript вы можете ввести строку JavaScript-кода, на­пример вызов написанной ранее функции, которая будет вызываться перио­дически во время перетаскивания элемента по странице. Этот код может, например, показывать координаты элемента в строке статуса окна Web - обозревателя.

В поле ввода When Dropped: Call JavaScript вы можете ввести строку JavaScript-кода, которая будет вызвана после отпускания элемента. При этом если включен флажок Only if snapped, этот код будет вызван только тогда, когда перетаскиваемый элемент "приклеится" к конечной точке, чьи координаты были заданы на вкладке Basic диалогового окна Drag Layer.

Задав нужные параметры, нажмите кнопку ОК.

Переход на заданный кадр анимации (Go То Timeline Frame)

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

Для таких случаев Dreamweaver предусматривает поведение go то Timeline Frame. Выберите одноименный пункт в подменю Timeline меню поведений. На экране появится диалоговое окно Со То Timeline Frame (рис. 13.14).

Go То Timeline Frame

Timeline: IТimelinel т Go to Frame: Я

Loop: I times

Рис. 13.14. Диалоговое окно Go То Timeline Frame

Прежде чем задать кадр анимации, нужно выбрать саму анимацию. Это де­лается в раскрывающемся списке Timeline. Номер же кадра вводится в поле ввода Со to Frame. После этого остается только нажать кнопку ОК.

Вы, наверно, удивились, почему мы не рассмотрели поле ввода Loop... times. Потерпите, о нем еще будет рассказано, когда мы будем рассматри­вать специальные случаи создания поведений. Это будет ближе к концу главы.

Переход на другую Web-страницу (Go to URL)

Иногда бывает нужно загрузить в текущем окне Web-обозревателя другую страницу, не дожидаясь, пока это сделает посетитель. Для таких случаев Dreamweaver предлагает поведение Go to url. Выберите в меню поведений соответствующий пункт; на экране появится диалоговое окно Go То URL, показанное нарис. 13.15.

Сам интернет-адрес задается в поле ввода URL. Вы также можете нажать кнопку Browse и выбрать нужную страницу в диалоговом окне Select File.

В списке Open In задается фрейм, в котором будет открыта новая страница. Если ваша страница не представляет собой набор фреймов, в этом списке будет присутствовать единственный пункт Main Window (все окно), как в нашем случае.

Задав нужные параметры, нажмите кнопку ОК.

Скрытие меню гиперссылок (Hide Pop-Up Menu)

Это поведение скрывает выведенное ранее на экран меню гиперссылок (о создании меню гиперссылок см. ниже). Как правило, Dreamweaver созда­ет его сам, но иногда вам придется делать это самим.

После выбора в меню поведений пункта Hide Pop-Up Menu на экране по­явится небольшое окно-предупреждение. Закройте его, нажав кнопку ОК. На этом создание поведения Hide Pop-Up Menu закончено. Никаких парамет­ров оно не имеет.

Нажатие кнопки Cancel вышеупомянутого окна-предупреждения позволит вам отказаться от создания поведения Hide Pop-Up Menu.

Открытие нового окна Web-обозревателя (Open Browser Window)

Это поведение аналогично поведению Go to url за тем исключением, что оно открывает новую страницу в новом окне Web-обозревателя. При этом
оно позволяет задать различные параметры нового окна: размеры, наличие инструментария и строки статуса и т. п.

Выберите в меню поведений пункт Open Browser Window. На экране по­явится диалоговое окно Open Browser Window, показанное на рис. 13.16.

Open Browser Window

Рис. 13.16. Диалоговое окно Open Browser Window

В поле ввода URL to Display задается интернет-адрес страницы, которая бу­дет показана в новом окне. Вы можете нажать кнопку Browse и выбрать нужную страницу в диалоговом окне Select File.

В полях ввода Window Width и Window Height задаются соответственно ши­рина и высота нового окна. Заметьте, что координатами окна управлять вы не можете.

С помощью группы флажков Attributes задаются дополнительные параметры нового окна:

□ Navigation Toolbar — включает или отключает наличие у нового окна главного инструментария с кнопками Вперед (Forward), Назад (Back), Остановить (Stop) и Обновить (Reload);

□ Location Toolbar — включает или отключает наличие у нового окна инструментария с полем ввода интернет-адреса;

□ Status Ваг — включает или отключает наличие у нового окна строки ста­туса;

□ Menu Ваг — включает или отключает наличие у нового окна системного меню;

□ Scrollbars as Needed — разрешает или запрещает появление у нового окна полос прокрутки, если его содержимое в нем не помещается;

□ Resize Handles — разрешает или запрещает пользователю изменять раз­меры нового окна.

Имейте в виду, что если вы не задали размеров окна, то новое окно будет иметь случайные размеры и полный набор параметров, перечисленных вы­ше (т. е. оба инструментария, строку статуса и т. д.). Если же вы зададите
размеры, то новое окно, наоборот, не будет иметь ни одного из этих атри­бутов, поэтому вам самим придется задавать нужные параметры, включая соответствующие флажки группы Attributes.

В поле ввода Window Name задается имя создаваемого окна. Впоследствии вы можете использовать это имя, например, при создании поведения Go to url для вывода в нем новой Web-страницы.

Кнопка ОК диалогового окна сохраняет сделанные вами установки, а кноп­ка Cancel — отменяет их.

Проигрывание аудиоклипа (Play Sound)

В свете последних тенденций к наполнению Интернета мультимедийной информацией Dreamweaver предоставляет вам возможность в ответ на ка­кое-либо событие проиграть аудиоклип с помощью поведения Play Sound. Для этого выберите пункт Play Sound меню поведений. После этого на эк­ране появится диалоговое окно Play Sound (рис. 13.17).

Это диалоговое окно содержит одно-единственное поле ввода Play Sound, предназначенное для ввода имени аудиофайла, который будет проигран. Вы также можете нажать кнопку Browse и выбрать нужный файл в диалоговом окне Select File. После этого нажмите кнопку ОК.

Запуск проигрывания анимации (Play Timeline)

Конечно же, Dreamweaver предоставляет специальные поведения для управ­ления проигрыванием анимации в ответ на какое-либо событие. Это реали­зуется С ПОМОЩЬЮ поведения play Timeline. Одноименный пункт для созда­ния этого поведения находится в подменю Timeline меню поведений.

Диалоговое окно Play Timeline показано на рис. 13.5. Оно содержит один - единственный раскрывающийся список, называющийся Play Timeline. В нем выбирается анимация, которую нужно проиграть, после чего нажимается кнопка ОК. Как видите, все очень просто.

Вывод предупреждения (Popup Message)

Очень часто для сообщения пользователю о чем-либо (например, необхо­димости ввести данные в поле ввода на странице) используются окна-пре­дупреждения. Они представляют собой обычное стандартное предупрежде­ние Windows: небольшое окно с текстом предупреждения, изображением восклицательного знака и кнопкой ОК. Для вывода такого предупреждения вы можете воспользоваться поведением Popup Message. Выберите одноимен­ный пункт меню поведений, после чего на экране появится диалоговое окно Popup Message (рис. 13.18).

Введите текст предупреждения в область редактирования Message и нажми­те кнопку ОК.

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

Сегодня {new Date()}

Если же вам понадобится для каких-то целей ввести в текст фигурную скобку, предварите ее обратной косой чертой (/{ или /}).

Предварительная загрузка графических изображений (Preload Images)

Как вы помните из материала предыдущей главы, на Web-страницах часто используются анимированные картинки, представляющие собой обычный набор графических изображений, быстро сменяющих друг друга. Такая анимация в среде Dreamweaver создается очень просто, да и при "ручной" работе также не вызывает особой сложности у достаточно опытного Web - программиста. Проблема в другом: при загрузке страницы из Интернета за­гружается только одно, первое изображение, а остальные Web-обозревателю приходится подгружать в процессе проигрывания анимации, создавая зна­чительные задержки при проигрывании анимации в первый раз.

Решить эту проблему позволяет предварительная загрузка нужного набора изображений. Изображения загружаются с помощью специального сцена­рия, но нигде не отображаются, а просто сохраняются в кэше Web-обо­зревателя. При проигрывании такой анимации Web-обозреватель берет
нужные графические файлы из своего кэша, вместо того, чтобы загружать их из Сети.

Для выполнения предварительной загрузки графических изображений могут применяться два подхода:

1. Статический, самый очевидный. На странице создается соответствующее количество графических изображений (тег <img>) размером 1x1 пиксел (или даже 0x0, если это сработает). В качестве значения атрибута src указывается имя одного из файлов, содержащих разные кадры анимации. При загрузке страницы Web-обозреватель тотчас загружает все нужные для анимации файлы и сохраняет их в своем кэше. Этот способ очень прост и нацежен, если анимация содержит небольшое количество кадров. Однако, если кадров в анимации достаточно много, Web-обозреватель займет для сохранения этих изображений в памяти слишком много сис­темных ресурсов, что не всегда приемлемо.

2. Динамический. Используется Web-сценарий, загружающий все эти файлы. При этом графические изображения не хранятся в памяти и, таким обра­зом, не занимают системные ресурсы, стало быть, анимация может со­держать сколько угодно кадров. Однако этот подход несколько сложнее из-за необходимости создания сценария.

И все же для предварительной загрузки изображений рекомендуется ис­пользовать второй, динамический подход. И Dreamweaver вам в этом помо­жет, предоставив поведение Preload images. Очевидно, что это поведение привязывается к событию onLoad тега <body>. Чтобы создать его, выберите одноименный пункт в меню поведений. После этого на экране появится диалоговое окно Preload Images, показанное на рис. 13.19.

Preload Images

Jj _d

Preload Images: |

Image Source File: | Browse... |

Рис. 13.19. Диалоговое окно Preload Images

Файлы, которые должны быть предварительно загружены, перечислены в списке Preload Images. Чтобы добавить файл в этот список, введите его имя в поле ввода Image Source File и нажмите кнопку со знаком "плюс". Вы также можете нажать кнопку Browse и выбрать нужный файл в диалоговом
окне Select File. Чтобы изменить какой-либо файл, выберите его в списке, измените его имя в поле ввода Image Source File и после этого обязательно переключитесь на другой элемент управления, лучше всего — на сам список Preload Images. Чтобы удалить ненужный файл, выберите его в списке и нажмите кнопку со знаком "минус".

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

После задания списка файлов, которые должны быть предварительно загру­жены, нажмите кнопку ОК. Кнопка Cancel позволит вам отказаться от сде­ланных изменений.

Изменение изображения-элемента полосы навигации (Set Nav Bar Image)

О полосе навигации речь шла в главе 7, посвященной фреймам и фреймо­вому дизайну. Как вы помните, при создании полосы навигации Dream­weaver создает также множество сценариев, обеспечивающих смену изобра­жений каждого элемента в ответ на различные события. Эти сценарии и представляют собой поведение Set Nav Bar Image.

Как правило, вам самим не нужно создавать это поведение — это сделает за вас Dreamweaver. Если же это вам понадобится, выберите пункт Set Nav Bar Image в меню поведений. На экране появится диалоговое окно Set Nav Bar Image (рис. 13.20).

Как видите, содержимое вкладки Basic этого окна почти совпадает с содер­жимым диалогового окна Insert Navigation Ваг, показанного на рис. 7.23. Элементы управления этой вкладки позволяют настроить выделенный вами элемент полосы навигации: задать для него изображения, "альтернативный" текст, интернет-адрес гиперссылки и др. Все это вам уже знакомо по главе 7.

А вот содержимое вкладки Advanced данного окна позволяет вам задать кое - какие дополнительные настройки, затрагивающие другие элементы полосы навигации. Эта вкладка показана на рис. 13.21. В частности, с ее помощью вы можете задать изменение изображения другого элемента полосы, если посетитель щелкнет выделенный вами элемент.

В раскрывающемся списке When element <название выделенного элемента >

Is displaying выбирается состояние, в котором находится выделенный вами элемент полосы навигации. Если выбран пункт Over Image or Over While Down Image, то элемент должен находиться в состоянии, когда посетитель поместил над ним курсор мыши. Если выбран пункт Down Image, то посе­титель должен щелкнуть по этому элементу ("нажатое" состояние).

В списке Also Set Image выбирается элемент полосы навигации, вид которо­го вы хотите изменить.

В поле ввода То Image File вводится имя файла изображения для выбранно­го в списке Also Set Image элемента. Это изображение будет отображаться, если выбранный в списке элемент находится в "ненажатом" состоянии. Вы также можете щелкнуть кнопку Browse и выбрать нужный файл в диалого­вом окне Select File.

Если вы выбрали пункт Over Image or Over While Down Image в раскрываю­щемся списке When element <название выделенного элемента> is displaying,

То становится доступным также поле ввода If Down, То Image File. В нем задается имя файла изображения, которое будет отображаться, если вы­бранный в списке пункт находится в "нажатом" состоянии. Также здесь дос­тупна кнопка Browse.

Вы можете задать особое поведение сразу для нескольких элементов полосы навигации. Только не забудьте нажать кнопку ОК.

Задание нового содержимого фрейма (Set Text of Frame)

Dreamweaver позволяет вам поместить новое содержимое в любой из фрей­мов текущего набора. Для этого выберите пункт Set Text of Frame в подме­ню Set Text меню поведений. На экране появится диалоговое окно Set Text of Frame, показанное на рис. 13.22.

В раскрывающемся списке Frame выбирается фрейм, в который вы хотите поместить новое содержимое. Само содержимое в виде HTML-кода вводит­ся в область редактирования New HTML. Вы также можете нажать кнопку Get Current HTML, чтобы скопировать в эту область редактирования теку­щее содержимое фрейма, после чего внести необходимые изменения. Если вы включите флажок Preserve Background Color, Web-сценарий, обновляю­щий содержимое фрейма, сохранит цветовые настройки текста и фона;

В противном случае эти настройки пропадут. Задав нужные настройки, на­жмите кнопку ОК.

Вы можете использовать в HTML-коде нового содержимого фрейма любой JavaScript-код, заключив его в фигурные скобки. Например, чтобы вывести посетителю сайта текущую дату, вы можете использовать такой код:

Сегодня {new Date()}

Если же вам понадобится ввести в текст фигурную скобку, предварите ее обратной косой чертой (/{ или /}).

Задание нового содержимого свободно позиционируемого элемента (Set Text of Layer)

Dreamweaver позволяет вам поместить новое содержимое в любой из сво­бодно позиционируемых элементов, имеющихся на странице. Для этого вы­берите пункт Set Text of Layer в подменю Set Text меню поведений. На эк­ране появится диалоговое окно Set Text of Layer, показанное на рис. 13.23.

В раскрывающемся списке Layer выбирается свободный элемент, в который вы хотите поместить новое содержимое. Само содержимое в виде HTML - кода вводится в область редактирования New HTML. Задав нужные на­стройки, нажмите кнопку ОК.

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

Сегодня {new Date()}

Если же вам понадобится ввести в текст фигурную скобку, предварите ее обратной косой чертой (/{ или /}).

Вывод текста в строке статуса окна Web-обозревателя (Set Text of Status Bar)

Dreamweaver также позволяет вам вывести любой текст в строке статуса те­кущего окна Web-обозревателя. Это может быть использовано, например, для показа краткого описания гиперссылки, над которой находится курсор мыши, или просто краткого описания текущей страницы сайта. (Иногда в статусной строке выводится текущее время, "ползущий" справа налево ли­бо "вырастающий" слева направо текст или другие чудеса.) Выберите пункт Set Text of Status Ваг в подменю Set Text меню поведений. На экране по­явится диалоговое окно Set Text of Status Ваг, показанное на рис. 13.24.

Это диалоговое окно содержит единственное поле ввода Message, в котором вводится текст, отображаемый в строке статуса. Введя его, нажмите кноп­ку ОК.

Вы можете использовать в тексте, отображаемом в строке статуса, любой JavaScript-код, заключив его в фигурные скобки. Например, чтобы вывести посетителю сайта текущую дату, вы можете использовать такой код:

Сегодня {new Date()}

Если же вам понадобится ввести в текст фигурную скобку, предварите ее обратной косой чертой (/{ или /}).

Чтобы отобразить в строке статуса текст по умолчанию (он формируется самим Web-обозревателем — обычно надпись "Готово" или адрес гипер­ссылки), задайте в диалоговом окне следующий текст:

{window. defaultStatus}

Свойство defauitstatus объекта window как раз и возвращает этот текст по умолчанию.

Учтите, что помещать посторонний текст в строку статуса окна Web-обо­зревателя сейчас считается дурным тоном. Поэтому используйте эту возмож­ность только тогда, когда без нее действительно не обойтись.

Вывод на экран меню гиперссылок (Show Pop-Up Menu)

В последнее время в моду вошли меню гиперссылок, раскрывающиеся после наведения курсора мыши на какой-либо элемент Web-страницы или щелчка по нему. Родоначальником этой моды, вероятно, были Web-дизайнеры, раз­рабатывавшие сайт фирмы Microsoft, после чего меню "разбежались" по другим сайтам и страницам. Разумеется, разработчики Dreamweaver не мог­ли пройти мимо этого и ввели в свое детище возможность создания такого меню С ПОМОЩЬЮ поведения Show Pop-Up Menu и привязки его к любому элементу страницы.

Внимание!

Перед тем как создать меню гиперссылок, дайте элементу страницы, к которо­му оно привязывается, уникальное имя.

Выберите в меню поведений пункт Show Pop-Up Menu. На экране появится диалоговое окно Show Pop-Up Menu (рис. 13.25).

Чтобы создать новый пункт меню гиперссылок, введите его текст в поле ввода Text. В поле ввода Link вводится интернет-адрес соответствующей
пункту гиперссылки; также вы можете щелкнуть расположенный правее этого поля ввода значок папки и выбрать нужный файл в диалоговом окне Select File. А с помощью раскрывающегося списка Target — задать цель гиперссылки.

Dreamweaver и в этом случае верен своему кредо!.. Если вы введете русский текст в поле ввода Text, он будет искажен до неузнаваемости. Поэтому либо задавайте для пунктов меню гиперссылок только английский текст, либо правь­те сам JavaScript-код вручную.

Вы можете не вводить данные в поле ввода Link В этом случае пункт меню не будет гиперссылкой и, соответственно, не будет реагировать на щелчки мышью. Таким образом вы можете создавать, например, разделители.

Все созданные вами к данному времени пункты меню гиперссылок отобра­жаются в списке, занимающем большую часть вкладки Contents. Этот спи­сок состоит из трех колонок: Text (текст пункта меню), Link (интернет - адрес гиперссылки) и Target (цель гиперссылки). Вы можете выбрать любой пункт в этом списке и выполнить над ним различные манипуляции.

Чтобы создать новый пункт, нажмите кнопку со знаком "плюс", располо­женную над списком пунктов, и задайте в полях ввода Text, Link и раскры­вающемся списке Target нужные данные.

Чтобы изменить какой-либо пункт меню, выберите его в списке пунктов и измените его данные, пользуясь перечисленными выше элементами управ­ления.

Чтобы удалить ненужный пункт, выберите его в списке пунктов и нажмите кнопку со знаком "минус", расположенную над этим списком.

Кнопки | и 4 позволят переместить выбранный вами пункт на позицию вверх или вниз соответственно.

Вы также можете создавать вложенные меню. Для этого создайте пункт основного меню, при щелчке на котором будет открываться подменю, при­чем не вводите ничего в поле ввода Link Далее создайте первый пункт под­меню и поместите его точно перед созданным ранее пунктом. Теперь вам останется нажать кнопку Indent Item (рис. 13.26).

Рис. 13.26. Кнопка Indent Item вкладки Contents диалогового окна Show Pop-Up Menu

Результат показан на рис. 13.27. В данном случае пункт Links станет единст­венным пунктом подменю, раскрывающемся при щелчке на пункте Others.

Как видите, пункт Links отображается с отступом; это говорит о том, что он принадлежит подменю.

Чтобы вернуть пункт из подменю в основное меню или подменю более вы­сокого уровня, нажмите кнопку Outdent Item (рис. 13.28).

Рис. 13.28. Кнопка Outdent Item вкладки Contents диалогового окна Show Pop-Up Menu

Вкладка Appearance диалогового окна Show Pop-Up Menu (рис. 13.29) позво­лит вам настроить внешний вид меню гиперссылок.

Show Pop-Up Menu

Font: I Default Font

*Size:|lO Щшш

Over State:

С помощью раскрывающегося списка, расположенного выше всех осталь­ных элементов управления, вы можете выбрать расположение меню гипер­ссылок: вертикальное (пункт Vertical Menu) или горизонтальное (Horizontal Menu).

В раскрывающемся списке Font выбирается шрифт, которым набран текст пунктов меню. По умолчанию выбран пункт Default Font, обозначающий шрифт, заданный для выбранного вами в окне документа элемента страницы.

В поле ввода Size задается размер шрифта, которым набран текст пунктов меню.

С помощью кнопок-выключателей В и / вы можете сделать шрифт пунктов меню соответственно жирным или курсивным.

Правее кнопок В и / находится набор из трех кнопок-переключателей, за­дающих выравнивание текста пунктов меню. Они задают соответственно левое выравнивание, центрирование и правое выравнивание в порядке сле­ва направо.

Группа селекторов цвета Up State задает цвета пунктов меню в "ненажатом" состоянии. Селектор цвета Text задает цвет текста, а селектор цвета Cell — цвет фона (фактически — цвет фона ячейки таблицы, которая и создает меню гиперссылок). Аналогично, группа селекторов цвета Down State задает цвета пункта меню, над которым посетитель поместил курсор мыши.

Результаты применения заданных вами параметров вы можете увидеть в расположенной в нижней части диалогового окна панели предварительного просмотра.

Вкладка Advanced диалогового окна Show Pop-Up Menu (рис. 13.30) позво­лит вам задать некоторые дополнительные параметры таблицы, создающей меню гиперссылок.

Поля ввода и раскрывающиеся списки Cell Width и Cell Height задают соот­ветственно ширину и высоту ячеек этой таблицы. Если вы выберете в рас­крывающихся списках пункт Automatic, то соответствующий размер будет устанавливаться самим Web-обозревателем. Чтобы самим задать нужный размер, выберите в соответствующем раскрывающемся списке пункт Pixels и введите этот размер в пикселах в поле ввода, расположенное левее.

Поля ввода Cell Padding и Cell Spacing задают соответствующие параметры таблицы.

В поле ввода Text Indent задается величина отступа красной строки в пик­селах.

В поле ввода Menu Delay вводится задержка открытия меню и его подменю в миллисекундах.

Включите флажок Show Borders, если хотите, чтобы границы меню и под­меню были видимы.

В поле ввода Border Width вводится толщина границы меню и подменю в пикселах.

Селектор цвета Border Color задает цвет границы меню и подменю. Также вы можете задать цвет "затемненной" стороны границы в селекторе цвета Shadow, а цвет "освещенной" стороны — в селекторе цвета Highlight.

Результаты применения заданных вами параметров вы также можете уви­деть в расположенной в нижней части диалогового окна панели предвари­тельного просмотра.

Вкладка Position диалогового окна Show Pop-Up Menu (рис. 13.31) позволит вам задать местонахождение меню гиперссылок относительно элемента страницы, к которому оно привязано.

Набор из четырех больших кнопок-переключателей Menu Position позволит вам задать собственно местоположение меню гиперссылок. Эти кнопки за­ставляют меню появляться соответственно в правом нижнем углу, ниже, выше и в правом верхнем углу элемента, к которому оно привязано. (Поря­док перечисления кнопок — слева направо.)

Если вас не устраивает ни одно из четырех предопределенных местополо­жений меню, вы можете задать свое собственное. Для этого введите в поля
ввода X и У соответственно горизонтальную и вертикальную координаты верхнего левого угла меню.

По умолчанию меню гиперссылок убирается с экрана сразу же после того, как посетитель уберет курсор мыши с элемента страницы, к которому оно привязано. Если вы хотите, чтобы оно оставалось на экране, отключите флажок Hide Menu on onMouseOut Event.

После задания всех параметров меню гиперссылок не забудьте нажать кнопку ОК.

Внимание!

При создании на странице меню гиперссылок Dreamweaver помещает в корне­вую папку сайта файл mm_menu. js, содержащий необходимые сценарии, и графическое изображение arrows. gif. Не удаляйте их! И не забудьте поместить их на Web-cepeep.

Показ и скрытие свободно позиционируемых элементов (Show-Hide Layers)

Показ и скрытие свободно позиционируемых элементов страницы можно использовать в разных целях. Например, показывать различные подсказки
при наведении курсора мыши на гиперссылки или графические изображе­ния. Также можно на их основе создавать начальные заставки, показывае­мые посетителю сайта на самой первой его странице. (Почти всегда, одна­ко, для этого используются фильмы форматов Flash, RealMedia или GIF. Но эту традицию стоит нарушить.) И, разумеется, появляющиеся и пропадаю­щие в ответ на действия пользователя элементы страницы незаменимы при создании игр, обучающих пособий и программ, созданных на основе Web - страниц.

Вы уже знаете, как создать на странице свободный элемент, как задать его размеры и сделать невидимым (до поры до времени). Поговорим теперь, как заставить его появляться и исчезать в ответ на события. А для этого Dreamweaver предоставляет поведение show-Hide Layers.

Выберите пункт Show-Hide Layers в меню поведений. На экране появится диалоговое окно Show-Hide Layers (рис. 13.32).

Все имеющиеся на странице свободно позиционируемые элементы пере­числены в списке Named Layers. Вы можете выбрать в этом списке любой из них и задать для него выполняемое действие: показ или скрытие.

Для задания действия же служат три кнопки, расположенные под списком:

□ Show — показывает свободный элемент (при этом в соответствующей строке списка правее его имени появляется надпись "(show)");

□ Hide — скрывает свободный элемент (надпись "(hide)");

□ Default — восстанавливает видимость свободного элемента, заданную при его создании (надпись "(default)").

Выберите необходимый свободный элемент в списке и нажмите нужную кнопку. Чтобы отменить ошибочно выбранное действие, нажмите ту же кнопку еще раз. После этого нажмите кнопку ОК, чтобы сохранить сделан­ные установки.

Останов проигрывания анимации (Stop Timeline)

Поведение stop Timeline позволяет вам остановить проигрывание анима­ции, запущенной ранее поведением Play Timeline. Для его создания вое - пользуйтесь пунктом Stop Timeline подменю Timeline меню поведений. На экране появится диалоговое окно Stop Timeline (рис. 13.33).

Это диалоговое окно содержит только раскрывающийся список Stop Time­line. В этом списке выбирается анимация, которую нужно остановить. Пункт ** ALL TIMELINES ** позволяет остановить проигрывание всех анимаций, созданных на данной странице. После выбора анимации не за­будьте нажать кнопку ОК.

Изменение графического изображения (Swap Image)

Dreamweaver предоставляет вам возможность изменить рисунок, отобра­жающийся в любом имеющемся на странице элементе графического изо­бражения. Для этого используется поведение swap image; специальный Web - сценарий меняет значение атрибута src тега <img>. Это будет полезно во многих случаях.

Выберите пункт Swap Image меню поведений. На экране появится диалого­вое окно Swap Image, показанное на рис. 13.34.

Все имеющиеся на странице графические изображения перечислены в спи­ске 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 в этом случае никак облегчить вашу работу не сможет...