Задание к курсовой работе - Учебная деятельность

Оглавление
ВВЕДЕНИЕ .................................................................................................................. 4
ПРОЕКТНАЯ КОМПЬЮТЕРНАЯ ГРАФИКА. CORELDRAW ............................ 5
РАЗРАБОТКА ГИПЕРТЕКСТОВЫХ СТРАНИЦ В СРЕДЕ HTML ................... 12
ЗАДАНИЕ К КУРСОВОЙ РАБОТЕ........................................................................ 27
ПРИЛОЖЕНИЯ ......................................................................................................... 31
Приложение 1 ............................................................................................................ 31
Приложение 2 ............................................................................................................ 33
СПИСОК ЛИТЕРАТУРНЫХ И ИНТЕРНЕТ – ИСТОЧНИКОВ.......................... 35
3
ВВЕДЕНИЕ
Предлагаемые методические указания предназначены для обучающихся
по
специальности
031601
«Реклама»
факультета
специального
профессионального образования. Указания используются при выполнении
лабораторных работ, индивидуальных заданий и курсовой работы по
дисциплине «Проектная компьютерная графика и мультимедиа».
Основной целью курса является формирование у обучающихся базовых
компетенций, необходимых для использования компьютерных технологий при
создании печатного рекламного документа, мультимедийных и web –
технологий для разработки и внедрения рекламного продукта. В процессе
выполнения лабораторных работ, обучающиеся должны овладеть технологией
создания Интернет–рекламы, аппаратным и программным обеспечением;
техническими и программными средствами для обработки компьютерной
графики, аудио- , видео- , анимации.
Содержание дисциплины «Проектная компьютерная графика и
мультимедиа» базируется на знаниях, полученных при изучении дисциплин
«Информатика», «Пакеты прикладных программ», «Техника и технологии
рекламного видео», «Выполнение рекламных проектов в материале»,
«Художественное проектирование рекламного продукта», «Разработка
творческой концепции рекламного продукта».
Рекламная компьютерная графика стала популярной во многом благодаря
телевидению. С помощью компьютерной графики создаются рекламные
ролики, мультфильмы, компьютерные игры, видеоуроки, видеопрезентации.
Графические пакеты для этих целей требуют больших ресурсов компьютера по
быстродействию и памяти. Отличительной особенностью этих графических
пакетов является возможность создания реалистических изображений.
Компьютерная мультипликация и трехмерная графика являются яркими
примерами мультимедиа.
Мультимедиа – комплекс программных и аппаратных средств,
позволяющих пользователю работать в диалоговом режиме с разнородными
данными (графикой, текстом, звуком, видео), организованными в виде единой
информационной среды.
Курс посвящен решению задач компьютерного моделирования и
визуализации рекламных объектов наиболее эффективными и современными
методами графики и мультимедиа-технологий. При создании рекламы
компьютерная графика помогает представить продвигаемый товар в наиболее
выгодном свете, мультимедиа позволяют организовать рекламу по всему миру
посредством фактически неограниченных web-технологий.
4
ПРОЕКТНАЯ КОМПЬЮТЕРНАЯ ГРАФИКА. CORELDRAW
Основные понятия
CorelDRAW - многофункциональный пакет для работы с самыми
различными графическими проектами. Совокупность программ ориентирована
на решение множества различных задач, возникающих при работе пользователя
в области иллюстративной графики. Точные инструменты, хорошая
совместимость файлов различных форматов позволяют работать с логотипами,
вывесками, маркетинговыми материалами и интернет-графикой. В составе
пакета - редактор векторной графики CorelDRAW X6, редактор растровой
графики PHOTO-PAINT X6, программа для преобразования растровых
изображений в векторные Corel PowerTRACE X6, программа для создания
скриншотов Corel CAPTURE X6, электронная книга по работе с пакетом
CorelDRAW Handbook. CorelDRAW Graphics Suite X6 отличает полный набор
дизайнерских возможностей, скорость и простоту в использовании.
CorelDRAW Graphics Suite X6, доступна только для Microsoft Windows.
Более ранние версии выпускались также для Macintosh и Linux.
CorelDRAW Graphics Suite позволяет импортировать файлы следующих
форматов (для некоторых форматов необходима установка дополнительных
компонентов):

Adobe Illustrator (AI)

JPEG 2000 (JP2)

Шрифт Adobe Type 1 (PFB)

Изображение Kodak Photo-CD (PCD)

PICT (PCT)



Растровое изображение Windows
(BMP)

Растровое изображение OS/2 (BMP)
Метафайл компьютерной графики
(CGM)
Формат переносимых документов
Adobe (PDF)

Файл плоттера HPGL (PLT)

Переносимая сетевая графика (PNG)

CorelDRAW (CDR)

Adobe Photoshop (PSD)

Corel Presentation Exchange (CMX)

Corel Painter (RIF)

Corel PHOTO-PAINT (CPT)


Библиотека символов Corel (CSL)

Ресурс курсоров (CUR)

