ЛЬВІВСЬКИЙ ПРОФЕСІЙНИЙ ЛІЦЕЙ

ПОБУТОВОГО ОБСЛУГОВУВАННЯ

Основи Web-дизайну.

Створення та публікація

Web-сайта

Львів 2014

2

Ця методична розробка містить добірку теоретичних і

практичних матеріалів з теми «Автоматизоване створення й

публікація Web-ресурсів» навчальної програми з інформатики

рівня «Стандарт», складається з двох частин, розроблена для

учнів Львівського професійного ліцею побутового

обслуговування:

частина 1 - теоретична. Містить матеріали, необхідні

учням для правильного розуміння поняття Web-сайта,

уміння класифікувати Web-ресурси, правильно

підбирати доменне ім’я, ознайомитись з поняттями

хостингу, Web-сервера, верстки, створювати, аналізувати

та розрізняти структури сайтів різних типів,

орієнтуватися в основах Web-дизайну, тощо.

частина 2 - практична. Містить ілюстрований хід

роботи над створення Web – сайта, за допомогою

безкоштовного конструктора Webnode»

Кількість сторінок:

Розроблено: Викладачем інформатики

Львівського професійного

ліцею побутового

обслуговування

Горонь Н.Й.

3

Зміст

Частина 1. «Основи Web - дизайну» ........................................... 5

ВСТУП ............................................................................................ 6

1. ПОНЯТТЯ WEB-СТОРІНКИ......................................................... 7

КЛАСИФІКАЦІЯ WEB-СТОРІНОК .................................................. 7

1.1. Елементи Web-сторінки ................................................... 8

1.2. Типи Web-сторінок ........................................................... 8

2. КЛАСИФІКАЦІЯ WEB-САЙТІВ ................................................. 11

3. ВИДИ WEB-САЙТІВ ................................................................. 15

4. ВИМОГИ ДО WEB-САЙТІВ........................................................ 18

5. ЕТАПИ СТВОРЕННЯ WEB - САЙТІВ. ......................................... 20

Перший етап. Постановка завдання. .................................. 20

Другий етап. Визначення структури сайта......................... 21

Завдання 1. Створення внутрішньої структури сайта. ... 21

Завдання 2. Створення зовнішньої структури сайта. ..... 22

Третій етап. Розробка дизайн-макета сторінок сайта. ..... 23

Четвертий етап. Створення та верстка сторінок сайта. 24

П’ятий етап. Публікація сайта в мережі Інтернет. .......... 24

ОСНОВНІ ПРАВИЛА ПРИ ВИБОРІ ДОМЕНУ .......................... 27

Шостий етап. Тестування сайта. ........................................ 28

Сьомий етап. Популяризація та підтримка. ...................... 28

6. ОСНОВИ WEB – ДИЗАЙНУ. СТИЛЬОВЕ ОФОРМЛЕННЯ САЙТІВ

...................................................................................................... 28

1. Тематичність стилів дизайну сайтів ................................ 29

4

2. Колір в оформленні сайту ................................................. 31

3. Дизайн сайтів за кількістю графіки ................................ 35

4. Дизайн сайтів за розміщенням контенту ........................ 36

Підсумок ...................................................................................... 38

Частина 2.«Створення та публікація Web-сайту» .................. 40

СТВОРЕННЯ САЙТА ..................................................................... 41

Реєстрація сайта ..................................................................... 41

Вхід в систему після виходу з браузера або

перезавантаження комп’ютера. ........................................... 43

РОБОТА НАД ДИЗАЙНОМ ............................................................. 45

Коригування шаблону сайта ................................................ 45

Повна зміна шаблону сайта .................................................. 46

ЕЛЕМЕНТИ УПРАВЛІННЯ САЙТОМ ............................................. 47

Панель інструментів .............................................................. 47

НАПОВНЕННЯ КОНТЕНТОМ ........................................................ 49

Зміна меню сайта ................................................................... 49

Зміна контенту ....................................................................... 51

Створення фотогалереї ......................................................... 53

ПІДСУМОК ................................................................................... 55

Використані ресурси.................................................................. 56

5

Частина 1

«Основи Web - дизайну»

6

ВСТУП

Ідея створити власний сайт виникає в багатьох

користувачів Інтернету. Для деяких, "сайт" - це хобі,

розвага, проте для більшості сайт - це престиж,

обличчя компанії, можливість заявити про себе,

реалізувати власні амбіції, а також спосіб заробітку в

Інтернеті.

Сайти бувають різних тематик і напрямків, на

платних і на безкоштовних платформах, зроблених

мовою програмування і он-лайн конструкторами. Все

це залежить від статків та інтересів їх власників, а

також від цілей застосування.

«Якщо Вас немає в Інтернеті, значить Ви не

існуєте!», - сказав колись засновник однієї з

найбільших комп’ютерний корпорацій Microsoft- Білл

Гейтс.

З кожним днем роль Всесвітньої мережі тільки

зростає. Без Інтернету неможливе повноцінне

навчання, спілкування, робота та відпочинок.

Суспільство сьогодні не просто використовує

Інтернет, а живе у ньому. Тут знайомляться,

спілкуються, розважаються, купують, продають,

навчаються. Мережева павутина об’єднала навколо

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

національностей та вірувань.

Ось чому дуже важливо вам, як майбутнім

професіоналам, навчитися створювати власні сайти,

використовувати можливості мережі Інтернет для

Ваших цілей, потреб та професійного росту.

Для створення «успішного сайта» вам необхідно

знати його структуру, різновиди, відрізняти сайт-

7

візитку від інших видів сайтів, володіти основами

Web-дизайну, аналізувати часті помилки дизайнерів,

орієнтуватися в поняттях домену та хостингу, URL

адреси, тощо. Саме цьому присвячена ця

методрозробка.

1. ПОНЯТТЯ WEB-СТОРІНКИ.

КЛАСИФІКАЦІЯ WEB-СТОРІНОК

