Технологии создания корпоративных сайтов: Учебная программа по специальности ''Прикладная информатика (в менеджменте)''

МОСКОВСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ КУЛЬТУРЫ И ИСКУССТВ

Технологии создания корпоративных сайтов Учебная программа

Москва 2008

МОСКОВСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ КУЛЬТУРЫ И ИСКУССТВ ФАКУЛЬТЕТ м и с и т Кафедра мультимедийных технологий и информационных систем

Технологии создания корпоративных сайтов Учебная программа по специальности 351400 «Прикладная информатика (в менеджменте)», квалификация «Информатик-менеджер»

Москва 2008

Рекомендовано на заседании кафедры мультимедийных технологий и информационных систем факультета МИСИТ МГУКИ от 19.11.07, протокол № 4.

Технологии создания корпоративных сайтов: Учебная программа по специальности 351400 «Прикладная информатика (в менеджменте)», квалификация «Информатик-менеджер» / Сост. A.M. Варэлис - М: МГУКИ, 2008. - 11 с.

Составитель: Варэлис A.M.

СОДЕРЖАНИЕ

Введение

4

Тематический план

6

Содержание курса

6

Контрольные вопросы к экзамену

9

Темы курсовых работ

10

Список литературы

10

3

ВВЕДЕНИЕ

Учебный курс «Технологии создания корпоративных сайтов» призван заложить основы профессиональных знаний в области разработки и конструирования web-сайтов при помощи современной технологической базы. Курс основан на теории дизайна web-сайтов, концепциях информационной структуры, вопросах управления webпроектами и оценки эффективности их реализации и использования. Настоящий курс обусловлен глобальным развитием интернеттехнологий, системами представления информации в Web, а также стремительно меняющимися методами представления и распространения информации в сети. Курс необходим студентам для получения квалификации специалистов, работающих в области webиндустрии, производства web-сайтов и web-порталов. Цель курса - развитие как творческого, так и логического мышления у студентов и приобретение знаний и навыков при разработке современных web-сайтов, а так же мультимедийных продуктов web-среды. В процессе обучения студенты рассматривают функциональные возможности ряда профессиональных программных продуктов для разработки web-сайтов, а также различные графические и мультимедийные стандарты. Вместе с тем рассматриваются основы процесса организации online-бизнеса и технологии построения web-сайтов электронной коммерции. Задачи курса заключаются в передаче студентам принципов создания web-сайтов и других аспектов их разработки, изучении основ языка разметки HTML, способов применения CSS. В курсе рассматриваются стандарты языка HTML 4, CSS1 и CSS2, их различия, аспекты совместимости с различными браузерами, а также возможность применения полученных навыков с уже готовыми программными решениями ведения online-бизнеса. Роль современных интернет-технологий во всем мире уже определена и эта сфера стремительно развивается, что обуславливает значимость данного курса для будущих выпускников МГУКИ. Процесс обучения состоит из двух частей. Первая часть заключается в освоении теоретической базы разработки webпроектов, вторая часть состоит в отработке практических заданий на основе теории. Выполнение заданий включает тестирование, изучение программных средств разработки web-приложений, таких 4

как: DreamWeaver, FrontPage, HomeSite, ознакомление с современными серверными технологиями размещения информации в сети Интернет, а также с несколькими распространенными системами управления контентом web-сайтов. В качестве отчетности в конце учебного семестра предполагается создание собственного web-проекта. Форма контроля освоения студентами отдельных разделов курса- проверка готовности частей создаваемого web-проекта, а в конце курса-дифференцированный экзамен. Структура экзамена включает в себя теоретические вопросы по основным разделам учебной программы. Практическая работа, сделанная студентом в течение семестра, включает: - разработку структуры корпоративного web-сайта; - создание графического шаблона сайта; - верстку HTML шаблонов, используя созданный графический шаблон сайта; - использование технологии CSS при верстке HTML-шаблона; - внедрение готового шаблона сайта в систему управления контентом (CMS); - отбор материала для сайта и внесение его в баз данных; - тестирование сайта. Общий объем курса - 72 часа.

