Васильківська загальноосвітня школа № 2

 

 

 

 

 

 

 

 

 

 

 

 

РОЗРОБКА САЙТУ 

ЗАСОБАМИ СЕРВІСУ GOOGLE SITE

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2021

 

 

 

ЗМІСТ

 

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

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

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

4. СТВОРЕННЯ ВЕБ-СТОРІНОК І СИСТЕМИ НАВІГАЦІЇ.. 5

5. ВСТАВЛЕННЯ ОБ’ЄКТІВ НА ВЕБ-СТОРІНКУ.................... 5

6. СПІЛЬНЕ РЕДАГУВАННЯ САЙТУ......................................... 7

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

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

Розробка веб-сайтів складається з кількох етапів

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

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

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

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

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

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

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

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

Розробка сайту відбувається у кілька кроків:

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

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

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

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

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

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

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

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

Після цього відкриється головна сторінка нового сайту в режимі розробки і сайт вважається створеним. На Google Диску з’явиться ярлик сайту з підписом Сайт без назви та значком. Надалі цей ярлик можна використовувати, щоб відкрити сайт для редагування. Для того щоб сайт отримав назву, потрібно ввести її в поле. Введіть назву сайту у верхній частині заголовка сторінки зліва та натиснути клавішу Enter або вибрати місце за межами назви. Одночасно відповідним чином буде змінено текст Сайт без назви над сторінкою.

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

 

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

Сайт може містити логотип. Для додавання логотипа сайту потрібно:

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

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

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

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

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

Кожна сторінка сайту містить верхній колонтитул одного з видів: великий банер, банер або лише заголовок. У верхньому колонтитулі розміщено назву вебсторінки. Якщо вид верхнього колонтитула великий банер або банер, то він містить ще й фонове зображення. Вид колонтитула та фонове зображення можна змінити. Панель з відповідними кнопками з’являється, якщо навести вказівник на нижню частину колонтитула. Зображення для колонтитула, як і для логотипа, можна завантажити з локального комп’ютера або з Інтернету. Вибір зображення в Інтернеті виконується так само, як і логотипа, але для колонтитула пропонується додаткова вкладка — галерея зображень.

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

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

4.      СТВОРЕННЯ ВЕБ-СТОРІНОК І СИСТЕМИ НАВІГАЦІЇ

Нова веб-сторінка сайту створюється з використанням елементів керування вкладки Сторінки панелі інструментів.

Створити сторінку одного рівня із щойно створеною сторінкою можна, вибравши кнопку Додати сторінку. Наприклад, якщо сайт містить лише сторінку Домашня сторінка, то, використавши кнопку Додати сторінку, можна створити сторінки Подорожі та Тварини. Якщо ж останньою була створена сторінка Київ, то, використавши кнопку Додати сторінку, можна створити сторінку Львів.

Щоб створити сторінку нижчого рівня, ніж вибрана на вкладці сторінка, потрібно вибрати кнопку в рядку з назвою сторінки та в меню, що відкрилося, вибрати команду Додати підсторінку. Так можна створити, наприклад, сторінки Київ і Львів, якщо вибрано сторінку Подорожі, та сторінку Рибки, якщо вибрано сторінку Тварини. Таким чином можна створити до п’яти рівнів підсторінок. У процесі створення веб-сторінок на вкладці Сторінки утворюється мапа сайту, що відображає структуру сайту. Змінити рівень веб-сторінки в структурі сайту можна, перетягуючи назву сторінки на потрібну позицію. Одночасно зі створенням нової сторінки на панелі навігації у верхньому колонтитулі сторінок сайту додається гіперпосилання для переходу на цю сторінку. Якщо кількість сторінок більша, ніж може уміститися в один ряд на екрані, то на панелі навігації з’являється команда Більше з кнопкою Розгорнути або згорнути, яка відкриває спадний список з гіперпосиланнями на веб-сторінки. Такі самі кнопки розміщуються поруч з назвами сторінок, для яких створено під сторінки.

