Урок 4.3. Створення сайту засобами онлайн-системи

ЕТАПИ РОЗРОБКИ ВЕБ-САЙТІВ

З 9-го класу ви знаєте, що розробка веб-сайтів складається з кількох етапів. Ці етапи подібні до етапів розв’язування задач із використанням комп’ютера. Нагадаємо їх:

1. Постановка завдання. На цьому етапі визначається мета створення сайту, його основна тематика, аудиторія потенційних відвідувачів, перелік сервісів для розміщення на сайті та ін.

2. Визначення внутрішньої структури сайту. На цьому етапі складається перелік розділів сайту для формування системи навігації та список веб-сторінок, визначаються зв’язки між ними. Результатом повинна стати мапа (карта) сайту — схема, що візуально відображає ієрархію сторінок сайту, зв’язки та переходи між ними.

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

4. Розробка дизайну сторінок сайту. Дизайн сторінок включає набір значень властивостей текстових і графічних об’єктів сторінки: кольорової гами, елементів графічного оздоблення, набору шрифтів та ін.

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

6. Якщо на етапі постановки завдання передбачалося розміщення на сайті таких об’єктів, як системи пошуку, голосування, форум та ін , то потрібен ще й етап програмування сайту.

7. Розміщення (публікація) сайту в Інтернеті. На даному етапі сайт отримує доменне ім’я та розміщується на сервері хостинг-провайдера. Після цього сайт стає доступним для перегляду користувачами Інтернету, якщо він не має обмежень на доступ.

СТВОРЕННЯ САЙТУ В СЕРВІСІ GOOGLE САЙТИ

Ви знаєте, що розробка сайту засобами онлайн-систем керування вмістом веб-сайтів відбувається в кілька кроків:

1. Реєстрація облікового запису на сервері онлайн-системи керування вмістом веб-сайтів.

2. Створення сайту, вибір його назви.

3. Вибір елементів оформлення сайту.

4. Створення сторінок сайту, системи навігації, заповнення сторінок контентом.

5. Публікація сайту.

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

1. Увійти на Google Диск з вашим обліковим записом Google.

2. Виконати Створити ⇒ Більше ⇒ Google Сайти.

Після цього відкриється головна сторінка нового сайту в режимі редагування (мал. 1) і сайт вважається створеним. На Google Диску з’явиться ярлик сайту з підписом Сайт без назви та значком сайту. Надалі цей ярлик можна використовувати, щоб відкрити сайт для редагування.

Для того щоб сайт отримав назву, потрібно ввести її в поле Введіть назву сайту у верхній частині заголовка сторінки зліва (мал. 1, 3) та натиснути клавішу Enter або вибрати місце за межами назви. Одночасно відповідним чином буде змінено текст Сайт без назви над сторінкою (мал. 1, 4)

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

ВИБІР ЕЛЕМЕНТІВ ОФОРМЛЕННЯ САЙТУ

Сайт може містити логотип. Файл із зображенням логотипа можна завантажити з локального комп’ютера або знайти в Інтернеті.

Для додавання логотипа сайту потрібно:

1. Підвести вказівник до лівого верхнього кута сторінки.

2. Вибрати кнопку Додати логотип.

3. Вибрати спосіб додавання логотипа: Завантажити або Вибрати. У першому випадку потрібно вибрати файл із зображенням з локального комп’ютера. У другому випадку відкривається панель Вибрати зображення з вкладками: За URL-адресою, Пошук, Ваші альбоми, Google Диск (мал. 2). Використовуючи елементи керування вкладок, можна знайти зображення в Інтернеті.

4. Вибрати потрібне зображення та кнопку Вибрати.

Після вибору логотипа можна встановити колір його фону (білий, чорний або прозорий) і використати колір логотипа для теми оформлення сайту. Відповідні елементи керування містяться у вікні Додати логотип, що відкривається після вибору зображення для логотипа. 

Логотип і назва сайту будуть відображатися у верхній частині вікна на кожній сторінці.

Кожна сторінка сайту містить верхній колонтитул (мал. 1, 2) одного з видів: Обкладинка, Великий банер, Банер або Лише заголовок. У верхньому колонтитулі розміщено назву веб-сторінки. У перших трьох випадках верхній колонтитул містить ще й фонове зображення.

Вид колонтитула та фонове зображення можна змінити.

Панель з відповідними кнопками з’являється, якщо навести вказівник на нижню частину колонтитула. Зображення для колонтитула, як і для логотипа, можна завантажити з локального комп’ютера або з Інтернету. Вибір зображення в Інтернеті виконується так само, як і логотипа, але для колонтитула пропонується додаткова вкладка — Галерея.

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

Змінити оформлення сторінок сайту можна також, вибравши тему оформлення на вкладці Теми на панелі інструментів. Кожна тема передбачає застосування кольорової гами, стилю шрифту, фонового зображення, яке додається у верхній колонтитул за замовчуванням, елементів оформлення для назви сторінки та системи навігації.

Крім верхнього колонтитула, до всіх сторінок сайту можна додати нижній колонтитул, так званий підвал. Для його додавання слід підвести вказівник до нижньої границі вікна браузера та вибрати кнопку Додати нижній колонтитул, що з’явиться. У нижньому колонтитулі зазвичай розміщують відомості про роки існування сайту, його розробників, контактні дані тощо.

Працюємо з комп'ютером

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

1. Створіть у системі Google Сайти веб-сайт Світ моїх захоплень, на якому ви будете розміщувати відомості про ваші захоплення. 

2. Розмістіть на сайті логотипю

3. Змініть зображення у верхньому колонтитулі, додайте нижній колонтитул.

4. Створіть Інформаційну структуру вашого сайту (у вигляді схеми) у будь-якій з програм: Microsoft PowerPoint, Microsoft Word, або сервісів: Xmind, Draw.io тощо. Збережіть файл.

5. Якщо ви створювали Інформаційну структуру сайту у файлі, то завантажте збережений файл на власний Google Диск та прикріпіть посилання на нього до Ваших робіт. Якщо ви працювали на сервісі Xmind або Draw.io, то скопіююте посилання та прикріпіть його знову ж таки до Ваших робіт у завданні на цей урок на платформі Google ClassRoom.