Урок № 26 Поняття веб-сайту. Засоби створення веб-сайтів - Інформатика 11 клас - Старша школа - Каталог статей - Учительська світлиця
Головна » Статті » Старша школа » Інформатика 11 клас

Урок № 26 Поняття веб-сайту. Засоби створення веб-сайтів

Урок № 26     

 

Поняття веб-сайту. Засоби створення веб-сайтів

Мета уроку:   сформувати в учнів теоретичні знання про структуру веб-сайтів, різновиди веб-сайтів та веб-сторінок; розглянути етапи створення веб-сайтів; дати уявлення про систему управління вмістом сайту, про засоби автоматизованої розробки веб-сайтів; розглянути редактор веб-сайтів із графічним інтерфейсом.

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

Обладнання: ПК, підручники, картки з практичним завданням.

Тип уроку: комбінований.

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

1.1. Привітання вчителя й учнів, організація уваги.

1.2. Перевірка наявності робочих зошитів, підручників тощо.

2. Перевірка домашнього завдання

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

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

3.1. Вправа «Мозковий штурм».

Учитель пропонує учням пригадати інформаційні ресурси служби WWW (веб-сайти, форуми, блоги, Вікі-проекти (Вікіпедія), Інтернет-магазини, Інтернет-аукціони, соціальні мережі, електронну пошту тощо).

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

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

Взаємоопитування по колу.

Учні об’єднуються в коло. По черзі вони ставлять сусіду праворуч запитання на тему «Інтернет». Після відповіді учень ставить запитання своєму сусіду праворуч — і так далі. Вправа виконується, доки всі не візьмуть участь в опитуванні. Приклади запитань — файл Z1_26.doc.

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

Лекція вчителя

План лекції

1.       Що таке сайт? Створення першого сайту.

2.       Класифікація сайтів (за вмістом і за функціональним призначенням).

3.       Структура сайту.

4.       Засоби створення веб-сторінок.

5.       Система керування контентом — CMS.

6.       Що таке хостинг?

7.       Елементи веб-сторінки.

Учні вивчають матеріал підручника і складають асоціативний кущ (файл S_26.doc).

 

Сайт. Створення першого сайту

Cайт (від англ. — website: web — павутина, мережа, і site — місце, сегмент, частина в мережі) — сукупність файлів приватної особи або організації у комп’ютерній мережі, які об’єднані під однією адресою (доменним ім’ям або IP-адресою).

Створення першого сайту відбулося 1990 року. Його засновником був Тім Бернерс-Лі, засновник головних веб-технологій — HTTP, URI і HTML. Основою його проекту стала ідея про те, що гіпертекст можна застосовувати як основу для обміну даними в мережі. Перший сайт також став і першим у світі Інтернет-каталогом, оскільки згодом Тім Бернерс-Лі розмістив на ньому посилання на інші сайти.

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

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

 

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

1. За вмістом.

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

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

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

2. За функціональним призначенням.

Сайти цієї категорії поділяються на комерційні сайти й інформаційні ресурси (табл. 26.1).

Таблиця 26.1

Приклади комерційних сайтів

Типи сайтів

Призначення

Функції

Сайт-візитка

Веб-подання компанії

Кількість сторінок — 1–5 (головна, контакти, прайс, можливість розширення до корпоративного сайту)

Корпоративний сайт

Повнофункціональне веб-представлення (інформаційні та комерційні функції)

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

Інтернет-магазин

Майданчик для купівлі-продажу товарів і послуг

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

Портал

Інформаційно-комерційний майданчик

Інформаційна та адміністративна частини, можливість розширення функцій, розміщення текстового, відео- та аудіоконтенту

Промо-сайт

Спеціалізується на окремому продукті або акції, функція — привернення уваги, просування товару, збільшення продажів. Може бути «філіалом» корпоративного сайту

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

Унікальний сайт

Ресурс повністю адаптовано під потреби і завдання конкретної компанії або індивідуальної особи

Відповідно до побажань замовника

Інформаційні ресурси містять тематичні інформаційні сайти, що спеціалізуються на конкретній вузькій тематиці, і тематичні портали — ресурси, які, крім інформаційної складової, надають ті чи інші можливості взаємодії з користувачем (коментарі, форуми), мультимедійні комунікації (аудіозаписи, відеоролики тощо).

 

Структура сайту

1.      Внутрішня структура сайту.

Лінійна структура (рис. 26.1) — це найпростіша структура сайту, в якій матеріал не поділяється на рівні. Всі сторінки ієрархічно рівноправні. Такий сайт є доволі простим у реалізації, але має обмежене застосування.

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

 

Мережна (або довільна) структура (рис. 26.3) — це найбільш поширена структура в Інтернеті: можна перейти з будь-якої сторінки на будь-яку іншу. Посилання на інші розділи сайту формуються залежно від логіки відвідувача. Прикладами такої структури є сайти Інтернет-магазинів або великі інформаційні портали.

2.      Зовнішня структура сайту.

Вона зумовлює розташування основних значущих елементів на кожній сторінці (банери, лічильник, меню, пошук, основний зміст, анонси про нові розділи сайту, оновлення тощо). Зовнішня структура має відповідати дизайну. Як приклад розглянемо зовнішню структуру звичайного сайту (рис. 26.4):

Шапка сайту

Логотип

Меню

Блок з основним контентом

Нижня частина сайту

 

Рис. 26.4. Структура сайту

 

Сайт складається з веб-сторінок (Інтернет-сторінка, веб-сторінка, сторінка www, web-page) — це логічна одиниця Інтернету, яка визначається адресою (URL). Веб-сторінки пишуться мовою HTML. Відомості на веб-сторінці подаються у різних форматах: текстовому, графічному, аудіо-, відео- тощо.

