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

Пригадайте!

1. Що таке хостинг? Які організації називають хостинг-провайдерами?

2. За якими ознаками можна класифікувати веб-сторінки? Які вам відомі типи веб-сторінок?

3. З яких блоків складається зовнішня структура веб-сторінки?

4. Які вам відомі формати графічних, аудіо та відео файлів? Які з цих форматів передбачають стиснення даних?

5. Які засоби використовують для зміни формату файлів?

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

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

· тексту, який буде відображатися на сторінці;

· команд, що визначають розмітку тексту – його структуру, формат фрагментів тексту, забезпечують вставлення нетекстових об’єктів на сторінку та ін. Такі команди у мові HTML називають тегами (англ. tag – ярлик, ознака).

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

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

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

Для тих, хто хоче знати більше

У фрагменті коду, що наведений на рис. 4.75, присутні теги, що визначають структуру сторінки:

<div class="date"> … </div> - тег створення логічного розділу. Розділ позначений як такий, що відноситься до визначеного розробником класу date. У створеному розділі веб-сторінки виводиться дата та час її публікації: 10 жовтня 2009 о 10:11;

<h1 class="title"> … </h1> - тег створення заголовку на веб-сторінці. Заголовок позначений як такий, що відноситься до визначеного розробником класу title. У створеному заголовку виводиться текст: Святвечір – за народним календарем 6 січня. Як святкували і що їли з нагоди свята.;

<img src="http://mamajeva-sloboda.ua/uploads/oldnews/1226654195_ruo.jpg"> - тег вставлення на веб-сторінку зображення, що зберігається у файлі з URL-адресою http://mamajeva-sloboda.ua/uploads/oldnews/1226654195_ruo.jpg.

<p> … </p> -тег створення абзацу на веб-сторінці. У створеному абзаці розміщений текст: Святий вечір, Святвечір, Вілія, Багата кутя - передріздвяний день і вечір, велике свято (6 січня). Воно припадало на останній день Пилипівського посту, тому готували виключно пісні страви.

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

6. текстових редакторів, у середовищі яких користувач може вводити текст та теги. Для цього можна використовувати текстові редактори Блокнот, Edit Plus, Homesite, HTML Pad та ін. Готову сторінку потрібно зберегти та надати розширення імені файлу htm або html. Створення веб-сторінки такими засобами передбачає обов’язкове знання мови розмітки текстів, наприклад, HTML. Всю роботу з добору тегів розробник виконує власноруч. Розробка сторінки здійснюється повільно, але завдяки невеликому розміру файлу, в якому вона зберігається, така сторінка швидко завантажується та відкривається у вікні браузера;

7. прикладних програм загального призначення, наприклад, з пакету Microsoft Office, які можуть зберігати файли у форматі HTML. Як ви вже знаєте, документи, створені в програмах Word 2007, PowerPoint 2007, Publisher 2007 та інших можна зберігати, вибравши тип файлу Веб-сторінка (*.htm, *.html). При цьому створюються веб-сторінки, у яких застосування тегів для розмітки відбувається автоматично. Розробнику не потрібно знати мову розмітки гіпертексту. Але файли, у яких зберігаються такі сторінки, мають набагато більший обсяг, ніж файли, створені у текстових редакторах. Причиною є велика кількість тегів, які описують структуру і форматування документу та дублюються при застосуванні до кожного окремого елементу сторінки;

8. спеціалізованих веб-редакторів – програм, що призначені для розробки веб-сайтів. Популярними веб-редакторами є Adobe Dreamweaver, Microsoft FrontPage, SharePoint Designer, WYSIWYG Web Builder, HTMLArea та ін. Ці програми мають додаткові засоби для створення статичних та динамічних веб-сторінок, при цьому не вимагають від розробника знання мови HTML. Такі програми називають WYSIWYG - редакторами (англ. W hat Y ou S ee I s W hat Y ou G et – що ви бачите, то ви й отримуєте), створена їх засобами веб-сторінка буде виглядати так, як вона сконструйована у редакторі. HTML- кодсторінки більш коректний, ніж при використанні, наприклад, програм пакету Microsoft Office, але теж надлишковий;

