11 стандарт

Урок 26 Стандарт 11

Урок 26                                                                         Інформатика 11 Академічний

---

Структура веб-сайтів.

Етапи створення веб-сайтів.

     

---

Мета.

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

Розвиваюча. Розвивати творчість.

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

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

Учень пояснює:

1. поняття та особливості сайтів різних типів: статичних веб-сайтів, вебспільнот, інтернет-магазинвів, порталів;
2. відмінності між веб-сторінками типу домашньої, веб-каталогу, форуму, чату, сторінкою розділу веб-сайта;
3. дизайн та правила оформлення веб-сторінок;
4. поняття хостингу.

Учень описує:

1. процес створення веб-сайтів;
2. формати зображень, відео- та аудіокліпів, що публікуються на веб-сторінках;

Учень уміє:

1. засобами безкоштовного сервера створювати статичні веб-сторінки різних типів, добирати їх оформлення;
2. засобами безкоштовного веб-сервера створювати вміст веб-сайта й оновлювати його;
3. розміщувати на веб-сторінках зображення й текст, налаштовувати параметри їхнього розташування, відображення та відтворення;
4. створювати гіпепрпосилання на основі текстових фрагментів і зображень.

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

Інформатика 11 клас: підручник для загальноосвітніх навчальних закладів: академічний рівень / Й.Я. Ривкінд, T.I. Лисенко, Л.А. Чернікова, В.В. Шакотько

План

1. Введення в тему.
2. Структура веб-сайтів. Етапи створення веб-сайтів.
3. Відпрацювання практичних навичок роботи.
4. Типові запитання до уроку.
5. Домашнє завдання.

Хід уроку

---

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

1. Інструктаж техніки безпеки при роботі з ПК та в комп’ютерному класі.
2. Огляд теми “Автоматизоване створення й публікація веб-ресурсів”.

---

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

1. Який документ називають складеним?
2. Що таке веб-сторінка, веб-сайт, веб-портал? У чому полягає відмін­ність між цими поняттями?
3. Які мови використовуються для створення веб-сторінок?
4. Повідомлення яких видів за способом подання можуть міститися на веб-сторінках?
5. Із чого складається доменне ім'я Інтернет-ресурсу? Якою є структура URL-адреси?
6. Які етапи розв'язування задач з використанням комп'ютера ви знаєте?
7. Що таке дизайн? Які основні принципи дизайну презентації та слайдів?
8. Що таке стиль?
9. У чому полягають закони композиції; колористики; ергономіки?
10. Що таке верстка? Яке її значення під час створення публікацій?

---

2. Структура веб-сайтів. Етапи створення веб-сайтів.

Типи веб-сторінок

Прикладом складеного документа є веб-сторінка, оскільки вона може включати дані різних типів: графічні зображення, анімацію, відео та му­зичні фрагменти. Веб-сторінки є інформаційними ресурсами служби World Wide Web, і у 9-му класі ви ознайомилися з тим, як здійснювати пошук і перегляд цих ресурсів. Тепер ознайомимося зі способами їх ство­рення. Під час створення веб-сторінок важливо враховувати їх структуру та типи, а також види сайтів, до складу яких будуть входити ці сторінки.

Розглянемо приклад веб-сторінки (рис. 4.57). Серед елементів, які на ній відображаються, можна виділити такі групи:

• контент (англ. content - зміст) - змістове наповнення веб-сторінки, доступне користувачу: тексти, зображення, відео, звукові дані та ін.;
• елементи навігації — засоби для переходу до інших веб-сторінок;
• елементи дизайну — елементи структурування контенту та його фор­матування, оформлення сторінки.

Залежно від призначення можна виділити такі типи веб-сторінок:

• головна (домашня) сторінка — сторінка, з якої розпочинається пере­гляд веб-сайта при переході на сайт за його URL-адресою. На ній, як правило, розкривається тематика сайта, його призначення, наводять­ся дані про розробників, пояснюється, які матеріали можна знайти на інших сторінках сайта;
• інформаційні сторінки (сторінки тематичних розділів) містять тек­сти, зображення та повідомлення інших видів, які розкривають тему сайта або деякого його розділу. Головна сторінка сайта є окремим ви­падком інформаційної сторінки;
• сторінки-контейнери містять списки посилань на ресурси даного або інших сайтів:

• веб-каталоги - посилання на веб-ресурси (веб-сторінки, веб-сайти);
• каталоги файлів - посилання на файли, які можуть бути заванта­жені користувачем;

• комунікативні (інтерактивні) сторінки призначені для надання ко­ристувачам сайта засобів спілкування та зворотного зв'язку з розроб­никами сайта:

• сторінки форуму призначені для організації спілкування у форумі;
• сторінки чата призначені для організації спілкування в чаті;
• сторінки гостьової книги призначені для надання можливості від­відувачам сайта залишати свої коментарі, як правило, для авторів сайта;
• сторінки форми призначені для проведення опитування, з'ясування точки зору відвідувачів, здійснення вибору товарів або послуг на комерційних сайтах

та ін.

Залежно від технологій, використаних під час створення веб-сторінок, можна виділити такі типи сторінок:

• статичні сторінки створені, як правило, засобами мови розмітки гіпертексту HTML. Вміст сторінок залишається незмінним для всіх від­відувачів сайта. На таких сторінках не передбачається часта зміна да­них та їх оформлення, вони не потребують спеціального програмного забезпечення для зберігання даних. Такими можуть бути сторінки з навчальними матеріалами, історичними відомостями, описами му­зейних експонатів та ін.;

                        Наприклад:

статистичними є

сторінки Гете-Інституту в Україні

опис екскурсій Національного художнього музею України

• динамічні сторінки створені з використанням мов програмування, та­ких як РНР (англ. Personal Home Page Tools - інструменти розробки персональних домашніх сторінок), ASP (англ. Active Server Pages -активні серверні сторінки), PERL (англ. Practical Extraction and Report Language - практична мова для видобування даних і складан­ня звітів) та ін. Такі сторінки призначені для відображення інформа­ційних матеріалів, що часто оновлюються. Такими можуть бути сто­рінки з новинами, з переліком товарів на сайті Інтернет-магазину, з добіркою популярних відеофрагментів та ін. При відвідуванні таких сторінок користувачі можуть бачити різний вміст;

Наприклад:

динамічними є

                сторінки веб-енциклопедій Вікіпедія

                сторінки Єдиного освітнього інформаційного вікна

                сторінки Інтернет-магазину Rozetka

                сторінки чатів, форумів та інше.

• флеш-сторінки (англ. flash - спалах) створюються з використанням технології розробки анімаційних зображень Adobe Flash, а тому такі сторінки привабливі, яскраві, містять багато анімації та звукових ефектів. Вигляд веб-сторінки змінюється в результаті відтворення флеш-анімації та залежно від положення вказівника. Нетиповий ди­зайн зацікавлює відвідувачів, тому флеш-сторінки часто розміщують­ся на сайтах дизайнерів, художників, фотографів тощо, роботи яких ефектніше виглядають у динамічному оформленні. У той самий час флеш-сторінки важко змінювати, тому для них майже не передбача­ється оновлення даних та інших елементів. Обсяги файлів, у яких збе­рігаються флеш-сторінки, дуже великі, такі сторінки повільно заван­тажуються. Для їх перегляду повинні бути встановлені плагіни для відтворення флеш-анімації.

Наприклад:

флеш-технології використані на сторінках сайтів

агенція Бревіс

студія веб-дизайну Ладіо

сторінки архітектора Дмитра Давидовського 

Класифікація веб-сторінок може бути представлена схемою, поданою на рисунку 4.58.

 

Класифікація веб-сайтів

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

Класифікувати сайти можна за значеннями різних властивостей. На­ведемо кілька можливих класифікацій.

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

Залежно від того, хто є власником, сайти поділяються на:

