Материал: Використання складних елементів при оформленні Web

Анімація на Web-страницах|

Програма FrontPage| дозволяє при оформленні Web-страниц| використовувати різні анімаційні ефекти, запозичені з програми PowerPoint|, що входить в програмний пакет Microsoft| Office|, призначеною для підготовки презентацій.

Використовуючи об'єкт рядок (Marquee|), що Біжить, можна змусити переміщатися рядок тексту у відведеній для нього області. А за допомогою анімації можна "пожвавити" цілі абзаци і задавати їм різні напрями для їх переміщення.

При створенні ефектів анімації використовується панель інструментів DHTML| Effects|(мал. 20.9). Для її розміщення в головному вікні програми виконаєте одну з наступних дій:

• У меню Формат (Format|) виберіть команду Ефекти DHTML| (Dynamic| HTML| Effects|)

• У меню Вигляд (View|) виберіть команду Панелі інструментів (Toolbars|) і в меню, що відкрилося, — опцію Ефекти DHTML| (DHTML| Effects|)

Мал. 20.9. Панель інструментів Ефекти DHTML|

На панелі інструментів розташовано три списки. Список Вкл (Оn) містить події, при настанні яких виконується динамічний HTML-эффект|. У табл. 20.1 перераховані можливі події, що входять в цей список.

Таблиця 20.1. Події, при настанні яких застосовується DHTML-эффект|

Список Застосувати (Apply|) панелі інструментів Еффекти DHTML| містить перелік анімаційних дій (табл. 20.2), що виконуються об'єктами. Термін "об'єкт" має на увазі не тільки фрагмент тексту. Ефекти анімації можуть бути застосовані, наприклад, до графічних зображень.

Таблиця 20.2. Анімаційні дії, вживані до об'єктів

Напрям руху об'єкту задається за допомогою списку Ефект (Effect|), що містить велику кількість значень. Об'єкт може переміщатися по різноманітних напрямах: діагоналям сторінки, справа наліво, зліва направо, з центру, справа, зліва, зверху, знизу і так далі

Для застосування анімаційного ефекту необхідно виділити об'єкт і, використовуючи значення списків панелі інструментів, вибрати необхідні значення.

Комбінуючи значення всіх трьох списків панелі інструментів Ефекти DHTML|, ви зможете сформувати найрізноманітніші ефекти. При завантаженні Web-страницы| текст влітатиме по спирачи| або хвилеподібно, в'їжджати зверху, знизу, справа, зліва або по діагоналі з різних кутів сторінки. Розмір розміщуваного тексту можна збільшувати або зменшувати. Окремі слова тексту можуть падати у формовану фразу зверху або упливати, рухаючись хвилеподібно. Спробуйте різні варіанти і підберіть те, що вам сподобається і не дратуватиме відвідувача вашої Web-страницы|.

Розглянемо декілька прикладів використання на Web-страницах| анімаційних ефектів. Розмістимо на сторінці заголовок, окремі слова якого як би падатимуть на сторінку при її завантаженні. Для створення цього ефекту виконаєте наступні дії:

1. Відкрийте в режимі редагування Web-страницу|, для якої створюєте анімацію. 2. Розмістите в ній заголовок. 3. Для того, щоб панель інструментів Еффекти DHTML| з'явилася на екрані, виберіть в меню Формат (Format|) команду Ефекти DHTML| (Dynamic| HTML| Effects|). 4. Встановите курсор миші на заголовок, для якого задаєте ефект анімації. 5. Із списку Вкл (On|) панелі інструментів виберіть значення Завантаження сторінки(Page| load|), вказуюче, що анімаційна дія виконуватиметься при завантаженні сторінки. 6. Із списку Застосувати (Apply|) виберіть значення Падіння слів (Drop| in| by| word|), вказуюче, що заголовок формуватиметься із слів, падаючих послідовно зверху. 7. Перейдіть в режим проглядання Web-страницы|, вибравши вкладку Перегляд (Preview|), розташовану в нижній частині робочої області програми FrontPage|, і подивитеся, як формується заголовок сторінки (мал. 20.10).

Мал. 20.10. Формування заголовка з використанням ефекту падаючих зверху слів

Раніше ми розмістили на Web-странице| рядок, що біжить. Тепер розглянемо приклад видалення її з екрану в режимі перегляду, використовуючи для цього ефект анімації.