Web-сторінка (Web page) – Гіпертекстовий ресурс

мережі Інтернет.

Кілька Web-сторінок, об'єднаних загальною темою

і дизайном, а також зв'язаних між собою посиланнями,

і зазвичай знаходяться на одному Web-сервері,

утворюють Web-сайт.

Web-сторінка може містити посилання для

швидкого переходу на інші сторінки сайта, а також

статичні (нерухомі) і динамічні (рухомі) зображення.

Програма, що демонструє Web-сторінку, називається

браузером.

! Web-сторінка, є своєрідним «обличчям» власника

сайта в мережі Інтернет. Тому вона повинна бути:

привабливою, містити унікальний, якісний

дизайн;

створена таким чином, щоб по ній було легко

орієнтуватися, здійснювати навігацію по сайті;

такою, що запам’ятовується;

містити корисну і чітку інформацію;

8

не перенасиченою кольором, але й не

безколірною.

1.1. Елементи Web-сторінки

Основними елементами кожної Web-сторінки є:

1. Елементи навігації – це гіперпосилання на інші

Web-сторінки сайта

2. Елементи дизайну- оформлення сайта, структуру-

вання контенту.

3. Контент – будь-яке інформаційне наповнення Web-

сторінки. Може бути як у вигляді тексту, так і у

вигляді зображень, таблиць, відеофрагментів, тощо.

Елементи WEB-сторінки

1.2. Типи Web-сторінок

Залежно від призначення можна виділити наступні

типи Web-сторінок:

головна (домашня) сторінка – сторінка, з якої

розпочинається перегляд Web-сайта при

переході на сайт за його URL-адресою. На ній,

як правило, розкривається тематика сайта, його

призначення, наводяться дані про розробників,

пояснюється, які матеріали можна знайти на

інших сторінках сайта, тощо;

9

інформаційні сторінки містять тексти,

зображення та повідомлення, які розкривають

тему сайта або деякого його розділу.

сторінки-контейнери містять списки посилань

на ресурси даного або інших сайтів:

Web-каталоги – посилання на Web-ресурси

(Web-сторінки, Web-сайти);

каталоги файлів – посилання на файли, які

можуть бути завантажені користувачем або

адміністратором сайту;

комунікативні (інтерактивні) сторінки

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

засобів спілкування та зворотного зв’язку з

розробниками сайта:

сторінки форуму призначені для організації

тематичного спілкування між

користувачами;

сторінки чата призначені для організації

спілкування між користувачами в режимі

реального часу;

сторінки гостьової книги призначені для

надання можливості відвідувачам сайта

залишати свої коментарі, отримувати відповіді

від адміністратора, тощо;

сторінки форми призначені для проведення

опитування серед користувачів та відвідувачів

сайта.

Залежно від технологій, використаних під час

створення Web-сторінок, можна виділити такі типи

сторінок:

10

Статичні сторінки. Вміст сторінок

залишається незмінним для всіх відвідувачів

сайта. На таких сторінках не передбачається

часта зміна даних та їх оформлення. Такими

можуть бути сторінки з навчальними

матеріалами, історичними відомостями тощо.

Динамічні сторінки. Такі сторінки призначені

для відображення інформаційних матеріалів, що

часто оновлюються. Такими можуть бути

сторінки з новинами, фотогалереєю, добіркою

популярних відео фрагментів, тощо.

Флеш-сторінки. Це дуже привабливі, яскраві,

містять багато анімації та звукових ефектів.

Сформовані за допомогою флеш-анімацій.

Проте вміст такої сторінки дуже важко

змінювати, тому їх рідко застосовують для

сайтів з постійним поновленням інформації.

Отже, якщо графічно зобразити типи Web-

сторінок, отримаємо наступну схему:

11

Вправа №1

Зайдіть на сайт Львівського професійного ліцею

побутового обслуговування і визначте типи його Web-

сторінок. Проаналізуйте контент кожної Web-сторінки

(статистичний, динамічний чи мішаний). Результати

Вашого дослідження запишіть у зошит.

2. КЛАСИФІКАЦІЯ WEB-САЙТІВ

В мережі Інтернет можна зустріти багато

класифікацій сайтів за ступенем складності,

наповненням, структурою, призначенням, тощо. Однак

немає загальноприйнятої класифікації типів сайтів.

Через відсутність стандартизації, багато хто відчуває

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

потрібен. Спробуємо розібратися в цьому непростому

завданні. Отож,

За доступністю сервісів сайти поділяються на:

Відкриті сайти. Всі сервіси сайта є цілком

доступними для всіх відвідувачів і користувачів.

Напіввідкриті сайти. Для доступу до ресурсів

чи сервісів сайта необхідно зареєструватися,

зазвичай, безкоштовно.

Закриті сайти. Цілком закриті службові сайти

організацій, зокрема, корпоративні сайти,

особисті сайти приватних осіб. Вони є

доступними для вузького кола користувачів.

За технологією створення:

Статичні сайти. Вміст сайта формується

розробником і в майбутньому зовсім не

12

змінюється. Користувач бачить файли в тому

вигляді, в якому вони зберігаються на сервері.

Динамічні сайти. Вміст сайта змінюється,

переробляється, налаштовується, залежно від

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

Флеш сайти. Усі сторінки сайта побудовані на

основі флеш технологій, тобто дуже графічні і

рухомі, проте малозмінні.

Мішані.

За фізичним розташуванням:

Зовнішні сайти мережі Інтернет (більшість

сайтів мережі).

Локальні сайти, як правило, закриті, є

доступними лише в межах локальної мережі. Це

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

так і сайти приватних осіб.

За призначенням:

сайти, що надають інформаційні матеріали:

інформаційно-тематичні сайти;

сайти новин;

електронні бібліотеки та енциклопедії,

словники та каталоги;

сховища файлів різних видів, медіатеки.

сайти для он-лайн контактів і спілкування:

форуми та чати,

сайти соціальних мереж,

блоги,

