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

Ніколи не соромся запитувати про те, чого не знаєш.

Арабське прислів’я

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

«Розробка сайту в середовищі візуального редактора сайтів»

Мета.

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

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

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

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

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

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

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

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

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

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

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

План

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

Хід уроку

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

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

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

4. Практична робота № 21 «Розробка сайту в середовищі візуального редактора сайтів»

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

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

Завдання

Створимо невеликий сайт «Рослини України» із трьома рівнями іє­рархії сторінок (рис. 4.12). Головна сторінка має складатися з тек­стової та графічної інформації, розташованої у комірках таблиці. В одну з комірок помістіть зображення, що буде використане як карта посилань. Сторінки розділів мають містити фотографії та текстові описи.

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

1. Створіть папку roslyny та розташуйте у ній такі графічні фай­ли: karta.jpg (карта посилань, на якій зображені дерева і кві­ти), kalyna.jpg (калина), topolya.jpg (тополя), barvinok.jpg (бар­вінок) та lyon.jpg (льон).
2. Відкрийте вікно програми FrontPage. Виберіть у меню Файл (Файл) команду Открыть узел (Відкрити веб-сайт) та виберіть папку roslyny. Програма повідомить про те, що до цієї папки будуть записані ще деякі файли, потрібні для роботи. Клац­ніть кнопку ОК.
3. Створіть сторінки найнижчого ієрархічного рівня — про кали­ну, тополю, барвінок і льон — та збережіть їх у поточній пап­ці у файлах kalyna.htm, topolya.htm, barvinok.htm і lyon.htm. Для цього скористайтеся командою Файл • Создать (Файл • Створи­ти) або кнопкою Создание новой обычной страницы (Створення нової звичайної сторінки) стандартної панелі інструментів.
4. Введіть на сторінки опис кожної з рослин.

• Про калину: «Кущ калини біля материної хати — це не ли­ше окраса, а й символ України, наш духовний світ, наша спадщина. Якщо троянди й виноград, за влучним висловом Максима Рильського, символізують красиве й корисне, то кущ калини, увібравши обидві ознаки, опредметнює й духов­ний потяг до своєї землі, свого оберега, своїх традицій».
• Про тополю: «В українському фольклорі часто зустріча­ються згадки про всім відому рослину. Це тополя (Popu- lus) — міфічний образ-тотем давніх українців. Свято то­полі проводили наприкінці весни. Обирали найстрункішу дівчину, якій зав'язували над головою руки, на які наві­шували стрічки, хустки, намисто, водили селом, лугом, полем та співали: «Стояла Тополя край чистого поля, стій, Тополенько, стій не розвивайся, буйному вітроньку не під­давайся...». Особливо свято тополі було поширене в околи­цях Києва».
• Про барвінок: «Ще однією рослиною, що зустрічається у ба­гатьох легендах та казках українського народу, є барвінок (Vinca). Це трав'яниста багаторічна рослина, яка має ви­довжене листя, квітки синьо-фіолетового кольору, плід, що складається з двох вільних листків. Барвінок зацвітає в травні-липні. Поширений барвінок в Україні, Білорусі та на Кавказі».
• Про льон: «У нашій країні льон висівають переважно в зо­ні Полісся, саме тому його ще називають поліським шов­ком. Поліщуки добре знають, коли, в яку пору краще сія­ти, збирати, слати, тіпати льон, з приводу чого склалося багато народних прикмет. Так, вважали, що сіяти льон найкраще у п'ятницю чи суботу, несучи насіння в поле у білій скатертині».

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

7. Створіть сторінки другого рівня ієрархії про дерева та квіти. Ви­користайте зображення як посилання на сторінки третього рів­ня ієрархії. Збережіть сторінки у файлах з іменами dereva.htm Takvity.htm.

Для цього спочатку на новій сторінці про дерева сформуйте заголовок, а потім виділіть його текст, введений в окремо­му абзаці, і застосуйте до нього стиль Заголовок З (Заголовок третього рівня), вибравши відповідне значення зі списку Стиль (Стиль) на панелі інструментів Форматирование (Форматуван­ня). Потім за допомогою команди Рисунок • Из файла (Малю­нок • Із файлу) меню Вставка (Вставка) вставте на сторінку малюнки калини та тополі.

8. Розмістивши зображення на веб-сторінці, настройте їх розмір у діалоговому вікні Свойства рисунка (Властивості малюнка). Щоб його відкрити, виділіть малюнок за допомогою миші та виберіть у меню Формат (Формат) команду Свойства рисунка (Властивості малюнка). Задайте прийнятний розмір зображен­ня у полях Ширина (Ширина) та Высота (Висота). Для збе­реження його пропорцій має бути встановлений прапорець Сохранять пропорции (Зберігати пропорції).
9. Зробіть кожен малюнок посиланням на сторінку з описом відповідної рослини. Для цього для кожного малюнка вико­найте команду Вставка • Гиперссылка (Вставка • Гіперпосилан­ня). У вікні, що відкриється, виберіть потрібний файл і клац­ніть кнопку ОК. Вигляд сторінки dereva.htm показаний на рис. 4.14.

