Урок: "Структура веб-сайтів, різновиди веб-сайтів. Різновиди веб-сторінок."

Основи веб-дизайну (24 години)

Тема: Автоматизоване створення й підтримка веб-ресурсів. Технології веб 2.0.

Тема уроку: Структура веб-сайтів, різновиди веб-сайтів. Різновиди веб-сторінок.

 

Дидактична мета:  ознайомити з поняттями: веб-сайт; веб-сторінка; пояснити: структуру сайту;  особливості сайтів;  відмінності між веб-сторінками; формувати навички: проектувати сайт; складати схеми та аналізувати структуру сайту; формувати вміння чітко й лаконічно висловлювати думки;

Розвивальна мета: логічне мислення учнів; вміння узагальнювати, систематизувати, робити висновки; розвивати активність та цікавість до предмету шляхом застосування комп’ютерних технологій;

Виховна мета: виховувати увагу, спостережливість, вміння раціонально використовувати робочий час, дисциплінованість під час роботи за ПК.

Тип уроку: засвоєння нових знань.

Обладнання: мультимедійний проектор, екран, комп’ютер, навчальна презентація.

Хід уроку:

І  Організаційний момент (2 хв.)

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

ІІ Актуалізація опорних знань учнів

1. Назвіть служби Інтернету?

 (Гіпертекстова система WWW (Wоrld Wіdе Wеb), E-mail, Іntеrnеt Rеlау Сhаt, тематичні конференції Usеnеt і т.д.)

Служба Інтернету — це набір послуг, які надаються клієнтам програмним забезпеченням серверів Інтернету з використанням певних мережних протоколів.

2. Перелічіть відомі вам браузери.

 

IІІ Мотивація навчальної діяльності

 

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

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

А чи знаєте Ви, що перший у світі сайт info.cern.ch з'явився в 1990 році. Його створив Тім Бернерс-Лі — батько сучасного інтернету. Автор опублікував на своєму сайті опис нової технології WWW (World Wide Web), оснований на протоколі передачі даних HTTP, системі адресації URI і мові розмітки HTML. Також на ресурсі було описано принципи встановлення та роботи серверів і браузерів. Сайт став першим у світі інтернет-каталогом, на якому Тім Бернерс-Лі розмістив гіперпосилання на інші інтернет-ресурси, що розпочали своє існування.

 

ІV  Повідомлення теми та мети уроку

Тема,  яку  ми  починаємо  вивчати,  має  назву  «Автоматизоване створення  й  публікування  веб-ресурсів».  Тема уроку: Структура веб-сайтів, різновиди веб-сайтів. Різновиди веб-сторінок.

V  Вивчення нового матеріалу

Веб-сторінка  (англ.  Web-page)  —  інформаційний  ресурс,  доступний у мережі World Wide Web, який можна переглянути у веб-браузері.  Зазвичай  ця  інформація  записана  у форматі  HTML  або XHTML і може містити гіпертекст із навігаційними гіперпосиланнями на інші веб-сторінки.

Мова HTML  (від англ. Hypertext Markup Language - мова розмітки гіпертексту) - це стандартна мова розмітки документів у Всесвітній павутині. Всі веб-сторінки створюються за допомогою мови HTML (або XHTML).

Мова HTML інтерпретується браузером і відображається у вигляді документа, зручному для людини.

Веб-сайт (англ. website, місце, майданчик в Інтернеті), також сайт (англ. site, місце, майданчик) — сукупність веб-сторінок, доступних в Інтернеті, які об’єднані як за змістом, так і навігаційно. Фізично сайт може розміщуватися як на одному, так і на кількох серверах.

Вправа «Пошук»

Учні об’єднуються в 2 групи.

Завдання:

Використовуючи ресурси Інтернету, заповніть таблицю.

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

Учні слухають результати (по одному учню від групи + доповнення від інших груп) та аналізують відповіді.

Типи сайтів	Типи веб-сторінок
Статичні веб-сайти Веб-спільноти Інтернет-магазини Портали Блоги та ін.	Домашня (головна) Веб-каталог Форум Чат Сторінка розділу веб-сайту

Як  створити  веб-сайт?

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

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

Загалом виділяють три типи структур веб-сайтів — лінійну, деревоподібну та довільну.

Подорожуючи сайтом із лінійною структурою, з головної сторінки ви перейдете на другу сторінку, з неї — на третю тощо.

На сайті з деревоподібною структурою з головної сторінки можна потрапити на одну зі сторінок другого рівня, звідти — на одну зі сторінок третього рівня тощо.

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

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

Наведемо  додатково  чотири  приклади  структур  сайту.  Кожна із цих структур має свої недоліки та переваги у проектуванні веб-сайту.

 

 

Стандартна

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

Каскад

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

Хмарочос

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

Павутина

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

Етапи  створення  сайту

Створення сайту умовно можна розділити на такі етапи:

1. Попередній етап розробки сайту.

На  цьому  етапі  розв’язуються  питання  загального  характеру.

Обговорюється загальна концепція сайту, формулюються та фіксуються цілі створення сайту.

2. Етап проектування сайту.

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

3. Етап розробки й тестування сайту.

4. Розміщення сайту.

5. Розвиток ресурсу.

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

Для того щоб сайт став доступним широкому колу відвідувачів, йому необхідно призначити доменне ім'я і розмістити в мережі Інтернет. Розміщення сайту на сервері та подальше його адміністру­вання називають хостингом. Наданням такої послуги займаються спеціальні організації. Хостинг буває платним і безкоштовним. Можливість створювати веб-сторінки та організовувати форуми й чати в автоматизованому режимі (крім власне розміщення сайту) часто надається на серверах, що забезпечують хостинг. Наприклад, ucoz.ru, mylivepage.com. Веб хостинг UcoZ — це безкоштовний веб-хостинг із вбудованою системою керування сайтом.

V  ЗАСТОСУВАННЯ ЗНАНЬ, ФОРМУВАННЯ ВМІНЬ ТА НАВИЧОК

Учні об’єднуються в чотири групи, кожна з яких створює одну зі схем (стандартна, каскад, хмарочос, павутина) та наводить приклади можливих сфер використання.

 

 

 

 

Стандартний спосіб розділення веб-сайту

    основна сторінка

 

 

 

 

                                                                                                            …….

Каскадний спосіб організації веб-сайту

основна сторінка

 

 

 

 

 

 

 

Схема, яка називається «Хмарочос»

 

 

 

 

 

 

         основна офіційна сторінка

 

 

 

 

 

Структура «Павутина»

 

                                                                                               основна офіційна сторінка

 

 

 

 

 

 

 

 

 

Представники  кожної  групи  демонструють  створену  схему  та наводять приклади можливих галузей використання. Колективне обговорення.

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

VI  ПІДБИТТЯ ПІДСУМКІВ УРОКУ (знайти відповідність)

Який тип сайту описано:

1. складається з декількох сторінок і має унікальний, але простий і функціональний дизайн; ідеально підходить для компаній, які хочуть розмістити інформацію про себе й свої послуги в Інтернеті; основні розділи сайту: Про компанії, Продукція або послуги, Прайс-листи, Контактна інформація; (Сайт-візитка)
2.  сайт, призначений для автоматизації внутрішнього документообігу, обліку показників компанії, управління персоналом, може бути оснащений функціями обміну інформацією між вилученими філіями;   позитивно впливає на репутацію й імідж компанії; дизайн повинен відповідати фірмовому стилю компанії; використовується мінімум графіки, основна увага звертається на текст; (Корпоративний сайт)
3.  інтерактивний веб-сайт, що рекламує товар або послугу і приймає замовлення на покупку; пропонує користувачеві вибір варіанта розрахунку, при цьому адміністратор сайту зобов’язаний організувати доставку товару і проконтролювати розрахунки за поставку; (Інтернет-магазин)
4.  складний розважальний інтерактивний проект, що передбачає велику відвідуваність та складність дизайну; (Ігровий портал)
5.  може бути самостійним сайтом, а може бути розділом сайту; найчастіше робиться на піддомені основного сайту й призначений для організації спілкування відвідувачів сайту між собою й з адміністратором сайту; (Сайт-форум)
6.  сайт, що по суті є Інтернет-щоденником, або журналом, при цьому на кожну тему відвідувачі можуть залишати свої коментарі-повідомлення, доступні з головної сторінки відповідної теми; зазвичай дуже часто оновлюється, із цієї причини може набагато частіше індексуватися пошуковими машинами, ніж звичайні сайти. (Блог)

VII  ДОМАШНЄ ЗАВДАННЯ

Опрацювати конспект і відповідний параграф підручника.

Розробити структуру власного сайту: 1. Тип сайту. 2. Меню сайту: посилання,  розміщення модулів, побудова списку компонентів, що підключаються, тощо.

