Курсовая работа: Электронный учебник по компьютерной графике и информатике

Московский Государственный Технический Университет им.Н.Э.Баумана

Калужский филиал

Кафедра ЭИУ-5 Системы Автоматизированного Проектирования

Курсовая работа на тему:

Электронный учебник по компьютерной графике и информатике

Выполнил: ст. группы САПР-41

Колесников Н.В.

Проверил: преподаватель

Максимова Е.А.

Калуга 2006

Содержание

Введение

Глава 1. Исследовательская часть

1.1Целесообразность выбора языка

1.2Управляющие структуры Microsoft Office Front Page

Глава 2. Инструкция программиста

Глава 3. Инструкция пользователя

3.1 ВходвсистемуMicrosoft Office Front Page

3.2 Описание пособия

Заключение.

Литература

Приложение

Введение

В курсовой работе была поставлена задача создания электронного учебника по компьютерной графике и информатике, с помощью которого абитуриенты и студенты 1 курса могут получить начальные знания по данным двум предметам.

Цель работы: научиться основным навыкам работы с html- языком.

Основные функции пособия: изучение курса лекций по информатике и компьютерной графике. Курсовой проект состоит из электронного учебника с тематической разбивкой.

Для создания курсового проекта использовалась оболочка Microsoft Office Front Page.

Глава 1. Исследовательская часть

1.1 Целесообразность выбора языка программирования

В данном курсовом проект была поставлена задача, которую можно реализовать различными способами. Но мы выбираем язык html и рабочую оболочку Microsoft Office Front Page, так как они намного упрощают процесс создания, что делает данный электронный учебник простым, универсальным и оптимальным.

FrontPage, входит в пакет приложений Microsoft Office, стал первым продуктом широкого использования для Internet, сочетающим в себе клиентскую и серверную части и обеспечивающим возможность разработки сайта в целом и установки его на большинство популярных серверов. FrontPage способен взять на себя всю необходимую работу по программированию. Однако FrontPage станет достаточно серьезным помощником и для профессиональных разработчиков, предпочитающих держать в руках полный контроль над творческим процессом.

На этапе подготовки задания на курсовой проект рассматривалось несколько возможных вариантов реализации данного модуля.

Сформулируем основные критерии, по которым производился выбор среды и языка программирования для создания данного модуля.

1) Создание максимально возможного удобства в работе. Для этого программа должна иметь удобный и современный интерфейс пользователя.

2) Работа модуля должна выполняться с максимально возможной скоростью. Нежелательны ситуации, в которых пользователю длительное время придется ожидать окончания работы модуля.

3) Поддержка длинных имен файлов.

4) Максимальная простота в установке и использовании модуля.

5) Минимальные затраты на разработку модуля.

В ходе последующего анализа имеющихся средств программирования на основании перечисленных критериев был выбран вариант написания данного модуля с использованием системы Microsoft Office Front Page для Windows95. Данное заключение основывалось на следующем.

Среда визуального программирования Microsoft Office Front Page работает в среде Windows 95 и предоставляет программисту возможность реализации всех достоинств графического интерфейса этой системы. Так как подавляющее большинство пользователей персональных компьютеров работают сегодня в среде операционных систем семейства Windows, то этот интерфейс является для них наиболее привычным и удобным.

Многие системы разработки приложений для Windows генерируют код-полуфабрикат, который не может быть выполнен процессором без дополнительной трансляции во время работы самой программы, что существенно снижает производительность компьютера. Microsoft Office Front Page же использует настоящий компилятор и компоновщик и генерирует стопроцентный машинный код. Такая реализация лишена непроизводительных затрат, что делает программы, написанные на Front Page, максимально эффективными.

Так как Front Page является средой программирования для Windows 95, то, как и сама операционная система поддерживает длинные имена файлов и папок.

Для запуска программ, написанных в Front Page, не требуются никакие дополнительные библиотеки, интерпретаторы кода и прочее. Достаточно взять один-единственный сгенерированный исполняемый веб-узел и запустить его там, где нужно. Для установки программы на другой компьютер не требуется создание каких-либо дистрибутивов, не нужен процесс инсталляции, достаточно переписать исполняемый файл программы.

