Урок 27 Інформатика 11 кла Стандарт
Практична робота № 10
«Автоматизоване створення веб-сайта».
Мета.
Навчальна. Навчитися створювати на сервері Google сайт на тему Українські дослідники космосу.
Розвиваюча. Розвивати креативність, вміння аналізувати учнів.
Виховна. Виховувати культуру оформлення.
Тип уроку. Формування знань, умінь, навичок.
Матеріали для роботи з учнями:
План
Хід уроку
1. Організаційний етап.
2. Актуалізація опорних знань.
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 та ін. У цих системах створення веб-сайта здійснюється в режимі он-лайн відразу на сервері хостингу.
Автоматизоване створення веб-сайта
Створення веб-сайта засобами он-лайн системи керування веб-контентом відбувається в кілька кроків:
Розглянемо, як відбувається процес розробки веб-сайта засобами, що безкоштовно надає користувачам веб-сервер Google. Відповідний сервіс має назву Сайти Google.
Перш ніж розробляти сайт, потрібно створити акаунт Google. Із цією метою:
У результаті відкриється головна сторінка сервера Google, на якій ви матимете права користувача сервісів Google. Адреса, на яку зареєстровано ваш обліковий запис, відображатиметься у верхній частині веб-сторінки.
Для створення сайта потрібно:
У вікні браузера відкриється домашня сторінка вашого сайта. У верхній частині сторінки буде відображатися вказана вами назва сайта, зліва - панель навігації, у центральній частині - область для інформаційного блока сторінки із заголовком Домашня сторінка (рис. 4.67).
Рис. 4.67. Вигляд домашньої сторінки щойно створеного сайта
Панель навігації містить два гіперпосилання: Домашня сторінка та Карта сайта. Карта сайта на цей момент містить посилання лише на домашню сторінку.
Створення та налаштування веб-сторінок
Відразу після створення сайт містить лише одну домашню сторінку. Для створення нової сторінки на сайті потрібно:
Наприклад, для створення сторінки Історія класу сайта Класне життя (рис. 4.68) можна вибрати шаблон Веб-сторінка, для сторінки Учителі та предмети - шаблон Список, Поетична творчість - шаблон Оголошення, Навчальні матеріали - шаблон Картотека.
Наприклад, сторінки Про нас, Навчання та Відпочинок можна розмістити на верхньому рівні, сторінки Історія класу, Список класу та Фотогалерея пов'язати зі сторінкою Про нас; Учителі та предмети, Розклад уроків, Результати навчання, Навчальні матеріали - зі сторінкою Навчання тощо.
Після створення сторінки вона відкривається в режимі редагування, а панель навігації та мапа сайта автоматично доповнюються посиланнями на нову сторінку.
Під час створення сторінки на основі шаблону Веб-сторінка її потрібно заповнити матеріалами та зберегти. Це статична сторінка, на якій не передбачається часто змінювати наповнення.
Сторінка на основі шаблону Оголошення оновлюватиметься регулярно з появою деяких новин. Для додавання нового оголошення на сторінці слід вибрати кнопку Новий запис, увести текст повідомлення та зберегти сторінку.
Сторінку на основі шаблону Картотека заповнюють, вибираючи кнопку Додати файл. При цьому слід вибрати для завантаження на сайт файл з локального комп’ютера. Для впорядкованого зберігання файлів на сайті можна створювати папки. Для цього використовують кнопку Перемістити до.
На сторінці із шаблоном Список потрібно вибрати один із запропонованих шаблонів списку або створити нетиповий список (рис. 4.70), вибравши відповідну кнопку та вказавши назву і тип даних кожного стовпця.
Команди зі списку кнопки Більше дій, що розміщена у верхній частині вікна браузера, призначені для додаткових налаштувань: зміни шаблону сторінки, видалення сторінок, керування доступом до матеріалів сайта та ін.
Панель навігації та карта веб-сайта формуються автоматично під час створення нових сторінок. Назви сторінок на панелі навігації розміщуються в алфавітному порядку. Розміщення сторінок можна змінювати, виконавши Карта сайта => Керування сторінками та перетягнувши у схемі сайта заголовок однієї сторінки на заголовок іншої, з якою потрібно пов’язати сторінку.
Редагування веб-сторінок
Створену сторінку веб-сайта можна редагувати, наповнювати її інформаційними матеріалами, змінювати модульну сітку тощо. Для переходу до режиму редагування сторінок потрібно вибрати кнопку Редагувати сторінку у верхній частині вікна браузера. Після цього у вікні браузера з'являється меню та панель інструментів (рис. 4.71).
Меню містить команди, призначені для виконання операцій з елементами веб-сторінки:
У режимі редагування робоча область сторінки містить поля заголовка та інформаційного блока, у які можна вводити текст з клавіатури або вставляти з Буфера обміну. Під час зміни заголовка сторінки його текст одночасно відобразиться на панелі навігації. Текст у інформаційному блоці сторінки можна форматувати, використовуючи елементи керування панелі інструментів.
У ході редагування сторінки час від часу виконується автоматичне збереження чернетки. Після закінчення редагування зміни потрібно зберегти, вибравши кнопку Зберегти у верхній частині сторінки.
Вставлення об'єктів на сторінку
На веб-сторінку можна вставити різні об'єкти: зображення, гіперпосилання, списки веб-сторінок, горизонтальні лінії, документи, що створені службами Google, та ін.
Під час вставлення зображення на веб-сторінку варто враховувати формати файлів зображень. З особливостями форматів графічних файлів ви ознайомилися в 9-му класі. Фотографії для розміщення на веб-сторінках найчастіше зберігають у файлах формату JPG. Анімовані зображення, як правило, містяться у файлах формату GIF. Їх часто розміщують на веб-сайтах для надання емоційного забарвлення сторінці. Спеціально для розміщення растрових зображень у мережі був розроблений формат PNG. Якщо зображення, що потрібне вам для розміщення на веб- сторінці, зберігається у файлі іншого формату, то його варто конвертувати в один з названих, використовуючи засоби графічного редактора.
Для вставлення зображення на веб-сторінку потрібно:
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 сайт на тему Українські дослідники космосу:
6. Типові запитання до уроку.
7. Практичні завдання.
1. Доберіть URL-адресу для сайта, відповідну його назві.
2. Виберіть тему оформлення Медісон.
3. Перегляньте запропоновану схему внутрішньої структури сайта, наприклад з файлу Тема 4\Завдання 4.9\Вправа 6\схема.^сх.
4. Заповніть Домашню сторінку даними про призначення сайта, описом матеріалів, які будуть розміщені на сторінках, і даними про вас як розробника сайта.
5. Створіть веб-сторінки на основі шаблону Веб-сторінка, розмістіть їх відповідно до наданої схеми внутрішньої структури.
6. Розмістіть на сторінках текстові та графічні матеріали, наприклад з папки Тема 4\Завдання 4.9\Вправа 6, таким чином, щоб текст і відповідне зображення на сторінці були розміщені поруч. Використайте для компонування сторінок модульну сітку Два стовпці (просте).
7. Пов’яжіть гіперпосилання з текстовими та графічними об’єктами так, щоб, вибравши зображення, можна було відкрити одну з інформаційних сторінок сайта, а вибравши текстовий фрагмент - іншу сторінку.
8. Завантажте на сторінки сайта файли, що містяться у папці Тема 4\ Завдання 4.9\Вправа 6\Файли.
9. Надішліть учителю інформатики електронного листа з адресою створеного сайта.
1. Додайте сторінку Події на основі шаблону Оголошення. Додайте на сторінку запис з оголошенням про виставку сучасних художників, що відбудеться у художньому салоні.
2. Вставте на домашню сторінку таблицю, заповніть її розкладом роботи художнього салону.
3. Скомпонуйте вміст інформаційних сторінок, вибравши модульну сітку Два стовпці. У підвалі сторінок зазначте ваші дані як розробника сайта.
8. Підсумки уроку.
9. Домашнє завдання.
1. Повторити п. 4.7-4.9.
2. Виконати завдання 3, 4.
Завдання 1 (письмово).
Завдання 2 (письмово).