Створення веб-сайту. Основи веб-дизайну.

Практична робота 30,31

Тема. Створення веб-сайту. Основи веб-дизайну.

Мета:

сформувати поняття:

•   веб-дизайн;
•   кольорова гама;
•   навігація;

пояснити:

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

формувати навички:

• засобами безкоштовного сервера створювати статичні веб-сторінки;
• розробляти веб-сторінки різних типів;
• створювати вміст веб-сайту;
• оновлювати вміст веб-сайту;
• вміння чітко й лаконічно висловлювати думки;

виховувати:

• важність, дисциплінованість під час роботи на ПК.

Тип заняття: Практичне (застосування знань, формування умінь та навичок)

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

Хід заняття

І. ОРГАНІЗАЦІЙНИЙ ЕТАП

ІІ. ПЕРЕВІРКА ДОМАШНЬОГО ЗАВДАННЯ

ІІІ. АКТУАЛІЗАЦІЯ ОПОРНИХ ЗНАНЬ

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

1. Які є способи створення сайтів?

2. Що таке хостинг?

3. Де «знаходиться» редактор веб-сайтів?

4. Які можливості має система керування вмістом сайту?

5. У чому полягає процес реєстрації?

IV. МОТИВАЦІЯ НАВЧАЛЬНОЇ ДІЯЛЬНОСТІ

Викладач. Стильний веб-сайт означає, що кожна його сторін­ка має яскраво виражену приналежність до всього сайту, дозволяє легко орієнтуватися, причому пошук інформації не загрожує не­безпекою «загубитися» в лабіринті інформації і згаяти час. А час часто виражається і матеріальними цінностями. Як гра­мотно, красиво та доступно оформити сайт?

V. ВИВЧЕННЯ НОВОГО МАТЕРІАЛУ

Термінологія

Веб-дизайн (від англ. Web design) – галузь веб-розробки і різно­вид дизайну, завдання якого – проектувати призначені для корис­тувача веб-інтерфейси для сайтів або веб-додатків. Веб-дизайнери проектують логічну структуру веб-сторінок, продумують найзрстудентиші рішення подання інформації та займаються художнім оздо­бленням веб-проекту. У результаті перетину двох галузей людської діяльності веб-дизайнер повинен знати найновіші веб-технології і володіти відповідними художніми здібностями.

Основи веб-дизайну

Слід виділити такі елементи, які використовують під час ство­рення стилю:

шрифт – у межах одного веб-сайту він не повинен мати багато розбіжностей за такими характеристиками, як гарнітура (на-писання), кегль (розмір) букв, колір;

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

графічне оформлення сайту має бути пов’язане із загальною кольоровою гамою. Для цього треба продумати його коцепцію. Усі графічні елементи можна поділити на два великі групаи: мальовані і фото, які не треба змішувати. У разі використання фотокарток необхідно попередньо їх обробити, здійснити тонову і кольорову корекцію, кадрування, вибрати розмір зображення;

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

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

Кольорова гама повторюється, і таким чином у користувача створюється почуття зв’язності, єдності сайту.

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

Як дібрати кольори для сайту?

Шукаючи колірне рішення, важливо пам’ятати про таке:

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

 добирати кольори слід з урахуванням орієнтовної аудиторії цього ресурсу;

 кількість використовуваних кольорів за можливості не повинна перевищувати трьох;

 кольори, використані на сайті, мають взаємодіяти та гармонію-вати між собою;

 вживання кольору має відповідати елементарним правилам ло-гіки.

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

Використовувати кольори потрібно дуже обережно. Не слід бра­ти занадто багато кольорів.

Потрібно зауважити, що поєднання несумісних кольорів іноді призводить до вражаючого ефекту!

Можливі такі методи поєднання кольорів:

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

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

 використання природних поєднань кольорів;

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

Маються на увазі довколишні кольори в колірному колі. Це традиційне добирання кольору за візуальною сумісністю.

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

Дуже добре поєднуються кольори, протилежні один одному. Тому такий метод досить часто використовують художники і ди­зайнери, наприклад, у рекламі.

Метод використання природних поєднань кольорів

Часом несподівані колірні рішення нам дає сама природа. Тому, щоб дібрати відтінки, достатньо добре поглянути по сторонах і ско­ристатися тим, що ми бачимо.

Дуже добре виглядають у поєднанні різні відтінки одного ко­льору. Іноді такий спосіб дає вельми приємний ефект, підкреслює важливі елементи і надає відчуття легкості.

Дібрати колірне рішення — важливий крок у формуванні фір­мового стилю. Дібравши кольори, не полінуйтеся протестувати ма­кет вашого майбутнього сайту на ваших знайомих, друзях і роди­чах, далеких від сайтобудування. Вони зможуть дати вам найбільш об’єктивну оцінку. Головне в цьому складному питанні: колірна гама не повинна втомлювати або акцентувати на собі увагу. В іншо­му вибір обмежується тільки фантазією і смаком дизайнера.

Правила дизайнерів

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

Друге правило професійного веб-дизайнера: він має передба­чити, як будуть виглядати створені сторінки в різних версіях. За необхідності потрібно створювати сторінки з використанням тіль­ки безпечної палітри. Сайт може бути дуже гарним, проте його не побачать. Навігація має залишатися простою і зрозумілою – якщо меню має вигляд картинки, то потрібно забезпечити всі картинки підписами або продублювати меню текстовими посиланнями внизу сторінки.

Третє правило – потрібно використовувати тільки стандартні шрифти, які поставляються з Windows і гарантовано знаходяться на машині клієнта. Це Arial, Times New Roman, Courier. Недотри­мання цього правила призводить до некоректного відображення вмісту сторінки.

VI. ПЕРВИННЕ ЗАКРІПЛЕННЯ ЗНАНЬ

Практичне завдання

Інструктаж із правил техніки безпеки.

Пропонуємо студентам завдання.

1. Проаналізувати можливості сайту ua.mylivepage.com на пред­мет створення власного сайту.

2. Зареєструватись на цьому сайті (3 кроки).

3. Проаналізувати можливості вбудованого редактора веб-сайтів.

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

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

Практична частина

Інструктаж із техніки безпеки.

Завдання

1. У вибраній системі (mylivepage або Ucoz) створити сайт, при­свячений життю групи.

2. Створити зазначені сторінки, наповнити їх текстовим та гра­фічним матеріалом:

Головна – група, фото групи, список студентів, куратор;

Мій технікум – фото, адреса, адміністрація, контактні дані;

Це я – фото, хобі тощо.

3. Організувати на веб-сайті чат, опитування, календар.

4. Адресу сайту надіслати викладачу електронною поштою.

Студенти виконують комплекс вправ для зняття м’язового напру­ження.

VIII. ПІДБИТТЯ ПІДСУМКІВ ЗАНЯТТЯ

Викладач оцінює роботу студентів.

IX. ДОМАШНЄ ЗАВДАННЯ

Опрацювати конспект та відповідний параграф підручника.