Інформаційний вміст веб-сторінки називають контентом (англ. content — зміст).

 

Засоби створення веб-сторінок

Веб-сторінки є базовими документами World Wide Web і створюються в HTML (HyperText Markup Language) (табл. 26.5). Сторінки можуть бути як частиною веб-сайту, так і самостійними документами. HTML-сторінка містить HTML-теги, що надають інформацію про її структуру, вигляд та вміст. Веб-браузери використовують цю інформацію для визначення способу відображення сторінки.


Таблиця 26.5

Загальні підходи до створення веб-сторінок

І підхід

(високий рівень)

ІІ підхід

(середній рівень)

ІІІ підхід

(низький рівень)

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

Створення веб-сторінки в спеціалізованому HTML-редакторі. Такі HTML-редактори, як правило, дозволяють створювати веб-сторінки подібно до того, як створюються документи у текстових процесорах, із форматуванням тексту, графіки, таблиць та інших елементів сторінки. При цьому сам документ зберігається відразу в HTML-коді. Крім того, такі HTML-редактори дозволяють безпосередньо редагувати HTML-код

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

 

Для створення, редагування та керування вмістом сайту використовують спеціальну систему керування контентом — CMS (від англ. Content Management System). Це програмна оболонка, яка дозволяє легко вводити і редагувати дані — текст, рсунки тощо, додавати і видаляти сторінки, тобто керувати сайтом у режимі онлайн, без знання HTML, мов програмування та інших спеціальних навичок.

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

Зараз популярними є безкоштовні CMS: Wordpress, Joomla, Drupal. Серед комерційних CMS — це Bitrix, NetСat, ABO.CMS, Amiro.CMS, UMI.CMS, Host.CMS тощо. Крім того, значна кількість веб-студій використовують у створенні сайтів самописні універсальні CMS власної розробки. Окремо можна відзначити CMS Data Life Engine (DLE), яка подається розробниками як движок для великих новинних порталів.

Після того, як сайт створено, його необхідно розмістити в Інтернеті.

Хостинг (від англ. host) — це виділення місця на вінчестері серверу, що має цілодобове підключення до Інтернету, для розміщення сайту.

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

Робота за підручником

Учні вивчають матеріал підручника щодо елементів веб-сторінок сайту і складають асоціативний кущ «Елементи веб-сторінки».

Приклад асоціативного куща «Елементи веб-сторінки».

контентом — CMS.

6.   Що таке хостинг?

7.   Елементи веб-сторінки.

5.2. Робота з підручником.

Учні вивчають матеріал підручника і складають асоціативний кущ (файл S_26.doc).

6. Закріплення знань

Практична вправа за комп’ютером.

Учні завантажують сайти, які назве вчитель, визначають їх мету, тип, структуру і заповнюють таблицю (файл Т_26.doc).

7. Застосування отриманих знань

Міні-конкурс «Найкращий сайт».

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

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

8. Узагальнення і систематизація отриманих знань, умінь та навичок

Тренувальні вправи

 

Вправа 1. Перетворення готової презентації на веб-сторінку.

1.      Відкрийте вказаний учителем файл MS PowerPoint.

2.      Збережіть цю презентацію як веб-сторінку на диску в місці, яке вкаже вчитель. За допомогою команди Файл → Зберегти як ... у списку Тип файлу виберіть Веб-сторінка в одному файлі.

3.      Перегляньте отриманий документ. Відкрийте веб-документ у папці, де було збережено файл.

4.      Порівняйте отриману веб-сторінку з початковим файлом (Презентація — 1.ppt). Зробіть висновки.

 

 

 

 

 

---------------------------------------------------------------------------------------------------------------------

 

 

Вправа 2. Збереження публікації в HTML.

1.       Відкрийте вказаний учителем файл MS Publisher.

2.      На панелі інструментів у меню Файл виберіть команду Поместить на веб-узел... (Помістити на веб-вузол...). Коли з’явиться діалогове вікно, виберіть папку Мої документи для збереження публікації в HTML.

3.      Перегляньте результат збереження публікації. Відкрийте папку Мої документи. У результаті збереження ви повинні отримати файл index.htm, який містить головну сторінку сайту, і папку index.files, яка містить допоміжні файли (зображення, інші сторінки тощо).

4.      Перевірте створений файл (гіперпосилання, навігацію) за допомогою браузера.

5.      Порівняйте отриману веб-сторінку з початковим файлом (Публікація.ppt). Зробіть висновки.

 

9. Контроль і самоперевірка

Робота з картками.

Вчитель роздає кожному учню картку, на якій написано слова, значення яких необхідно пояснити. Наприклад: сайт, веб-сторінка, контент, хостинг, Інтернет, типи сайтів, структура сайтів, URL, Wordpress, Joomla, Drupal, Bitrix тощо.

10. Підбиття підсумків уроку

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

Вчитель аналізує виконання вправ. За результатами тренувальних вправ учитель разом з учнями складають алгоритм перетворення готових документів (MS Word, MS Pover Point, MS Publisher) на документи HTML.

11. Домашнє завдання, інструктаж щодо його виконання

Підручник __________________________________________________________________

Робочий зошит _______________________________________________________________

Додаткове завдання. Підготуйте доповідь на тему «Огляд графічних редакторів для створення веб-сторінок».      

Категорія: Інформатика 11 клас | Додав: uthitel (08.01.2014)
Переглядів: 8160 | Коментарі: 1 | Рейтинг: 5.0/1
Всього коментарів: 1
1  
Доброго дня, а де можна завантажити архів з усіма додатковими файлами?

Ім`я *:
Email *:
Код *: