230400 Web-дизайн

1.
Цели и задачи дисциплины
1.1. Цель, задачи дисциплины, ее место в подготовке бакалавра, специалиста (с учетом
требований ФГОС)
Рабочая программа по дисциплине «Wеб-дизайн» составлена в соответствии с
требованиями ФГОС ВПО по направлению 230400 «Информационные системы и
технологии» и относится к циклу профессиональных дисциплин (Б3).
Курс «Web-дизайн» относится к тем дисциплинам, которые закладывают основу
профессиональных знаний бакалавра по направлению «Информационные системы и
технологии» по разработке, настройке, поддержке и сопровождению web-сайтов.
Целями освоения дисциплины «Web-дизайн» являются:

овладение общей методикой дизайн-проектирования web-сайта;

овладение технологиями художественного оформления web-сайта;

овладение технологией создания статических web-сайтов;

овладение технологией размещения, поддержки и сопровождения web -сайта
на сервере.
1.2.
Требования к уровню усвоения дисциплины
Студент должен знать основные понятия информационных сетей, компьютерных сетей,
классификацию программного обеспечения, теоретические основы компьютерной графики.
Студент должен уметь планировать и настраивать структуру локальных сетей; проектировать и
разрабатывать Internet приложения с использованием современных программных средств и с
учетом предъявляемых требований, использовать термины предметной области в устной речи,
работать с наиболее распространенными видами интерфейсов, работать с современными пакетами
растровой и векторной графики, понимать и правильно использовать в своей профессиональной
деятельности современную компьютерную терминологию, подготавливать изображения для webстраниц.
Студент должен иметь представление о базовых компонентах и технологиях глобальных и
локальных сетей; базовых технологиях проектирования и разработки Internet приложений,
приемами работы в среде программирования (составление, отладка и тестирование программ;
разработка и использование интерфейсных объектов), сутью и секретами всех разделов
компьютерной графики, чтобы грамотно применять их при подготовке графических изображений
интерфейсов информационных систем.
У студента должны быть сформированы следующие общекультурные компетенции (ОК) и
профессиональные компетенции (ПК):

способность использовать технологии разработки объектов профессиональной
деятельности, в областях: машиностроение, приборостроение, наука, техника, образование,
медицина, административное управление, юриспруденция, бизнес, предпринимательство,
коммерция, менеджмент, банковские системы, безопасность информационных систем,
управление технологическими процессами, механика, техническая физика, энергетика,
ядерная энергетика, силовая электроника, металлургия, строительство, транспорт,
железнодорожный транспорт, связь, телекоммуникации, управление инфокоммуникациями,
почтовая связь, химическая промышленность, сельское хозяйство, текстильная и легкая
промышленность, пищевая промышленность, медицинские и биотехнологии, горное дело,
обеспечение безопасности подземных предприятий и производств, геология, нефтегазовая
отрасль, геодезия и картография, геоинформационные системы, лесной комплекс, химиколесной комплекс, экология, сфера сервиса, системы массовой информации, дизайн,
медиаиндустрия, а также предприятия различного профиля и все виды деятельности в
условиях экономики информационного общества (ПК-18);

способность к инсталляции, отладке программных и настройке технических
средства для ввода информационных систем в опытную эксплуатацию (ПК-29).
По окончании изучения курса студент должен:
Знать:

методы проектирования web-сайта как статичной информационной системы;

принципы построения композиции web-сайта;

принципы цветового оформления web-сайта, психологию цвета, психологию
восприятия изображений;

теорию использования графики на web-страницах;

методы обработки и редактирования цифровых изображений;

программные средства стороны клиента, используемые для создания webстраниц;

программные средства, используемые для размещения и сопровождения webстраниц;

методы оптимизации web-сайта для продвижения в сети Интернет.
Уметь:

использовать графические программы для создания чертежей информационной
архитектуры web-сайта;

использовать графические редакторы для обработки изображений,
размещаемых на web-сайте;

использовать графические редакторы для создания дизайна страниц web-сайта;

использовать WYSIWYG-редакторы для создания web-страниц.
Владеть / быть в состоянии продемонстрировать:

общей методикой дизайн-проектирования web-сайта;

технологией проектирования структуры web-сайта как информационной
системы;

технологиями разработки и художественного оформления web-сайта;

технологией оптимизации изображений для размещения на web-сайте;

технологией создания web-сайта средствами программирования на стороне
клиента;

технологией оптимизации web-сайта для продвижения в сети Инттернет;

технологией размещения web-сайта на сервере;

технологией поддержки и сопровождения web-сайтов.
1.3.
Связь с другими дисциплинами Учебного плана
Перечень действующих и предшествующих
Перечень последующих дисциплин, видов
дисциплин
работ
Информатика и программирование. Основы
Интернет-программирование.
алгоритмизации и программирования.
Проектирование ИС. Управление
Вычислительные системы, сети и
информационными ресурсами.
телекоммуникации. Теория систем и
Создание web-представительства.
системный анализ. Разработка
программных приложений. Теория
информационных процессов и систем.
Операционные системы. Информационные
системы и технологии. Базы данных.
Объектно-ориентированный анализ и
программирование. Компьютерная графика.
Инструментальные средства визуальной
коммуникации и прикладной дизайн.
2.
Организация и структура
многоуровневых ИС. Управление
проектами ИС. Разработка
электронного портала. Языковые
средства создания гипердокументов.
Перспективные вычислительные
технологии. Проектирование систем
электронных коммуникаций. Курсовые
и дипломные проекты: разработка
профессионального web-интерфейса.
Содержание дисциплины, способы и методы учебной деятельности преподавателя
Методы обучения – система последовательных, взаимосвязанных действий, обеспечивающих усвоение содержания
образования, развитие способностей студентов, овладение ими средствами самообразования и самообучения;
обеспечивают цель обучения, способ усвоения и характер взаимодействия преподавателя и студента; направлены на
приобретение знаний, формирование умений, навыков, их закрепление и контроль.
Монологический (изложение теоретического материала в форме монолога)
М
Показательный (изложение материала с приемами показа)
П
Диалогический (изложение материала в форме беседы с вопросами и ответами)
Д
Эвристический (частично поисковый) (под руководством преподавателя студенты Э
рассуждают, решают возникающие вопросы, анализируют, обобщают, делают
выводы и решают поставленную задачу)
Проблемное изложение (преподаватель ставит проблему и раскрывает доказательно ПБ
пути ее решения)
Исследовательский (студенты самостоятельно добывают знания в процессе И
разрешения проблемы, сравнивая различные варианты ее решения)
Программированный (организация аудиторной и самостоятельной работы ПГ
студентов осуществляется в индивидуальном темпе и под контролем специальных
технических средств)
Другой метод, используемый преподавателем (формируется самостоятельно), при
этом в п.п. 2.1.-2.4. дается его наименование, необходимые пояснения
Приведенные в таблице сокращения обозначения педагогических методов используются составителем Рабочей
программы для заполнения п.п. 2.1., 2.2. и 2.3. в столбце «Методы».
4
6
1
Очная форма обучения
Лекции
Модуль 1 «Основные понятия Web-дизайна»
Тема «Web-дизайн: структура и содержание»:
Отличительные
особенности
Интернет.
Структура
Интернет. Передача информации в Интернет: цифровой
адрес, доменная адресация. Информационные ресурсы
Интернет. Информационная сеть WWW. Структура и
содержание web-дизайна. Классификация web-сайтов.
Реализуемые
компетенции
1-2
30
Вид занятия, модуль, тема и краткое содержание
Методы
1-12
в том числе в
интерактивной
форме, час.
Аудиторные занятия (лекции, лабораторные, практические, семинарские) – очная форма
обучения
Кол. час
Неделя
2.1.
П,Д,
Э
П,Д,
Э
ПК-18,
ПК-29
ПК-18,
ПК-29
3-4
4
1
5-6
4
1
7-8
4
1
9-10
6
1
11-12
8
1
13-16
24
3
13
6
1
Классификация технологий для создания web-сайтов.
Информационная архитектура web-сайта: логическая и
физическая
структуры,
статичная
и
динамичнеа
информационные
системы.
Глобальная
навигация.
Браузеры. (л.р.1)
Тема «Дизайн web-сайта. Теория композиции»
Художественные
средства
композиции.
Понятие
формальной композиции. Виды композиций: статичная и
динамичная. Графика: точка, линия, пятно. Пластика:
линейно-пластическая
форма,
плоскостная
форма
(текстура, фактура, рельеф). Средства гармонизации
художественной
формы:
нюанс-контраст,
статикадинамика, симметрия-ассиметрия, метр-ритм, отношенияпропорции, размер-масштаб. Блочная композия web-сайта.
Анализ композиции шаблонов web-сайтов. Применение
средств композиции и гармонизации художественной
формы в композиции web-сайта. (л.р.2)
Тема «Дизайн web-сайта. Теория цвета»
Основные понятия цветоведения (колористики). Цветовой
круг. Цветовые модели. Хроматические и ахроматические
цвета. Цветовой тон, светлота, насыщенность, теплые и
холодные цвета, контрастные и родственные цвета.
Эмоциональное воздействие цвета. Цвет в web. Цветовые
стили дизайна web-сайта. Выбор цветовой гаммы web-сайта
в зависимости от назначения и тематики сайта. (л.р.3)
Тема «Компьютерная графика и web-дизайн: Adobe
Photoshop»
Особенности оптимизации изображений для web.
Безопасная цветовая палитра. Алгоритмы сжатия JPEG и
GIF. Создание шаблона web-сайта и основных графических
элементов web-страниц в редакторе Adobe Photoshop.
Сохранение изображения для web. Форматы хранения
графических изображений для web. (л.р.4)
Тема «Компьютерная графика и web-дизайн: CorelDRAW»
Возможности CorelDRAW для создания основных
графических элементов web-страниц. Экспорт векторных
форматов в растровые. (л.р.5)
Тема «Мультимедиа в web-дизайне"
Роль анимации в web-дизайне. Понятие подключаемого
программного модуля. Понятие динамического HTML
(DHTML). Обзор программного обеспечения для создания
анимации. Возможности работы с Adobe Flash.
Стандартные размеры баннеров. Принципы создания
анимации. Включение в web-сайт flash-анимации.
Вопросы совместимости видео в web.
Рекомендации по использованию звука в Internet. Форматы
звуковых файлов для web. Включение звука в webстраницу. Встраивание видео на web-страницу. (л.р.6-7)
Модуль 2 «Технологии создания и продвижения Webсайта»
Тема «Технологии создания web-сайта. Статические
технологии»
Создание сайта в WYSIWYG-редакторе: работа с webстраницами. Вставка текста и графических изображений,
создание гиперссылок. Табличный дизайн. Использование
шаблонов. Анимация элементов web-страниц. Работа с
формами. Создание сайта с помощью языка разметки
HTML и Dreamweaver.
Создание сайта в CMS Joomla: Установка Joomla на
локальный сервер. Создание меню, разделов, категорий,
материалов.
Установка
дополнительных
шаблонов,
П,Д,
Э
ПК-18,
ПК-29
П,Д,
Э
ПК-18,
ПК-29
П,Д,
Э
ПК-18,
ПК-29
П,Д,
Э
ПК-18,
ПК-29
П,Д,
Э
ПК-18,
ПК-29
П,
Д,Э,
ПБ
П,
Д,Э,
ПБ
ПК-18,
ПК-29
ПК-18,
ПК-29
14
4
1
15
8
16
6
1
1-10
30
3
1
4
1
2
4
1
компонентов. Заполнение страниц информацией.
Понятия PHP, Java-script, MySQL, WML-сайт.
технология "Ajax" (л.р.8-13)
Тема «Юзабилити web-сайта»
Организация навигации с точки зрения удобства
пользователя. Организация визуальной иерархии и
текстовой информации на web-сайте. Тестирование сайта
на определение хорошей веб-навигации. Анализ
«правильной» и «неправильной» web-навигации. (л.р.14)
Тема «Продвижение web-сайта в сети Интернет»
Технология размещения на платном хостинге. Бесплатные
хостинги для размещения сайтов. Преимущества и
недостатки размещения web-сайта на бесплатном хостинге.
Оптимизация содержания сайта. Понятие семантического
ядра сайта. Принципы подбора ключевых слов, подготовка
web-документа для индексирования поисковыми роботами.
Понятие релевантности web-документа.
Понятие Индекса Цитирования Яндекса и PageRank. Файл
robots.txt, его назначение, правила записи.
Технология регистрации сайтов в поисковых системах и
установки баннеров поисковых систем на web-сайт.
Технология регистрация сайта в системах статистики и
установки баннеров систем статистики на web-сайт. (л.р.15)
Тема «Рекламный дизайн»
Общие понятия о рекламном дизайне. История и теория
рекламной деятельности. Копирайт. Креатив и проблемы
визуализации. Графический дизайн и его место в рекламе.
Фокус – группа.
Оценка и прогнозирование работы
дизайнера.
Лабораторные занятия
Модуль 1 «Основные понятия Web-дизайна»
Лабораторная работа 1. Основные Интернет-технологии и
инструментальные средства Web-дизайна. Практическое
введение в HTML. Обзор основных Интернет-технологий,
которые используются в современном Web-дизайне.
Назначение и структуру языка HTML, которые
используется в настоящее время для создания большинства
Web-страниц и Web-сайтов. Знакомство с Web-редактором
Macromedia Dreamweaver MX2004 и CMS Joomla.
Лабораторная работа 2 . Базовый HTML. Создать не менее
6 статических HTML-страниц, в которых будет представлен
список товаров (не менее 10 видов) в соответствии с
вариантом задания. Задания по страницам:

Общая структура страниц должна состоять из двух
фреймов. В одном фрейме будет меню. В другом должна
выводиться соответствующая информация.

Титульная страница должна содержать в верхней
части графическое меню, в нижней должны выводиться
разделы товара.

Необходима страница, содержащая информацию о
фирме и ее реквизитах.

Необходима страница, содержащая данные о
товаре, у которого возможен просмотр.

Страницы
должны
содержать
графические
изображения выбранных товаров, различные виды списков,
таблицы и листы стилей для оформления.
Варианты заданий:
1. Компьютерный магазин.
2. Магазин "Одежда".
3. Нефтяная компания.
4. Автотранспортное предприятие.
П,
Д,Э,
ПБ
ПК-18,
ПК-29
П,
Д,Э,
ПБ
ПК-18,
ПК-29
П,
Д,Э,
ПБ
ПК-18,
ПК-29
ПГ
ПК-18,
ПК-29
ПК-18,
ПК-29
ПГ
ПГ
ПК-18,
ПК-29
3
2
4
2
5
2
6
2
7
2
8
4
9
4
10
6
1
5. Студия WEB-дизайна.
6. Строительная компания.
7. Магазин "Продукты".
8. Косметический салон.
9. Фитнесс-клуб.
10.
Туристическая компания.
11.
Аптека.
12.
Авторемонтное предприятие.
Лабораторная
работа
3.
Подготовка
текстовой
информации. Гиперссылки.
Одним из самых важных этапов создания сайта является
подготовка текстов. В Web-дизайне различают логическое
и физическое форматирование. Hазличные приемы
форматирования текста в программе Dreamweaver.
Лабораторная работа 4. Web-графика: оптимизация,
создание интерактивных кнопок, Gif-анимация. Приемы
подготовки графических изображений для Web-страниц:
- оптимизировать графику так, чтобы при сохранении
приемлемого качества, размер графического файла был
минимальным;
- создавать кнопки меню, которые меняют свой вид при
наведении
на
них
указателя
мыши;
- создавать GIF-анимацию средствами Adobe ImageReady
CS.
- разрабатывать макет страницы и проводить его нарезку.
В лабораторной работе используются графические
редакторы как Adobe Photoshop, Adobe Image Ready и
Macromedia Fireworks.
Лабораторная работа 5. Таблицы в Web-дизайне.
Шаблоны. Для размещения элементов на странице
используются таблицы. Структура таблицы на языке HTML
и приемы форматирования таблицы в программе
Dreamweaver. Разработка табличной структуры страницы и
сборке нарезанного в Photoshop макета страницы.
Лабораторная работа 6. Создание информационной
структуры в системе управления контентом «Joomla!» на
примере веб-сайта.
Лабораторная работа 7. Технология CSS. Использование
каскадных
таблиц
стилей
(CSS)
отличает
профессиональный сайт от любительского. CSS – это
основное средство «украшения» Web-страниц. Создание и
применение стилей для различных элементов на странице,
изменение цвет полосы прокрутки, создание различные
типы рамок вокруг элементов.
Лабораторная
работа
8.
Технология
фреймов.
Публикация, регистрация и поддержка сайта. Технология
фреймов применяется тогда необходимо зафиксировать на
странице некоторые элементы (кнопки, шапку и т.п.), а
основной текст страницы имел собственную полосу
прокрутки. Рассмотрим как опубликовать сайт в сети
Интернет, проводить его поддержку и раскрутку.
Лабораторная работа 9. Интерактивные эффекты на Webстраницах (часть 1). Java-апплет. Приемы «оживления»
страницы. Создание фотогалереи (когда при щелчке на
фотографии, увеличенная ее копия открывается в
отдельном окне), изменение текста в строке состояния
браузера и использование на своих страницах Java-апплеты.
Лабораторная работа 10. Интерактивные эффекты на
Web-страницах
(часть
2).
Java-script.
Создание
выпадающего меню. Для создания интерактивных
эффектов на Web-страницах используется язык Javascript.
Программирование.
Приспособление
уже
готового
ПГ
ПК-18,
ПК-29
ПГ
ПК-18,
ПК-29
ПГ
ПК-18,
ПК-29
ПГ
ПК-18,
ПК-29
ПГ
ПК-18,
ПК-29
ПГ
ПК-18,
ПК-29
ПГ
ПК-18,
ПК-29
ПГ
ПК-18,
ПК-29
Javascript-код к своим страницам. Реализация выпадающее
меню, не написав при этом ни строчки кода.
Модуль 2 «Технологии создания и продвижения Webсайта»
Лабораторная работа 11. Серверные технологии. Формы.
Отправка формы на e-mail. PHP. SSI. На Web-страницах для
обеспечения обратной связи с посетителями используется
специальные элементы – HTML-формы. Написание
скрипта, с помощью проводиться опрос посетителей сайта.
Создание ленты новостей.
ПГ
ПК-18,
ПК-29
ПК-18,
ПК-29
11-16
24
6
11
2
1
12
2
1
Лабораторная работа 12. Технология Flash. Создание
анимированного меню для Web-страниц. Технология Flash
применяется для создания как отдельных элементов Webстраниц, так и целых сайтов. Создание анимационной
навигационной панели для сайта.
ПГ
ПК-18,
ПК-29
13
4
1
Лабораторная работа 13. Игра на JavaScript для двух
игроков.
Общие требования:

Подсчет очков и вывод их по завершению игры.

Ведение
таблицы
победителей
Cookie.
Отображение таблицы и просмотр результатов.

Подсчет времени игры.

Изменение различных настроек игры.

Изменение уровней сложности.

Все варианты игр не включают в себя написание
интеллектуального программного кода. Если игра для двух
игроков, то предполагается, что будут играть два человека,
а не человек с компьютером.
Варианты заданий:
1.
Тетрис.
2.
Lines.
3.
Пятнашки.
4.
Крестики-нолики.
5.
Червяк и яблоки. По игровому полю ползает
червяк, который при съедании яблока увеличивается в
размерах. Сложность игры определяется количеством
препятствий и разными объектами поедания.
6.
Ралли. Внизу игрового поля влево, вправо
двигается машина, а на нее надвигается дорога с
препятствиями.
7.
Охота (на попадание мышкой по мишеням). В
пределах игрового поля в разных местах появляется
мишень, а игрок должен по ней попасть курсором.
Сложность определяется
скоростью появления
и
количеством мишеней.
8.
Однорукий бандит.
9.
Виселица. Должна быть введена база начальных
слов. При неудачном угадывании строится виселица.
10.
Galaxian. По экрану двигается группа объектов,
они перемещаются влево, вправо и вниз. Внизу игрового
поля двигается пушка, выстрелами которой нужно сбить
все объекты. Сложность определяется скоростью
перемещения и приближения объектов.
11.
Поле чудес. Должна быть заполнена база вопросов
и ответов.
12.
Морской бой.
13.
Балда. Необходима начальная база слов. При
введении слова, которое отсутствует в базе, должен
задаваться запрос о разрешении добавить его в базу.
14.
Минер. Левой кнопкой мыши открываем клетку.
ПГ
ПК-18,
ПК-29
ПГ
14
2
15
2
16
2
17
2
18
2
19
2
1
1
1
Правой - помечаем мину.
15.
Тетрис с шариками. В стакан падают группы из
трех шариков одного цвета.
16.
Packman. Герой двигается и поедает точки. Ему
должны мешать препятствия и другие герои.
17.
Уголки.
18.
Пасьянс.
19.
TOPPLER. Отправлять кружки с пивом по 28(сложность) стойкам, по которым приближаются
жаждущие (скорость движения и количество нарастает).
20.
FILLER. Начальное квадратное поле заполнено
разноцветными квадратиками. Поочередно два(четыре)
игрока
выбирают
цвет.
Все
примыкающие
к
соответствующему углу квадратики прошлого цвета
становятся выбранного. Побеждает тот, кто захватил поле
больше других.
21.
Морской бой.
22.
Rally.
Лабораторная работа 14. Работа с PHP. Создать базу
товаров и услуг на MySQL. Сделать возможным изменение
и добавление товара, изменение характеристик, описания и
цены товара. База должна быть наполнена информацией. Не
менее 5 примеров. Сделать сортировку данных по
выбранному полю без перезагрузки страницы, используя
технологию "Ajax". Сделать поиск данных по заданной
подстроке. Добавить в меню пункт настройки отображения
страницы (цвет заголовков и документа).
Лабораторная работа 15. WML-сайт. Тематика WMLсайта соответствует вашему заданию. Сайт состоит из трех
страниц. Первая описание возможностей и переход на две
другие. На второй организовать ввод запроса и отправку на
обработку. Реализовывать обработку не нужно. На третьей
организовать контактную информацию.
Лабораторная работа 16. Редактор растровой графики
Adobe Photoshop: инструменты выделения и рисования,
фильтры, трюки и спецэффекты. Базовые операции при
редактировании
изображений.
Текстовые
эффекты.
Создание текстур. Эффекты имитации. Создание рамок.
Имитация объёма. Школа высшего мастерства.
Лабораторная работа 17. Редактор векторной графики
Corel Draw: инструменты выделения и рисования, докеры,
трансформация объектов. Инструменты выделения и
рисования. Докер «Форма». Докер «Трансформация».
Создание рисунков». Трансформация контуров. Ребусы.
Создание сложных рисунков. Заливка текстурой.
Использование текста. Создание сложных эффектов.
Экспорт изображений.
ПГ
ПК-18,
ПК-29
ПГ
ПК-18,
ПК-29
ПГ
ПК-18,
ПК-29
ПГ
ПК-18,
ПК-29
Лабораторная работа 18. Основы работы с Macromedia
Flash MX. Базовые операции при редактировании
изображений. Покадровая анимация. Анимация движения.
Совмещение покадровой и автоматической анимации.
Автоматическая анимация трансформации объекта.
Создание фона. Направляющие. Маскирование слоев.
Создание и редактирование символа. Создание кнопок.
Создание клипов. Управление воспроизведением фильма.
Переход по заданному URL. Загрузка дополнительных
фильмов. Создание сценария для кадра. Создание сценария
для клипа. Игра «Морской бой.
ПГ
ПК-18,
ПК-29
Лабораторная работа 19. SEO-оптимизация.
ПГ
ПК-18,
ПК-29
Методы
Реализуемые
компетенции
в том числе в
интерактивной
форме, час.
Тема «Web-дизайн: структура и содержание»:
Отличительные особенности Интернет. Структура Интернет.
Передача информации в Интернет: цифровой адрес, доменная
адресация. Информационные ресурсы Интернет. Информационная
сеть WWW. Структура и содержание web-дизайна. Классификация
web-сайтов. Классификация технологий для создания web-сайтов.
Информационная архитектура web-сайта: логическая и физическая
структуры, статичная и динамичнеа информационные системы.
Глобальная навигация. Браузеры.
Тема «Дизайн web-сайта. Теория композиции»
Художественные средства композиции. Понятие формальной
композиции. Виды композиций: статичная и динамичная. Графика:
точка, линия, пятно. Пластика: линейно-пластическая форма,
плоскостная форма (текстура, фактура, рельеф). Средства
гармонизации художественной формы: нюанс-контраст, статикадинамика, симметрия-ассиметрия, метр-ритм, отношения-пропорции,
размер-масштаб. Блочная композия web-сайта. Анализ композиции
шаблонов web-сайтов. Применение средств композиции и
гармонизации художественной формы в композиции web-сайта.
Тема «Дизайн web-сайта. Теория цвета»
Основные понятия цветоведения (колористики). Цветовой круг.
Цветовые модели. Хроматические и ахроматические цвета. Цветовой
тон, светлота, насыщенность, теплые и холодные цвета, контрастные
и родственные цвета. Эмоциональное воздействие цвета. Цвет в web.
Цветовые стили дизайна web-сайта. Выбор цветовой гаммы webсайта в зависимости от назначения и тематики сайта.
Лабораторные занятия
П,
Д,Э
ПК-18,
ПК-29
П,
Д,
Э,
ПБ
ПК-18,
ПК-29
2
Лабораторная работа 1. Редактор векторной графики Corel Draw:
инструменты выделения и рисования, докеры, трансформация
объектов. Инструменты выделения и рисования. Докер «Форма».
Докер «Трансформация». Создание рисунков». Трансформация
контуров. Ребусы. Создание сложных рисунков. Заливка текстурой.
Использование текста. Создание сложных эффектов. Экспорт
изображений.
ПГ
ПК-18,
ПК-29
2
Лабораторная работа 2. Основы работы с Macromedia Flash MX.
Базовые операции при редактировании изображений. Покадровая
анимация. Анимация движения. Совмещение покадровой и
автоматической анимации. Автоматическая анимация трансформации
объекта. Создание фона. Направляющие. Маскирование слоев.
Создание и редактирование символа. Создание кнопок. Создание
клипов. Управление воспроизведением фильма. Переход по
заданному URL. Загрузка дополнительных фильмов. Создание
сценария для кадра. Создание сценария для клипа. Игра «Морской
бой.
ПГ
ПК-18,
ПК-29
4
Лабораторная работа 3. Редактор растровой графики Adobe
Photoshop: инструменты выделения и рисования, фильтры, трюки и
спецэффекты. Базовые операции при редактировании изображений.
ПГ
ПК-18,
ПК-29
Кол. час
Неделя
Аудиторные занятия (лекции, лабораторные, практические, семинарские) - заочная форма
обучения, срок подготовки 5 лет
Вид занятия, тема и краткое содержание
Лекционные занятия
4
4
Текстовые эффекты. Создание текстур. Эффекты имитации. Создание
рамок. Имитация объёма. Школа высшего мастерства.
Методы
Реализуемые
компетенции
в том числе в
интерактивной
форме, час.
Тема «Web-дизайн: структура и содержание»:
Отличительные особенности Интернет. Структура Интернет.
Передача информации в Интернет: цифровой адрес, доменная
адресация. Информационные ресурсы Интернет. Информационная
сеть WWW. Структура и содержание web-дизайна. Классификация
web-сайтов. Классификация технологий для создания web-сайтов.
Информационная архитектура web-сайта: логическая и физическая
структуры, статичная и динамичнеа информационные системы.
Глобальная навигация. Браузеры.
Тема «Дизайн web-сайта. Теория композиции»
Художественные средства композиции. Понятие формальной
композиции. Виды композиций: статичная и динамичная. Графика:
точка, линия, пятно. Пластика: линейно-пластическая форма,
плоскостная форма (текстура, фактура, рельеф). Средства
гармонизации художественной формы: нюанс-контраст, статикадинамика, симметрия-ассиметрия, метр-ритм, отношения-пропорции,
размер-масштаб. Блочная композия web-сайта. Анализ композиции
шаблонов web-сайтов. Применение средств композиции и
гармонизации художественной формы в композиции web-сайта.
Тема «Дизайн web-сайта. Теория цвета»
Основные понятия цветоведения (колористики). Цветовой круг.
Цветовые модели. Хроматические и ахроматические цвета. Цветовой
тон, светлота, насыщенность, теплые и холодные цвета, контрастные
и родственные цвета. Эмоциональное воздействие цвета. Цвет в web.
Цветовые стили дизайна web-сайта. Выбор цветовой гаммы webсайта в зависимости от назначения и тематики сайта.
Лабораторные занятия
П,
Д,Э
ПК-18,
ПК-29
П,
Д,
Э,
ПБ
ПК-18,
ПК-29
2
Лабораторная работа 1. Редактор векторной графики Corel Draw:
инструменты выделения и рисования, докеры, трансформация
объектов. Инструменты выделения и рисования. Докер «Форма».
Докер «Трансформация». Создание рисунков». Трансформация
контуров. Ребусы. Создание сложных рисунков. Заливка текстурой.
Использование текста. Создание сложных эффектов. Экспорт
изображений.
ПГ
ПК-18,
ПК-29
2
Лабораторная работа 2. Основы работы с Macromedia Flash MX.
Базовые операции при редактировании изображений. Покадровая
анимация. Анимация движения. Совмещение покадровой и
автоматической анимации. Автоматическая анимация трансформации
объекта. Создание фона. Направляющие. Маскирование слоев.
Создание и редактирование символа. Создание кнопок. Создание
клипов. Управление воспроизведением фильма. Переход по
заданному URL. Загрузка дополнительных фильмов. Создание
сценария для кадра. Создание сценария для клипа. Игра «Морской
бой.
ПГ
ПК-18,
ПК-29
Кол. час
Неделя
Аудиторные занятия (лекции, лабораторные, практические, семинарские) - заочная форма
обучения, срок подготовки 3 года 6 месяцев
Вид занятия, тема и краткое содержание
Лекционные занятия
2
2
Лабораторная работа 3. Редактор растровой графики Adobe
Photoshop: инструменты выделения и рисования, фильтры, трюки и
спецэффекты. Базовые операции при редактировании изображений.
Текстовые эффекты. Создание текстур. Эффекты имитации. Создание
рамок. Имитация объёма. Школа высшего мастерства.
2
ПГ
ПК-18,
ПК-29
Методы
Реализуемые
компетенции
в том числе в
интерактивной
форме, час.
Тема «Web-дизайн: структура и содержание»:
Отличительные особенности Интернет. Структура Интернет.
Передача информации в Интернет: цифровой адрес, доменная
адресация. Информационные ресурсы Интернет. Информационная
сеть WWW. Структура и содержание web-дизайна. Классификация
web-сайтов. Классификация технологий для создания web-сайтов.
Информационная архитектура web-сайта: логическая и физическая
структуры, статичная и динамичнеа информационные системы.
Глобальная навигация. Браузеры.
Тема «Дизайн web-сайта. Теория композиции»
Художественные средства композиции. Понятие формальной
композиции. Виды композиций: статичная и динамичная. Графика:
точка, линия, пятно. Пластика: линейно-пластическая форма,
плоскостная форма (текстура, фактура, рельеф). Средства
гармонизации художественной формы: нюанс-контраст, статикадинамика, симметрия-ассиметрия, метр-ритм, отношения-пропорции,
размер-масштаб. Блочная композия web-сайта. Анализ композиции
шаблонов web-сайтов. Применение средств композиции и
гармонизации художественной формы в композиции web-сайта.
Тема «Дизайн web-сайта. Теория цвета»
Основные понятия цветоведения (колористики). Цветовой круг.
Цветовые модели. Хроматические и ахроматические цвета. Цветовой
тон, светлота, насыщенность, теплые и холодные цвета, контрастные
и родственные цвета. Эмоциональное воздействие цвета. Цвет в web.
Цветовые стили дизайна web-сайта. Выбор цветовой гаммы webсайта в зависимости от назначения и тематики сайта.
Лабораторные занятия
П,
Д,Э
ПК-18,
ПК-29
П,
Д,
Э,
ПБ
ПК-18,
ПК-29
2
Лабораторная работа 1. Редактор векторной графики Corel Draw:
инструменты выделения и рисования, докеры, трансформация
объектов. Инструменты выделения и рисования. Докер «Форма».
Докер «Трансформация». Создание рисунков». Трансформация
контуров. Ребусы. Создание сложных рисунков. Заливка текстурой.
Использование текста. Создание сложных эффектов. Экспорт
изображений.
ПГ
ПК-18,
ПК-29
2
Лабораторная работа 2. Основы работы с Macromedia Flash MX.
Базовые операции при редактировании изображений. Покадровая
анимация. Анимация движения. Совмещение покадровой и
автоматической анимации. Автоматическая анимация трансформации
объекта. Создание фона. Направляющие. Маскирование слоев.
Создание и редактирование символа. Создание кнопок. Создание
клипов. Управление воспроизведением фильма. Переход по
заданному URL. Загрузка дополнительных фильмов. Создание
ПГ
ПК-18,
ПК-29
Кол. час
Неделя
Аудиторные занятия (лекции, лабораторные, практические, семинарские) - заочная форма
обучения, срок подготовки 2 года 6 месяцев
Вид занятия, тема и краткое содержание
Лекционные занятия
2
2
сценария для кадра. Создание сценария для клипа. Игра «Морской
бой.
Лабораторная работа 3. Редактор растровой графики Adobe
Photoshop: инструменты выделения и рисования, фильтры, трюки и
спецэффекты. Базовые операции при редактировании изображений.
Текстовые эффекты. Создание текстур. Эффекты имитации. Создание
рамок. Имитация объёма. Школа высшего мастерства.
2
Самостоятельная работа студента – очная форма обучения
Кол. час
Темы, разделы, вынесенные на самостоятельную подготовку, вопросы к
практическим и лабораторным занятиям; тематика рефератной работы, контрольных
работ, рекомендации по использованию литературы и ЭВМ и др.
Неделя
ПК-18,
ПК-29
Реализуемые
компетенции
2.2.
ПГ
Самостоятельное изучение отдельных тем курса:
Самостоятельная работа в направлении визуальной структуры рекламных
сообщений, по видам художественных шаблонов, а так же по способам управления
поведением зрителя в информационной среде. Понятия фирменного стиля, таких как
логотип, знак, девиз, цветодекоративные сочетания, виды шрифтов. Важным
являются понятия равновесия композиции, сюжетно-композиционный центр,
рекламная идея, рекламный носитель. Необходимо уяснить, чем отличаются
художественно-образные и композиционные средства рекламы, а так же что такое
художественное и технологическое конструирование.
Обзор и работа с другими программными продуктами для создания web экспозиции
5-8
14
11-12
14
13-14
16
1-18
52
1-18
18
Усвоение текущего учебного материала
1-18
12
Темы и вопросы, определяемые преподавателем с учетом интересов
студента
Самостоятельная разработка различных веб-приложений и веб-сайтов с целью
совершенствования навыков в среде веб-дизайн.
Темы заданий для практической самостоятельной работы
1. Проект верстки и форматирования страниц корпоративного журнала.
2. Проект верстки и форматирования объявления.
3. Проект верстки и форматирования логотипа.
4. Проект рекламы для монитора.
5. Проект обложки тематического издания.
6. Проект комплекта корпоративной документации (визитка, бланк письма).
7. Проект тематического буклета.
8. Проект web-странички.
9. Проект знака-кода для визуальных коммуникаций.
10. Проект GIFанимации знака-кода.
11. Проект баннера.
12. Проект системных фирменных констант для себя лично.
13. Проект телевизионного рекламного ролика.
14. Проект слайд-фильма.
15. Редактирование оригинал-макета рекламы на ПК (тема заданий № 1-10) по
предложению преподавателя.
16. Редактирование текста в тематической композиции.
17. Редактирование изображения в тематической композиции.
18. Реконструкция тематической композиции.
19. Редактирование анимации знака-кода.
20. Редактирование анимации баннера.
ПК-18,
ПК-29
ПК-18,
ПК-29
ПК-18,
ПК-29
ПК-18,
ПК-29
ПК-18,
ПК-29
ПК-18,
ПК-29
Кол. час
Неделя
Темы, разделы, вынесенные на самостоятельную подготовку, вопросы к
практическим и лабораторным занятиям; тематика рефератной работы, контрольных
работ, рекомендации по использованию литературы и ЭВМ и др.
Реализуемые
компетенции
Самостоятельная работа студента – заочная форма обучения, срок обучения 5 лет
Самостоятельное изучение отдельных тем курса:
Самостоятельная работа в направлении визуальной структуры рекламных
сообщений, по видам художественных шаблонов, а так же по способам управления
поведением зрителя в информационной среде. Понятия фирменного стиля, таких как
логотип, знак, девиз, цветодекоративные сочетания, виды шрифтов. Важным
являются понятия равновесия композиции, сюжетно-композиционный центр,
рекламная идея, рекламный носитель. Необходимо уяснить, чем отличаются
художественно-образные и композиционные средства рекламы, а так же что такое
художественное и технологическое конструирование.
Обзор и работа с другими программными продуктами для создания web экспозиции
5-8
14
11-12
14
13-14
16
1-18
52
1-18
18
Усвоение текущего учебного материала
1-18
12
Темы и вопросы, определяемые преподавателем с учетом интересов
студента
Самостоятельная разработка различных веб-приложений и веб-сайтов с целью
совершенствования навыков в среде веб-дизайн.
Темы заданий для практической самостоятельной работы
1. Проект верстки и форматирования страниц корпоративного журнала.
2. Проект верстки и форматирования объявления.
3. Проект верстки и форматирования логотипа.
4. Проект рекламы для монитора.
5. Проект обложки тематического издания.
6. Проект комплекта корпоративной документации (визитка, бланк письма).
7. Проект тематического буклета.
8. Проект web-странички.
9. Проект знака-кода для визуальных коммуникаций.
10. Проект GIFанимации знака-кода.
11. Проект баннера.
12. Проект системных фирменных констант для себя лично.
13. Проект телевизионного рекламного ролика.
14. Проект слайд-фильма.
15. Редактирование оригинал-макета рекламы на ПК (тема заданий № 1-10) по
предложению преподавателя.
16. Редактирование текста в тематической композиции.
17. Редактирование изображения в тематической композиции.
18. Реконструкция тематической композиции.
19. Редактирование анимации знака-кода.
20. Редактирование анимации баннера.
ПК-18,
ПК-29
ПК-18,
ПК-29
ПК-18,
ПК-29
ПК-18,
ПК-29
ПК-18,
ПК-29
ПК-18,
ПК-29
Кол. час
Неделя
Темы, разделы, вынесенные на самостоятельную подготовку, вопросы к
практическим и лабораторным занятиям; тематика рефератной работы, контрольных
работ, рекомендации по использованию литературы и ЭВМ и др.
Реализуемые
компетенции
Самостоятельная работа студента – заочная форма обучения, срок обучения 3 года 6 месяцев
Самостоятельное изучение отдельных тем курса:
Самостоятельная работа в направлении визуальной структуры рекламных
сообщений, по видам художественных шаблонов, а так же по способам управления
поведением зрителя в информационной среде. Понятия фирменного стиля, таких как
логотип, знак, девиз, цветодекоративные сочетания, виды шрифтов. Важным
являются понятия равновесия композиции, сюжетно-композиционный центр,
рекламная идея, рекламный носитель. Необходимо уяснить, чем отличаются
художественно-образные и композиционные средства рекламы, а так же что такое
художественное и технологическое конструирование.
Обзор и работа с другими программными продуктами для создания web экспозиции
5-8
14
11-12
14
13-14
16
1-18
52
1-18
18
Усвоение текущего учебного материала
1-18
12
Темы и вопросы, определяемые преподавателем с учетом интересов
студента
Самостоятельная разработка различных веб-приложений и веб-сайтов с целью
совершенствования навыков в среде веб-дизайн.
Темы заданий для практической самостоятельной работы
1. Проект верстки и форматирования страниц корпоративного журнала.
2. Проект верстки и форматирования объявления.
3. Проект верстки и форматирования логотипа.
4. Проект рекламы для монитора.
5. Проект обложки тематического издания.
6. Проект комплекта корпоративной документации (визитка, бланк письма).
7. Проект тематического буклета.
8. Проект web-странички.
9. Проект знака-кода для визуальных коммуникаций.
10. Проект GIFанимации знака-кода.
11. Проект баннера.
12. Проект системных фирменных констант для себя лично.
13. Проект телевизионного рекламного ролика.
14. Проект слайд-фильма.
15. Редактирование оригинал-макета рекламы на ПК (тема заданий № 1-10) по
предложению преподавателя.
16. Редактирование текста в тематической композиции.
17. Редактирование изображения в тематической композиции.
18. Реконструкция тематической композиции.
19. Редактирование анимации знака-кода.
20. Редактирование анимации баннера.
ПК-18,
ПК-29
ПК-18,
ПК-29
ПК-18,
ПК-29
ПК-18,
ПК-29
ПК-18,
ПК-29
ПК-18,
ПК-29
Кол. час
Неделя
Темы, разделы, вынесенные на самостоятельную подготовку, вопросы к
практическим и лабораторным занятиям; тематика рефератной работы, контрольных
работ, рекомендации по использованию литературы и ЭВМ и др.
Реализуемые
компетенции
Самостоятельная работа студента – заочная форма обучения, срок обучения 2 года 6 месяцев
Самостоятельное изучение отдельных тем курса:
5-8
14
Самостоятельная работа в направлении визуальной структуры рекламных
сообщений, по видам художественных шаблонов, а так же по способам управления
поведением зрителя в информационной среде. Понятия фирменного стиля, таких как
логотип, знак, девиз, цветодекоративные сочетания, виды шрифтов. Важным
являются понятия равновесия композиции, сюжетно-композиционный центр,
рекламная идея, рекламный носитель. Необходимо уяснить, чем отличаются
художественно-образные и композиционные средства рекламы, а так же что такое
ПК-18,
ПК-29
художественное и технологическое конструирование.
Обзор и работа с другими программными продуктами для создания web экспозиции
11-12
14
13-14
16
1-18
52
1-18
18
Усвоение текущего учебного материала
1-18
12
Темы и вопросы, определяемые преподавателем с учетом интересов
студента
2.3.
Самостоятельная разработка различных веб-приложений и веб-сайтов с целью
совершенствования навыков в среде веб-дизайн.
Темы заданий для практической самостоятельной работы
1. Проект верстки и форматирования страниц корпоративного журнала.
2. Проект верстки и форматирования объявления.
3. Проект верстки и форматирования логотипа.
4. Проект рекламы для монитора.
5. Проект обложки тематического издания.
6. Проект комплекта корпоративной документации (визитка, бланк письма).
7. Проект тематического буклета.
8. Проект web-странички.
9. Проект знака-кода для визуальных коммуникаций.
10. Проект GIFанимации знака-кода.
11. Проект баннера.
12. Проект системных фирменных констант для себя лично.
13. Проект телевизионного рекламного ролика.
14. Проект слайд-фильма.
15. Редактирование оригинал-макета рекламы на ПК (тема заданий № 1-10) по
предложению преподавателя.
16. Редактирование текста в тематической композиции.
17. Редактирование изображения в тематической композиции.
18. Реконструкция тематической композиции.
19. Редактирование анимации знака-кода.
20. Редактирование анимации баннера.
ПК-18,
ПК-29
ПК-18,
ПК-29
ПК-18,
ПК-29
ПК-18,
ПК-29
ПК-18,
ПК-29
Интерактивные технологии и инновационные методы, используемые в образовательном
процессе
Основаны на использовании современных достижений науки и информационных технологий. Направлены на
повышение качества подготовки путем развития у студентов творческих способностей и самостоятельности (методы
проблемного обучения, исследовательские методы, тренинговые формы, рейтинговые системы обучения и контроля
знаний и др.). Нацелены на активизацию творческого потенциала и самостоятельности студентов и могут
реализовываться на базе инновационных структур (научных лабораторий, центов, предприятий и организаций и др.).
№
Наименование основных форм
Краткое описание и примеры,
Часы
использования в модулях (темах), место
проведения
1.
Компьютерные симуляции
Все лабораторные работы выполняются в
8
компьютерных классах университета
2.
Деловые и ролевые игры
В процессе изучения дисциплины
2
студенты выступаю в ролях экспертов по
проектированию и сопровождению сайтов,
web-разработчиков, верстальщиков,
дизайнеров и др.
3.
Разбор конкретных ситуаций
Проектирование различных сайтов на
2
конкретном примере.
4.
Психологические и иные тренинги
Необходимо преодолевать комплексы и
2
страх отдельных групп студентов перед
ложно сформированными
представлениями о недоступности и
элитарности знаний в области сетевых
технологий
5.
Проведение форумов и выполнение групповых Все конкурсные и лабораторные работы
2
семестровых заданий и курсовых работ в
выполняются в сетевой среде
6.
интернет-среде
Электронное тестирование знаний, умений и
навыков
7.
Использование информационных ресурсов и
баз данных
8.
Применение электронных мультимедийных
учебников и учебных пособий
9.
Использование проектно-организованных
технологий обучения работе в команде над
комплексным решением практических задач
3.
3.1.
№
1.
2.
3.
4.
5.
6.
7.
8.
9.
1.
2.
3.
4.
5.
6.
Достижение результата в лабораторных
работах отражает уровень знаний и умений
каждого студента
Тексты лабораторных работ, рабочая
программа дисциплины, контрольные
задания для заочников, экзаменационные
вопросы размещены в локальной сети вуза.
Учебно-методические пособия, примеры,
задания, исходные данные для выполнения
лабораторных заданий размещены на файлсервере университета по адресу
\\University\Users\воробьева\ в
соответствующих папках
Учебные пособия по дисциплине
размещены в Интернете по адресу itfaculty.rsue.ru и на файл-сервере
университета по адресу
\\University\Users\воробьева\Пособия\
Бригады студентов участвуют в конкурсе
на лучший сайт по заданной теме
2
Средства обучения
Информационно-методические
Перечень основной и дополнительной литературы, методических разработок; с указанием наличия в
библиотеке
Основная литература:
Adobe Dreamweaver CS4 [Текст]: официальный учебный курс. – М.: Эксмо, 2009. – 304 с.
1
Алексеев, А.П. Введение в WEB-дизайн [Текст]: учеб. пособие для вузов / А.П. Алексеев. – М.: 5
СОЛОН-ПРЕСС, 2008. – 184 с.
Биндер, Кейт. Adobe Photoshop CS4 за 24 часа [Текст] / Кейт Биндер; Пер. с англ. – М.: ООО 5
«И.Д. Вильямс», 2010. – 528 с.
Буймистру, Т.А. Колористика: цвет – ключ к красоте и гармонии [Текст] / Т.А. Бурмистру. – 5
М.: Изд-во «Ниола-Пресс», 2010. – 236 с.
Глушаков, С.В. CorelDRAW X4 [Текст] / С.В. Глушаков, Е.В. Гончарова. – 3-е изд. доп. и 7
перераб. – М.: АСТ, 2008. – 476,[4] с.
Жадаев, Б.Г. Macromedia Flash 8 [Текст]: визуальный самоучитель / Б.Г. Жадаев. – М.: 100 1
книг: Триумф, 2007. – 368 с.
Сырых, Ю.А. Современный веб-дизайн. Рисуем сайт, который продает [Текст] / Ю.А. Сырых. – 30
М.: – ООО «И.Д. Вильямс», 2008. – 304 с.
Устин, В.Б. Композиция в дизайне. Методические основы композиционно-художественного 5
формообразования в дизайнерском творчестве [Текст]: учеб. пособие для вузов / В.Б. Устин. –
2-е изд., уточ. и доп. – М.: АСТ: Астрель, 2007. – 239 с.
Основы WEB-технологий [Текст] : курс лекций для студентов вузов : спец. "Интернет83
технологии" / С. А. Брик, А. М. Русак, А. И. Сурин, П. Б. Храмцов ; под ред. П. Б. Храмцова ;
Интернет-ун-т информ. технологий. - М. : Интернет-ун-т информ. технологий, 2003.-374 с.
Дополнительная литература:
Борисенко, Алексей Александрович. Web-дизайн [Текст] / А. А. Борисенко. - М. : Эксмо, 2008.- 10
320 с.
Гото, Келли. Веб-редизайн [Текст] : пер. с англ. / К. Гото, Э. Котлер. - 2-е изд. - СПб. : Символ- 1
Плюс, 2007.-376 с.
Аксак, В.А. Новейшая энциклопедия Интернет 2007 [Текст]: всеобъемлющее руководство по 3
эффективному использованию Сети / В.А. Аксак; ред. В.В. Александров. – М.: ЭКСМО, 2007. –
912 с.
Евсеев, Д.А. Web-дизайн в примерах и задачах [Текст]: учеб. пособие / Д.А. Евсеев, В.Р. 3
Трофимов; Под. ред. В.В. Трофимова. – М.: КНОРУС, 2010. – 272 с.
Попов, В.А. Учебные проекты на Macromedia Flash [Текст]: метод. указания / В.А. Попов, А.И. 55
Сенокосов. – М.: Чистые пруды, 2006. – 31 с.
Разработка и технология производства рекламного продукта [Текст]: учеб. для вузов / Л.М. 1
Дмитриева [и др.]; ред. Л.А. Дмитриева. – М.: Экономистъ, 2006. – 639 с.
7.
8.
Тимофеев, Г.С. Графический дизайн [Текст]: науч. издание / Г.С. Тимофеев, Е.В. Тимофеева. –
2-е изд., перераб. и доп. – Ростов н/Д: Феникс, 2007. – 173 с.
WEB-дизайнер [Электронный ресурс] : [обучающая прогр.]. - Электрон. изд. - М. : Media 2000,
2008.-1 электрон. опт. диск (CD-ROM).
1
1
3.2. Материально-технические
№ ауд.
Компьютерные
классы
Телевизионные
аудитории
4.
Основное оборудование, стенды, макеты,
компьютерная техника, наглядные пособия и другие
дидактические материалы, обеспечивающие
проведение лабораторных и практических занятий,
научно-исследовательской работы студентов с
указанием наличия
Компьютер, локальная сеть, интерактивное
оборудование, фото и видеокамеры, планшеты,
спектрофотометр, имеется доступ к сети Интернет
Компьютер, телевизионная или проекционная техника
Основное назначение (опытное,
обучающее, контролирующее) и
краткая характеристика
использования при изучении
явлений и процессов, выполнении
расчетов.
Назначение опытное, обучающее.
Применяется для создания webинтерфейсов, сайтов, изучения
сетевых технологий
Назначение обучающее.
Применяется для демонстрации
презентаций, обучающих
видеороликов
Текущий, промежуточный контроль знаний студентов
№
Тесты, темы курсовых работ/проектов, вопросы для текущего контроля, для подготовки к зачету,
экзамену
1.
Экзаменационные вопросы:
1. Структура Интернет.
2. Информационная сеть WWW.
3. Структура современного web-дизайна.
4. Виды web-сайтов.
5. Информационная архитектура web-сайта.
6. Классификация технологий для создания web-сайта.
7. Этапы создания web-сайта.
8. Художественное оформление web-сайта.
9. Юзабилити web-сайта.
10.SEO-оптимизация web-сайта.
11.Браузеры: основные функции, виды, отличительные особенности.
12.Основные художественные средства композиции.
13.Средства гармонизации художественной формы.
14.Основные понятия цветоведения: излучаемые и отражаемые цвета,
цветовой круг, хроматические и ахроматические цвета, цветовой тон,
светлота, насыщенность, полихромия, родственные и контрастные
цвета.
15.Эмоциональное воздействие цвета на человека.
16.Цветовые стили дизайна web-сайта.
17.Технология создания шаблона web-сайта средствами Adobe
Photoshop.
18.Возможности Adobe Photoshop для создания элементов web-сайтов.
19.Возможности CorelDRAW для создания элементов web-сайтов.
20.Графика для web: форматы хранения, способы оптимизации, способы
включения в web-страницу.
21.Создание анимации для web-сайтов: программное обеспечения для
создания анимации, стандартные размеры баннеров, принципы
создания анимации, включение в web-сайт flash-анимации.
22.Видео и звук на web-странице: рекомендации по использованию
звука в Internet, форматы звуковых файлов для web, включение звука
в web-страницу, встраивание видео на web-страницу.
23.Основные этапы создания сайта в Dreamweaver.
24.Использование каскадных таблиц стилей в Dreamweaver.
25.Форматирование текста, создание списков и таблиц в Dreamweaver.
26.Работа с изображениями в Dreamweaver.
27.Создание навигации в Dreamweaver.
28.Добавление интерактивности в Dreamweaver.
29.Создание форм в Dreamweaver.
30.Работа с анимацией в Dreamweaver.
31.Основные этапы создания сайта в CMS Joomla
32.Язык разметки HTML
33.Общие понятия о рекламном дизайне.
34.Креатив и проблемы визуализации.
35.Графический дизайн и его место в рекламе.
2
Темы рефератов
Технология размещения сайта в сети Internet. Технология
1.
размещения на платном хостинге. Бесплатные хостинги для размещения
сайтов
(обзор).
Создание
персональной
страницы
на
web-сервере
www.narod.ru. Предоставляемые возможности. Преимущества и недостатки
размещения web-сайта на бесплатном хостинге.
2.
Продвижение
сайта
в
сети
(«раскрутка»).
Оптимизация
содержания сайта. Понятие семантического ядра сайта. Принципы подбора
ключевых
слов,
подготовка
web-документа
для
индексирования
поисковыми роботами. Понятие релевантности web-документа.
3.
Продвижение сайта в сети («раскрутка»). Понятие Индекса
Цитирования Яндекса, понятие PageRank согласно данным поисковой
системы Google. Файл robots.txt, его назначение, правила записи. Примеры
кодов.
4.
Продвижение
сайта
в
сети
(«раскрутка»).
Технология
регистрации сайтов в поисковых системах и установки баннеров поисковых
систем на web-сайт. Технология регистрация сайта в системах статистики и
установки баннеров систем статистики на web-сайт.
5.
Общая характеристика дизайна web-сайтов. Классификация
web-сайтов. Дизайн web-сайтов в зависимости от назначения и тематики.
Характеристики дизайна для каждой группы web-сайтов. Библиотеки
шаблонов web-сайтов (адреса ресурсов).
6.
Композиция web-сайта. Основные элементы web-сайта. Типы
композиций: статичная и динамичная. Приемы создания композиций:
линия, пятно, линия+пятно. Анализ композиции шаблонов web-сайтов
(привести примеры).
7.
Цветовое оформление web-сайтов. Понятие о цветовых гаммах:
родственные, родственно-контрастные, контрастные, нюансные. Выбор
цветовой гаммы web-сайта в зависимости от назначения и тематики сайта
(адреса сайтов). Психологическое воздействие цвета на зрителя.
8.
Шрифтовое оформление web-сайтов. Шрифт как элемент
дизайна web-страниц. Виды шрифтов. Правила применения шрифтов при
создании web-страниц. Особенности и приемы оформления шрифтов при
создании гиперссылок (локальное форматирование, использование CSS).
9.
Роль графики в web-дизайне. Вопросы межплатформенной
совместимости при создании графических изображений для Web-страниц.
Задание размеров изображения в дескрипторе <img> Работа с атрибутом alt
и браузерами, не воспроизводящими графику. Создание всплывающей
подсказки с помощью атрибута title в дескрипторе <img>. Сжатие
фотографий и JPEG-файлы Сохранение аппликаций и текста в файл
формата GIF Создание видимости быстрой загрузки рисунков Работа с
форматами файлов PNG-8 и PNG-24. Преобразование графики в Webизображения с помощью программ редактирования изображений. Создание
Web-совместимых графических изображений на сканере.
10.
Роль
графики
в
web-дизайне.
Создание
цветных
горизонтальных линий. Извлечение быстро загружающегося изображения –
«наживки» с помощью атрибута lowsrc. Обеспечение правильного
представления цветов с помощью Web-безопасной
цветовой палитры.
Создание графических гиперссылок. Создание мозаичного фона из
графических изображений. Создание прозрачности в GIF-изображениях.
Расширение Web-безопасной цветовой палитры с помощью техники
растрирования.
Сглаживание
краев
текста,
преобразованного
в
графический элемент, за счет устранения контурных неровностей
11.
дизайне.
Создание анимации для web-сайтов. Роль анимации в WebПонятие
подключаемого
программного
модуля.
Понятие
динамического HTML (DHTML). Особенности работы с GIF-анимацией.
Особенности работы с Macromedia Flash. Рекомендации по использованию
анимации.
12.
Создание анимации для web-сайтов. Стандартные размеры
баннеров. Принципы создания анимации. Обзор программного обеспечения
для создания анимации. Сравнительная характеристика. Преимущества и
недостатки. Включение в web-сайт flash-анимации.
13.
Работа с видео и звуком. Вопросы совместимости видео в Web.
Рекомендации по использованию звука в Internet. Форматы звуковых
файлов для web. Включение звука в web-страницу. Встраивание видео на
web-страницу. Передача потокового аудио и видео со своего web-сайта.
Создание страницы с web-камерой. Встраивание видео и аудио в страницу с
помощью SMIL.
14.
Текстуры в web-дизайне. Понятие текстуры: геометрическая,
пиксельная, фотографическая, материальная, плоский цвет. Примеры
сайтов (адреса).
15.
Единство и баланс, как принцип дизайна. Использование в web-
дизайне. Примеры композиций. Примеры web-сайтов (адреса).
16.
Контраст как принцип дизайна. Контраст в форме, размере,
расстоянии, цвете, текстуре, шрифте. Примеры композиций. Примеры
сайтов (адреса).
17.
Динамика как принцип дизайна. Признаки динамической
композиции. Динамическая композиция web-сайта (приемы реализации).
Примеры сайтов (адреса).
18.
Статика
как
принцип
дизайна.
Признаки
статичной
композиции. Статичная композиция web-сайта (приемы реализации).
Примеры сайтов (адреса).
19.
Юзабилити. Организация навигации с точки зрения удобства
пользователя.
20.
Юзабилити. Организация визуальной иерархии и текстовой
информации на web-сайте.
21.
Юзабилити. Тестирование сайта на определение хорошей веб-
навигации. Примеры «правильной» и «неправильной» веб-навигации.
22.
Создание
Приемы верстки web-страниц. Создание фона web-страницы.
вертикальных
и
горизонтальных
линий,
в
том
числе
декоративных. Приемы создания рамок, в том числе декоративных с
закругленными углами. Создание колонок с разделителем. Создание
буквицы.
3.
Практические задания:
Примерные темы сайтов:
1) Мои путешествия. Фотогалереи с описанием на темы. Автобиографический разбор
2) Моя школа, описание с иллюстрациями
3) Реклама в моей жизни, польза вред, причины возникновения аналитический разбор с
иллюстрациями
4) Генеалогическое дерево, история моего рода аналитический разбор с иллюстрациями
5) Это мои кумиры, аналитический разбор с описанием и с иллюстрациями.
6) Книги изменившие мой внутренний мир, аналитический разбор
7) Обзор моих любимых компьютерных игры аналитический разбор с иллюстрациями
8) Обучающая презентация по компьютерной тематике, мультимедийный урок.
9) Моя музыка ,и мои музыкальные кумиры аналитический разбор с иллюстрациями
10) Растения Фотогалереи с описанием на темы
11) Дикие и Домашние Животные, Фотогалереи с описанием темы
12) Космос, внеземные цивилизации
13) Виртуальные путешествия по миру фотогалереи, аналитическая работа
14) Колпино в интернете, Колпинские сайты, фотогалереи, аналитическая работа
15) Красоты водной карелии, водный туризм
16) Фотогалереи с описанием на темы (Павловск,Пушкино, Гатчино, Петродворец,
Ломоносов, Выборг, Достопримечательности СПБ)
17) Фотогалереи с описанием на темы ( Музеи и архитектура СПБ, Эрмитаж, Русский
музей, Мосты СПБ, Религия СПБ, Образование, Театры)
18) Футбол, хокей, гонки, борьба, фигурное катание, шахматы, парусный спорт,
альпинизм, туризм
19) Династия и история русских царей
20) Президенты США, биографии, иллюстрации, оценка.
21) Великие войны и завоеватели
22) История и сущность возникновения и действия религиозных орденов (тамплинеры,
крестоносцы, массоны, иезуиты )
23) Великие исторические личности,оказавшие влияние на исторический процес
развития мира, биографии, фото, анализ (Александр Македонский, Платон, Наполеон,
Маркс, Ленин, Гитлер, Сталин)
24) Культура древнего Египта, Пирамиды, история религиии фароаонов, иероглифы
письменость, фотогалерея, история мифы
25) История, культура древнего Китая
26) История, культура древней Индии
27) История, культура древней Греции
28) История древних славян (Гумелев, Асов)
29) История, культура древней Иудеи, иудаизм, кабала, тора
30) Анализ глобальной политики стран определяющих ход мировой истории.
31) Военные и экономические блоки.
32) Глобализация мира за и против, моя оценка
33) Яркие политики современного времени, биографии политиков.
34) Современные политики России, биографии, факты из жизни, аналитическая оценка
35) Если бы я был презедентом России, мои реформы, законы, действия.
36) Религии мира, величайшие религиозные деятели.
4.
Задания к контрольной работе
Задание 1
1. Найдите в Интернет два web-сайта для анализа функций и
информационной архитектуры. Сайт должен содержать не менее десяти
разделов.
2. В документе Word сформулируйте:

цели каждого из web-сайтов;

функции каждого из web-сайтов;

предполагаемую аудиторию каждого из web-сайтов.
3. Создайте логическую структуру для каждого из web-сайтов в
виде блок-схемы. Для этого воспользуйтесь графическим редактором,
рекомендуется CorelDRAW. Поместите созданные схемы в документе
Word. Не забудьте сохранить документ.
4. Создайте предполагаемую физическую структуру web-сайта в
виде блок-схемы. Присваивайте названия папкам и файлам согласно
правилам, изученным в теоретическом блоке.
Задание 2
1. Из библиотеки шаблонов выбрать два изображения сайтов: с Гобразной композицией и с П-образной композицией.
2. Провести композиционный анализ каждого изображения: линия,
пятно, линия+пятно.
3. Выявите основные элементы и второстепенные и учтите это при
композиционном анализе.
Задание3
1. Из библиотеки шаблонов выбрать два изображения сайтов,
которые не относятся ни к одному из видов композиции.
2. Провести композиционный анализ каждого изображения: линия,
пятно, линия+пятно.
3. Выявите основные элементы и второстепенные и учтите это при
композиционном анализе.
Задание 4
Создать блочную композицию сайта на свободную тему. Требования:

композиция сайта должна иметь Г-образную или П-
образную композицию;