9. систем управління веб-контентом WCMS (англ. W eb C ontent M anagement S ystem – система управління веб-контентом), які надають користувачам зручні інструменти для керування текстовим та графічним наповненням веб-сайтів, додавання та видалення статей з інформаційними матеріалами, створення системи навігації веб-сайтів та ін. Популярними WCMS є системи Joomla, Wordpress, Drupal, MediaWiki, Mambo, NUKE та ін. Системи управління вмістом веб-сайтів пропонують набори шаблонів оформлення веб-сторінок та модулів, що роблять сайт динамічним: форумів, чатів, стрічок новин, каталогів файлів, контролю статистики тощо.

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

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

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

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

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

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

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

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

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

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

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

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

Рис. 4.76. Форма Створити акаунт сторінки Облікові записи 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.
Відкрити список Вибрати тему та вибрати тему оформлення сайту. За замовчуванням пропонується тема Запустити за умовчанням. Наприклад, виберемо тему Бейсбол (рис. 4.77).

Рис. 4.77. Сторінка Створити сайт – Сайти Google

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

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

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

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

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

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

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

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

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

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

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

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

· Список – сторінка, на якій подаються структуровані дані як списки з кількох полів. Списки можна сортувати за даними в кожному полі.

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

Рис. 4.80. Панель Виберіть сторінку

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

3. Ввести назву сторінки в поле Назва.

4. Вибрати розміщення сторінки в структурі сайту. Можна вибрати варіанти Розмістити сторінку на верхньому рівні, Розмістити на сторінці <ім’я сторінки> або Вибрати інше розташування. У першому випадку гіперпосилання на сторінку буде розміщено в головному меню сайту, у другому – воно з’явиться на вибраній сторінці. За вибору гіперпосилання Вибрати інше розташування відкривається панель Виберіть сторінку (рис. 4.80), на якій слід вибрати сторінку, з якою буде пов’язана нова сторінка.

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

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

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

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

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

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

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

Рис. 4.81 Вигляд сторінки, створеної на основі шаблону Список,та панелі налаштування списку

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

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

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

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

Рис. 4.82. Меню та панель інструментів редактора веб-сторінок

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

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

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

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

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

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

Рис. 4.83. Варіанти компонування веб-сторінки

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

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

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

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

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

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

2. У вікні Додати зображення (рис. 4.84) вибрати джерело зображення:

·

Рис. 4.84. Вікно Додати зображення

Завантажені зображення – вставити зображення, що вже розміщено на сайті, або вставити зображення з файлу, що міститься на локальному комп’ютері, вибравши кнопку Вибрати файл;

· Веб-адреса (URL) – вставити зображення, що міститься за вказаною URL-адресою в Інтернеті.

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

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

При виборі вставленого зображення під ним відкривається панель редагування, яка містить команди розміщення та встановлення розміру (рис. 4.85).

Рис. 4.85. Вставлення зображення на веб-сторінку

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

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

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

Рис. 4.86. Меню Вставити

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

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

Рис. 4.87. Вікно Створити посилання

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

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

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

Перевірте себе

1. · Які засоби можна використовувати для розробки веб-сторінок? Поясніть їх переваги та недоліки.

2. · Що таке HTML - кодсторінки? Дані яких видів він містить? Як можна його переглянути?

3. º Назвіть відомі вам веб-редактори. У чому полягають особливості їх використання?

4. º Що таке система управління веб-контентом? Назвіть відомі вам системи управління вмістом веб-сайту.

5. · Які вам відомі системи управління веб-контентом,що працюють у режимі он-лайн? У чому їх особливості?

6. · Назвіть та поясніть етапи автоматизованого створення веб-сайтів засобами веб-серверів.

7. · Які шаблони веб-сторінок використовуються при створенні веб-сайтів засобами сервісу Сайти Google? Опишіть їх особливості.

8. · Як вставити зображення на веб-сторінку? Що може бути джерелом зображення при вставленні на веб-сторінку?

9. · Як пов’язати гіперпосилання з текстовим фрагментом?

10. · Як вставити відео-об’єкт на веб-сторінку? Що може бути джерелом відео?

11. º Що таке гаджет?

12. · Які формати графічних, відео та аудіо файлів рекомендується використовувати при розміщенні об’єктів на веб-сторінках? Чим це пояснюється?

13. * Чим відрізняються результати операцій вставлення графічних зображень та їх завантаження?

Виконайте завдання