5

ТЕМАТИЧЕСКИЙ ПЛАН Темы Тема 1. Основные понятия создания корпоративных сайтов Тема 2. Каскадные таблицы стилей (CSS) Тема 3. Использование стилей при создании сайта Тема 4. Использование программы Dreamweaver для вёрстки шаблонов сайта Тема 5. Макетирование. Эргономика WEB-сайта Тема 6. HTML-редакторы с графическим пользовательским интерфейсом (GUI) Тема 7. Информационная архитектура сайта Тема 8. Создание динамических элементов в DreamWeaver Тема 9. CMS (системы управления контентом и структурой сайта). Установка и администрирование Тема 10. Размещение сайта на сервере и поддержка сайта Тема 11. Оценка и тестирование корпоративного сайта Итого:

Теоретич. занятия (ч) 2

Практич. занятия (ч) 2

2 2 2

8 4 2

2 2

6 6

2 2

6 2

4

4

2

2

4

4

32

40

СОДЕРЖАНИЕ КУРСА Тема 1. Основные понятия создания корпоративных сайтов Основные сведения о корпоративном сайте, отличия от других категорий сайтов. Язык разметки HTML. Эволюция языков разметки. Цели и задачи языка HTML. Что такое web-сервер, web-сайт, webстраница и чем они отличаются. Структура HTML-документа. Понятие элементов и атрибутов. Зачем нужна инструкция . Что такое тег? Типы тегов. Правила оформления HTML-документа. Основные элементы форматирования текста. Создание HTML-документа в программе «Блокнот». Использование таблиц. Макетирование web-страницы с помощью таблиц. Использование вложенных таблиц. Приемы использования таблиц на web-странице. Практическая работа №1. Создание структуры документа. 6

Тема 2. Каскадные таблицы стилей (CSS) Основные цели и задачи каскадных таблиц стилей Cascading Style Sheets (CSS). Способы добавления стилей на web-страницу. Спецификации CSS Level 1 и Level 2: особенности, поддержка браузерами. CSS: основные понятия и определения. Грамматика языка стилей. Создание стилей и классов. Принципы каскадирования и принципы группировки. Применение стилей и классов к элементам документа HTML. Декоративные возможности CSS: формирование рамок и отступов. Использование псевдоклассов и псевдоэлементов. Позиционирование элементов на странице при помощи CSS. Управление моделью элемента (свойство display). Практическая работа №2. Разработка каскада стилей внутри HTML-документа. Тема 3. Использование стилей при создании сайта Создание и использование внешнего стилевого файла. Подключение к страницам сайта путем связывания и импорта. Современная верстка сайта при помощи CSS. Обзор подходов на примере сайтов с максимальным использованием возможностей CSS. Приемы макетирования web-страницы с использованием стилей. Практическая работа №3. Разработка и внедрение внешней стилевой библиотеки, и применение её к HTML-странице. Тема 4. Использование программы Dreamweaver для верстки шаблонов сайта Использование программы Dreamweaver для верстки шаблонов сайта. Интерфейс программы. Элементы Show code, code and design, design views. Панель Properties. Поиск и замена (Find and replace). Верстка шаблона дизайна сайта. Практическая работа №4. Верстка шаблона дизайна сайта. Тема 5. Информационная архитектура сайта Элементы информационной архитектуры. Распределение информации по разделам сайта с учетом информационной, логической и визуальной взаимосвязи между разделами. Основные компоненты web-страницы и способы их визуального представления на страницах сайта. Разработка простого макета страницы и линейной 7

