Web-дизайн - Основные образовательные программы ТюмГУ

РОССИЙСКАЯ ФЕДЕРАЦИЯ
МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ
ФЕДЕРАЛЬНОЕ АГЕНТСТВО ПО ОБРАЗОВАНИЮ
Государственное образовательное учреждение
высшего профессионального образования
ТЮМЕНСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ
«УТВЕРЖДАЮ»:
Проректор по учебной работе
______________Волосникова Л.М.
______ _____________ 200__г.
Web-программы (Web-дизайн)
Учебно-методический комплекс
Рабочая учебная программа для студентов
специальности 030601.65 Журналистика.
Форма обучения – очная
«ПОДГОТОВЛЕНО К ЭЛЕКТРОННОМУ ИЗДАНИЮ»:
Автор работы ____________ Долгова Т.С.
«______»___________200__г.
Рассмотрено на заседании кафедры Истории и теории журналистики, 26.03.2008 №6.
Соответствует требованиям к содержанию, структуре и оформлению.
«РЕКОМЕНДОВАНО К ЭЛЕКТРОННОМУ ИЗДАНИЮ»:
Объем ____стр.
Зав. кафедрой ________________Петрова О.А.
«______»___________ 200__ г.
Рассмотрено на заседании УМК филологического факультета, 23.09.2008 №1.
Соответствует ФГОС ВПО и учебному плану образовательной программы.
«СОГЛАСОВАНО»:
Председатель УМК _______________Рацен Т.Н.
«______»_____________200__ г.
«СОГЛАСОВАНО»:
И.о. зав. методическим отделом УМУ____________Фёдорова С.А.
«______»_____________200__ г.
РОССИЙСКАЯ ФЕДЕРАЦИЯ
МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ
ФЕДЕРАЛЬНОЕ АГЕНТСТВО ПО ОБРАЗОВАНИЮ
Государственное образовательное учреждение
высшего профессионального образования
ТЮМЕНСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ
ФИЛОЛОГИЧЕСКИЙ ФАКУЛЬТЕТ
КАФЕДРА ИСТОРИИ И ТЕОРИИ ЖУРНАЛИСТИКИ
Т.С. Долгова
Web-программы (Web-дизайн)
Учебно-методический комплекс
Рабочая учебная программа для студентов
специальности 030601.65 Журналистика.
Форма обучения – очная
Тюменский государственный университет
2008
Т.С. Долгова. Web-программы (Web-дизайн): Учебно-методический
комплекс. Рабочая программа для студентов направления 030601.65
Журналистика.
Тюмень:
Издательство
Тюменского
государственного
университета, 2008, 6 стр.
Рабочая
учебная
программа
дисциплины
«Принципы
функционирования интернета» составлена с учетом требований ГОС (СД.
Специальные дисциплины. Интернет-журналистика). Предназначена для
студентов 2 курса специальности «Журналистика».
Рабочая учебная программа дисциплины опубликована на сайте
ТюмГУ: Web-программы (Web-дизайн): [электронный ресурс] / Режим
доступа: http://www.umk.utmn.ru., свободный.
Рекомендовано к электронному изданию кафедрой истории и теории
журналистики. Утверждено проректором по учебной работе
Тюменского
государственного университета.
ОТВЕТСТВЕННЫЙ РЕДАКТОР: О. А. Петрова, к.филол.н., доцент.
© ГОУ ВПО Тюменский государственный университет, 2008.
© Т.С. Долгова, 2008.
Пояснительная записка
Цели и задачи дисциплины
Цель: Познакомить с законами визуального восприятия, научить
принципам и техникам структурирования графической и текстовой
информации.
Задачи:
понять основные принципы разработки визуальной концепции
медиапроекта;
научиться ориентироваться в современных тенденциях дизайна и
инфографики в СМИ
сформировать навыки работы с композицией, цветом, типографикой;
изучить принципы html-разметку и ее основные теги, CSS (каскадные
таблицы стилей);
Структура и трудоемкость дисциплины
Вид учебной работы
Таблица 1
Семестры
6
51
Всего часов
Аудиторные занятия (всего)
В том числе:
Лекции
Практические занятия (ПЗ)
Самостоятельная работа (всего)
Вид промежуточной аттестации (зачет, экзамен)
Общая трудоемкость
час
51
34
17
33
34
17
33
Экз.
84
84
Тематический план
Таблица 2
Лекции
Практические
занятия
Тема
1
1
2
1
2
2
Модуль 1
Введение. Веб-дизайн
HTML-верстка табличная
Всего
Модуль 2
Проектирование
сайта.
Композиция
HTML-верстка блоками,
использование каскадных
таблиц стилей (CSS)
4
Самостоятель
ная работа
Виды учебной работы и
самостоятельная работа, в час.
№
5
Итого
часов
по
теме
Итого
количест
во
баллов
7
9
6
6
4
10
2
2
4
5
5
10
13
11
24
0-10
0-15
0-25
2
2
3
7
0-10
4
2
4
10
0-15
3
1
2
3
Цвет.
Типографика.
Инфографика
Всего
Модуль 3
Пошаговое
проектирование сайта
Основы HTML и CSS
4
2
4
10
0-10
10
6
11
27
0-35
6
2
4
12
0-15
4
2
4
10
0-10
Верстка своего проекта
(HTML, CSS)
4
3
4
11
0-15
Всего
Итого (часов, баллов):
14
34
7
17
12
33
33
84
0-40
0-100
Оценка работы студентов в рейтинговых баллах
Балльная оценка текущей успеваемости студента
Таблица 3
Формы текущего контроля
№ темы
Ответы на
семинаре
Модуль 1.
1.
2.
Всего
Практическая
работа
Выполнение
контрольных
заданий
Итого
количество
баллов
0-10
0-15
0-25
0-10
0-10
1.
2.
3.
Всего
0-15
0-15
0-10
0-15
0-10
0-35
0-10
0-15
0-10
0-20
1.
2.
3.
Всего
Итого
0-15
0-15
0-10
0-15
0-40
0-100
0-15
0-10
0-10
0-40
0-30
0-15
0-30
0-30
4.2. Виды контроля успеваемости, применяемые на аудиторных занятиях, их оценка в
рейтинговых баллах
Таблица 3
Виды контроля успеваемости
Максимальное
количество баллов
Ответы на семинаре
0–10
Практическая работа
0-15
Выполнение контрольных заданий
0-15
Планирование самостоятельной работы студентов
№
Модули и темы
Виды СРС
обязательны
дополнитель
е
ные
Модуль 1
1.1
Введение. Веб-дизайн
1.2
Анализ
сайтов
Объем
в
часах
работа с
литературой,
источниками
Анализ
сайтоводностраничн
иков
HTML-верстка
табличная
Всего по модулю 1:
Модуль 2
2.1
Проектирование
сайта. Композиция
2.2
HTML-верстка
блоками,
использование
каскадных
таблиц
стилей (CSS)
2.3
Цвет.
Типографика.
Инфографика
Всего по модулю 2:
Модуль 3
3.1
Пошаговое
проектирование сайта
3.2
Основы HTML и CSS
3.3
Верстка
своего
проекта (HTML, CSS)
Таблица 4
Кол-во
баллов
5
0-5
5
0-5
10
0-10
Анализ
сайтов, поиск
ошибок
Анализ
ошибок
в
верстке
сайтов
Изучение
литературы
по теме
Изучение
литературы
по теме
3
0-5
4
0-5
Анализ
сайтов
Изучение
литературы
по теме
4
0-5
11
0-15
4
0-5
4
0-5
4
0-5
Анализ
сайтов
и
интернетСМИ
Изучение
литературы
по теме
Анализ
сайтов
и
интернетСМИ
Изучение
литературы
по теме
Изучение
литературы
по теме
Всего по модулю 3:
ИТОГО:
12
33
0-15
0-40
Содержание дисциплины
Тема 1. Введение. Веб-дизайн
Что такое веб-дизайн. Типы сайтов: новостной портал, блог, персональный
сайт, корпоративный сайт, сайт дизайнерской фирмы, сайт, посвященный
определенному событию (промо-сайт), сайт для электронной торговли, сайтвизитка, сайт как веб-утилита, сайт программного обеспечения для работы в
Интернете, одностраничный сайт, сайт с портфолио, сайт, находящийся в
процессе создания, сайт-директория и т.д. Юзабилити интерфейса. Стили и
темы веб-дизайна: сверхчистый стиль, минималистский стиль, web 2.0,
эскизный стиль, коллажный стиль, иллюстрационный стиль, шрифтовой
стиль, стиль, предполагающий использование однородных цветов, стиль,
предполагающий использование текстур.
Тема 2. Проектирование сайта. Композиция
Основы проектирования сайта. Типичная и нетипичная навигация.
«Резиновые» сайты и сайты с фиксированной шириной. Модульные сетки
как способ размещения объектов на плоскости. Принцип «золотого
сечения».
Базовые
принципы
веб-дизайна:
акцентирование,
контрастирование, балансировка, выравнивание, повторение, обеспечение
удобства восприятия. Приемы выразительной композиции. Элементы
дизайна: призыв или «входной» объект, eye-catchers, информация,
пиктограммы, значки социальных сетей и RSS и т.д. Приемы дизайна:
освещение, отражения, тени. Типы фонов, ошибки при создании фонов.
Ошибки в расположении элементов на сайтах. Модели сайтов.
Тема 3. Цвет. Типографика. Инфографика
Правила гармоничного сочетания цветов. Цветовой круг и цветовой шар.
Принципы цветового созвучия: два, три цвета. Семь типов цветовых
контрастов. «Рецепты» гармоничной цветовой композиции в зависимости от
тематики сайта. Виды шрифтов. Типографика в веб-дизайне. Базовые
принципы работы с текстами: ширина текстового блока, абзацы,
выравнивание, интерлиньяж, оформление заголовков. Типичные ошибки в
оформлении текстов.
Тема 4. Основы HTML и CSS
Базовые составляющие веб-страницы, структура документа, основные теги
для текста, ссылки, заголовки, картинки, списки, таблицы, дополнительные
элементы. CSS: стили и классы.
Планы семинарских занятий
Практикум 1. HTML-верстка табличная
Задание: Создать сайт-одностраничник на основе макета, предоставленного
преподавателем. Верстка таблицами.
Практикум 2. HTML-верстка блоками, использование каскадных таблиц
стилей (CSS)
Оптимизация сайта-одностраничника: разграничение оформления и
разметки. Верстка блоками.
Задание: По тому же макету, что и на прошлом занятии, сверстать сайт
блоками, оформление вынести в отдельный файл Style.css.
Практикум 3. Пошаговое проектирование сайта
Создание макета сайта по одной из моделей: «продуктовая», «плакатная»,
«карта» и др.
Задание: Выбрать тематику сайта, подобрать информацию и иллюстрации,
определить сочетания цветов, которые будут использоваться в дизайне,
закомпоновать макет в Adobe Photoshop.
Практикум 4. Верстка своего проекта (HTML, CSS)
Задание: Сверстать свой сайт с использованием
изготовленному на прошлом практикуме макету.
HTML, CSS по
Вопросы к экзамену
Что такое веб-дизайн.
Типы сайтов.
Стили и темы веб-дизайна.
Основы проектирования сайта. Типичная и нетипичная навигация.
Базовые принципы веб-дизайна.
Элементы дизайна: призыв или «входной» объект, eye-catchers,
информация, пиктограммы, значки социальных сетей и RSS и т.д.
7. Приемы дизайна: освещение, отражения, тени. Типы фонов, ошибки при
создании фонов.
8. Типографика в веб-дизайне.
9. Базовые принципы работы с текстами: ширина текстового блока, абзацы,
выравнивание, интерлиньяж, оформление заголовков.
10. Базовые составляющие веб-страницы
11.CSS: стили и классы.
1.
2.
3.
4.
5.
6.
Учебно-методическое обеспечение дисциплины
1.1. Основная литература
1. Фрост Крис. Дизайн газет и журналов: пер. с англ./ К. Фрост. Москва:
Университетская книга, 2008. 231 с.
1.2. Дополнительная литература
1. Яцюк О.Г. Основы графического дизайна на базе компьютерных
технологий: учебное пособие/ О. Г. Яцюк. Санкт-Петербург: БХВПетербург, 2004.
2. Рунге В. Ф. Основы теории и методологии дизайна: учеб. пособие для
студ. вузов, обуч. по спец. 052400 "Дизайн"/ В. Ф. Рунге, В. В.
Сеньковский. 3-е изд., перераб. и доп. Москва: МЗ Пресс, 2005.
3. Вин Джеффри. Искусство web-дизайна: самоучитель : пер. с англ./ Дж.
Вин. - Санкт-Петербург: Питер, 2003.
4. Ли Ким. 3D Studio Max для дизайнера : искусство трехмерной анимации
[Электронный ресурс]: пер. с англ./ К. Ли. - 3-е изд., перераб. и доп. Электрон. текстовые дан. Москва; Санкт-Петербург; Киев: ДиаСофт,
2005. 896 с.
1.3. Базы данных, информационно-справочные и поисковые системы
Поисковые системы Google, Yandex и др, сайты и форумы по HTML и CSS.