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

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

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

Оберіть документ з архіву для перегляду:
Перегляд
матеріалу
Отримати код

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

________

________

________

________

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

________

________

________

________

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

________

________

________

________

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

________

________

________

________

Перегляд
матеріалу
Отримати код
Опис презентації окремими слайдами:
Слайд № 1

На цьому етапі визначається: Мета створення сайту; Тематика сайту; Тип сайту; Відмінності сайту від інших сайтів такої самої тематики. Аудиторія по...
Слайд № 2

На цьому етапі визначається: Мета створення сайту; Тематика сайту; Тип сайту; Відмінності сайту від інших сайтів такої самої тематики. Аудиторія потенційних відвідувачів сайту: вік відвідувачів, стать, коло інтересів тощо; Перелік сервісів для розміщення на сайті: форум, чат, пошукова система та ін.; Перспективи розвитку сайту.

1) Складання переліку розділів сайту для формування системи навігації, список сторінок, визначення зв’язків між ними. Результат – карта сайту, яка ...
Слайд № 3

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

2) Розробка зовнішньої структури сайту, яка визначає зовнішній вигляд веб-сторінок. Якщо розробка сторінок сайту буде здійснюватись автоматизованим...
Слайд № 4

2) Розробка зовнішньої структури сайту, яка визначає зовнішній вигляд веб-сторінок. Якщо розробка сторінок сайту буде здійснюватись автоматизованими засобами, то зовнішня структура може бути запропонована в шаблоні сторінки.

Включає кольорову гаму сторінок, елементів графічного оздоблення, набору шрифтів та ін., тобто визначає стиль сайту.
Слайд № 5

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

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

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

Розміщення на сайті інтерактивних елементів, таких як системи пошуку, голосування, форуму та ін.
Слайд № 7

Розміщення на сайті інтерактивних елементів, таких як системи пошуку, голосування, форуму та ін.

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

Сайт розміщують на сервері, який надає послуги хостингу. Під час публікації в Інтернеті сайту надається доменне ім’я. Після цього сайт стає доступним для перегляду всіма бажаючими. Сервери, які надають безкоштовний хостинг: google.com.ua, ucoz.ua, narod.yandex.ru, edukit.org.ua тощо.

Слайд № 9

Слайд № 10

Слайд № 11

Слайд № 12

Недоліком використання деяких серверів, що надають безкоштовний хостинг, є розміщення сторонньої реклами та обмеження використання деяких інтеракти...
Слайд № 13

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

Перевірка відображення сайту різними браузерами.
Слайд № 14

Перевірка відображення сайту різними браузерами.

Це процес реєстрації сайту у пошукових системах і каталогах, розміщення посилання на нього на інших сайтах.
Слайд № 15

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

Для підтримки інтересу до сайту важливо регулярно поповнювати його цікавими унікальними матеріалами.
Слайд № 16

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

Й.Я. Ривкінд, Т.І. Лисенко, Л.А.Чернікова, В. В. Шакотько “Інформатика. 11 клас. Академічний рівень, профільний рівень” – Генеза, 2011.
Слайд № 17

Й.Я. Ривкінд, Т.І. Лисенко, Л.А.Чернікова, В. В. Шакотько “Інформатика. 11 клас. Академічний рівень, профільний рівень” – Генеза, 2011.

Перегляд
матеріалу
Отримати код
Опис презентації окремими слайдами:
Класифікація сайтів Підготували учні 11 класу: Літвін А. та Княгніцький В.
Слайд № 1

Класифікація сайтів Підготували учні 11 класу: Літвін А. та Княгніцький В.

Веб-сайт - це сукупність веб-сторінок, які об’єднані між собою за змістом та навігацією. Всі сайти, до яких доступ вільний, утворюють всесвітню пав...
Слайд № 2

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

Слайд № 3

За технологією створення: Статичний; Динамічний; Флеш-сайт; Мішаний.
Слайд № 4

За технологією створення: Статичний; Динамічний; Флеш-сайт; Мішаний.

Статичний сайт Сайт, вміст якого залишається незмінним для всіх відвідувачів сайту. Він не розрахований на часті оновлення. Статичні сайти ще назив...
Слайд № 5

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

Слайд № 6

Динамічний сайт Сайт, призначений для відображення інформаційних матеріалів, що часто оновлюються. Такими можуть бути сторінки з новинами, з перелі...
Слайд № 7

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

Слайд № 8

Флеш-сайт Створюється з використанням технологій розробки анімаційних зображень Adobe Flash, тому такі сайти привабливі, яскраві, містять багато ан...
Слайд № 9

Флеш-сайт Створюється з використанням технологій розробки анімаційних зображень Adobe Flash, тому такі сайти привабливі, яскраві, містять багато анімаційних та звукових ефектів. Флеш – сторінки часто розміщуються на сайтах дизайнерів, художників, фотографів, роботи яких ефектніше виглядають у динамічному оформленні.

Слайд № 10

Слайд № 11

Сайти, що надають контент Інформаційно тематичні сайти; Сайти новин; Електронні бібліотеки; Енциклопедії; Словники; Каталоги; Сховища файлів різних...
Слайд № 12

Сайти, що надають контент Інформаційно тематичні сайти; Сайти новин; Електронні бібліотеки; Енциклопедії; Словники; Каталоги; Сховища файлів різних видів; Медіатеки та ін.

Сайти для он-лайн контактів і спілкування Форуми; Веб-чати; Сайти соціальних мереж; Блоги; Сайти мережних ігор та ін.
Слайд № 13

Сайти для он-лайн контактів і спілкування Форуми; Веб-чати; Сайти соціальних мереж; Блоги; Сайти мережних ігор та ін.

Сайти електронної комерції Інтернет-магазини; Системи електронних платежів; Сайти банків, бірж; Сайти, що пропонують різноманітні платні послуги: н...
Слайд № 14

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

Сайти для надання послуг Сайти електронної пошти; Пошукові системи; Сайти перекладу слів і текстів.
Слайд № 15

Сайти для надання послуг Сайти електронної пошти; Пошукові системи; Сайти перекладу слів і текстів.

Література Й. Я. Ривкінд, Т. І. Лисенко, Л. А. Чернікова, В. В. Шакотько “Інформатика. 11 клас. Академічний рівень, профільний рівень” – Генеза, 2011.
Слайд № 16

Література Й. Я. Ривкінд, Т. І. Лисенко, Л. А. Чернікова, В. В. Шакотько “Інформатика. 11 клас. Академічний рівень, профільний рівень” – Генеза, 2011.

Перегляд
матеріалу
Отримати код

11 клас

Урок 37

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

Мета:

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

Розвивальна: розвиток логічного мислення (послідовності викладення інформації), вміння узагальнювати та систематизувати матеріал;

Виховна: виховувати відповідальність за результат колективної роботи; навички роботи в групі.

Хід уроку.

І. Організаційний момент. Позитивне налаштування на урок.

ІІ. Оголошення теми та мети уроку.

Сьогодні ми з вами приступаємо до вивчення теми «Автоматизоване створення й публікація веб-ресурсів», на яку програмою відведено 5 годин.

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

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

Значну увагу буде приділено сервісам Веб 2.0, зокрема блогам.

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

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

Отже, приступимо до захисту ваших робіт.

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

На урок винесені наступні питання:

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

2. Класифікація веб-сайтів та їх особливості.

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

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

Презентація роботи І групи учнів. Колаж «Структура веб-сайту».

Розрізняють зовнішню та внутрішню структуру веб-сайту. На даній схемі показана зовнішня структура сайту. Основними елементами цієї структури є:

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

- Меню – це засіб для переходу до основних розділів сайту. Наприклад, таких, як каталог файлів, форум, зворотній зв’язок та ін.

- Контент (англ. content – зміст) – змістове наповнення веб-сторінки, доступне користувачу: тексти, зображення, відео, звукові дані та інше.

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

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

Окрім цього, на сайті можуть бути присутні посилання на інші сайти, різноманітні інформери (наприклад, погода в Бобринці та святковий календар) та інші елементи.

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

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

2. Класифікація веб-сайтів та їх особливості.

Презентація роботи ІІ групи учнів. Комп’ютерна презентація «Класифікація веб-сайтів».

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

Презентація ІІІ групи учнів. Випуск буклету «Тематична класифікація сайтів»

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

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

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

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

Такі сайти найчастіше отримують нагороди Webby Awards за свій нетрадиційний, інноваційний дизайн. Наприклад, сайт LeoBurnett.ca став переможцем 2005 року в категорії «Кращий візуальний дизайн».

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

Щоб створити власний веб-сайт, потрібно, в першу чергу, ознайомитися з алгоритмом його створення.

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

Презентація роботи ІV групи учнів. Комп’ютерна презентація «Етапи створення веб-сайтів»

Презентація роботи V групи учнів. Узагальнення у вигляді опорного конспекту уроку.

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

Розрізняють зовнішню та внутрішню структуру веб-сайту.

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

  1. Постановка завдання.

  2. Визначення структури сайту.

  3. Розробка дизайн-макета.

  4. Створення та верстка сторінок сайту.

  5. Етап програмування сайту.

  6. Розміщення (публікація) сайту в Інтернеті.

  7. Тестування.

  8. Популяризація та підтримка сайту.

  9. Супровід сайту.

ІV. Інструктаж з правил безпеки під час занять в кабінеті інформатики.

(У вигляді гри «Незакінчене речення»)

V. Виконання завдання на ПК.

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

________

________

________

________

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

________

________

________

________

VІ. Підведення підсумків уроку. Оцінювання.

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

вивчити класифікацію веб-сайтів, створити акант на google.

4

Перегляд
матеріалу
Отримати код

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

Розрізняють зовнішню та внутрішню структуру веб-сайту.

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

  1. Постановка завдання.

  2. Визначення структури сайту.

  3. Розробка дизайн-макета.

  4. Створення та верстка сторінок сайту.

  5. Етап програмування сайту.

  6. Розміщення (публікація) сайту в Інтернеті.

  7. Тестування.

  8. Популяризація та підтримка сайту.

  9. Супровід сайту.

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

Розрізняють зовнішню та внутрішню структуру веб-сайту.

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

  1. Постановка завдання.

  2. Визначення структури сайту.

  3. Розробка дизайн-макета.

  4. Створення та верстка сторінок сайту.

  5. Етап програмування сайту.

  6. Розміщення (публікація) сайту в Інтернеті.

  7. Тестування.

  8. Популяризація та підтримка сайту.

  9. Супровід сайту.

Зверніть увагу, свідоцтва знаходяться в Вашому особистому кабінеті в розділі «Досягнення»