Змінні кнопки

При створенні гіперпосилань можна використовувати кнопки, які змінюватимуть свій колір при установці на них курсора. Розмістимо на сторінці нашого тестового Web-узла| 7 кнопок по кількості створюваних програмою FrontPage| ефектів і подивимося, як ці кнопки виглядатимуть при прогляданні сторінки в оглядачі

1. Відкрийте в режимі редагування Web-страницу|, на якій хочете розмістити кнопки. 2. Встановите курсор в місце передбачуваного розташування першої кнопки. 3. У меню Вставка (Insert|) виберіть команду Веб-сервер-компонент (Web| Component|). Відкривається діалогове вікно Вставка компоненту веб-вузла (Insert| Web| Component|) (див. мал. 20.1). 4. Із списку компонентів виберіть значення Динамічні ефекти (Dynamic| Effects|). При цьому в правому списку вікна відображаються динамічні об'єкти програми FrontPage|. 5. З правого списку виберіть значення Змінна кнопка (Hover| Button|) і натисніть кнопку Готово. Відкриється діалогове вікно Властивості змінної кнопки (Hover| Button| Properties|) (мал. 20.6), що дозволяє визначити параметри кнопки, що розміщується на Web-странице|.

Мал. 20.6. Діалогове вікно Властивості змінної кнопки

6. Введіть в поле Текст кнопки (Button| text|) текст, що поміщається на кнопку (наприклад, назва сторінки, на яку здійснюється перехід при натисненні на дану кнопку). 7. Щоб встановити гіперпосилання, в полі Посилання на (Link| to|) введіть адресу URL| або натисніть кнопку Огляд (Browse|) і в діалоговому вікні , що відкрилося, Вибір гіперпосилання для змінної кнопки (Select| Hover| Button| Hyperlink|) (мал. 20.7) виберіть об'єкт (Web-страницу|, закладку, файл і т. д.), на який створюється посилання. Потім натисніть кнопку ОК. 8. Використовуючи список , що розкривається, Колір кнопки (Button| color|), задайте первинний колір кнопки.

Мал. 20.7. Діалогове вікно Вибір гіперпосилання для змінної кнопки

9. Список Ефект (Effect|) містить 7 значень, що визначають ефекти колірного оформлення, надаються програмою FrontPage|. Виберіть із списку перше значення Заливка (Color| fill|).

10. Використовуючи поля Ширина (Width|) і Висота (Height|), введіть розмір кнопки (у пікселах).

Рада

Для зміни розміру кнопки можна також використовувати маркери виділення, що з'являються, якщо на ній клацнути кнопкою миші.

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|). В центрі кнопки розташовуються концентричні кола різної насиченості, задані за допомогою списку Колір ефекту.