Файлы Microsoft Word (DOC, DOCX
или RTF)
Масштабируемая векторная графика
(SVG)

Macromedia Flash (SWF)

Растровое изображение TARGA (TGA)

Растровое изображение TIFF (TIF)

Microsoft Publisher (PUB)

Corel Paint Shop Pro (PSP)

Corel DESIGNER (DSF или DES)

Шрифт True Type (TTF)
5

Формат обмена чертежами AutoCAD
(DXF) и База данных изображений
AutoCAD (DWG)

Инкапсулированный PostScript (EPS)

PostScript (PS или PRN)

GIF

HTML

JPEG (JPG)

Документ WordPerfect (WPD)

Графика WordPerfect (WPG)

Форматы файлов камеры Raw


Сжатое растровое изображение
вейвлета (WI)
Формат Метафайл Windows (WMF)
Краткая характеристика программы CorelDraw
Каждая следующая версия CorelDRAW содержит дополнительные
средства для работы с векторной графикой, модифицируется интерфейс
программы - возможность настройки интерфейса. В CorelDRAW 10 все
команды можно поместить в меню или убрать из него, добавить кнопки на
панели инструментов или убрать их. Вы можете сохранить все настройки,
чтобы после загрузить их и восстановить внешний вид окна редактора. Лучше
реализована отмена и возврат последних действий, доступно больше заготовок,
поддерживается большее количество форматов файлов. Кроме простых фигур
легко создавать автофигуры - готовые объекты, сгруппированные в нескольких
категориях. Нож и ластик теперь работают с растровыми объектами,
вставляемыми в иллюстрацию. Значительно улучшена работа с текстами.
Лучше поддерживаются многочисленные языки, добавлены возможности
форматирования текста. Проще пользовательский интерфейс при работе с
цветом, работа с разноцветными иллюстрациями позволяет получить более
качественные результаты. Улучшена поддержка разработки рисунков для
Internet. CorelDRAW позволяет сгенерировать Web- страницу и разместить ее в
сети. Автоматизированы некоторые действия, например, создание кнопок,
меняющихся при подведении указателя мыши и при щелчке мышью.
Возможности CorelDRAW 10 работы с текстом сравнимы с текстовыми
редакторами - форматирование позволяет непосредственно в редакторе
создавать небольшие текстовые документы с графическими объектами.
Добавить текст и расчеты так же просто, как в Word и Exel. Добавлена новая
функция будет для смет, или расчетов, относящихся непосредственно к
изображению. Объекты можно накладывать и полностью или частично
6
закрывать друг друга. Можно использовать любые
импортированные
растровые рисунки. CorelDRAW 10 содержит набор clipart.
В панель управления встроены подсказки. Появился новый инструмент
для работы с таблицами, он позволяет быстро создавать и редактировать
находящийся в них текст. Можно работать одновременно над несколькими
проектами и свободно перемещать объекты из одного проекта в другой,
функция независимых слоев для каждой страницы. Включена функция обмена
проектами онлайн. Форматировать текст можно в реальном времени. ,
Улучшена совместимость в Windows Vista, оптимизирована работа на других
платформах. Обновлен пакет эффектов для работы с векторной графикой.
Понятие объекта в CorelDRAW
Объект - элемент из которых состоят изображения: прямая, круг,
прямоугольник, кривая, замкнутая кривая, многоугольник и другие.
CorelDRAW 10 может создавать группы объектов для дальнейшего
редактирования группы как единого объекта. Любой векторный объект
CorelDRAW имеет ряд общих характеристик (рис. 1): некоторое количество
точек или узлов, соединенных прямыми или кривыми линиями - сегментами.
Координаты узлов и параметры сегментов определяют внешний вид объекта.
Область внутри объекта может быть залита одним цветом, смесью цветов или
узором. Сегменты объекта образуют контур, который также имеет свой цвет и
толщину. Различают замкнутые и разомкнутые контуры. У одного объекта не
может быть различных форматов - для создания сложных изображений
требуется использовать множество объектов.
Рис. 1. Пример объекта
7
Основные принципы работы с CorelDRAW
Редактирование узлов, сегментов, контура и заливки объекта позволяет
создать требуемое изображение в редакторе векторной графики. Важным
объектом
CorelDRAW
являются
плавно изогнутые кривые, с помощью
которых можно построить любой
произвольный контур - это кривые
Безье (Pierre Bezier). Положение о том,
что любую кривую можно задать с
помощью двух векторов, находящихся
в начале и конце кривой, легло в
Рис. 2. Кривая Безье
основу описания кривых Безье в
CorelDRAW. Внешний вид кривой
определяет положение начальной и конечной точки (то есть узлов кривой), а
также кривизна, то есть изогнутость между двумя узлами. Кривизна
определяется двумя параметрами кривой в каждом узле, которые графически
представлены с помощью отрезков, выходящих из узлов. Эти отрезки
называются манипуляторами кривизны (рис. 2). Внешний вид кривой Безье
определяют координаты узлов, наклон и длина манипуляторов кривизны.
Первым параметром, определяющим кривизну, является наклон кривой
при ее входе в узел. Наклон манипулятора кривизны и показывает наклон
кривой. Второй параметр - степень кривизны, т. е. насколько при удалении от
узла кривая расходится с прямой, проведенной через узел с тем же наклоном.
Степень кривизны определяется длиной манипулятора кривизны. Если
манипуляторы кривизны с обеих сторон сегмента имеют равны нулю, то
сегмент будет прямым. Увеличение длины манипулятора кривизны превращает
сегмент в кривую.
В CorelDraw есть возможность вставки растровых рисунков в документ,
причем растровое изображение является отдельным объектом и его можно
редактировать независимо от других объектов. В CorelDRAW 10 кроме
собственно редактора векторной графики входит редактор растровой графики
Corel Photo-Paint. Эта программа также имеет средства для работы с текстом благодаря множеству видов форматирования фигурного и простого текста как
объекта, в редакторе можно создавать рисунки с текстовым сопровождением,
фигурный текст позволяет выполнять над ним операции, присущие векторным
8
объектам. Corel R.A.V.E. предназначена для создания анимации, позволяет
экспортировать результат в различные популярные форматы.
Работа над любым изображением заключается в создании объектов, их
редактировании и размещении. Сначала создается приблизительная форма
объектов, после чего форма уточняется путем добавления, удаления и
перемещения узлов контура, далее задается цвет контура и выбирается заливка
объекта. В редакторе можно создать и графические примитивы
(прямоугольники, эллипсы, многоугольники, автофигуры, спирали и решетки),
и произвольные фигуры, состоящие из прямых и кривых линий. В наборе
стандартных фигур есть достаточно сложные рисунки.
Тематика практических работ
№ п/р
Тема практической работы
1
Построение фигур
2
Построение линий
3
Построение сложных объектов
4
Интерактивное перетекание. Имитация объема
5
POWERCLIP. Обработка растровых изображений
6
Интерактивный объем
7
Интерактивное искажение. Имитация объема
8
Применение навыков
Индивидуальное задание по созданию визитной карточки
Создать макет визитной карточки работника горнопромышленного
предприятия при помощи графического редактора CorelDRAW. Разработать
логотип предприятия. Контактную информацию, название предприятия и вид
предлагаемой продукции разработать самостоятельно.
Общие рекомендации к исполнению визитной карточки
9
Визитная карточка – это часть имиджа не только сотрудника компании,
но и самой компании. Основная функция визитки – предоставление
информации о ее владельце или об организации.
1. Обязательно указывается полное наименование организации, фамилия, имя,
отчество сотрудника, занимаемая им должность и контактные данные,
включающие номера телефонов, факса, адрес компании, в том числе и
электронный,
а
также
адрес
интернет-сайта.
Предпочтительно
использование не более 2-х типов шрифтов и 3-х различных цветов,
классический вариант – чёрно-белая палитра без применения дизайнерского
оформления.
2. Дополнительно позволяется указать данные о сфере деятельности компании
и предоставляемых ею услугах, продукции.
3. Не рекомендуются к применению: гербы, различная символика, девизы, а
также фотографии.
4. Стандартный размер визитки 90×50 мм. В макет необходимо внести
технологический припуск размером около 4 мм — он в дальнейшем будет
обрезан при изготовлении в типографии.
Корпоративная визитка подчеркивает представительность компании,
дизайнерская – показывает незаурядность и широкие возможности ее
владельца, личная — его жизненные устремления. Основная задача —
заинтересовать предоставляемыми услугами или продукцией потенциального
партнера (рис. 3).
10
Рис. 3. Примеры выполнения визитной карточки
11
РАЗРАБОТКА ГИПЕРТЕКСТОВЫХ СТРАНИЦ В СРЕДЕ HTML
Язык гипертекстовой разметки HTML (HyperText Markup Language)
является одним из компонентов технологии ведения гипертекстовых
распределенных баз данных World Wide Web, он был предложен Тимом
Бернерсом-Ли в 1989 году в качестве одного из компонентов технологии
разработки распределенной гипертекстовой системы World Wide Web.
В качестве элемента гипертекстовой базы данных указывается обычный
файл, который хранится средствами файловой системы операционной среды
компьютера. Обобщенный язык разметки позволяет легко интегрировать
мультимедийные файлы и предоставляет большую гибкость в компоновке
страницы. создавать документы, которые можно затем использовать для разных
целей: опубликование в виде обычных документов, создание архивов
документов, опубликование в Internet.
Гипертекстовая база данных в концепции WWW - это набор текстовых
файлов, написанных на языке HTML, который определяет форму
представления информации (разметка) и структуру связей этих файлов
(гипертекстовые ссылки) так, чтобы браузер (программа-просмотрщик)
интерпретировал определенные теги и отображал их в нужном формате. Это
позволяет обеспечить интересный интерфейс при отображении. Для простоты
изложения HTML можно считать, что база данных WWW - это документы,
размеченные HTML. Такой подход предполагает наличие еще одной
компоненты технологии - интерпретатора языка. В World Wide Web функции
интерпретатора разделены между сервером гипертекстовой базы данных и
интерфейсом пользователя.
Специфический формат HTML является мировым стандартом DTD
(Document Type Definition – определение типа документа) кодирования и
создания Web-страниц.
Важность указания версий HTML в настоящее время все снижается и
снижается, т.к. разработчики браузеров сейчас внедряют в них новые
возможности HTML независимо ото всех.
HTML— это система верстки, которая определяет, как и какие элементы
должны располагаться на веб-странице. Информация на сайте, способ ее
12
представления и оформления зависят исключительно от разработчика и тех
целей, которые он перед собой ставит.
Принципы построения и интерпретации HTML
Структура гипертекстовой сети задается гипертекстовыми ссылками.
Гипертекстовая ссылка - это адрес другого HTML документа, который
тематически, логически или каким-либо другим способом связан с документом,
в котором ссылка определена.
Для записи гипертекстовых ссылок в системе WWW была разработана
специальная форма, которая называется URL (Universe Resource Locator –
уникальный указатель ресурсов).
Специальные коды <
>, называемые тегами разметки (англ. tag –
признак, часть элемента данных, определяющая его тип) указывают Webбраузерам, как интерпретировать и отображать
Теговая модель описывает документ как совокупность элементов, каждый
из которых окружен тегами. По своему значению теги близки к понятию скобок
"begin/end" в универсальных языках программирования, которые задают
области действия имен локальных переменных, динамику распределения
памяти блока и т. п. Теги определяют область действия правил интерпретации
текстовых элементов документа. Элементы документа, размеченного при
помощи HTML, называют контейнерами.
Конструкция перед содержанием элемента называется тегом начала
документа, а конструкция, расположенная после содержания элемента, -тег
конца элемента. Большинство тегов — парные, то есть на каждую
открывающую метку вида <tag> есть закрывающая метка вида </tag> (Рис. 4.).
13
Рис. 4. Пример простого HTML – документа
Созданный в простом текстовом редакторе (в данном случае - в
«Блокноте») файл сохраните с расширением *.html или *.htm – и браузер
интерпретирует его так (рис. 5):
Рис. 5. Браузер присваивает имя «Пример» и отображает на экране текст,
заключенный между тегами <body> и </body> (тело документа).
Теги можно вводить как строчными, так и прописными буквами.
Например, <body>, <BODY> и <Body> будут восприняты браузером
одинаково.
Для удобства чтения можно вводить дополнительные отступы, однако в
HTML это совсем не обязательно. Браузеры игнорируют символы конца строки
и множественные пробелы в HTML-файлах.
Стандартные теги HTML поддерживаются всеми используемыми
браузерами.
Общий синтаксис написания тегов следующий:
14
<тег атрибут1="значение" атрибут2="значение">
<тег атрибут1="значение" атрибут2="значение">...</тег>
У тегов могут быть различные атрибуты, которые разделяются между
собой пробелом. Атрибуты можно подразделить на обязательные, они
непременно должны присутствовать, и необязательные, их добавление зависит
от цели применения тега.
Структура html-документа
HTML документ состоит из двух частей: <!DOCTYPE> и <html>. Тег
<!DOCTYPE> предназначен для указания браузеру, к какому типу относится
текущий документ.
DOCTYPE
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 5
Описание
Строгий
синтаксис HTML.
Синтаксис
версии 5
<!DOCTYPE html>
Тег <HTML> предназначен для описания содержимого html-документа.
Данный тег должен включать в себя теги <head> ...</head> и <body>...</body>.
Описание дополнительной информации о документе находиться в теге
<head>. Здесь указывается, какие каскадные таблицы стилей и скрипты должны
быть подключены к документу, кодировка документа, заголовок.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Пример
веб-страницы</title>
</head>
Тег <body> является контейнером для html-документа. Без использования
дополнительных тегов содержимое документа интерпретируется как обычный
текст (рис. 6).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Пример1</title>
</head>
<body>
Пример текста
15
</body>
</html>
Рис.6 . Простой HTML документ
Теги html
Тег <p>
При открытии html-документа игнорируются знаки переноса строки и
множественные пробелы. Для разбивки текста на абзацы необходимо
использовать тег <p> (рис 7).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Пример1</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>
16
Рис. 7 Применение тега <p>
Тег <a>
Для создания ссылки необходимо сообщить браузеру, что текст является
ссылкой, а также указать адрес документа, на который следует сделать ссылку.
Общий синтаксис создания ссылок следующий:
<a href="URL">текст ссылки</a>
Атрибут href является обязательным и определяет URL (Universal Resource
Locator, универсальный указатель ресурса), иными словами, адрес документа,
на который следует перейти, а содержимое контейнера <a> является ссылкой
(рис. 8):
<a href="google.com">Google</a> и <a href="yandex.com">Yandex</a>
Рис. 8 . Применение тега <a>
Тег <img>
Тег <img> предназначен для вставки изображений в html-документ.
Атрибут src задает URL изображения, которое нужно добавить в документ.
Атрибут alt задает альтернативный текст, который отображается при
17
невозможности показать изображение.
<img src="https://www.google.ru/webhp?tab=ww&ei=bubfUqujHaeZyAP9soC
QDQ&ved=0CBMQ1S4" alt="Логотип Google">
Атрибуты src и alt являются обязательными.
Тег <table>
Тег <table> служит контейнером для элементов, определяющих
содержимое таблицы. Любая таблица состоит из строк и ячеек, которые
задаются с помощью тегов <tr> и <td> (рис. 9).
Структура таблицы:
<table border="1">
<tr><td>Ячейка11</td><td>Ячейка12</td></tr>
<tr><td>Ячейка12</td><td>Ячейка22</td></tr>
</table>
Рис. 9. Таблица
Атрибут colspan тега <td> позволяет объединять ячейки в строке:
<td colspan="2">...</td>
Подобным образом действует атрибут rowspan для объединения ячеек в
столбце.
Тег <div>
Тег <div> предназначен для объединения содержимого документа в блоки:
<div> Этот блок содержит текст<div>
<div> Этот блок содержит текст и гиперссылку <a href=”http://google.com”>
на google.com</a><div>
18
Общие атрибуты тегов
Для большинства тегов доступны следующие атрибуты:
class – определяет имя класса, которое позволяет связать тег со
стилевым оформлением;
hidden – скрывает содержимое элемента от просмотра;
id – указывает имя стилевого идентификатора;
style – применяется для определения стиля элемента с помощью
правил CSS;
title – описывает содержимое элемента в виде всплывающей
подсказки.
Оформление html-документа
Для оформления документа применяются каскадные таблицы стилей CSS.
Это наборы правил, по которым должны быть оформлены элементы htmlдокумента.
Общий вид CSS правил: <селектор>{<свойства>:<значение>}
<селектор> – это признак, по которому определяется, будут или нет
применяться правила к тегу. В качестве селектора могу выступать теги,
значения атрибутов id и class.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Пример1</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">
h1{
color:red;
font-weight:200;
}
.cite{
color: navy; /* Цвет текста */
margin-left: 20px; /* Отступ слева */
border-left: 1px solid navy; /* Граница слева от текста
*/
padding-left: 15px; /* Расстояние от линии до текста */
}
#p3{
color: green; /* Цвет текста */
margin-left: 20px; /* Отступ слева */
border-left: 1px solid green; /* Граница слева от текста
*/
padding-left: 15px; /* Расстояние от линии до текста */
19
}
</style>
</head>
<body>
<h1>Заголовок</h1>
</body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor.</p>
<p class="cite"> ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate </p>
<p id="p3"> esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.</p>
</html>
Список свойств каскадных таблиц стилей (рис. 10) можно посмотреть на
странице http://www.w3.org/TR/CSS21/propidx.html
Рис. 10. Использование таблиц стилей
Некоторые специальные символы
Символ
<
>
&
Тег HTML
&lt
&gt
&amp
20
“
©
®
-
&quot
&copy
&reg
&emdash
Создание сайтов
Сайт— совокупность электронных документов (файлов) частного лица
или организации в компьютерной сети, объединённых под одним адресом
(доменным именем или IP-адресом).
Страницы сайтов — это набор текстовых файлов, размеченных на языке
HTML. Эти файлы, будучи загруженными посетителем на его компьютер,
понимаются и обрабатываются браузером и выводятся на средство
отображения пользователя (монитор, экран КПК, принтер или синтезатор речи).
Страницы сайтов могут быть простым статичным набором файлов или
создаваться специальной компьютерной программой на сервере.
Сайт выполняет не только роль справки, аннотации, но и
функционального офиса, новостного или медийного центра. В настоящее время
большинству из них свойственна динамичность и интерактивность. Для таких
случаев специалисты используют термин веб-приложение — готовый
программный комплекс для решения задач сайта. Веб-приложение входит в
состав сайта, но веб-приложение без данных сайтом является только
технически. Оболочку (форму, шаблон) нужно наполнить и активизировать.
Продвижение сайтов стало ёмкой индустрией в сети.
Классификация сайтов
По схеме представления информации, её объёму и категории решаемых
задач можно выделить следующие типы веб-ресурсов

