logo search
УчМатериалы-Информатика-20010-2011уч-года / Модуль-2 (Разделы-04-05) / Раздел-05 / Пособие-Раздела-05-2008 / Тема-05-07

Начало формы Конец формы

Навигационные карты.

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

Для того, чтобы обозначить какое-нибудь изображение в качестве объекта навигационной карты, существует параметр usemap тэга <IMG>. Всё очень просто. Добавляем вHTML-документе к нужному изображению параметрusemap, который задаёт имя навигационной карты. Например:

<IMG src="log1.gif" usemap="#log1">

Сама же навигационная карта создаётся при помощи элемента<MAP>и тэга<AREA>

и располагается, как правило, в самом начале HTML-документа, в разделе <HEAD>.

MAP- элемент, обозначающий начало и конец навигационной карты. Имеет параметрname, задающий имя карты, которое должно соответствовать значению параметраusemap.Внутри элемента<MAP>располагается один или несколько тэгов<AREA>.

AREA- этот тэг задаёт активную область на изображении. Имеет слtдующие параметры:

coords- определяет координаты активной области изображения. Координаты записываются в виде целых чисел и разными способами в зависимости от формы активной области.

nohref- задаёт область изображения как неактивную.

target- задаёт окно (fraim), в которое будет загружаться документ по ссылке. Используется только с параметром href.В качестве значения задаётся имя соответственного фрейма.

alt- задаёт альтернативный текст для активной области изображения. Активных областей может быть много. Они могут перекрывать друг друга. В этом случае область, заданная раньше других имеет приоритет над остальными.

Пример 1:

<AREAshape="rect" coords="гориз.x1, верт.y1, гориз.x2, верт.y2>

Заданыдве координаты: левый верхний угол прямоугольника (гориз. x1,верт. y1) и нижний правый угол (гориз. x2,верт. y2).

Пример 2:

<AREAshape="circle" coords="гориз.x, верт.y, радиус z>

Заданытри числа: центр круга (гориз.x, верт.y) и его радиус (радиус z). Еслив виде формы активной области изображения задан многоугольник (poly), значениями параметраcoordsбудут координаты его вершин. Начало координат лежит в левом верхнем углу изображения.

Фреймы (окна, кадры).

С помощью фреймов вы можете разбить окно браузера на несколько разных частей, каждая из которых будет содержать отдельный HTML-документ. Вы спросите, зачем это нужно? Допустим, вы хотите иметь на своём сайте навигационное меню, которое должно всегда присутствовать на экране и не прокручиваться ни при каких условиях. Для этого необходимо разбить окно браузера на две части: левую(25% от окна браузера) и правую(75% от окна браузера). В левую помещается навигационное меню, а в правую - основное содержание сайта. Пользователь, нажав на ссылку навигационного меню, увидит запрашиваемый документ в правом фрейме. Фреймы вHTML-документе создаются при помощи следующих элементов и тэгов:

FRAMESET– этот элемент определяет структуру документа, как фреймовую (разбивает окно браузера на фреймы). Исключено одновременное использование элементов<FRAMESET> и <BODY> в одном HTML- документе. Элемент может содержать внутри себя только элементы<FRAMESET>, <NOFRAME> и тэг<FRAME>.Элемент <FRAMESET>имеет следующие параметры:

Например,

<FRAMESET cols="40%, 50%, 10%"> <FRAMESET cols="160,200, 40"> <FRAMESET cols="40%, 50%, *">

Все три HTML-строки имеют различный синтаксис, но обозначают одно и то же: окно браузера разбивается на три вертикальных фрейма шириной соответственно 160, 200 и 40 пикселей.

Например,

<FRAMESET cols="25%, 75%"> <FRAMESET cols="200, 600"> <FRAMESET cols="25%, *">

Все три HTML-строки имеют различный синтаксис, но обозначают одно и то же: окно браузера разбивается на два горизонтальных фрейма высотой соответственно 200 и 600 пикселей.

Например,

<FRAMESET frameborder="0">

FRAME– задаёт параметры одного фрейма. Имеет следующие параметры:

Например,

<FRAME src="menu.htm" name="menu" noresize scrolling="auto" marginheight="4" marginwidth="5" frameborder="0">