1. · Перегляньте вказані учителем HTML-сторінки, наприклад, з папки Тема 4\Завдання 4.9\Вправа 1, які створені різними засобами. Порівняйте значки файлів веб-сторінок, їх вміст у вікні браузера, HTML-код та розміри файлів. Заповніть таблицю:

Засіб створення	Ім’я файлу	Розмір файлу, у байтах
Блокнот	вправа 4.9.1.1.html
Microsoft Word 2007	вправа 4.9.1.2.htm
Adobe Dreamweaver	вправа 4.9.1.3.html
Joomla	вправа 4.9.1.4.html

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

2. (ДЗ) * Відкрийте документи, створені з використанням різних програм пакету Microsoft Office, наприклад, з папки Тема 4\Завдання 4.9\Вправа 2. Збережіть ці документи в папці Мої документи з тими ж іменами, вибравши тип файлу Веб-сторінка (*.htm, *.html). Зверніть увагу на значки збережених файлів та створення додаткових папок. Відкрийте файли веб-сторінок, порівняйте їх вміст та оформлення з вмістом відповідних документів. Оцініть розміри файлів веб-сторінок та додаткових папок.

3. · Заповніть таблицю та порівняйте особливості створення веб-сайтів з використанням різних засобів:

Засіб створення	Потреба у знанні мови HTML	Наявність засобів для оформлення сторінок та наповнення їх вмістом	Зручність редагування	Потреба у розміщенні на сервері хостингу
Текстовий редактор
Програма пакету Microsoft Office
Веб-редактор
Система управління вмістом веб-сайту

4. · Зареєструйте свій акаунт на сервері Google відповідно до алгоритму, описаному в пункті.

5. º Створіть на сервері Google сайт відповідно до структури, наведеній на рис. 4.69. Виберіть тему оформлення Земля: вода. Виберіть такі шаблони сторінок: Історія класу – шаблон Веб-сторінка, Учителі та предмети – шаблон Список, Поетична творчість – шаблон Оголошення, Навчальні матеріали – шаблон Картотека. Шаблони інших сторінок виберіть самостійно. Повідомте учителю URL-адресу вашого сайту.

6. · Створіть на сервері Google сайт з темою Художній салон:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

9. (ДЗ) ** Створіть на сервері Google сайт про свою майбутню професію.

10. (ДЗ) * Використовуючи засоби одного із спеціалізованих веб-редакторів розробіть свій персональний веб-сайт, розмістіть його на сервері безкоштовного хостингу TopUa (http://www.topua.net).

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

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

Увага! Під час роботи з комп’ютером дотримуйтеся правил безпеки та санітарно-гігієнічних норм.

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

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

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

3. Заповніть Головну сторінку описом матеріалів, які будуть розміщені на сторінках сайту, та даними про вас як розробника сайту.

4. Створіть та розмістіть веб-сторінки на основі такої схеми внутрішньої структури:

Виберіть для сторінок такі шаблони: Історія досліджень, Перший українець у космосі – шаблон Веб-сторінка, Новини з орбіти – шаблон Оголошення, Хронологія польотів – шаблон Картотека.

5. Заповніть сторінку Історія досліджень текстовими матеріалами, наприклад, з файлу Тема 4\Практична 18\космічні дослідження.docx.

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

7. Розмістіть на сторінці Перший українець у космосі текстові та графічні матеріали, наприклад, з папки Тема 4\Практична 18\Попович таким чином, щоб фотографія розміщувалась по центру сторінки, а текст – ліворуч та праворуч від неї. Використайте для компонування сторінки модульну сітку Три стовпці (просте).

8. Створіть на сторінці Перший українець у космосі гіперпосилання для переходу на сторінку з URL-адресою http://h.ua/story/285307, пов’язавши його з графічним зображенням.

9. Налаштуйте на сторінці Хронологія польотів нетиповий список так, щоб у ньому містились про кожен політ такі дані: рік польоту, космонавт, космічний корабель, опис. Заповніть список даними про 3-4 польоти, наприклад, з файлу Тема 4\Практична 18\польоти.docx.

10. Розмістіть на сторінці Новини з орбіти запис з останньою новиною з сайту http://space.vn.ua.

11. Завантажте на сторінку Новини з орбіти сайту файли, що містяться у папці Тема4\ Практична 18\Файли.

12. Повідомте учителю інформатики URL-адресу вашого сайту.