Веб дизайн

Матеріал з Фізмат Вікіпедії
Перейти до: навігація, пошук

Мета уроку: Розглянути основні етапи та правила створення веб сайту.

Структура уроку

І. Організаційний етап.

ІІ. Актуалізація опорних знань.

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

ІV. Узагальнення і систематизація знань.

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

Хід уроку

І. Організаційний етап.

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

ІІ. Актуалізація опорних знань.

Кожен із вас в тій чи іншій мірі знайомий із веб сайтами. У ході вашої навчальної діяльності може виникнути потреба створити свій власний сайт. Для того щоб це зробити на сьогоднішньому уроці ми розглянемо основні етапи створення веб сайту.

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

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

1. Ідея

2. Розробка структури сайту

3. Розробка оформлення сайту

4. Кодинг, програмування

5. Тестування і доопрацювання

6. Просування, реклама

7. Подальша підтримка і оновлення

Перші п'ять етапів відносяться безпосередньо до створення сайту, останні потрібні для подальшого існування сайту.

ІДЕЯ

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

• Навіщо створювати сайт (чи потрібно це взагалі)

• Про що буде сайт (тематика)

• Що це буде (домашня сторінка, портал, або щось ще)

• Відмінність від сайтів з такою ж тематикою (якщо це не домашня сторінка)

• Яка буде аудиторія сайту (стать, вік, інтереси і т.д.)

• Якого роду сервіси будуть присутні на сайті (форум, каталог, пошта і т.д.)

• Плани на найближче майбутнє • Плани подальшого розвитку (перспективи)

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

РОЗРОБКА СТРУКТУРИ

Щоб створити сайт потрібний план. Чітко розписаний, що, де буде розташовано. План цей малюється на папері, і називається це розробка структури сайту. Структуру сайту можна умовно розділити на зовнішню і внутрішню. ВНУТРІШНЯ СТРУКТУРА САЙТУ. Залежить від того, яка інформація буде розміщена, які є матеріали. Слід вирішити, які будуть на сайті розділи, підрозділи, тобто скласти дерево сайту.

ЗОВНІШНЯ СТРУКТУРА

Це розташування основних важливих елементів на кожній сторінці. Треба вирішити, де і як буде розташовано меню, можливо, пошук, основний зміст, певні анонси про нові розділи сайту, оновлення, лічильник та банери, якщо вони передбачені на сайті. При розробці зовнішньої і внутрішньої структури орієнтуються на те, щоб в майбутньому відвідувачеві було легко орієнтуватися на сайті, щоб легко знаходилася важлива і потрібна інформація. Тому, перш ніж братися за розробку структури сайту, потрібно вивчити ресурси з подібною тематикою і подивитися, як вирішено це завдання там. ОФОРМЛЕННЯ САЙТУ

Оформлення або дизайн – це зовнішній вигляд сайту. Перше враження від сайту є дуже важливим, бо від нього залежить чи залишиться відвідувач, чи знайомитиметься з інформацією, яку йому пропонують, або закриє вікно з цим сайтом і назавжди забуде про його існування. Оформлення сайту підказує відвідувачеві, куди він потрапив: чи це є корпоративний сайт певної компанії, або інформаційний портал, або літературний сайт, або щось ще. Оформлення допомагає відвідувачеві рієнтуватися по сайту, а може, і навпаки, збити відвідувача так, що навіть при добре розробленій структурі відвідувачеві важко буде зорієнтуватися. Від оформлення залежить багато що - візуальна інформація є не менш важливою, ніж текстова, яка потім наповнить сайт. Не вірте, що дизайн – це справа смаку: що хочу, то і зроблю. Це не правда. Дизайн – це ціла наука. Щоб опанувати їй, доведеться ознайомитися з такими поняттями, як колористика (теорія кольору), композиція, шрифт, і багатьма іншими. Дизайн підпорядкований усталеним законам і правилам, і дизайн сайту - не виключення. Крім теорії потрібно буде також опанувати багатьма програмами, для втілення задумок в життя. Оформлення сайтів виявляється складною наукою: багато чого треба вміти і багато чого знати, щоб створити якісний дизайн для сайту.

КОДИНГ І ПРОГРАМУВАННЯ

Тепер маємо оболонку (макет зовнішнього вигляду сайту) і план дій (структуру). Але, що стоїть за оболонкою? А за оболонкою знаходиться каркас, на якому ця оболонка тримається, це є код сторінки. Він відповідає за те, як в певній послідовності на сторінці відображається текст і картинки. Мова HTML є основною при створенні документів, що розміщуються у World Wide Web. Завдяки мові розмітки користувач Web може у себе на екрані переглянути документ у тому вигляді, в якому його задумав розробник: із визначеними розмірами шрифту і розбивкою на абзаци, із заданими розмірами і розташуванням малюнків, із виділеними словами, посиланнями тощо. HTML - набір угод для розмітки документів, що визначають зовнішній вигляд документів на екрані комп'ютера при доступі до них із використанням програми броузера. Документи, підготовлені мовою HTML, називаються HTML-документами. Уявити, як виглядає код HTML-документа, ви зможете, якщо завантажите документ у броузер і виконаєте команду Вид - В виде HTML (в броузрі Internet Explorer). У вікні Блокнот ви побачите код поточного документа.

HTML-документ (або веб-сторінка) - це звичайний текстовий файл із розширенням htm або html, складений мовою HTML, який містить відомості для публікації в World Wide Web.

Код HTML дуже компактний, і HTML-документи мають значно менший розмір, ніж документи, підготовлені в текстових редакторах типу Word. Це одна з основних причин широкого застосування мови HTML для кодування повідомлень, що розповсюджується по Інтернету. HTML-документи розміщаються в WWW не поодинці, а у виді сайтів.

ІV. Узагальнення і систематизація знань

На цьому уроці ми розглянули основні правила створення веб сайтів. Ознайомилися із засобами їх створення.

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

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