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

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

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

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

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

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

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

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

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

shape - задаёт форму активной области изображения. Имеет значения: rect, circle, poly (прямоугольник, круг, многоугольник).

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

href - задаёт адрес ссылки в виде URL.

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>
<FRAME>
<NOFRAME>

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

cols – задаёт вертикальные фреймы (количество и размеры) в пикселях или процентах. Последний в списке фрейм можно задавать с помощью звёздочки. Это будет означать, что он займёт всё оставшееся пространство.

Например,

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

rows – задаёт горизонтальные фреймы (количество и размеры) в пикселях или процентах. Последний в списке фрейм можно задавать с помощью звёздочки. Это будет означать, что он займёт всё оставшееся пространство.

Например,

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

frameborder – задаёт наличие или отсутствие у фреймов рамки. Значение ="1" - рамка будет, ="0" - рамки нет.

Например,

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

src – задаёт url-адрес HTML-документа, который будет изначально загружен в данное окно;
name – задаёт имя фрейма, которое будет использоваться для ссылки на данный фрейм в виде значения параметра target элемента <A>;
noresize – не позволяет пользователю изменить размер фрейма;
scrolling – определяет наличие у фрейма полос прокрутки; значения: yes, no, auto (да, нет, автоматически по необходимости);
marginheight – задаёт ширину полей данного фрейма по вертикали (сверху и снизу) в пикселях;
marginwidth – задаёт ширину полей данного фрейма по горизонтали (слева и справа) в пикселях;
frameborder – задаёт наличие или отсутствие у фрейма рамки; значение ="1" - рамка будет, ="0" - рамки нет.

Например,

Содержание