Інформація про новину
  • Переглядів: 100
  • Дата: 5-04-2021, 00:02
5-04-2021, 00:02

21. Автоматизовані засоби для створення та публікації вебресурсів

Категорія: Інформатика





Попередня сторінка:  20. Практична робота №1. Створення скла...
Наступна сторінка:   22. Мова гіпертекстової розмітки

Розділ 3

Створення та публікація

вебресурсів

 

21.1.

ОГЛЯД АВТОМАТИЗОВАНИХ ЗАСОБІВ

На сьогоднішній день школярів 8-го класу можна вже вважати професійними користувачами мережі Інтернет. Ви вправно вмієте користуватися багатьма сервісами цієї мережі. Неодмінно знайомим для вас є сервіс World Wide Web (WWW), який дозволяє одержувати доступ до вебсторінок з допомогою браузера на комп’ютері. Подальше вивчення ми присвятимо методам створення вебсторінок.

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

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

www.jimdo.com

,

www.hostinger.com.ua

. Усі вони надають широкі можливості для створення вебсайтів з використанням як безкоштовних, так і платних складових.

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

21.2.

СТВОРЕННЯ ВЕБСТОРІНКИ

Створимо вебсторінку деякої туристичної фірми BestTravel.

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

2. Увійдіть до власного акаунта Google та відкрийте сторінку sites.google.com.

3. Для створення нового сайту натисніть значок плюс в області Створити новий сайт, обравши шаблон Пустий.

У результаті ви потрапите на сторінку створення та редагування сайту.

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

4. Уведіть заголовок сайту BestTravel. Для цього клацніть на область заголовка та введіть необхідний текст.

5. Додайте логотип.

a. Наведіть на верхній правий кут шаблону.

b. Оберіть посилання Додати логотип ► Додати.

c. Оберіть файл logo.png на комп’ютері.

d. Установіть прозорий колір фону.

6. Додайте назву сайту. Для цього клацніть на полі Введіть назву сайту та введіть BestTravel.

7. Додайте фон для верхньої частини сторінки.

a. Наведіть на верхню частину сторінки та оберіть команду Змінити зображення.

b. Оберіть команду Вибрати зображення.

c. Оберіть зображення відповідно до зразка (рис. 21.1)

Розглянемо, що ще можна зробити з верхньою частиною сторінки.

Команда Скинути дозволяє повернутися до попереднього зображення. Команда Тип верхнього колонтитула дає змогу змінити тип колонтитула.

8. Установіть тип верхнього колонтитула — Банер.

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

9. Увімкніть режим покращення читабельності.

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

Під колонтитулом додамо розділ Гарячі тури відповідно до зразка (рис. 21.2).

10. Розташуйте блок заголовка в даному розділі.

a. Перейдіть на вкладку Вставити.

b. Оберіть інструмент Текстове поле.

c. Оберіть тип текстового поля Назва та встановіть вирівнювання по центру.

d. Уведіть текст Гарячі тури.

e. Установіть фон розділу Виділення 1.

11. Додайте блок з фотографіями та текстом.

a. В області Макети оберіть наступний макет:

b. Для додавання зображення натисніть знак плюс та команду Додати.

c. Оберіть зображення gagarinn.jpg з файла на диску.

d. Додайте необхідний текст у відповідні області.

e. Аналогічно додайте інші зображення та текст.

12. Додайте кнопки Замовити.

a. Оберіть інструмент Кнопка.

b. Уведіть ім’я кнопки Замовити.

c. Як посилання на місце переходу по кнопці вкажіть довільний символ, оскільки зараз місце переходу за кнопкою ще не визначено.

d. Натисніть Вставити.

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

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

Нижче додамо розділ з відеофрагментом про Київ та його описом відповідно до зразка (рис. 21.3).

13. На вкладці Вставити оберіть необхідний макет.

14. До першого блока додайте відео.

a. Натисніть знак плюс у першому блоці та оберіть команду YouTube.

b. У відповідне вікно додайте посилання на відео:

https://youtu.be/dvW1IVvo-Z0

.

c. Натисніть значок пошуку. В результаті необхідне відео має бути знайдено.

d. Натисніть на знайденому відео, а потім на кнопці Вибрати. Обране відео має з’явитися на вашому сайті.

15. Додайте в текстові блоки написи, як у зразку. Відшукайте в Інер-неті ще принаймні п’ять видатних місць Києва та додайте їх до списку.

16. Виконайте необхідне форматування текстових блоків (змініть у деяких фрагментів жирність шрифту та встановіть стиль списку для переліку видатних місць).

17. Для розташування сайту в мережі Інтернет його необхідно опублікувати. Для цього натисніть кнопку Опублікувати, введіть веб-адресу. (Якщо така адреса вже існує, то система повідомить про це.) Натисніть кнопку Опублікувати.

18. Для перегляду сайту в режимі публікації оберіть в меню кнопки Опублікувати команду Переглянути опублікований сайт.

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

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

19. Надайте доступ до сайту для загального доступу. Надішліть на пошту вашому вчителю посилання на створений сайт.

Контрольні запитання та завдання

1. Які існують підходи до створення сайтів?

2. Які сервіси для автоматизованого створення сайтів ви знаєте?

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

1. Для чого існує багато різних сервісів автоматизованого створення сайтів?

2. Чому існують безкоштовні сервіси автоматизованого створення сайтів?

Завдання для досліджень

1*. Дослідіть, чи можна у сервісі Google Sites створити багатосторінковий сайт.

2*. Самостійно ознайомтеся з об’єктами, які можна ще додати до сайту в сервісі Google Sites. Визначте, коли вони можуть стати у нагоді.

3*. Дослідіть, яких, на вашу думку, можливостей зі створення вебсто-рінок не вистачає у сервісі Google Sites.

4**. Зареєструйтесь на одній із онлайнових систем автоматизованого створення сайтів та порівняйте її можливості із можливостями сервісу Google Sites.

 

 

Це матеріал з підручника Інформатика 8 клас Казанцева, Стеценко (2021)

 



Попередня сторінка:  20. Практична робота №1. Створення скла...
Наступна сторінка:   22. Мова гіпертекстової розмітки



^