системы навигации. Использование шаблонов (templates) в DreamWeaver: создание шаблонов, применение к готовым страницам, модификация шаблонов. Практическая работа Ме5. Схематическое макетирование информационной структуры сайта, разработка линейной системы навигации для сайта. Тема 6. Макетирование. Эргономика WEB-сайта Эргономика сайта (web-usability). Факторы затрудняющие и облегчающие восприятие пользователем информации на сайте. Макетирование в WEB. Приемы макетирования. Создание фиксированных и адаптируемых страниц. Размещение информации на странице с учетом решаемых задач. Примеры удачных и неудачных решений. Система навигации на сайте. Принципы построения системы навигации. Разработка навигационных палитр. Тема 7. HTML-редакторы с графическим пользовательским интерфейсом (GUI) Graphical User Interface (графический пользовательский интерфейс)-редакторы. Типы GUI-редакторов для HTML. Функциональные возможности GUI-редактора. Создание webстраниц в GUI-редакторе. Текстовые редакторы HTML против GUIредакторов. Тема 8. Создание динамических элементов в DreamWeaver DreamWeaver-программирование. Назначение палитр Behaviors и TimeLine. Управление параметрами элементов в DreamWeaver. Обработка событий. Типовые операции (модальные окна, открытие новых окон и управление ими), проверка данных формы, управление видимостью и содержанием слоев, проверка браузера. Сложные операции: создание раскрывающихся меню, анимация слоев, создание эффекта «rollover». Использование возможностей Macromedia Flash. Практическая работа Мб. Использование палитры Behaviors для внедрения активных действий Java-script в HTML страницы. Использование временной шкалы (TimeLine) для создания интерактивных, анимированных объектов в HTML странице.

х

Тема 9. CMS (системы управления контентом и структурой сайта). Установка и администрирование Установка системы CMS. Настройка системы. Панель администратора. Настройка базы данных. Установка прав администратора. Изменения профилей пользователей. Изменение прав пользователей. Добавление разделов. Добавление блоков. Добавление новостей. Редактирование блоков. Практическая работа №7. Установка и настройка системы управлением сайтом Joomla. Создание разделов, отключение, включение и размещение информационных блоков, система управления пользователями. Управление контентом. Тема 10. Размещение сайта на сервере и поддержка сайта Описание метаинформации сайта с помощью элемента МЕТА. Вопросы хостинга. Настройка FTP-клиента. Вопросы поддержки сайта. Способы «раскрутки» сайта. Тема 11. Оценка и тестирование сайта Критерии оценок созданного сайта. Способы снижения визуального шума и повышения четкости подачи материала. Этапы стандартного тестирования сайта. Методика тестирования сайта на аудитории. Выработка предложений по редизайну и обоснование необходимости редизайна. КОНТРОЛЬНЫЕ ВОПРОСЫ К ЭКЗАМЕНУ 1. Понятия «сетевой информационный ресурс», «сайт», «вэбстраница», «вэб-сервер». 2. Структура HTML-документа, тэги, параметры тэгов. 3. Применение каскадных таблиц стилей (CSS) в HTML-документе. 4. Системы управления контентом (CMS), общие принципы работы. 5. GUI-редакторы. Функциональные возможности. 6. Логическая структура и физическая структура сайта. 7. Разработка графического макета web-сайта. Приёмы и методы. 8. Пользовательский интерфейс. Особенности в web-среде. 9. Макетирование web-страниц при помощи каскадных таблиц стилей. 10. Фиксированные и адаптируемые страницы, отличия, недостатки и достоинства. 11. Принципы построения системы навигации. 12. Таблицы в HTML. Макетирование web-страницы при помощи таблиц. 9

