Методические рекомендации

МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ РФ

Федеральное государственное бюджетное образовательное учреждение высшего профессионального образования

«Мурманский государственный гуманитарный университет»

(ФГБОУ ВПО МГГУ)

МЕТОДИЧЕСКИЕ РЕКОМЕНДАЦИИ

для студента

дисциплина «Web-графика и web-дизайн»

Специальность 050501 «Профессиональное обучение (дизайн)»

Автор программы: к. п.н.

1.  Целями преподавания дисциплины «Web- графика и web - дизайн» являются: формирование у будущих специалистов общего представления об основах визуального дизайна, знакомство с современными технологиями и программными средствами создания web-сайтов.

Требования к уровню освоения содержания дисциплины (должны знать, должны уметь)

Студенты должны:

знать

уметь

-  основные определения и базовые понятия: глобальная сеть, всемирная паутина, браузер, гипертекст, гипермедийный документ, гиперссылка, web-страница, web-сайт, web-сервер, язык разметки гипертекста, тег, атрибут тега; -  основные этапы создания web-сайта; -  основные модели организации сайта, приемы навигации; -  основные принципы дизайна web-сайта; -  основы технологии HTML по созданию web-сайта; -  основы технологии каскадных таблиц стилей CSS -  основные форматы графических элементов на web-странице

-  оптимизировать графику; -  планировать web-сайт; -  создавать статические web-страницы с использованием различных элементов (текст, графика, таблица, список); -  связывать между собой web-страницы системой внутренних и внешних гиперссылок; -  создавать web-страницу при помощи написания тегов на языке HTML и при помощи WYSIWYG - редактора.

2.  Содержание разделов дисциплины.

Основы сайтостроения. Классификации web-сайтов. Правила web-дизайна. Интернет, всемирная паутина. Web-сайт, Web - страница, web-сервер. Классификация сайтов по интерактивности, по частоте изменения, по использованию технологий, по функциональному назначению.

Основные этапы разработки сайта: планирование, реализация, тестирование, размещение, рекламирование, сопровождение. Вопросы, решаемые на каждом этапе. Основные элементы, размещаемые на web-странице.

Модели организации сайта: линейная организация, иерархия, решетка. Удобство использования и структуры сайта. Выбор структуры и типа сайта. Теория навигации. Размещение элементов навигации. Типы ссылок.

Типы формата web-страниц: «резиновый» дизайн; «к верху от сгиба»; панорамные страницы; подгон страницы. Выбор формата и типа сайта.

Пространственные отношения. Формы. Цветовые сочетания. Текстуры. Особенности академического стиля. Дизайн домашней страницы.

Выставочная графика, фон, логотип, баннер, визуалы. Основные графические форматы, используемые на страницах web-сайта: gif, jpeg, png. Палитра и диффузия. Оптимизация графики.

Планирование и реализация сайта. Визуальные редакторы создания сайта. Основные виды верстки сайта. Табличный дизайн. Фреймовая структура.

Табличный дизайн. Создание таблицы. Работа с ячейками. Использование таблиц для оформления страниц. Вложенные таблицы.

Использование шаблонов. Определение, назначение. Создание. Изменяемые и неизменяемые области. Вложенные шаблоны. Недостатки шаблонов и их преодоление.

Фреймы. Фрейм и набор фреймов. Схемы наборов фреймов. Создание фреймов и их оптимизация. Решение проблем с фреймами.

Каскадные таблицы стилей. Свободно позиционируемые элементы.

Каскадные таблицы стилей. Определение, назначение. Переопределение стиля. Способы задания стилевых описаний. Спецификация CSS. Классы. Динамические эффекты с использованием CSS.

Свободно позиционируемые элементы. Определение, назначение. Создание свободно позиционируемых элементов, параметры. Недостатки и их преодоление.

Блоковая структура сайта

3.  Самостоятельная работа.

№ п/п	Наименование раздела дисциплины. Тема.	Форма самостоятельной работы	Форма контроля выполнения самостоятельной работы
1.	Этапы разработки web-сайта.	Расчетно-графическое задание (РГЗ).	Защита РГЗ
2.	Навигационная структура web-сайта Тема: «Удобство использования навигации».	Сравнительный анализ систем навигации нескольких web-сайтов	Письменный отчет
3.	Основные правила web-дизайна. Тема: «Как повысить юзабилити сайта».	Составление конспекта	Проверка конспекта
4.	Создание графических элементов для сайта: фирменный знак, фон, баннер, визуалы.	Самостоятельная работа в компьютерном классе	Проверка созданных файлов
6	Свободно позиционируемые элементы	С/Р в компьютерном классе	Проверка созданных файлов
7	Создание анимации	С/Р в компьютерном классе	Проверка созданных файлов
8	Курсовая работа по теме «Планирование и реализация web-сайта»	Работа над курсовым проектом.	Защита курсового проекта.

4. Методические рекомендации по организации изучения дисциплины.

Практическая работа №1 (2 часа)

Тема: Сжатие и оптимизация изображений для Web

Цель: приобрести навыки по оптимизации изображений для Web-страниц

План

Основные форматы web-графики Особенности оптимизации gif-формата. Особенности оптимизации jpeg-формата.

Основная литература: [9, 15, 24, 27, 33, 34, 40]

Дополнительная литература: [3, 4, 10, 28, 29, 56, 58]

Контрольные вопросы:

Что такое «оптимизация»? Как работает метод сжатия изобрпажений? Как и на каком этапе обработки изображений проводится преобразование неинтернетовских цветов и повышение резкости? Перечислите способы создания миниатюр для web-галерей. В результате чего образуются шумы в изображении и как сократить их уровень?

Практическая работа №2 (2 часа)

Тема: Создание дизайна сайта

Цель работы: научиться разрабатывать визуальный образ сайта.

Практическое задание: разработать дизайн сайта, используя программу Adobe PhotoShop

Основная литература: [9, 15, 24, 27, 33, 34, 40]

Дополнительная литература: [3, 4, 10, 28, 29, 56, 58]

Практическая работа №3 (2 часа)

Тема: Web-дизайн в PhotoShop

Цель работы: научиться разрабатывать визуальный образ сайта.

План

1.  Создание разметки

2.  Цвет при размещении изображений в Интернете

3.  Создание макета, основанного на таблицах

4.  Предварительный просмотр веб - графики

Основная литература: [9, 15, 24, 27, 33, 34, 40]

Дополнительная литература: [3, 4, 10, 28, 29, 56, 58]

Практическая работа №4 (6 часов)

Тема: Этапы разработки web-сайта

Цель работы: научиться планировать и формировать образ будущего сайта.

План

Выбор темы сайта. Планирование:

·  цель создания;

·  целевая аудитория;

·  обратная связь с посетителем;

·  обновление информации.

Основная литература: [1, 5, 13, 14, 32, 33, 36]

Дополнительная литература: [2, 17, 19, 50, 54, 62]

Практическая работа №5 (6 часов)

Тема: Язык разметки гипертекста HTML

Цель работы: научиться реализовывать сайт при помощи технологии HTML.

План

Структура документа HTML. Основные текстовые элементы страницы. Теги форматирования. Вставка графических элементов на web-страницу. Создание гиперссылок. Таблицы. Фреймы.

Основная литература: [1, 5, 6, 13, 14, 16, 23, 32, 33]

Дополнительная литература: [2, 17, 19, 50, 54, 62]

Практическая работа №6 (6 часов)

Тема: Каскадные таблицы стилей

Цель работы: научиться реализовывать сайт при помощи технологии CSS.

План

1.  Основные правила и свойства CSS

2.  Способы подключения каскадных таблиц стилей

3.  Свободно позиционируемые элементы и их применение для верстки сайта.

Основная литература: [1, 5, 6, 13, 14, 16, 23, 32, 33]

Дополнительная литература: [2, 17, 19, 50, 54, 62]

5. Учебно-методическое обеспечение дисциплины.

Основная литература

1.  «Как правильно организовать свой Web-сервер.», Мир Internet. – 1997г.

2.  «Мозайка и Всемирная паутина для доступа в INTERNET» изд. «МИР» «СК ПРЕСС» «МАЛИП» М. 1996г.

3.  «Экономичный Web-дизайн» - М.: «НТ ПРЕСС» 2005г.

4.  «Искусство Web-дизайна. Самоучитель» - СПб.: «Питер» 2002 г.

5.  Гончаров Я. Л. «ч-2. Создание собственных Web-страниц», М.: ГПНТБ 2001г.

6.  «HTML в примерах: Спецификация HTML 3.2. Примеры гипертекста. Обзор HTML-редакторов», СПб. И др.: Питер, 1997г.

7.  «Веб-редизайн: книга Келли Гото и Эмили Котлер», 2 изд. СПб.: Символ-Плюс 2007г.

8.  «Internet 2000». – СПб.: БХВ – Санкт – Петербург, 2000.

9.  «Web-графика, нужные программы». – СПб.: «БХВ-Петербург» 2006г.

10.  «Web-дизайн: типичные ляпы и как их избежать.» 2005г.

11.  «1000 лучших программ» энциклопедия, СПб.: «Питер» 2007г.

12.  «JavaScript». – СПб: «Питер», 2004. – 394 с.

13.  «Web-конструирование. HTML.» – СПб: БХВ Петербург, 2003г.

14.  «Создание Web-страниц: Искусство верстки», Минск издание» 2004г.

15.  «Web – графика», БХВ-Петербург 2006г.

16.  «Macromedia Dreamweaver 8.» BHV-СПб 2006г.

17.  , «Производительность web-служб. Анализ, оценка и планирование», СПб Софт ЮП» пер. с англ. «Dia Soft–2003г.

18.  «Техника Web-дизайна для студента». – СПб.: БХВ-Петербург 2005 г.

19.  и « Мой узел Web», пер. с англ. – М.; изд. Отдел «Русская Редакция» 1996г.

20.  «Web-дизайн по стандартам» НТ Пресс 2005г.

21.  «Свежие стили Web-дизайна» - М.: «ДМК пресс» 2005г.

22.  - "Веб-дизайн: книга Стива Круга или не заставляйте меня думать";-Пер. с англ.– СПб.: «Символ-Плюс» 2005г.

23.  «HTML и CSS в примерах. Создание web-страниц». – М.: «Альтекс–А», 2004г.

24.  Веб - дизайн. – СПб: «Симбо», 2004г..

25.  «Секреты Internet», изд. Ростов н/Д: «Феникс», 2000г.

26.  , Грошев самоучитель работы в Интернет», изд. 1997г.

27.  Лори Ульрих «Photoshop для Web-дизайна» изд. Кудиц - ОБРАЗ, М. 2002г.

28.  Мак-Клелланд «Уроки мастерства Adobe. Приглашение к дизайну» СПб.: Символ-Плюс 2002г.

29.  Мак «Дизайн страниц», Серия Before & After - Русская Редакция 2006г.

30.  Microsoft Corp. «Тестирование производительности Web-приложений (с CD-ROM)» Русская Редакция 2003г.

31.  Молли Хольцшлаг «250 советов HTML и WEB-дизайна» НТ Пресс 2006 г.

32.  Под. ред. «Создание Web-страниц и Web-сайтов» – М.; изд. «Триумф» 2006г.

33.  «Начала web-дизайна» – СПб: «БХВ-Петербург», 2003.г.

34.  «Web-дизайн: Photoshop & Dreamweaver. 3 ключевых этапа.» 2004г.

