Урок №54 для 8 класу з інформатики за Й.Ривкіндом, Т. Лисенко - Автоматизовані засоби створення та публікації вебресурсів

«___»__________ 20___ року

Урок №54. Автоматизовані засоби створення та публікації вебресурсів

Завдання уроку: розвиток мислення та вміння навчатися; надання можливості для творчого розвитку та самореалізації учня/учениці, зокрема із застосуванням цифрових інструментів; формувати вміння вчитися протягом життя, використовуючи різні джерела інформації, вчити методів та прийомів навчання.

Розвиток компетентностей: висловлення власної думки в усній і письмовій формі та за допомогою цифрових пристроїв й відповідної термінології; генерування й реалізація ідей з використанням цифрових технологій; формування прагнення самостійно опановувати нові інформаційні технології й цифрові інструменти при формуванні власного цифрового середовища.

Розвиток наскрізних вмінь та навичок: критичне та системне мислення, використовуючи різноманітні ресурси та способи оцінювання якості доказів, надійності джерел і достовірності відомостей, отриманих з електронних ресурсів; оцінювати ризики під час використання цифрових пристроїв.

Формування інформаційно-комунікаційних компетентностей: усвідомлення наслідків використання інформаційних і комунікаційних технологій для себе, суспільства, навколишнього природного середовища, дотримання етичних, культурних і правових норм інформаційної взаємодії.

Очікувані результати: учні пам'ятають правила поведінки у комп'ютерному класі; знають як обрати тему оформлення сайту; вміють створювати вебсторінки і додавати елементи на сторінки; робити попередній перегляд і публікацію сайтів.

Обладнання та наочність: комп’ютери, підручники, презентація, проєктор.

Хід уроку

І. Організаційний та мотиваційний етап

• Привітання з класом

Повідомлення теми і мети уроку.

Сьогодні на уроці ми з вами говоритимемо про:

• вибір теми оформлення сайту;
• створення вебсторінок і додавання елементів на сторінки;
• попередній перегляд і публікацію сайтів.

IІ. Актуалізація вивченого матеріалу

Слайд 4. Поміркуйте.

• Від чого залежить кількість вебсторінок, з яких складається сайт? Чи можуть бути однаковими назви кількох вебсторінок одного сайту?
• Для чого вебсторінки сайту розподіляють за окремими розділами?

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

Слайд 6. Сайт одразу після створення його на основі шаблону Порожній сайт містить лише одну сторінку, яка є головною сторінкою сайту. Назву головної сторінки потрібно ввести в поле Заголовок сторінки у верхньому колонтитулі. Часто назва головної сторінки збігається з назвою сайту.

Слайд 7. Для створення нової сторінки на сайті слід:

1. Відкрити на бічній панелі вкладку Сторінки.
2. Навести вказівник на кнопку із зображенням плюса в нижній частині бічної панелі.
3. Вибрати кнопку Створити сторінку.
4. Увести назву сторінки в поле Назва у вікні Створити сторінку.
5. Вибрати посилання Готово.

Слайд 8. Після цього на вкладці Сторінки бічної панелі з'явиться блок з назвою створеної сторінки, а на панелі навігації сайту буде утворено посилання на цю сторінку.

Слайд 9-10. У структурі сайту можуть бути тематичні розділи, у яких згруповано всі сторінки певної теми. Для створення тематичного розділу слід:

1. Відкрити на бічній панелі вкладку Сторінки.
2. Навести вказівник на кнопку в нижній частині бічної панелі.
3. Вибрати кнопку Розділ нового меню
4. Увести назву розділу в поле Назва у вікні Розділ нового меню.
5. Вибрати посилання Готово.

Слайд 11. На панелі навігації посилання на розділ буде активним, якщо до розділу входить хоча б одна сторінка. Щоб створити в розділі сторінку, слід:

1. Вибрати кнопку із зображенням трьох крапок у блоці розділу.
2. Вибрати в меню, що відкриється, команду Додати підсторінку.
3. Увести назву сторінки в поле Назва у вікні Нова підсторінка.
4. Вибрати посилання Готово.

Слайд 12. На малюнку наведено вигляд вкладки Сторінки та панелі навігації сайту з посиланнями на сторінки тематичного розділу.

Слайд 13. Розміщення посилань на панелі навігації можна змінити, перетягнувши на вкладці Сторінки бічної панелі блок з назвою сторінки в потрібне місце.

Слайд 14. У деяких шаблонах сайтів панель навігації згорнута у значок так званого бургер-меню, після вибору якого список сторінок відкривається в лівій бічній панелі.

