Заняття № 75, 76

Предмет „ Інформатика”

Тема: Використання засобів веб-редактора для створення веб-сторінок.

Розробка в середовищі веб-редактора сайта

Цілі:

1) Навчальна: навчити студентів використовувати засоби веб-редактора для створення веб-сторінок

2) Виховна: виховувати старанність, уважність.

Зміст

1. Створення веб-сайту засобами он-лайн системи керування

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

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

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

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

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

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

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

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

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

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

1. Відкрийте у вікні браузера головну сторінку сайту Google (https://www.google.com.ua).

2. Виберіть гіперпосилання Увійти/Створити акаунт зараз.

3. Заповніть поля форми Створити акаунт на сторінці Облікові записи Google. Виберіть кнопку Я погоджуюся. Створіть мій акаунт.

4. Активуйте ваш акаунт, використавши гіперпосилання у тексті листа, що надійде до електронної поштової скриньки, на яку ви зареєстрували ваш акаунт.

5. Виберіть гіперпосилання Увійти на веб-сторінці Акаунт Google у вікні браузера, що відкриється після вибору гіперпосилання з електронного листа.

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

7. Виберіть кнопку Увійти.

8. Виберіть гіперпосилання Домашня сторінка Google у нижній частині веб-сторінки.

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

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

1. Відкрити у вікні браузера головну сторінку сайту Google (https://www.google.com.ua).

2. Вибрати у верхній частині сторінки гіперпосилання Ще/Сайти.

3. Заповнити на сторінці Google Sites – безкоштовні веб-сторінки та вікі поля Електронна пошта та Пароль даними вашого облікового запису, якщо вони не заповнені. Вибрати кнопку Увійти.

4. Вибрати на сторінці Сайти Google кнопку Створити сайт.

5. Вибрати один з наведених шаблонів для створення сайту. За замовчуванням пропонується шаблон Пустий шаблон.

6. Заповнити поле Дати назву сайту. Наприклад, якщо ви створюєте сайт вашого класу, то назва може бути Класне життя. Одночасно автоматично буде запропонована URL-адреса головної сторінки сайту.

7. Відкрити список Вибрати тему та вибрати тему оформлення сайту. За замовчуванням пропонується тема Запустити за умовчанням. Наприклад, виберемо тему Бейсбол.

8. Увести символи в поле Введіть код, який Ви бачите на малюнку.

9. Вибрати кнопку Створити сайт.

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

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

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

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

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

1. Вибрати кнопку Створити сторінку у верхній частині вікна браузера.

2. Вибрати шаблон вмісту майбутньої сторінки (рис. 7):

· Веб-сторінка – сторінка для розміщення тексту, зображень тощо. Такі сторінки є інформаційними сторінками тематичних розділів.

· Оголошення – сторінка для розміщення текстових повідомлень, впорядкованих у хронологічному порядку, починаючи з останніх введених. Кожне повідомлення може відображатися як окрема інформаційна сторінка.

Рис. 2. Сторінка Створити нову сторінку

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

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

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

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

Сторінку на основі шаблону Картотека заповнюють, вибираючи кнопку Додати файл.

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

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

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

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

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

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

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

• Вставити - для вставлення об’єктів на сторінку;

• Формат - для форматування тексту на веб-сторінці;

• Таблиця - для вставлення та редагування таблиць;

•

Компонування – для вибору модульної сітки інформаційного блока сторінки: в один, два, три стовпці, з лівою або правою бічною панеллю та ін.

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

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

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

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

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

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

1. Виконати Вставити/Зображення.

2. У вікні Додати зображення вибрати джерело зображення: Завантажені зображення – вставити зображення, що вже розміщено на сайті, або вставити зображення з файлу, що міститься на локальному комп’ютері, вибравши кнопку Вибрати файл/Веб-адреса (URL) – вставити зображення, що міститься за вказаною URL-адресою в Інтернеті.

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

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

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

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

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

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

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

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

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

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