КАТЕГОРИИ:
АстрономияБиологияГеографияДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРиторикаСоциологияСпортСтроительствоТехнологияФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника
Создание поведений
Теперь настало время рассмотреть все поведения, предлагаемые нам Dreamweaver, их создание и все их параметры, которые вы можете задать.
Название поведения в терминологии самого Dreamweaver приведено в скобках, так что вы сразу сможете найти его в меню поведений.
Имейте только в виду, что здесь приводятся не все поведения, поддерживаемые Dreamweaver. Поведения, служащие для поддержки форм и элементов управления, рассмотрим в главе 16.
Вызов JavaScript-кода (CallJavaScript)
Если вы хотите, чтобы в ответ на какое-либо событие, произошедшее в том или ином элементе страницы, выполнялся некий JavaScript-код, создайте для этого элемента поведение Call JavaScript. Для этого вызовите одноименный пункт меню поведений. После этого на экране появится диалоговое окно Call JavaScript,показанное на рис. 13.7.
Рис. 13.7. Диалоговое окно Call JavaScript
В этом окне находится единственное поле ввода JavaScript,в котором вводится нужный программный код. Это может быть, например, вызов какой-либо функции, написанной вами и помещенной в секцию заголовка страницы, вызов метода, принадлежащего какому-либо элементу или объекту, или иной код. Не забудьте только нажать кнопку ОКпосле того, как введете этот код.
Изменение значения свойства (Change Property)
Чтобы изменить в ответ на происшедшее событие значение какого-либо свойства того или иного объекта, воспользуйтесь поведением change Property. Выберите одноименный пункт меню поведений. На экране появится диалоговое окно Change Property(рис. 13.8).
Прежде всего необходимо выбрать тег элемента страницы, свойство которого будет изменено. Это делается с помощью раскрывающегося списка Туре of Object.После этого выберите сам объект в раскрывающемся списке Named Object.Имейте в виду, что в этом списке отображаются имена элементов, чей тег выбран в списке Type of Object;для элементов, не имеющих уникального имени, отображается строка unnamed.Поэтому автор рекомендует для всех элементов страницы, которые вы собираетесь использовать в сценариях, задавать уникальное имя.
Рис. 13.8. Диалоговое окно Change Property
Набор переключателей 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?
А предлагает он нам три возможности:
· остаться на текущей странице;
· перейти на "основную" страницу ("основная" - - в терминологии Dreamweaver);
· перейти на "альтернативную" страницу ("альтернативная" — также в терминологии Dreamweaver).
Рис. 13.9. Диалоговое окно Check Browser
Интернет-адрес "основной" страницы задается в поле ввода 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, MP3 и т. п. Некоторые из модулей расширения поставляются в составе Web-обозревателей, другие же должны покупаться или загружаться из Интернета отдельно.
Если вы используете в своих страницах мультимедийное или иное содержимое, не поддерживаемое ни самим Web-обозревателем, ни одним из поставляемых с ним модулем расширения, но для которого существуют модули расширения, доступные в Сети, вы должны выполнять проверку, установлен ли этот модуль на компьютере посетителя сайта.
Обычно такая проверка выполняется прямо на Web-странице с данными, отображаемыми с помощью модуля расширения. Если такой модуль установлен, данные будут успешно отображены. В противном случае вы можете перенаправить посетителя на другую страницу с разъяснениями и предложением загрузить соответствующий модуль или теми же данными в более "удобоваримом" для Web-обозревателя формате. Как и в случае проверки версии Web-обозревателя, выполнять проверку установленного модуля расширения лучше всего сразу после загрузки страницы, привязав поведение
К СобытиюonLoad тега <BODY>.
Для выполнения такой проверки вы можете воспользоваться поведением check plugin, для чего вам достаточно будет выбрать одноименный пункт меню поведений. После этого на экране появится диалоговое окно Check Piugin,показанное на рис. 13.10.
Рис. 13.10. Диалоговое окно Check Piugin
Группа переключателей Piuginзадает способ, которым выбирается модуль расширения. Если вы включите переключатель Select(он, кстати, включен по умолчанию), то сможете выбрать нужный модуль расширения в раскрывающемся списке, расположенном правее кнопки. В этом списке доступны пять пунктов:
· Flash— модуль расширения Macromedia Flash;
· Shockwave— Macromedia Shockwave;
· LiveAudio— Creative LiveAudio;
· QuickTime— Apple QuickTime;
· Windows Media Player— стандартный проигрыватель мультимедийных файлов, поставляемый в составе Microsoft Windows.
Как видите, в этом списке перечислены не все модули расширения, которые могут быть реально у вас установлены, а только "известные" Dreamweaver. Если же вам нужно проверить "существование" какого-то другого модуля, выберите переключатель Enterи введите имя нужного модуля расширения в поле ввода, расположенное правее этого переключателя.
В поле "ввода If Found, Go To URLвводится интернет-адрес страницы, на которую будет осуществлен переход в случае, если нужный модуль расширения будет найден на компьютере. Если вы хотите, чтобы в этом случае посетитель оставался на текущей странице, оставьте это поле пустым; часто так и делают.
В поле ввода Otherwise, Go To URLвводится интернет-адрес страницы, на которую будет осуществлен переход в случае, если нужного модуля расширения не будет найдено. Если вы хотите, чтобы в этом случае посетитель оставался на текущей странице, оставьте это поле пустым. Обычно, если какого-либо модуля расширения на компьютере клиента нет, выполняется переход на страницу с разъяснениями и предложением установить его, а если такой модуль есть, посетитель остается на той же странице и наблюдает данные, отображаемые с помощью этого модуля.
Бывает так, что Web-сценарий, определяющий присутствие модуля расширения, не работает или работает некорректно. (В частности, так происходит в некоторых версиях Internet Explorer.) В этом случае выполняется автоматический переход на страницу, чей адрес указан в поле ввода Otherwise, Go То URL.Если же вы хотите, чтобы в этом случае всегда осуществлялся переход на страницу, чей интернет-адрес указан в поле ввода If Found, Go To 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, позволит вам задать параметры этого поведения.
Рис. 13.11. Диалоговое окно Control Shockwave or Flash
Прежде всего, выберите соответствующий нужному фильму элемент <EMBED> или <OBJECT> в раскрывающемся списке Movie.Имейте в виду, что в этом меню отображаются имена таких элементов; для тех из них, кто не имеет уникального имени, отображается строка unnamed.Поэтому автор рекомендует для всех фильмов, которыми вы собираетесь управлять из сценариев, задавать уникальное имя.
Выбрав фильм, задайте действия, которое хотите над ним совершить. Это действие задается с помощью набора переключателей Action.Всего переключателей в этом наборе четыре:
· Play— начинает проигрывание фильма;
· Stop— останавливает его;
· Rewind— перематывает его к началу;
· Go to Frame— перематывает его к заданному в расположенном правее поле ввода кадру.
Задав нужные параметры, нажмите кнопку ОК.
Перетаскивание свободно позиционируемого элемента (Drag Layer)
Мы уже говорили об анимированных элементах страницы. Однако вы можете предоставить возможность пользователю самому перетаскивать свободно позиционируемые элементы по странице. Это может быть полезно, если вы делаете интерактивную игру, наподобие головоломки, учебное пособие или полноценную программу в виде Web-страницы.
Поведение Drag Layer, реализующее перетаскивание свободных элементов, привязывается к событию onLoad тега <BODY>. Выберите одноименный пункт меню поведений; на экране появится диалоговое окно Drag Layer,показанное на рис. 13.12.
Рис. 13.12. Диалоговое окно Drag Layer(вкладка Basic)
В раскрывающемся списке 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).
Рис. 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 To Timeline Frame)
При создании анимации на Web-страницах иногда бывает очень полезно "перескочить" на заданный кадр анимационной дорожки. Например, вы можете создать гиперссылку или кнопку, позволяющую посетителю сайта "перемотать" анимацию в начало. Или ваша анимация может состоять из нескольких фрагментов, и вы хотите дать посетителю возможность просмотреть каждый из этих фрагментов отдельно, для чего также предусмотрели несколько кнопок. Да и мало ли может быть случаев, когда такое может понадобиться!
Для таких случаев Dreamweaver предусматривает поведение GO TO Timeline Frame. Выберите одноименный пункт в подменю Timelineменю поведений. На экране появится диалоговое окно Go To Timeline Frame(рис. 13.14).
Рис. 13.14. Диалоговое окно Go To Timeline Frame
Прежде чем задать кадр анимации, нужно выбрать саму анимацию. Это делается в раскрывающемся списке Timeline.Номер же кадра вводится в поле ввода Go to Frame.После этого остается только нажать кнопку ОК.
Вы, наверно, удивились, почему мы не рассмотрели поле ввода Loop ... times.Потерпите, о нем еще будет рассказано, когда мы будем рассматривать специальные случаи создания поведений. Это будет ближе к конт главы.
Переход на другую Web-страницу (Go to URL)
Иногда бывает нужно загрузить в текущем окне Web-обозревателя другую страницу, не дожидаясь, пока это сделает посетитель. Для таких случаев Dreamweaver предлагает поведение GO to URL. Выберите в меню поведений соответствующий пункт; на экране появится диалоговое окно Go To URL,показанное на рис. 13.15.
Рис. 13.15. Диалоговое окно Go To URL
Сам интернет-адрес задается в поле ввода 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.
Рис. 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 Bar— включает или отключает наличие у нового окна строки статуса;
· Menu Bar— включает или отключает наличие у нового окна системного меню;
· Scrollbars as Needed— разрешает или запрещает появление у нового окна полос прокрутки, если его содержимое в нем не помещается;
· Resize Handles— разрешает или запрещает пользователю изменять размеры нового окна.
Имейте в виду, что если вы не задали размеров окна, то новое окно будет иметь случайные размеры и полный набор параметров, перечисленных выше (т. е. оба инструментария, строку статуса и т. д.). Если же вы зададите размеры, то новое окно, наоборот, не будет иметь ни одного из этих атрибутов, поэтому вам самим придется задавать нужные параметры, включая соответствующие флажки группы Attributes.
В поле ввода Window Nameзадается имя создаваемого окна. Впоследствии вы можете использовать это имя, например, при создании поведения GO to URL для вывода в нем новой Web-страницы.
Кнопка ОКдиалогового окна сохраняет сделанные вами установки, а кнопка Cancel— отменяет их.
Проигрывание аудиоклипа (Play Sound)
В свете последних тенденций к наполнению Интернета мультимедийной информацией Dreamweaver предоставляет вам возможность в ответ на какое-либо событие проиграть аудиоклип с помощью поведения Play Sound. Для этого выберите пункт Play Soundменю поведений. После этого на экране появится диалоговое окно Play Sound(рис. 13.17).
Рис. 13.17. Диалоговое окно Play Sound
Это диалоговое окно содержит одно-единственное поле ввода 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).
Рис. 13.18. Диалоговое окно Popup Message
Введите текст предупреждения в область редактирования 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.
Рис. 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, посвященной фреймам и фреймовому дизайну. Как вы помните, при создании полосы навигации Dreamweaver создает также множество сценариев, обеспечивающих смену изображений каждого элемента в ответ на различные события. Эти сценарии и представляют собой поведение 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,то посетитель должен щелкнуть по этому элементу ("нажатое" состояние).
Рис. 13.20. Диалоговое окно Set Nav Bar Image(вкладка Basic)
Рис. 13.21. Диалоговое окно Set Nav Bar Image(вкладка Advanced)
В списке Also Set Imageвыбирается элемент полосы навигации, вид которого вы хотите изменить.
В поле ввода То Image Fileвводится имя файла изображения для выбранного в списке Also Set Imageэлемента. Это изображение будет отображаться, если выбранный в списке элемент находится в "ненажатом" состоянии. Вы также можете щелкнуть кнопку Browseи выбрать нужный файл в диалоговом окне Select File.
Если вы выбрали пункт Over Image or Over While Down Imageв раскрывающемся списке When element <названш выделенного элемента> is displaying,то становится доступным также поле ввода If Down, To Image File. В нем задается имя файла изображения, которое будет отображаться, если выбранный в списке пункт находится в "нажатом" состоянии. Также здесь доступна кнопка Browse.
Вы можете задать особое поведение сразу для нескольких элементов полосы навигации. Только не забудьте нажать кнопку ОК.
Задание нового содержимого фрейма (Set Text of Frame)
Dreamweaver позволяет вам поместить новое содержимое в любой из фреймов текущего набора. Для этого выберите пункт Set Text of Frameв подменю Set Textменю поведений. На экране появится диалоговое окно Set Text of Frame.
В раскрывающемся списке 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
В раскрывающемся списке Layerвыбирается свободный элемент, в который вы хотите поместить новое содержимое. Само содержимое в виде HTML-кода вводится в область редактирования New HTML,Задав нужные настройки, нажмите кнопку ОК.
Вы можете использовать в HTML-коде нового содержимого свободного элемента любой JavaScript-код, заключив его в фигурные скобки. Например, чтобы вывести посетителю сайта текущую дату, вы можете использовать такой код:
Сегодня {new Date()}
Если же вам понадобится ввести в текст фигурную скобку, предварите ее обратной косой чертой (/{ или /}).
Вывод текста в строке статуса окна Web-обозревателя (Set Text of Status Bar)
Dreamweaver также позволяет вам вывести любой текст в строке статуса текущего окна Web-обозревателя. Это может быть использовано, например, для показа краткого описания гиперссылки, над которой находится курсор мыши, или просто краткого описания текущей страницы сайта. (Иногда в статусной строке выводится текущее время, "ползущий" справа налево либо "вырастающий" слева направо текст или другие чудеса.) Выберите пункт Set Text of Status Barв подменю Set Textменю поведений. На экране появится диалоговое окно Set Text of Status Bar,показанное на рис. 13.22.
Рис. 13.22. Диалоговое окно Set Text of Status Bar
Это диалоговое окно содержит единственное поле ввода Message,в котором вводится текст, отображаемый в строке статуса. Введя его, нажмите кнопку ОК.
Вы можете использовать в тексте, отображаемом в строке статуса, любой JavaScript-код, заключив его в фигурные скобки. Например, чтобы вывести посетителю сайта текущую дату, вы можете использовать такой код:
Сегодня {new Date()}
Если же вам понадобится ввести в текст фигурную скобку, предварите ее обратной косой чертой (/{ или /}).
Чтобы отобразить в строке статуса текст по умолчанию (он формируется самим Web-обозревателем -- обычно надпись "Готово" или адрес гиперссылки), задайте в диалоговом окне следующий текст:
{window.defaultStatus}
Свойство defaultStatus объекта window как раз и возвращает этот текст по умолчанию.
Дата добавления: 2014-11-13; просмотров: 193; Мы поможем в написании вашей работы!; Нарушение авторских прав |