Структура за темами

  • Загальне

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

    Лекційний курс

     

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

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

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

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

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

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

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

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

     

    Література:

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

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

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

     

     

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

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

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

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

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

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

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

     

    Література:

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

    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.     Якоб Нильсен Веб-дизайн. — СПб.: Символ-Плюс, 2003. — 512 с. 

     

     

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

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

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

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

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

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

     

    Література:

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

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

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

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

     

     

    Тема 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 с. 

     

     

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

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

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

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

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

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

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

     

    Література:

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

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

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

     

     

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

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

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

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

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

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

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

     

    Література:

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

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

     

     

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

     

    Тема 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. Підготовка та обробка зображень для використання в веб.

     

    Практичне заняття №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.     Основні інструменти Adobe Photoshop для роботи з веб-дизайном.

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

    3.     Що таке DPI?

    4.     Що таке HTML?

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

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

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

    8.     Форматування тексту на основі заголовків (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.                       Створення шаблону

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

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

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

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

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

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

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

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