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

Федеральное государственное бюджетное образовательное учреждение
высшего профессионального образования
РОССИЙСКАЯ АКАДЕМИЯ НАРОДНОГО ХОЗЯЙСТВА и
ГОСУДАРСТВЕННОЙ СЛУЖБЫ при ПРЕЗИДЕНТЕ РОССИЙСКОЙ ФЕДЕРАЦИИ
СЕВЕРО-ЗАПАДНЫЙ ИНСТИТУТ УПРАВЛЕНИЯ
КАФЕДРА ЖУРНАЛИСТИКИ
РАБОЧАЯ ПРОГРАММА
по курсу: «WEB ДИЗАЙН»
по направлению 031300.62 «Журналистика»
Санкт-Петербург
2013
1. Цели и задачи дисциплины
1. Основная цель дисциплины «Web дизайн» - познакомить студентов с основами
web-дизайна.
2. Задачи дисциплины:
3. - изучить основы планирования сайта;
4. - освоить язык разметки гипертекста HTML;
5. - научиться создавать wеb-страницы с табличной разметкой;
6. - узнать об основных законах продвижения сайта.
7. Результаты изучения дисциплины выражены в профессиональных компетенциях,
формируемых по результатам данного курса.
2. Учебно-тематический план дисциплины по направлению 031300.62
«Журналистика»
Наименование темы
Всего
В том числе, час.
Формы
часов
(очно/заочно)
контроля
Аудиторная работа
Самост.
лекции
работа
семинар.
(очно/заочно)
занятия
Тема 1. Основы web-дизайна.
Основные этапы разработки 26
2
6
18
ОК
26
2
6
18
ОК
28
2
8
18
ОК
28
2
8
18
РК
ИТОГО
108
8
28
72
Итоговый контроль
Зачет
сайта.
Тема 2. Информационная
архитектура сайта.
Тема 3. Макетирование вебстраницы. Эргономика вебсайта.
Тема 4. Тестирование сайта.
Использование системы
управления сайтом. Основы
продвижения сайта.
3. Программа дисциплины
Тема 1. Основы web-дизайна. Основные этапы разработки сайта
Обзор программ, используемых при создании веб-сайта. Обзор ресурсов, полезных для
веб-дизайнера. Этапы разработки веб-сайта. Написание технического задания на
разработку сайта. Создание прототипов сайта. Принципы построения системы навигации
на сайте. Знакомство с DreamWeaver. Настройка программы, общие принципы работы.
Работа с текстовым наполнением. Перенос текста в программу DreamWeaver и его
логическое форматирование.
Основные этапы разработки сайта:
1. Составление технического задания;
2. Подготовка текстового содержания и иллюстраций;
3. Разработка дизайна сайта;
4. Кодирование и программирование;
5. Тестирование сайта;
6. Публикация и раскругка сайта.
Основные термины: HTML - язык разметки гипертекста, DreamWeaver, сайт.
Контрольные вопросы
1. Какие программы используются при создании веб-сайта?
2. Назовите этапы разработки веб-сайта?
3. Опишите принципы построения системы навигации на сайте.
Тема 2. Информационная архитектура сайта. Цветовые схемы.
Элементы информационной архитектуры
Распределение информации по разделам сайта с учетом информационной, логической и
визуальной взаимосвязи между разделами. Основные компоненты WEB-страницы и
способы их визуального представления на страницах сайта. Цвет. Цветовые схемы,
применяемые на сайте. Использование "безопасных" цветов. Современные стили дизайна.
Структурирование информации и разработка системы навигации.
Основные термины: Информационная архитектура сайта, стили дизайна.
Контрольные вопросы
1. Перечислите основные компоненты WEB-страницы и способы их визуального
представления на страницах сайта?
2. Какие Вы знаете современные стили дизайна?
3. Структурирование информации и разработка системы навигации?
Тема 3. Макетирование веб-страницы. Эргономика веб-сайта
Принципы построен ия макета. Роль размеров в дизайне. Оформление веб-страницы с
использованием CSS. Работа с CSS в DreamWeaver. Эргономика сайта (web-usability).
Факторы, которые затрудняют и факторы, которые облегчают восприятие пользователем
информации на сайте. Оформление текстового материала. Выбор шрифтов и размеров.
Практические советы и рекомендации. Анализ эргономики сайтов на примерах.
Оформление макета страницы с использованием CSS. Нарезка и сохранение типового
макета в программе Adobe PhotoShop. Сборка макета в программе DreamWeaver.
"Резиновый" и фиксированный дизайн: анализ и критерии выбора. Разметка области для
нарезки макета. Создание таблицы и сборка макета.
Основные термины: Эргономика сайта, DreamWeaver, CSS.
Контрольные вопросы
1. Оформление веб-страницы с использованием CSS. Работа с CSS в DreamWeaver.
2. Оформление текстового материала. Выбор шрифтов и размеров.
3. Что такое "Резиновый" и фиксированный дизайн?
Тема 4. Тестирование сайта. Использование системы управления сайтом
Тестирование сайта. Система управления сайтом. Этапы стандартного тестирования сайта.
Добавление системы поиска на сайте. Вставка географической информации (схема
проезда и пр.) Использование системы управления сайтом (CMS). Виды CMS и решаемые
ими задачи.
Основные термины: CMS - система управления сайтом, сайт.
Контрольные вопросы
1. Опишите этапы стандартного тестирования сайта.
2. Как добавить систему поиска на сайте?
3. Назовите виды CMS и решаемые ими задачи.
4. Список рекомендуемой литературы
Основная литература
1. Ташков П. А. Веб-мастеринг на 100%: HTML, CSS, JavaScript, PHP, CMS, графика,
раскрутка / П. А. Ташков. — СПб. : Питер, 2010 г. — 512 с. — Электронное издание.
2. Ташков П. А. Веб-мастеринг [Электронный ресурс] : HTML, CSS, JavaScript, PHP, CMS,
AJAX, раскрутка / П. А. Ташков. - Электрон. дан. - СПб.[и др.] : Питер, 2010. - 512 c.
Дополнительная литература
1. Бокарев Т. Энциклопедия интернет-рекламы / Т. Бокарев. – Москва : ПРОМО-РУ, 2000 .
– 399 с. : ил. – На рус. яз.
2. Гончаров А. Ю. Web-дизайн: HTML, JavaScript и CSS. Карманный справочник / А. Ю.
Гончаров. – КУДИЦ-ПРЕСС, 2007. – 320 с.
3. Коржинский С. Н. Настольная книга WEB-мастера: эффективное применение HTML,
CSS, JavaScript / С. Н. Коржинский. – М.: КноРус, 2000.–320 с.
5. Планы практических (семинарских) занятий
Тема 1. Основы web-дизайна. Основные этапы разработки сайта
Вопросы для обсуждения:
1. Какие программы используются при создании веб-сайта?
2. Назовите этапы разработки веб-сайта?
3. Опишите принципы построения системы навигации на сайте.
4. Программа DreamWeaver: общие принципы работы. Работа с текстовым наполнением.
Основная литература:
1. Ташков П. А. Веб-мастеринг на 100%: HTML, CSS, JavaScript, PHP, CMS, графика,
раскрутка / П. А. Ташков. — СПб. : Питер, 2010 г. — 512 с. — Электронное издание.
2. Ташков П. А. Веб-мастеринг [Электронный ресурс] : HTML, CSS, JavaScript, PHP, CMS,
AJAX, раскрутка / П. А. Ташков. - Электрон. дан. - СПб.[и др.] : Питер, 2010. - 512 c.
Дополнительная литература:
1. Бокарев Т. Энциклопедия интернет-рекламы / Т. Бокарев. – Москва : ПРОМО-РУ, 2000 .
– 399 с. : ил. – На рус. яз.
Тема 2. Информационная архитектура сайта. Цветовые схемы
Вопросы для обсуждения:
1. Назовите элементы информационной архитектуры?
2. Перечислите основные компоненты WEB-страницы и способы их визуального
представления на страницах сайта?
3. Какие Вы знаете современные стили дизайна?
4. Структурирование информации и разработка системы навигации?
Основная литература:
1. Ташков П. А. Веб-мастеринг на 100%: HTML, CSS, JavaScript, PHP, CMS, графика,
раскрутка / П. А. Ташков. — СПб. : Питер, 2010 г. — 512 с. — Электронное издание.
Дополнительная литература:
1. Коржинский С. Н. Настольная книга WEB-мастера: эффективное применение HTML,
CSS, JavaScript / С. Н. Коржинский. – М.: КноРус, 2000.–320 с.
Тема 3. Макетирование веб-страницы. Эргономика веб-сайта
Вопросы для обсуждения:
1. Оформление веб-страницы с использованием CSS. Работа с CSS в DreamWeaver.
2. Оформление текстового материала. Выбор шрифтов и размеров.
3. Что такое "Резиновый" и фиксированный дизайн?
Основная литература:
1. Ташков П. А. Веб-мастеринг на 100%: HTML, CSS, JavaScript, PHP, CMS, графика,
раскрутка / П. А. Ташков. — СПб. : Питер, 2010 г. — 512 с. — Электронное издание.
Дополнительная литература:
1. Бокарев Т. Энциклопедия интернет-рекламы / Т. Бокарев. – Москва : ПРОМО-РУ, 2000 .
– 399 с. : ил. – На рус. яз.
Тема 4. Тестирование сайта. Использование системы управления сайтом
Вопросы для обсуждения:
1. Опишите этапы стандартного тестирования сайта.
2. Как добавить систему поиска на сайте?
3. Назовите виды CMS и решаемые ими задачи.
Основная литература:
1. Ташков П. А. Веб-мастеринг на 100%: HTML, CSS, JavaScript, PHP, CMS, графика,
раскрутка / П. А. Ташков. — СПб. : Питер, 2010 г. — 512 с. — Электронное издание.
2. Ташков П. А. Веб-мастеринг [Электронный ресурс] : HTML, CSS, JavaScript, PHP, CMS,
AJAX, раскрутка / П. А. Ташков. - Электрон. дан. - СПб.[и др.] : Питер, 2010. - 512 c.
Дополнительная литература:
1. Стауфер Т. Создание веб-страниц. Самоучитель / Т. Стауфер. - СПб.: Питер.
1.
6. Темы рефератов
Определение, классификация и характеристика WEB-сайтов по различным признакам.
2.
Распространенные форматы данных в Интернете. Архитектура клиент-сервер. Основы
работы web-сервера.
3.
Составные элементы HTML-документа. Типы данных HTML. Структура HTMLдокумента.
4.
Общие атрибуты элементов HTML. Теги заголовка документа. Теги тела документа.
Блочные и строчные элементы разметки. Работа с текстом. Заголовки и абзацы.
Списки: нумерованные, маркированные.
5.
Объекты HTML-документов. Типы файлов иллюстраций. Управление размещением
иллюстрации и обтеканием текста. Вставка объектов. Карты ссылок. Создание
гиперссылок.
6.
Создание таблиц. Основные атрибуты таблиц, строк, ячеек. Особенности
использования таблиц для верстки web-документов.
7.
Понятие объекта в HTML-документах. Карта ссылок. Вставка апплетов, элементов
ActiveX, объектов, обрабатываемых с помощью расширений обозревателя, и др.
Элементы форм.
8.
Типы управляющих элементов. Правила работы с формами. Понятие фреймовой
структуры web-страницы.
9.
Стилевое оформление HTML-документов. Каскадные таблицы стилей (CSS).
10. Основные понятия компьютерной графики
11. Сценарии JavaScript и DHTML
12. Web-cерверы. Пассивные и активные web-cерверы. Основы клиент-серверного
взаимодействия.
13. Обзор технологий серверного интернет-программирования (CGI/Perl, PHP, ASP, SSI и
др.), их поддержка различными операционными системами и web-серверами.
14. Основы работы с базами данных в интернет-приложениях. Обзор типичных интернеттехнологий баз данных.
15. XML: стандарты, области применения, связанные технологии и возможности.
7. Вопросы к зачету
1. Особенности компьютерного дизайна.
2. Компьютерная анимация.
3. Дизайн как метод использования рекламы в Интернете.
4. Дизайн как способ оформления сайта в Интернете.
5. Что представляют собой термины «гипертекст», «гиперссылка» и «гиперсвязь»?
6. Возможности веб-дизайна.
7. Способы создания графических изображений для веб-дизайна.
8. Баннерная реклама.
9. Сайт фирмы как средство привлечения клиентов, существенного роста
продаж и оказания различных услуг.
10. Основные виды рекламы Интернет ресурсов (оффлайновые агентства,
интернет – площадки и магазины и др.).
11. Методы организации сайта фирмы.
12. Структура веб-сайтов фирм.
13. Методы формирования веб-страниц.
14. Программы создания веб-сайтов и веб-страниц.
15. Разработка и дизайн сайта.
16. Размещение сайтов.
17. Способы размещения ресурсов на сайте.
18. Формы взаимодействия с сайтом (Гостевая книга, Форум и т.п.).
19. Регистрация Интернет ресурса.
20. Статистика веб-сайта и данные о посетителях Веб-сайта.