Тема: Автоматизоване створення й публікація веб - ресурсів. Сучасні сервіси Інтернету.
Урок 24-25: Структура веб-сайтів, різновиди веб-сайтів. Етапи створення веб-сайтів. Поняття про засоби автоматизованої розробки веб-сайтів.
1. Опрацюйте теоретичний матеріал,зробіть конспект.
1. Структура веб-сайтів.
Розрізняють зовнішню та внутрішню структуру веб-сайту.
На даній схемі показана зовнішня структура сайту. Основними елементами цієї структури є:
- Шапка сайту, яка містить логотип і назву сайту. Шапка сайту може вирішувати декілька завдань. По-перше, це візитна картка інтернет-ресурсу. По-друге, шапка сайту дуже часто використовується для розміщення в ній основного меню.
- Меню – це засіб для переходу до основних розділів сайту. Наприклад, таких, як каталог файлів, форум, зворотній зв’язок та ін.
- Контент (англ. content – зміст) – змістове наповнення веб-сторінки, доступне користувачу: тексти, зображення, відео, звукові дані та інше.
Перед нами головна сторінка шкільного сайту, основним контентом якої є новини.
- Підвал сайту або футер, є менш функціональною частиною. В ньому містяться контактні дані та повідомлення про авторські права.
Окрім цього, на сайті можуть бути присутні посилання на інші сайти, різноманітні інформери (наприклад, погода в Бобринці, святковий календар) та інші елементи.
Внутрішня структура сайту, як правило, представлена картою сайту – діаграмою, що візуально відображає ієрархію сторінок сайта, схему зв’язків і переходів між ними.
Перейдіть на сторінку Карта сайту, щоб ознайомитися з внутрішньою структурою даного сайту.
Веб-сайт — це сукупність веб-сторінок, які об'єднані між собою за змістом та навігаційно. Всі сайти, до яких доступ вільний, утворюють Всесвітню павутину — найбільше сховище інформації.
Веб-сайтів є дуже багато, і класифікувати їхі можна по-різному та за різними критеріями.
2. Класифікація веб-сайтів та їх особливості
Візуальна класифікація веб-сайтів.
За цією класифікацією сайти поділяються на текстові, графічні та імітаційні.
Текстові сайти містять переважно текстову інформацію та відносно мало зображень. Вони порівняно невеликі за розміром і мають простий дизайн. Дуже часто сайти інших типів крім стандартної мають ще й текстову версію — для тих відвідувачів, які з різних причин не хочуть завантажувати повні варіанти веб-сторінок.
Графічні сайти окрім певних текстових матеріалів містять багато графіки: спливаючі меню, піктограми, анімаційні зображення тощо.
Імітаційні сайти запозичують ідею оформлення з реального світу. Так, наприклад, сайт про автомобілі може містити програму, що відображає всі деталі автомобіля на екрані та дає огляд позиції водія у процесі руху.
Такі сайти найчастіше отримують нагороди Webby Awards за свій нетрадиційний, інноваційний дизайн. Наприклад, сайт LeoBurnett.ca став переможцем 2005 року в категорії «Кращий візуальний дизайн».
Отже, класифікація сайтів непроста і неоднозначна. Передусім можна по-різному визначати критерії, за якими класифікують сайти. Окрім того, іноді складно визначити, до якої категорії належить той чи інший сайт. Проте така класифікація допомагає зорієнтуватися у величезній кількості ресурсів Інтернету.
4. Засоби розробки веб-сайтів.
Названі засоби створення веб-сайтів можна встановити на локальному комп'ютері. Створені в їх середовищі веб-сторінки після завершення процесу розробки потрібно опублікувати в Інтернеті. У той же час існують WCMS, які одночасно з послугами з розробки веб-сайтів надають послуги безкоштовного хостингу. Такими є системи uCoz, Google Sites, Prom.ua та ін. У цих системах створення веб-сайта здійснюється в режимі онлайн відразу на сервері хостингу.
2.Виконання вправ
Практична робота №11. Автоматизоване створення веб-сайту.
Створення веб-сайта засобами он-лайн системи керування веб-контентом відбувається в кілька кроків:
1. Реєстрація облікового запису на сервері.
2. Вибір імені сайта та шаблону для його оформлення.
3. Створення сторінок сайта, системи навігації.
4. Заповнення сторінок контентом.
1. Створення та налаштування веб-сторінок
Відразу після створення сайт містить лише одну домашню сторінку.
Для створення нової сторінки на сайті потрібно:
1. Натиснути кнопку Створити сторінку
у верхній частині вікна браузера.
2. Увести назву сторінки в поле Назва.
3. Вибрати шаблон вмісту майбутньої сторінки:
- Веб-сторінка - сторінка для розміщення тексту, зображень тощо.
Прикладом є сторінки, на яких розміщені уроки даного дистанційного курсу.
- Оголошення - сторінка для розміщення текстових повідомлень, впорядкованих у хронологічному порядку, починаючи з останніх введених. Кожне повідомлення може відображатися як окрема інформаційна сторінка.
- Картотека - сторінка для збереження гіперпосилань на завантажені файли, впорядкованих по папках.
- Список - сторінка, на якій подаються структуровані дані як списки з декількох полів. Списки можна сортувати за даними в кожному полі.
4. Вибрати розміщення сторінки в структурі сайта.
5. Натиснути вгорі кнопку Створити.
Після створення сторінки вона відкривається у режимі редагування, а панель навігації та мапа сайта автоматично доповнюються посиланнями на нову сторінку.
Під час створення сторінки на основі шаблону Веб-сторінка її потрібно заповнити матеріалами та зберегти. Це статична сторінка, на якій не передбачається часто змінювати наповнення.
Сторінка на основі шаблону
Оголошення оновлюватиметься регулярно з появою деяких новин. Для додавання нового оголошення на сторінці слід натиснути кнопку
, увести текст повідомлення та зберегти сторінку.
Сторінку на основі шаблону
Картотека заповнюють, вибираючи кнопку

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

.
На сторінці з шаблоном Список потрібно вибрати один із запропонованих шаблонів списку або створити нетиповий список:
Приклад створення власного списку:
Практичне завдання
1. Створити власний сайт про свою майбутню професію.
2. Додати декілька нових сторінок на сайт. Бажано, щоб це були сторінки різних шаблонів (веб-сторінка, оголошення, каталог, список).
Надішліть мені звіт про виконану вами роботу (фото чи скріни веб-сторінок, або файли з html-кодами сторінок)
електронна адреса: anywka2310@gmail.com
вайбер: +380502610772
Виконання уроку ОБОВ’ЯЗКОВЕ!!!
Немає коментарів:
Дописати коментар