Положення панелі навігації можна змінити. Для цього слід:

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

2.   Вибрати кнопку Налаштування навігації.

3.   Вибрати спосіб відображення навігаційної панелі.

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

5.      ВСТАВЛЕННЯ ОБ’ЄКТІВ НА ВЕБ-СТОРІНКУ.

Для вставлення об’єктів різних типів на сторінки сайту використовують елементи керування вкладки Додати панелі інструментів.

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

1.   Навести вказівник на область розділу.

2.   Вибрати кнопку Фон розділу , що з’явиться біля його лівої межі.

3.   Вибрати стиль розділу із числа запропонованих (мал 4 19).

Усередині розділу об’єкт розміщується в окремому блоці. Блок має рамку з маркерами, використовуючи які, можна змінювати розміри блока. Об’єкт усередині блока можна форматувати, використовуючи меню блока. Вміст меню блока залежить від типу об’єкта.

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

•   часу (годинники) — hotelmix.com.ua/widgets/clock;

•   погодні — weather.bigmir.net/informer/kiev/8958;

•   новинні — ua.korrespondent.net/informers;

•   календарні — www.dilovamova.com/index.php?page=16 та ін.  Для вставлення інформера на сторінку сайту слід:

1.   Знайти в Інтернеті та скопіювати HTML-код інформера.

2.   Вибрати на вкладці Додати кнопку Вставити.

3.   Вибрати на панелі Вставити з Інтернету вкладку Вставити код.

4.   Уставити в поле скопійований HTML-код інформера.

5.   Вибрати кнопки Далі та Додати.

Після заповнення сторінок контентом потрібно переглянути, який вигляд матиме сайт для користувача. Для цього призначено кнопку Попередній перегляд , яка розташована у верхній частині вікна браузера. Після її вибору сторінки сайту відображаються так, як їх будуть бачити відвідувачі вашого сайту. Можна вибрати перегляд на великому екрані, планшеті або смартфоні. Ви вже знаєте, що сайт стане доступним для перегляду та отримає URL-адресу лише після його опублікування. Для цього призначена кнопка Опублікуватиу верхній частині вікна. URL-адреса сайту складається з двох частин: незмінної для всіх сайтів, створених у системі Google Сайти — https://sites.google.com/view/, та унікальної, яку ви уводите під час опублікування сайту. Наприклад, для сайту Світ захоплень, URL-адресою може бути

https://sites.google.com/view/ourinterest. Усі користувачі Інтернету, хто знатиме URLадресу вашого сайту, зможуть переглядати його сторінки. Під час опублікування сайту ви можете погодитись або заборонити пошуковим системам показувати ваш сайт у результатах пошуку. Опубліковувати сайт потрібно кожного разу після внесення змін до його сторінок. Публікацію сайту можна скасувати, вибравши відповідну команду у списку кнопки Опублікувати.

6.      СПІЛЬНЕ РЕДАГУВАННЯ САЙТУ.

Сайт, який ви створили, можете самостійно доповнювати новими сторінками, редагувати вміст, змінювати його структуру. Крім того, ви можете запросити окремих користувачів редагувати разом з вами сторінки сайту. Це зручно для організації колективної роботи із сайтом. Наприклад, під час створеня сайту Світ захоплень ви можете працювати групою. При цьому кожен з групи зможе заповнювати сторінку, яка відповідає її або його захопленню. Для надання доступу для редагування іншим користувачам призначена кнопку Додати редакторів , яка розміщена у верхній частині екрана. Після вибору цієї кнопки відкривається вікно, у полі Запросити користувачів якого ви можете ввести електронні адреси осіб, яким даєте дозвіл на редагування вашого сайту. Редакторам, яких ви запросили, ви можете заборонити дії з адміністрування сайту. Для цього потрібно встановити позначку прапорця Заборонити редакторам публікувати сайт, змінювати параметри доступу й додавати користувачів.

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

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

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

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

