Щодня ви відкриваєте багато вебсторінок. Те, що ви бачите, — це відображений браузером результат роботи веброзробників і дизайнерів. 

Для створення вебсторінок існують такі основні підходи:

1. Через написання коду. Сайти можна створювати за допомогою мови розмітки HTML або за допомогою різних мов програмування, в тому числі і на мові Python. Такі сайти мають безграничні можливості. Недолік — складність процесу.

2. За допомогою конструкторів — найбільш простий спосіб для тих, кто не бажає досконально вивчати код. Недолік — суттєве обмеження можливостей.

3. За допомогою систем керування контентом (CMS) — найбільш поширений на сьогодні спосіб, що об’єднує простоту конструктора та широкі можливіості маштабування. Найбільш поширені CMS — WordPress, Joomla, Drupal. Недолік — наявність великої кількості зайвого коду, що може обтяжувати сторінки.

Структура вебсторінки

Вебсайт (website) або сайт (site) – це сукупність сторінок певного вмісту, доступних у мережі Інтернет, які об’єднані за змістом і за навігацією під єдиним доменним ім’ям. Обов’язковим для функціонування будь-якого вебсайту є вебсервер. Фізично сайт може розміщуватися як на одному, так і на кількох серверах. 

Існує багато онлайн-систем для автоматизованого створення сайтів. Ось деякі з них: wix.com, www.ucoz.ua, www.jimdo.com, www.hostinger.com.ua. Усі вони надають широкі можливості для створення вебсайтів з використанням як безкоштовних, так і платних складових. Подібні можливості щодо створення власного сайту має також додаток Google Sites. 

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

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

У 1998 році Ларрі Пейдж та Сергій Брін заснували Google. Це був докторський проект з інформатики, який вони проводили в Стенфордському університеті.

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

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

Основні особливості Google Sites

• Безкоштовний додаток: Користувачам не потрібно платити за хостинг, щоб мати можливість розробляти свою сторінку в рамках платформи Google - гіганта пошукової системи.

• Оптимізовані сторінки: Це дуже важливо, оскільки використання пристроїв обмежується не лише комп’ютером, але й планшетами, мобільними телефонами тощо. Тому дуже важливо, щоб сторінки були адаптовані до різних платформ, щоб полегшити перегляд користувачам. Google Sites пропонує адаптивні сторінки.

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

• Функції Google: Однією з найвидатніших речей, яку потрібно оцінити на Сайтах Google, є можливість додавання всіх функціональних можливостей Google. Наприклад, ви можете легко включити відео YouTube, Карти Google, Календар Google, електронні таблиці, файли Google Drive та інші варіанти.

• Немає обмежень на сторінку: Можна створювати необмежену кількість сторінок. Наприклад, для проекту потрібно три-десять сторінок, ви можете це зробити без проблем. Система веб-створення дуже проста, вона доступна для редагування, динамічна і дозволяє вибрати тему, яку ви хочете. Ви можете вибрати стовпці та блоки, необхідні користувачеві для формування своєї сторінки.

• Простий у використанні: Однією з найвидатніших речей є простота при створенні веб-сайту та подальшому додаванні вмісту. Не обов’язково знати коди та мову програмування.

• Можливість працювати в команді: Це варіант, який слід розглянути для проектів спільної роботи. Проектом можна поділитися з іншими користувачами, які також матимуть доступ до Інтернету, щоб внести відповідні зміни чи модифікації, які вони вважають.

• Спеціальний домен: Ви можете додати власний домен, вибравши ім'я, яке ви віддаєте перевагу своєму проекту. Крім того, Google Sites пропонує цілком доступну можливість щорічно мати власний домен.

Приклади сторінок у Сайтах Google

Цей варіант може бути ідеальним для тих малих та середніх компаній, які хочуть мати простий і практичний веб-сайт, щоб показати свій бізнес.

Наприклад, якщо у вас є місцевий торт, де ви хочете розширити інформацію про товари, які ви пропонуєте, додайте Карти Google на свою сторінку, щоб люди могли знайти вас і контакта. Це хороший варіант.

Не лише малі чи середні компанії можуть користуватися Google Sites, але існують великі бізнес-проекти, які вже мають свій веб-сайт на цій платформі.

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

Хоча це правда, що багато сторінок зроблено в WordPress, Google Sites - це гарна альтернатива наявності конкурентоспроможного та придатного для використання веб-сайту в Інтернеті.

Створення Google Sites 

