Овчинникова Любовь Петровна, кандидат педагогических наук, доцент учебно-методический комплекс

Вид материала

Учебно-методический комплекс

Содержание 4.1. Объем дисциплины и виды учебной работы Количество часов по формам обучения Самостоятельная работа Лабораторные работы (лабораторный практикум) Виды итогового контроля Всего часов по учебн. плану Раздел II. Технологии web-дизайна Раздел III. Дизайн Web-сайтов 5. Содержание курса Раздел II. Технологии web-дизайна Раздел III. Дизайн Web-сайтов 6. Темы практических и семинарских занятий 7. Задания для самостоятельной работы студентов 8. Темы рефератов и методические указания по их выполнению

Подобный материал:

• Овчинникова Любовь Петровна, кандидат педагогических наук, доцент учебно-методический, 510.86kb.
• Овчинникова Любовь Петровна, кандидат педагогических наук, доцент учебно-методический, 824.89kb.
• Курило Лариса Витальевна, кандидат педагогических наук, доцент учебно-методический, 718.29kb.
• Людмила Павловна Гордеева, кандидат педагогических наук, доцент, доцент кафедры «Философия,, 523.17kb.
• Полякова Офелия Робертовна, кандидат педагогических наук, доцент учебно-методический, 389.78kb.
• Учебно-методический комплекс подготовлен Юдиной А. С. Учебно-методический комплекс, 1284.72kb.
• Октябрьской Революции Краснознаменной академии (ввиа) имени профессора Н. Е. Жуковского, 1542.58kb.
• Учебно-методический комплекс одобрен и рекомендован к опубликованию кафедрой «Экономика»,, 4967.34kb.
• Баранников Александр Лукьянович, кандидат технических наук, доцент, доцент кафедры, 853.95kb.
• Учебно-методический комплекс по специальности 071201 «Библиотечно-информационная деятельность», 325.41kb.

4.1. Объем дисциплины и виды учебной работы

Вид учебной работы	Количество часов по формам обучения
	Очная
№№ семестров	8
Аудиторные занятия:	48
лекции	16
практические и семинарские занятия	32
Самостоятельная работа	62
Всего часов на дисциплину	110
Текущий контроль (количество, № семестра)
Лабораторные работы (лабораторный практикум) (количество, № семестра)	-
Контрольная работа (№ семестра)	-
Виды итогового контроля (экзамен, зачет)	Зачет – 8 сем.

4.2. Распределение часов по темам и видам учебной работы


Форма обучения очная

№ п/п	Наименование тем	Количество часов
		Всего часов по учебн. плану	В том числе
			Лекции	Семи-нары		Самост работа
Раздел I. Основы Интернет-технологий
1	Обзор программ, используемых при создании WEB-сайта	10	1	3		6
2	Информационная архитектура сайта	10	1	3		6
3	Макетирование. Эргономика WEB-сайта	13	1	4		8
Раздел II. Технологии web-дизайна
4	Подготовка иллюстраций и графических элементов	11	2	3		6
5	Gif-анимация и баннеры. Карта изображения ImageMap	11	2	3		6
6	Создание динамических элементов в DreamWeaver	12	2	4		6
7	Оценка и тестирование сайта	11	2	3		6
Раздел III. Дизайн Web-сайтов
8	Введение в дизайн для сети Internet	11	2	3	6
9	Основы Web-графики	11	2	3	6
10	Особенности дизайна Web-сайтов	10	1	3	6
Итого		110	16	32	62

5. Содержание курса


Раздел I. Основы Интернет-технологий


Тема 1. Обзор программ, используемых при создании WEB-сайта

Дизайн в сети Internet: задачи, подходы, решения. Основные понятия и терминология. Этапы разработки WEB-сайта. Уменьшение затрат ресурсов и сроков создания WEB-сайта. Основные формулировки в техническом задании на разработку сайта. Возможности современных программ, используемых для создания WEB-страниц. Обзор программ Macromedia DreamWeaver, HomeSite и Microsoft FrontPage. Основные возможности программы DreamWeaver. Задание цветового оформления. Выбор цветовой схемы. Создание и использование каскадных таблиц стилей CSS.


