Поговоримо про те, як можна зробити сторінки WEB сайту більш «живими». Мова піде про здібності, які дозволяють додати до елементів сторінки різні ефекти. Це, наприклад, може бути підсвічування, переміщення елемента або зміна його шрифту при наведенні на нього покажчика миші, відкритті сторінки та інші події.
У програмці FrontPage є деяка кількість готових компонент, які можна помістити на сторінку і налаштувати необхідним чином для програвання різних динамічних ефектів. Познайомимося з анімаційної кнопкою і маркетинговим банером.
Як і звичайна кнопка в навігаційному меню, анімаційна кнопка містить посилання на іншу сторінку або файл. Але крім основної функції - переходу за посиланням - при натисканні або при наведенні покажчика миші анімаційна кнопка може поміняти колір, показувати на собі малюнок.
Як зробити анімаційну кнопку
Щоб зробити анімаційну кнопку, в режимі редагування сторінки виберіть команду меню Вставка - Змінюється кнопка (Insert - Interactive Button). На дисплеї з'явиться діалог Мінливі кнопки (Interactive Buttons).
Зробити анімаційну кнопку можна також в діалозі Вставка компонента WEB вузла (Insert WEB Component), вибравши компонент Динамічні ефекти (Dynamic Effects) з ефектом Інтерактивна кнопка (Interactive Button).
В поле введення Текст (Text) вкажіть текст, який буде відображатися на кнопці.
Вибравши вкладку Шрифт (Font), можна додатково обрати шрифт для тексту кнопки, а на вкладці Малюнок (Image) можна поміняти розмір і колір кнопки.
Натисніть кнопку ОК. На сторінку буде вставлена анімаційна кнопка.
Щоб перевірити роботу кнопки, збережіть сторінку і запустіть браузер.
Як зробити анімаційну кнопку зі звуком
Змінимо вигляд кнопки при наведенні на неї покажчика миші і відтворимо при цьому звуковий файл.
У режимі редагування сторінки tour1.htm клацніть на зробленої нами кнопці, щоб виділити її.
Оберіть команду меню Формат - Поведінка (Format - Behaviors). На дисплеї з'явиться область завдань Поведінка (Behaviors).
Видалимо дію, яке виробляється при наведенні на кнопку покажчика миші.
Клацніть правою кнопкою миші на 3-му сценарії в переліку Сценарії в тезі (Scripts On Tag) і в показаному контекстному меню виберіть команду Видалити (Delete). Сценарій буде видалений зі списку.
Зверніть увагу, що на минулому кроці клацати мишею потрібно в колонці Дії (Actions), а не Дії (Events).
В Області задач (Task Pane) натисніть кнопку Увіткнути (Insert). На дисплеї з'явиться меню.
В меню Увіткнути (Insert) перераховані можливі дії при появі дії, яке ми вкажемо трохи пізніше.
Оберіть команду меню Підміна зображення (Swap Image). На дисплеї з'явиться діалог Підміна зображення (Swap Image).
Зараз озвучимо кнопку.
В Області задач (Task Pane) натисніть кнопку Увіткнути (Insert) і виберіть з меню дію Відтворення звуку (Play Sound). На дисплеї з'явиться діалог Відтворення звуку (Play Sound).
Нам необхідно поміняти подія, при якому буде відтворюватися звуковий файл.
Наведіть покажчик миші на подію onclick у знову зробленому сценарії і натисніть здався в правій частині поля кнопку у вигляді стрілки. На дисплеї з'явиться спливаюче меню для вибору дії.
В меню для вибору дії оберіть onmouseover (при наведенні покажчика миші). Подія для програвання звуку буде змінено.
Натисніть комбінацію клавіш Ctrl + F1, щоб приховати область завдань.
Щоб перевірити роботу кнопки, збережіть сторінку і запустіть браузер.
Які ще ефекти можна додати на сіраніцу
У мові HTML існує додатковий набір команд і характеристик, що дозволяє додати до елементів сторінки особливі ефекти і зв'язати їх виникнення з певними подіями. Такі ефекти іменуються динамічними ефектами, або DHTML (Dynamic HTML) ефектами.
У режимі редагування клацніть на першому абзаці тексту на сторінці tour2.htm і потім оберіть в меню програми команду Вид - Панелі інструментів - Ефекти DHTML (View - Toolbars - DHTML Effects). На дисплеї з'явиться панель інструментів Ефекти DHTML (DHTML Effects) для опції динамічних ефектів.
У відчиненому списку Вкл (On) на панелі інструментів Ефекти DHTML (DHTML Effects) вкажіть подія, яка буде викликати виникнення ефекту, наприклад Наведення миші (Mouse over).
Інші варіанти подій: Клацання (Click), Подвійне клацання (Double click), Завантаження сторінки (Page load) - перелік залежить від типу обраного елемента. Динамічні ефекти не можуть застосовуватися для тексту, що є частиною переліку.
У відчиненому списку Застосувати (Apply) виберіть один з ефектів, наприклад Форматування (Formatting), якщо раніше ви обрали подія Наведення миші (Mouse over).
Набір ефектів залежить від обраного елемента і дії. Для наведення покажчика миші (mouse over) на текст це може бути Форматування (Formatting), іншими словами зміна шрифту, кольору тексту, висновок рамки і тому подібне Для Завантаження сторінки (Page load) це можуть бути різні варіанти виникнення або зникнення тексту зі сторінки.
У відчиненому списку Налаштування (Choose settings) встановіть характеристики обраного ефекту, наприклад вкажіть Обрати шрифт (Choose font) для ефекту Форматування (Formatting).
Набір характеристик залежить від обраного елемента і ефекту. Наприклад, для ефекту зникнення зі сторінки це може бути напрямок руху.
Якщо ви обрали параметр Обрати шрифт (Choose font), то далі на дисплеї з'явиться діалог Шрифт (Font). Вкажіть в ньому, яким шрифтом буде відображатися обраний шматок тексту при появі даного дії, і натисніть кнопку ОК.
Крім тексту, DHTML ефекти можна використовувати до малюнків, кнопках і інших елементів сторінки. Експериментуйте з різними ефектами, спробуйте обрати різні дії і опції. Для одного елемента сторінки можна встановити відразу кілька динамічних ефектів, якщо вони не суперечать один одному. Для видалення ефекту служить кнопка Видалити ефект (Remove Effect) на панелі інструментів для опції ефектів.
Якщо сторінка містить безліч тексту та інших частин, комфортно виділити елементи з DHTML ефектами, щоб було легше їх знайти під час проектування сторінки.
Закрийте панель інструментів Ефекти DHTML (DHTML Effects), вибравши команду меню Вид - Панелі інструментів - Ефекти DHTML (View - Toolbars - DHTML Effects).
При використанні особливих ефектів слід пам'ятати, що не всі браузери здатні показувати їх коректно. Якщо ви орієнтуєтеся на загальне відвідування вашого WEB сайту, потрібно обов'язково перевіряти коректність роботи всіх використовуваних ефектів в найбільш поширених браузерах Internet Explorer. Opera і Netscape.
Додаткова інформація по темі
Детальна інструкція про те, яким чином здійснити передачу значення кнопки з форми