сайти знайомств і мережних ігор та ін.;

сайти електронної комерції:

13

Інтернет-магазини та аукціони,

системи електронних платежів,

сайти банків та бірж,

сайти, що пропонують різноманітні

платні послуги – навчання іноземних

мов, консультації спеціалістів, тощо.

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

надання хостингу;

он-лайн офіси;

сервіс автоматизованої розробки сайтів,

сайти електронної пошти,

пошукові системи.

За наповненням сайти поділяються на:

малі сайти,

тематичні сайти

багатофункціональні сайти та портали.

Отже, якщо графічно зобразити види Web-сайтів,

отримаємо наступну схему:

14

Вправа №2

Відкрийте Web-сторінки з вказаними URL- адресами

та вкажіть їх типи. Результати опишіть в наступній

таблиці:

URL-адреса

Тип Web-сторінки

За

призначенням

За

технологією

створення

http://lplpo.ucoz.lv/index/zvorotnij_zv_39_jazok/0-79

http://uk.wikipedia.org/wiki/ http://biblprog.org.ua/ru/ https://vk.com/akvarium_lviv http://www.ucoz.ru/

15

3. ВИДИ WEB-САЙТІВ

Усі Web-сайти мережі Інтернет можна умовно

розділити на наступні групи:

Сайт-візитка (міні-сайт) – часто

використовується для навчальних

закладів, фірм малого і середнього

бізнесу, які хочуть розмістити

інформацію про себе і свої послуги в

мережі Інтернет. Як правило,

складається з декількох сторінок і

містить основну інформацію про

власника сайта, таку як сфера послуг,

біографія, контактні дані, фотогалерея,

тощо.

Представницький сайт — так іноді

називають сайт-візитку з розширеною

функціональністю: докладний опис

послуг, прас-листи, реквізити, відгуки,

форма зворотного зв'язку тощо.

Корпоративний сайт – сайт служить

для надання детальної інформації про

компанію, історію торгової марки,

містить новини компанії, інформацію

про товари, прас-листи, тощо.

Використовується ексклюзивний

оригінальний дизайн.

16

Інтернет - магазин - інтерактивний

сайт, що продає товари чи послуги в

мережі Інтернет.

Інформаційний сайт містить велику

кількість інформації і включає в себе

різні тематичні розділи, нагадує

енциклопедію або журнал.

Персональний сайт – це особистий

сайт, який належить фізичній особі.

Може оформлятися в любому стилі і

містити все, що завгодно.

Ігровий портал – складний

розважальний інтерактивний проект,

який передбачає велику відвідуваність і

ресурсомісткість.

Контент-проект – це, як правило,

некомерційний сайт, який представляє

собою зібрання текстів, статей та інших

матеріалів. Це своєрідні інтернет-

бібліотеки, енциклопедії або довідника.

Промо-сайт (рекламний) - це сайт,

призначений для просування певного

товару або послуги в мережі Інтернет.

17

Сайт-форум призначений для

організації спілкування користувачів

сайта між собою, а також з

адміністратором сайта.

Блог - це сайт, який ведеться на зразок

стрічки новин, при цьому на кожну

тему блогу відвідувачі можуть

залишати свої коментарі-повідомлення.

Блог часто використовується для

спілкування кола людей об'єднаних

певними спільними інтересами.

Сайти соціальних мереж - сайти, де у

кожного користувача є свій профіль.

Користувачі можуть спілкуватися,

обмінюватися інформацією.

Підводячи підсумок розподілу сайтів на групи,

хочеться сказати, що ділити сайти на види і типи

можна безкінечно. Часто трапляється так, що сайт

одного виду містить функції і ознаки сайтів інших

видів, оскільки розділення є дуже умовними.

18

4. ВИМОГИ ДО WEB-САЙТІВ

Користуючись ресурсами Інтернету, ви,

напевно, звертали увагу на те, як по-різному

сприймаються сайти однакової тематики. На одних ви

затримувалися надовго, розглядали сторінки і

посилання, уважно читали текст, з деяких відразу

переходили на інший сайт. Чому так ставалося?

Тривалість перегляду сайта, в першу чергу,

залежить від дизайну, привабливості, зручності

пошуку інформації. Користувач Інтернету, заходячи

на сайт, спочатку реагує на колірну гаму та

оформлення сайта, читає декілька речень контенту.

Якщо інформація його зацікавила, а дизайн не

«злякав», користувач залишиться на сайті та

продовжить пошуки матеріалу. Якщо ж

адміністратором або розробником сайта була

допущена дизайнерська помилка чи контент був

недостатньо цікавим – користувач негайно покине

сайт і навряд колись до нього повернеться.

Для відвідувача під час оцінювання Web-сайта

важливими є наступні показники:

ступінь інформативності Web-сайта,

можливість отримати корисні матеріали, які не

повторюють відомості з інших ресурсів;

частота оновлення даних на сайті, що

свідчить про увагу розробника до власного

проекту;

наявність інтерактивних засобів

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

19

обговорень, отримання відповідей, залишення

коментарів;

мови, якими доступні матеріали на Web-сайті;

візуальна привабливість, дизайн, стиль

оформлення;

зручність навігації, зрозумілість контенту,

структурованість матеріалу, легкість

знаходження потрібних даних.

Тривалість перебування відвідувачів на сайті,

повторне звертання до його ресурсів визначають

популярність сайта та його рейтинг у базах даних

пошукових систем.

Вправа №3

Вкажіть, яким типам сайтів за призначенням

відповідають описи:

а) сайт містить 1–3 сторінки, включає загальні

відомості про власника сайта та його контактні дані;

б) сайт містить каталог товарів, засоби для їх

замовлення та способи оплати через Інтернет;

в) сайт містить велику кількість матеріалів різної

тематики;

Вправа №4

Відкрийте Web-сторінки із вказаними URL-адресами

(з однаковою тематикою) та оцініть сайти за

основними показниками (ступінь інформативності,

частота оновлення, візуальні особливості, тощо).