• персональні, власниками та розробниками яких є приватні особи. Такі сайти містять дані про автора та його інтереси, професійні та творчі досягнення тощо. Персональні сайти іноді називають домашні­ми сторінками.

Персональними сайтами є, наприклад, сайти

пись­менниці О. Забужко,

композитора О. Злотника та ін.;

• сайти комерційних організацій призначені для сприяння бізнесу з ви­користанням засобів інформаційно-комунікаційних технологій. Структури сайтів комерційних організацій відрізняються залежно від мети використання сайтів, тому в цій групі можна виділити такі види сайтів:

• сайти-візитівки містять загальні відомості про організацію, напри­клад сайт юридичної компанії ТОВ «Житомир правовий»;
• промо-сайти (англ. promotion - сприяння, просування) призначені для реклами та просування певного товару або послуги, містять де­тальні дані про них, повідомляють про різноманітні рекламні акції та інші корисні відомості для потенційних покупців, наприклад сайт фотостудії Prostofoto;
• сайти електронної комерції: Інтернет-магазини, що призначені для організації продажу товарів або послуг через Інтернет, он-лайн аукціони, електронні представництва - он-лайн офіси тощо, які мають засоби для проведення комерційних операцій, замовлення товарів, оформлення документації та здійснення оплати, напри­клад сайт книжкового магазину Азбука  та ін.;

• сайти некомерційних організацій, серед яких можуть бути сайти освітніх установ, урядових організацій, політичних партій, засобів масової інформації, закладів охорони здоров'я та ін. Метою створення таких сайтів у першу чергу є повідомлення в Інтернеті про існування організації, надання відомостей про її діяльність, створення засобів для забезпечення спілкування, надання безкоштовних послуг з інфор­мування населення з певних питань тощо. Такими є, наприклад, сай­ти Міністерства освіти і науки, молоді та спорту України, сайт видання Кореспондент.net.

За призначенням виділяють такі типи сайтів:

• сайти, що надають інформаційні матеріали. За видом матеріалів і способом їх подання в цій групі можна виділити:

• інформаційно-тематичні сайти, наприклад сайт навчальних мате­ріалів Шкільна фізика;
• сайти новин, наприклад Новини України;
• електронні бібліотеки, наприклад Бібліотека української літерату­ри;
• енциклопедії, словники, каталоги, наприклад Портал знань;
• сховища файлів різних видів, медіатеки, наприклад сховище відео­файлів RuTube та ін.;

• сайти для он-лайн контактів і спілкування. Вам уже відомі веб-сайти цієї категорії, на яких створені форуми та веб-чати. Крім того, засоби для спілкування також надають сайти соціальних мереж, блоги, сай­ти знайомств і мережних ігор та ін. Наприклад, сайт соціальної мере­жі ВКонтакте;
• сайти для здійснення комерційних операцій. До цієї групи входять Інтернет-магазини та аукціони, системи електронних платежів, сайти банків, бірж, пунктів обміну валют. До цього виду сайтів належать і ті, що пропонують різноманітні платні послуги - навчання іноземних мов, консультації психолога та ін. Прикладом є сайт українського он­лайн аукціону Аукро;
• сайти он-лайн сервісів (лат. servio - слугувати, надавати послуги). Та­кими є вже знайомі вам сайти електронної пошти, пошукових систем, сайти закладок на інші сайти, наприклад БобрДобр, перекладу слів і текстів, наприклад он-лайн словник ABBYY Lingvo. Крім того, он-лайн сервіса­ми, для яких створено відповідні сайти, є сервіси:

• надання хостингу (англ. hosting - виявлення гостинності) - виді­лення апаратних і програмних ресурсів сервера для розміщення файлів користувача, забезпечення доступу до них, опрацювання запитів. Хостинг надається, наприклад, на сайті Hvosting;
• он-лайн офіси - сервіс створення он-лайн документів: текстових, презентацій, електронних таблиць та ін. Прикладами є сервіс До­кументи Google, он-лайн офіс Zoho Office Suite;
• сервіс автоматизованої розробки веб-сайтів. На сайтах, розробле­них для підтримки цього сервісу, розміщують системи керування контентом CMS (англ. Content Management System - системи керу­вання вмістом, контентом) - програми, що використовують для створення, редагування та керування вмістом веб-сайта. Прикла­дом є сайт uCoz   та ін.