Тема 2. Информационная архитектура сайта

Элементы информационной архитектуры. Распределение информации по разделам сайта с учетом информационной, логической и визуальной взаимосвязи между разделами. Основные компоненты WEB-страницы и способы их визуального представления на страницах сайта. Разработка простого макета страницы и линейной системы навигации. Использование шаблонов (templates) в DreamWeaver: создание шаблонов, применение к готовым страницам, модификация шаблонов.


Тема 3. Макетирование. Эргономика WEB-сайта

Эргономика сайта (web-usability). Факторы, которые затрудняют и факторы, которые облегчают восприятие пользователем информации на сайте. Макетирование в WEB. Приемы макетирования. Создание фиксированных и адаптируемых страниц. Размещение информации на странице с учетом решаемых задач. Примеры удачных и неудачных решений. Система навигации на сайте. Принципы построения системы навигации. Создание навигационных палитр

Раздел II. Технологии web-дизайна


Тема 4. Подготовка иллюстраций и графических элементов

Требования к иллюстрациям в сети Internet. Обзор форматов иллюстраций JPEG, GIF, PNG, SWF, SVG. Подготовка графики в программах Adobe PhotoShop, Adobe ImageReady и Macromedia Fireworks. Способы уменьшения объема файла. Использование коллекций изображений (clipart) векторных графических редакторов на примере CorelDraw. Подготовка изображений, имеющих прозрачные области. Представление текстовой информации. Создание кнопок. Имитация различных состояний кнопки. Создание фоновых иллюстраций. Техника создания бесшовных узоров в программах Adobe PhotoShop и Adobe ImageReady. "Нарезка" изображений на фрагменты в программе Adobe ImageReady. Оптимизация фрагментов изображений.


Тема 5. Gif-анимация и баннеры. Карта изображения ImageMap

Что такое GIF-анимация. Способы создания и параметры анимации. Способы уменьшения объема файла. Использование Adobe ImageReady и Ulead GifAnimator для создания gif-анимации. Преобразование в GIF-анимацию файлов двухмерной и трехмерной графики. Баннеры: параметры, размещение на WEB-странице. Разработка сюжета баннера Использование GIF-анимации и роликов FLASH в баннерной рекламе. Воздействие баннерной рекламы на пользователя. Применение карт изображений ImageMap в WEB-дизайне


Тема 6. Создание динамических элементов в DreamWeaver

DreamWeaver: программируем без программирования! Назначение палитр Behaviors и TimeLine. Управление параметрами элементов в DreamWeaver. Обработка событий. Типовые операции (модальные окна, открытие новых окон и управление ими), проверка данных формы, управление видимостью и содержанием слоев, проверка браузера. Сложные операции: создание раскрывающихся меню, анимация слоев, создание эффекта "rollover". Использование возможностей Macromedia Flash.


Тема 7. Оценка и тестирование сайта

Критерии оценок созданного сайта. Способы снижения визуального шума и повышения четкости подачи материала. Этапы стандартного тестирования сайта. Методика тестирования сайта на аудитории. Выработка предложений по редизайну и обоснование необходимости редизайна. Обзор ресурсов, связанных с вопросами WEB-дизайна и WEB-usability.

Раздел III. Дизайн Web-сайтов


Тема 8. Введение в дизайн для сети Internet

Пространственные отношения. Пропорции, взаимное расположение, плотность. Взаимосвязь размера и формы, цвета, текстур. Форма: прямолинейные, криволинейные, аморфные.

Цвет. Форматы: RGB, HSV, CMYK. Цветовой круг. Восприятие и сочетаемость цветов. Текстуры: плоские, геометрические, пиксельные, фотографические, материальные. Способы представления и особенности восприятия. Психологические особенности восприятия цвета.

Шрифт. Классификация, гарнитура, начертание, подбор шрифтов, параметры набора, текст как текстура. Кодировки текста. Назначение, использование, история стилей в искусстве на примере шрифта. Выбор шрифтового оформления, строение буквы, типографические термины, упражнения на расстановку букв. Представление шрифтов в компьютере. Выбор шрифтового оформления. Правила web-дизайна: экономии средств, баланса, контраста, динамики, нюансировки.


