WEB - дизайн / Лабораторні роботи / Лабораторна робота 13

Лабораторна робота № 13

Створення динамічних елементів на веб-сторінках

Мета роботи: навчитися використовувати можливості програми FrontPage з оформлення веб-сторінок та вставляння динамічних елементів різних типів.

Порядок роботи

1. Створіть нову сторінку вашого сайту. Збережіть її під назвою forma.htm.

2. На даній сторінці розробіть форму за допомогою стандартних елементів (6-7 елементів). Тема форми повинна відповідати темі вашого сайту.

3. Вибравши команду Файл • Открыть узел (Файл • Відкрити вузол), відкрийте у FrontPage сайт , створений по варіанту у попередній лабораторній роботі.

4. На панелі інструментів Стандартная (Стандартна) клацніть стрілку праворуч від кнопки Создание новой обычной страницы (Створення нової звичайної сторінки), виберіть у меню коман­ду Страница (Сторінка), в діалоговому вікні, що відкриється, перейдіть на вкладку Таблицы стилей (Таблиці стилів) і виберіть на ній один із шаблонів таблиць стилів. Після клацання кнопки ОК буде створено новий документ — таблицю каскадних стилів, яка містить опис стилів для форматування вмісту сторінок сайту. Збережіть його у папці поточного веб-сайту (файл матиме розширення .css).

5. Підключіть створену таблицю стилів до всіх сторінок сайту. Для цього відкрийте будь-яку з його сторінок, виберіть у меню Формат (Формат) команду Связи с таблицями стилей (Зв'язки з таблицями стилів) і в діалоговому вікні, що відкриється, виберіть перемикач все страницы (всі сторінки). Клацніть кнопку Добавить (Додати), виберіть у діалоговому вікні створену таблицю стилів і закрийте обидва вікна, клацнувши кнопку ОК. У діалоговому вікні Подтверждение обновления связей с таблицями стилей (Підтвердження оновлення зв'язків з таблицями стилів) клацніть кнопку Продолжить (Продовжити). Перегляньте сторінки сайту. Оскільки задана опція все стра­ницы (всі сторінки), то до всіх елементів усіх веб-сторінок буде застосовано форматування відповідно до стилів таблиці.

6. Відкрийте будь-яку сторінку сайту в режимі перегляду HTML-коду. Уважно переглянувши код, ви побачите рядок із тегом <LINK>, в якому зазначена назва таблиці каскадних стилів.

7. Відкрийте сторінку index.htm і виділіть заголовок або інший текст для застосування ефекту анімації. За допомогою команди Вид • Панели инструментов • Эффекты DHTML (Вигляд • Панелі інструментів • Ефекти DHTML) відобразіть панель інструментів Эффекты DHTML (Ефекти DHTML) (див. рис. 1). У списку Вкл (Увімкнути) цієї панелі виберіть подію, після настання якої буде запущено ефект анімації:

Рис.1

• Щелчок (Клацання) — клацання мишею на виділеному фрагменті;

• Двойной щелчок (Подвійне клацання) — подвійне клацання мишею;

• Наведение мыши (Наведення миші) — наведення вказівника миші на виділений фрагмент;

• Загрузка страницы (Завантаження сторінки) — завантаження веб-сторінки.

8. У списку Применить (Застосувати) задайте анімаційну дію, що відбуватиметься після настання вибраної події. Зокрема, для події Загрузка страницы (Завантаження сторінки) це може бути:

• Падение (Падіння) — об'єкт падає згори;

• Пружина (Пружина) — об'єкт переміщується з невеликими коливаннями;

• Влет (Влітання) — об'єкт влітає;

• Скачок (Стрибок) — об'єкт переміщується стрибками;

• Виток (Спіраль) — об'єкт рухається по спіралі;

• Волна (Хвиля) — об'єкт рухається коливними рухами;

• Появление (Поява) — об'єкт з'являється;

• Масштаб (Масштаб) — об'єкт змінює розміри.

9. У списку Эффект (Ефект) задайте параметри дії.

10. Збережіть результати та перевірте роботу сторінки у браузері, вибравши команду Файл • Просмотреть в обозревателе (Файл • Переглянути у браузері).

11. Проексперементуйте з іншими ефектами та виберіть той, що вам довподоби.

12. Відкрийте сторінку index.htm. Виконайте команду Формат • Смена страниц (Формат • Зміна сторінок). У діалоговому вікні, що відкриється (див. рис. 2), виберіть подію, з настанням якої виконуватимуться анімаційні ефекти переходу між сторінками:

Рис. 2

• Вход на страницу (Вхід на сторінку) — під час відкривання сторінки;

• Выход со страницы (Вихід зі сторінки) — під час виходу зі сторінки;

