Файл: Использование сложных элементов при оформлении Web.doc

11. Из списка Цвет эффекта (Effect color) выберите цвет, который будет использоваться в создании эффекта.

Замечание

В оформлении изменяющейся кнопки можно применять графическое изображение и звук. Для использования этих возможностей в диалоговом окне Свойства меняющейся кнопки нажмите кнопку Другие (Custom). Откроется диалоговое окно Другие эффекты(рис. 20.8), содержащее две области. Верхняя , область Воспроизведение звука (Play sound) содержит два поля Щелчок (On click) и Наведение (On lover), в которых можно указать звуковые файлы, воспроизводимые, соответственно, при нажатии кнопки и при установке на нее курсора. Область Произвольный рисунок (Custom) позволяет задать графические изображения, используемые для оформления кнопки. Поле Кнопка (Button) содержит наименование графического файла, размещенного на кнопке. Чтобы указать изображение, которое будет появляться на кнопке при установке на нее курсора, используется поле Наведение (On lover).

12. Завершив настройку параметров кнопки, нажмите кнопку ОК для закрытия диалогового окна.

Рис. 20.8. Диалоговое окно Другие эффекты, предназначенное для задания дополнительных параметров изменяющейся кнопки

13. Аналогичным образом разместите на Web-странице остальные 6 кнопок. При оформлении кнопок можете использовать не только различные эффекты из спискаЭффект (Effect), но и разное цветовое оформление, комбинируя цвета из списков Цвет кнопки (Button color) и Цвет эффекта (Effect color). 14. Загрузите в обозреватель страницу с размещенными на ней кнопками или перейдите в режим просмотра страницы, выбрав вкладку Просмотр (Preview), находящуюся в нижней части рабочей области. 15. Поочередно устанавливая курсор на разные кнопки, посмотрите, как они выглядят в зависимости от примененного к ним эффекта. Например, при установке курсора на кнопку, к которой применен эффект Заливка (Color fill), кнопка окрашивается в цвет, заданный с помощью списка Цвет эффекта (Effect color). Посмотрите, как выглядит кнопка с эффектом Свечение в центре (Glow). В центре кнопки располагаются концентрические окружности разной насыщенности, заданные с помощью списка Цвет эффекта.

Анимация на Web-страницах

Программа FrontPage позволяет при оформлении Web-страниц использовать различные анимационные эффекты, заимствованные из программы PowerPoint, входящей в программный пакет Microsoft Office, предназначенной для подготовки презентаций.

Используя объект Бегущая строка (Marquee), можно заставить перемещаться строку текста в отведенной для него области. А с помощью анимации можно "оживлять" целые абзацы и задавать им различные направления для их перемещения.

При создании эффектов анимации используется панель инструментов DHTML Effects(рис. 20.9). Для ее размещения в главном окне программы выполните одно из следующих действий:

• В меню Формат (Format) выберите команду Эффекты DHTML (Dynamic HTML Effects)

• В меню Вид (View) выберите команду Панели инструментов (Toolbars) и в открывшемся меню — опцию Эффекты DHTML (DHTML Effects)

Рис. 20.9. Панель инструментов Эффекты DHTML

На панели инструментов расположены три списка. Список Вкл (Оn) содержит события, при наступлении которых выполняется динамический HTML-эффект. В табл. 20.1 перечислены возможные события, входящие в этот список.

Таблица 20.1. События, при наступлении которых применяется DHTML-эффект

Список Применить (Apply) панели инструментов Эффекты DHTML содержит перечень анимационных действий (табл. 20.2), выполняемых объектами. Термин "объект" подразумевает не только фрагмент текста. Эффекты анимации могут быть применены, например, к графическим изображениям.

Таблица 20.2. Анимационные действия, применяемые к объектам

Направление движения объекта задается с помощью списка Эффект (Effect), содержащего большое количество значений. Объект может перемещаться по разнообразным направлениям: диагоналям страницы, справа налево, слева направо, из центра, справа, слева, сверху, снизу и т. д.

Для применения анимационного эффекта необходимо выделить объект и, используя значения списков панели инструментов, выбрать необходимые значения.

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

Рассмотрим несколько примеров использования на Web-страницах анимационных эффектов. Разместим на странице заголовок, отдельные слова которого будут как бы падать на страницу при ее загрузке. Для создания этого эффекта выполните следующие действия:

1. Откройте в режиме редактирования Web-страницу, для которой создаете анимацию. 2. Разместите в ней заголовок. 3. Для того чтобы панель инструментов Эффекты DHTML появилась на экране, выберите в меню Формат (Format) команду Эффекты DHTML (Dynamic HTML Effects). 4. Установите курсор мыши на заголовок, для которого задаете эффект анимации. 5. Из списка Вкл (On) панели инструментов выберите значение Загрузка страницы(Page load), указывающее, что анимационное действие будет выполняться при загрузке страницы. 6. Из списка Применить (Apply) выберите значение Падение слов (Drop in by word), указывающее, что заголовок будет формироваться из слов, падающих последовательно сверху. 7. Перейдите в режим просмотра Web-страницы, выбрав вкладку Просмотр (Preview), расположенную в нижней части рабочей области программы FrontPage, и посмотрите, как формируется заголовок страницы (рис. 20.10).

Рис. 20.10. Формирование заголовка с использованием эффекта падающих сверху слов

Ранее мы разместили на Web-странице бегущую строку. Теперь рассмотрим пример удаления ее с экрана в режиме просмотра, используя для этого эффект анимации.

1. Откройте в режиме редактирования страницу, содержащую бегущую строку. 2. Разместите на экране панель инструментов Эффекты DHTML, выбрав в меню Форматкоманду Эффекты DHTML (Dynamic HTML Effects). 3. Установите курсор мыши на текст бегущей строки. 4. Из списка Вкл (On) панели инструментов выберите значение Click (Щелчок мыши), указывающее, что анимационное действие будет выполняться при щелчке кнопкой мыши. 5. Из списка Применить (Apply) выберите значение Вылет (Fly out), указывающее, что объект покинет Web-страницу. 6. Используя список Эффект (Effect), можно указать направление, в котором объект покинет страницу. Выберите, например, Наверх (То top).

Замечание

При установке курсора на объект, к которому применен динамический HTML, под курсором появляется подсказка с указанием наименования эффекта. На рис. 20.11 представлена бегущая строка, к которой применен эффект Динамический эффект: Вылет Наверх.   

Рис. 20.11. Бегущая строка с примененным к ней эффектом анимации Динамический эффект: Вылет Наверх

7. Перейдите в режим просмотра Web-страницы, выбрав вкладку Просмотр (Preview), расположенную в нижней части рабочей области программы FrontPage или загрузите страницу в обозреватель, выбрав в меню Файл (File) команду Просмотр в обозревателе (Preview in Browser). 8. При загрузке страницы начинает формироваться текст заголовка Адреса магазинов фирмы "Книжный мир", для которого мы задали динамический эффект в предыдущем примере. Слова по одному падают сверху в строку, пока не образуют весь текст. Одновременно с этим по странице движется бегущая строка с текстом Мы рады приветствовать Вас!. Щелкните в любом месте бегущей строки. Она начинает медленно двигаться вверх и исчезает с экрана.

Совет

Для удаления DHTML-эффекта установите курсор на объект и нажмите кнопку Удалить эффект (Remove Effect) на панели инструментов Эффекты DHT