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

Урок 25. Практична робота №9 «Створення запитів і звітів за допомогою майстра та в режимі конструктора»
Вересень 7, 2016
Урок 27. Практична робота №10 «Автоматизоване створення веб-сайту»
Вересень 9, 2016

Урок 26 (web-версія конспекту без зображень)

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

Мета :

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

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

Тип уроку: урок формування умінь і навичок.

(конспект уроку та презентація розроблені на основі матеріалу підручника «Інформатика (Ривкінд, Лисенко, Чернікова, Шакотько) 11 клас рівень стандарту») 

Хід уроку

І. Організаційний етап

  1. Привітання із класом
  2. Повідомлення теми і мети уроку

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

Фронтальне опитування

  1. Назвіть служби Інтернету.
  2. Укажіть основні принципи служби WWW.
  3. Як спілкуються за допомогою електронної пошти?
  4. Як спілкуються за допомогою інтерактивного спілкування?
  5. Що таке форум? чат?
  6. Перелічіть відомі вам браузери.

ІІІ. Засвоєння нових знань

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

Термінологія

Для початку розглянемо поняття веб-сайт та веб-сторінка.

Ось означення з Вікіпедії — вільної Інтернет-енциклопедії:

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

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

Це, звичайно, не повний перелік типів сайтів. Можна також на­вести приклади веб-сторінок:

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

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

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

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

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

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

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

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

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

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

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

Стандартна

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

Каскад

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

Хмарочос

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

Павутина

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

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

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

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

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

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

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

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

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

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

ІV. Застосування нових знань, умінь та навичок

Пропонуємо учням створити схеми вивчених структур сайтів.

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

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

Очікувані результати

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

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

Рефлексія

  • Що нового сьогодні дізналися?
  • Чого навчилися?
  • Що сподобалось на уроці, а що ні?
  • Чи виникали труднощі?

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

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

Завантажити конспект