Результати запишіть в таблицю наступного зразка.

20

URL-адреса Порівняльна

характеристика

Оцінка

1-5б.

http://www.zoolog.com.ua/

http://www.eco-live.com.ua/

http://www.zooclub.ru/

http://web-zoopark.ru/

http://tvarunu.com.ua/

Вправа №5

Використовуючи мережу Інтернет, знайдіть сайти різних

типів призначення. Результати пошуку запишіть в

таблиці:

URL-адреса Тип

призначення

Вид

Web-

сайта

За

доступністю

5. ЕТАПИ СТВОРЕННЯ WEB - САЙТІВ.

Перший етап. Постановка завдання.

На цьому етапі ви повинні:

чітко усвідомити мету створення сайта, його

основну тематику;

обирати тип сайта (сайт-візитка, сайт-форум,

Інтернет - магазин, ігровий портал, тощо);

21

здійснити аналіз існуючих сайтів такої ж або

схожої тематики,

продумати відмінності Вашого сайта від інших

подібних сайтів;

оцінити потенційну аудиторію сайта

продумати перелік сервісів для розміщення на

сайті: форум, чат, гостьова книга, блог, пошукова

система, тощо.

Оцінити перспективи розвитку сайта.

Слід зазначити, що не обов’язково одразу

безпомилково виконати вище зазначені кроки. Ідеї по

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

реальної його розробки, але загальні характеристики

Вам дуже допоможуть у реалізації створення

майбутнього ресурсу.

Другий етап. Визначення структури сайта.

Завдання 1. Створення внутрішньої структури

сайта.

На цьому етапі важливо скласти перелік розділів сайта

для:

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

створення списку сторінок,

визначення зв’язків між ними.

Кількість сторінок залежатиме від

інформаційного наповнення, яке планується на ньому

розмістити. Результатом роботи повинна стати мапа

сайта – діаграма, що візуально відображає внутрішню

структуру сайта.

Наприклад, для створення сайта-візитки Вашої

групи, основними відвідувачами якого будуть учні

22

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

наступною:

Наша група

(головна сторінка)Про нас Навчання Дозвілля

Список учнів

Фотогалерея

Список

викладачів

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

Успішність

групи

Спортивні

досягнення

Професійні

досягнення

Подорожі,

екскурсії

Завдання 2. Створення зовнішньої структури сайта.

На цьому етапі визначається зовнішній вигляд

Web-сторінок. Як правило, всі сторінки сайта

оформляються в однаковому стилі, тому важливо

визначити схему розташування основних блоків:

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

логотип і назва сайта;

меню для переходу до основних розділів сайта;

інформаційного блока з основним матеріалом,

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

нижнього блока (його ще називають «підвал»)

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

про авторські права тощо.

В переважній більшості блоки Web-сторінок сайта

розташовуються за наступною схемою:

23

БЛОК ЗАГОЛОВКА

БЛОК

МЕНЮ ІНФОРМАЦІЙНИЙ БЛОК

БЛОК

МЕНЮ

НИЖНІЙ БЛОК

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

сайта.

Дизайн – макет майбутнього сайта буде спиратися на

попередньо – розроблену зовнішню структуру сайта і

відіграє дуже велике значення, тому, як і в кожному

напрямку дизайну, потрібно дотримуватися принципів

композиції та колористики, враховувати властивості

текстових і графічних об’єктів сторінки, правильно

підбирати колірну гаму, елементи оздоблення, тощо.

Саме на цьому етапі визначається стиль сайта.

Важливо, щоб стиль відповідав призначенню сайта,

особливостям основної аудиторії, на яку розрахований

24

сайт, був орієнтований на надання найбільших

зручностей для сприйняття основного матеріалу (Детальніше про стиль буде викладено в розділі «Основи Web-

дизайну»)

Четвертий етап. Створення та верстка сторінок

сайта. Сторінки сайта програмуються, як правило мовою

НТМL, або ж за допомогою конструктора сайта.

Верстка (наповнення) – це процес розміщення на

сторінці текстових і графічних елементів таким чином,

щоб сторінка отримала вигляд згідно з розробленим

дизайн-макетом. Правильно зверстана Web-сторінка однаково

відображається різними браузерами, швидко

завантажується для перегляду, може бути легко

змінена, доповнена новими матеріалами.

П’ятий етап. Публікація сайта в мережі Інтернет.

На даному етапі сайт розміщують на сервері,

який надає послуги хостингу. Під час публікації в

Інтернеті сайтові надається доменне ім’я. Після цього

сайт стає доступним для перегляду всіма бажаючими.

Організації, що надають послуги хостингу, називають

хостинг-провайдерами.

Хостинг - це послуга, що включає роботи, необхідні

для забезпечення постійного доступу до Вашого

інтернет-сайта:

реєстрацію і підтримку адреси,

виділення дискового простору,

забезпечення того чи іншого виду доступу

(наприклад, по протоколу FTP),

25

роботи з адміністрування системи,

резервне копіювання сайта та інші.

Що отримує замовник разом з пакетом хостінгу?

визначений дисковий простір на сервері

можливість виконання програм та скриптів;

можливість мати безліч поштових адрес

доступ до сайта по FTP

адміністративну панель, за допомогою якої

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

настроювання поштових скриньок;

систему збору статистики та інше

Існують сервери, які надають безкоштовний

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

осіб. Тобто, якщо ви не отримуєте жодних прибутків

від існування та використання сайта, ви маєте право

користуватися безкоштовним хостингом. При цьому,

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

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

використання деяких інтерактивних засобів.

Прикладом безкоштовних хостинг –

провайдерів є www.ucoz.ru, www.narod.ru,

www.sites.google.com, www.webnode.com.ua тощо.

Домен або доменне ім'я - це основна частина

адреси сайта в Інтернеті.

Як приклади, розглянемо адреси сайтів

Львівського професійного ліцею побутового

обслуговування: http://lplpo.ucoz.lv,