Тема 9. Основы Web-графики

Векторная и растровая графика. Форматы графических файлов. Основы HTML. Инструментальные средства для разработки Web-страниц. Оптимизация HTML-кода. Редакторы, конвертеры, CSS.

Графический редактор PhotoShop. Основные инструменты, работа с цветом. Фильтры. Масштабирование изображений. Коррекция изображений.

Графический редактор CorelDraw Основные инструменты, работа с цветом, текстом, экспорт изображений.

Графический редактор Flash. Основные инструменты, работа с цветом, текстом, экспорт изображений, анимация.

Технические приемы: палитра и диффузия, границы изображений, пиксельные эффекты, оптимизация, масштабирование, трехмерность, искажения.


Тема 10. Особенности дизайна Web-сайтов

Конструкция – организация материала. Иллюстративный и иной изобразительный материал (кнопки, плашки, выделения, знаки, фоны, логотипы, баннеры, визуалы) – приемы создания.

Типы сайтов. Топология сайта, распределение материала, первая страница, формат страниц, заглавия и заголовки, навигация. Оформление текстов, материала в Web-страницах. Текст: выявление иерархии, структуры, последовательности, необходимости иллюстраций, позиционирование. Модуль, модульная сетка, художественная структура, членение, ритм.

Композиция (приведение конструкции к зрительному образу). Зрительная целостность изображения – достижение ее с помощью контраста, равновесия, динамики, статической ясности, ритма, членения, паузы, акцента. Форма и контрформа: цвет, модуль, период, сетка, выравнивание. Стилистика (на основании анализа материала, содержания). Метафора, "отстранение", игра.


6. Темы практических и семинарских занятий


Задания для семинарских и практических занятий отражают программу курса по разделам и темам.

Основная цель данных занятий – закрепление у студентов знаний материала, изложенного при чтении лекций, а также формирование навыков самостоятельного поиска литературных источников и другого материала при выполнении заданий.

Кроме того, предлагаются темы рефератов, которые можно рассматривать как исследовательский поиск по проблемам организации и развития международного туризма, формирующий у студентов творческий подход к выполнению заданий. Рефераты способствуют углубленному изучению наиболее важных вопросов курса. Написание их не является обязательным требованием к изучению дисциплины.


Тема 2. Информационная архитектура сайта

1. Распределение информации по разделам сайта с учетом информационной, логической и визуальной взаимосвязи между разделами.
   
2. Основные компоненты WEB-страницы и способы их визуального представления на страницах сайта.
   
3. Использование шаблонов (templates) в DreamWeaver: создание шаблонов, применение к готовым страницам, модификация шаблонов.
   

Литература: [1,3,8].


Тема 3. Макетирование. Эргономика WEB-сайта

1. Эргономика сайта (web-usability).
   
2. Макетирование в WEB.
   
3. Принципы построения системы навигации.
   

Литература: [1,3,5].


Тема 4. Подготовка иллюстраций и графических элементов

1. Требования к иллюстрациям в сети Internet. Обзор форматов иллюстраций JPEG, GIF, PNG, SWF, SVG.
   
2. Создание фоновых иллюстраций.
   
3. Техника создания бесшовных узоров в программах Adobe PhotoShop и Adobe ImageReady.
   

Литература: [1,5,7,8].


Тема 5. Gif-анимация и баннеры. Карта изображения ImageMap

1. Использование Adobe ImageReady и Ulead GifAnimator для создания gif-анимации.
   
2. Баннеры: параметры, размещение на WEB-странице.
   
3. Применение карт изображений ImageMap в WEB-дизайне.
   

Литература: [1,3,8].


Тема 6. Создание динамических элементов в DreamWeaver

1. Назначение палитр Behaviors и TimeLine. Управление параметрами элементов в DreamWeaver.
   
2. Сложные операции: создание раскрывающихся меню, анимация слоев, создание эффекта "rollover".
   
3. Использование возможностей Macromedia Flash
   