За наповненням сайти поділяються на:

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

Наведена вище класифікація сайтів представлена на рисунку.

Оцінювання веб-сайтів

Здійснюючи навігацію ресурсами Інтернету, ви, напевно, звертали увагу на те, як по-різному сприймаються сайти однакової тематики та спрямованості. На одних сайтах ви затримувалися надовго, з деяких відразу переходили на інший ресурс. Тривалість перегляду залежить від привабливості дизайну сайта, зруч­ності пошуку потрібних матеріалів. Для відвідувача під час оцінювання веб-сайта важливими показниками є:

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

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

Етапи створення веб-сайтів

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

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

• мету, з якою створюється сайт;
• тематику сайта;
• тип сайта: домашня сторінка, форум, Інтернет-магазин, портал тощо;
• відмінності сайта від інших сайтів такої самої тематики;
• аудиторію потенційних відвідувачів сайта: вік відвідувачів, стать, коло інтересів тощо;
• перелік сервісів для розміщення на сайті: форум, чат, пошукова система, веб-каталог, електронна пошта та ін.;
• перспективи розвитку сайта.

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

Мапу сайта створюють у текстовому редакторі або редакторі презентацій, малюють на папері тощо. Наприклад, для сайта-візитівки вашого класу, основними відвідувача­ми якого будуть учні класу та їхні батьки, мапа сайта може бути такою, як зображено на рисунку 4.61.

Другим завданням етапу є розробка так званої зовнішньої структури сайта, яка визначає зовнішній вигляд веб-сторінок. Оскільки для біль­шості сторінок сайта рекомендується застосовувати єдиний стиль оформ­лення, то потрібно визначити схему розташування на сторінках основних блоків: як буде розташований основний матеріал, додаткові інформаційні та рекламні блоки, анонси, меню, лічильник відвідувачів тощо.

Як правило, на веб-сторінках передбачено розміщення:

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

Схему зовнішньої структури представляють у вигляді модульної сітки (рис. 4.62).

Якщо розробка сторінок сайта буде здійснюватись автомати­зованими засобами, то зовнішня структура може бути запропонована в шаблоні сторінки.

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

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

Для розміщення на веб-сторінці варто використовувати мультимедійні файли форматів, що передбачають стиснення даних. Для графічних зображень це можуть бути формати JPEG, GIF, PNG, для аудіокліпів - МР3, для відеофрагментів - AVI, MP4 та ін.

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

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

Організації, що надають послуги хостингу, називають хостинг-провайдерами. Існують сервери, які надають безкоштовний хос­тинг. При цьому, як правило, на вашому сайті буде розміщуватися стороння реклама та обмежуватися використання деяких інтерак­тивних засобів. Можна розмістити сайт на сервері платного хостин­гу без реклами та з усіма потрібними програмними засобами.

7. Після публікації сайта в Інтернеті його розробка не вважається за­вершеною. Певний час буде тривати тестування сайта для виявлен­ня недоліків верстки.
8. Популяризація та підтримка сайта. Для того щоб ваш сайт поча­ли відвідувати користувачі Інтернету, бажано зареєструвати його у пошукових системах і каталогах, розмістити посилання на нього на інших сайтах. Цей процес називають популяризацією, розкру­чуванням або просуванням сайта. Для популяризації використову­ють й інші засоби, але важливо, щоб матеріали, доступні на вашо­му сайті, були варті того, щоб ними зацікавилися відвідувачі.
9. Для підтримки інтересу до вашого сайта важливо регулярно онов­лювати його, доповнювати цікавими унікальними матеріалами. Можливо із часом стане бажаною зміна дизайну сайта -редизайн. При виконанні таких робіт кажуть про супровід сайта.

Основи веб-дизайну

