1 of 21

Системи керування вмістом для вебресурсів. Етапи створення вебсайтів

Урок 28

10

2 of 21

Запитання

Розділ 4 § 4.3

Які засоби можуть використовуватися для розробки веб-сайтів?

Що таке мова HTML? Яке ЇЇ призначення та можливості?

Як створити сайт засобами системи керування вмістом веб-сайтів?

10

3 of 21

Етапи розробки веб-сайтів

Розділ 4 § 4.3

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

Google Сайти

uCoz

Weebly та інші

У цих системах створення веб-сайту здійснюється у режимі онлайн одразу на сервері хостингу.

10

4 of 21

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

Розділ 4 § 4.3

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

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

10

5 of 21

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

Розділ 4 § 4.3

У результаті розробник повинен знати:

мету, з якою створюється сайт;

тематику сайту, відмінності сайту від інших сайтів такої самої тематики;

аудиторію потенційних відвідувачів сайту: вік, стать, коло інтересів тощо;

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

перспективи розвитку сайту.

10

6 of 21

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

Розділ 4 § 4.3

Визначення структури сайту. На цьому етапі важливо скласти перелік розділів сайту для формування системи навігації, список сторінок, визначити зв'язки між ними.

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

10

7 of 21

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

Розділ 4 § 4.3

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

Наш клас (головна сторінка)

Про нас

Історія класу

Фотогалерея

Навчання

Предмети

Навчальні предмети

Розклад уроків

Відпочинок

Поетична творчість

Наші свята

Походи та екскурсії

Спортивні досягнення

10

8 of 21

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

Розділ 4 § 4.3

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

основний матеріал

додаткові інформаційні та рекламні блоки

анонси

меню

лічильник відвіду-вачів тощо

10

9 of 21

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

Розділ 4 § 4.3

Як правило, на веб-сторінках передбачено розміщення:

верхнього блоку — заголовка, у якому містяться логотип і назва сайту;

блоку навігації (меню) для переходу до основних розділів сайту;

інформаційного блоку з основним матеріалом, що займає центральну частину сторінки;

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

Блок заголовка

Інформаційний блок

Блок наві-гації

Підвал

10

10 of 21

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

Розділ 4 § 4.3

Якщо розробка сторінок сайту буде здійснюватись автоматизованими засобами, то структура веб-сторінок може бути запропонована в шаблоні сторінки.

10

11 of 21

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

Розділ 4 § 4.3

Розробка дизайн-макета сторінок сайту. Дизайн-макет сторінок включає набір значень властивостей текстових і графічних об'єктів сторінки:

Кольорової гами сторінок

Елементів графічного оздоблення

Набору шрифтів та іншого

Тобто визначає стиль сайту.

10

12 of 21

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

Розділ 4 § 4.3

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

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

10

13 of 21

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

Розділ 4 § 4.3

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

10

14 of 21

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

Розділ 4 § 4.3

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

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

10

15 of 21

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

Розділ 4 § 4.3

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

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

10

16 of 21

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

Розділ 4 § 4.3

Розміщення (публікація) сайту в Інтернеті. На даному етапі сайт отримує доменне ім'я та розміщується на сервері хостинг-провайдера.

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

10

17 of 21

Розгадайте ребус

Хостинг

Розділ 4 § 4.3

10

18 of 21

Дайте відповіді на запитання

Розділ 4 § 4.3

Які етапи розробки веб-сайтів? Що відбувається на кожному з них?

Які етапи розробки сайту засобами онлайн-системи керування вмістом веб-сайтів?

Що таке внутрішня структура веб-сайту?

Які складові структури веб-сторінки?

Що таке верстка? Що є результатом верстки сайту?

10

19 of 21

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

Проаналізувати

§ 4.3, ст. 122-123

Розділ 4 § 4.3

10

20 of 21

Працюємо за комп’ютером

Розділ 4 § 4.3

Сторінка

130-131

10

21 of 21

Дякую за увагу!

10