вверху должна располагаться «шапка» сайта;

панель навигации должна располагаться слева. На
панели навигации необходимо учесть в композиции все ссылки согласно
созданной ранее логической структуре сайта;

при композиционном анализе главной страницы
использовать средства «линия» + «пятно»
Задание 5
Составить три блочные цветовые схемы, используя различные
цветовые стили дизайна и различные композиции web-страницы.
Задание 6
Найдите в интернете понравившийся Вам шаблон сайта в формате
psd, и сверстайте его с помощью нарезки.
Задание 7
Средствами графической программы Adobe Photoshop создайте
фоновую текстуру для web-страницы.
Задание 8
Средствами графической программы Adobe Photoshop создайте
анимационную кнопку для web-страницы.
Задание 9
Средствами графической программы CorelDRAW создайте фоновую
текстуру для web-страницы.
Задание 10
Средствами
графической
программы
CorelDRAW
создайте
анимационную кнопку для web-страницы.
Задание 11
Создать flash-баннер для web-страницы на свободную тему.
Задание 12
Создать web-страницу в Dreamweaver с использованием CSS. На
странице необходимо разместить изображения, текст, список, таблицу,
форму, flash-баннер.
Создать веб-страницу в CMS Joomla.
5.
Тестовые задания:
Модуль 1 «Основные понятия Web-дизайна»:
1. Какой из редакторов не используют для создания Web-страниц?
a. Microsoft FrontPage
b. VirtualDub
c. Macromedia Dreamweaver
d. HtmlPadFisherMan
2. С какими кодировками работает редактор HtmlPadFisherMan?
a. mac
b. mp3
c. avi
d. acc
3. Существует ли демо-версия Macromedia Dreamweaver? Если да, то каков
ознакомительный период?
a. нет
b.29
c. 30
d. 40
4. В данном электронном учебнике говорится(рекомендует),что первым шагом при
создании сайта является?
a. использование графики
b. доступность для пользователя
c. достоверность информации
d. выбор темы сайта
5. Для описания структуры сайта используют?
a. линейный тип
b. вертикальный тип
c. горизонтальный тип
d. спиральный тип
6. К какому классу относят редактор Macromedia DreamWeaver?
a. любительский
b. профессиональный
c. непрофессионый
d. простейший
7. Какой из инструментов не входит в состав Dreamweaver?
a. HTML
b. CSS
c. JavaScript
d. Movie Maker
8. Разработчики Dreamweaver называют его:
a. закрытым редактором
b. визуальным редактором
c. виртуальным редактором
d. нерельным редактором
9. Для создания новой страницы в Dreamweaver, необходимо использовать команду:
a. Basic Page
b. Open Recent
c. New
d. TITLE
10. Из скольких частей состоит селектор цвета?
a. 2
b. 3
c. 10
d. 4
11. Для задания цвета Dreamweaver использует:
a. двоичные коды
b. восьмиричные коды
c. десятиричные коды
d. шестнадцатиричные коды()
12. За что отвечает команда Grayscale в плитре цветов Dreamweaver?
a. сине-оранжевую палитр
b. черно-белую палитру
c. использование чёрного цвета
d. активирует все цвета
13.Чтобы закрыть окно выбора цвета,необходимо нажать?
a. Esc
b. Alt
c. Alt+Ctrl
d. Alt+F
14. Для удаления гиперссылки(Dreamweaver) и превращения ее содержимого в
обычный текст необходимо воспользоваться комбинацией?
a. Ctrl+Shift+F
b. Ctrl+Shift+D
c. Alt+Ctrl+Del
d. Ctrl+Shift+L
15.Какой из режимов не относится к режиму отправки сайта на сервер?
a. None
b. VPN
c. Local/Network
d. FTP
Модуль 2 «Технологии создания и продвижения Web-сайта»
1.
Гипертекст - это ...
a. очень большой текст
b. структурированный текст, в котором могут осуществляться переходы по
выделенным меткам
c. текст, набранный на компьютере
d. текст, в котором используется шрифт большого размера
2.
Если создать в Редакторе новую страницу, в правом верхнем углу которой будет
находиться мигающий курсор и набрать текст, то где он будет находиться?
a. по центру страницы
b. у правого края строки
c. у левого края строки
d. по центру текущей строки
3.
Файлы каких типов можно открыть в Редакторе командой open?
a. только файлы HTML (HTM, HTML)
b. файлы Preprocessed HTML (HTX, ASP) файлы RTF (Rich Text Format) текстовые
файлы (ТХТ)
c. документы Word (DOC) - тайлы WordPerfect (DOC, WPD)
d. все вышеперечисленные
4.
Можно ли перенести на страницу в FrontPage материал из файлов Microsoft
Office?
a. да, но только копированием или вырезанием
b. нет
c. да, копированием или вырезанием а также прямым перетаскиванием файлов
d. да, но только прямым перетаскиванием файлов
5.
a. 1
b. 2
c. 4
d. 6
Сколько уровней заголовков можно использовать при создании страниц?
6.
При создании страниц списки используются для...
a. улучшения восприятия страниц
b. экономии места на диске
c. хранения важной информации
d. первоначальной загрузки страницы
7.
Можно ли создать таблицу внутри уже существующей?
a. да, но не более чем в 3 строки
b. да
c. да, но только без рамки
d. нет
8.
Если вы при создании страницы выберете шрифт, которого нет в другой
пользовательской системе, что отобразит браузер пользователя?
a. браузер будет использовать другой шрифт
b. браузер не отобразит текст
c. браузер отобразит набор нечитаемых символов
d. браузер найдёт используемый шрифт в Internrt и загрузит его
9.
В диалоговом окне Table Properties можно изменять...
a. объём памяти, используемый таблицей
b. начертание шрифта
c. цвет фона, размер рамки, ширину таблицы
d. вид кодировки текста таблицы
10.
Какие цвета можно использовать для оформления текста?
a. только стандартные 16 цветов
b. 48 цветов палитры Редактора
c. любые
d. только чёрный
11.
Что произойдёт с положением абзаца на странице при нажатии клавиши Align
Right?
a. текст абзаца окажется посердине страницы
b. текст абзаца прижмётся к правому краю страницы
c. текст абзаца прижмётся к левому краю страницы
d. текст абзаца прижмётся к нижнему краю страницы
12.
Как удалить горизонтальную линию?
a. выбрать пункт меню delete line
b. изменить цвет линии на прозрачный
c. поместить текст поверх линии
d.выделить линию и нажать клавишу 'delete'
13.
Какие дополнительные элементы оформления могут использоваться на
странице?
a. звуки
b. видео
c. бегущие строки
d. все вышеперечисленные
14.
Фоновый рисунок страницы можно выбрать в диалоговом окне...
a. макет страницы
b. свойства страницы
c. параметры шрифта
d. предварительный просмотр
15.
Можно ли изменить цвет ссылок на странице?
a. нет
b. да, но только ещё не просмотренных
c. да, но только ещё не просмотренных и акивных
d. да
16.
Гиперссылки на Web-странице могут обеспечить переход ...
a. на любую Web-страницу любого сервера Интернет
b. на Web-страницу только в пределах данного домена
c. на Web-страницу только данного сервера
d. только в пределах данной Web-страницы
17.
Можно ли создать гиперссылку на E-mail?
a. да
b. да, если адрес находится в пределах данного домена
c. да, если на странице указано имя владельца адреса e-mail
d. нет
18.
Если открыть какой-либо сайт в браузере Microsoft Internet Explorer или
Netscape Navigator, щелкнуть по любой ссылке на странице и, не отпуская кнопку
мыши, перетянуть ее в Редактор что будет на странице?
a. сообщение о размерах старицы в Кбайтах
b. новая гиперссылка
c. содержимое страницы открытой в браузере
d. сообщение об ошибке
19.
Какие форматы графических файлов можно использовать для вставки на
страницу при использовании FrontPage?
a. BMP, GIF
b. GIF, JPG
c. TIFF
d. все вышеперечисленные
20.
Как сохраняются изображения, вставляемые на страницу?
a. переводятся в двоичную форму и помещаются в HTML код
b. записываются в архив и прилагаются к HTML файлу
c. изображения не сохраняются, а при просмотре используются из библиотеки
пользователя
d. сохраняются как отдельные файлы, а в HTML код вставляется только ссылка на них
21.
Какое имя сайта можно, как правило, получить на серверах, предоставляющих
бесплатный хостинг?
a. www.MYNAME.ru
b. www.MYNAME.com
c. www.MYNAME.host.ru
d. www.host.MYNAME.ru
22.
Какие параметры имеют решающее значение при выборе хостинга для сайта?
a. месторасположение офиса компании
b. наличие сервиса загрузки файлов через браузер
c. скорость и надежность работы сервера
d. наличие файла справки
23.
HTML (Hyper Text Markup Language) является ...
a. сервером Интернет
b. языком разметки гипертекста
c. языком программирования
d. средством просмотра Web-страниц
24.
Броузеры (например, Microsoft Internet Explorer) являются ...
a. серверами Интернет
b. антивирусными программами
c. трансляторами языка программирования
d. средством просмотра Web-страниц
Дополнения и изменения в рабочей программе на учебный год _____/______
Следующие записи относятся к п.п.
Автор _____________________________________________________________ «____»____________2013 г.
Зав. кафедрой ______________________________________________________ ______________
(подпись)
(дата)
Принято УМУ__________________________________ Дата:_____________________