Урок:

Створення веб-сторінок завтоматизованими засобами

09.05.2025
0 0
Вміст уроку:
1
2
3
4
5
6
7
8
9
10

Урок не містить жодного завдання. Додайте завдання.

Щоб додати завдання, оберіть категорію завдання на панелі запитань.

1

1. Що таке автоматизовані засоби?

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

🧠 Просто кажучи:
Це як “LEGO для сайтів” — ти вибираєш блоки (текст, зображення, кнопки), перетягуєш їх мишкою — і сторінка готова!


🔹 2. Чому це зручно?

✅ Не треба вивчати код
✅ Все видно на екрані — як буде виглядати сайт
✅ Можна зробити сайт за 1-2 години
✅ Підходить навіть дітям та початківцям

2

🔹 3. Приклади автоматизованих засобів

Засіб

Тип

Особливості

Wix

Онлайн

Перетягування елементів, шаблони

Tilda

Онлайн

Красивий дизайн, блочна структура

Google Sites

Онлайн

Простий, зручний для школи

WordPress.com

Онлайн

Багато шаблонів, блогова структура

3

3 з 12 балів

4. Як виглядає робота в Google Sites (покроково):

1️⃣ Перейди на https://sites.google.com
2️⃣ Натисни “+ Створити сайт”
3️⃣ Введи назву сайту
4️⃣ Додай елементи:
– заголовок
– текст
– зображення
– кнопки
5️⃣ Натисни “Опублікувати” — сайт доступний в Інтернеті!

скрін встав у вікно, або посилання на сайт

4

3 з 12 балів

🔹 5. Приклад: створення сайту “Мій клас”

📌 Сторінки:

  • Головна

  • Розклад уроків

  • Фото з подій

  • Про вчителів

    скрін встав у ввіно вводу

5

Елементи:

  • Зображення (фото класу)

  • Текст (назва, підписи)

  • Кнопка “Перейти до розкладу”

    Учень бачить, як виглядає сайт прямо під час створення.

6

🔹 6. Порівняння: ручне кодування vs автоматизоване створення

Характеристика

HTML-кодування

Автоматизовані засоби

Потрібні знання?

Так (HTML, CSS)

Ні (все мишею)

Швидкість роботи

Повільніше

Швидко

Гнучкість дизайну

Повна свобода

Обмежено шаблонами

Зручно для 8 класу?

Ні, складно

✅ Так, ідеально

7

3 з 12 балів

🛠️ 7. Що можна зробити з автоматизованим сайтом?

  • Створити шкільний проєкт (наприклад, “Захист природи”)

  • Зробити сторінку для класу

  • Презентувати себе або команду

  • Створити сторінку-портфоліо (свої роботи)

8

3 з 12 балів

створити макет майбутнього учнівського сайту (наприклад, для проєкту “Я і Україна”).

9

📎 Висновок:

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

10

Шаблон навчального сайту для учнів 8 класу в Google Sites


Назва сайту: "Наш 8-Б клас"

Структура сайту (сторінки):

  1. Головна

    • Привітання

    • Фото класу

    • Кнопка "Перейти до розкладу"

  2. Розклад уроків

    • Таблиця з днями тижня та уроками

    • PDF-файл з розкладом (опціонально)

  3. Наші вчителі

    • Фото вчителів

    • ПІБ, предмет, короткий опис або цікавинка

  4. Фото з подій

    • Галерея зі свят, екскурсій, конкурсів

  5. Проєкти

    • Сторінка для розміщення проєктних робіт (текст, фото, відео)

  6. Контакти

    • Email класного керівника

    • Посилання на шкільний сайт


Елементи, які бажано використати:

  • Заголовки для кожного розділу

  • Зображення з підписами

  • Кнопки (наприклад, "Переглянути галерею", "Завантажити файл")

  • Вставки Google Диску (презентації, документи)

  • Відео YouTube (можна зняти й додати власні)


Кольори та стиль:

  • Основний колір: блакитний (кольори українського прапора)

  • Шрифт: читабельний, без "петелек" (напр. Arial або Open Sans)


