Урок 71                                                                        Інформатика 11(ІКТ)

Немає нічого що не долалось би працею

Практична робота № 22

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

Мета.

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

Розвиваюча. Розвивати логічне мислення, самостійність, вміння застосовувати набуті знання до практичних завдань.

Виховна. Виховувати наполегливість, естетичність у оформленні, грамотно висловлювати свої думки.

Тип уроку. Засвоєння нових знань і навичок.

Матеріали для роботи з учнями:

• Основи створення комп’ютерних презентацій: Навч. посіб. / О.М. Левченко, І.В. Коваль, І.О.Завадський. - К.: Вид. група BHV, 2009. - 368.

Онлайнові автоматизовані засоби створення веб-сайтів

Редактор сайтів Weebly

Редактор сайтів Ucoz

Редактор сайтів Narod.ru

Редактор сайтів GoogleSites

План

1. Організація початку уроку.
2. Актуалізація опорних знань.
3. Правила ТБ при роботі в кабінеті Інформатики.
4. Практична робота.
5. Запитання до уроку.
6. Домашнє завдання.

Хід уроку

1. Організація початку уроку.

2. Інструктаж БЖД.

3. Актуалізація опорних знань.

4. Практична робота № 22 «Створення динамічних елементів на веб-сторінках»

!!! Увага! Під час роботи з комп’ютером дотримуйтеся правил безпеки та санітарно-гігієнічних норм.  !!!

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

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