Під час створення сайтів важливе значення відіграє дизайн.

Веб-дизайн - це дизайн, об'єктами якого є сторінки веб-сайтів.

Як і в кожному напрямку дизайну, для вдалої реалізації завдань веб-дизайну потрібно до­тримуватися принципів композиції, колористики та ергономіки, з якими ви ознайомилися у 10 класі під час вивчення теми «Комп'ютерні презентації». У той самий час у веб-дизайні є свої особливості, пов'язані зі специфікою сприйняття повідомлень з екрана монітора, передавання да­них із веб-сервера на комп'ютер клієнта та ін.

Виділяють такі базові елементи веб-дизайну:

• лінії підкреслюють важливий зміст, підсилюють читабельність сайта. Використовуються як межі деякого елемента, розділові лінії між еле­ментами веб-сторінки, контури навколо елементів тощо;
• форми утворюються з використанням замкнених контурів і тривимір­них об'єктів. Є три основні типи форм: геометричні (прямокутники, трикутники тощо), природні (листя, краплі та ін.), абстрактні (ікон­ки, символи тощо). Використовуються для структурування даних, їх групування, передачі їх змісту, привернення уваги до оформлення;
• текстура (лат. textura - тканина) використовується як фон і створює ілюзію поверхні з каміння, тканини, деревини тощо. Текстури з ефек­тами природних матеріалів надають емоційне забарвлення стилю сайта;
• колір використовується як фон, для розставлення акцентів, утворює зображення, розділяє передній і задній плани та ін.;
• напрям додає настрій, створює ілюзію сталості чи руху. Зображується з використанням ліній або малюнків. У дизайні веб-сторінок перева­жає горизонтальний, вертикальний або діагональний напрям.

Як уже зазначалося, важливе значення у веб-дизайні має стиль. Дизайн сайта може бути спроектований в одному з наведених стилів (рис. 4.64).

Вибираючи стиль дизайну за кольоровою гамою, варто враховувати особливості сприйняття кольору відвідувачами різного віку та статі:

• темний стиль передбачає, що в оформленні сайта переважають темні кольори. Такі сайти добре сприймає молодь, але вони здаються занад­то похмурими, тривожними для осіб старшого віку;
• світлий стиль з переважаючими світлими кольорами легко сприйма­ється всіма категоріями відвідувачів, але дехто вважає світлі сайти занадто простими;
• однокольоровий стиль - це стиль оформлення, у якому переважає один колір, відмінний від чорного та білого. Часто обраний колір є елементом іміджу власника;
• різнокольоровий стиль передбачає використання двох або більше ко­льорів, що займають найбільшу площу на сайті. Різнокольоровий стиль часто обирають у ході створення сайтів для дітей.

Класифікуючи дизайн сайтів за принципом використання графіки, можна виділити такі групи стилів:

• чистий - стиль сайтів, на яких графічні елементи є частиною інфор­маційного наповнення, а не використовуються для оформлення. Чис-

тий стиль використовують на сторінках Інтернет-магазинів, де кожне зображення є ілюстрацією того чи іншого виду товару;

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

За розміщенням контенту у стилях дизайну сайтів вирізняють:

• мінімалістичний - на сторінках сайтів цього стилю візуально виділя­ється один головний об'єкт, який займає більшу частину площі сто­рінки;
• у дві колонки та у три колонки - найрозповсюдженіші стилі дизайну, під час використання яких можна досягти зручного подання основного та додаткового інформаційного матеріалу, системи навігації, інтерак­тивних елементів сторінки тощо;
• складний - стиль дизайну з великою кількістю інформаційних бло­ків, розміщених на сторінці, що мають різний розмір. Такий стиль дизайну часто використовують на головних сторінках порталів для надання користувачам відомостей про різні види сервісів, доступні на порталі.

Найбільшою є класифікація стилів дизайну за тематичною ознакою.

Наведемо кілька прикладів стилів дизайну цієї класифікації:

• стиль «Ретро» - в оздобленні сторінок використовують елементи де­кору, предмети інтер'єру та інші атрибути, притаманні минулим де­сятиліттям;
• стиль «Ґранж» (амер. розмов, grunge - дещо неприємне) - асиметрич­не розміщення елементів на сторінці складає враження хаотичної композиції, виконаної начебто недбало (рис. 4.24);
• футуристичний стиль - в оформленні сторінки використовують гра­фічні елементи, що є атрибутами передбачуваного майбутнього: робо­ти, високотехнологічні механізми тощо;
• журнальний стиль - веб-сторінки, оформлені за принципами дизайну глянцевих журналів: великі заголовки, крупні високоякісні фотогра­фії таін.;
• мультяшний стиль - оформлення сторінок стилізовано під мультфіль­ми та комікси.

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

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

З огляду на ці та інші фактори, можна запропонувати такі правила оформлення веб-сторінок:

• Оберіть кольорову гаму для вашого сайта, враховуючи ваші вподобан­ня, тематику сайта та вподобання потенційних відвідувачів. Викорис­тайте для оформлення не більше ніж 2-3 кольори.
• У ході визначення кольорової гами сторінки вибирайте контрастні кольори для тексту та фону, щоб текст легше читався.
• Розбивайте текст на абзаци, між якими зробіть збільшені відступи.
• Виберіть розмір шрифту, при якому текст буде сприйматися комфорт­но - не занадто дрібний і в міру великий. Шрифт на заголовках зробіть більшим від шрифту основного тексту. Вид шрифту зробіть однаковим на всіх сторінках.
• Вирівняйте заголовки по центру, а основний текст - за шириною.
• Для структурування тексту використовуйте таблиці. Розміщуючи фрагменти тексту та графічні зображення в таблицях, можна створи­ти цікаві композиційні рішення на веб-сторінках.
• Не зловживайте флеш-анімацією, відео, музичними та графічними елементами. Вони можуть відволікати увагу від корисних матеріалів та уповільнювати завантаження сторінок.
• Зробіть гіперпосилання для переходу між сторінками сайта, але не розміщуйте на сторінках занадто багато гіперпосилань. Виділяйте гі­перпосилання кольором, щоб користувач бачив, що це посилання і які з них він уже відвідував.
• Зробіть логотип сайта, зображення або текст у заголовку гіперпоси-ланням на головну сторінку сайта.
• Створіть для відвідувачів мапу сайта для спрощення переходу на сто­рінки з потрібними матеріалами.

---

3. Відпрацювання практичних навичок роботи.

Символи України

---

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

1. Які групи елементів можна виділити на веб-сторінці? Охарактеризуйте кожну групу.
2. Що таке контент веб-сторінки?
3. Поясніть особливості різних видів веб-сторінок залежно від їх вмісту.
4. Чим відрізняється домашня сторінка веб-сайта від інших інформацій­них сторінок?
5. Поясніть особливості різних видів веб-сторінок залежно від технологій, використаних при їх створенні.
6. За якими ознаками можна класифікувати веб-сайти?
7. Поясніть особливості різних видів веб-сайтів за рисунком 4.59.
8. Який сервіс називають хостингом?
9. Що таке система керування контентом?
10. За якими критеріями оцінюють веб-сайти?
11. Що розуміють під юзабіліті сайта?
12. Назвіть етапи розробки веб-сайта.
13. У чому полягає етап постановки завдання під час розробки веб-сайта?
14. Що таке внутрішня структура веб-сайта?
15. Які складові має зовнішня структура сайта?
16. Значення властивостей яких об'єктів вибирають на етапі розробки дизайн-макета сторінок сайта?
17. Що таке верстка? Що є результатом верстки сайта?
18. Що таке хостинг? Кого називають хостинг-провайдерами?
19. У чому полягає етап популяризації та підтримки сайта?
20. Поясніть схему класифікацій стилів дизайну (рис. 4.64).
21. Поясніть, чому під час розробки дизайну сайта важливо враховувати основну аудиторію потенційних відвідувачів.
22. Назвіть відомі вам правила оформлення веб-сторінок.

