Файл: Лабораторна робота 13.pdf

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

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

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

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

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

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

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

4.На панелі інструментів Стандартная(Стандартна) клацніть стрілку праворуч

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

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

сторінки сайту. Оскільки задана опція все страницы(всі сторінки), то до всіх елементів усіх веб-сторінок буде застосовано форматування відповідно до стилів таблиці.

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

(Увімкнути) цієї панелі виберіть подію, після настання якої буде запущено ефект анімації:

Рис.1

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

1

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Рис. 2

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

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

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

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

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

2

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

Рис. 3

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

Рис. 4.

3

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

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

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

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

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

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

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

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

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

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

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

(команда Шрифт (Шрифт)), абзацу (Абзац (Абзац)), меж (Граница (Межа)) тощо. Задайте ці параметри на власний розсуд.

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

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

4

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

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

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

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

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

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

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

5