Упражнение 9. Динамические эффекты

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

Рис. 24.17. Панель динамических эффектов

Чтобы наделить домашнюю страницу узла Frames новыми возможностями, выполните следующие шаги.

1. Откройте web-узел Frames, перейдите в режим просмотра Страница и откройте в нем файл index, htm.

2. Щелкните правой кнопкой мыши на любой панели инструментов и выберите в контекстном меню пункт Эффекты DHTML (DHTML Effects). Появится панель инструментов динамических эффектов, показанная на рис. 24.17.

3.  Щелчком выделите изображение тигра в верхнем кадре страницы.

4. В раскрывающемся списке Выбор события (Choose An Event) выберите пункт Наведение мыши (Mouse Over).

5. В списке Выбор эффекта (Choose An Effect) выберите пункт Замена рисунка (Swap Picture).

6. В списке Настройка (Effect Settings) щелкните на пункте Выбор рисунка (Choose Picture). Откроется окно диалога Рисунок.

7.  В списке файлов найдите графический файл в формате GIF, например, созданный в упражнении 1 файл logo2.gif, содержащий Изображение коровы, (С:/Мои документы /MyWebs/Corporate/images/logo2.gif) и щелкните на кнопке Open (Открыть). Назначенный эффект будет инициировать смену изображения тигра на рисунок коровы в момент перемещения указателя на изображение. Когда пользователь уберет указатель в сторону, на странице вновь появится тигр.

Рис. 24.18. Настройка динамических эффектов

Теперь давайте добавим эффект, который будет воспроизводиться автоматически после загрузки web-страницы.

8. Выделите в правом кадре фразу Товары компании Геркулес отличаются высоким качеством (рис. 24.18).

9.  В раскрывающемся списке Выбор события выберите пункт Загрузка страницы (Page Load).

10.  В раскрывающемся списке Выбор эффекта выберите пункт Падение по одному слову (Drop In By Word).

11. Щелчком на кнопке Сохранить панели инструментов сохраните выполненные изменения.

12. Чтобы протестировать добавленные эффекты, щелкните на корешке Просмотр. Сразу после загрузки страницы с кадрами строка, выделенная на шаге 8, отсутствует. Ее слова появляются позже, вылетая по очереди сверху.

13.  Переместите указатель мыши на изображение тигра. Оно сменится на рисунок коровы. Уберите указатель в сторону — тигр вернется на прежнее место. Такой прием смены изображения часто используется для подсвечивания рисунков с гиперссылками. Это помогает пользователю отличать рисунки, добавленные в качестве оформления, от тех, которые позволяют получить доступ к другим ресурсам Интернета.