1 of 27

Практична робота 13 Конструювання сайтів з використанням онлайн-систем

За новою програмою

Урок 51

9

2 of 27

Практична робота 13

Розділ 9 § 9.3

структуру папок:

E:\9-А(Б) клас\Власне прізвище\Урок 51

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

Пригадайте

Створіть

Пам’ятайте

Як за допомогою сервісу Google Сайти створювати сайти;
як налаштувати стильове оформлення сайта, створеного засобами сервісу Google Сайти;
як додавати нові сторінки до сайта;
як додавати на створені веб-сторінки текст, зображення та інші об'єкти;
як редагувати вміст веб-сторінки.

9

3 of 27

Повторення

Розділ 9 § 9.3

Складові веб-сторінки

Елементи навігації

Дизайн

Контент

9

4 of 27

Елементи структури веб-сторінок

Розділ 9 § 9.3

У веб-сторінці міститься HTML-код сторінки, що складається з даних двох типів:

Тексту

Тегів

який відображатиметься на сторінці;

(англ. tag — ярлик, ознака) — команд, що визначають розмітку тексту: його структуру, формат фрагментів тексту, забезпечують уставлення нетекстових об'єктів на сторінку та інше.

9

5 of 27

Етапи створення веб-сайту

Розділ 9 § 9.3

Розробка веб-сайту складається з кількох етапів. Ці етапи аналогічні до етапів розв'язування задач з використанням комп'ютера.

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

9

6 of 27

Етапи створення веб-сайту

Розділ 9 § 9.3

Визначення структури сайту. На цьому етапі важливо скласти перелік розділів сайту для формування системи навігації, список сторінок, визначити зв'язки між ними.

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

9

7 of 27

Етапи створення веб-сайту

Розділ 9 § 9.3

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

Наш клас (головна сторінка)

Про нас

Історія класу

Фотогалерея

Навчання

Предмети

Навчальні предмети

Розклад уроків

Відпочинок

Поетична творчість

Наші свята

Походи та екскурсії

Спортивні досягнення

9

8 of 27

Етапи створення веб-сайту

Розділ 9 § 9.3

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

основний матеріал

додаткові інформаційні та рекламні блоки

анонси

меню

лічильник відвідувачів тощо

9

9 of 27

Етапи створення веб-сайту

Розділ 9 § 9.3

Як правило, на веб-сторінках передбачено розміщення:

верхнього блоку — заголовка, у якому містяться логотип і назва сайту;

блоку навігації (меню) для переходу до основних розділів сайту;

інформаційного блоку з основним матеріалом, що займає центральну частину сторінки;

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

Блок заголовка

Інформаційний блок

Блок наві-гації

Підвал

9

10 of 27

Етапи створення веб-сайту

Розділ 9 § 9.3

Розробка дизайн-макета сторінок сайту. Дизайн-макет сторінок включає набір значень властивостей текстових і графічних об'єктів сторінки:

Кольорової гами сторінок

Елементів графічного оздоблення

Набору шрифтів та іншого

Тобто визначає стиль сайту.

9

11 of 27

Етапи створення веб-сайту

Розділ 9 § 9.3

Створення та верстка сторінок сайту. Створюються сторінки, як правило, з використанням тегів мови HTML. У процесі створення відбувається верстка сторінок.

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

9

12 of 27

Етапи створення веб-сайту

Розділ 9 § 9.3

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

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

9

13 of 27

Етапи створення веб-сайту

Розділ 9 § 9.3

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

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

9

14 of 27

Етапи створення веб-сайту

Розділ 9 § 9.3

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

Хостинг (англ. hosting — виявлення гостинності) — виділення апаратних і програмних ресурсів сервера для розміщення файлів користувача, забезпечення доступу до них, опрацювання запитів та іншого.

Організації, що надають послуги хостингу, називають хостинг-провайдерами.

9

15 of 27

Етапи створення веб-сайту

Розділ 9 § 9.3

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

Google Сайти

uCoz

Weebly та інші

У цих системах створення веб-сайту здійснюється у режимі онлайн одразу на сервері хостингу.

9

16 of 27

Автоматизоване створення веб-сайту

Розділ 9 § 9.3

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

1

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

2

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

3

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

4

Заповнення сторінок контентом.

5

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

9

17 of 27

Автоматизоване створення веб-сайту

Розділ 9 § 9.3

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

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

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

Переглянути інструкцію зі створення сайту, використовуючи панель Add content (англ. add content — додати зміст), або закрити її.

9

18 of 27

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

Розділ 9 § 9.3

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

Для вибору шаблону оформлення сайту потрібно:

1

Вибрати вкладку Теми у правій частині вікна.

2

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

3

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

9

19 of 27

Створення веб-сторінок

Розділ 9 § 9.3

Для створення нової сторінки на сайті потрібно:

Вибрати вкладку Сторінки у правій частині вікна.

Вибрати кнопку Додати сторінку

Увести назву сторінки в поле Назва сторінки.

Вибрати гіперпосилання Готово.

9

20 of 27

Вставлення об'єктів на веб-сторінку

Розділ 9 § 9.3

На веб-сторінку можна вставити різні об'єкти. Для цього призначено вкладку Додати у правій частині вікна браузера.

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

зображення

гіперпосилання

документи, які розміщено на Google Диск

9

21 of 27

Вставлення об'єктів на веб-сторінку

Розділ 9 § 9.3

Призначення окремих елементів керування

вкладки Додати

Елемент керування

Призначення

Для створення блоку введення тексту

Для вставлення зображення з Google Диск, за URL-адресою з Інтернету, з комп'ютера тощо

9

22 of 27

Вставлення об'єктів на веб-сторінку

Розділ 9 § 9.3

Елемент керування

Призначення

Для вставлення зображення з носіїв даних вашого комп'ютера

Для вставлення зображення з Google Диск, за URL-адресою з Інтернету, з комп'ютера тощо

Для пошуку та вставлення відео із сервісу YouTube

9

23 of 27

Вставлення об'єктів на веб-сторінку

Розділ 9 § 9.3

Елемент керування

Призначення

Для вставлення створеного вами календаря у сервісі Google Календар

Для вставлення створеної вами карти у сервісі Карти Google

Для вставлення документів різних типів з вашого Google Диск

Документи Google

9

24 of 27

Домашнє завдання

Проаналізувати

§ 9.3, ст. 270

Розділ 9 § 9.3

9

25 of 27

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

Практична робота 13

Конструювання сайтів з використанням онлайн-систем

Розділ 9 § 9.3

9

26 of 27

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

Сторінка

270

Розділ 9 § 9.3

9

27 of 27

Дякую за увагу!

За новою програмою

Урок 51

9