Интернет-портал

Информационные ресурсы:
o
Тематический сайт
o
Тематический портал

Интернет-представительства владельцев бизнеса (торговля и
услуги, не всегда связанные напрямую с Internet):
o
Сайт-визитка
o
Представительский сайт
21
o
o
o
o
o

o
o
o
o
o
o
o
o
o
o
o
o


Корпоративный сайт
Каталог продукции
Интернет-магазин
Промо-сайт
Сайт-квест
Веб-сервис :
Доска объявлений
Каталог сайтов
Поисковые сервисы
Почтовый сервис
Веб-форумы
Блоговый сервис
Файлообменный пиринговый сервис
Облачное хранилище данных
Сервис редактирования данных
Фотохостинг
Видеохостинг
Социальные медиа
Комбинированные веб-сервисы (Социальные сети)
Комбинированные веб-сервисы (Специализированные социальные
сети).
Изготовление сайтов как работающих целостных информационных
ресурсов и систем — составной процесс, вовлекающий труд различных
специалистов. Этот вид деятельности называется веб-разработка.
Общая структура сайта
При планировании структуры сайта необходимо продумать этапы
создания: структуры каталогов, структуры навигации, необходимость заставки
сайта.
Структура каталогов
С самого начала следует упорядочить содержимое проекта. Все
изображения необходимо для простоты ориентирования поместить в одну
папку, служебные файлы - в другую, сами страницы также можно разделить
(например, по разделам). Для этого следует определить структуру будущего
сайта.
Существует несколько основных структур:
22
•линейная - страницы располагаются в определенном порядке. Переход с
одной страницы на другую строго определен. Такая структура необходима,
например, для обучающих программ: пользователь не пропустит нужный
материал, так как страницы расположены в строгом порядке (рис. 11).
Рис. 11. Пример линейной структуры
•иерархическая - страницы разбиты по категориям и подкатегориям.
Такая структура наиболее распространена и удобна (рис. 12).
Рис. 12. Пример иерархической структуры
•произвольная - страницы расположены в свободном порядке. Такая
структура оправдана только для небольших сайтов (рис. 13).
23
Рис. 13. Пример произвольной структуры
Основные системы навигации:
•Текстовая система навигации - самый распространенный вид (самая
надежная). В общем случае, такая навигация представляет собой оформленные
различными способами текстовые ссылки.
Различают горизонтальное и вертикальное меню. Вертикальное меню
располагается справа или слева каждой страницы. Горизонтальное меню
располагается, как правило, сразу под шапкой сайта. Для повышения удобства
рекомендуется дублировать горизонтальное меню внизу каждой страницы.
•Кнопки - являются вторыми по частоте использования элементами
навигации. Кнопки могут быть любого размера, формы, цвета и стиля. Можно
оставить лишь вид кнопки (фоном), а текст на ней все-таки оформить в виде
ссылки.
•Навигационные карты. При таком подходе берется изображение и к
различным его областям привязываются ссылки. Карты обязательно надо
дублировать хотя бы скромным горизонтальным меню внизу страницы. Иначе,
при малейшем сбое пользователь вообще никуда не сможет перейти.
Заставки сайта
Заставка - обычно большая фотография со звуковым сопровождением или
видеоролик. Если заставка все же присутствует на сайте, то необходимо
реализовать функцию, позволяющую пропустить загрузку и воспроизведение
ролика для тех, кто не хочет его просматривать.
Принципы оформления страниц сайта
24
Главная страница сайта
Главная страница должна удовлетворять некоторым условиям:
1. Должна отражать тематику сайта.
2. Должна быть интересной, чтобы пользователю захотелось посетить
другие страницы сайта.
3. Обязательно должен присутствовать способ обратной связи (e-mail,
телефон, адрес).
4. Главная страница должна отличаться от остальных, но соответствовать
общей стилистике сайта.
5. Желательно разместить функцию поиска по сайту.
6. Желательно раздел с постоянно обновляющейся информацией,
например: новости, акции, советы дня.
Остальные страницы сайта
Внешний вид всех страниц сайта должен быть выдержан в едином стиле.
На них должно быть указано название ресурса и обязательная ссылка на
главную страницу. В остальном каждая страница должна быть уникальна, т. е.
иметь свое содержание. Основные правила:
1. Если длина страницы больше 2,5 экранов, то необходимо разбить
страницу на две.
2.Текст должен быть разбит на абзацы, обязательно должны быть
отступы и поля. Текст должен быть удобочитаемым.
3.Текст должен иметь картинки и графики.
Задание к индивидуальной работе
Создать HTML-страницу, используя работы, выполненные в ходе
обучения по дисциплинам «Пакеты прикладных программ», «Техника и
технология рекламной фотографии», а также выборочные материалы из сети
Internet.
Структура HTML-страницы представлена на рис. 14
При создании не использовать быстрых средств разработки web-сайтов.
25
Главная
Мои работы
Сведения об авторе
История
мультимедиа
Контакты
1. Лабораторные работы по Corel Draw
8 файлов для просмотра
2. Лабораторные работы по HTML
8 файлов для просмотра
3. Лабораторные работы по MS PowerPoint
8 файлов для просмотра
4. Лабораторные работы по Adobe Photoshop
8 файлов для просмотра
Рис.14. Структура HTML-страницы
26
ЗАДАНИЕ К КУРСОВОЙ РАБОТЕ
Курсовая работа на тему «Создание HTML – страниц»
Курсовая работа - самостоятельная учебная работа, целью которой
является закрепление теоретического материала и выработка навыков
самостоятельной творческой деятельности, а так же приобретение
исследовательских навыков, углубленное изучение темы и изложение ее в
письменном и графическом виде.
Пояснительная записка представляет собой текстовую часть. Она
выполняется на одной стороне листа бумаги формата А4 (210х297 мм).
Оформление текста должно соответствовать требованиям ГОСТ 2.105-95
«ЕСКД. Общие требования к текстовым документам». Объем текста– 10-15
страниц.
Курсовая работа представляется на бумажном носителе в виде
пояснительной записки. В электронном виде курсовые работы предоставляются
на компакт-диске в следующих файлах:
- текст работы в формате Microsoft Word 2007 и выше,
- презентация – Power Point 2007 и выше,
- мультимедийный
продукт,
выполненный
в
программах
Corel DRAW X5 и выше и документа гипертекстовой разметки HTML.
По структуре пояснительная записка к курсовой работе состоит из:
1. титульного листа (см. Приложение 1)
2. введения, в котором раскрывается актуальность темы, объект и
предмет курсовой работы, формулируются цели и задачи работы;
 Актуальность темы работы. В данном разделе указывается значимость