Литература: [1,3,4,8].


Тема 7. Оценка и тестирование сайта

1. Критерии оценок созданного сайта.
   
2. Этапы стандартного тестирования сайта.
   
3. Выработка предложений по редизайну и обоснование необходимости редизайна.
   

Литература: [1,3,5,].


Тема 8. Введение в дизайн для сети Internet

1. Пространственные отношения.
   
2. Цвет. Форматы: RGB, HSV, CMYK.
   
3. Шрифт. Классификация, гарнитура, начертание, подбор шрифтов, параметры набора, текст как текстура.
   
4. Правила web-дизайна: экономии средств, баланса, контраста, динамики, нюансировки.
   

Литература: [1,5,].


Тема 9. Основы Web-графики

1. Векторная и растровая графика.
   
2. Графический редактор PhotoShop.
   
3. Графический редактор CorelDraw
   
4. Графический редактор Flash.
   
5. Технические приемы: палитра и диффузия, границы изображений, пиксельные эффекты, оптимизация, масштабирование, трехмерность, искажения.
   

Литература: [1,5,7,8,9].


Тема 10. Особенности дизайна Web-сайтов

1. Конструкция – организация материала.
   
2. Типы сайтов. Топология сайта
   
3. Композиция сайта
   

Литература: [1,6,7,8,9].


7. Задания для самостоятельной работы студентов

Разделы и темы для самостоятельного изучения	Виды и содержание самостоятельной работы
Раздел I. Основы Интернет-технологий
Тема 1. Обзор программ, используемых при создании WEB-сайта	Этапы разработки WEB-сайта. Основные возможности программы DreamWeaver. Назовите способы уменьшение затрат ресурсов и сроков создания WEB-сайта.
Тема 2. Информационная архитектура сайта	Распределение информации по разделам сайта с учетом информационной, логической и визуальной взаимосвязи между разделами. Основные компоненты WEB-страницы и способы их визуального представления на страницах сайта. Назовите способы использования шаблонов в программе DreamWeaver.
Тема 3. Макетирование. Эргономика WEB-сайта	Эргономика сайта. Макетирование в WEB. Каковы принципы построения системы навигации.
Раздел II. Технологии web-дизайна
Тема 4. Подготовка иллюстраций и графических элементов	Требования к иллюстрациям в сети Internet. Создание фоновых иллюстраций. Назовите способы создания бесшовных узоров в программах Adobe PhotoShop и Adobe ImageReady.
Тема 5. Gif-анимация и баннеры. Карта изображения ImageMap	Использование Adobe ImageReady и Ulead GifAnimator для создания gif-анимации. Баннеры: параметры, размещение на WEB-странице. Назовите способы использования карт изображений ImageMap в WEB-дизайне.
Тема 6. Создание динамических элементов в DreamWeaver	Назначение палитр Behaviors и TimeLine. Управление параметрами элементов в DreamWeaver. Способы создания раскрывающихся меню, анимации слоев, создание эффекта "rollover". Назовите способы использования возможностей Macromedia Flash.
Тема 7. Оценка и тестирование сайта	Критерии оценок созданного сайта. Этапы стандартного тестирования сайта. Сформулируйте предложения по редизайну и обоснуйте необходимость редизайна.
Раздел III. Дизайн Web-сайтов
Тема 8. Введение в дизайн для сети Internet	Пространственные отношения. Использование шрифтов. Классифика-ция, гарнитура, начертание, подбор шрифтов, параметры набора, текст как текстура. Сформулируйте правила web-дизайна: экономии средств, баланса, контраста, динамики, нюансировки.
Тема 9. Основы Web-графики	Использование векторной и растровой графики в программах PhotoShop и CorelDraw. Особенности работы в графическом редакторе Flash МХ. Сформулируйте технические приемы работы с палитрой и диффузией, масштабированием, трехмерностью, искажениями.
Тема 10. Особенности дизайна Web-сайтов	Конструкция – организация материала. Типы сайтов. Топология сайта. Охарактеризуйте примеры композиций сайтов.

8. Темы рефератов и методические указания по их выполнению