Министерство культуры Российской Федерации
Алтайский филиал федерального государственного образовательного
учреждения высшего профессионального образования
«МОСКОВСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ
КУЛЬТУРЫ И ИСКУССТВ»
Кафедра прикладной информатики
УЧЕБНО-МЕТОДИЧЕСКИЙ КОМПЛЕКС
ДИСЦИПЛИНЫ
Технологии создания корпоративных сайтов
Специальность:
080801.65 – «Прикладная информатика (в менеджменте)»
Барнаул 2010
СОДЕРЖАНИЕ
Введение.............................................................. 4
Тематический план.............................................. 6
Содержание курса.............................................. 6
Контрольные вопросы к экзамену..................... 9
Темы курсовых работ....................................... 10
Список литературы........................................... 10
ВВЕДЕНИЕ
Учебный курс «Технологии создания корпоративных сайтов»
призван заложить основы профессиональных знаний в области
разработки и конструирования web-сайтов при помощи современной
технологической базы. Курс основан на теории дизайна web-сайтов,
концепциях информационной структуры, вопросах управления web-
проектами и оценки эффективности их реализации и использования.
Настоящий курс обусловлен глобальным развитием интернет-
технологий, системами представления информации в Web, а также
стремительно меняющимися методами представления и
распространения информации в сети. Курс необходим студентам для
получения квалификации специалистов, работающих в области web-
индустрии, производства web-сайтов и web-порталов.
Цель курса - развитие как творческого, так и логического
мышления у студентов и приобретение знаний и навыков при
разработке современных web-сайтов, а так же мультимедийных
продуктов web-среды. В процессе обучения студенты рассматривают
функциональные возможности ряда профессиональных программных
продуктов для разработки web-сайтов, а также различные
графические и мультимедийные стандарты. Вместе с тем
рассматриваются основы процесса организации online-бизнеса и
технологии построения web-сайтов электронной коммерции.
Задачи курса заключаются в передаче студентам принципов
создания web-сайтов и других аспектов их разработки, изучении
основ языка разметки HTML, способов применения CSS. В курсе
рассматриваются стандарты языка HTML 4, CSS1 и CSS2, их
различия, аспекты совместимости с различными браузерами, а также
возможность применения полученных навыков с уже готовыми
программными решениями ведения online-бизнеса. Роль современных
интернет-технологий во всем мире уже определена и эта сфера
стремительно развивается, что обуславливает значимость данного
курса для будущих выпускников МГУКИ.
Процесс обучения состоит из двух частей. Первая часть
заключается в освоении теоретической базы разработки web-
проектов, вторая часть состоит в отработке практических заданий на
основе теории. Выполнение заданий включает тестирование,
изучение программных средств разработки web-приложений, таких
как: DreamWeaver, FrontPage, HomeSite, ознакомление с
современными серверными технологиями размещения информации в
сети Интернет, а также с несколькими распространенными системами
управления контентом web-сайтов.
В качестве отчетности в конце учебного семестра
предполагается создание собственного web-проекта.
Форма контроля освоения студентами отдельных разделов
курса - проверка готовности частей создаваемого web-проекта, а в
конце курса-дифференцированный экзамен.
Структура экзамена включает в себя теоретические вопросы по
основным разделам учебной программы.
Практическая работа, сделанная студентом в течение семестра,
включает:
- разработку структуры корпоративного web-сайта;
- создание графического шаблона сайта;
- верстку HTML шаблонов, используя созданный графический
шаблон сайта;
- использование технологии CSS при верстке HTML-шаблона;
- внедрение готового шаблона сайта в систему управления
контентом (CMS);
- отбор материала для сайта и внесение его в баз данных;
- тестирование сайта.
Общий объем курса - 72 часа.
ТЕМАТИЧЕСКИЙ ПЛАН
Темы | Теоретич. | Практич. |
занятия (ч) | занятия (ч) | |
Тема 1. Основные понятия создания | 2 | 2 |
корпоративных сайтов | ||
Тема 2. Каскадные таблицы стилей (CSS) | 2 | 8 |
Тема 3. Использование стилей при создании сайта | 2 | 4 |
Тема 4. Использование программы Dreamweaver | 2 | 2 |
для вёрстки шаблонов сайта | ||
Тема 5. Макетирование. Эргономика WEB-сайта | 2 | 6 |
Тема 6. HTML-редакторы с графическим | 2 | 6 |
пользовательским интерфейсом (GUI) | ||
Тема 7. Информационная архитектура сайта | 2 | 6 |
Тема 8. Создание динамических элементов в | 2 | 2 |
DreamWeaver | ||
Тема 9. CMS (системы управления контентом и | 4 | 4 |
структурой сайта). Установка и | ||
администрирование | ||
Тема 10. Размещение сайта на сервере и поддержка | 2 | 2 |
сайта | ||
Тема 11. Оценка и тестирование корпоративного | 4 | 4 |
сайта | ||
Итого: | 32 | 40 |
СОДЕРЖАНИЕ КУРСА
Тема 1. Основные понятия создания корпоративных сайтов
Основные сведения о корпоративном сайте, отличия от других
категорий сайтов. Язык разметки HTML. Эволюция языков разметки.
Цели и задачи языка HTML. Что такое web-сервер, web-сайт, web-
страница и чем они отличаются. Структура HTML-документа.
Понятие элементов и атрибутов. Зачем нужна инструкция
<!DOCTYPE>. Что такое тег? Типы тегов. Правила оформления
HTML-документа. Основные элементы форматирования текста.
Создание HTML-документа в программе «Блокнот». Использование
таблиц. Макетирование web-страницы с помощью таблиц.
Использование вложенных таблиц. Приемы использования таблиц на
web-странице.
Практическая работа №1. Создание структуры документа.
Тема 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-страницы и способы их визуального представления
на страницах сайта. Разработка простого макета страницы и линейной
системы навигации. Использование шаблонов (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. Оценка и тестирование сайта
Критерии оценок созданного сайта. Способы снижения
визуального шума и повышения четкости подачи материала. Этапы
стандартного тестирования сайта. Методика тестирования сайта на
аудитории. Выработка предложений по редизайну и обоснование
необходимости редизайна.
КОНТРОЛЬНЫЕ ВОПРОСЫ К ЭКЗАМЕНУ
- Понятия «сетевой информационный ресурс», «сайт», «вэб-
страница», «вэб-сервер».
- Структура HTML-документа, тэги, параметры тэгов.
- Применение каскадных таблиц стилей (CSS) в HTML-документе.
- Системы управления контентом (CMS), общие принципы работы.
- GUI-редакторы. Функциональные возможности.
- Логическая структура и физическая структура сайта.
- Разработка графического макета web-сайта. Приёмы и методы.
- Пользовательский интерфейс. Особенности в web-среде.
- Макетирование web-страниц при помощи каскадных таблиц стилей.
- Фиксированные и адаптируемые страницы, отличия, недостатки и
достоинства.
- Принципы построения системы навигации.
- Таблицы в HTML. Макетирование web-страницы при помощи
таблиц.
- Конструкция и формат страниц, основные принципы.
- Что такое интранет, экстранет и Интернет. Методы использования в
организации корпоративного web-сайта.
- Домен, уровни доменов.
- Методы привлечения посетителей на коммерческий web-сайт.
- Основные компоненты web-страницы.
- Использование графики в web-сайтах, виды и различия графических
форматов.
- Фреймы. Плюсы и минусы использования фреймов.
- Навигационные карты, области применения.
- Методы оптимизации web-страниц для поисковых роботов.
- Понятия web-сервер, web-портал, web-сайт.
- Сервисы корпоративного сайта.
- Форматирование текста с использованием HTML и CSS.
- Структура корпоративного web-сайта.
- Фреймы, контейнеры <frameset> и <frame>.
- Аббревиатуры WWW. URL, HTTP, FTP, HTML. Расшифровка и
перевод на русский язык.
ТЕМЫ КУРСОВЫХ РАБОТ
- Использование каскадных таблиц стилей (CCS) как среда
расширения возможностей web-сайта.
- Визуальный HTML-редактор DreamWeaver. Особенности
применения для разработки web-сайтов.
- Web-дизайн и программы для создания web-страниц.
- Использование CMS (система управления контентом) для
организации корпоративных сайтов.
- Разработка дизайна и навигационной системы корпоративного web-
сайта.
ЛИТЕРАТУРА
- Креативный Web-дизайн на HTML 4 (+ CD-
ROM). - М.: ДиаСофт, 2003.
- Web-дизайн. - М.: КУДИЦ-Пресс, 2007.
- К, Машин Web-мастера. Технология.
Дизайн. Инструменты. - СПб.: Крона принт, 2001.
- Web-дизайн. Тонкости, хитрости и секреты (+ CD-
ROM). - М.: СОЛОН-пресс
- Веб-дизайн: книга Якоба Нильсена. - Пер. с англ. - СПб.:
Символ-Плюс, 2001.
- Греди К-Л. Эффективный Web-сайт. Учебное пособие. -
М.: ТРИУМФ, 2004.
- Орлов создать и «раскрутить» web-сайт в Интернет. - М.:
Альянс-пресс, 20Серия книг «Профи»).
- Типичные ошибки при
создании корпоративных сайтов // Мир Internet№ 2.
- Сейш, Тамми, Мак-Лейн, Гари. Дизайн и архитектура современного
Web-сайта. Опыт профессионалов: Пер. с англ. - М.: Издательский
дом «Вильяме», 2002.
- СергеевА. О. HTML 4.0. СПб.: БХВ, 1999.
- Токарев Macromedia Dreamweaver MX. - СПБ.:
БХВ-Петербург, 2003.
- Photoshop для Web-дизайна. - КУДИЦ-Образ, 2006.
- Холцыилаг М 250 советов HTML и WEB-дизайна. - М.: НТ Пресс,
2006.
- Web-сайт своими руками. - СПб.: БХВ-Петербург,
2000.
- Шапошников HTML 4. - СПб.: БХВ-Петербург,
2003.
Дополнительные источники в Интернете но теме курса
- Earle Goodman. HTML Index - См. http://www. mark-
*****/FWO/quick_r. html
- http://all4vou. *****/Webmastering/Articles/Technoloev/06.shtml -
Denveroid Area - Web-mastering | Статьи | CSS - Cascading Style
Sheets
- http://. ru/webdesign/ - Web-дизайн, всё о web-
дизайне...
- http: //css. *****/index. html - CCS справочник
- http://lipchinlabs. *****/useful. htm - Lipchin Labs - INTERFACE
DESIGN STUDIO: Полезное: Статьи
- http: //webmaster. *****/wml. php - Теоретические рассуждения с
практическими последствиями
- http://www. *****/internet/html/index. shtml - Язык
гипертекстовой разметки (HTML)
- http://www. *****/internet/html40/intro/intro. html - Введение в
HTML 4.0
- http://www. *****/
- http://www. *****/ - Usability in Russia
- A Web как поле художественного творчества. - См.:
http:// www. future. *****/ part03/.
- Hand made Web-site, или живопись в Интернете. - См.:
http://www. *****/Pub. htm (21.01.2000)
