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

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

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

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

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

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

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

   1. Цель работы

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

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

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

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

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

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

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

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

1. Содержание отчета

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

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

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

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

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

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

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

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

Процесс создания активного изображения состоит из двух этапов. Сначала необходимо определить на картинке области, которые нужно сделать активными, а потом соотнести их со ссылками на другие URL. Активные области задаются перечислением их координат (в пикселях). Все это можно сделать вручную, определив координаты углов активных областей, но можно, например, воспользоваться программой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. В качестве значения необходимо задать либо имя одного из существующих фреймов, либо одно из зарезервированных имен любого окна.

• 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);

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

Пример активных изображений:

<MAP NAME=“imap”>

<AREA SHAPE=“rect” COORDS=“0,0,100,100” HREF=“1.html”>

<AREA SHAPE=“rect” COORDS=“100,0,200,100” HREF=“2.html”>

<AREA SHAPE=“default” nohref>

</MAP>

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

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

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