Крок 1. Авторизуйтеся в Google пошті та зайдіть на свій Гугл диск.

Крок 2. Створіть сайт, виконавши команди: Створити → Більше → Google сайт

Щоб потрапити в сервіс Google Sites, знадобиться Google пошта, бо саме до аккаунту пошти прикріплені безліч сервісів для користувача, в тому числі, і Гугл сайти.

Таким чином, перший крок при створенні сайту дуже простий: заходимо в свій аккаунт Google.

Другий крок можна виконати декількома шляхами.

Найпростіше це можна зробити за допомогою Google Диска: натискаємо кнопку Створити, обираємо команду Більше, а потім команду Google сайти

Після цього потрапляємо в конструктор сайтів - спрощене, інтуїтивно зрозуміле середовище для роботи з сайтом.

Справа на панелі знаходяться опції додавання:

• текстових блоків, 

• зображень, 

• файлів, 

• HTML-коду, 

• контенту з інших сервісів Google. 

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

Крок 3. Задайте основні параметри сайта

1. Назву.

2. Заголовок головної сторінки.

3. Розмір «шапки сайта» та фонове зображення.

Кожен сайт має назву, яка відображає його зміст або призначення. Щоб дати назву новому сайту, її потрібно ввести в поле Введіть назву сайту у верхній частині заголовка сторінки. Одночасно буде змінено підпис ескізу сайту на Google Диску. 

Крок 4. Оберіть тему — шаблон офомрлення сторінок, обравши в правій частині вкладку «теми» 

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

Важливо! До публікації ваш сайт не доступний для перегляду іншими людьми. Сайт можна дооплацьовувати і після публікації. Кожен раз після внесення змін до сторінки вам потрібно оновити публікацію, інакше внесені вами зміни не будуть збережені. 

Після натискання кнопки Опублікувати на екран буде виведено вікно з відповідною назвою Опублікувати в Інтернеті. Вводимо заздалегідь обране ім'я сайту (виключно англійські літери, цифри та тире). Якщо ім'я містить недопустимі символи або вже використовується рядок буде виділено червоним кольором. У такому випадку ім'я необхідно змінити. Не слід вигадувати дуже довге ім'я, це буде незручно у подальшому використанні. 

Адреса Google сайту складається з обов'язкової частини https://sites.google.com/view/ за якою слідують придумані вами символи. Повністю ім'я сайту виглядає наприклад так https://sites.google.com/view/ivanov-portfolio2003 

Що таке хостинг? 

Хостинг — послуга з розміщення даних на серверах. Будь-які сервери, де розміщуються вебсторінки, поштові скриньки тощо, обслуговуються хостинг-провайдерами. 

Що таке служба Сайти Google? 

Сайти Google (англ. Google Sites), sites.google.com — безкоштовна хостинг-служба, яка надає також для користувачів, що не володіють технологіями  веброзробки, можливість створити простий сайт. Створений сайт автоматично розміщується на вебсервері за адресою site.google.com/site/[назва сайту], де назва сайту — це ім’я, яке задає розробник сайту. 

Які основні можливості Сайтів Google? 

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

• додавання на сторінку інформації з інших сервісів Google; 

• прикріплення до сторінок файлів, які можна завантажувати; 

• розмежування прав відвідувачів на зміну або читання інформації на сайті; 

• наявність колекції стилізованих шаблонів; 

• публікація сайту в Інтернеті без сторонньої реклами. 

Кожен сайт має пройти певні етапи розробки

Створення структури сайту в Google Sites 

1. Під час розробки структури вебсторінок слід враховувати такі рекомендації:  

• розміщувати назву сайту в заголовку всіх сторінок;  

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

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

• створити можливість переходу з будь-якої сторінки до перегляду головної (домашньої) сторінки сайту;  

• усувати будь-яку двозначність щодо наслідків дій під час вибору елементів керування на вебсторінці;  

• у нижньому колонтитулі (підвалі) зазначати авторські права (копірайт) та контактні дані дизайнера та власника ресурсу. 

2. Слід дбати про ергономічне розміщення об’єктів на вебсторінках, а для цього бажано дотримуватися таких правил: 

•  розміщувати найважливіші дані на початку сторінки;  

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

• розміщувати на сторінці не більше трьох колонок з контентом;  

• не допускати появи горизонтальних смуг прокручування на вебсторінках;  

• виділяти візуально фрагменти тексту та графічні зображення, що використовуються як гіперпосилання;  

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