Среда визуального программирования Front Page является мощным средством для быстрой и качественной разработки программ и веб-приложений для операционной системы Windows 95. Имеющаяся библиотека визуальных компонентов и макетов позволяет создать интерфейс с пользователем за считанные минуты. Компонентный принцип, используемый в Front Page, позволяет создавать полноценные веб-приложения, написав минимальное количество строк кода. Front Page представляет собой открытую систему, позволяя добавлять свои компоненты в систему, модифицировать уже имеющиеся стандартные компоненты благодаря тому, что предоставлены их исходные тексты. Благодаря всему этому разработка программ в среде Front Page становится легкой и приятной.

Таким образом, выбранная платформа, как было показано выше, удовлетворяет поставленным требованиям, поэтому выбор был остановлен на данной системе программирования.

1.2. Управляющие структуры Microsoft Office F ront Page

Базовым элементом языка разметки гипертекста является - ТЕГ (дескриптор, маркер ). Тег всегда заключен между скобками < > и имеет следующий вид:

<ТЕГ атрибут 1=ЗНАЧЕНИЕ ... атрибут N=ЗНАЧЕНИЕ>

Теги бывают одиночными и контейнерными. Контейнером называется пара: открывающий <ТЕГ> и закрывающий </ТЕГ> .

<ТЕГ> Контейнер </ТЕГ>

Открывающий тег служит для указания программе-браузеру начала какого-либо объекта или задания свойств объектов помещенных в контейнер. Закрывающий тег служит для указания программе-браузеру о конце объекта или окончания применения свойств, заданных в открывающем теге[2].

Атрибуты тега задают значения свойств данного объекта или объектов помещенных в контейнер. Значения свойств, содержащие пробелы, берутся в кавычки, в остальных случаях кавычки можно опустить.

HTML документ представляет собой обычный текстовый файл, содержащий маркированный тегами форматирования текст, а так же заданные специальными тегами ссылки на графические и прочие файлы мультимедиа, ссылки на другие документы HTML и ресурсы Internet.

Документ HTML начинается открывающим тегом <HTML> и заканчивается закрывающим тегом </HTML> . Между данной парой контейнерных тегов располагаются две другие основные части HTML документа: заголовок, заключенный в контейнер <HEAD>...</HEAD> и тело документа в контейнере <BODY>...</BODY> . Таким образом, структура простого HTML документа выглядит так:

Структура HTML документа [1]

<HTML> - Начало документа

<HEAD>

ЗАГОЛОВОК ДОКУМЕНТА

</HEAD>

<BODY>

ТЕЛО ДОКУМЕНТА

</BODY>

</HTML> - Конец документа

Ссылки в HTML документах

Как было сказано выше, HTML-документ это обычный текстовый файл. Гипертекстовым его делают содержащиеся в нем ссылки на другие документы и ресурсы Internet. Рассмотрим, что такое ссылка, какие бывают типы ссылок и как их задать в документе.

Ссылка состоит из двух компонентов: так называемого якоря (anchor ) или элемента привязки и URL (Universal Resurse Locator ) связанного с ним ресурса Internet.

Первый компонент ссылки - якорь это текстовый или графический объект, который, как правило, служит органом управления на Web-странице. Каждый раз при просмотре Web-страниц мы видим множество различных элементов-якорей. Это и красочные рекламные баннеры, всевозможные кнопки и иконки, выделенные подчеркнутым курсивом элементы текста, адреса электронной почты.

Второй компонент ссылки не отображается Web-браузером, но служит конкретным указанием, где в Internet найти, и что сделать при активизации пользователем соответствующего ему якоря. Адреса ресурсов бывают относительные и абсолютные.

Относительный адрес это адрес ресурса относительно компьютера и каталога загрузки HTML-документа, если иной базовый адрес не указан в заголовке документа, тег <BASE> . Относительный адрес задается в сокращенной форме (путь/файл ). Например, если ваша начальная страница index.htm загружена браузером c httр://www.site.ru, то использование в ней относительной ссылки resume.htm означает загрузку httр://www.site.ru/resume.htm.