пошукової системи Google:

http://www.google.com.ua/,

26

Міністерства освіти і науки України:

http://www.mon.gov.ua/

Поштових серверів http://www.ukr.net/ та

http://www.mail.ru/

Доменні імена завжди складаються з двох або

більше частин, розділених крапкою. Розберемо імена

по частинкам:

http:// - це протокол Інтернету, який

автоматично відображається браузером.

Lplpo, google, mon, ukr, mail – це назви

організацій, яким належать дані домени.

Часто платні домени містять в собі роз’яснення

форми організацій, яким належать ці домени.

Для прикладу, .com, .gov – це відповідно

комерційна та урядова організації. Нижче

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

доменів

тип організації

.com Комерційна

.edu Освітня

.gov Урядова

.mil Військова

.net Організація, що працює з мережею

.org Некомерційна

.int Міжнародна

.ru, .ua, .lv – відповідає географічному розташу-

ванню сайта.

В доменному імені сайта Львівського

професійного ліцею побутового обслуговування

ми бачимо напис ucoz. Оскільки цей сайт був

створений на безкоштовному хостингу, з

27

безкоштовним доменним ім’ям, хостинг-

провайтер відобразив свою назву в адресі сайта.

ОСНОВНІ ПРАВИЛА ПРИ ВИБОРІ ДОМЕНУ

Вибір доменного імені - завдання не таке просте, як

декому може здаватися.

Вибираючи доменне ім'я, завжди пам'ятайте, що

Ім’я складається з латинських букв

Ім'я повинно легко запам'ятовуватися.

Ім'я не повинно бути довгим - чим коротше

URL, тим простіше людині його набрати на

клавіатурі і запам'ятати.

Ім'я повинно асоціюватися з Вашою

організацією чи з вами самими.

Бажано, щоб ім'я домену містило в собі ключові

слова (або слово) сайта, тому що деякі пошукові

системи звертають на це увагу, тасуючи

результати пошуку.

Слід уникати використання цифр та дефісів в

доменному імені.

Очевидно, що коротке доменне ім'я краще

довгого, навіть якщо довге ім'я ідеально описує сайт і

містить купу ключових слів. Наприклад, "lplpo.ucoz.lv"

помітно гірше описує сайт ніж

"Lvivskiyprofesiynuyliceypobytovogoobslygovyvannya.u

coz.lv", але набагато краще запам'ятовується з першого

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

вміщається на будь-якому рекламному носії (візитка,

брошура, відкритка).

28

Шостий етап. Тестування сайта.

Після публікації сайта в Інтернеті його розробка

не вважається завершеною. Певний час буде тривати

тестування для виявлення недоліків різного характеру.

Сьомий етап. Популяризація та підтримка.

Для того щоб Ваш сайт почали відвідувати

користувачі Інтернету, бажано зареєструвати його у

пошукових системах і каталогах, розмістити

посилання на нього на інших сайтах. Цей процес

називають популяризацією, розкруткою або

просуванням.

Для підтримки інтересу до Вашого сайта

важливо регулярно оновлювати його, доповнювати

цікавими матеріалами, слідкувати за рубрикою

«новини», вчасно і конкретно відповідати на

запитання користувачів та гостей.

6. ОСНОВИ WEB – ДИЗАЙНУ. СТИЛЬОВЕ

ОФОРМЛЕННЯ САЙТІВ

У попередніх темах ми розглянули процес

створення Web-сайту та його розміщення в мережі

Інтернет. Проте цієї інформації недостатньо для

організації якісного ресурсу. Важливо знати, що Web-

сайти поділяються на різні категорії, що впливає на

їхнє оформлення та функціонування. Все це необхідно

враховувати у Web-дизайні.

29

Дизайн — це творча художня діяльність, спрямована

на зовнішній вигляд предметів, а також на їх

структурні та функціональні взаємозв'язки.

Web-дизайн – це дизайн, об’єктом якого є сторінки

Web-сайтів.

Одним із основних елементів Web-дизайну є

стильове оформлення сайту.

Схематично стильове оформлення сайтів можна

зобразити наступним чином:

1. Тематичність стилів дизайну сайтів

Розробка сайтів з використанням певних стилів

дизайну зумовлена необхідністю створювати певний

настрій у відвідувачів. Завдяки стилям, що легко

можна розпізнати, відвідувач, глянувши на сайт, вже

30

інтуїтивно знає, про що далі піде мова, і відразу ж

налаштовується на сприйняття інформації.

Наприклад, класичний стиль Web-

дизайну каже відвідувачам про надійність і

стабільність в роботі організації та її сайту, а

такий тематичний стиль, як мультиплікаційний,

дозволить відразу ж зрозуміти, що тематика сайту має

безпосереднє відношення до дітей. Якщо ж на сайті

відвідувач бачить Web-дизайн, виконаний в

абсолютно недоречному тематичному стилі, він буде

неприємно здивованим і відразу покине цей сайт.

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

розроблених за тематичною ознакою:

стиль «Ретро» - в дизайні

використовуються елементи декору

, предмети інтер'єру чи інші

атрибути часів минулих десятиліть;

стиль «Гранж» - дизайн являє

собою хаотичну композицію ,

нібито дизайн виконаний недбало

«Футуристичний» стиль - в

дизайні використовуються

атрибути з передбачуваного

майбутнього: роботи ,

високотехнологічні механізми ,

комп'ю-тери і т.д.

31

«Мультяшний» стиль - дизайн

робиться з елементами

мультфільмів, їх героїв або

коміксів.

«Журнальний » стиль - дизайн

сайту опирається на принципи

дизайну журналів: великі

заголовки, великі фотографії

графічне наповнення і т.д.

«Класичний » стиль - є схожим на найбільш великі і

відомі Інтернет-ресурси.

Цей список можна продовжувати майже до

безкінечності, адже для кожної конкретної організації

може бути створений власний оригінальний

тематичний стиль.

2. Колір в оформленні сайту

При створенні сайту особливу увагу слід

приділити кольоровій гаммі, адже від правильного

підпору та поєднання кольорів залежить левова частка

успіху Вашого творіння. Тому дуже важливо знати,

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

користувачів мережі Інтернет.

Найбільш поширеними кольорами (та їх

відтінками) у веб-дизайні є:

Синій (блакитний) – символізує терпіння,

надійність, любов і стабільність. Один з

найбільш улюблених кольорів серед мужчин.

32

Зелений - асоціюється з природою, зціленням,

молодістю та здоров’ям. Крім того, часто

пов'язаний з грошима.

Жовтий – енергійний колір, часто асоціюється з

радістю, цікавістю, інтелектом.

Оранжевий – колір бадьорості та творчого

натхнення.

Червоний – найбільш емоційно насичений

колір, в основному пов’язаний зі сміливістю та

агресією, швидко привертає увагу азартних

користувачів Інтернету.

Фіолетовий – часто асоціюється з владою,

багатством, мудрістю та благородством.

Рожевий – колір ніжності, жіночності, світлого

кохання.

Коричневий – колір стабільності, впевненості,

комфорту та надійності.

Чорний – стильний, елегантний колір, проте

може викликати негативні почуття.

Білий – колір чистоти, добра, відкритості.

За колірною гамою сайти можна поділити за

наступною схемою:

За колірною гамою

Темний Світлий Кольоровий Різнобарвний

33

У темних колірних стилях домінують темні кольори і

їхні відтінки. Такі сайти добре сприймає молодь, але

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

для людей старшого віку. Як правило, темні тони

використовуються для створення ігрових порталів,

портфоліо, фотогалерей, сайтів з невеликим вмістом

тексту.

У світлому стилі переважає білий колір, який легко

сприймається всіма користувачами. Однак, часто

вважаються світлі сайти надто простими,

малопривабливими та невиразними.

У кольоровому стилі дизайну «провідним» є

один колір, відмінний від білого й чорного. Часто цей

колір є елементом іміджу власника чи організації,

наприклад, колір логотипу компанії, умовний колір

виду діяльності, тощо.

34

У різнобарвному стилі основними є два та більше

різних кольори. Такий стиль оформлення здебільшого

обирають для дитячих сайтів.

Обираючи колірну схему для дизайну сайту,

слід враховувати цілі й завдання, поставлені перед

сайтом. Також необхідно пам'ятати, що темні кольори

завжди виглядають «важче» світлих, а насичені

кольори здаються більш «важкими» у порівнянні із

пастельними тонами. Також, слід звернути увагу на

гармонію кольору фону та шрифту. Фахівці не радять

використовувати колір фону та шрифту однієї гамми,

оскільки читач просто не сприйме таку статтю, якщо

взагалі зрозуміє, що там написано.

! Пам’ятайте, заради інформації відвідувачі

заходять на сайт. Тому текст повинен добре читатися,

бути написаним не агресивними кольорами

(салатовий, рожевий, помаранчевий, голубий, тощо).

35

Як правило, великі статті розміщують на

світлому фоні, адже тоді їх на багато легше читати.

! Пам’ятайте, вдалим проектом (в контексті

кольору) вважається той сайт, кольори якого

збалансовані та складаються з одного основного

кольору та двох-трьох допоміжних, що виділятимуть

акценти.

Перенасичений кольорами Web-дизайн свідчить

про непрофесійний підхід та несмак, тому

перенасичувати сайт всіма кольорами веселки не слід.

Підводячи підсумки вище сказаного, можна

виділити основні правила кольорового оформлення

сайту:

яскравість, тон і насиченість кольору повинні

відповідати стилю сайту;

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

статі, світогляду та вподобань потенційної

аудиторії;

кількість використаних кольорів по можливості

не повинна перевищувати 3-х;

кольори, використані на сайті повинні

гармонійно поєднуватися між собою;

текст обов'язково повинен добре читатись.

3. Дизайн сайтів за кількістю графіки

Дизайн сайтів за кількістю графіки можна розділити

на чистий, стандартний і художній.

36

У чистому стилі дизайну

сайтів графіка присутня в

мінімальному обсязі:

логотип, іконки, деякі

кнопки.

У стандартному дизайні

сайтів графіка

використовується лише в

деяких елементах дизайну,

наприклад, в «шапці» сайту.

Це один з найбільш

поширених стилів дизайну.

Художній дизайн

сайтів сконцентрований на

графіці - вона є провідним

елементом дизайну. Як

правило, сайти, виконані в

художньому стилі

створюються для

привернення уваги інтернет-

користувачів.

4. Дизайн сайтів за розміщенням контенту

За характером розміщення матеріалів на сайті,

дизайн сайтів можна розділити на стилі з

мінімальною, двох- і трьохколонковою або ж

складною структурою. Дизайн сайтів з мінімальною

структурою сконцентрований на одному-єдиному

головному елементі. Двоколонкова або

37

трьохколонкова структура найпоширеніша: стовпчики

меншої ширини виділені для меню або блоку новин,

стовпчик більшої ширини - для основного контенту.

Складна структура дизайну сайтів використовується,

як правило, для великих, об'ємних проектів,

наприклад, для інтернет-порталів. Такі сайти можуть

містити безліч стовпчиків, блоків, панелей.

Сайт складної структури Сайт з мінімальною

структурою

Найбільш поширені структури сайтів

Сайт з трьохколонковою

структурою

Сайт з двоколонковою

структурою

38

Підсумок

Отож, підвівши підсумки всього прочитаного,

визначимо основні критерії створення успішного та

популярного сайту:

Контент - є однією з найважливіших складових.

Якщо на сайті немає корисної інформації ,

здатної зацікавити певне коло людей , значить

ваш сайт не потрібен.

Дизайн – ще одна важлива складова хорошого

сайту. Саме від дизайну залежить привабливість

сторінок, і відповідно кількість відвідувачів

