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

Переглянути відео

Практичне завдання.

Створимо вебсторінку деякої туристичної фірми 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. Створіть ще дві копії кнопки та перенесіть їх, утримуючи ліву кнопку миші, в необхідні місця блоків з гарячими турами.

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

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

• 19. Надайте доступ до сайту для загального доступу. Надішліть на пошту вашому вчителю посилання на створений сайт. Завантажити текст практичного завдання та файли-заготовки необхідні для виконання завдання

• (файли-заготовки надані видавництвом): https://drive.google.com/drive/folder...

• Відео-інструкція

Виконати тестування.

Посилання на тест

https://naurok.com.ua/test/join?gamecode=7257886

Підготувати повідомлення про "Топ 5 конструкторів сайтів в Україні"

Повідомлення надрукувати в цьому блоці.