Поради:

  • Використовуйте "тему сайту" з чіткою навігацією

  • Не перевантажуйте сторінку: максимум 1-2 зображення на блок

  • Використовуйте однаковий стиль оформлення на кожній сторінці


Ідеї для майбутнього:

  • Розмістити твори з української мови чи літератури

  • Створити розділ "Юні журналісти" — з новинами класу

  • Додати календар подій


Створіть разом і поділіться посиланням — покажіть батькам, друзям, учителям!

Рефлексія від 1 учня

Сподобався:

0

Так: 1

Ні: 0

Зрозумілий:

0

Так: 1

Ні: 0

Потрібні роз'яснення:

0

Ні: 1

Так: 0

Рекомендуємо

Створення веб-сторінок завтоматизованими засобами. Практична робота 15

Створення веб-сторінок завтоматизованими засобами. Практична робота 15

546

Аватар профіля Лизько Валентина Степанівна
Інформатика
8 клас

30 грн

Створення та адміністрування сайту.

Створення та адміністрування сайту.

70

Аватар профіля Кутенський Василь Григорович
Інформатика
10 клас

50 грн

Тема: Системи керування вмістом для веб-ресурсів (CMS)

Тема: Системи керування вмістом для веб-ресурсів (CMS)

67

Аватар профіля Кутенський Василь Григорович
Інформатика
10 клас

50 грн

Візуалізація рядів і трендів даних. Інфографіка. Програмні засоби для аналізу даних та фінансових розрахунків.

Візуалізація рядів і трендів даних. Інфографіка. Програмні засоби для аналізу даних та фінансових розрахунків.

83

Аватар профіля Кутенський Василь Григорович
Інформатика
10 клас

50 грн

Офісні вебдодатки. Використання інтернет-середовищ для створення та публікації спільних документів різних видів. Рівні доступу. ГР2

Офісні вебдодатки. Використання інтернет-середовищ для створення та публікації спільних документів різних видів. Рівні доступу. ГР2

170

Аватар профіля Кутенський Василь Григорович
Інформатика
7 клас

50 грн

Мета: навчитися використовувати комп’ютерно-орієнтовані засоби (електронні посібники, органайзери, онлайн-календарі) для планування й організації навчальної діяльності.

Мета: навчитися використовувати комп’ютерно-орієнтовані засоби (електронні посібники, органайзери, онлайн-календарі) для планування й організації навчальної діяльності.

72

Аватар профіля Кутенський Василь Григорович
Інформатика
10—11 клас

50 грн

Схожі уроки

Впорядкування, пошук і фільтрування даних.

Впорядкування, пошук і фільтрування даних.

1305

Аватар профіля Вожга Ірина Леонідівна
Інформатика
9 клас

Створення й уведення структури таблиць. Поняття таблиці, поля, запису. Створення таблиць, означення полів і ключів у середовищі СКБД. Властивості полів, типи даних.

Створення й уведення структури таблиць. Поняття таблиці, поля, запису. Створення таблиць, означення полів і ключів у середовищі СКБД. Властивості полів, типи даних.

1123

Аватар профіля Савка-Ржематорська Оксана Василівна
Інформатика
9 клас

Цикли з передумовою у вкладених циклах

Цикли з передумовою у вкладених циклах

1353

Аватар профіля Вожга Ірина Леонідівна
Інформатика
6 клас

Налаштування часових параметрів аудіо- та відеоряду.

Налаштування часових параметрів аудіо- та відеоряду.

503

Аватар профіля Солодовнікова Катерина Олексіївна
Інформатика
8 клас

Елемент керування «кнопка». Поняття об’єкту та його властивостей і методів (на прикладі елементів екранної форми). Властивості і методи елементів керування.

Елемент керування «кнопка». Поняття об’єкту та його властивостей і методів (на прикладі елементів екранної форми). Властивості і методи елементів керування.

658

Аватар профіля Пилипенко Олена Володимирівна
Інформатика
8 клас

Елемент керування кнопка

Елемент керування кнопка

287

Аватар профіля Пилипенко Олена Володимирівна
Інформатика
8 клас