РП УП-400 Техн. созд. и поддержки корп. сайта Астафурова О.А

ФГБОУ ВПО «Российская академия народного хозяйства и государственной
службы при Президенте Российской Федерации»
Волгоградский филиал
Кафедра Информационных систем и математического моделирования
Астафурова О.А.
_____________________________________
(фамилия, инициалы автора (ов)
ТЕХНОЛОГИИ СОЗДАНИЯ И ПОДДЕРЖКИ КОРПОРАТИВНОГО САЙТА
______________________________________
(наименование учебной дисциплины)
Рабочая программа для студентов специальности
080400.62
(код специальности)
Управление персоналом
(наименование специальности).
Рассмотрено и утверждено на заседании кафедры
Протокол № 2…..от «14.» .сентября..............2011г.
Подпись заведующего кафедрой
………………………………..
Волгоград 2011
Содержание
Наименование раздела
Раздел 1. Рабочая программа учебной дисциплины «Технологии созда-
№ Стр.
3
ния и поддержки корпоративного сайта»
1.1.
1.2.
1.3.
1.4.
1.5.
2
Требования государственного образовательного стандарта и дидактические
единицы по дисциплинам, включенных в государственный образовательный
стандарт
Цели и задачи учебной дисциплины
Требования к уровню освоения дисциплины
Тематический план учебной дисциплины
Учебно-методическое обеспечение учебной дисциплины
3
3
3
5
6
РАЗДЕЛ 1. Рабочая программа учебной дисциплины
1.1. Требования образовательного стандарта
по учебной дисциплине «Технологии создания и поддержки корпоративного сайта»
отсутствуют.
1.2. Цели и задачи учебной дисциплины
Целью учебной дисциплины «Технологии создания и поддержки корпоративного сайта»
является освоение инструментальных средств и информационных технологий, позволяющих создавать Web-страницы и Web-сайты.
Основными задачами данного учебного курса являются:
 уяснение основ новых информационных технологий применительно к созданию Webсайтов;
 знание современного состояния и направления развития прикладных программных средств
по изучаемому курсу;
 умение выбирать необходимые технологические средства на множестве информационных
технологий при решении проблемы;
 приобретение практических навыков работы с пакетами прикладных программ, позволяющих автоматизировать некоторые приемы при создании Web-сайтов.
Изучение дисциплины «Технологии создания и поддержки корпоративного сайта» предусматривает включение следующих вопросов:
– обзор языков разметки;
– обзор Web-редакторов;
– ознакомление с Web-редактором Dreamweaver.
– изучение структуры HTML-кода;
– обзор растровых и векторных редакторов;
– ознакомление с графическими редакторами Fireworks и CorelDraw;
– обзор Web-браузеров;
– ознакомление с Flash Технологией.
1.3. Требования к уровню освоения дисциплины.
В результате изучения предмета «Технологии создания и поддержки корпоративного сайта» студент должен знать:
1. основы новых информационных технологий применительно к созданию Web-сайтов;
2. современное состояние и направление развития прикладных программных средств по
дисциплине;
Студент, прошедший курс обучения, должен уметь:
3
1. выбирать необходимые технологические средства;
2. создавать Web-страницы в редакторе Dreamweaver;
3. понимать HTML-код Web-страницы;
4. создавать простые иллюстрации к Web-страницам;
5. создавать фотоальбом.
Студент должен приобрести следующие навыки:
1. работы
с
пакетом
прикладных
программ
фирмы
Micromedia
(Web-
редактором Dreamweaver, графическим редакторам Fireworks, редактором для создания анимации
Flash);
2. работы с графическим редактором CorelDraw.
Обладать следующими компетенциями:
 ОК-14 способностью диагностировать и анализировать социально-экономические проблемы и процессы в организации;
 ОК-15владением одним из иностранных языков на уровне, обеспечивающем эффективную профессиональную деятельность;
 ОК-16владением методами количественного анализа и моделирования, теоретического
и экспериментального исследования;
 ОК-21учетом последствий управленческих решений и действий с позиции социальной
ответственности.
4
1.4. ТЕМАТИЧЕСКИЙ ПЛАН КУРСА
«Технологии создания и поддержки корпоративного сайта» (108 ч.)
на 2011 – 2012 уч. год для студентов УП-300
Количество часов (в акад. часах и/или кредитах)
Наименование тем
Лекции
Практические
Сам. работа
занятия
Всего часов
по теме
Очная форма обучения
Тема 2. Основные понятия Webдизайна
Тема 3. Методика создания Webстраниц и Web-сайтов.
2
2
4
2
6
8
2
6
8
2
10
12
4
2
7
2
2
4
4
2
7
2
2
4
2
2
2
6
2
4
4
10
4
4
8
Тема 4. Обзор современных программных продуктов для создания
Web-страниц
Тема 5. Основы языка HTML гипертекстовой разметки документов
Тема 6. Графический редактор CorelDraw. Примитивы и их редактиро-
1
вание
Тема 7. Графический редактор CorelDraw. Создание и редактирование
текста
Тема 8. Графический редактор Fireworks. Создание коллажей
1
Тема 9. Графический редактор Fireworks. Создание изображений для
ролловеров
Тема 10. Webредактор Dreamweaver. Настройка
пользовательского интерфейса
Dreamweaver.
Тема 11 Web-редактор Dreamweaver.
Создание нового сайта и Webстраниц.
Тема 12. Web5
редактор Dreamweaver. Размещение
материала страницы с помощью таблиц.
Тема 13. Webредактор Dreamweaver. Создание
4
4
8
2
2
4
4
4
5
2
2
4
1
2
2
5
14
38
56
108
ролловера, панели навигации, фотоальбома.
Тема 14. Webредактор Dreamweaver. Создание
страниц со слоями.
Тема 15. Webредактор Dreamweaver. Каскадные
1
таблицы стилей.
Тема 16. Webредактор Dreamweaver. Динамический HTML
Тема 17. Webредактор Dreamweaver. Добавление
элементов мультимедиа
ИТОГО по курсу:
Форма контроля
Всего часов с экзаменом
6
зачет
108
(3 ЗЕТ)
1.5. Учебно-методическое обеспечение учебной дисциплины
Лекция 1. Основные понятия. Web-дизайн и информационная архитектура. World Wide
Web. Набор протоколов TCP/IP – протоколы, управляющие обменом данных между компьютерами в сети. Протокол HTTP – протокол передачи содержимого Web-документов. Язык гипертекстовой разметки HTML – язык, используемый для создания Web-документов. Структура HTMLкода. Языки сценариев. Технология "клиент-сервер". IP-адрес. Имена доменов различных уровней.
Общие понятия о других языках гипертекстовой разметки. Технология Flash.
Программные продукты для создания Web-страниц. Визуальные редакторы и невизуальные
Web-редакторы.Режим WYSIWYG (What You See Is What You Get - что ты видишь, то и получаешь). Графические редакторы. Форматы графических файлов. Браузеры. Создание Web-страниц и
Web-сайтов.
Техническое задание для дизайнера. Определение и функции технического задания Пример технического задания на разработку логотипа.
Основные понятия: Web-дизайн, Web-страница и Web-сайт, Web-сервер, World Wide Web,
язык разметки, Web-редактор, HTML-код, HTML-теги и атрибуты, языки сценариев, технология
"клиент-сервер", графические редакторы, браузеры, Flash технология.
Семинарское занятие №1
Тема: Графический редактор CorelDraw. Примитивы и их редактирование.
1. Прямоугольник. Квадрат. Прямоугольник со скругленными углами. Изменение размеров
уже нарисованного прямоугольника, поворот его на нужный угол.
2. Эллипсы. Дуга или сектор.
3. Рисование линий:
3.1. Инструмент Freehand (От руки).
3.2. Инструмент Bezier ( Инструмент Безье).
3.3. Инструмент Artistic Media (Живопись): Заготовка. Кисть. Распылитель. Создание
своего набора для распыления.
4. Перо с нажимом.
5. Каллиграфическое перо.
Рекомендуемая литература:
1. Гурский Ю., Гурская И. CorelDRAW X4. Трюки и эффекты. – СПб.: Лидер, 2009
2. Астафурова О.А. Основы Web-дизайна. – Волгоград:ВАГС, 2010
7
Семинарское занятие №2
Тема: Графический редактор CorelDraw. Создание и редактирование текста.
1. Фигурный текст.
2. Размещение текста вдоль заданной траектории.
3. Зеркальное отражение.
4. Светящиеся, выпуклые буквы.
5. Полупрозрачные буквы.
6. Объемный текст.
7. Заполнение оболочки текстом.
8. Плавный переход одной надписи в другую.
Рекомендуемая литература:
1. Гурский Ю., Гурская И. CorelDRAW X4. Трюки и эффекты. – СПб.: Лидер, 2009
2. Астафурова О.А. Основы Web-дизайна. – Волгоград:ВАГС, 2010
Семинарское занятие №3
Тема: Графический редактор Fireworks
1. Знакомство с основными инструментами и окнами программы. Работа со слоями.
2. Создание коллажей.
3. Создание изображений для ролловеров.
Рекомендуемая литература:
1. Ловери, Джозеф, В Dreamweaver MX. Библия пользователя. : Пер. с англ. – М.: Издательский дом «Вильямс», 2003. – 1296 с.
Семинарское занятие №4
Тема: Настройка пользовательского интерфейса Dreamweaver.
1. Автоматическое исправление кода.
2. Невидимые элементы.
3. Настройка просмотра в браузере.
4. Настройка кодировки по умолчанию.
5. Цветовое оформление кода.
6. Настройка щрифтов.
Рекомендуемая литература:
1. Ловери, Джозеф, В Dreamweaver MX. Библия пользователя. : Пер. с англ. – М.: Издательский дом «Вильямс», 2003. – 1296 с.
8
2. Астафурова О.А. Основы Web-дизайна. – Волгоград:ВАГС, 2010
Семинарское занятие №5
Тема: Создание нового сайта и Web-страниц.
1. Работа с кодом.
2. Работа с текстом.
3. Вставка изображений.
4. Установка ссылок.
5. Свойства страниц.
Рекомендуемая литература:
1. Ловери, Джозеф, В Dreamweaver MX. Библия пользователя. : Пер. с англ. – М.: Издательский дом «Вильямс», 2003. – 1296 с.
2. Астафурова О.А. Основы Web-дизайна. – Волгоград:ВАГС, 2010
Семинарское занятие №6
Тема: Размещение материала страницы с помощью таблиц.
1. Работа с таблицами.
2. Фоновое изображение страницы, таблицы, ячейки.
3. Функция импорт Word и Excel.
4. Закладки.
Рекомендуемая литература:
1. Ловери, Джозеф, В Dreamweaver MX. Библия пользователя. : Пер. с англ. – М.: Издательский дом «Вильямс», 2003. – 1296 с.
2. Астафурова О.А. Основы Web-дизайна. – Волгоград:ВАГС, 2010
Семинарское занятие №7
Тема: Создание ролловера, панели навигации, фотоальбома.
1. Вставка изображений созданных в Fireworks.
2. Создание ролловера.
3. Создание панели навигации.
4. Создание фотоальбома.
9
Рекомендуемая литература:
1. Ловери, Джозеф, В Dreamweaver MX. Библия пользователя. : Пер. с англ. – М.: Издательский дом «Вильямс», 2003. – 1296 с.
2. Астафурова О.А. Основы Web-дизайна. – Волгоград:ВАГС, 2010
Семинарское занятие №8
Тема: Создание страниц со слоями. Каскадные таблицы стилей.
1. Использование трассирующего изображения
2. Предотвращение наложения слоев
3. Создание слоев
4. Преобразование слоев в таблицы
5. Создание и применение каскадных таблиц стилей.
6. Проверка ссылок сайта.
Рекомендуемая литература:
1. Ловери, Джозеф, В Dreamweaver MX. Библия пользователя. : Пер. с англ. – М.: Издательский дом «Вильямс», 2003. – 1296 с.
2. Астафурова О.А. Основы Web-дизайна. – Волгоград:ВАГС, 2010
Организация самостоятельной работы студентов
График самостоятельной работы
№
Тема
Вопросы, выносимые на СРС
п/п
Содер-
Форма
Учебно-
жание
контроля
методиче-
СРС
СРС
ское обеспечение
1
2
1
Основы языка
Парные и одиночные теги.
HTML гипер-
Теги структуры Web-страницы: начало
текстовой
и конец страницы, заголовка, названия,
разметки документов
3
основного содержания страницы.
Теги форматирования текста: Заголовков, абзаца, перевода строки, выравни-
10
4
5
6
УМ
Б
ДЛ3
вания.
Теги форматирования шрифта: жирный,
курсив, верхний индекс, нижний индекс, размер шрифта, цвет, гарнитура.
Теги для оформления изображения:
вставка
изображения,
выравнивание
текста около изображения, вывод текста
вместо изображения.
Теги цвета фона, текста и ссылок: фоновое изображение, цвет фона, цвет
текста, цвет ссылки, цвет пройденной
ссылки, цвет активной ссылки.
Теги гиперссылки: ссылка на другую
страницу, ссылка на закладку в другом
документе, ссылка на закладку в том же
документе, определение закладки.
Теги списков: ненумерованный, тип
метки, нумерованный, тип нумерации,
первый номер списка, список определений, меню, каталог.
Теги формы: форма, текстовое поле,
группа переключателей, группа флажков, раскрывающийся список, текстовая
область, кнопка «Отправить», кнопка
«Очистить».
Тематика курсовых работ
Учебным планом курсовых работ по предмету «Технологии создания и поддержки корпоративного сайта» не предусмотрено.
11
Материалы текущего, промежуточного и итогового контроля
Вопросы для проведения внутрисеместровой аттестации:
1. Определения: Web-дизайн, Web-страница и Web-сайт, Web-сервер.
2. История развития World Wide Web
3. Язык разметки.
4. Обзор Web-редакторов.Визуальные и невизуальные редакторы.
5. HTML-код, HTML-теги и атрибуты.
6. Структура HTML-кода
7. Технология "клиент-сервер".
8. Обзор графических редакторов.
9. Веторная и растровая графика.
10. Форматы графических файлов.
11. Обзор Браузеров.
12. Поисковые системы
13. Технология Flash.
Вопросы к зачету:
1. Редакторы для создания Web-страниц.
2. Какие теги должны присутствовать в HTML-документе обязательно?
3. Какова логическая структура Web-страницы?
4. Задание свойств страницы.
5. В каких случаях удобнее использовать в гиперссылках абсолютные, а каких – относительные адреса?
6. Добавлениеи подключение нестандартных шрифтов.
7. Графические форматы Web.
8. Вставка избражений.
9. Вставка фоновых избражений.
10. Вставка рекламных баннеров.
11. Вставка ролловеров.
12. Установка ссылок: на файлы, на адреса электронной почты, на закладки.
13. Вставка таблицы.свойчтва таблиц.
14. Вставка формы.
15. Виды полей формы.
16. Создание списков.
17. Создание слоев.
18. Добавление сценариев.
12
19. Аттестация Web-страниц.
Список литературы
Основная литература:
1. Ловери, Джозеф, В Dreamweaver MX. Библия пользователя. : Пер. с англ. – М.: Издательский дом «Вильямс», 2003. – 1296 с.
2. Круг. С. Веб-дизайн - Пер. с англ. - СПб: Символ-Плюс, 2001.
3. Кото К. и Котлер Э. Веб-редизайн: - Пер. с англ. - СПб: Символ-Плюс, 2003.
4. Астафурова О.А. Основы Web-дизайна. – Волгоград:ВАГС, 2010
Дополнительная литература:
1. Леонтьев Энциклопедия Web-дизайна. – М.: ЗАО «Новый издательский дом», 2004.
2. Тамас А.Пауэл Web-дизайн- СПб:– «БХВ-Петербург», 2004.
3. Угринович Н.Д. Информатика и информационные технологии– М.:БИНОМ, 2003, 512
с.
4. Колин Смит, Кристал Уотерс. Web-дизайн: Photoshop & Dreamweaver. – Кудиц образ,
2004. – 264 стр.
5.
http://www.citforum.ru/
6.
http://www.rusdoc.ru/
Материалы текущего, промежуточного и итогового контроля
Примерный тест промежуточного контроля по дисциплине
Вариант №1
1. Обзор графических редакторов.
2. В чем разница команд Сохранить, Сохранить как, Сохранить копию, Сохранить для Web в
программе PhotoShop?
3. В каких форматах файлов следует сохранять изображение, предназначенное для использования в Internet?
4. Каков будет размер 16-цветного графического файла в битах, состоящего из 100х500 пикселов?
5. Какие из перечисленных ниже программ являются приложениями для работы с векторной
графикой?
1. Adobe Photoshop, Macromedia Fireworks, Corel Photo-Paint;
2. Adobe Photoshop, CorelDRAW;
3. Adobe Illustrator, Macromedia Fireworks, Corel Photo-Paint;
4. Adobe Illustrator, CorelDRAW.
6. Минимальным объектом, используемым в растровом графическом редакторе, является ...
13
 точка экрана (пиксель)
 объект(прямоугольник, круг и т.д.)
знакоместо (символ)
Вариант №2
1. Векторная графика.
2. Перечислите способы уменьшения размера (объем места на диске) графического файла.
3. Как влияет на размер файла глубина цвета?
4. Какую цветовую схему (RGB или CMYK) выбрать, если файл создается для типографской печати?
5. В модели CMYK в качестве компонентов применяются основные цвета ...
1. красный, зеленый, синий, черный
2. голубой, пурпурный, желтый, черный
3. красный, голубой, желтый, синий
4. голубой, пурпурный, желтый, белый
6. Пикселизация изображений при увеличении масштаба - один из недостатков растровой или
векторной графики?
Вариант №3
1. Растровая графика.
2. В какие цвета может быть окрашен пиксель, если битовая глубина равна 1.
3. В чем отличие инструментов Кисть, Карандаш, Аэрограф?
4. В цветовой модели RGB установлены следующие параметры: 255,0, 0. Какой цвет будет соответствовать этим параметрам?
5. Какие из перечисленных ниже программ являются приложениями для работы с растровой графикой?
1. Adobe Photoshop, Macromedia Fireworks, Corel Photo-Paint;
2. Adobe Photoshop, CorelDRAW;
3. Adobe Illustrator, Macromedia Fireworks, Corel Photo-Paint;
4. Adobe Illustrator, CorelDRAW.
6. Минимальным объектом, используемым в векторном графическом редакторе, является ...
 точка экрана (пиксель)
 объект(прямоугольник, круг и т.д.)
 знакоместо (символ)
Вариант №4
1. Форматы графических файлов. Особенности сжатия в графических форматах.
2. Какую цветовую схему (RGB или CMYK) выбрать при создании изображения, если планируется его размещение в Internet?
3. Каков будет размер 256-цветного графического файла в байтах, состоящего из 200х400 пикселов?
4. Деформация изображения при изменении размера рисунка - один из недостатков векторной
или растровой графики?
5. Разрешение изображения измеряется в ...
 Пикселах
 точках на дюйм (dpi)
 мм, см, дюймах
5. В цветовой модели RGB установлены следующие параметры: 0, 255, 0. Какой цвет
будет соответствовать этим параметрам?
Примерный итоговый тест по дисциплине
14
1. Языками разметки являются:
1. JavaScript, HTML, PHP
2. HTML, WML, XML
3. ASP, PHP, JSP
4. XML, Smil, Perl
2. Чистый код – это код, в котором…
1. содержатся только необходимые тэги;
2. содержатся только теги структуры документа;
3. присутствуют теги форматирования текста;
4. присутствуют только теги и отсутствуют данные (текст, изображения…).
3. Что из перечисленного ниже является наиболее важным при создании Web-сайта?
1. Использование качественных инструментальных программ.
2. Использование текстового редактора Режим настройки программы на технические особенности работы в среде локальной вычислительной сети.
3. Создание чистого кода.
4. Использование WYSIWYG-редактора.
4. В чем преимущество создания HTML-кода вручную?
1. Работа над Web-страницей упрощается.
2. Разработчик имеет полный контроль над документом.
3. Для создания Web-страницы требуется больше времени.
4. Разработчик может уделить все внимание процессу создания Web-страницы.
5. Какие из перечисленных ниже программ являются самыми популярными приложениями для работы с векторной графикой?
1. Adobe Photoshop, Macromedia Fireworks, Corel Photo-Paint;
2. Adobe Photoshop, Macromedia Freehand, CorelDRAW;
3. Adobe Illustrator, Macromedia Fireworks, Corel Photo-Paint;
4. Adobe Illustrator, Macromedia Fireworks, CorelDRAW.
6. ActionScript - это...
1. язык серверных сценариев, используемый на Web-страницах;
15
2. язык, встроенный в программу Macromedia Flash для создания интерактивных эффектов;
3. язык, встроенный в программу Macromedia Dreamweaver для создания интерактивных
эффектов;
4. язык клиентских сценариев, используемый на Web-страницах.
7. Какие из графических приложений специально ориентированы на подготовку Webграфики?
1. Adobe Photoshop, Macromedia Freehand;
2. Adobe Illustrator, Macromedia Fireworks;
3. Adobe ImageReady, Macromedia Fireworks;
4. Corel Photo-Paint; Adobe ImageReady.
8. Если главным критерием является время работы над Web-страницей, то лучше
всего использовать:
1. WYSIWYG-редактор;
2. Windows- приложение Блокнот;
3. Macromedia Flash;
4. Internet Explorer.
9. К браузерам можно отнести следующие программы:
1. Internet Explorer, Opera, NetscapeNavigator;
2. CorelDRAW, Adobe Photoshop, Macromedia Fireworks;
3. Dreamweaver, FrontPage;
4. Указанные в пунктах 2, 3.
16