Способи створення вебсайтів
Створення вебсайту починається після визначення структури сайту і створення дизайн-макета сторінок.
Існує кілька способів створення сайту (рис.1):
- Ручне створення HTML-коду у текстовому редакторі.
- Використання спеціалізованих вебредакторів.
- Використання систем управління вебконтентом (WCMS).
- Використання онлайн-конструкторів сайтів.
Рис.1. Способи створення сайтів.
Ці програми мають засоби для візуального конструювання вебсторінок. Розробник розміщує на вебсторінках об’єкти — зображення, таб лиці, списки та інше, вибираючи їх заготовки з бібліотеки об’єктів. HTML-код кожної вебсторінки генерується на основі отриманого набору об’єктів. Такі програми називають WYSIWYG-редакторами (англ. What You See Is What You Get — що ви бачите, то ви й отримуєте).
Особливості вебредакторів:
Автоматизовані засоби створення вебсайтів
Вебредактори — програми, які призначено для створення вебсторінок сайтів, наприклад Adobe Dreamweaver, Microsoft FrontPage, WYSIWYG Web Builder та ін.
Особливості вебредакторів:
- використання готових шаблонів елементів сторінки;
- вибір об’єктів з бібліотеки (текст, зображення, таблиці, списки, посилання);
- НTML-код генерується автоматично.
Системи управління вебконтентом WCMS (англ. Web Content Management System — система управління вебконтентом) — програми, які призначено для створення, редагування та керування вмістом веб-сайту.
Популярними є системи Joomla, Wordpress, MediaWiki та ін. Вони містять набори вже готових шаблонів оформлення вебсторінок і модулів, що роблять сайт динамічним: форумів, стрічок новин, каталогів файлів тощо. Контент сторінок, створених у цих системах, зберігається в базі даних, а HTML-код генерується автоматично на основі шаблону.
Зверни увагу!
Назване програмне забезпечення можна встановити на локальному комп’ютері. Створені в їх середовищі вебсайти потрібно самостійно розміщувати в Інтернеті.
- використання готових шаблонів сторінок;
- наявність модулів: форуми, новини, каталоги файлів;
- інформація зберігається у базі даних;
- HTML-код створюється автоматично на основі шаблону.
Онлайн-конструктори сайтів — це сервіси, які дозволяють створювати сайти безпосередньо в інтернеті.
Онлайн-системи конструювання сайтів призначено для розробки сайтів безпосередньо на віддаленому сервері в Інтернеті. Такими є сервіси Google Сайти, Weebly, Wix, Weblium та ін. Створені в цих сервісах сайти автоматично розміщуються на серверах відповідних сервісів, і розробник не може безпосередньо редагувати HTML-код вебсторінок.
Створення вебсайту засобами онлайн-системи конструювання сайтів відбувається в кілька кроків:
1. Реєстрація облікового запису на сервері онлайн-системи конструювання сайтів.
2. Вибір назви сайту та шаблону його оформлення.
3. Створення сторінок сайту та системи навігації.
4. Заповнення сторінок контентом.
5. Публікація сайту.
Особливості:
- використання готових шаблонів дизайну;
- сайт автоматично розміщується на сервері;
- HTML-код зазвичай не редагується вручну.
Створення сайту в Google Сайтах
Для роботи потрібно мати обліковий запис Google.
Кроки створення сайту:
1. Увійти у свій Google-акаунт.
2. Вибрати у списку кнопки Додатки Google 
додаток Сайти 
або відкрити сторінку з адресою .
додаток Сайти або відкрити сторінку з адресою .3. Вибрати шаблон або створити порожній сайт.
4. Заповнити сторінки контентом.
5. Опублікувати сайт.
Усі шаблони, за виключенням шаблону Порожній сайт, містять кілька сторінок, на яких вже розміщено панелі навігації, елементи оформлення та рекомендації щодо заповнення сторінок контентом.
Щоб створити сайт на основі шаблону Порожній сайт, можна скористатися одним із способів:
- вибрати у вікні Сайти шаблон Порожній сайт;
- вибрати в нижньому правому куті вікна Сайти кнопку Створити новий сайт
; - відкрити вікно Google Диска та виконати Створити ⇒ Більше ⇒ Google Сайти.
Незалежно від обраного способу у вікні браузера буде відкрито редактор сайтів Google з однією головною сторінкою нового сайту в режимі редагування.
Рис.2.Вікно редактора сайтів Google з головною сторінкою нового сайту:
1 – робоче поле вебсторінки;
2 – верхній колонтитул вебсторінки;
3 – верхня панель редактора сайтів;
4 – бічна панель редактора сайтів.
Верхня панель редактора містить назву сайту та інструменти для роботи із сайтом.
Основну частину вікна займає робоча область, у якій розміщено:
1 – робоче поле вебсторінки;
2 – верхній колонтитул вебсторінки;
3 – верхня панель редактора сайтів;
4 – бічна панель редактора сайтів.
Верхня панель редактора містить назву сайту та інструменти для роботи із сайтом.
Основну частину вікна займає робоча область, у якій розміщено:
- верхній колонтитул вебсторінки з фоновим зображенням, назвою (заголовком) сторінки та назвою сайту;
- робоче поле сторінки для розміщення текстових і нетекстових елементів.
Бічна панель редактора сайтів з вкладками Вставити, Сторінки, Теми. Інструменти цієї панелі використовують для додавання, видалення та редагування сторінок, вставлення об’єктів на сторінки, вибору та змінення оформлення тощо.
Щоб задати назву сайту, її потрібно ввести в поле Введіть назву сайту у верхньому колонтитулі головної сторінки.
Для змінення теми оформлення сайту слід:
1. Вибрати вкладку Теми на бічній панелі.
2. Вибрати назву теми оформлення.
3. Вибрати кольорову гаму та стиль шрифту з тих, що запропоновані для вибраної теми (рис.3).
Для змінення теми оформлення сайту слід:
1. Вибрати вкладку Теми на бічній панелі.
2. Вибрати назву теми оформлення.
3. Вибрати кольорову гаму та стиль шрифту з тих, що запропоновані для вибраної теми (рис.3).
Рис.3. Вкладка Теми редактора сайтів Google:
1 — назва вибраної теми оформлення та приклад оформлення сторінки;
2 — список з варіантами кольорів для вибраної теми оформлення;
3 — список з варіантами шрифтів для вибраної теми оформлення.
Після наведення вказівника на верхній колонтитул з’являється панель з командами Зображення та Тип верхнього колонтитула. Після вибору першої команди можна додати зображення для верхнього колонтитула з носіїв даних комп’ютера або вибрати з розміщених в інтернеті. Вибір другої команди дає можливість змінити тип колонтитула – Обкладинка, Великий банер, Банер або Лише заголовок. Верхні колонтитули на різних сторінках сайту можуть відрізнятися.
Щоб розмістити нижній колонтитул, слід підвести вказівник до нижньої межі сторінки та вибрати кнопку Додати нижній колонтитул. Нижній колонтитул може містити рік створення сайту, інформацію про автора, контактні дані.
2 — список з варіантами кольорів для вибраної теми оформлення;
3 — список з варіантами шрифтів для вибраної теми оформлення.
Після наведення вказівника на верхній колонтитул з’являється панель з командами Зображення та Тип верхнього колонтитула. Після вибору першої команди можна додати зображення для верхнього колонтитула з носіїв даних комп’ютера або вибрати з розміщених в інтернеті. Вибір другої команди дає можливість змінити тип колонтитула – Обкладинка, Великий банер, Банер або Лише заголовок. Верхні колонтитули на різних сторінках сайту можуть відрізнятися.
Щоб розмістити нижній колонтитул, слід підвести вказівник до нижньої межі сторінки та вибрати кнопку Додати нижній колонтитул. Нижній колонтитул може містити рік створення сайту, інформацію про автора, контактні дані.
Джерела:
Інформатика : підруч. для 8 кл. закл. загал. серед. освіти / [О. О. Бондаренко, В. В. Ластовецький, О. П. Пилипчук, Є. А. Шестопалов]. — Харків : Вид-во «Ранок», 2025
Інформатика : підруч. для 8 кл. загальноосвіт. навч. закл. / Й.Я.Ривкінд [та ін.]. — Київ: Генеза, 2025.