Вправа 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.  Перемістите покажчик миші на зображення тигра. Воно зміниться на малюнок корови. Приберіть покажчик убік — тигр повернеться на колишнє місце. Такий прийом зміни зображення часто використовується для підсвічування малюнків з гіперпосиланнями. Це допомагає користувачеві відрізняти малюнки, додані як оформлення, від тих, які дозволяють дістати доступ до інших ресурсів Інтернету.