13. Конструкция и формат страниц, основные принципы. 14. Что такое интранет, экстранет и Интернет. Методы использования в организации корпоративного web-сайта. 15. Домен, уровни доменов. 16. Методы привлечения посетителей на коммерческий web-сайт. 17. Основные компоненты web-страницы. 18. Использование графики в web-сайтах, виды и различия графических форматов. 19. Фреймы. Плюсы и минусы использования фреймов. 20. Навигационные карты, области применения. 21. Методы оптимизации web-страниц для поисковых роботов. 22. Понятия web-сервер, web-портал, web-сайт. 23. Сервисы корпоративного сайта. 24. Форматирование текста с использованием HTML и CSS. 25. Структура корпоративного web-сайта. 26. Фреймы, контейнеры и . 27. Аббревиатуры WWW. URL, HTTP, FTP, HTML. Расшифровка и перевод на русский язык. ТЕМЫ КУРСОВЫХ РАБОТ 1. Использование каскадных таблиц стилей (CCS) как среда расширения возможностей web-сайта. 2. Визуальный HTML-редактор DreamWeaver. Особенности применения для разработки web-сайтов. 3. Web-дизайн и программы для создания web-страниц. 4. Использование CMS (система управления контентом) для организации корпоративных сайтов. 5. Разработка дизайна и навигационной системы корпоративного webсайта. ЛИТЕРАТУРА 1. Вайнман Л., Вайнман В. Креативный Web-дизайн на HTML 4 (+ CDROM). - М.: ДиаСофт, 2003. 2. Гончаров А. Web-дизайн. - М.: КУДИЦ-Пресс, 2007. 3. Гультяев А. К, Машин В. А. Уроки Web-мастера. Технология. Дизайн. Инструменты. - СПб.: Крона принт, 2001. 4. Леоньтьев Б. Web-дизайн. Тонкости, хитрости и секреты (+ CDROM). - М.: СОЛОН-пресс. - 2003. 5. Нильсен Я. Веб-дизайн: книга Якоба Нильсена. - Пер. с англ. - СПб.: Символ-Плюс, 2001. 6. Ноблес Р., Греди К-Л. Эффективный Web-сайт. Учебное пособие. М.: ТРИУМФ, 2004. 10

7. Орлов Л. В. Как создать и «раскрутить» web-сайт в Интернет. - М.: Альянс-пресс, 2003. - (Серия книг «Профи»). 8. Режепп А., Степанов Ю., Павлова О. Типичные ошибки при создании корпоративных сайтов // Мир Internet. - 2001. - № 2. 9. Сейш, Тамми, Мак-Лейн, Гари. Дизайн и архитектура современного Web-сайта. Опыт профессионалов: Пер. с англ. - М.: Издательский дом «Вильяме», 2002. 10. Сергеев А.О. HTML 4.0. СПб.: БХВ, 1999. 11. Токарев С. В. Самоучитель Macromedia Dreamweaver MX. - СПБ.: БХВ-Петербург, 2003. 12. Хатсон Ш. Photoshop для Web-дизайна. - КУДИЦ-Образ, 2006. 13. Холцыилаг М 250 советов HTML и WEB-дизайна. - М.: НТ Пресс, 2006. 14. Шапошников И. Web-сайт своими руками. - СПб.: БХВ-Петербург, 2000. 15. Шапошников И. В. Самоучитель HTML 4. - СПб.: БХВ-Петербург, 2003. Дополнительные источники в Интернете но теме курса 1. Earle Goodman. HTML Index См. http://www.markitt.ru/FWO/quick_r.html 2. http://all4vou.bv.ru/Webmastering/Articles/Technoloev/06.shtml Denveroid Area - Web-mastering | Статьи | CSS - Cascading Style Sheets 3. http://allrussweb.com.ru/webdesign/ - Web-дизайн, всё о webдизайне... 4. http://css.manual.ru/index.html - CCS справочник 5. http://lipchinlabs.narod.ru/useful.htm - Lipchin Labs - INTERFACE DESIGN STUDIO: Полезное: Статьи 6. http://webmaster.sbridge.ru/wml.php - Теоретические рассуждения с практическими последствиями 7. http://www.citforum.ru/internet/html/index.shtml -Язык гипертекстовой разметки (HTML) 8. http://www.citforum.ru/internet/html40/intro/intro.html - Введение в HTML 4.0 9. http://www.postroika.ru/ 10. http://www.usability.ru/ - Usability in Russia 11. Лебедев В.A. Web как поле художественного творчества. - См.: http:// www.future.museum.ru/ part03/03040601. 12. Петрова Н. Hand made Web-site, или живопись в Интернете. - См.: http://www.rik.ru/Pub.htm (21.01.2000) ]I