Урок 27 Стандарт 11

Урок 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 називають тегами (англ. tag - ярлик, ознака).

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

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

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

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

• текстових редакторів, у середовищі яких користувач може вводити текст і теги. Для цього можна використовувати текстові редактори Блокнот, Edit Plus, Homesite, HTML Pad та ін. Готову сторінку по­трібно зберегти та надати розширення імені файлу htm або html. Створення веб-сторінки такими засобами передбачає обов’язкове зна­ння мови розмітки гіпертекстів, наприклад HTML. Усю роботу з добо­ру тегів розробник виконує власноруч. Розробка сторінки здійснюєть­ся повільно, але завдяки невеликому розміру файлу, у якому вона зберігається, така сторінка швидко завантажується та відкривається у вікні браузера;
• прикладних програм загального призначення, наприклад з пакета Microsoft Office, які можуть зберігати файли у форматі HTML. Як ви вже знаєте, документи, створені в програмах Word 2007, PowerPoint 2007, Publisher 2007 та інших, можна зберігати, вибравши тип файлу Веб-сторінка (*.htm, *.html). При цьому створюються веб-сторінки, у яких застосування тегів для розмітки відбувається автоматично. Роз­робнику не потрібно знати мову розмітки гіпертексту. Але файли, у яких зберігаються такі сторінки, мають набагато більший обсяг, ніж файли, створені в текстових редакторах. Причиною є велика кількість тегів, які описують структуру і форматування документа та дублюють­ся під час застосування до кожного окремого елемента сторінки;
• спеціалізованих веб-редакторів - програм, що призначені для роз­робки веб-сайтів. Популярними веб-редакторами є Adobe Dream­weaver, Microsoft FrontPage, SharePoint Designer, WYSIWYG Web Builder, KompoZer та ін. Ці програми мають додаткові засоби для ство­рення статичних і динамічних веб-сторінок, при цьому не вимагають від розробника знання мови HTML. Такі програми називають WYSIWYG-редакторами (англ. What You See Is What You Get - що ви бачите, то ви й отримуєте), створена їхніми засобами веб-сторінка ви­глядатиме так, як вона сконструйована в редакторі. HTML-код сторін­ки більш коректний, ніж під час використання, наприклад програм пакета Microsoft Office, але теж надлишковий;
• систем управління веб-контентом WCMS (англ. Web Content Management System - система управління веб-контентом), які нада­ють користувачам зручні інструменти для керування текстовим і гра­фічним наповненням веб-сайтів, додавання та видалення статей з ін­формаційними матеріалами, створення системи навігації веб-сайтів та ін. Популярними WCMS є системи Joomla, Wordpress, Drupal, MediaWiki, Mambo, NUKE та ін. Системи управління вмістом веб- сайтів пропонують набори шаблонів оформлення веб-сторінок і моду­лів, що роблять сайт динамічним: форумів, чатів, стрічок новин, ка­талогів файлів, контролю статистики тощо.

Названі засоби створення веб-сайтів можна встановити на локальному комп’ютері. Створені в їх середовищі веб-сторінки після завершення про­цесу розробки потрібно опублікувати в Інтернеті. У той самий час існу­ють 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) можна вибрати шаблон Веб-сторінка, для сторінки Учите­лі та предмети - шаблон Список, Поетична творчість - шаблон Оголо­шення, Навчальні матеріали - шаблон Картотека.

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

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

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

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

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

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

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

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

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

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

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

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

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

• Вставити - для вставлення об'єктів на сторінку;
• Формат - для форматування тексту на веб-сторінці;
• Таблиця - для вставлення та редагування таблиць;
• Компонування - для вибору модульної сітки інформаційного блока сторінки: в один, два, три стовпці, з лівою або правою бічною панеллю  та ін. (рис. 4.72).

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

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

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

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

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

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

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

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

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. Створіть і розмістіть веб-сторінки на основі такої схеми внутрішньої струк­тури:

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

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

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

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

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

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

---

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

---

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

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

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

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

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