Слайд 15. Змінити вигляд і положення панелі навігації можна, вибравши кнопку Налаштування навігації ліворуч від верхнього колонтитула та у вікні Налаштування в розділі Навігація — відповідний режим: За верхнім краєм або Збоку.

Слайд 16. Пригадайте.

• Які об'єкти можуть бути вставлені на вебсторінку?
• Що таке макет слайда комп'ютерної презентації?
• Як уставити об'єкт на слайд комп'ютерної презентації, використовуючи покажчик місця заповнення?

Слайд 17. На вебсторінку можна вставити різні об'єкти: текстові поля, зображення, відео, документи, які розміщено на Google Диску, та інше.

Для цього призначено вкладку Вставити на правій бічній панелі редактора сайтів.

Слайд 18-19. Призначення деяких елементів керування вкладки Вставити наведено в таблиці.

Слайд 20. Також на вебсторінку можна вставити:

• Google Карти;
• Google Календарі;
• кнопки з посиланнями на вебсторінки;
• посилання на сторінки соціальних мереж у вигляді відповідних значків;
• діаграми з електронних таблиць та інші об'єкти.

Слайд 21. Під час вставлення об'єкта на сторінці утворюється окремий її розділ завширшки на всю сторінку. Уставлений об'єкт розміщується всередині цього розділу сторінки у прямокутному блоці з маркерами на межі блока.

Слайд 22. Кожний розділ сторінки має панель інструментів, призначенням яких є: вибір кольору фону для розділу сторінки, створення копії розділу сторінки, видалення розділу сторінки.

Слайд 23. Блок з об'єктом можна перемістити всередині розділу сторінки або в інший її розділ, змінити розміри блока, використовуючи маркери на межах, або видалити. На малюнку наведено вигляд розділу сторінки з трьома блоками текстових полів.

Слайд 24. Для кожного блока, якщо його вибрати, відкривається окрема панель інструментів. На панелі інструментів текстового поля розміщено елементи керування, подібні до тих, що використовуються в текстовому процесорі.

Слайд 25. До тексту, уведеного в текстовому полі, може бути застосований один зі стандартних стилів — Назва, Заголовок, Підзаголовок, Звичайний текст і Малий текст. Редагування та форматування тексту в текстовому полі відбувається так само, як у текстовому процесорі.

Слайд 26. Блок зображення створюється після вибору кнопки Зображення на бічній панелі та вибору файлу, зображення з якого буде відображатися на сторінці. Файл можна додати з носіїв даних вашого комп'ютера, вибрати з вашого Google Диска або сервісу Google Фотографії, уставити за відомою URL-адресою або знайти в Google Зображеннях.

Слайд 27. Вигляд панелі інструментів блока зображення наведено на малюнку. За замовчуванням ширина блока зображення складає третину ширини сторінки. Розміри блока можна змінювати.

Слайд 28. Використовуючи кнопку панелі інструментів Обрізати (Ввести), можна вибрати, яку частину зображення буде відображено у блоці. Вибір кнопки Скасувати обрізування приводить до відображення у блоці всього зображення.

Слайд 29. На вебсторінку можна вставляти файли різних типів, які зберігаються на вашому Google Диску.

Слайд 30. Якщо вибрати кнопку Диск, то праворуч від робочої області сторінки відкриється панель Google Диск, на якій можна побачити вміст вашого Google Диска, знайти та вибрати файл, який потрібно додати на сторінку.

Слайд 31. Якщо потрібно вставити файл, створений з використанням одного з сервісів Google, то можна скористатися кнопками вкладки Вставити для вибору та вставлення відповідного файлу.

Після вибору будь-якої з цих кнопок відкривається панель з переліком файлів лише вибраного типу на вашому Google Диску.

Слайд 32. Вибраний на цій панелі файл буде вставлений на сторінку в окремому блоці. За потреби буде запитано ваш дозвіл на перегляд цього файлу користувачами інтернету.

На малюнку наведено вигляд блока зі вставленим Google-документом. Побачити документ у повному обсязі можна буде після публікації сайту.

Слайд 33. Якщо на вкладці Вставити вибрати будь-який елемент з групи Блоки контенту, то на сторінці буде створено розділ відповідного макета.

Слайд 34. У цьому розділі на визначених місцях можна вводити заголовки та абзаци тексту, вставляти зображення, документи різних типів, відео з сервісу YouTube, Google Календарі та Google Карти.

Слайд 35. Для видалення вставленого об'єкта потрібно вибрати кнопку Видалити на панелі інструментів блока цього об'єкта.