3.   Уведіть  у поле Введіть назву сайту в верхній частині сторінки зліва назву Педагогічний досвід і натисніть клавішу Enter.

4.   Додайте логотип до сайту. Для цього: 

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

•      Виберіть кнопку Додати логотип.

•      Виберіть кнопку Вибрати.

•      Виберіть вкладку Пошук.

•      Уведіть ключове слово інтерес у поле пошуку та натисніть клавішу Enter.

•      Виберіть одне із зображень і кнопку Вибрати.

•      Виберіть команду Використовувати колір логотипа для теми.

5. Змініть зображення у верхньому колонтитулі. Для цього: 

•      Наведіть вказівник на верхній колонтитул.

•      Виберіть кнопку Змінити зображення і команду Вибрати зображення.

•      Виберіть на вкладці Галерея одне із зображень.

•      Виберіть кнопку Вибрати.

6. Додайте нижній колонтитул. Для цього: 

•      Підведіть вказівник до нижньої частини сторінки .

•      Виберіть кнопку Додати нижній колонтитул.

•      Уведіть у текстове поле поточний рік, ваше прізвище та ім’я.

•      Розташуйте текст по центру.

•      Змініть колір фону нижнього колонтитула. Для цього виберіть зліва від нижнього колонтитула кнопку Фон розділу та команду Виділення 2  Виберіть точку за межами текстового поля.

7.   Опублікуйте ваш сайт. Виберіть кнопку Опублікувати та введіть частину URL-адреси — слово experience та ваше прізвище, записане латиницею.

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

9.   Змініть назву сторінки на Портфоліо.

10.Уставте на сторінку текстове поле, вибравши відповідну кнопку на вкладці Додати на панелі інструментів.

11.Уведіть у поле список з 3–4 пунктів з назвами напрямків власної педагогічної діяльності (портфоліо, методична скарбничка, виховна робота, самоосвіта, захоплення…).

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

13.Знайдіть в Інтернеті та вставте на створені сторінки відповідні зображення. Для цього скористайтеся кнопкою Зображення з вкладки Додати та пошуком зображень на вкладці Пошук.

14.Опублікуйте сайт. Перегляньте опублікований сайт.

15.Уставте на домашню сторінку гіперпосилання на одну із сторінок вашого сайту. Для цього:

•      Виберіть на панелі навігації гіперпосилання Домашня сторінка.

•      Виділіть перший елемент списку в текстовому блоці.

•      Виберіть кнопку Вставити посилання в меню блока.

•      Виберіть назву відповідної сторінки вашого сайту в списку, що відкриється.

•      Виберіть кнопку Застосувати.

 16.Уставте на домашній сторінці гіперпосилання на сайт Природа України (http://nature.land.kiev.ua) Для цього: 

•      Виберіть кнопку Вставити на вкладці Додати.

•      Уведіть адресу http://nature.land.kiev.uaв поле URL-адреса.

•      Виберіть кнопку Додати.

17.Уставте на домашню сторінку інформер часу (годинник) Для цього: 

•      Відкрийте нову вкладку браузера та введіть URL-адресу hotelmix.com.ua/widgets/clock 

•      Виберіть гіперпосилання Отримати HTML код поруч із годинником, який  вам подобається.

•      Виділіть і скопіюйте HTML-код у вікні, що відкриється.

•      Виберіть вкладку браузера з домашньою сторінкою вашого сайту.

•      Виберіть на вкладці Додати кнопку Вставити.

•      Виберіть на панелі Вставити з Інтернету вкладку Вставити код.

•      Уставте в поле скопійований HTML-код інформера. 

•      Виберіть кнопки Далі та Додати.

18. Розташуйте текст на сторінці та інформер поруч у одному розділі. Для цього: 

•      Виберіть текстовий блок 

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

•      Перетягніть  блок з інформером і  розташуйте його в одному розділі поруч із текстовим блоком.

19.   Опублікуйте сайт. Перегляньте опублікований сайт.

20.   Закрийте вікно браузера.