1. Накреслити схематично структуру сайту стандартна.

Стандартна

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

 

 

 

 

 

 

 

 

Знайти відповідність. Який тип сайту описано?
1. Сайт складається з декількох сторінок і має унікальний, але простий і функціональний дизайн; ідеально підходить для компаній, які хочуть розмістити інформацію про себе й свої послуги в Інтернеті; основні розділи сайту: Про компанії, Продукція або послуги, Прайс-листи, Контактна інформація.		а) Блог
2. Сайт, призначений для автоматизації внутрішнього документообігу, обліку показників компанії, управління персоналом, може бути оснащений функціями обміну інформацією між вилученими філіями;   позитивно впливає на репутацію й імідж компанії; дизайн повинен відповідати фірмовому стилю компанії; використовується мінімум графіки, основна увага звертається на текст.		б)  Корпоративний сайт
3. Інтерактивний веб-сайт, що рекламує товар або послугу і приймає замовлення на покупку; пропонує користувачеві вибір варіанта розрахунку, при цьому адміністратор сайту зобов’язаний організувати доставку товару і проконтролювати розрахунки за поставку.		в) Ігровий портал
4. Складний розважальний інтерактивний проект, що передбачає велику відвідуваність та складність дизайну.		г) Сайт-форум
5. Може бути самостійним сайтом, а може бути розділом сайту; найчастіше робиться на піддомені основного сайту й призначений для організації спілкування відвідувачів сайту між собою й з адміністратором сайту.		д) Інтернет-магазин
6. Сайт, що по суті є Інтернет-щоденником, або журналом, при цьому на кожну тему відвідувачі можуть залишати свої коментарі-повідомлення, доступні з головної сторінки відповідної теми; зазвичай дуже часто оновлюється, із цієї причини може набагато частіше індексуватися пошуковими машинами, ніж звичайні сайти.		ж) Сайт- візитка

 

ДОМАШНЄ ЗАВДАННЯ

1. Опрацювати конспект і відповідний параграф підручника.
2. Розробити структуру власного сайту: 1. Тип сайту. 2. Меню сайту: посилання,  розміщення модулів, побудова списку компонентів, що підключаються, тощо.

Приклад:

 

 

 

 

 

 

1. Накреслити схематично структуру сайту каскад.

Каскад

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

 

 

 

 

 

 

 

 

Знайти відповідність. Який тип сайту описано?
1. Сайт складається з декількох сторінок і має унікальний, але простий і функціональний дизайн; ідеально підходить для компаній, які хочуть розмістити інформацію про себе й свої послуги в Інтернеті; основні розділи сайту: Про компанії, Продукція або послуги, Прайс-листи, Контактна інформація.		а) Блог
2. Сайт, призначений для автоматизації внутрішнього документообігу, обліку показників компанії, управління персоналом, може бути оснащений функціями обміну інформацією між вилученими філіями;   позитивно впливає на репутацію й імідж компанії; дизайн повинен відповідати фірмовому стилю компанії; використовується мінімум графіки, основна увага звертається на текст.		б)  Корпоративний сайт
3. Інтерактивний веб-сайт, що рекламує товар або послугу і приймає замовлення на покупку; пропонує користувачеві вибір варіанта розрахунку, при цьому адміністратор сайту зобов’язаний організувати доставку товару і проконтролювати розрахунки за поставку.		в) Ігровий портал
4. Складний розважальний інтерактивний проект, що передбачає велику відвідуваність та складність дизайну.		г) Сайт-форум
5. Може бути самостійним сайтом, а може бути розділом сайту; найчастіше робиться на піддомені основного сайту й призначений для організації спілкування відвідувачів сайту між собою й з адміністратором сайту.		д) Інтернет-магазин
6. Сайт, що по суті є Інтернет-щоденником, або журналом, при цьому на кожну тему відвідувачі можуть залишати свої коментарі-повідомлення, доступні з головної сторінки відповідної теми; зазвичай дуже часто оновлюється, із цієї причини може набагато частіше індексуватися пошуковими машинами, ніж звичайні сайти.		ж) Сайт- візитка

 

ДОМАШНЄ ЗАВДАННЯ

1. Опрацювати конспект і відповідний параграф підручника.
2. Розробити структуру власного сайту: 1. Тип сайту. 2. Меню сайту: посилання,  розміщення модулів, побудова списку компонентів, що підключаються, тощо.