1. Вибравши команду Файл • Открьггь узел (Файл • Відкрити ву­зол), відкрийте у FrontРаgе сайт рослини_, створений у прак­тичній роботі № 7.
2. На панелі інструментів Стандартная (Стандартна) клацніть стрілку праворуч від кнопки Создание новой обычной страницы (Створення нової звичайної сторінки), виберіть у меню коман­ду Страница (Сторінка), в діалоговому вікні, що відкриється, перейдіть на вкладку Таблицы стилей (Таблиці стилів) і вибе­ріть на ній один із шаблонів таблиць стилів. Після клацання кнопки ОК буде створено новий документ — таблицю каскад­них стилів, яка містить опис стилів для форматування вмісту сторінок сайту. Збережіть його у папці поточного веб-сайту (файл матиме розширення .css).
3. Підключіть створену таблицю стилів до всіх сторінок сайту. Для цього відкрийте будь-яку з його сторінок, виберіть у меню Формат (Формат) команду Связи с таблицями стилей (Зв'язки з таблицями стилів) і в діалоговому вікні, що відкриється, ви­беріть перемикач все страницы (всі сторінки). Клацніть кнопку Добавить (Додати), виберіть у діалоговому вікні створену таб­лицю стилів і закрийте обидва вікна, клацнувши кнопку ОК.
4. У діалоговому вікні Подтверждение обновления связей с табли­цями стилей (Підтвердження оновлення зв'язків з таблицями стилів) клацніть кнопку Продолжить (Продовжити). Перегляньте сторінки сайту. Оскільки задана опція все стра­ницы (всі сторінки), то до всіх елементів усіх веб-сторінок буде застосовано форматування відповідно до стилів таблиці. Від­крийте будь-яку сторінку сайту в режимі перегляду HTML-коду. Уважно переглянувши код, ви побачите рядок із тегом <LINK>, в якому зазначена назва таблиці каскадних стилів.
5. Відкрийте сторінку index.htm і виділіть заголовок або інший текст для застосування ефекту анімації. За допомогою команди Вид • Панели инструментов • Эффекты DHTML (Вигляд • Панелі інструментів • Ефекти DHTML) відобразіть панель інструмен­тів Эффекты DHTML (Ефекти DHTML) (див. рис. 5.32).
6. У списку Вкл (Увімкнути) цієї панелі виберіть подію, після настання якої буде запущено ефект анімації:

• Щелчок (Клацання) — клацання мишею на виділеному фраг­менті;
• Двойной щелчок (Подвійне клацання) — подвійне клацання мишею;
• Новедение мыши (Наведення миші) — наведення вказівника миші на виділений фрагмент;
• Загрузка страницы (Завантаження сторінки) — завантажен­ня веб-сторінки.

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

• Падение (Падіння) — об'єкт падає згори;
• Пружина (Пружина) — об'єкт переміщується з невеликими коливаннями;
• Влет (Влітання) — об'єкт влітає;
• Скачок (Стрибок) — об'єкт переміщується стрибками;
• Виток (Спіраль) — об'єкт рухається по спіралі;
• Волна (Хвиля) — об'єкт рухається коливними рухами;
• Появление (Поява) — об'єкт з'являється;
• Масштаб (Масштаб) — об'єкт змінює розміри.

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

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

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

10. У полі Длительность (Тривалість) задайте тривалість створю­ваного ефекту (в секундах). Для вибору ефекту переходу ви­користайте список Эффект (Ефект). Збережіть результати і перевірте роботу сторінки у браузері.
11. На сайті є списки, що мають кілька рівнів. Перетворіть їх на списки, які згортаються та розгортаються. Збережіть ре­зультати і перевірте роботу сторінки у браузері.
12. Створіть нову веб-сторінку. Виберіть команду Вставка • Веб­компонент (Вставка • Веб-компонент), у вікні, що з'явиться, у списку Тип компонента (Тип компонента) виберіть значен­ня Оглавление (Зміст) і натисніть кнопку Готово (Готово). У діалоговому вікні, що відкриється (рис. 5.31), зазначте сторінку, що є стартовою для сайту, та встановіть потрібні прапорці. За допомогою команди Свойства страницы (Влас­тивості сторінки) контекстного меню сторінки відкрийте відповідне діалогове вікно і у поле Название (Назва) введіть слово «Зміст». Збережіть сторінку у файлі zmist.htm.
13. Перевірте роботу зі змістом у вікні браузера.
14. Відкрийте будь-яку сторінку сайту і виділіть текст, який потрібно зробити рухомим рядком. У меню Вставка (Встав­ка) виберіть команду Веб-компонент (Веб-компонент), потім тип компонента Динамические эффекты (Динамічні ефекти) і ефект — Бегущая строка (Рухомий рядок). Після клацання кнопки Готово (Готово) відкриється діалогове вікно, яке при­значене для настроювання його параметрів (рис. 5.37).

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

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

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

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

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

17. Виберіть один із трьох запропонованих варіантів.
18. Використовуючи параметри в області Размер (Розмір), задай­те розміри прямокутника, у межах якого переміщатиметься рядок. Ця область містить прапорці Ширина (Ширина) та Высота (Висота), після встановлення яких стають доступ­ними поля, що дають змогу задати ширину та висоту пря­мокутника в пікселах або у відсотках від розміру екрана.
19. В області Повторы (Повторення) задайте кількість перемі­щень рухомого рядка. У разі встановлення прапорця Не­прерывно (Безперервно) рядок переміщуватиметься по веб- сторінці безупинно.
20. Для визначення кольору тла прямокутної області, в якій переміщується рядок, клацніть кнопку розкривного списку Цвет фона (Колір тла) і виберіть із палітри, що відкриється, потрібний колір.
21. Клацніть кнопку Стиль (Стиль). На екрані з'явиться діало­гове вікно Изменение стиля (Змінення стилю), в якому за допомогою меню кнопки Формат (Формат) можна змінювати оформлення рухомого рядка — параметри шрифту (коман­да Шрифт (Шрифт)), абзацу (Абзац (Абзац)), меж (Граница (Межа)) тощо. Задайте ці параметри на власний розсуд.
22. Завершивши встановлення всіх параметрів рухомого рядка, закрийте діалогове вікно Свойства бегущей отроки (Власти­вості рухомого рядка).
23. Перегляньте результати своєї роботи, перешовши на вклад­ку Просмотр (Перегляд).

5.  Підбиття підсумків уроку

Оцінювання робіт учнів.

6. Домашнє завдання

1. Повторити теоретичний матеріал.
2. Підготуватися до тестування.

Тест

1. Таблиця каскадних стилів — це:

а)   файл з описом структури веб-сторінки;

б)   певна структура з описом властивостей елементів веб-сто- рінки;

в) спеціальна структура, в якій задається колір шрифту для елементів веб-сторінки;

г)  набір правил оформлення та форматування, які застосо­вують до різних елементів веб-сторінки;

д)  файл із призначенням кольору тла для веб-сторінки.

2. Зовнішня таблиця стилів — це:

а)  файл із розширенням .html з описом властивостей елемен­тів веб-сторінки;

б)  файл із розширенням .txt з описом властивостей елементів веб-сторінки;

в)  файл із розширенням .css із описом властивостей елемен­тів веб-сторінки;

г)  опис властивостей елементів веб-сторінки в окремому фай­лі, який можна використовувати для багатьох веб-сторі- нок;

д)  веб-сторінка з різними настройками функціональних роз­ділів.

3. Внутрішня таблиця стилів:

