При использовании графического файла в качестве элемента-якоря необходимо вместо текста в контейнере <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".

Все остальные элементы заголовка не отображаются браузером и служат для определения различных свойств документа, его взаимосвязи с другими 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 документа располагается после заголовка и ограничено контейнером <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 мы видим рабочую среду Microsoft Office Front Page. Для того чтобы запустить эту систему нужно нажать кнопку Пуск, далее выбрать в пункте \Программы \Служебные \ Microsoft Office\ Microsoft Office Front Page. Зайдя в рабочее пространство, нужно выбрать \Файл \Открыть \ и дальше используя проводник, выбрать файл index, с расширением html. Программа откроет страницу, и автоматически сгенерирует html код. Для визуального просмотра страницы, нужно выбрать \Файл \Просмотреть в обозревателе \Выбрать нужный режим отображения. Данная среда предоставляет пользователю легко откорректировать содержимое страницы и его исходный код.

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

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

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

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

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

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

В папке INf_html, в файле infsoderganie.html заключается основной текст содержания. Дальше использую навигацию внутри каждой страницы в Internet Explorer (видно из Рис.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

Страницы: 1, 2