Абсолютные адреса используются для привязки к ресурсам других узлов Internet и задаются полным форматом записи (httр://компьютер/путь/файл ).

Например: httр://www.sitename.ru/filename.htm.

Ссылки в документах задаются при помощи контейнера <A> ...</A> , следующей структуры:

<A HREF="Ресурс" TARGET="имя окна" TITLE="Подсказка">Элемент - якорь</A>

Атрибут HREF в открывающем теге задает ресурс который необходимо обработать браузеру при выборе на Web-странице, соответствующего ему якоря. Рассмотрим наиболее часто используемые ресурсы:

<A HREF="URL"> - ссылки на другие документы HTML и файлы.

<A HREF="ft р ://ftp_server/path/filename"> - ссылкинафайлы FTP-сервера.

<A HREF="mailto:e-mail"> - ссылки на адреса электронной почты.

<A HREF="news:newsgroup"> - ссылки на группы новостей.

Атрибут TITLE задает текстовую подсказку в стиле ToolTip, отображаемую браузером при позиционировании указателя-курсора в зоне элемента-якоря.

Заключенный в контейнер элемент-якорь выделяется браузером особым образом (текст-цветом и подчеркиванием, графика-рамкой ) при отображении на Web-странице. Можно задать свой способ выделения элемента-якоря в атрибутах тега <BODY> - тела документа.

Теперь рассмотрим несколько конкретных примеров использования ссылок в документах:

<A HREF="httр://www.site.ru" TITLE="Переход на www.site.ru"> Заходите к нам</A> - абсолютная ссылка: переход на сайт www.site.ru, текстовый якорь - Заходите к нам , с подсказкой.

<A HREF="/VW/cars.htm"> Модельный ряд VW </A> - относительная ссылка: открытие станицы cars.htm в подразделе VW относительно раздела основной страницы, текстовый якорь - Модельный ряд VW , без подсказки.

<A HREF="mailtо:[email protected]">Связь с вебмастером</A> - загрузка интерфейса к почтовой системе пользователя с автозаполнением реквизитов получателя, текстовый якорь - Связь с вебмастером , без подсказки.

<A HREF="ftр://ftp.site.ru/soft/driver.zip">Новый драйвер здесь</A> - доступ на FTP-сервере к файлу драйвера, текстовый якорь-Новый драйвер здесь , без подсказки.

При использовании графического файла в качестве элемента-якоря необходимо вместо текста в контейнере <A>...</A> использовать конструкцию <IMG SRC="файл"> . Например:

<A HREF="/VW/passat.htm"><IMG SRC="/VW/CARS/passat.gif"> </A> - относительная ссылка: открытие станицы passat.htm в подразделе VW относительно раздела основной страницы, графический якорь-passat.gif, без подсказки.

Кроме вышеперечисленных ссылок существуют еще внутренние ссылки или закладки. Этот тип ссылок используется для удобства перемещения в пределах документа. Для использования в HTML-документе закладок необходимо задать имена тех областей документа, на которые необходимо ссылаться.

Имя закладки в теле документа задается использованием атрибута NAME=ИмяЗакладки в контейнере <A>...</A> . Причем в данном случае текст, заключенный в контейнер, не является элементом-якорем (но выводится ).

Например, для перехода на начало документа необходимо поместить там закладку:

<A NAME=DocBegin>Начало документа<A>

Внутренняя ссылка на закладку в документе имеет следующий формат:

<A HREF="URL документа#ИМЯ">Элемент - якорь</A>

Например для размещения в документе ссылки на внутреннюю закладку (содержащуюся в данном документе ) необходимо применить:

<A HREF="#DocBegin">Перейти к началу документа</A>

А для размещения в документе ссылки на внешнюю закладку (например содержащуюся в файле Doc1.htm ) необходимо применить:

<A HREF="Doc1.htm#DocBegin">Перейти к началу документа Doc1.htm</A>

В заключении надо описать еще один важный атрибут тега ссылки, это атрибут TARGET . Данный атрибут задает окно либо фрейм назначения для документа заданного атрибутом HREF . По умолчанию загрузка происходит в текущее окно браузера, но можно указать имя нового или существующего окна, а так же одно из предопределенных имен объектов браузера: _blank, _self, _parent, _top . Например:

<A HREF="sample/sample.htm" TARGET="new_win">Пример</A> - загрузка документа sample.htm в новое окно браузера с именем "new_win".

Заголовок HTML документа

Заголовок является необязательной частью структуры HTML документа и служит для определения служебной информации и названия документа. В случае использования в документе контейнера заголовка <HEAD>...</HEAD> единственным обязательным его элементом является контейнер <TITLE>...</TITLE> , который задает имя документа. Именно это имя пользователь видит в заголовке окна браузера при просмотре Web-страниц в Internet.

Все остальные элементы заголовка не отображаются браузером и служат для определения различных свойств документа, его взаимосвязи с другими Web-страницами и служебной информации для внешних программ. Попробуем разработать типовой заголовок для ваших документов на примере Web-страницы об автомобилях.

Разложим теперь по полочкам все то, что мы написали в примере. Первый и обязательный элемент заголовка это контейнер <TITLE>...</TITLE> , задающий имя документа, отображаемое в шапке окна браузера.

Далее следует последовательность <META> тегов, задающих так называемую мета (или внешнюю ) информацию о документе. У <META> тегов наиболее часто используются следующие атрибуты:

· HTTP-EQUIV - задать имя мета-записи в документе;

· NAME - задать имя дополнительной мета-записи (по умолчанию NAME=HTTP-EQUIV );

· CONTENT - присвоить значение мета-записи заданной атрибутом NAME или HTTP-EQUIV;

· LANG - язык описания значений мета-записи;

В нашем примере первый <META HTTP-EQUIV="Content-Type"> тег описывает тип и кодировку содержимого документа.

Два следующих <META> тега служат для передачи информации о содержании документа поисковым службам Internet.

Таким образом, тег <META NAME="Keywords" LANG=ru CONTENT=" "> задает список ключевых слов, содержащихся в документе, а тег <META NAME="Description" CONTENT=" "> является словесным описанием содержимого документа.

Далее следует тег <BASE HREF="URL"> , задающий базовый адрес данного документа. Это необходимо для поддержания работоспособности относительных ссылок, в случае миграции документа в Internet или изменения каталога его загрузки. Как уже говорилось выше, при отсутствии тега <BASE> относительные ссылки в документе определяются от адреса его загрузки.

Завершает наш заголовок тег <LINK> . Данный тег не отображает информацию в окне браузера и предназначен для формирования различных типов отношений между документами и другими объектами. Данные отношения помогают разработчикам ориентироваться в структуре сложного документа и используются поисковыми системами. Рассмотрим, какие бывают отношения и как они задаются. У тега <LINK> наиболее часто используются следующие атрибуты:

· REV - отношение текущего документом с другим, заданным HREF (обратное REL );

· REL - отношение между документом заданным HREF и текущим документом (обратное REV );

· HREF - задает URL документа или объекта;

· LANG - языковая версия;

· MEDIA - назначение документа (Print/Screen );

· TYPE - тип содержимого связанного объекта (листа стилей );

Данный тег довольно редко используется, как правило, его применение ограничивается привязкой листа стилей (stylesheet ) к документу но в HTML-документах со сложной иерархической структурой иногда встречается множество тегов <LINK> с довольно запутанным синтаксисом. Наиболее понятные из них связи типа: следующий/предыдущий (next/prev ), документ/автор (author ), документ/оглавление (index ). В нашем примере тег <LINK> использован для формирования связи документ/автор.

Вот еще несколько примеров использования отношений в документах:

<LINK REL=Prev HREF="chapter7.htm"> - означает, что документ chapter7.htm предыдущий по отношению к документу (chapter8.htm) содержащему заданную данным тегом связь;

<LINK REL=Next HREF="chapter9.htm"> - означает, что документ chapter9.htm следующий по отношению к документу (chapter8.htm) содержащему заданную данным тегом связь;

<LINK REV=Next HREF="chapter9.htm"> - обратное отношение, которое говорит о том, что документ (chapter10.htm), содержащий заданную данным тегом связь, является следующим для chapter9.htm;

<LINK REL=stylesheet TYPE="text/css" MEDIA=print HREF="/style/PrnStyle.css"> - означает, что для печати текущего документа использовать лист стилей из style/PrnStyle.css;

Тело HTML документа

Тело HTML документа располагается после заголовка и ограничено контейнером <BODY>...</BODY> . Содержимое тела документа отображается в окне Web-браузера и состоит из маркированного тегами форматирования текста, таблиц, графических и прочих мультимедиа-элементов, ссылок на другие ресурсы и различных органов управления. В приведенном в предыдущей главе примере, тело документа состоит из одной единственной строки "В разработке ".

Так как в контейнере <BODY> нами не были заданы атрибуты внешнего вида документа, то данный текст будет отображен в окне браузера в соответствии с пользовательскими установками. Для обеспечения соответствия между внешним видом документа в браузере пользователя и дизайном разработчика необходимо использовать специальные атрибуты тега <BODY> :

· BGCOLOR - цвет фона документа;

· BACKGROUND - URL графического изображения, для создания фона;

· BGPROPERTIES - режим прокрутки фона по отношению к тексту документа (по умолчанию прокрутка вместе с текстом, BGPROPERTIES=FIXED - стационарный фон );

· TEXT - цвет текста документа;

· LINK - цвет выделения элементов-якорей ссылок;

· ALINK - цвет выделения активных элементов-якорей ссылок;

· VLINK - цвет выделения элементов-якорей просмотренных ссылок;

Для определения цветов в HTML применяются шестнадцатеричные коды RGB компонентов, но стандартные 16 цветов можно задавать по их общепринятым названиям, они представлены на Рис.1:

Рис.1 Коды RGB компонентов

Глава 2. Инструкция программиста

Данное методическое пособие должно запускаться на IBM и совместимых компьютерах. Минимальная конструкция: процессор Pentium и выше, объем оперативной памяти 32MB, видеокарта с расширением 1024x768, 256 цветов. Разработанное пособие должно работать под управлением операционных систем семейства WIN-32(WIN-98, MILLENIUM. 200, XP).

Данное методическое пособие состоит из множества файлов, они представлены на Рис.2, которые ссылаются на один файл (Index.html). Рассмотрим эти файлы.

Все они находятся о двух общих папках, которые содержат полный набор аттрибутивов.

Для быстрого изменения описанных выше параметров и базовых размеров, нужно выполнить легкое редактирование основных видов html- тэгов, использую стандартный «Блокнот» (базовый код представлен на Рис.3), но это неудобно и долго, так как нужно изучать алгоритм построения html страницы (см. Приложение).

В комплект к файлам, в каждой папке существуют дополняющие их отдельные, связаннее html страницы.

Для того чтобы быстро и легко внести изменения, необходимо воспользоваться пакетом Microsoft Office Front Page.

Из Рис.4 мы видим рабочую среду MicrosoftOfficeFrontPage. Для того чтобы запустить эту систему нужно нажать кнопку Пуск, далее выбрать в пункте \Программы \Служебные \ MicrosoftOffice\ MicrosoftOfficeFrontPage. Зайдя в рабочее пространство, нужно выбрать \Файл \Открыть \ и дальше используя проводник, выбрать файл index, с расширением html. Программа откроет страницу, и автоматически сгенерирует html код. Для визуального просмотра страницы, нужно выбрать \Файл \Просмотреть в обозревателе \Выбрать нужный режим отображения. Данная среда предоставляет пользователю легко откорректировать содержимое страницы и его исходный код.

Далее, мы увидим, что все объекты, используемые для построения html страницы, выделены в отдельные скомпонованные блоки (видно из Рис.5). Нажав правой кнопкой по каждому блоку, выбираем изменяемый параметр.

Выполняя все эти простые действия, мы сможем легко внести изменения, не изучаю внутренний алгоритм построения html станицы.

Все эти описанные выше файлы и папки нужны для запуска проекта и, удалять их не стоит.

Глава 3. Инструкция пользователя

3.1 Вход в систему

Для наглядного изучения основам пользования электронного учебника, рассмотрим файлы, которые его составляют.

В папке INf_html, в файле infsoderganie.html заключается основной текст содержания. Дальше использую навигацию внутри каждой страницы в InternetExplorer (видно из Рис.6), пользователь может перемещаться внутри электронного пособия.

Это осуществляется по главам, по разделам и по лекциям данного предмета. Так как на каждую лекцию ссылается по отдельной странице, то количество лекций должно соответствовать количеству отдельных страниц. Внутри каждой страницы, для наибольшего удобства пользователю представлено два общих объекта навигации: слева и вверху. Используя гиперссылки, пользователь может обратиться к интересующему его вопросу одним нажатием правой кнопки мыши. Каждая папка также содержит определенный набор графических картинок, улучшающих наглядное изображение принципа работы.

В папке Kg_html вы познакомитесь с файлом kg_soderganie.html. Из Рис.7 видно, что данный файл содержит описание и перечисление основных пунктов электронного учебного пособия. Используя клавиши перехода внутри страниц, пользователь может быстро и безошибочно перемещаться по лекциям и разделам изучаемого предмета. Это осуществляется благодаря панели управления: слева и вверху. Для удобства пользователю, каждая страница содержит свой параметр, который позволяет пользователю видеть в верхней части панели управления, то место, где он в данный момент находится.

Существует так же другой способ отображения html- страницы. Для этого нужно воспользоваться программой отображения информации и веб- узлов в Интернете - Internet Explorer. Если пользователь выберет файлы с расширением html- в электронном пособии, то данная программа автоматически (по умолчанию) откроет страницы электронного учебника.

Сначала выберем Internet Explorer. Для этого нужно выбрать в меню Пуск \ Программы \ Стандартные \ Internet Explorer и нажать левой кнопкой. Загрузится сама программа. Нажав левой кнопкой на файл index.html в корневой папке мы откроем электронный учебник (Рис.8).

В зависимости от того, какой именно нам нужен предмет, нажимаем правой кнопкой по ссылкам, находящимся в центре экрана.

3.2 Описание пособия

Чтобы его открыть электронно-учебное пособие, пользователю нужно найти в корневом каталоге файл index.html и запустить его. В результате появляется начальная страница, где в центральной части находятся ссылки на два учебника (Рис.9): Компьютерная графика и Информатика.

Нужно выбрать одну из них. Пользователь дальше автоматически переходит на страницу содержания, где располагается полный перечень разделов изучаемых лекций. С помощью двух панелей управления навигацией по учебнику, мы можем выбрать интересующую нас тему или полностью лекцию. Для этого нужно нажать на появляющейся ссылке в правом или верхнем полях экрана. Все страницы располагаются вертикально, поэтому чтобы просмотреть все содержимое страницы, нужно воспользоваться полосой прокрутки, которая располагается в правой части. Для удобства пользователю, в крайних положениях (верхнем и нижнем) находятся кнопки быстрой навигации: вперед \назад \ вниз \вверх \начало (Видно на Рис.10). После нажатия, пользователь автоматически перейдет по выбранной гиперссылке.

На всех страницах, кроме лекций располагаются также пояснительные записи или рисунки, которые делают процесс обучения легче.

Если внимательно рассмотреть верхнюю часть панели управления навигации (представлено на Рис.11), то пользователь сможет увидеть выделенную белым цветом ту часть лекций, где вы находитесь, что помогает ориентироваться и не запутаться в изучении.

Точно такие же действия пользователь должен проделать, чтобы изучить курс лекций по другому предмету. Если же пользователь запутался в перемещениях, то ему стоит нажать только кнопу \начало в крайних положениях страницы.

Заключение

В ходе курсовой работы было выполнено:

· Разработано интерактивное пособие (электронный учебник) в среде Internet Explorer;

· В Microsoft Office Front Page написано 2 курса лекций по предметам: информатика и компьютерная графика;

Разработанное пособие содержит следующие разделы:

Глава 1 – исследовательская часть, которая содержит целесообразность выбора языков, управляющие структуры языка HTML и компоненты Internet Explorer, используемые в примерах учебного пособия.

Глава 2 – инструкция программиста, в состав которой входят файлы Microsoft Office Front Page и описание составляющих.

Глава 3 – инструкция пользователя, которая содержит описание входа в системы Microsoft Office Front Page и создания пособия.

Для усовершенствования данной работы необходимо добавить компоненты, примеры и к картинкам применить анимацию.

Задание на КР было выполнено полностью в соответствии с техническим заданием.

Литература

1. Симонович С.В., Евсеев Г.А., Алексеев А.Г. ,«Специальная информатика», АСТ пресс, М.,2000 г.

2. И. Шапошников. “Web-страница своими руками”. ¾ СПб.:БХВ-Петербург, 2000 г.

3. http://study.krr.ru

4. http://www.zeiss.net.ru/docs/izone/izone240/pub/izone1.htm

5. http://nrd.pnpi.spb.ru/UseSoft/Journals/Soft&Script/Soft&Script12/other-frontpage.html

6. http://intz.imm.uran.ru