Інструктаж з БЖД. Структура сайту. Види сторінок сайту Правила ергономічного розміщення відомостей на вебсторінці

📘 Конспект уроку (7 клас)

Тема: Структура та типи вебсайтів. Навігація та ергономіка

🔹 1. Що таке сайт?

Сайт (вебсайт) — це сукупність вебсторінок певної тематики, пов’язаних між собою гіперпосиланнями та розміщених на одному сервері.

Слово website означає «місце в мережі».

👉 У 7 класі вже можна створити власний сайт! Він може стати:

• майданчиком для саморозвитку;

• портфоліо;

• способом ділитися знаннями;

• першим кроком до майбутньої професії.

🔹 2. Структура сайту

Розрізняють внутрішню та зовнішню структуру.

📌 Внутрішня структура

Це спосіб організації сторінок сайту та зв’язків між ними.

1️⃣ Лінійна структура

• Сторінки розташовані послідовно.

• Кожна сторінка веде на наступну.

• Підходить для підручників, інструкцій.

2️⃣ Ієрархічна (деревоподібна) структура

• Сторінки можуть посилатися одна на одну.

• Підходить для каталогів, бібліотек, добірок матеріалів.

• Має багато гіперпосилань.

🔹 Гібридна структура

Поєднання кількох типів (найчастіше — деревоподібної та лінійної).

🔹 3. Зовнішня структура

Це розміщення елементів на сторінці:

• меню;

• логотип;

• пошук;

• банери;

• текст;

• контактні дані.

Усі сторінки мають бути в єдиному стилі.

🔹 4. Ергономіка сайту

Ергономічний сайт — зручний для користувача.

Він враховує:

• вік;

• рівень знань;

• звички;

• обладнання;

• очікування користувачів.

📌 Навігація повинна відповідати на питання:

• Де я?

• Куди можу перейти?

• Як повернутися назад?

🔹 5. Типи вебсторінок

🔹 Статичні сторінки

Створюються за допомогою HTML.
Не змінюються без редагування коду.

🔹 Інтерактивні сторінки

Дозволяють вводити дані (форми, пошук, реєстрація).
Використовують скрипти (JavaScript).

🔹 6. Динамічні сайти та CMS

Для створення сучасних сайтів використовують системи керування контентом (CMS):

• Drupal

• Joomla

• WordPress

Вони дозволяють:

• змінювати текст без зміни дизайну;

• додавати модулі (форум, опитування, пошук);

• керувати сайтом без знання програмування.

• Є головна сторінка.

• Від неї відходять розділи та підрозділи.

• Найпоширеніший тип структури.

Виконати вправу

📱 Практичні завдання (можна виконати з телефону)

✅ Завдання 1. Визнач структуру сайту

1. Зайдіть на будь-який відомий сайт (наприклад, новинний).

   Можна скористатись покликанням https://www.ukr.net/ https://tsn.ua/

2. Визначте:

   • Чи є головна сторінка?

   • Чи є розділи?

   • Який тип структури використано?

3. Зробіть скріншот меню.

Завдання 2. Міні-проєкт «Мій сайт»

У нотатках телефону:

1. Запишіть тему майбутнього сайту.

2. Намалюйте схему структури (можна у вигляді списку).

3. Придумайте:

   • назву;

   • 3 розділи;

Що таке ергономічний сайт?

Чим відрізняється статична сторінка від інтерактивної?