• Вход на узел (Вхід на вузол) — під час входу на сайт;

• Выход с узла (Вихід із вузла) — під час переходу з одного сайту на інший

13. У полі Длительность (Тривалість) задайте тривалість створюваного ефекту (в секундах). Для вибору ефекту переходу використайте список Эффект (Ефект). Збережіть результати і перевірте роботу сторінки у браузері.

14. Створіть нову веб-сторінку. Виберіть команду Вставка • Веб-компонент (Вставка • Веб-компонент), у вікні, що з'явиться, у списку Тип компонента (Тип компонента) виберіть значення Оглавление (Зміст) і натисніть кнопку Готово (Готово). У діалоговому вікні, що відкриється (рис. 3), зазначте сторінку, що є стартовою для сайту, та встановіть потрібні прапорці. За допомогою команди Свойства страницы (Властивості сторінки) контекстного меню сторінки відкрийте відповідне діалогове вікно і у поле Название (Назва) введіть слово «Зміст». Збережіть сторінку у файлі zmist.htm.

Рис. 3

15. Перевірте роботу зі змістом у вікні браузера. Відкрийте будь-яку сторінку сайту і виділіть текст, який потрібно зробити рухомим рядком. У меню Вставка (Встав­ка) виберіть команду Веб-компонент (Веб-компонент), потім тип компонента Динамические эффекты (Динамічні ефекти) і ефект — Бегущая строка (Рухомий рядок). Після клацання кнопки Готово (Готово) відкриється діалогове вікно, яке при-значене для настроювання його параметрів (рис. 4).

Рис. 4.

16. Використовуючи перемикач Направление (Напрямок), задай­те напрямок руху рядка: налево (ліворуч) або направо (праворуч).

17. Область Скорость (Швидкість) містить два лічильники, що керують швидкістю переміщення рядка:

• Задержка (Затримка) — задає проміжок часу між двома послідовними переміщеннями рядка (у мілісекундах);

• Величина (Величина) — визначає відстань між двома сусідніми позиціями рядка (у пікселах).

18. Варіюючи значення цих параметрів, можна змінювати швидкість руху тексту. Змініть встановлені за умовчанням параметри, але не набагато.

19. За допомогою параметрів в області Поведение (Поведінка) можна задати спосіб руху рядка:

• прокрутка (прокручування) — рядок з'являється від межі прямокутної області та зникає за протилежною, напрямок переміщення тексту задають значеннями перемикача На­правление (Напрямок);

• сдвиг (зсув) — рядок з'являється від межі прямокутної області та зупиняється перед протилежною, напрямок пе-реміщення тексту задають значеннями перемикача Направ­ление (Напрямок);

• попеременно (почергово) — рядок рухається від однієї межі прямокутної області до іншої, змінюючи потім напрямок.

20. Виберіть один із трьох запропонованих варіантів.

21. Використовуючи параметри в області Размер (Розмір), задай­те розміри прямокутника, у межах якого переміщатиметься рядок. Ця область містить прапорці Ширина (Ширина) та Высота (Висота), після встановлення яких стають доступ-ними поля, що дають змогу задати ширину та висоту прямокутника в пікселах або у відсотках від розміру екрана.

22. В області Повторы (Повторення) задайте кількість переміщень рухомого рядка. У разі встановлення прапорця Не­прерывно (Безперервно) рядок переміщуватиметься по веб-сторінці безупинно.

23. Для визначення кольору тла прямокутної області, в якій переміщується рядок, клацніть кнопку розкривного списку Цвет фона (Колір тла) і виберіть із палітри, що відкриється, потрібний колір.

24. Клацніть кнопку Стиль (Стиль). На екрані з'явиться діалогове вікно Изменение стиля (Змінення стилю), в якому за допомогою меню кнопки Формат (Формат) можна змінювати оформлення рухомого рядка — параметри шрифту (коман­да Шрифт (Шрифт)), абзацу (Абзац (Абзац)), меж (Граница (Межа)) тощо. Задайте ці параметри на власний розсуд.

25. Завершивши встановлення всіх параметрів рухомого рядка, закрийте діалогове вікно Свойства бегущей отроки (Властивості рухомого рядка).

26. Перегляньте результати своєї роботи, перейшовши на вклад­ку Просмотр (Перегляд).

Контрольні запитання

1. Що таке форма? У які способи можна створити форму у програмі FrontPage?

2. Що таке таблиця каскадних стилів?

3. Як підключити зовнішню таблицю стилів?

4. Як додати динамічні ефекти до виділеного фрагменту?

5. Як додати web-компонент на сторінку?

6. Які web-компоненти можна додати на сторінки сайту?

5