25

Пусть необходимо создать документ с именем book.htm, который состоит из нескольких глав. В начале документа желательно разместить оглавление, содержащее ссылки на отдельные главы.

Прежде всего определим в начале каждой главы локальные метки. Для этого необходимо использовать тэг <A> с параметром NAME, например:

<H2><A NAME=”Chap1”>Первая глава</A></H2>

. . . . .

Содержание главы

. . . . .

<H2><A NAME=”Chap2”>Вторая глава</A></H2>

. . . . .

Содержание главы

. . . . .

Ссылки на созданные таким образом локальные метки выполняются с помощью тэга <A>, имеющего параметр HREF:

<A HREF=”book.htm#Chap1”>Первая глава</A>

<A HREF=”book.htm#Chap2”>Вторая глава</A>

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

2.5 Контрольные вопросы

1.Что такое гипертекстовая ссылка?

2.Понятие полного адреса информационного ресурса.

3.Относительные и абсолютные гипертекстовые ссылки. Локальные и глобальные гипертекстовые ссылки. Приведите примеры.

4.Форматы графических файлов, их характеристики, достоинства и недостатки.

5.Теги вставки рисунка и использования рисунка в качестве фона webстраницы.

26

3 Практическая работа №3. Активные изображения (навигационные карты)

3.1Цель работы

1.Изучить возможности использования активных изображений (навигационных карт) при создании HTML-документа, правила их организации и теги вставки активных изображений.

2.Получить навыки использования технологии навигационных карт при создании web-страниц.

3.2 Порядок выполнения работы

1.Ознакомиться с возможностями использования активных изображений при создании HTML-документа, тегами вставки и определения активных изображений (пункт 3.4).

2.Создать следующую структуру web-страниц:

−на первой web-странице разместить активное изображение (файл map.gif с рисунком) и определить активные области как три прямоугольника в правой части рисунка; определить координаты этих активных областей для задания в теге <MAP>; левую часть активного изображения сделать невосприимчивой к нажатию мышью;

−создать три простых web-страницы, которые будут отображаться при активизации активных областей, которые в заголовках будут определены как «Первая страница», «Вторая страница», «Третья страница»; на этих webстраницах поместить гипертекстовые ссылки возврата на главный HTMLдокумент с активным изображением.

3. Оформить отчет по практической работе №3 и защитить его у преподавателя. Пример титульный листа отчета по практической работе приведен в приложении А.

27

3.3 Содержание отчета

1.Титульный лист.

2.Формулировка задания на практическую работу.

3.Гипертекстовая разметка созданных web-страниц (HTML-код), выполненный в соответствии с пунктом 3.2.

4.Ответы на контрольные вопросы.

3.4 Методические указания

Активные изображения (image maps), или изображения, чувствительные к щелчкам мыши, позволяют создать в HTML-документе графические меню произвольной формы. Активное изображение – это изображение с так называемыми активными областями (hot spots), которые ссылаются на URL других webстраниц.

Есть два метода формирования активных изображений: на сервере и у клиента. Изображения первого типа используют сервер для того, чтобы найти соответствующий данной активной области URL и передать на браузер нужную страницу. Активные изображения, работающие на клиентской машине, задают информацию об активной области на HTML-странице, так что браузер сам выясняет, какие области являются активными, и запрашивает с сервера соответствующую страницу.

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

Процесс создания активного изображения состоит из двух этапов. Сначала необходимо определить на картинке области, которые нужно сделать активными, а потом соотнести их со ссылками на другие URL. Активные области задаются перечислением их координат (в пикселях). Все это можно сделать вруч-

28

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

Тег <MAP>…</MAP> создает новую навигационную карту. Между начальным и конечным тэгами содержит один или несколько элементов <AREA>, определяющих навигационные области карты. Параметр тега <MAP>:

−NAME – единственный и обязательный параметр. Определяет имя навигационной карты, уникальное для данного документа. Используется для вызова карты с помощью параметра USEMAP тега <IMG>. Можно указать любое имя без пробелов с использованием латинских символов и цифр.

Тег <AREA> создает область карты, определенной с помощью тега <MAP>. Элемент должен располагаться между начальным и конечным тэгами элемента <MAP>. Не имеет конечного тэга.

Параметры тега <AREA>:

−SHAPE – определяет форму навигационной области. В зависимости от выбранной формы меняется способ задания ее координат в параметре COORDS. Возможные значения:

−rect – прямоугольник;

−circle – окружность;

−poly – многоугольник.

−COORDS – определяет координаты навигационной области на карте. Способы задания координат для разных типов областей:

−SHAPE="rect" COORDS="левый x, верхний y, правый x, нижний y";

−SHAPE="circle" COORDS="центр x, центр y, радиус";

−SHAPE="poly" COORDS="x1,y1,x2,y2,x3,y3,...".

−HREF – определяет область как гипертекстовую ссылку. Значение задается в виде ссылки (URL).

−TARGET – определяет окно (фрейм), на которое указывает гипертекстовая ссылка. Этот параметр используется только совместно с параметром HREF. В качестве значения необходимо задать либо имя одного из существующих фреймов, либо одно из зарезервированных имен любого окна.

29

−NOHREF – определяет область как неактивную (невосприимчивую к нажатию). Данный параметр противоположен параметру HREF и используется для отмены действия последнего.

−ALT – определяет альтернативный текст-подсказку для данной области. Параметры тега <IMG>, необходимые для создания активного изображе-

ния:

−USEMAP – применяет к изображению навигационную карту (image map), заданную элементом MAP. В качестве значения задается имя карты с предшествующей ему решеткой. Например, если имя карты – "map1", то ссылка на нее будет выглядеть как "#map1". Обратите внимание: прописные и строчные буквы в данном параметре трактуются браузером как разные.

−ISMAP – определяет изображение как навигационную карту (image map), обрабатываемую сервером. Имеет смысл использовать только тогда, когда изображение является гиперссылкой. После клика мышкой на изображении серверу отправляются x,y-координаты нажатия. В зависимости от полученных координат, сервер (при наличии на нем соответствующего программного обеспечения) может показать вам тот или иной документ. Данный параметр является флагом и не требует присвоения значения.

Определить карту можно следующим образом:

−вставить рисунок, который выбран как активное изображение, в HTML документ, используя тег изображения с атрибутом USEMAP и поместить его после тега </MAP>; необходимо перед именем карты в атрибуте USEMAP записать символ “#” следующим образом:

<IMG SRC=“mymap.gif” USEMAP=“#sitemap”>

−следует выбрать тип активной области (квадрат, треугольник или круг)

иобозначить границы каждой области;

−границы активных областей задаются координатами углов прямоугольника и многоугольника (треугольника) или центра и радиуса круга (данные координаты можно посмотреть в любой программе просмотра изображений, например ACDSee);