35.  Уотролл Этан «Dreamweaver MX 2004. Трюки» – СПб.: «Питер» 2006г.

36.  «Информационная архитектура. Чертежи для сайта.» 2004г.

37.  «Шрифты для печати и Web-дизайна» BHV - СПб., 2003 г.

38.  «Типографика: шрифт, верстка, дизайн» BHV-СПб 2004г.

39.  «Домашние странички internet» Ростов н/Д: Феникс, пер. с англ. 1998г.

40.  Шерри Хатсон «Photoshop для Web-дизайна» КУДИЦ-Образ 2006 г.

41.  Якоб Нильсен. «Веб - дизайн». - СПб: «Симбо», 2004г.

42.  Яцюк. О. Г. «Основы графического дизайна». – СПб: «БХВ-Петербург», 2004г.

Дополнительная литература

43.  Гончаров Я. Л. « ч-3. Интернет для науки, культуры и образования», М.: ГПНТБ 2001г.

44.  «Персональный компьютер: универсальный справочник пользователя», изд. издательский дом» - М.: 2000г.

45.  «Энциклопедия дизайна и графики на ПК» изд. издательский дом» 2004г.

46.  , «Информационные услуги для бизнеса». Санкт-Петербург, Элби –1998г.

47.  , , «Методика преподавания информатики» "Академия" 2003г.

48.  «Интерфейс: новые направления в проектировании компьютерных систем» СПб.: Символ-Плюс 2004г.

49.  Могилев . М.: изд. «Академия», 2001г.

50.  Монахов А. А. «Создаём школьный сайт в Интернете» уч. пособие 2 изд. М. БИНОМ, Лаборатория знаний 2006г.

51.  «Создай свой СУПЕР-САЙТ в Dreamweaver 8» BHV-СПб 2006г.

52.  «Ваш первый выход в Интернет», Пер. с нем - СПб.: ИКС 1996г.

53.  «Стандарты и протоколы Интернета», пер. с англ. М.: Рус. Ред. 1999г.

54.  «Горячая десятка ошибок Web-мастера.» Мир Internet. – 1997г.

55.  и - "Дизайн Web-страниц. Анализ удобства и простоты использования 50 узлов". Пер. с англ. : Уч. пос. - М. : Изд. дом. «Вильямс», 2002г.

56.  Web-дизайн. – СПб: «БХВ-Петербург», 2004г..

57.  , «Секреты успеха в электронном бизнесе» -- Пер. с англ. под ред. – СПб.: Питер, 2001г.

58.  Петров В. П. «Компьютерная графика». – СПб.: «Питер» 2003г.

59.  «Информатизация общества». - М.: 1990г.

60.  Шафрин технологии. М.: изд. ЛБЗ, 2001г.

Оценочные средства

Примерный перечень вопросов к зачету

Глобальная сеть, всемирная паутина. Что такое web-сайт, web-страница, web - сервер, гипертекстовый и гипермедиа-документ? Классификация web-сайтов. Этапы разработки web-сайта. Работы, выполняемые на этапе планирования и реализации web-сайта. Тестирование и публикация web-сайта. Рекламирование и сопровождение web-сайта. Навигационная схема сайта, базовые схемы навигации. Основные (стандартные) элементы web-страницы, их функциональное назначение. Основы web-дизайна (академический стиль, шрифт, цвет, контраст, графика, анимация). Язык разметки гипертекста (теги, атрибуты, конструкция HTML-документа). Основные теги форматирования текста. Вставка таблиц на web-странице. Размещение графики на web-странице. Построение гипертекстовых связей (внутренние и внешние гиперссылки). Формы. Технология CSS. Свободно позиционируемые элементы. Определение, назначение. Создание свободно позиционируемых элементов, параметры. Недостатки свободно позиционируемых элементов и их преодоление. Форматы web-графики, оптимизация.