а)  розміщується безпосередньо в розділі <HEAD> усередині блоку, що охоплений тегами <STYLE>...</STYLE>;

б) розміщується безпосередньо в розділі <HEAD>;

в)  розміщується у будь-якому місці HTML-документа у фігур­них дужках;

г)  це файл із розширенням .css із описом властивостей еле­ментів веб-сторінки;

д)  це файл з описом структури веб-сторінки,

4. Вбудований стиль — це:

а)  перелік параметрів форматування елемента веб-сторінки, заданий у його тегу за допомогою атрибута STYLE;

б)  опис властивостей фрагмента тексту чи об'єкта, розміще­ний у фігурних дужках у будь-якому місці HTML-доку­мента;

в)  опис властивостей елемента веб-сторінки в її тілі;

г)  файл із розширенням .html з описом властивостей елемен­тів веб-сторінки;

д)  файл з описом структури веб-сторінки.

5. Сценарій — це:

а)  список гіперпосилань веб-сайту;

б) програма, написана спеціальною мовою програмування і вбудована в HTML-документ;

в)  послідовність відображення веб-сторінок під час перегля­ду сайту;

г)  програма, яку використовують для динамічного оновлен­ня веб-сторінки;

д)  програма будь-якою мовою програмування, розміщена на веб-сторінці.

6. JavaScript — це:

а)  певна структура, що описує властивості елементів веб-сто- рінки;

б)  файл із розширенням .html з описом властивостей елемен­тів веб-сторінки;

в) мова програмування, яка дає змогу вбудовувати викону­вані модулі в документи, написані мовою HTML;

г)  програма, що дає змогу імітувати рух зображень на веб- сторінці;

д)  засіб для створення інтерактивних веб-сторінок.

7. Об'єктна модель — це:

а)  структура, що дозволяє описати властивості елементів веб- сторінки;

б)  подання об'єктів, властивостей і подій у вигляді, зручно­му для роботи з ними в кодах HTML та у сценаріях;

в)  спосіб взаємодії між HTML-кодом веб-сторінки та кори­стувачем;

г)  засіб для роботи зі структурою документа;

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

8. Об'єкт Window:

а)  це основний контейнер, в якому розміщується все те, чим можна керувати за допомогою браузера;

б)  керує інформацією, що міститься у видимій на екрані час­тині веб-сторінки;

в) надає всю інформацію про HTML-документ за допомогою колекцій і властивостей;

г)  це об'єкт найвищого ієрархічного рівня, в який заванта­жуються документи;

д) надає можливість для керування вмістом та розмірами вікна під час відтворення веб-сторінки у браузері.

9. Об'єкт Document:

а)  керує інформацією, що міститься у видимій на екрані частині веб-сторінки;

б) надає всю інформацію про HTML-документ за допомогою колекцій і властивостей;

в)  надає всю інформацію про HTML-документ, а також мето­ди та події для роботи з ним;

г)  дає змогу динамічно формувати вміст сторінки у процесі її завантаження;

д)  це основний контейнер, в якому розміщується все те, чим можна керувати за допомогою браузера.

10. Тег <FORM>...</FORM>:

а)  інформує про використання JavaScript або іншої мови веб- сценаріїв у тілі HTML-документа;

б)  визначає атрибути кнопок, розташованих на веб-сторінці;

в)  форматує певну частину тексту;

г)  містить теги полів для введення даних, перемикачів, пра­порців, кнопок;

д) містить атрибути, що надають можливість надсилати дані на сервер для подальшого опрацювання.

11. Тегом кнопки надсилання даних, введених у форму, є:

а) < INPUT TYPE=" reset" ...>;

б) < INPUT TYPE= " submit " ...>;

в) < INPUT TYPE="goto" ...>;

г) < INPUT TYPE= " select " ...>;

д) < INPUT TYPE="radio". . .>.

12. Переглянути список шаблонів і майстрів форм, пропонова­них програмою FrontPage, можна:

а)  за допомогою команди Файл • Создать (Файл • Створити) і посилання Другие шаблоны страниц (Інші шаблони сторі­нок);

б) за допомогою команди Файл • Создать (Файл • Створити) і посилання Другие шаблоны веб-узлов (Інші шаблони веб- вузлів);

в)  вибравши в меню Формат (Формат) команду Тема (Тема), а потім тему для сторінок із формами;

г)  вибравши в меню Вставка (Вставка) команду Форма (Фор­ма), а потім тип поля форми;

д)  вибравши команду Страница (Сторінка) у меню кнопки Создание новой обычной страницы (Створення нової зви­чайної сторінки).