проведения работы именно по данной теме на современном этапе
развития общественных отношений, а также обосновывается позиция
автора по выбору им тематики курсовой работы. Кроме того, здесь может
быть затронута практическая и теоретическая ценность работы в
выбранном направлении.
 Объект исследования курсовой работы. Объектом курсовой работы
обозначается область, которую предстоит исследовать автору в его
работе. Объектом может выступать предприятие, организация или т. п.
27
 Предмет исследования курсовой работы. Предмет исследования уточняет
область исследования по выбранной тематике курсовой работы. Объект
всегда шире, чем предмет и, если объект одной курсовой работы в
принципе может совпасть с другими схожими работами, то предмет
исследования у каждой курсовой работы свой. Предмет – это всегда то
конкретное, что собирается исследовать автор.
 Цели и задачи работы. Цели работы предопределены предметом курсовой
работы, непосредственно вытекают из него, а задачи, в свою очередь,
предопределены целью. Чаще всего цель одна, а задач несколько. Цель
курсовой работы – это тот ориентир, то конечное состояние, которое
автор стремится в итоге достигнуть. Цели с задачами соотносятся как
общее и частное, то есть задачи – это определенные промежуточные
пункты, которые необходимо достичь, чтобы осуществить общую цель.
 При изложении материала необходимо соблюдать общепринятые