3. Під час розробки вебсайту потрібно намагатися надати зручності для користувачів з особливими потребами. Для цього варто звертати увагу на таке:  

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

• для людей з вадами зору бажано надавати можливість змінювати розмір шрифту;  

• бажано, щоб зображення мали підписи та щоб на зображеннях не було дрібних деталей; 

• надати можливість збільшувати зображення для перегляду;  

• за можливості додавати на вебсторінки елементи, що озвучують важливі відомості на сайті. 

Одразу після створення сайт містить лише одну сторінку, яка є головною (домашньою) сторінкою сайту. Кожна сторінка сайту має назву. Назву головної сторінки потрібно ввести в поле Заголовок сторінки. Часто назва головної сторінки збігається з назвою сайту.

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

Додавання нової сторінки

Збереження внесених змін і їх публікація

Після внесення змін сайт необхідно опублікувати знову. Для цього натискаємо кнопку Опублікувати (верхній правий кут). Ім'я сайту змінювати не потрібно. При публікації зміненого сайту з'являється така інформація: 

• вигляд актуального сайту зліва;

• чернетка зміненого сайту (справа).

У верхньому лівому куті перелічені внесені зміни. Якщо вас влаштовує вигляд зміненого сайту натискаємо кнопку Опублікувати для підтвердження. 

Як скопіювати посилання на сайт

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

Слово контент походить від англійського content, що можна перекласти як зміст, вміст, інформаційне наповнення. Часто зустрічається термін «інформаційне наповнення», бо на сайті крім інформації «для корисного читання» є ще багато іншого, можливо, не менше корисної інформації, але користувачі Інтернету в першу чергу цікавляться саме корисною для читання інформацією - інформаційним наповненням сайту.

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

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

Додати контент на сторінку можна перейшовши на вкладку ВСТАВКА

Додавати можна:

• текстові поля

• зображення

• документи з Google диску

• посилання URL

• відео YouTube

• карта

• календар та ін.

В конструктор Google Sites вбудовані інструменти форматування тестового напису, які схожі на інструменти в текстовому процесорі MS Word. Меню з'являється при активації текстового поля, тобто достатньо клацнути в нього лівою кнопкою миші. Після цього вказівник миші можна вивести з меж текстового поля, на наявність меню це не впливає.

1. Маркери зміни розміру текстового поля

2. Вибір стилю текстового напису 

3. Вибір типу шрифта з запропонованого переліку

4. Вибір розміру шрифта

5. Вибір типу накреслення шрифта

6. Вибір кольору шрифта

7. Додавання до текстового напису гіперпосидання

8. Вирівнювання положення текстового напису

9. Створення маркованого або нумерованого списку

10. Видалення текстового напису

... Вхід в додаткові параметри

Варіант Додати пропонує завантажити файл зображення з комп'ютера. Якщо ви обираєте такий варіант буде виведено діалогове вікно звичайного вигляду. Відкриваємо потрібну папку та обираємо файл зображення.

Для вставленого зображення можна виконати такі дії:

• змінити розмір, 

• обрізати, 

• перетягнути за допомогою миші у інше місце сторінки, 

• перетягнути у текстове поле поруч з текстом. 

!Вставлену кнопку можна перемістити у будь-яке місце сторінки, наприклад на рисунку кнопка розташована праворуч від тексту. 

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

Додавання відео з YouTube

Відеоролики часто є необхідним атрибутом сайту. Це можуть бути навчальні, презентаційні, іміджеві, рекламні відеоролики. 

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

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

Як додати на сторінку карту? 

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

1. На вкладці ВСТАВКА вибери інструмент КАРТА. 

2. У вікні «Виберіть карту» у відповідному полі введи назву місця чи об’єкта.

3. Відкоригуй точне місце розташування, перемістивши позначку маркер.

4. Вибери тип зображення на карті — фотографія із супутника чи власне карта. 

5. Натисни кнопку «Вибрати». 

РОБОТА ЗА КОМП'ЮТЕРОМ

Виконання нашого проекту займе кілька уроків.

• Урок 1 (сьогодні). Створення та оформлення головної сторінки Гугл-сайту.

• Урок 2. Створення багаторівневого меню.

• Урок 3. Наповнення контентом.

Завдання:

1. Продумайте тематику та назву вашого сайту (приклади — мандрівки, кулінарія, авто, світ моїх захоплень тощо).

2. Створіть головну сторінку та опублікуйте її.

3. Надішліть покликання на ваш сайт на пошту: