Published using Google Docs
Урок 27 Стандарт 11
Updated automatically every 5 minutes

Урок 27                                                                 Інформатика 11 кла Стандарт


    

Практична робота № 10

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


Мета.

Навчальна. Навчитися створювати на сервері Google сайт на тему Українські дослідники космосу.

Розвиваюча. Розвивати креативність, вміння аналізувати учнів.

Виховна. Виховувати культуру оформлення.

Тип уроку. Формування знань, умінь, навичок.

Матеріали для роботи з учнями:

План

  1. Організаційний етап.
  2. Актуалізація опорних знань.
  3. Інструктаж із техніки безпеки під час практичної роботи.
  4. Практична робота № 15  «Автоматизоване створення веб-сайта».
  5. Типові запитання до уроку.
  6. Домашнє завдання.

Хід уроку


1. Організаційний етап.


2. Актуалізація опорних знань.

  1. Які засоби можна використовувати для розробки веб-сторінок? Пояс­ніть їх переваги та недоліки.
  2. Що таке HTML-код сторінки? Дані яких видів він містить? Як можна його переглянути?
  3. Назвіть відомі вам веб-редактори. У чому полягають особливості їх ви­користання?
  4. Що таке система управління веб-контентом? Назвіть відомі вам систе­ми управління вмістом веб-сайта.
  5. Які системи управління веб-контентом, що працюють у режимі он-лайн вам відомі? У чому їх особливості?
  6. Назвіть і поясніть етапи автоматизованого створення веб-сайтів засоба­ми веб-серверів.
  7. Які шаблони веб-сторінок використовуються під час створення веб- сайтів засобами сервісу Сайти Google? Опишіть їх особливості.
  8. Як вставити зображення на веб-сторінку? Що може бути джерелом зо­браження під час вставлення на веб-сторінку?
  9. Як пов’язати гіперпосилання з текстовим фрагментом?
  10. Як вставити відеооб’єкт на веб-сторінку? Що може бути джерелом відео? Що таке ґаджет?
  11. Які формати графічних, відео- та аудіофайлів рекомендується викорис­товувати під час розміщення об’єктів на веб-сторінках? Чим це поясню­ється?
  12. Чим відрізняються результати операцій вставлення графічних зобра­жень та їх завантаження?

3. Теоретичний матеріал.

Засоби розробки веб-сайтів

З 9-го класу вам відомо, що веб-сторінки є текстовими файлами, роз­ширення їх імен надається відповідно до мови розмітки гіпертексту, що використана під час розробки сторінки. Як ви вже знаєте, веб-сторінки часто створюють з використанням мови розмітки гіпертексту HTML. У файлів, створених мовою HTML, розширення імен файлів htm або html. У файлах такого формату міститься HTML-код сторінки, що складається з даних двох типів:

Переглянути HTML-код веб-сторінки, що відкрита у вікні браузера Internet Explorer, можна, виконавши Вигляд => Перегляд HTML-кода. В інших браузерах ця команда може бути Вигляд => Початковий код сторінки (Mozilla Firefox), Меню => Сторінка => Інструменти розроб­ника => Джерело (Opera), Інструменти => Див. джерело (Google Chrome) та ін.

Рис. 4.66. Фрагмент веб-сторінки та відповідний фрагмент HTML-коду

На рисунку 4.66 наведено зображення частини веб-сторінки сайта та відповідний фрагмент HTML-коду.

Розробка веб-сторінок може здійснюватися з використанням різних за­собів:

Названі засоби створення веб-сайтів можна встановити на локальному комп’ютері. Створені в їх середовищі веб-сторінки після завершення про­цесу розробки потрібно опублікувати в Інтернеті. У той самий час існу­ють WCMS, які одночасно з послугами з розробки веб-сайтів надають послуги безкоштовного хостингу. Такими є системи uCoz, Google Sites, Wix.com, Prom.ua, Ua7.biz та ін. У цих системах створення веб-сайта здійснюється в режимі он-лайн відразу на сервері хостингу.

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

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

  1. Реєстрація облікового запису на сервері.
  2. Вибір імені сайта та шаблону для його оформлення.
  3. Створення сторінок сайта, системи навігації.
  4. Заповнення сторінок контентом.

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

Перш ніж розробляти сайт, потрібно створити акаунт Google. Із цією метою:

  1. Відкрийте у вікні браузера головну сторінку сайта Google (http:// www.google.com.ua).
  2. Виберіть гіперпосилання Увійти => Створити акаунт зараз.
  3. Заповніть поля форми Створити акаунт на сторінці Облікові запи­си Google. Виберіть кнопку Я погоджуюся. Створіть мій акаунт.
  4. Активуйте ваш акаунт, використавши гіперпосилання у тексті листа, що надійде до електронної поштової скриньки, на яку ви за­реєстрували ваш акаунт.
  5. Виберіть гіперпосилання Увійти на веб-сторінці Акаунт Google у вікні браузера, що відкриється після вибору гіперпосилання з електронного листа.
  6. Заповніть поля Електронна пошта та Пароль даними, які ви вводи­ли під час створення облікового запису.
  7. Виберіть кнопку Увійти.
  8. Виберіть гіперпосилання Домашня сторінка Google у нижній час­тині веб-сторінки.

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

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

  1. Відкрити у вікні браузера головну сторінку сайта Google (http:// www.google.com.ua).
  2. Вибрати у верхній частині сторінки гіперпосилання Ще  => Сайти.
  3. Заповнити на сторінці Google Sites — безкоштовні веб-сторінки та вікі поля Електронна пошта та Пароль даними вашого облікового запису, якщо вони не заповнені. Вибрати кнопку Увійти.
  4. Вибрати на сторінці Сайти Google кнопку Створити сайт.
  5. Вибрати один з наведених шаблонів для створення сайта. За замов­чуванням пропонується шаблон Пустий шаблон.
  6. Заповнити поле Дати назву сайта. Наприклад, якщо ви створюєте сайт вашого класу, то назва може бути Класне життя. Одночас­но автоматично буде запропонована URL-адреса головної сторінки сайта. Вона матиме вигляд: https://sites.google.com/site/<назва_ сайта>. Частина назва_сайта не повинна містити літер кирилиці, а тому система пропонує запис українських слів літерами ан­глійського алфавіту без пропусків. Для вказаної назви сайта си­стемою буде запропонована адреса https://sites.google.com/site/klasnezitta, але за бажанням її можна змінити. URL-адреса голов­ної сторінки сайта повинна бути унікальною.
  7. Відкрити список Вибрати тему та вибрати тему оформлення сайта. За замовчуванням пропонується тема Запустити за умовчанням. Наприклад, виберемо тему Бейсбол.
  8. Увести символи в поле Введіть код, який Ви бачите на малюнку.
  9. Вибрати кнопку Створити сайт.

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

Рис. 4.67. Вигляд домашньої сторінки щойно створеного сайта

Панель навігації містить два гіперпосилання: Домашня сторінка та Карта сайта. Карта сайта на цей момент містить посилання лише на до­машню сторінку.

Створення та налаштування веб-сторінок

Відразу після створення сайт містить лише одну домашню сторінку. Для створення нової сторінки на сайті потрібно:

  1. Вибрати кнопку Створити сторінку ф Створити сторініу у верхній час­тині вікна браузера.
  2. Вибрати шаблон вмісту майбутньої сторінки (рис. 4.68):

Наприклад, для створення сторінки Історія класу сайта Класне жит­тя (рис. 4.68) можна вибрати шаблон Веб-сторінка, для сторінки Учите­лі та предмети - шаблон Список, Поетична творчість - шаблон Оголо­шення, Навчальні матеріали - шаблон Картотека.

  1. Увести назву сторінки в поле Назва.
  2. Вибрати розміщення сторінки в структурі сайта. Можна вибрати варіанти Розмістити сторінку на верхньому рівні, Розмістити на сторінці <ім'я сторінки> або Вибрати інше розташування. У пер­шому випадку гіперпосилання на сторінку буде розміщено в голов­ному меню сайта, у другому - воно з'явиться на вибраній сторінці. За вибору гіперпосилання Вибрати інше розташування відкрива­ється панель Виберіть сторінку (рис. 4.69), на якій слід вибрати сторінку, з якою буде пов'язана нова сторінка.

Наприклад, сторінки Про нас, Навчання та Відпочинок можна розміс­тити на верхньому рівні, сторінки Історія класу, Список класу та Фото­галерея пов'язати зі сторінкою Про нас; Учителі та предмети, Розклад уроків, Результати навчання, Навчальні матеріали - зі сторінкою На­вчання тощо.

  1. Вибрати кнопку Створити сто­рінку.

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

Під час створення сторінки на основі шаблону Веб-сторінка її по­трібно заповнити матеріалами та зберегти. Це статична сторінка, на якій не передбачається часто зміню­вати наповнення.

Сторінка на основі шаблону Ого­лошення оновлюватиметься регу­лярно з появою деяких новин. Для додавання нового оголошення на сторінці слід вибрати кнопку Новий запис, увести текст пові­домлення та зберегти сторінку.

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

На сторінці із шаблоном Список потрібно вибрати один із запропонова­них шаблонів списку або створити нетиповий список (рис. 4.70), вибрав­ши відповідну кнопку та вказавши назву і тип даних кожного стовпця.

Команди зі списку кнопки Більше дій, що розміщена у верхній частині вікна браузера, призначені для додаткових налаштувань: зміни шаблону сторінки, видалення сторінок, керування доступом до ма­теріалів сайта та ін.

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

Редагування веб-сторінок

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

Меню містить команди, призначені для виконання операцій з елемен­тами веб-сторінки:

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

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

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

На веб-сторінку можна вставити різні об'єкти: зображення, гіперпосилання, списки веб-сторінок, горизонтальні лінії, документи, що створені службами Google, та ін.

Під час вставлення зображення на веб-сторінку варто враховувати формати файлів зображень. З особливостями форматів графічних файлів ви ознайомилися в 9-му класі. Фотографії для розміщення на веб-сторінках найчастіше зберігають у файлах формату JPG. Анімовані зображення, як правило, містяться у файлах формату GIF. Їх часто розмі­щують на веб-сайтах для надання емоційного забарвлення сторінці. Спе­ціально для розміщення растрових зображень у мережі був розроблений формат PNG. Якщо зображення, що потрібне вам для розміщення на веб- сторінці, зберігається у файлі іншого формату, то його варто конвертува­ти в один з названих, використовуючи засоби графічного редактора.

Для вставлення зображення на веб-сторінку потрібно:

  1. Виконати Вставити => Зображення.
  2. У вікні Додати зображення вибрати джерело зображення:

3.    Вибрати потрібний файл із зображенням або ввести його URL- адресу.

4.    Вибрати кнопку ОК.

За вибору вставленого зображення під ним відкривається панель реда­гування, яка містить команди розміщення та встановлення розміру (рис. 4.73). Використовуючи гіперпосилання на панелі, можна розмістити зображення: L - за лівим краєм, С - по центру, R - за правим краєм. Можна встановити один з розмірів зображення: S - маленький, М - се­редній, L - великий або Оригінальний.

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

Використовуючи меню Вставити (рис. 4.74), на веб-сторінку можна вставити об’єкти, створені з використанням сервісів Google (карти, кален­дарі, документи, презентації, електронні таблиці, форми для опитування) та фото сервісу Picasa (фотографії та слайд-шоу). Усі ці об’єкти вставляють­ся на сторінку з використанням ґаджетів (англ. gadget - засіб, пристосуван­ня) - невеликих програм, що розміщу­ються на веб-сторінках і призначені для відтворення деяких специфічних даних.

Відео можна вставляти на веб-сторінку з одного або з двох веб-ресурсів:

Відео Google або YouTube. Для цього потрібно виконати Вставити => Відео, вибрати джерело відеоматеріалів, вста­вити URL-адресу відеофрагмента та ви­брати кнопку Зберегти. На веб-сторінку буде вбудована панель ґаджета із засо­бами відображення відео.

Гіперпосилання на веб-сторінку із цього сайта або на інший ресурс можна вставити, виконавши Вставити ^ По­силання і вибравши у вікні Створити посилання, що відкрилося, об’єкт, на який здійснюватиметься перехід за ви­бору гіперпосилання. При цьому створе­не посилання буде пов’язане з назвою сторінки або URL-адресою ресурсу. Гі- перпосилання також можна пов’язати з будь-якими текстовими фрагментами або зображеннями, що містяться на веб-сторінці. Для цього потрібно виділити фрагмент, вибрати кнопку По­силання посилання на панелі інструментів і вибрати об’єкт для переходу -

існуючу сторінку цього сайта або URL-адресу іншого ресурсу.

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

За вибору файлів для завантаження потрібно звертати увагу на їх роз­міри та перед завантаженням здійснювати конвертування аудіо- та відео­файлів в один з форматів, який передбачає стиснення даних, наприклад MP3 - для аудіофайлів, AVI, МР4 - для відеофайлів.


4. Інструктаж із техніки безпеки під час практичної роботи.

Інструктаж з ТБ при роботі з ПК та в комп’ютерному класі.


Виконання комплексу вправ для зняття зорової втоми

(до і після завершення роботи). (Варіант 2).


5. Практична робота № 10 «Автоматизоване створення веб-сайта».

Увага!

!!! Під час роботи з комп'ютером необхідно дотримуватись правил техніки безпеки, протипожежної безпеки та санітарно-гігієнічних норм!!!

Створіть на сервері Google сайт на тему Українські дослідники космосу:

  1. Доберіть URL-адресу для сайта, відповідну його назві.
  2. Виберіть тему оформлення Мерехтіння.
  3. Заповніть Головну сторінку описом матеріалів, які будуть розміщені на сторінках сайта, та даними про вас як розробника сайта.
  4. Створіть і розмістіть веб-сторінки на основі такої схеми внутрішньої струк­тури:

  1. Виберіть для сторінок такі шаблони: Історія досліджень, Перший украї­нець у космосі - шаблон Веб-сторінка, Новини з орбіти - шаблон Оголо­шення, Хронологія польотів - шаблон Картотека.
  2. Заповніть сторінку Історія досліджень текстовими матеріалами, наприк­лад з файлу Тема 4\Практична 18\космічні дослідження.dос.
  3. Створіть на сторінці Історія досліджень гіперпосилання для переходу на сторінку Новини з орбіти, пов'язавши його з першим реченням на сторінці.
  4. Розмістіть на сторінці Перший українець у космосі текстові та графічні ма­теріали, наприклад з папки Тема 4\Практична 18\Попович, таким чином, щоб фотографія розміщувалася по центру сторінки, а текст - ліворуч і пра­воруч від неї. Використайте для компонування сторінки модульну сітку Три стовпці (просте).
  5. Створіть на сторінці Перший українець у космосі гіперпосилання для пе­реходу на сторінку з URL-адресою http://h.ua/story/285307, пов'язавши його з графічним зображенням.
  6. Налаштуйте на сторінці Хронологія польотів нетиповий список так, щоб у ньому містилися про кожний політ такі дані: рік польоту, космонавт, кос­мічний корабель, опис. Заповніть список даними про 3-4 польоти, наприк­лад з файлу Тема 4\Практична 18\польоти.dос.
  7. Розмістіть на сторінці Новини з орбіти запис з останньою новиною із сайта http://space.vn.ua.
  8. Завантажте на сторінку Новини з орбіти сайта файли, що містяться в пап­ці Тема 4\Практична 18\Файли.
  9. Повідомте учителю інформатики URL-адресу вашого сайта (Звіт Пр 10).

6. Типові запитання до уроку.

  1. Які засоби можна використовувати для розробки веб-сторінок? Пояс­ніть їх переваги та недоліки.
  2. Що таке HTML-код сторінки? Дані яких видів він містить? Як можна його переглянути?
  3. Назвіть відомі вам веб-редактори. У чому полягають особливості їх ви­користання?
  4. Що таке система управління веб-контентом? Назвіть відомі вам систе­ми управління вмістом веб-сайта.
  5. Які системи управління веб-контентом, що працюють у режимі он-лайн вам відомі? У чому їх особливості?
  6. Назвіть і поясніть етапи автоматизованого створення веб-сайтів засоба­ми веб-серверів.
  7. Які шаблони веб-сторінок використовуються під час створення веб- сайтів засобами сервісу Сайти Google? Опишіть їх особливості.
  8. Як вставити зображення на веб-сторінку? Що може бути джерелом зо­браження під час вставлення на веб-сторінку?
  9. Як пов’язати гіперпосилання з текстовим фрагментом?
  10. Як вставити відеооб’єкт на веб-сторінку? Що може бути джерелом відео? Що таке ґаджет?
  11. Які формати графічних, відео- та аудіофайлів рекомендується викорис­товувати під час розміщення об’єктів на веб-сторінках? Чим це поясню­ється?
  12. Чим відрізняються результати операцій вставлення графічних зобра­жень та їх завантаження?


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

  1. Зареєструйте свій акаунт на сервері Google відповідно до алгоритму, описаному в пункті.
  2. Створіть на сервері Google сайт відповідно до структури, наведеній на рисунку 4.61. Виберіть тему оформлення Земля: вода. Виберіть такі шаблони сторінок: Історія класу - шаблон Веб-сторінка, Учителі та предмети - шаблон Список, Поетична творчість - шаблон Оголо­шення, Навчальні матеріали - шаблон Картотека. Шаблони інших сторінок виберіть самостійно. Повідомте вчителю URL-адресу вашого сайта.
  3. Створіть на сервері Google сайт з темою Художній салон:

1.  Доберіть URL-адресу для сайта, відповідну його назві.

2.  Виберіть тему оформлення Медісон.

3.  Перегляньте запропоновану схему внутрішньої структури сайта, на­приклад з файлу Тема 4\Завдання 4.9\Вправа 6\схема.^сх.

4. Заповніть Домашню сторінку даними про призначення сайта, описом матеріалів, які будуть розміщені на сторінках, і даними про вас як розробника сайта.

5. Створіть веб-сторінки на основі шаблону Веб-сторінка, розмістіть їх відповідно до наданої схеми внутрішньої структури.

6.  Розмістіть на сторінках текстові та графічні матеріали, наприклад з папки Тема 4\Завдання 4.9\Вправа 6, таким чином, щоб текст і від­повідне зображення на сторінці були розміщені поруч. Використайте для компонування сторінок модульну сітку Два стовпці (просте).

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

8.  Завантажте на сторінки сайта файли, що містяться у папці Тема 4\ Завдання 4.9\Вправа 6\Файли.

9.  Надішліть учителю інформатики електронного листа з адресою ство­реного сайта.

  1. Відкрийте свій сайт, створений під час виконання завдання 6, і відреда­гуйте його таким чином:

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

2.  Вставте на домашню сторінку таблицю, заповніть її розкладом робо­ти художнього салону.

3.  Скомпонуйте вміст інформаційних сторінок, вибравши модульну сіт­ку Два стовпці. У підвалі сторінок зазначте ваші дані як розробника сайта.

  1. Створіть на сервері Google сайт про свою майбутню професію.
  2. Використовуючи засоби одного із спеціалізованих веб-редакторів роз­робіть свій персональний веб-сайт, розмістіть його на сервері безко­штовного хостингу TopUa (http://www.topua.net).

8.  Підсумки уроку.


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

1. Повторити п. 4.7-4.9.

2. Виконати завдання 3, 4.

        Завдання 1 (письмово).

Завдання 2 (письмово).