Лабораторная работа № 1. Разработка html-страниц
Цель работы: изучение языка HTML и разработка информационного сайта, состоящего из нескольких HTML-страниц.
1 Теоретические сведения
Карты-изображения
Пример картинки:
|
Рис. 1.1 |
На ней достаточно много кнопок, на которые нам бы хотелось нажимать, а не смотреть.
Решение заключается в использовании "карты" на изображении (от англ. map-карта).
Для того, чтобы создать "карту", в языке html существует тег <map>. Он задает разбиение изображения на "горячие" области, т.е. области, при нажатии на которые можно загрузить другой файл html.
Параметр у этого тега только один - это name, который должен быть обязательно. Пример:
<map name="example">
.....
</map>
Закрывающая скобка также должна обязательно присутствовать. Внутри <map>...</map> могут, а вернее должны, следовать элементы описывающие "горячие" области.
Эти области задает элемент <area>. Он не должен содержать закрывающей скобки. У него существуют следующие параметры:
href
Задает адрес страницы, которая будет загружаться этой областью.
shape
Задает форму "горячей" области. Может принимать значения circle - окружность, rect - прямоугольник, poly - полигон любой формы.
coords
Задает координаты области. Все координаты отсчитываются от левого верхнего угла изображения. Они могут задаваться либо в пикселах, либо в процентах от размеров изображения, т.е. X от ширины, а Y от высоты. Естественно, так как существуют разные формы областей, способы их задания также различны.
Для окружности : coords="Х центра, Y центра, радиус"
Для прямоугольника : coords="лево верх Х, лево верх Y, право низ X, право низ Y"
Для полигонов : coords="Х точки 1, Y точки 1, X точки 2, Y точки 2, ......"
nohref
Предназначен для запрета области, т.е. той на которую нельзя нажимать. Помогает "выкалывать" области.
alt
Этот атрибут как и у изображений, сообщает текст браузеру, который будет выводиться при наведении мыши на "горячую" область.
Следование областей может быть произвольным, но если какие-то части областей пересекаются, то на область пересечения будет реагировать та область, которая идет в списке первой. Это как раз касается областей с атрибутом nohref, т.е. чтобы выколоть в области дырку, надо сначала прописать область с nohref, а затем нормальную.
Пример тега <area>:
<area shape=rect coords=5,5,15,15 nohref>
<area href=main.html shape=rect coords=0,0,20,20 alt="Main Page">
Для того, чтобы назначить изображению карту, надо использовать атрибут usemap и в нем указать значение name в теге <map>. Пример:
<img src=example.gif usemap="#example">
При указании имени важно учитывать регистр.
Давайте теперь вернемся к нашему "разбиваемому изображению". Чтобы применить способ карт, создадим вот такой код:
<map name="prob">
<area href=koi.html shape="circle" coords="60,18,12">
<area href=win.html shape="poly"
coords="62,37,68,30,86,30,92,37,87,46,69,46">
<area href=iso.html shape="circle" coords="78,63,12">
<area href=main.html shape="rect" coords="19,73,60,92">
</map>
<p><img src=step13.gif usemap="#prob" alt="Menu">