Полезные советы:
Перед тем как начать создавать страницу с использованием фрёймовой структуры проанализируйте её макет, размеры каждого окна, наличие или отсутствие в них полос прокруток и т. д. После этого можно создавать подключаемые HTML файлы особо не переживая за их взаимное расположение относительно друг друга..
Используйте тег <noframes>. Помните что если в Вашем браузере сайт работает и отображается так как Вы и задумывали то у других пользователей дела могут обстоять иначе!
Глава 8 Навигационные карты
Мы с Вами уже говорили о том как сделать рисунок ссылкой.. в этой главе поговорим о том как сделать фрагмент, область рисунка ссылкой на тот или иной документ, а так же о том как сделать различные области одного и того же рисунка ссылками на различные документы.
Для осуществления данной задачи нам не обойтись без так называемых навигационных карт.
Предположим, у нас имеется такой рисунок:
..и нам необходимо сделать, так что бы пользователь, нажав на одну из этих "кнопок" переходил по ссылке в тот или документ.. что нам для этого нужно?
В первую очередь обозначим наш рисунок не как обыкновенное графическое изображение, а как навигационную карту присвоив этому рисунку своё индивидуальное имя. Делается это при помощи атрибута usemapтега<img>(я думаю Вам не стоит напоминать о том что тег<img>имеет обязательный атрибутsrcкоторый указывает путь к той или иной картинке<img src="knopki.jpg">)
Назовём наш рисунок/карту именем panel. Это будет выглядеть так:
<img src="knopki.jpg" usemap="#panel">
Не забываем по правилам синтаксиса поставить знак #решётки перед именем..
Ну а теперь, собственно, составим навигационную карту. Она задаётся тегом <map>у которого есть атрибутname- имя.. улавливаете к чему я веду? Ну как Вы наверное уже догадались, укажем на базе какого рисунка мы будем строить нашу навигационную карту указав его имя..
<map name="panel"></map>
Теперь займемся тем, что укажем браузеру области рисунка которые будут являться ссылками, а заодно пропишем пути переходов по этим ссылкам. Эту задачу берет на себя тег <area>, закрывающего тега он не требует, и имеет следующие атрибуты, с которыми мы будем работать:
href- указывает путь к открываемому документу (точно так же как в теге<a>)shape- форма области рисунка которая будет служить ссылкой. Может иметь одно из трёх значений:
rect- прямоугольная область
poly- область представляет собой некий многоугольник
circle- область заданная окружностью
coords- координаты формы
Прямоугольная область
Теперь наша карта приобретает такой вид:
<map name="panel"> <area href="primer1.html" shape="rect" coords="15,15,82,82"> </map>
По сути теперь "зелёная" квадратная кнопка стала рабочей.
В чем Вы можете убедится нажав на неё в этом примере:
<html> <head> <title>Навигационная карта</title> </head> <body> <center> <img src="karta.jpg" usemap="#panel"> </center> <map name="panel"> <area href="primer1.html" shape="rect" coords="15,15,82,82"> </map> </body> </html>
Немного поспешил с примером толком не объяснив суть написанного.. Заострим внимание на атрибутах тега <area>.
href="primer1.html"- здесь думаю понятно, это путь к документу, который должен открыться при нажатии на "зелёную кнопку".
Так как кнопка у нас квадратная, а квадрат как известно это "правильный" прямоугольник, форму области рисунка назначаем прямоугольной shape="rect".
А теперь самое интересное coords="15,15,82,82"- координаты.. Для прямоугольника они задаются двумя точками по принципу "Х1,У1,Х2,У2" Где Х1,У1- первая точка и соответственно Х2,У2 -вторая. Координаты указываются в пикселях.. Наш рисунок/карта имеет размеры 300 на 100 пикселей, её самый верхний левый пиксель имеет координаты Х=0,У=0, а самый нижний правый Х=300,У=100. Если не понятно, окунёмся в геометрию за пятый класс..
Взгляните на рисунок:
Так, выбрав прямоугольную форму shape="rect"для нашей области в виде квадратной кнопки мы указали координаты ёё верхнего левого и нижнего правого пикселей.. которых вполне достаточно для обозначения "рабочей" области всей кнопки.