правила:
 не рекомендуется вести повествование от первого лица единственного
числа (такие утверждения лучше выражать в безличной форме);
 при упоминании в тексте фамилий обязательно ставить инициалы перед
фамилией;
3. основной части, которая состоит из двух разделов:
 в первом разделе содержатся теоретические основы разрабатываемой
темы; рассмотрение основных понятий и категорий в области
мультимедиа, применительно к теме работы, обоснование основных
методов, способов и технологических решений разработки
гипертекстовых страниц, аналитический обзор опыта ведущих
отечественных и зарубежных компаний в области мультимедиа,
определение перспектив развития мультимедиа.
 вторым разделом является практическая часть, которая представлена
кодами html, графиками, таблицами, схемами чертежами и т.п.; также
должны быть даны рекомендации и предложения по решению
поставленной задачи (создание мультимедийного продукта).
o заключения, в котором содержатся выводы и рекомендации
относительно возможностей практического применения материалов
работы;
28
списка используемой литературы;
o
приложения.
Задание к курсовой работе: Создать не менее 6 статических HTMLстраниц, посвященных предприятию, осуществляющему производство и
продажу горного инструмента и оборудования на территории РФ, где
представлен список товаров (не менее 5 видов) в соответствии с вариантом
задания.
Требования по страницам:
1.
Общая структура страниц должна состоять из двух фреймов. В
одном фрейме будет меню, в другом -должна выводиться соответствующая
информация.
2.
Титульная страница должна содержать в верхней части графическое
меню, логотип предприятия (вычерченный при помощи CorelDRAW),
рекламный слоган.
3.
Необходима страница, содержащая информацию о фирме и ее
реквизитах.
4.
Необходима страница, содержащая данные о товаре, у которого
возможен просмотр.
5.
Страницы должны содержать графические изображения выбранных
товаров, различные виды списков, таблицы.
Рекламный слоган, реквизиты, контактную информацию необходимо
домыслить самостоятельно, исходя из названия предприятия и предлагаемой
продукции (использование компетенций, полученных при обучении
дисциплинам «Техника и технологии рекламного видео», «Выполнение
рекламных проектов в материале», «Художественное проектирование
рекламного продукта», «Разработка творческой концепции рекламного
продукта» обязательно и необходимо).
Данные о товаре (фото, статистическую информацию, цены и т.п.)
предоставить, проанализировав информацию из литературных - и интернет –
источников по предложенной теме.
Общие рекомендации:
1.
Пожелания к дизайну сайта
Цветовая гамма, общая стилистика, наличие компьютерной графики.
2.
Структура сервера (оглавление)
Необходимо структурировать информацию по главам, разделам и
подразделам. Глубина вложения разделов не ограничивается, ( 2-3 уровня
достаточно).
3.
Навигация
o
29
Навигационное меню обычно состоит из главного и подменю внутренних
страниц. Вертикальные (внутри раздела) и горизонтальные (между разделами)
переходы не должны приводить к потере "ориентации". На внутренних
страницах полезно иметь кнопки "возврата" к предыдущим страницам.
Интуитивно понятная навигация - залог успешной работы сервера.
4.
Структура и содержание страниц
На этом этапе необходимо описать все страницы сайта, включая название
страницы, текстовую и графическую информацию, ссылки на другие страницы
и сайты.
5.
Общие замечания
Опишите сценарий работы сайта. Представьте себя посетителем сайта и
подумайте, легко ли будет найти, прочитать и понять размещенную на сайте
информацию.
Порядок защиты курсовой работы
Курсовая работа представляется и защищается в установленное учебными
планами сроки. Курсовая работа, не представленная студентом в
установленные сроки, не отвечающая настоящим методическим требованиям,
не допускается к защите.
Для защиты курсовой работы студент готовит выступление
протяженностью 5-7 минут. Доклад должен включать следующие моменты:
обоснование актуальности темы, определение цели и задач курсовой работы,
освещение результатов, полученных в ходе изучения основных вопросов темы,
графические иллюстрации по разработанному мультимедийному продукту. При
этом следует сосредоточить особое внимание на положениях и выводах,
сформулированных автором самостоятельно. После выступления студент
отвечает на вопросы руководителя работы, а также лиц, присутствующих на
защите.
Критерии оценки курсовых работ
Основными критериями оценки курсовых работ являются:
1. Соответствие содержания программного продукта теме работы,
поставленным целям и задачам.
2. Использование научного аппарата (понятия, методы, литература).
3. Содержание мультимедийного продукта.
4. Практическая значимость выводов и рекомендаций, предложенных
автором.
Итоговая оценка по курсовой работе определяется всеми названными
критериями по пятибалльной системе.
30
ПРИЛОЖЕНИЯ
Приложение 1
МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ РФ
Федеральное государственное образовательное учреждение высшего
профессионального образования
«Уральский государственный горный университет »
Факультет среднего профессионального образования
Кафедра Инженерной графики
Специальность: 031601 Реклама
Специализация:
КУРСОВАЯ РАБОТА
ТЕМА
Студент ________ курса
Группа ____________
"___"_________ 20__ г. ____________________ (И. О. Фамилия)
Научный руководитель
ученая степень, ученое звание,
должность
"___"_________ 20__ г. ____________________ (И. О. Фамилия)
31
Екатеринбург, – 2011 г.
32
Приложение 2
Некоторые шестнадцатеричные цвета
Цвет
Шестизначный код
название
Черный
#00 00 00
Black
Белый
#FF FF FF
White
Красный
#FF 00 00
Red
Желтый
#FF FF 00
Yellow
Зеленый
#00 FF 00
Green
Желто-зеленый
#21 5E 21
Lime
Оливковый
#80 80 00
Olive
Темно-серый
#80 80 80
Gray
Светло-серый
#С0 С0 C0
Silver
Синий
#00 00 FF
Blue
Темно-синий
#04 04 8E
Navy
Бирюзовый
#00 FF FF
Agua
Сине-зеленый
#00 80 80
Teal
Малиновый
#8Е 04 6B
Maroon
Нежно-розовый
#BC 8F 8F
Fuchsia
Фиолетовый
#4F 2F 4F
Purple
RGB (аббр. англ. Red, Green, Blue) — аддитивная цветовая модель, как
правило, описывающая способ синтеза цвета. Аддитивной она называется
потому, что цвета получаются путём добавления (англ. addition) к черному. Все
16 777 216 цветов задаются смесью красного, зеленого и синего, каждому цвету
соответствует 2 знака из 6.
Гораздо быстрее можно задать один из 16 цветов по названию.
К началу XXI века, с полным исчезновением 8-битного цвета с рабочих
столов ОС, требование выбора «безопасной палитры» исчезло. Тем не
менее, Adobe Photoshop и поныне оснащён опцией «Только Web-цвета»
33
(англ. Only
Web
34
Colors).
СПИСОК ЛИТЕРАТУРНЫХ И ИНТЕРНЕТ – ИСТОЧНИКОВ
1. Николай
Чувахин.
Практическое
руководство
по
HTML
http://ru.ncbase.com/net/pr.htm
2. Виктор Ромашев CMS Drupal: Система управления содержимым сайта. —
Питер, 2010
3. Хаген Граф. Создание веб-сайтов с помощью Joomla! 1.5. —
Издательский дом "Вильямс", 2009
35
36