Примерный перечень вопросов к экзамену

Глобальная сеть, всемирная паутина. Что такое web-сайт, web-страница, web - сервер, гипертекстовый и гипермедиа-документ? Классификация web-сайтов. Этапы разработки web-сайта. Работы, выполняемые на этапе планирования и реализации web-сайта. Тестирование и публикация web-сайта. Рекламирование и сопровождение web-сайта. Навигационная схема сайта, базовые схемы навигации. Основные (стандартные) элементы web-страницы, их функциональное назначение. Основы web-дизайна (академический стиль, шрифт, цвет, контраст, графика, анимация). Язык разметки гипертекста (теги, атрибуты, конструкция HTML-документа). Основные теги форматирования текста. Вставка таблиц на web-странице. Размещение графики на web-странице. Построение гипертекстовых связей (внутренние и внешние гиперссылки). Формы. Технология CSS. Назначение. Способы подключения каскадных таблиц стилей. Динамические эффекты в CSS. Форматы web-графики, оптимизация. Фреймы. Табличный дизайн. Дизайн на основе блоков. Свободно позиционируемые элементы. Определение, назначение. Создание свободно позиционируемых элементов, параметры. Недостатки свободно позиционируемых элементов и их преодоление. Анимация элементов web-страниц. Язык JavaScript. Объекты. Объектная модель документа. Интерактивные сайты. Серверное программирование.

Примерная тематика курсовых работ

1.  Планирование и реализация веб-сайта политического деятеля

2.  Разработка дизайна электронного магазина товаров и услуг

3.  Создание представительского веб-сайта дизайн-студии

4.  Разработка электронного веб-пособия на тему «Баннерная реклама»

5.  Разработка дизайнерского портфолио в виде веб-сайта

6.  Создание веб-сайта «Компьютерная анимация в рекламе и Интернет»

7.  Создание веб-сайта «Трехмерная компьютерная графика в рекламе»

8.  Web- дизайн и мультимедиа.

9.  Работа с цветом в web-графике

10.  Создание графики для Web-сайта.

11.  Создание и размещение баннеров в web

12.  Разработка и внедрение web-сайта дизайн - студии

13.  Проектирование и создание web-сайта образовательного учреждения

14.  Разработка web-сайта на тему «История рекламы в лицах»

15.  Проектирование и реализация web-сайта туристической фирмы.

16.  Проектирование и реализация web-сайта спортивного клуба.

17.  Проектирование и реализация web-сайта книжного магазина.

18.  Проектирование и реализация web-сайта модельного агентства.

19.  Проектирование и реализация web-сайта экологического общества.

20.  Проектирование и реализация электронного альманаха творческих работ студентов факультета технологии и дизайна.

21.  Создание электронного web-пособия на тему «Дизайн рекламы»

22.  Создание электронного web-пособия на тему «Компьютерный коллаж»

23.  Разработка web-сайта на тему «Интерактивный дизайн»

24.  Проектирование и реализация студенческого web-портала

25.  Создание электронного web-пособия на тему «Интерактивный дизайн»

26.  Разработка web-сайта на тему «Игровой дизайн»

27.  Разработка web-сайта на тему «Эфирный дизайн»

28.  Разработка web-сайта на тему «Книжный дизайн»

29.  Разработка web-сайта на тему «Журнальный дизайн»

30.  Разработка web-сайта на тему «Дизайн фирменного стиля»

Методические указания по изучению дисциплины (или ее разделов) и контрольные задания для студентов заочной формы обучения.

При изучении дисциплины «Web-графика и web-дизайн» особое внимание необходимо обратить на этапы разработки сайта, правила подготовки графических изображений на сайте и web-дизайна, а также изучению компьютерных программ, которые применяются для создания web-сайта. Большое значение при изучении дисциплины имеет практическая подготовка, изучение компьютерных технологий и формирование умений и навыков работы с ними.