10. Так само створіть сторінку про квіти.
11. Створіть головну сторінку. Для структурування інформації використайте таблицю без відображення меж. Виберіть ко­манду Таблица • Вставить • Таблица (Таблиця • Вставити • Таб­лиця) і задайте для таблиці кількість рядків — 2 та кількість стовпців — 3. У поле Размер (Розмір) області Границы (Межі) введіть О (межі відсутні). Решту значень не змінюйте. Після клацання кнопки ОК таблицю буде вставлено на веб-сторінку. Об'єднайте комірки першого рядка, виділивши їх та ви­конавши команду Таблица • Объединить ячейки (Таблиця • Об'єднати комірки).
12. Введіть в об'єднану комірку текст «Рослини України» і при­значте для нього стиль Заголовок 1 (Заголовок першого рів­ня). У комірки другого рядка введіть подані далі тексти.

• У ліву комірку: «Людство живе в оточенні величезної кіль­кості різноманітних рослин. Кожен із нас може по-різному характеризувати будь-яку рослину, але слід знати, що у при­роді нема нічого зайвого, тому кожна рослина може бути по-своєму корисною. Наші предки це добре розуміли, тому використовували у лікувальних цілях різні рослини».
• У праву комірку: «В українському фольклорі зустрічають­ся згадки про величезну кількість рослин, багато з яких мають лікувальні властивості. Проте лише деякі з них здо­були особливу любов українського народу та стали симво­лічними для національної культури українців.

Лікарських рослин, які використовують у народній і про­фесійній медицині, дуже багато. Вони бувають:

• трав'янисті
• дерев'янисті».

13. У центральну комірку другого рядка вставте малюнок, який буде картою посилань (рис. 4.15). Зауважте, що межі таблиці, які мають нульову ширину, у режимі Конструктор (Конструктор) зображені пунктирними лініями. Після пе­реходу в режим Просмотр (Перегляд) їх не буде видно.
14. Для призначення гарячих областей зображення скористайте­ся кнопкою панелі інструментів Рисунки (Малюнки), що ви­значає область гіперпосилання прямокутної форми.

Якщо панель не відкрита, виберіть команду Вид • Панели инструментов • Рисунки (Вигляд • Панелі інструментів • Ма­люнки). Виділіть верхню частину малюнка із зображенням дерев і у діалоговому вікні, що відкриється, призначте зв'я­зок цієї області з файлом dereva.htm (рис. 4.16).

15. У той самий спосіб зробіть нижню прямокутну область ма­люнка гіперпосиланням на файл kvlty.htm.
16. Перейдіть у режим HTML. Знайдіть у HTML-коді рядки, де ви­значена карта гіперпосилань, та відредагуйте їх, дописав­ши у тег <AREA> атрибут TITLE, значенням якого є пояс­нювальний текст, взятий у лапки. Для верхньої області введіть пояснення «Ознайомтеся з дерев'янистими рослина­ми», для нижньої — «Ознайомтеся з трав'янистими рослинами» (рис. 4.17). Тепер у разі наведення вказівника ми­ші на гарячу область відповідний текст буде показаний у спливаючому прямокутнику. Так можна інформувати від­відувача про призначення гарячої області.

17. Зробіть гіперпосиланнями на ці самі файли, dereva.htm та kvity.htm, елементи списку, який міститься у тексті, що розта­шований праворуч, — «трав'янисті» та «дерев'янисті». Для цього виділіть потрібне слово, відкрийте контекстне меню, виберіть у ньому команду Гиперссылка (Гіперпосилання) і у діалоговому вікні встановіть зв'язок із відповідним файлом. Збережіть цю сторінку як index.htm.

Сторінка в режимі Просмотр (Перегляд) показана на рис. 4.18. Інформація на ній розташована в комірках таблиці, хоча цьо­го не помітно, бо межі таблиці відсутні. Видно підказку для нижньої гарячої області карти посилань — навівши на неї вка­зівник миші, відвідувач бачить пояснювальний текст.

18. Збережіть усі створені сторінки сайту і перевірте його ро­боту в браузері.

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

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

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

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

Тест

1. Використання візуальних редакторів веб-сайтів порівняно з написанням HTML-кодів надає такі переваги:

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

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

в)  сайт, створений у візуальному редакторі, займає менше пам'яті, ніж написаний у HTML-кодах;

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

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

2. У програмі FrontPage використовувати матеріали з інших програм Microsoft Office можна так:

а)  документ з іншої програми Microsoft Office зберігають як веб-сторінку, яку потім відкривають і використовують у програмі FrontPage;

б)  ці матеріали потрібно наново набирати у програмі Front­Page;

в)  фрагмент документа з іншої програми Microsoft Office ко­піюють у буфер, а у FrontPage його вставляють в HTML-код веб-сторінки зі збереженням форматування;

г)  фрагмент документа з іншої програми Microsoft Office пе­реносять через буфер на веб-сторінку, відображену у Front­Page у звичайному режимі зі збереженням форматування;

д)  фрагмент документа з іншої програми Microsoft Office пе­реносять через буфер на веб-сторінку у FrontPage у зви­чайному режимі без збереження форматування.

3. Переглядати веб-сторінки у FrontPage можна у режимах:

а)  Конструктор (Конструктор), Код (Код), Просмотр (Перегляд);

б)  Конструктор (Конструктор), Папки (Папки), Просмотр (Пе­регляд);

в)  Страница (Сторінка), Папки (Папки), Отчеты (Звіти), Пере­ходы (Переходи);

г)  Редактирование (Редагування) і Просмотр (Перегляд);

д)  Страница (Сторінка), Папки (Папки), Просмотр (Перегляд).

4. Вкладка Конструктор (Конструктор) у режимі Страница (Сто­рінка) призначена для:

а)  перегляду списку сторінок, створених для сайту;

б)  перегляду структури папок сайту;

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

г)  створення та редагування веб-сторінки засобами мови HTML;

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

5. Шаблон у FrontPage — це:

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

б) детальна інструкція щодо створення сайту на задану тему;

в)  набір малюнків, які використовують для формування тла сторінок;

г)  документ, де визначено формати шрифтів, абзаців, тла для нових веб-сторінок;

д)  набір сайтів на одну тему.

6. Майстер FrontPage — це:

а) список HTML-кодів із поясненням їх можливого викори­стання;

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

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

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

д)   програма, що імпортує веб-сторінки, які створені за до­помогою інших програм, у призначену папку для роботи у FrontPage.

7. Фреймсет — це:

а)   сторінка, в яку вставлена таблиця;

б)  сторінка, текст якої поділено на кілька колонок;

в)   сторінка, на якій в окремих фреймах розміщено кілька документів;

г)   сторінка з розміщеною на ній картою гіперпосилань;

д)   кілька веб-сторінок в одному вікні.

8. Текстову інформацію у програмі FrontPage форматують:

а)   лише за допомогою тегів HTML;

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

в)   текст фор матують у текстовому редакторі, а пізніше ко­піюють у програму FrontPage;

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

д)   за допомогою спеціальної інструкції програми FrontPage.

9. Щоб розмістити малюнок із файлу на веб-сторінці, потріб­но:

а)   у меню Файл (Файл) вибрати команду Открыть (Відкрити);

б)  у меню Вставка (Вставка) вибрати команду Файл (Файл) ;

в)   вибрати команду Вставка • Рисунок • Из файла (Вставка • Малюнок • Із файлу);

г)   клацнути кнопку для вставлення зображення на панелі інструментів Рисунки (Малюнки);

д)   клацнути кнопку для вставлення зображення на панелі інструментів Стандартная (Стандартна).

10. Щоб перетворити виділений фрагмент тексту або малюнок на гіперпосилання, необхідно:

а)   у меню Формат (Формат) вибрати команду Гиперссылка (Г іперпосилання) ;

б)  у меню Вставка (Вставка) вибрати команду Гиперссылка (Гі- перпосилання);

в)   у меню Файл. (Файл) вибрати команду Открыть гиперссыл­ку (Відкрити гіперпосилання) ;

г)   виконати команду Гиперссылка (Гіперпосилання) контекст­ного меню;

д)   ввести відповідні теги мови HTML у режимі Конструктор (Конструктор).

11. Для вставлення таблиці на веб-сторінку потрібно:

а)   у меню Таблица (Таблиця) вибрати команду Вставка • Табли­ца (Вставити • Таблиця);

б)  у меню Вставка (Вставка) вибрати команду Таблица (Таб­лиця);

в)   у меню Формат (Формат) вибрати команду Таблица (Таб­лиця);

г)   намалювати таблицю, використовуючи інструменти пане­лі Рисунки (Малюнки);

д)   вибрати команду Файл • Создать  • Таблица(Файл • Створи­ти • Таблиця).

12. Щоб структурувати інформацію на веб-сторінці за допомо­гою таблиці так, щоб самої таблиці не було видно на екра­ні, слід:

а)   об'єднати всі комірки таблиці;

б)   призначити для меж таблиці колір тла;

в)   призначити для меж таблиці товщину 0;

г)   у меню Формат (Формат) вибрати команду Таблица (Табли­ця) і настроїти властивості таблиці в діалоговому вікні;

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