Приклад:

 

 

 

 

 

1. Накреслити схематично структуру сайту хмарачос.

Хмарочос

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

 

 

 

 

 

 

 

 

 

 

Знайти відповідність. Який тип сайту описано?
1. Сайт складається з декількох сторінок і має унікальний, але простий і функціональний дизайн; ідеально підходить для компаній, які хочуть розмістити інформацію про себе й свої послуги в Інтернеті; основні розділи сайту: Про компанії, Продукція або послуги, Прайс-листи, Контактна інформація.		а) Блог
2. Сайт, призначений для автоматизації внутрішнього документообігу, обліку показників компанії, управління персоналом, може бути оснащений функціями обміну інформацією між вилученими філіями;   позитивно впливає на репутацію й імідж компанії; дизайн повинен відповідати фірмовому стилю компанії; використовується мінімум графіки, основна увага звертається на текст.		б)  Корпоративний сайт
3. Інтерактивний веб-сайт, що рекламує товар або послугу і приймає замовлення на покупку; пропонує користувачеві вибір варіанта розрахунку, при цьому адміністратор сайту зобов’язаний організувати доставку товару і проконтролювати розрахунки за поставку.		в) Ігровий портал
4. Складний розважальний інтерактивний проект, що передбачає велику відвідуваність та складність дизайну.		г) Сайт-форум
5. Може бути самостійним сайтом, а може бути розділом сайту; найчастіше робиться на піддомені основного сайту й призначений для організації спілкування відвідувачів сайту між собою й з адміністратором сайту.		д) Інтернет-магазин
6. Сайт, що по суті є Інтернет-щоденником, або журналом, при цьому на кожну тему відвідувачі можуть залишати свої коментарі-повідомлення, доступні з головної сторінки відповідної теми; зазвичай дуже часто оновлюється, із цієї причини може набагато частіше індексуватися пошуковими машинами, ніж звичайні сайти.		ж) Сайт- візитка

ДОМАШНЄ ЗАВДАННЯ

1. Опрацювати конспект і відповідний параграф підручника.
2. Розробити структуру власного сайту: 1. Тип сайту. 2. Меню сайту: посилання,  розміщення модулів, побудова списку компонентів, що підключаються, тощо.

Приклад:

 

 

 

 

 

1. Накреслити схематично структуру сайту павутина.

Павутина

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

 

 

 

 

 

 

 

Знайти відповідність. Який тип сайту описано?
1. Сайт складається з декількох сторінок і має унікальний, але простий і функціональний дизайн; ідеально підходить для компаній, які хочуть розмістити інформацію про себе й свої послуги в Інтернеті; основні розділи сайту: Про компанії, Продукція або послуги, Прайс-листи, Контактна інформація.		а) Блог
2. Сайт, призначений для автоматизації внутрішнього документообігу, обліку показників компанії, управління персоналом, може бути оснащений функціями обміну інформацією між вилученими філіями;   позитивно впливає на репутацію й імідж компанії; дизайн повинен відповідати фірмовому стилю компанії; використовується мінімум графіки, основна увага звертається на текст.		б)  Корпоративний сайт
3. Інтерактивний веб-сайт, що рекламує товар або послугу і приймає замовлення на покупку; пропонує користувачеві вибір варіанта розрахунку, при цьому адміністратор сайту зобов’язаний організувати доставку товару і проконтролювати розрахунки за поставку.		в) Ігровий портал
4. Складний розважальний інтерактивний проект, що передбачає велику відвідуваність та складність дизайну.		г) Сайт-форум
5. Може бути самостійним сайтом, а може бути розділом сайту; найчастіше робиться на піддомені основного сайту й призначений для організації спілкування відвідувачів сайту між собою й з адміністратором сайту.		д) Інтернет-магазин
6. Сайт, що по суті є Інтернет-щоденником, або журналом, при цьому на кожну тему відвідувачі можуть залишати свої коментарі-повідомлення, доступні з головної сторінки відповідної теми; зазвичай дуже часто оновлюється, із цієї причини може набагато частіше індексуватися пошуковими машинами, ніж звичайні сайти.		ж) Сайт- візитка

 

ДОМАШНЄ ЗАВДАННЯ

1. Опрацювати конспект і відповідний параграф підручника.
2. Розробити структуру власного сайту: 1. Тип сайту. 2. Меню сайту: посилання,  розміщення модулів, побудова списку компонентів, що підключаються, тощо.

Приклад: