Програма навчальної дисципліни основи web-дизайну галузь знань 0201 Культура Спеціальність 02010501 Документознавство та інформаційна діяльність



Скачати 180.96 Kb.
Дата конвертації30.12.2016
Розмір180.96 Kb.

РОБОЧА ПРОГРАМА НАВЧАЛЬНОЇ ДИСЦИПЛІНИ


ОСНОВИ WEB-ДИЗАЙНУ

Галузь знань 0201 Культура


Спеціальність 7.02010501 Документознавство та інформаційна діяльність

Інститут довузівського, заочного та дистанційного навчання


Мета та завдання навчальної дисципліни

Мета курсу «Основи web-дизайну» полягає в ознайомленні студентів з мовою розмітки гіпертекстових документів, загальними правилами створення Web-сайтів, розміщенням їх на Web-серверах, правилах оформлення Інтернет-документів, способах полегшення створення та дизайну Web-сторінок.

Завдання вивчення курсу – навчити студентів створювати дизайн та персональний Web-сайт, з використанням таких елементів як шаблон, елементи бібліотеки, стилі. Для цього планується використати програмне забезпечення пакету Adobe. Крім того планується навчити студентів редагувати Web-сторінки використовуючи можливості HTML.

У результаті вивчення навчальної дисципліни студент повинен



знати:

  • основні принципи функціонування Інтернет;

  • правила етики при розміщенні інформації в Інтернет;

  • як зареєструвати безплатну Інтернет адресу та розмістити за цією адресою власний сайт;

  • принципи створення веб-дизайну;

  • що таке мова HTML;

  • основні принципи побудови та функціонування веб-сайтів.

вміти:

  • використовувати Adobe Photoshop для створення веб-дизайну;

  • використовувати текстовий редактор для редагування веб-сторінок;

  • створювати власні веб-сайти та публікувати їх в Інтернет;

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

  • використовувати такі елементи як шари, таблиці, анімовані зображення, шаблони, стилі, елементи бібліотеки;

  • здійснювати форматування тексту та створювати структуру документу тощо.


3. Програма навчальної дисципліни

3.1. Лекційний курс – 4 год.

Тема 1. Вступ до курсу. Основні поняття та принципи функціонування Web-сайту.

  1. Структура Web-сайту.

  2. Використання гіперпосилань.

  3. Розміщення Web-сайту на локальному сервері чи на сервері в Інтернеті.

  4. Кодування веб-сайтів.

  5. Використання шаблонів у Web-дизайні.

  6. Використання стилів.

  7. Правила „хорошого тону” в Інтернет.

Література:

  1. Бородаев Д. В. Веб-сайт как объект графического дизайна. Монография. — Х.: "Септима ЛТД", 2006. — 288 с.

  2. Браун Д. Web-дизайн и публикация. Энциклопедия пользователя. — К.: ДиаСофт, 1998.

  3. Дронов В. А. HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов — К.: БХВ. 2011

  4. Крамнин К. Азбука Internet. – К.: Юниор, 1998. — 336 с.

  5. Литвин І.С. Нові інформаційні технології. Економічна думка, 1999. – 140с.

  6. Мердок К. Библия пользователя. — М.: Издательский дом «Вильямс», 2004. – 1136 с.

  7. Хоникатт Дж., Браун М. и др. Использование Internet. – К.; СПб: Издательский дом «Вильямс», 1998. – 592 с.


Тема 2. Створення веб-дизайну в програмі Adobe Photoshop.

  1. Основні принципи веб-дизайну.

  2. Основні інструменти програми Adobe Photoshop.

  3. Налаштування та робота з інструментами.

  4. Створення елементів веб-дизайну в Adobe Photoshop.

  5. Робота зі слоями.

  6. Збереження та відкриття psd файлів.

Література:

  1. Владимир Дедков Настольная книга мастера Adobe Photoshop — К.: КомпьютерПресс, 2001 г.

  2. Дж. Берд Веб-дизайн. Руководство разработчика = The Principles of Beautiful Web Design, 2nd Edition. — П.: «Питер», 2012. — 224 с. 

  3. Макнейл П. Веб-дизайн. Идеи, секреты, советы = The Web Designer's Idea Book, Vol. 2: More of the Best Themes, Trends and Styles in Website Design. — П.: «Питер», 2012. — 272 с. 

  4. Роббинс Д. Web-дизайн. Справочник. — "КУДИЦ-ПРЕСС", 2008. — 816 с. 

  5. Якоб Нильсен Веб-дизайн. — СПб.: Символ-Плюс, 2003. — 512 с. 

  6. psd.tutsplus.com


Тема 3. Підготовка та обробка зображень для використання в веб.

  1. Основи растрової та векторної графіки.

  2. Растрова графіка у веб.

  3. Інструмент Slice tool та робота з ним.

  4. Підготовка та збереження елементів дизайну у Adobe Photoshop.

  5. Обробка зображень для веб за допомогою різних програмних продуктів.

Література:

  1. Владимир Дедков Настольная книга мастера Adobe Photoshop — К.: КомпьютерПресс, 2001 г.

  2. Кэрри Бикнер Экономичный Web-дизайн. — К.: НТ Пресс, Москва, 2005. — 248 с.

  3. Якоб Нильсен Веб-дизайн. — СПб.: Символ-Плюс, 2003. — 512 с. 

  4. Якоб Нильсен, Кара Перниче Веб-дизайн: анализ удобства использования веб-сайтов по движению глаз = Eyetracking Web Usability. — М.: «Вильямс», 2010. — С. 480. 

  5. Якоб Нильсен, Хоа Лоранжер Web-дизайн: удобство использования Web-сайтов = Prioritizing Web Usability. — М.: «Вильямс», 2007. — 368 с.

  6. psd.tutsplus.com

  7. www.artlebedev.ru/tools


Тема 4. Мова розмітки гіпертексту HTML.

  1. Структура сайту з позиції мови розмітки гіпертекстових документів.

  2. Заголовок HTML документу.

  3. Форматування тексту у гіпертекстових документах.

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

  5. Створення гіперпосилань з використанням HTML.

  6. Спеціальні символи у гіпертекстових документах.

Література:

  1. Гончаров А. Ю. Web-дизайн: HTML, JavaScript и CSS. Карманный справочник. — "КУДИЦ-ПРЕСС", 2007. — 320 с. 

  2. Макнейл П. Веб-дизайн. Идеи, секреты, советы = The Web Designer's Idea Book, Vol. 2: More of the Best Themes, Trends and Styles in Website Design. — П.: «Питер», 2012. — 272 с. 

  3. Роббинс Д. Web-дизайн. Справочник. — "КУДИЦ-ПРЕСС", 2008. — 816 с. 

  4. Хоникатт Дж., Браун М. и др. Использование Internet. – К.; СПб: Издательский дом «Вильямс», 1998. – 592 с.

  5. W3.org

  6. htmlbook.ru


Тема 5. Редактор мови HTML та створення структури гіпертекстового документа.

  1. Робота з HTML редакторами.

  2. Створення структури за допомогою блочних елементів.

  3. Задання відступів між елементами.

  4. Вирівнювання та позиціонування.

  5. Зміна розміру елементів.

  6. Накладання елементів.

Література:

  1. Браун Д. Web-дизайн и публикация. Энциклопедия пользователя. — К.: ДиаСофт, 1998.

  2. Гончаров А. Ю. Web-дизайн: HTML, JavaScript и CSS. Карманный справочник. — "КУДИЦ-ПРЕСС", 2007. — 320 с. 

  3. Роббинс Д. Web-дизайн. Справочник. — "КУДИЦ-ПРЕСС", 2008. — 816 с. 

  4. Якоб Нильсен Веб-дизайн. — СПб.: Символ-Плюс, 2003. — 512 с. 

  5. W3.org

  6. htmlbook.ru

  7. net.tutsplus.com


Тема 6. Використання стилів CSS та їх основні параметри.

  1. Створення файлу стилів.

  2. Зміна стилю стандартних об’єтів.

  3. Зміна стилю гіперпосилань.

  4. Застосування стилів до вибраних елементів.

  5. Редагування та видалення стилів.

  6. Зняття стилю з вибраного елементу.

Література:

  1. Браун Д. Web-дизайн и публикация. Энциклопедия пользователя. — К.: ДиаСофт, 1998.

  2. Гончаров А. Ю. Web-дизайн: HTML, JavaScript и CSS. Карманный справочник. — "КУДИЦ-ПРЕСС", 2007. — 320 с. 

  3. Роббинс Д. Web-дизайн. Справочник. — "КУДИЦ-ПРЕСС", 2008. — 816 с. 

  4. Хоникатт Дж., Браун М. и др. Использование Internet. – К.; СПб: Издательский дом «Вильямс», 1998. – 592 с.

  5. W3.org

  6. htmlbook.ru

  7. css-live.ru

  8. css-tricks.com

Структура навчальної дисципліни

№ п/п

Назва теми

Кількість годин, відведених на:

заочна форма

Всього

Лекції

Практичні заняття

Самостійну роботу

1

2

3

4

5

7

1.

Вступ до курсу. Основні поняття та принципи функціонування Web-сайту.

21,5

0,5

1

20

2.

Створення веб-дизайну в програмі Adobe Photoshop.

21,5

0,5

1

20

3.

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

23

1

2

20

4.

Мова розмітки гіпертексту HTML.

33

1

2

30

5.

Редактор мови HTML та створення структури гіпертекстового документа.

22,5

0,5

2

20

6.

Використання стилів CSS та їх основні параметри.

22,5

0,5

2

20




Всього

144

4

10

130


Теми практичних занять

Тема 1. Вступ до курсу. Основні поняття та принципи функціонування Web-сайту.

Практичне заняття №1.

Питання:



  1. Структура Web-сайту.

  2. Використання гіперпосилань.

  3. Розміщення Web-сайту на локальному сервері чи на сервері в Інтернеті.

  4. Кодування веб-сайтів.

  5. Використання шаблонів у Web-дизайні.

  6. Використання стилів.

  7. Правила „хорошого тону” в Інтернет.

Література: 1,2,7,8,10,11,15.

Ключові поняття: Інтернет, адресація, домен, TCP/IP, хостинг, веб-сайт, гіпертекст.

Контрольні питання:

  1. В чому полягає мета курсу «Основи web-дизайну»?

  2. Обґрунтуйте взаємозв’язок з іншими дисциплінами.

  3. Визначте основні елементи функціонування мережі Інтернет.

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

  5. Що таке TCP/IP?

  6. Розшифруйте та перекладіть на українську мову абревіатуру  GML.

  7. Розшифруйте абревіатуру www.

  8. Що таке браузер? Наведіть приклад.

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

1. Визначити типові структури веб-сайтів залежно від їх тематики.


Тема 2. Створення веб-дизайну в програмі Adobe Photoshop.

Практичне заняття №2.

Питання:



  1. Основні принципи веб-дизайну.

  2. Основні інструменти програми Adobe Photoshop.

  3. Налаштування та робота з інструментами.

  4. Створення елементів веб-дизайну в Adobe Photoshop.

  5. Робота зі слоями.

  6. Збереження та відкриття psd файлів.

Література: 3,5,12,14,16.

Ключові поняття: Adobe Photoshop, слої, psd, растрові та векторні зображення, jpg, png, gif.

Контрольні питання:

  1. Який формат файлів використовує Adobe Photoshop.

  2. Яка функція інструменту Move Tool.

  3. Яка функція інструменту Gradient Tool.

  4. Яка функція інструменту Pen Tool.

  5. Яка функція інструменту Rectangle Tool.

  6. Яка функція інструменту Marquee Tool.

  7. Яка функція інструменту Type Tool.

  8. Яка функція інструменту Eraser Tool.

  9. Яка функція панелі Layers.

  10. Яка функція панелі Navigator.

  11. Яка функція панелі Character.

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

  1. Створити дизайн постера у Adobe Photoshop.

  2. Створити дизайн іконки у Adobe Photoshop.

  3. Створити дизайн веб-сайту у Adobe Photoshop.


Тема 3. Підготовка та обробка зображень для використання в веб.

Практичне заняття №3.

Питання:



  1. Основи растрової та векторної графіки.

  2. Растрова графіка у веб.

  3. Інструмент Slice Tool та робота з ним.

  4. Підготовка та збереження елементів дизайну у Adobe Photoshop.

  5. Обробка зображень для веб за допомогою різних програмних продуктів.

Література: 3,9,16,17,18.

Ключові поняття: Adobe Photoshop, графічний редактор, dpi, розширення, jpg, png, gif.

Контрольні питання:

  1. Що таке растрова графіка?

  2. Що таке векторна графіка?

  3. Що таке альфа-канал?

  4. Функції інструмента Slice Tool.

  5. Особливості збереження графіки для використання у веб.

  6. Назвати популярні програми для обробки графіки.

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

  1. Створити напівпрозорий елемент та зберегти його у форматі, який підтримує канал прозорості.

  2. Змінити розширення малюнка та здійснити його обрізку, щоб фінальний розмір був 300х200px.

  3. Перетворити Jpg зображення у 4 різні формати без втрати якості.

  4. Перетворити зображення у 3 різні формати зі стисненням 80%.


Тема 4. Мова розмітки гіпертексту HTML.

Практичне заняття №4.

Питання:



  1. Структура сайту з позиції мови розмітки гіпертекстових документів.

  2. Заголовок HTML документу.

  3. Форматування тексту у гіпертекстових документах.

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

  5. Створення гіперпосилань з використанням HTML.

  6. Спеціальні символи у гіпертекстових документах.

Література: 4,12,14,15.

Ключові поняття: GML, HTML, XML, тег, атрибут, title, гіперпосилання, амперсанд.

Контрольні питання:

  1. Розшифруйте та перекладіть на українську мову абревіатуру ISO.

  2. Перерахуйте основні риси першого варіанту мови HTML.

  3. Поясніть термін зворотня сумісність HTML.

  4. Розшифруйте та перекладіть на українську мову абревіатуру HTML.

  5. Що таке теги? Наведіть приклад.

  6. Які типи тегів ви знаєте? Наведіть приклад.

  7. Створення абзаців та розрив стрічки (HTML)

  8. Спеціальні символи (HTML)

  9. Вказання назви шрифту, що буде використовуватися при відображенні сторінки (HTML)

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

  1. Створити HTML документ.

  2. Створити абзаци та розрив стрічки (HTML).

  3. Створити гіперпосилання (HTML).

  4. Створити список (HTML).

  5. Створити таблицю (HTML).

  6. Вставити малюнок у гіпертекстовий документ (HTML).


Тема 5. Редактор мови HTML та створення структури гіпертекстового документа.

Практичне заняттях № 5.

Питання:



  1. Робота з HTML редакторами.

  2. Створення структури за допомогою блочних елементів.

  3. Задання відступів між елементами.

  4. Вирівнювання та позиціонування.

  5. Зміна розміру елементів.

  6. Накладання елементів.

Література: 2,4,14,16.

Ключові поняття: notepad++, div, позиціонування елементів, блок, рядок, таблиця.

Контрольні питання:

  1. Що таке структура HTML документу?

  2. Назвіть особливості текстових редакторів.

  3. Назвіть особливості тегу div.

  4. Визначте сутність позиціонування елементів.

  5. Визначте особливості перенесення веб-дизайну в HTML документ.

  6. Принципи створення шаблонів.

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

  1. Зробити HTML сторінку з назвою index.html на основі власного дизайну.


Тема 6. Використання стилів CSS та їх основні параметри

Практичне заняття № 6

Питання:



  1. Створення файлу стилів.

  2. Зміна стилю стандартних об’єктів.

  3. Зміна стилю гіперпосилань.

  4. Застосування стилів до вибраних елементів.

  5. Редагування та видалення стилів.

  6. Зняття стилю з вибраного елементу.

Література: 2,4,14,15.

Ключові поняття: CSS, параметр, клас, ідентифікатор, тег, пріорітетність.

Контрольні питання:

  1. Розшифруйте та перекладіть на українську мову абревіатуру CSS.

  2. Назвіть основні можливості ідентифікації об’єктів HTML документа у файлі CSS.

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

  4. Назвіть основні параметри для зміни стилю блокових елементів.

  5. Назвіть основні параметри для зміни стилю гіперпосилань.

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

  1. Створити файл style.css та приєднати його до документу index.html.

  2. Задати основні стилі сторінки.

  3. Задати основні стилі гіперпосилань.

  4. Задати основні стилі тексту.


Самостійна робота

з/п


Назва теми

Кількість

годин


1.

Вступ до курсу. Основні поняття та принципи функціонування Web-сайту.

20

2.

Створення веб-дизайну в програмі Adobe Photoshop.

20

3.

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

20

4.

Мова розмітки гіпертексту HTML.

30

5.

Редактор мови HTML та створення структури гіпертекстового документа.

20

6.

Використання стилів CSS та їх основні параметри.

20




Разом

130

Перелік питань для самостійної роботи:


  1. Що таке PSD?

  2. Основні інструменти Adobe Photoshop для роботи з веб-дизайном.

  3. Інструменти порізки та зберження.

  4. Що таке DPI?

  5. Що таке HTML?

  6. Структура гіпертекстового документу (HTML)

  7. Заголовок гіпертекстового документу (HTML)

  8. META-тегі у гіпертекстовому документі (HTML)

  9. Форматування тексту на основі заголовків (HTML)

  10. Кольорова гама документа (колір тексту, колір фону, фоновий малюнок) (HTML)

  11. Створення абзаців (HTML)

  12. Розрив стрічки (HTML)

  13. Спеціальні символи (HTML)

  14. Вказання назви шрифту, що буде використовуватися при відображенні сторінки (HTML)

  15. Створення гіперпосилань (HTML)

  16. Створення закладок та гіперпосилань на них (HTML)

  17. Створення маркованого списку (HTML)

  18. Створення нумерованого списку (HTML)

  19. Створення списку означень (HTML)

  20. Створення таблиці (HTML)

  21. Вставка малюнків у гіпертекстовий документ (HTML)

  22. Створення шаблону

  23. Області для редагування у шаблоні

  24. Каскадні таблиці стилів (CSS)

  25. Створення власних стилів

  26. Запис стилів у файл

  27. Редагування стилів

  28. Застосування стилів

  29. Редагування стилів гіперпосилань

  30. Використання поведінки елементів за певною подією


Індивідуальні завдання

Виконання довгострокового завдання на тиждень самостійної роботи. Створити дизайн веб-сайту на задану тематику. Тему студент обирає самостійно.



Методи навчання

У процесі вивчення дисципліни «Основи web-дизайну» викладачем використовуються традиційні (лекції, демонстрації, практичні завдання та ін.) та інтерактивні (кейс-методи, рольові ігри, дискусії та ін.) методи навчання.



Методи контролю

У процесі вивчення дисципліни «Основи web-дизайну» викладачем використовуються наступні методи контролю:

а) виконання тестових завдань (контрольна);

б) виконання та захист довгострокового завдання;

в) виконання тестових завдань (іспит).

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

Приклад для модульного контролю



Поточне тестування та самостійна робота

Підсумковий тест (іспит)

Сума

50

100

Т1

Т2

Т3 контрольна

Т4


Т5

Т6

5

5

25

5

5

5

Приклад за виконання курсового проекту (роботи)



Пояснювальна записка

Ілюстративна частина

Захист роботи

Сума

до __30_

до _30__

до _40__

100


Шкала оцінювання: національна та ECTS

Сума балів за всі види навчальної діяльності

Оцінка ECTS

Оцінка за національною шкалою

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

для заліку

90 – 100

А

відмінно

зараховано



82-89

В

добре

74-81

С

64-73

D

задовільно

60-63

Е

35-59

FX

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

не зараховано з можливістю повторного складання

0-34

F

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

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


Методичне забезпечення

1. Навчальний комплекс з курсу «Основи Web-дизайну» в системі Moodle: http://moodle.oa.edu.ua/course/view.php?id=37


Рекомендована література

  1. Бородаев Д. В. Веб-сайт как объект графического дизайна. Монография. — Х.: "Септима ЛТД", 2006. — 288 с.

  2. Браун Д. Web-дизайн и публикация. Энциклопедия пользователя. — К.: ДиаСофт, 1998.

  3. Владимир Дедков Настольная книга мастера Adobe Photoshop — К.: КомпьютерПресс, 2001 г.

  4. Гончаров А. Ю. Web-дизайн: HTML, JavaScript и CSS. Карманный справочник. — "КУДИЦ-ПРЕСС", 2007. — 320 с. 

  5. Дж. Берд Веб-дизайн. Руководство разработчика = The Principles of Beautiful Web Design, 2nd Edition. — П.: «Питер», 2012. — 224 с. 

  6. Доц. Коломієць В.Ф., доц. Чичкань І.В., ст. викл. Дерев’янко А.Г., ас. Скорина Т.М. Міжнародні інформаційні системи та технології в Європі – К. Київський національний університет імені Тараса Шевченка Інститут міжнародних відносин Центр європейських студій Кафедра міжнародної інформації, 1999

  7. Дронов В. А. HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов — К.: БХВ. 2011

  8. Крамнин К. Азбука Internet. – К.: Юниор, 1998. — 336 с.

  9. Кэрри Бикнер Экономичный Web-дизайн. — К.: НТ Пресс, Москва, 2005. — 248 с.

  10. Литвин І.С. Нові інформаційні технології. Економічна думка, 1999. – 140с.

  11. Мердок К. Библия пользователя. — М.: Издательский дом «Вильямс», 2004. – 1136 с.

  12. Макнейл П. Веб-дизайн. Идеи, секреты, советы = The Web Designer's Idea Book, Vol. 2: More of the Best Themes, Trends and Styles in Website Design. — П.: «Питер», 2011. — 272 с. 

  13. Патрик Макнейл Веб-дизайн. Идеи. Секреты. Советы. — К.: Питер, 2012

  14. Роббинс Д. Web-дизайн. Справочник. — "КУДИЦ-ПРЕСС", 2008. — 816 с. 

  15. Хоникатт Дж., Браун М. и др. Использование Internet. – К.; СПб: Издательский дом «Вильямс», 1998. – 592 с.

  16. Якоб Нильсен Веб-дизайн. — СПб.: Символ-Плюс, 2003. — 512 с. 

  17. Якоб Нильсен, Кара Перниче Веб-дизайн: анализ удобства использования веб-сайтов по движению глаз = Eyetracking Web Usability. — М.: «Вильямс», 2010. — С. 480. 

  18. Якоб Нильсен, Хоа Лоранжер Web-дизайн: удобство использования Web-сайтов = Prioritizing Web Usability. — М.: «Вильямс», 2007. — 368 с.


Інформаційні ресурси

  1. Спецификация HTML 4.0. Переклад Юлії Поданевої. \\ http://www.stack.ru/~julia/HTML4/cover.html

  2. W3.org

  3. htmlbook.ru

  4. psd.tutsplus.com

  5. net.tutsplus.com

  6. www.artlebedev.ru

  7. web-standards.ru

  8. habrahabr.ru

  9. css-live.ru 

  10. smashingmagazine.com

  11. netmagazine.com

  12. impressivewebs.com

  13. css-tricks.com




База даних захищена авторським правом ©lecture.in.ua 2016
звернутися до адміністрації

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