Упражнение 9. Динамические эффекты
Во всех предыдущих упражнениях, за исключением последнего, вы строили статические web-страницы. Их содержимое не менялось в процессе просмотра. Frontpage позволяет создавать и динамические страницы, которые не просто отображают данные, но и реагируют на определенные действия пользователя, например на перемещение указателя мыши.
Рис. 24.17. Панель динамических эффектов
Чтобы наделить домашнюю страницу узла Frames новыми возможностями, выполните следующие шаги.
- Откройте web-узел Frames, перейдите в режим просмотра Страница и откройте в нем файл index, htm.
- Щелкните правой кнопкой мыши на любой панели инструментов и выберите в контекстном меню пункт Эффекты DHTML (DHTML Effects). Появится панель инструментов динамических эффектов, показанная на рис. 24.17.
- Щелчком выделите изображение тигра в верхнем кадре страницы.
- В раскрывающемся списке Выбор события (Choose An Event) выберите пункт Наведение мыши (Mouse Over).
- В списке Выбор эффекта (Choose An Effect) выберите пункт Замена рисунка (Swap Picture).
- В списке Настройка (Effect Settings) щелкните на пункте Выбор рисунка (Choose Picture). Откроется окно диалога Рисунок.
- В списке файлов найдите графический файл в формате GIF, например, созданный в упражнении 1 файл logo2.gif, содержащий Изображение коровы, (С:/Мои документы /MyWebs/Corporate/images/logo2.gif) и щелкните на кнопке Open (Открыть). Назначенный эффект будет инициировать смену изображения тигра на рисунок коровы в момент перемещения указателя на изображение. Когда пользователь уберет указатель в сторону, на странице вновь появится тигр.
Рис. 24.18. Настройка динамических эффектов
Теперь давайте добавим эффект, который будет воспроизводиться автоматически после загрузки web-страницы.
- Выделите в правом кадре фразу Товары компании Геркулес отличаются высоким качеством (рис. 24.18).
- В раскрывающемся списке Выбор события выберите пункт Загрузка страницы (Page Load).
- В раскрывающемся списке Выбор эффекта выберите пункт Падение по одному слову (Drop In By Word).
- Щелчком на кнопке Сохранить панели инструментов сохраните выполненные изменения.
- Чтобы протестировать добавленные эффекты, щелкните на корешке Просмотр. Сразу после загрузки страницы с кадрами строка, выделенная на шаге 8, отсутствует. Ее слова появляются позже, вылетая по очереди сверху.
- Переместите указатель мыши на изображение тигра. Оно сменится на рисунок коровы. Уберите указатель в сторону — тигр вернется на прежнее место. Такой прием смены изображения часто используется для подсвечивания рисунков с гиперссылками. Это помогает пользователю отличать рисунки, добавленные в качестве оформления, от тех, которые позволяют получить доступ к другим ресурсам Интернета.