1 of 28

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

План розробки сайту.

Макет інформаційної структури сайту

2 of 28

Аналізуємо. Обговорюємо

  1. У чому полягає різниця між роботою веб-дизайнера і веб-розробника?
  2. Якими інструментами користується у роботі веб-розробник?
  3. Яке призначення редактору коду?
  4. Назвіть найпопулярніший, на вашу думку, редактор коду.
  5. Що об’єднує всі редактори коду?

3 of 28

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Пригадайте:

Напрямки та інструменти веб-дизайну

  • Які сервіси Google ви знаєте?
  • Як оцінювати сайти?

4 of 28

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Яку структуру можуть мати сайти

Які відмінності можуть мати веб-сторінки сайта

У чому полягає процес створення веб-сайта

Ти дізнаєшся:

Напрямки та інструменти веб-дизайну

5 of 28

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

План розробки сайту. Макет інформаційної структури сайту

6 of 28

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Створення сайтів

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

Веб-сайт

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

Напрямки та інструменти веб-дизайну

7 of 28

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Створення сайтів

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

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

Внутрішня

лінійна

ієрархічна

довільна

Зовнішня

Напрямки та інструменти веб-дизайну

8 of 28

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Зовнішня структура визначає спосіб розміщення відомостей на сторінці при виборі кожного пункту меню

Створення сайтів

Навігація по сайту має бути простою та зрозумілою:

користувач у будь-який час повинен знати відповіді на такі питання:

Де він перебуває?

Куди можна піти?

Як туди дістатися?

Як повернутися назад?

Правило трьох кліків: до будь-якої сторінки сайта користувач має дістатися не більш ніж за три переходи (три кліки)

Напрямки та інструменти веб-дизайну

9 of 28

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Правило «3 по 3»

Створення сайтів

Головна сторінка сайта має задовольняти правилу «3 по 3», тобто три абзаци по три речення про тематику та зміст, авторів і призначення сайта

Правило трьох кліків: до будь-якої сторінки сайта користувач має дістатися не більш ніж за три переходи (три кліки)

  • відображати тематику сайта;
  • бути цікавою;
  • містити пошук по сайту;
  • містити розділ з даними, що оновлюються;
  • містити відомості про спосіб зворотного зв’язку

Головна сторінка

Напрямки та інструменти веб-дизайну

10 of 28

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Веб-сторінки сайта

Створення сайтів

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

Інформаційний вміст веб-сторінки називають контентом

Веб-сторінки

Статичні

веб-сторінки створюються за допомогою мови розмітки HTML

Інтерактивні

можливість користувачеві вводити деякі дані, опрацювання їх на сервері

Сайти, що містять інтерактивні веб-сторінки, називають динамічними

Напрямки та інструменти веб-дизайну

11 of 28

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Веб-сторінки сайта

Створення сайтів

Сайти, що містять інтерактивні веб-сторінки, називають динамічними

Для створення та супроводження динамічних сайтів використовують СMS (Content Management System) – систему управління сайтом, яку називають двигунцем сайта.

Напрямки та інструменти веб-дизайну

12 of 28

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Веб-сторінки сайта

Створення сайтів

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

Домашня сторінка має декілька значень:

головна веб-сторінка

веб-сайт належить певній людині

веб-сторінка (стартова), яка завантажується в браузері

Напрямки та інструменти веб-дизайну

13 of 28

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Напрямки та інструменти веб-дизайну

Види сайтів та цільова аудиторія

Розробка веб-сайту

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

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

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

Розробка структури веб-сторінок сайту

Розробка дизайн-макета сторінок сайту

Розміщення на сайті додаткових сервісів і засобів зворотного зв'язку

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

14 of 28

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Напрямки та інструменти веб-дизайну

Види сайтів та цільова аудиторія

Розробка веб-сайту

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

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

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

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

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

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

15 of 28

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Напрямки та інструменти веб-дизайну

Види сайтів та цільова аудиторія

Розробка веб-сайту

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

перелік розділів сайту

формування системи навігації

список сторінок

визначити зв'язки між ними

16 of 28

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Напрямки та інструменти веб-дизайну

Види сайтів та цільова аудиторія

Розробка веб-сайту

Розробка структури веб-сторінок сайту

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

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

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

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

17 of 28

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Напрямки та інструменти веб-дизайну

Види сайтів та цільова аудиторія

Розробка веб-сайту

Розробка дизайн-макета сторінок сайту

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

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

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

18 of 28

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Напрямки та інструменти веб-дизайну

Види сайтів та цільова аудиторія

Розробка веб-сайту

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

використанням тегів мови HTML

верстка сторінок

19 of 28

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Напрямки та інструменти веб-дизайну

Види сайтів та цільова аудиторія

Розробка веб-сайту

Розміщення на сайті додаткових сервісів і засобів зворотного зв'язку

системи пошуку

голосування

форуми та інше

20 of 28

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Напрямки та інструменти веб-дизайну

Види сайтів та цільова аудиторія

Розробка веб-сайту

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

зберігання на локальному комп'ютері

отримання доменного ім'я

розміщується на сервері

21 of 28

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Напрямки та інструменти веб-дизайну

Види сайтів та цільова аудиторія

Розробка веб-сайту

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

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

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

Розробка структури веб-сторінок сайту

Розробка дизайн-макета сторінок сайту

Розміщення на сайті додаткових сервісів і засобів зворотного зв'язку

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

22 of 28

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

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

  • Презентація

23 of 28

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

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

24 of 28

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

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

САЙТ

25 of 28

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

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

тематика

26 of 28

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

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

аудиторія

27 of 28

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

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

28 of 28

Робота з комп'ютером

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Завдання 1

Підготуйте інформацію �«Поради веб-дизайнеру, який вперше створює сайт»