сайту. Пам’ятайте і про тематичне оформлення

Вашого ресурсу.

Графіка. Для хорошого сайту не обов’язково

використовувати складну графіку. Достатньо

інформативно наповнити ресурс контентом, не

перенаситити кольором і зробити цікавий

дизайн.

Швидкість завантаження сторінок повинна

бути максимально швидкою, адже жоден

користувач не буде очікувати завантаження

сторінок тривалий час, він просто покине

ресурс.

Розкрутка web-сайту - включає в себе не

тільки реєстрацію у пошукових системах, але й

згадка про сайт на візитках , рекламах, тощо.

Крім цього , на web - сайті обов'язково повинен

бути згаданий E - mail для зв'язку з Вами або , в

разі його відсутності , хоча б номер телефону.

39

Структура сайту повинна бути максимально

логічною. В іншому випадку користувач

втомиться шукати необхідну для нього

інформацію і більше ніколи не відвідає Ваш

сайт.

Відсутність орфографічних і граматичних

помилок

Сподіваюся, ці теоретичні відомості

допоможуть Вам з розумінням та легкістю підійти до

такого творчого завдання, як створення власного

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

й визнання та зацікавлення користувачів Інтернету

Вашим першим Web-проектом.

40

Частина 2

«Створення та публікація

Web-сайту»

41

У цій частині я розповім та ілюструю Вам

основи створення, наповнення та публікації Web-

сайтів на безкоштовній платформі Webnode.

Отож, розпочинаємо роботу.

СТВОРЕННЯ САЙТА

Реєстрація сайта

1. Спочатку оберемо тематику майбутнього сайта. Я

обрала «Пам’ятки Львова».

2. Продумайте контент, тобто той матеріал, яким Ви

будете заповнювати новостворений веб-ресурс.

Знайдіть необхідну інформацію, фотографії,

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

3. Заходимо в браузер. В адресній стрічці набираємо

наступну адресу: http://www.webnode.ru/ і

натискаємо Enter. Відкриється вікно:

4. Зверніть увагу на блок реєстрації, обведений

червоним контуром (мал. вище).

a) Вводимо «Назву сайта», тобто доменне ім’я. Вимоги до доменного імені викладені в теоретичній частині. Оскільки мій сайт про «Пам’ятки Львова» я

вигадала домен «Lvivpam».

b) Вводимо адресу електронної скриньки.

42

Майже усі ви, на уроках інформатики,

створювали власні електронні скриньки.

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

на сайт нашого ліцею, в блок «Методичне забезпечення»

«Методичні розробки викладачів», викачайте документ

«Лабораторно практичні роботи з тем «Електронна

пошта» та «Інтерактивне спілкування» в якому міститься покрокова інструкція.

5. Вводимо пароль.

6. Натискаємо «Реєстрація»

7. Обираємо тип сайта «Власний сайт» (1),

заповнюємо форму (2). Натискаємо продовжити

(3).

8. Обираємо один із запропонованих шаблонів

дизайну.

! Пам’ятайте про тематичність дизайну Постарайтеся підібрати шаблон як змога ближчим до

тематики Вашого сайту.

43

Натискаємо «продовжити».

9. Відмітимо «галочками» сторінки, які Ви

плануєте використовувати на сайті.

10. Після успішної реєстрації з’явиться привітальне

вікно:

11. Після натискання «До редагування», відкриється

он-лайн конструктор. Вітаю, ви створили Ваш перший Web-сайт!

Проте, давайте наразі відхилимось від створення

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

вимкнення редактора чи перезавантаження комп’ютера,

адже робота над хорошим сайтом триває не один день.

Вийдіть із браузера або перезавантажте

комп’ютер.

Вхід в систему після виходу з браузера або

перезавантаження комп’ютера.

1. Відкрийте браузер. В адресній стрічній наберіть

www.webnode.ru.

44

2. Виберіть меню «Вхід». Введіть електронну адресу

та пароль, які ви прописували при створені сайта.

Натисніть кнопку «Вхід»

3. Ви потрапили у «Ваш кабінет», в якому можете

створювати нові сайти (1), продовжити роботу над

існуючими проектами (2), змінювати власний

профіль, тощо.

http://lvivpam.webnode.ru/ - це адреса Вашого сайту

в мережі Інтернет. Ви можете переглянути його,

клікнувши по ній мишкою, або ж ввівши її в

адресній стрічці браузера

4. Для входу в режим конструктора натисніть

«Редагувати сайт»

5. У вікні, що відкрилося Вам пропонують

переглянути можливості web-хостингу,

статистики, просування сайту, проте наразі нас

цікавить «Редагування сайта»

45

РОБОТА НАД ДИЗАЙНОМ

Коригування шаблону сайта

6. У початковому стані, сайт виглядає наступним

чином:

7. Очевидно, що шаблон не зовсім відповідає

тематиці мого веб-ресурсу. Тому я трішки його

поміняю. Для цього у пошуковій системі Google

знайду зображення Львова і збережу його в

створеній на робочому столі папці «Сайт».

8. Підвівши мишею до «шапки сайту» (верхнього

блоку) натисну «Редагувати зображення» (крок1),

оберу «Додати зображення» (крок 2), натисну

«Завантажити зображення (крок 3), знайду

збережене зображення і відкрию його (крок 4).

Тоді, «піджену» зображення під шаблон за

46

допомогою бігунків (крок 5) і збережу шаблон

(крок 6).

(крок 1)

(крок 2)

(крок 3)

(крок 4)

(крок 5)

(крок 6)

Тепер шаблон відповідає тематиці сайта.

Повна зміна шаблону сайта

1. Якщо шаблон сайта здається зовсім не вдалим, Ви

можете будь-коли змінити його на інший. Для

цього, на панелі інструментів оберіть меню

«Шаблони сайту» «Змінити шаблон»

знаходите потрібний клікаєте по ньому

мишею і вибираєте «Обрати шаблон» (якщо

сподобалось) або «Відмінити»

47

ЕЛЕМЕНТИ УПРАВЛІННЯ САЙТОМ

Панель інструментів

Панель інструментів безкоштовного он-лайн

конструктора Webnode є надзвичайно зручною.

мал. Панель інструментів

Для простоти і зрозумілості використання,

розробники Webnode розділили панель на групи, щоб

користувачу-аматору було легко розібратися в

призначеннях того чи іншого елемента керування.

Отож, призначення кожного елемента опишу в

наступній таблиці:

№ Елемент Піделементи Призначення

Для роботи з web-сторінками сайта

1

Додає нову сторінку,

статтю, фотогалерею, яка

буде відображатися в меню

сайта

2

Призначений для швидкого

переходу розробника між

існуючими сторінками

сайта.

3

– Збереження змін контенту,

які зможуть бачити

користувачі

4

Перегляд сайту в режимі

користувача.

Є можливість перегляду у

двох варіантах:

«Поточна версія» - та, над

якою працюєте зараз (не

48

видна користувачам);

«Опублікована сторінка» -

збережена раніше (та, що

бачать користувачі).

5

Дозволяє зручно

розташувати контент на

сторінці.

6

– Видалення, блокування та

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

сторінки.

Для роботи над контентом

7

–

Вставляє на сторінку новий

блок з текстом чи

зображенням. Для цього

достатньо перетягнути цю

іконку в потрібне місце на

сторінці

8

–

«Опитування» - створює

форму опитування

користувачів.

«Фотогалерея» - перетягніть

іконку в потрібне місце на

сторінці, де повинна

розміститися фотогалерея

9

Створює форми

спілкування з

користувачами

10

Використовується для

блогів, новин, звітів, що

згрупувати їх по темах

(категоріях).

11 Використовується для

створення списків,

49

наприклад, учнів, товарів,

літератури, тощо

12

Можливіть

використовувати віджети

(форми авторизації

відвідувачів, теги, тощо),

опитування в соціальних

мережах та інше

Різне

13

–

Використовується як

файловий менеджер

(файлообмінник). Тут

зберігаються, імпортуються

та експортуються усі відео

файли, фотографії, файли

інших типів. Тобто, це

своєрідний накопичувач

інформації.

14

Зміна шаблону сайта

15

- Мови, яким сайт буде

відображатися для

користувачів

16

Налаштування «Шапки

сайту», «Контактних

даних», тощо

НАПОВНЕННЯ КОНТЕНТОМ

Зміна меню сайта

Жоден сайт нічого не вартий без цікавої та

корисної інформації. Проте часто буває так, що меню,

50

запропоноване в шаблоні не зовсім відповідає цілям

сайта. Тому часто доцільно поміняти назви елементів

меню для того, щоб користувачеві було зручніше

шукати інформацію.

Отож,

1) вибираємо «Редагувати меню» Натискаємо на

бігунок біля напису «Головна сторінка» і обираємо

«Нова сторінка» Прописуємо назву, вибираємо

шаблон і зберігаємо.

2) після цих дій сторінка опинилася останньою в меню

сайта. Щоб підняти її вище необхідно натиснути

бігунок біля її назви і використати «Перемістити...»

3) натискаємо «Закрити» і бачим, що створена нами

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

Таким самим чином можна знищувати,

додавати, переміщувати, структурувати сторінки

сайту.

51

Зміна контенту

Для того, що показати Вам елементи

використання панелі інструментів, я свідомо витру

блоки для контенту, запропоновані шаблоном на

головній сторінці сайта

До Після

Перетягуємо елемент [7]1на робочу частину сторінки і

натискаємо «Редагувати контент»

Відкриється наступне вікно, панель

інструментів якого нагадує панель текстового

редактора.

Підвівши мишею до кожного елемента панелі

з’явиться «підказка» його застосування.

При натисканні «вставити зображення»

відкриється вікно «Файлового менеджера». Усі

рисунки, документи, відео файли, які ви плануєте 1 [..] - Номер елемента в таблиці «Елементів панелі інструментів»

52

додавати на ваш сайт, необхідно завантажувати до

«Файлового менеджера», попередньо зберігши на

комп’ютері.

Часто необхідно змінювати розмір зображення.

Для цього двічі клікаємо на зображенні і робимо

необхідні поправки:

До Після

Експериментуйте з редактором зображень.

Закрийте вікно редактора і Ваші зміни будуть

збережені.

У праву частину вікна Головної сторінки я

перетягнула елемент «Фотогалерея» [8] панелі

53

інструментів. При редагуванні завантажила та

відмітила потрібні зображення:

Для збереження змін натисніть «Публікувати» [3].

Таким самим чином наповнюємо контентом усі

інші сторінки сайту.

Створення фотогалереї

Окрему увагу приділимо блоку головного меню

«Фотогалерея»

1. Обираємо «Фотогалерея» «Редагувати галерею»:

2. Завантажуємо попередньо збережені на комп’ютері

необхідні фотографії, відмічаємо «галочками

необхідні і натискаємо «закрити»:

54

У Вас з’явилася фотогалерея. Публікуйте зміни.

Для зміни зовнішнього вигляду

галереї, натисніть «Налаштування».

Проекспериментуйте з параметрами.

Переглянути Ваші творіння можна за допомогою

елемента [4].

55

ПІДСУМОК

Отже, в цій практичній частині Ви отримали

елементарні практичні знання по створенню сайту,

навчилися змінювати шаблон, коригувати основне

меню, наповнювати контентом сторінки сайту,

редагувати та створювати фотогалереї.

Тож бажаю Вам творчих успіхів у створенні

Ваших Web-ресурсів.

56

Використані ресурси

1. http://www.yanajy.com

2. http://webstudio2u.net/ua/

3. http://uk.wikipedia.org/wiki/

4. О. Г. Пасічник, О. В. Пасічник, I. В. Стеценко

«Основи веб-дизайну»

5. Зображення інтернет-ресурсів