1. Відкрийте в режимі редагування сторінку, що містить рядок, що біжить. 2. Розмістите на екрані панель інструментів Ефекти DHTML|, вибравши в меню Форматкоманду Ефекти DHTML| (Dynamic| HTML| Effects|). 3. Встановите курсор миші на текст рядка, що біжить. 4. Із списку Вкл (On|) панелі інструментів виберіть значення Click| (Клацання миші), вказуюче, що анімаційна дія виконуватиметься при клацанні кнопкою миші. 5. Із списку Застосувати (Apply|) виберіть значення Виліт (Fly| out|), вказуюче, що об'єкт покине Web-страницу|. 6. Використовуючи список Ефект (Effect|), можна вказати напрям, в якому об'єкт покине сторінку. Виберіть, наприклад, Вгору (То top|).

Зауваження

При установці курсора на об'єкт, до якого застосований динамічний HTML|, під курсором з'являється підказка з вказівкою найменування ефекту. На мал. 20.11 представлений рядок, що біжить, до якого застосований ефект Динамічний ефект: Виліт Вгору. 

Мал. 20.11. Рядок, що біжить, із застосованим до неї ефектом анімації Динамічний ефект: Виліт Вгору

7. Перейдіть в режим проглядання Web-страницы|, вибравши вкладку Перегляд (Preview|), розташовану в нижній частині робочої області програми FrontPage| або завантажите сторінку в оглядач, вибравши в меню Файл (File|) команду Перегляд в оглядачі (Preview| in| Browser|). 8. При завантаженні сторінки починає формуватися текст заголовка Адреси магазинів фірми "Книжковий мир", для якого ми задали динамічний ефект в попередньому прикладі. Слова поодинці падають зверху в рядок, поки не утворюють весь текст. Одночасно з цим по сторінці рухається рядок, що біжить, з текстом Ми раді вітати Вас!. Клацніть в будь-якому місці рядка, що біжить. Вона починає поволі рухатися вгору і зникає з екрану.

Використання анімації при зміні сторінок

Програма FrontPage| дозволяє використовувати анімаційні ефекти при переході між сторінками Web-узла|. Для завдання цього ефекту використовується діалогове окноСмена| сторінок (Page| Transitions|) (мал. 20.12), таке, що відкривається при виборі однойменної команди меню Формат (Format|).

Мал. 20.12. Діалогове вікно Зміна сторінок

Список Подію (Event|) даного діалогового вікна містить перелік подій (табл. 20.3), при настанні яких застосовуються анімаційні ефекти.

Таблиця 20.3. Події, при настанні яких виконуються анімаційні ефекти переходу між сторінками

У полі Тривалість (Duration|) можна задати тривалість створюваного ефекту (у секундах).

Попередження

Ми вже не раз говорили про те, що одне з головних завдань, що стоять перед розробником Web-узла|, — добитися того, щоб Web-страницы| завантажувалися швидко. Отже не збільшуйте час завантаження, вводячи великі значення в поле Тривалість.

Для вибору ефекту переходу використовується список Ефект (Transitions| Effect|), що містить безліч елементів.

Для сторінки, до якої застосований ефект переходу, на вкладці Інші (Custom|) діалогового вікна Властивості сторінки (Page| Properties|) з'являється відповідний запис з вказівкою найменування події і його параметрами. На мал. 20.13 показано діалогове вікно властивостей сторінки, при виході з якою використовуватиметься эффектРастворение| тривалістю 5 секунд. Використовуючи кнопки Додати (Add|),Изменить| (Modify|) і Видалити (Remove|), можна додавати в цей список нові ефекти, модифікувати встановлені або видаляти ефекти, від яких вирішили відмовитися.

Мал. 20.13. Вкладка Інші діалогового вікна Властивості сторінки містить параметри ефекту переходу

Списки, що згортаються

Щоб пожвавити Web-страницы|, не обов'язково використовувати анімацію або складні DHTML-эффекты|. Деколи достатньо невеликої дрібниці, і потрібний ефект буде досягнутий.

Розглянемо використання на Web-страницах| списків, що згортаються, створюються на основі списків, що мають багаторівневу структуру. При завантаженні сторінки, що містить багаторівневі списки, створені з використанням даної властивості, на екрані відображаються тільки елементи першого рівня. Для розкриття елементів наступного рівня необхідно встановити курсор на елемент попереднього рівня.

Щоб зробити список таким, що згортається, виконаєте наступні дії:

1. Створіть на Web-странице| багаторівневий список. 2. Виділіть його, натисніть праву кнопку миші і виберіть команду контекстного менюСвойства| списку (List| Properties|). Відкривається однойменне діалогове вікно (мал. 20.14). 3. У нижній частині діалогового вікна розташовані прапорці Включити структури (Enable| Collapsible| Outlines|), що згортаються, і Спочатку скрутити (Initially| Collapsed|). Встановите їх.  4. Натисніть кнопку ОК для закриття диштогового| вікна Властивості списку. 5. Перейдіть в режим попереднього перегляду сторінки, вибравши вкладку Перегляд(Preview|) в нижній частині робочої області. На екрані відображаються тільки елементи верхнього рівня многоуровнего| списку. Клацніть мишею на першому елементі списку. Список розкривається, показуючи елементи другого рівня вибраного елементу (мал. 20.15). При повторному клацанні миші список згортається.

Рада

Для видалення DHTML-эффекта| встановіть курсор на об'єкт і натисніть кнопку Видалити ефект (Remove| Effect|) на панелі інструментів Ефекти DHT|

Оголошення на сторінці

Оголошенням на сторінці називається спеціальним чином оформлений заголовок сторінки. Цей елемент сторінки також називають банером. За умовчанням при створенні банера передбачається, що як заголовок використовуватиметься ім'я сторінки, розташоване на прямокутнику в структурній схемі Web-узла|.

Ознайомимося з банером на простому прикладі, для створення якого виконаєте наступні дії:

1. Створіть новий односторінковий тестовий Web-узел|. Для цього на панелі Створення сторінки або веб-вузла (New| Page| or| Web|) виберіть команду Шаблони веб-вузлів(Web| Site| Templates|), а потім в діалоговому вікні , що відкрилося, Шаблони веб-узловдважды| клацніть мишею на значку Односторінковий веб-вузол (One| Page| Web|). 2. Для переходу в режим проглядання структури нового вузла натисніть кнопку Переходи(Navigation|) на панелі режимів Уявлення (Views|). 3. В центрі структурної схеми розташований прямокутник, що умовно позначає домашню сторінку нашого односторінкового Web-узла|. Встановите на нього курсор, клацніть на нім правою кнопкою миші і виберіть в контекстному меню командуПереименовать| (Rename|). 4. Введіть нову назву сторінки (наприклад, Заголовок сторінки), і натисніть клавішу <Enter|> (мал. 20.16). 5. Перейдіть в режим редагування сторінки. Для цього двічі клацніть на найменуванні сторінки в області Список тек (Folder| List|) або на прямокутнику, що позначає сторінку.

Мал. 20.16. Зміна назви сторінки в режимі Переходи

6. Щоб розмістити банер на сторінці, виберіть в меню Вставка (Insert|) командуОбъявление| на сторінці (Page| Banner|). Відкривається діалогове вікно Властивості оголошення на сторінці (Page| Banner| Properties|) (мал. 20.17), в полі Текст оголошення (Page| banner|) якого вже міститься текст Заголовок сторінки, введений нами в режимі Переходи (Navigation|).

Мал. 20.17. Діалогове вікно Властивості оголошення на сторінці

7. Введіть в це поле іншу назву заголовка (наприклад, Новий заголовок сторінки), і натисніть кнопку ОК. 8. Перейдіть в режим Переходи і переконайтеся, що нове, введене в діалоговому окнеСвойства| оголошення на сторінці значення заголовка відображається в центрі прямокутника, що позначає цю сторінку.

Зауваження

Введена нами назва заголовка достатня довге, щоб поміститися повністю в прямокутнику. Встановите на нього курсор. Повне ім'я сторінки буде показано у вигляді спливаючої підказки під курсором.

Якщо пізніше ви захочете змінити текст банера:

1. Відкрийте діалогове вікно Властивості оголошення на сторінці, використовуване також при створенні банера. Для цього встановите курсор на банер і виконаєте одну з наступних дій:

• Двічі клацніть мишею

• Клацніть правою кнопкою миші і виберіть в контекстному меню команду Властивості оголошення на сторінці

• Натисніть комбінацію клавіш <Alt>+<Enter|>

2. Введіть в поле Текст оголошення (Page| banner|) новий заголовок і натисніть кнопку ОК. Якщо ви тепер перейдете в режим переходів, то побачите, що змінилося найменування сторінки. Застосовуючи теми для оформлення Web-страницы|, можна зробити вашу сторінку привабливішою, розмістивши в банерах графічні зображення. На мал. 20.18 представлена наша тестова сторінка, оформлена з I застосуванням однієї з тем, пропонованих програмою FrontPage|.

Мал. 20.18. Використання теми в оформленні банера