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

Министерство культуры Российской Федерации
Алтайский филиал федерального государственного образовательного
учреждения высшего профессионального образования
«МОСКОВСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ
КУЛЬТУРЫ И ИСКУССТВ»
Кафедра прикладной информатики
УЧЕБНО-МЕТОДИЧЕСКИЙ КОМПЛЕКС
ДИСЦИПЛИНЫ
Технологии создания корпоративных сайтов
Специальность:
080801.65 – «Прикладная информатика (в менеджменте)»
Барнаул 2010
3
СОДЕРЖАНИЕ
Введение ................................................................... 4
Тематический план.................................................. 6
Содержание курса ................................................... 6
Контрольные вопросы к экзамену. ........................ 9
Темы курсовых работ............................................. 10
Список литературы ................................................ 10
4
ВВЕДЕНИЕ
Учебный курс «Технологии создания корпоративных сайтов»
призван заложить основы профессиональных знаний в области
разработки и конструирования web-сайтов при помощи современной
технологической базы. Курс основан на теории дизайна web-сайтов,
концепциях информационной структуры, вопросах управления webпроектами и оценки эффективности их реализации и использования.
Настоящий курс обусловлен глобальным развитием интернеттехнологий, системами представления информации в Web, а также
стремительно меняющимися методами представления и
распространения информации в сети. Курс необходим студентам для
получения квалификации специалистов, работающих в области webиндустрии, производства web-сайтов и web-порталов.
Цель курса - развитие как творческого, так и логического
мышления у студентов и приобретение знаний и навыков при
разработке современных web-сайтов, а так же мультимедийных
продуктов web-среды. В процессе обучения студенты рассматривают
функциональные возможности ряда профессиональных программных
продуктов для разработки web-сайтов, а также различные
графические и мультимедийные стандарты. Вместе с тем
рассматриваются основы процесса организации online-бизнеса и
технологии построения web-сайтов электронной коммерции.
Задачи курса заключаются в передаче студентам принципов
создания web-сайтов и других аспектов их разработки, изучении
5
основ языка разметки HTML, способов применения CSS. В курсе
рассматриваются стандарты языка HTML 4, CSS1 и CSS2, их
различия, аспекты совместимости с различными браузерами, а также
возможность применения полученных навыков с уже готовыми
программными решениями ведения online-бизнеса. Роль современных
интернет-технологий во всем мире уже определена и эта сфера
стремительно развивается, что обуславливает значимость данного
курса для будущих выпускников МГУКИ.
Процесс обучения состоит из двух частей. Первая часть
заключается в освоении теоретической базы разработки webпроектов, вторая часть состоит в отработке практических заданий на
основе теории. Выполнение заданий включает тестирование,
изучение программных средств разработки web-приложений, таких
как: DreamWeaver, FrontPage, HomeSite, ознакомление с
современными серверными технологиями размещения информации в
сети Интернет, а также с несколькими распространенными системами
управления контентом web-сайтов.
В качестве отчетности в конце учебного семестра
предполагается создание собственного web-проекта.
Форма контроля освоения студентами отдельных разделов
курса- проверка готовности частей создаваемого web-проекта, а в
конце курса-дифференцированный экзамен.
Структура экзамена включает в себя теоретические вопросы по
основным разделам учебной программы.
Практическая работа, сделанная студентом в течение семестра,
включает:
6
-
разработку структуры корпоративного web-сайта;
-
создание графического шаблона сайта;
-
верстку HTML шаблонов, используя созданный графический
шаблон сайта;
-
использование технологии CSS при верстке HTML-шаблона;
-
внедрение готового шаблона сайта в систему управления
контентом (CMS);
-
отбор материала для сайта и внесение его в баз данных;
-
тестирование сайта.
Общий объем курса - 72 часа.
7
ТЕМАТИЧЕСКИЙ ПЛАН
8
Темы
Теорети
ч.
занятия
(ч)
Тема 1. Основные понятия создания
2
корпоративных сайтов
Тема 2. Каскадные таблицы стилей
2
(CSS)
Тема 3. Использование стилей при
2
создании сайта
Тема 4. Использование программы
2
Dreamweaver
для вёрстки шаблонов сайта
Тема 5. Макетирование.
2
Эргономика WEB-сайта
Тема 6. HTML-редакторы с
2
графическим
пользовательским интерфейсом
(GUI)
Тема 7. Информационная
2
архитектура сайта
Тема 8. Создание динамических
2
элементов в
DreamWeaver
Тема 9. CMS (системы управления
4
контентом и
структурой сайта). Установка и
администрирование
Тема 10. Размещение сайта на
2
сервере и поддержка
сайта
Тема 11. Оценка и тестирование
4
корпоративного
сайта
Итог
32
о:
9
Практи
ч.
занятия
(ч)
2
8
4
2
6
6
6
2
4
2
4
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: формирование
рамок и отступов. Использование псевдоклассов и псевдоэлементов.
1
0
Позиционирование элементов на странице при помощи 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. Информационная архитектура сайта
1
1
Элементы информационной архитектуры. Распределение
информации по разделам сайта с учетом информационной,
логической и визуальной взаимосвязи между разделами. Основные
компоненты 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 странице.
1
3
Тема 9. CMS (системы управления контентом и структурой
сайта). Установка и администрирование
Установка системы CMS. Настройка системы. Панель
администратора. Настройка базы данных. Установка прав
администратора. Изменения профилей пользователей. Изменение
прав пользователей. Добавление разделов. Добавление блоков.
Добавление новостей. Редактирование блоков.
Практическая работа №7. Установка и настройка системы
управлением сайтом Joomla. Создание разделов, отключение,
включение и размещение информационных блоков, система
управления пользователями. Управление контентом.
Тема 10. Размещение сайта на сервере и поддержка сайта
Описание метаинформации сайта с помощью элемента МЕТА.
Вопросы хостинга. Настройка FTP-клиента. Вопросы поддержки
сайта. Способы «раскрутки» сайта.
Тема 11. Оценка и тестирование сайта
Критерии оценок созданного сайта. Способы снижения
визуального шума и повышения четкости подачи материала. Этапы
стандартного тестирования сайта. Методика тестирования сайта на
аудитории. Выработка предложений по редизайну и обоснование
необходимости редизайна.
1
4
КОНТРОЛЬНЫЕ ВОПРОСЫ К ЭКЗАМЕНУ
-
Понятия «сетевой информационный ресурс», «сайт», «вэб-
страница», «вэб-сервер».
-
Структура HTML-документа, тэги, параметры тэгов.
-
Применение каскадных таблиц стилей (CSS) в HTML-документе.
-
Системы управления контентом (CMS), общие принципы работы.
-
GUI-редакторы. Функциональные возможности.
-
Логическая структура и физическая структура сайта.
-
Разработка графического макета web-сайта. Приёмы и методы.
-
Пользовательский интерфейс. Особенности в web-среде.
-
Макетирование web-страниц при помощи каскадных таблиц стилей.
Фиксированные и адаптируемые страницы, отличия, недостатки и
достоинства.
-
Принципы построения системы навигации.
-
Таблицы в HTML. Макетирование web-страницы при помощи
таблиц.
-
Конструкция и формат страниц, основные принципы.
-
Что такое интранет, экстранет и Интернет. Методы использования в
организации корпоративного web-сайта.
-
Домен, уровни доменов.
-
Методы привлечения посетителей на коммерческий web-сайт.
-
Основные компоненты web-страницы.
-
Использование графики в web-сайтах, виды и различия графических
форматов.
1
5
-
Фреймы. Плюсы и минусы использования фреймов.
-
Навигационные карты, области применения.
-
Методы оптимизации 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 (+ CDROM). - М.: ДиаСофт, 2003.
-
Гончаров А. Web-дизайн. - М.: КУДИЦ-Пресс, 2007.
1
6
-
Гультяев А. К, Машин В. А. Уроки Web-мастера. Технология.
Дизайн. Инструменты. - СПб.: Крона принт, 2001.
-
Леоньтьев Б. Web-дизайн. Тонкости, хитрости и секреты (+ CDROM). - М.: СОЛОН-пресс. - 2003.
-
Нильсен Я. Веб-дизайн: книга Якоба Нильсена. - Пер. с англ. - СПб.:
Символ-Плюс, 2001.
-
Ноблес Р., Греди К-Л. Эффективный Web-сайт. Учебное пособие. М.: ТРИУМФ, 2004.
1
7
-
Орлов Л. В. Как создать и «раскрутить» web-сайт в Интернет. - М.:
Альянс-пресс, 2003. - (Серия книг «Профи»).
-
Режепп А., Степанов Ю., Павлова О. Типичные ошибки при
создании корпоративных сайтов // Мир Internet. - 2001. - № 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-
itt.ru/FWO/quick_r.html
-
http://all4vou.bv.ru/Webmastering/Articles/Technoloev/06.shtml -
Denveroid Area - Web-mastering | Статьи | CSS - Cascading Style
Sheets
-
http://allrussweb.com.ru/webdesign/ - Web-дизайн, всё о web-
дизайне...
]I
-
http: //css.manual.ru/index.html - CCS справочник
-
http://lipchinlabs.narod.ru/useful.htm - Lipchin Labs - INTERFACE
DESIGN STUDIO: Полезное: Статьи
-
http: //webmaster. sbridge. ru/wml.php - Теоретические рассуждения с
практическими последствиями
-
http://www.citforum.ru/internet/html/index.shtml -Язык
гипертекстовой разметки (HTML)
-
http://www.citforum.ru/internet/html40/intro/intro.html - Введение в
HTML 4.0
-
http://www.postroika.ru/
-
http://www.usability.ru/ - Usability in Russia
-
Лебедев В.A Web как поле художественного творчества. - См.:
http:// www.future.museum.ru/ part03/03040601.
-
Петрова Н. Hand made Web-site, или живопись в Интернете. - См.:
http://www.rik.ru/Pub.htm (21.01.2000)
]I