Рекомендации по изучению курса

Федеральное агентство по образованию
Саратовский государственный социально-экономический университет
Информационно-образовательный центр
«Виртуальный филиал Русского музея»
МЕТОДИЧЕСКИЕ РЕКОМЕНДАЦИИ ПО ИЗУЧЕНИЮ
КУРСА «ОСНОВЫ WEB-ДИЗАЙНА»
Саратов,
2007
Составители:
Начальник отдела электронно-образовательных ресурсов
Информационно-образовательного центра
«Виртуальный филиал Русского музея» СГСЭУ
Мазурина Анна Маратовна
Методические рекомендации по изучению курса «Основы web-дизайна».
Учебно-методическое пособие для самостоятельной работы студентов/
Саратовский
государственный
социально-экономический
университет,
Информационно-образовательный центр «Виртуальный филиал Русского
музея». Саратов, 2007 - _7_ с.
© Саратовский
государственный
социальноэкономический
университет, 2007
© Информационно
образовательный центр
«Виртуальный филиал
Русского музея», 2007
Рабочая программа курса
Название курса
Основы web-дизайна.
Курс «Основы web-дизайна» курс посвящен базовым технологиям разработки
web-сайтов с использованием программ Adobe Photoshop и Macromedia
Dreamweaver.
Курс предполагает свободное ориентирование в графической среде
операционной системы Windows, желательно наличие опыта работы в любом
растровом графическом редакторе.
Автор курса
Мазурина Анна Маратовна, начальник отдела электронно-образовательных
ресурсов Информационно-образовательного центра «Виртуальный филиал
Русского музея» Саратовского государственного социально-экономического
университета.
Цели курса
Целью курса является изучение базовых технологий создания информационных
web-сайтов. Материал курса может служить информационной и
иллюстративной поддержкой традиционного учебного процесса и, в то же
время, может быть оформлен как самостоятельный дистанционный
коммерческий курс.
Основные цели курса:





Знакомство с теорией компьютерного дизайна и web-дизайна;
Формирование представлений об общей концепции создания
информационных web-сайтов;
Получение навыков разработки структуры и создания графического
оформления информационного web-сайта с использованием растрового
графического редактора Adobe Photoshop 8.0;
Освоение принципов гипертекстовой разметки на языке HTML;
Получение навыков создания web-сайта в среде визуального редактора
Macromedia Dreamweaver 8.0;
Успешное изучение учебного материала позволит:


разрабатывать структуру информационного web-сайта;
создавать графические шаблоны оформления web-страниц;
3


осуществлять подготовку графических иллюстраций к публикации в сети
Интернет;
создавать html-шаблоны оформления web-страниц сайта;
Иметь представление:



о этапах создания информационного web-сайта;
о принципах графического и web-дизайна;
о разработке структуры и шаблонов оформления web-сайта;
Владеть ключевыми понятиями:
Браузер, хостинг (размещение), структура сайта, навигация, цветовые системы
и схемы, шаблон оформления, html-шаблон, цветовое и графическое
разрешение и др.
Содержание курса
№
п/п
Наименование разделов,
дисциплин и тем
Введение
Р. 1 Основы теории компьютерного дизайна и web-дизайна
1.
Цвет
1.1 Цвет и его свойства. Как устроен цвет
1.2 Цветовые системы. Аддитивный цветовой синтез и цветовая
система RGB. Субтрактивный цветовой синтез и цветовая
система CMYK. Цветовая модель HSV
1.3 Цветовой круг. Главные цвета. Восприятие цвета
1.4 Сочетаемость цветов. Цветовые схемы оформления. Текст и фон
Пространственные отношения элементов. Размер. Пропорции.
2.
Размещение. Плотность
Форма. Прямые. Прямоугольники. Круги и закругления. Кривые
3.
Безье
Текстуры. Плоский цвет. Геометрические текстуры.
4.
Фотографические текстуры. Материальные текстуры
Шрифт и текст. Элементы шрифта. Шрифты и время
5.
Подбор шрифтов. Единство противоположностей.
6.
Декоративные шрифты. Параметры наборов. Кегль. Прописные и
строчные. Интервалы. Выравнивание и отступы
Фундаментальные принципы дизайна. Единство. Принцип
7.
минимизации. Академический стиль. Баланс. Карты плотности.
Центр масс системы. Правило рычага. Контраст. Динамика.
Ньюансировка
Р. 2 2. Создание информационного веб-сайта.
4
Общая концепция. Типы сайтов. Топология сайта.
Распределение материала. Главная страница. Формат страницы
Способы представления изображения в компьютере. Виды
2.
графики. Графический редактор. Формат графического файла.
Растровое представление графической информации. Пиксель.
Растр. Графическое разрешение изображения. Разрешающая
способность монитора. Цветовое разрешение. Цветовая палитра
Форматы графических файлов для web. Сжатие графических
3.
файлов. Формат растровой графики GIF и его характеристики.
Цветовая палитра формата GIF. Формат JPG и его
характеристики. Собственные форматы. Формат PSD и его
характеристики. Конвертирование графических форматов
4.
Жизненный цикл web-сайта
Хостинг (размещение сайта). Платный хостинг. Бесплатный
5.
хостинг
6.
Разработка структуры сайта
Основы Photoshop. Создание шапки сайта. Создание меню
7.
Р. 3 Основы языка HTML
Основные положения. Структура документа. Тэги тела
1.
документа
2.
Теги форматирования текста
3.
Списки
4.
Гипертекстовые ссылки
5.
Графика внутри HTML-документа
6.
Таблицы
Итоговое тестирование
Р. 4 Визуальный редактор Macromedia Dreamweaver 8
1.
Среда Macromedia Macromedia Dreamweaver
2.
Регистрация сайта в Macromedia Dreamweaver
3.
Настройка Macromedia Dreamweaver
4.
Создание сайта
1.
Практические задания
По мере освоения материалов курса, необходимо выполнить ряд
индивидуальных заданий. Всего в курсе предусмотрено 4 индивидуальных
задания, которые представляют поэтапное выполнение итоговой работы. Все
практические задания предполагают обязательную проверку преподавателем.
Необходимые для выполнения практических работ материалы прилагаются.
Итоговый контроль
В качестве промежуточного
контроля по изучаемому курсу
предусмотрено проведение тестирование по теоретическому материалу.
Итоговой практической работой по завершении курса является сайт, созданный
5
в процессе обучения, со структурой, оформлением и содержанием, не
повторяющим учебные материалы. Обязательным условием правильного
выполнения финальной работы является создание авторского сайта
(произвольной, определенной заранее тематики). Сайты учебного примера как
итоговые работы не рассматриваются.
После выполнения финальной работы ее необходимо разместить на
любом подходщем хостинге для проверки преподавателем.
Рекомендации по изучению курса
Курс посвящен теоретически и практическим основам web-дизайна на
примере создания сайта образовательного учреждения (школы).
Курс состоит из разделов:




Основы теории компьютерного дизайна и web-дизайна (теория)
Создание информационного web-сайта (теория, практическая работа)
Основы языка HTML (теория)
Визуальный редактор Macromedia Dreamweaver 8.0 (практическая
работа).
Возможности программы Adobe Photoshop представлены в структуре
конкретного практического примера по созданию шаблона графического
оформления, выполнение которого должно помочь формированию начальных
навыков работы в графическом редакторе.
Материал курса базируется на английской версии программы Adobe
Photoshop, рекомендуемая для изучения версия 8.0, и английской версии
Macromedia Dreamweaver (8.0).
Изучение теоретического материала
При изучении блока "Основы теории компьютерного дизайна и webдизайна" необходимо обратить особое внимание на разделы, посвященные
вопросам сочетаемости цветов и проблемам комфортности чтения текста
(подбор шрифтов и фона). Необходимо различать основные гарнитуры
шрифтов. Также необходимо различать цветовые системы, применяемые при
кодировании цветовой информации. Это поможет избежать распространенных
ошибок при создании шаблона оформления web-сайта.
Сайты, которые могут помочь:
 http://www.kirsanov.com/
 http://www.design.ru/kovodstvo/
 http://master.hop.ru/
6
При изучении блока "Создание информационного web-сайта»
необходимо обратить внимание на различия графических форматов,
применяемых в web-дизайне и способы оптимизации изображений.
Необходимо понимать действие алгоритмов сжатия графических изображений.
Также необходимо обратить внимание на характеристики растрового
изображения и уметь различать понятия графическое и цветовое разрешение.
Выполнение индивидуальных заданий
В рамках данного
индивидуальных заданий.
курса
предполагается
выполнение
четырех
a. Первое индивидуальное задание предполагает регистрацию хостинга,
например,
воспользовавшись
услугой
бесплатного
провайдера
http://narod.yandex.ru/. При этом необходимо создать тестовую страницу с
произвольным содержанием (например, страницу приветствия).
b. В рамках второго задания необходимо разработать схематичную структуру
сайта со всеми стандартными блоками: шапка, меню, навигация. Оформить
задание можно с помощью текстового редактора Microsoft Word.
Необходимо представить схему загрузочной страницы и страницы второго
уровня (если уровней вложенности больше – то представить все).
c. В третьем задании предлагается создать шаблон оформления в доступном
графическом редакторе (Рекомендуется Adobe Photoshop). При этом
необходимо выбрать свою цветовую схему оформления, подобрать
шрифты, фон и использовать имеющиеся в распоряжении автора
иллюстрации. Получившийся шаблон необходимо подготовить к
публикации в сети Интернет (сформировать набор картинок) и
предоставить преподавателю.
d. Результатом четвертого задания является сайт, размещенный в сети
Интернет.
Литература
1. Кирсанов Д. «Веб-дизайн», «Символ-Плюс», 2006. - 376 с.
2. Нильсен Я. «Веб-дизайн: книга Якоба Нильсена» - Пер. с англ. – СПб:
«Символ-Плюс», 2003 – 512 с.
3. Гончаров А. «Самоучитель HTML» - СПб.: Питер, 2002. – 240 с.
4. Дронов В.А. «Самоучитель Macromedia Dreamweaver 8» - СПб.: «БХВПетербург», 2006. – 320 с.
5. Мак-Клелланд, Дик. «Photoshop 7. Библия пользователя»: Пер. с англ. —
М.: Издательский дом "Вильямс", 2003. — 928 с.
6. Глушаков С. В., Кнабе А. Г. «Компьютерная графика» - Харьков:
«Фолио», 2002. – 500 с.
7. Adobe Photoshop 7.0. Официальный учебный курс. Учебное пособ. — М.:
Издательство ТРИУМФ, 2003 - 496 с.
7
8