Урок 4.

Практична робота № 1
Створення структури сайту за допомогою онлайн-сервісу DRAW.IO
Увага! Під час роботи з комп'ютером дотримуйтеся правил безпеки та санітарно-
гігієнічних норм.
Завдання.
Вчителі інформатики вашої школи вирішили розробити сайт підтримки викладання
інформатики. На сайті повинні відображатися основні напрямки вивчення інформатики.
Допоможіть розробити структуру сайту, враховуючі різні розділи інформатики,
використовуючи онлайн-сервіс для створення діаграм.
Хід виконання
I. Налаштування онлайн-сервісу
1. Увійдіть у свій акаунт на Google.
2. В пошуковому рядку введіть url-адресу https://www.draw.io
3. Авторизуйтесь за допомогою gmail-пошти.
4. Оберіть Google-диск.
5. Оберіть українську мову (рис.1_1)

Рис.1_1. Налаштування мови та вибір команди «Створення нової діаграми»

6. Оберіть з меню, що з’явилося команду Створення нової діаграми
ІІ. Створення структури сайту
1. Оберіть з фігур у лівому полі програми прямокутник та перетягніть його на робоче поле
діаграми (рис.1_2)

Рис.1_2. Вибір елемента діаграми

2. За допомогою меню Стиль та Текст, на робочому полі (рис.1_3) відформатуйте
прямокутник (оберіть колір тла та розмір, колір і шрифт тексту).
3. Додайте надпис - «Головна сторінка».
4. Аналогічно створіть елементи другого рівня: «Програмування» та «Інформаційні
технології». Для другого рівня оберіть інший стиль форматування. Для полегшення роботи
використовуйте команду клонування (перетягування обраної фігури із затиснутими
клавішою Ctrl та лівою кнопкою миші).
 Рис.1_3. Меню форматування елемента діаграми

5. Створіть елементи третього рівня (продумайте як їх назвати і скільки їх, на вашу думку,
має бути, враховуйте розділи інформатики, які ви вивчали, за бажанням додайте розділи,
які ви б хотіли вивчати у курсі інфрматики)
6. Реалізуйте зв’язки між сторінками (розділами сайту), за допомогою іннтрументу лінії і
стрілки (рис.1_4).

Рис.1_4. Налаштування звязків.

ІІІ. Збереження створеної діаграми
1. Розроблену структуру збережіть на своєму Google-диску (File→ Save, або натиснути
Сtrl+S). При наведенні миші на кольоровий значок діаграми він змінюється на команду
відкрити Google-диск (рис.1_5) і ви можете переглянути діаграму на своєму диску.

Рис. 1_5. Кнопка перемикання на Google -диск

2. За допомогою команди на Google-диску або засобами сервісу (File→ Share) отримайте
посилання на структуру сайту, розроблену вами.
3. Надішліть посилання вчителю і 3 однокласникам.
IV. Аналіз отриманих результатів.
Перегляньте структури сайту, створені вашими однокласниками. Порівняйте роботи і
зробіть висновок.
Домашнє завдання
Україна планує взяти участь у міжнародному туристичному салоні UITM-2020
(http://www.ukraine-itm.com.ua/uk-UA/). Для презентації необхідно розробити сайт найбільш
привабливих туристичних цікавинок України.
За допомогою онлайн-сервісу розробіть структуру сайту «7 чудес України», якій би
містив наступні розділи: «Історико-культурні пам'ятки», «Замки», «Парки», «Природні
ландшафти».
Збережіть розроблену структуру на свій Google-диск, посилання на роботу надішліть на
електронну скриньку вчителю.