Слайд 36. Пригадайте.

• Який дизайн називають адаптивним?
• Які зміни в розміщенні та вигляді об'єктів вебсторінки можуть відбуватися під час змінення розміру області перегляду?
• Що таке URL-адреса сторінки?

Слайд 37. Вебсторінки, що створюються в редакторі сайтів Google, мають адаптивний дизайн. Щоб побачити, як виглядатиме сайт для користувачів інтернету під час перегляду його на екрані смартфона, планшетного комп'ютера, ноутбука чи стаціонарного комп'ютера, можна вибрати кнопку Попередній вигляд.

Слайд 38. Створений вами сайт буде залишатися недоступним для користувачів інтернету, поки ви його не опублікуєте. Для публікації потрібно:

1. Вибрати кнопку Опублікувати на верхній панелі редактора сайтів.
2. Увести, використовуючи малі літери англійського алфавіту, цифри та дефіс, останню частину URL-адреси сайту. Перша частина адреси для всіх сайтів буде однаковою: sites.google.com/view/. Остання частина повинна бути унікальною для кожного сайту. Якщо введена вами адреса вже існує, то про це буде повідомлено та її потрібно змінити.
3. Вибрати кнопку Опублікувати.

Слайд 39. Опублікований сайт можна переглянути, вибравши команду Переглянути опублікований сайт у списку кнопки Опублікувати.

Слайд 40. URL-адреса, яку потрібно повідомити користувачам інтернету для перегляду вашого сайту, міститься в рядку адреси у вікні перегляду опублікованого сайту. Також цю адресу можна скопіювати, вибравши кнопку Копіювати посилання на опублікований сайт на панелі інструментів редактора сайтів.

Слайд 41. Після внесення будь-яких змін до вашого сайту його потрібно повторно публікувати. Уведення URL-адреси сайту буде вимагатися лише під час першої публікації сайту.

Слайд 42. Як і до інших електронних документів, створених у різних сервіcax Google, до сайту можна надавати дозвіл іншим людям для спільного редагування. Для цього призначена кнопка Надати доступ іншим, яка розміщена на верхній панелі редактора сайтів.

Слайд 43. Обговоріть і зробіть висновки.

1. Чому, на вашу думку, потрібно виконувати публікацію сайту після внесення змін до нього?
2. Які, на ваш погляд, переваги та недоліки створення сайтів шляхом написання HTML-коду їх сторінок і шляхом використання онлайн-систем конструювання сайтів?

Слайд 44. Гімнастика для очей.

ІІІ. Актуалізація набутих знань й формування вмінь та навичок

Слайд 45. Робота за комп’ютером

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

Завдання та алгоритми їх виконання ви зможете знайти за адресою https://cutt.ly/re2cH4s6 або QR-кодом.

Додаткові завдання

Завдання 1. Створіть у сервісі Google Сайти сайт Наші космічні сусіди. Мапа сайту, текст та зображення для розміщення на сторінках містяться в папці Розділ 5\Пункт 5.3\Завдання 5.3.3. Виберіть для сайту тему оформлення Вражаюча. Опублікуйте сайт. Повідомте вчителю / вчительці URL-адресу створеного вами сайту.

Завдання 2. Створіть у сервісі Google Сайти сайт про себе на основі шаблону Портфоліо учня. Виберіть шаблон у Галереї шаблонів, якщо він не відображається на сторінці Сайти. Уведіть текстові дані відповідно до рекомендацій шаблону, заповніть блоки-заповнювачі та сторінки предметів і позашкільних занять відповідно до вашого класу та ваших інтересів. Замініть зображення на власні. Видаліть блоки шаблону, які залишились не заповненими, або додайте та заповніть нові блоки за потреби. Опублікуйте сайт. Повідомте вчителю / вчительці URL-адресу створеного вами сайту.

Завдання 3. Об'єднайтесь у групу з трьох осіб. Доберіть матеріали та створіть спільно сайт Домашні улюбленці у сервісі Google Сайти. Розробіть і розмістіть на сторінках сайту Google-форму для опитування відвідувачів сайту про їх домашніх улюбленців. Уставте відео з сервіcy YouTube про домашніх тварин. Опублікуйте сайт. Повідомте вчителю / вчительці URL-адресу створеного вами сайту.

ІV. Рефлексія й підсумок навчальної діяльності

Слайд 46. Інтерактивне завдання.

Слайд 47. Підсумок.

Слайд 48. Домашнє завдання.

Слайд 49. Рефлексія.