"Методическое пособие на тему : СОЗДАНИЕ НАВИГАЦИОННОЙ КАРТЫ В HTML""

Методическое пособие на тему:

Создание навигационной карты в HTML

Теория

При создании карты используются теги:

Тег<img> служит для загрузки изображения, которое будет служить навигационной картой

Контейнер<map>служит контейнером для активных областей на карте

Теги<area>устанавливают невидимые зоны на карте, являющиеся ссылками на HTML-документы.

Тег <map>—связывается с клиентской картой-изображением благодаря применению единого идентификатора в теге <img>, задаваемого атрибутом usemap,
              а в теге <map>, устанавливаемого атрибутом name.

Синтаксис

<img  src=”#”   usemape=”#imja”

<map name="imja">

  <area атрибуты>

</map>

Атрибуты

name Имя карты-изображения.

Каждый элемент <area> определяет активные области рисунка, которые являются ссылками. Такой рисунок –карта по внешнему виду ничем не отличается от обычного изображения, но при этом оно может быть разбито на невидимые зоны разной формы, где каждая из областей служит ссылкой. Области могут перекрывать друг друга, сверху окажется та, которая в коде располагается раньше (выше).

Тег <area> задает форму области, ее размеры, устанавливает адрес документа, на который следует сделать ссылку, а также имя окна или фрейма, куда браузер будет загружать документ. Этот тег всегда располагается в контейнере <map>, который связывает координаты областей
                     с изображением <img>.

Несколько областей могут перекрывать друг друга, сверху будет та, которая в коде HTML располагается выше.

тэг <area> ( Закрывающий тег НЕ ТРЕБУЕТСЯ)

Синтаксис

<map name="imja">     <area href="URL" shape=”  ” coords=”  ” alt=””   title=””> </map>

Тег <area> поддерживается всеми основными браузерами. Его атрибуты:

accesskey   Переход к области с помощью комбинации клавиш.

alt                Альтернативный текст; который появляется, когда картинка не показывается.

href             Задает адрес документа, на который следует перейти.

hreflang       Указывает язык документа, на который ведет ссылка.

nohref          Область без ссылки на другой документ.

shape          Форма области. Возможные значения:
    circle (окружность - задается координатами центра и радиусом в пикселах)
    rectangle (прямоугольник – задается координатами левого верхнего и правого нижнего угла)
    polygon (многоугольник – задается координатами своих вершин)

tabindex       Задает последовательность перехода между элементами с помощью клавиши Tab.

target           Имя окна или фрейма, куда браузер будет загружать документ.

type              Устанавливает MIME –тип документа, на который ведёт ссылка.

Title        Текст; который "всплывает" при наведении курсора мыши на данную зону изображения

coords        Список через запятую координат (в пикселах) активной зоны (зависит от типа заданной формы зоны)

Возможные значения атрибута coords        :

·         x1,y1,x2,y2-указывает координаты верхнего левого и правого нижнего угла прямоугольника (shape="rect").
Определение координат для прямоугольника (shape="rect"):

·         x, y, радиус – определяеткоординаты центра окружности и радиус (shape="circle").
Определение координат для окружности (shape="circle"):

·         x1, y1, x2, y2,...,xn,yn-определяет координаты вершин полигона (многоугольника) (shape="poly").
Определение координат для многоугольника (shape="poly"):

Примечание: координаты верхнего левого угла области -0,0.

Пример

Здесь 6 областей (shape=”circle”), пользователь, нажав на одну из этих "областей" переходит по абсолютной ссылке на сайт соответствующего города

1.      тег <img> имеет обязательный атрибут src который указывает путь к картинке
 <img src="Altai.jpg "> 

2.     рисунок обозначен как навигационная карта, т.е. ему присвоено своё индивидуальное имя при помощи атрибута usemap="# ALTAI "

3.    окончательно, это выглядит так:
<img src=" Altai.jpg" usemap="# ALTAI ">

Полезные советы:

1.        Чтобы без труда определить координаты той или иной точки на Вашей навигационной карте откройте рисунок графическим редактором тем же Paint, к примеру. там, когда будете двигать указателем по рисунку, увидите две меняющиеся цифры, это и есть координаты пикселя Х и У на данном рисунке. В Paint эта панелька расположена в нижней части экрана.

2.        При создании страницы с навигационной картой тег <img> всегда должен быть выше самой карты <map>, потому что при загрузке страницы могут возникнуть проблемы, так как карта с разметкой уже загрузилась, а самого рисунка ещё нет То есть писать нужно например, так:
<img src="knopki.jpg" usemap="#panel">
<map name="panel">
   <area href="primer1.html" shape="rect" coords="20,20,80,80" alt=””   title=”  ”>
</map>

И ещё что касается загрузки..

3.       <img src="knopki.jpg" usemap="#panel">

Между тегами <img>  и <map> может быть всё что угодно: длинный текст, графика.. но лучше здесь ничего не писать,так как во время загрузки страницы, пользователь не дождавшись её окончания, может пытаться нажимать на кнопки, указанные в навигационной карте, которая к этому времени еще не загрузилась.

<map name="panel">
  <area rel="nofollow ugc" target="_blank" href="primer1.html" shape="rect" coords="20,20,80,80">
</map>

Практическая часть

Задание Карта

1.    Найти подходящее изображение (карту, рисунок объекта).

2.     Обработать ее в фотошопе, сохранив для web.

3.    Нанести на карту метки, например, нарисовать треугольнички на месте интересующих объектов, записать их координаты

a.    В PAINTпри выборе сетки, линеек и строки состояния  из пункта меню ВИД сразу в строке состояния получаются координаты точки в пикселах (предварительно должны быть заказаны единицы измерения пикселы в основном пункте меню в подпункте СВОЙСТВА)

b.    В ФОТОШОПЕ нужно выбрать линейки (rules в пункте меню ПРОСМОТР), по правой мышке на линейке выбираются пикселы, а для получения координат точки нужно заказать в пункте меню ОКНО подпункт INFO

4.    Можно найти картинки или логотипы этих объектов, например, музеев (вместо меток)

5.    Обработать картинки в фотошопе

6.    Добавить эти картинки на изображение карты новыми слоями

7.    Создать папку КАРТА

8.    Сохранить изображение карты для web в созданную папку

9.    Создать в редакторе документ KARTA.HTML. сохранить его в папку КАРТА

10.  Фотографии объектов, характеризующих области, например, музеев поместить в папке  КАРТА рядом с документом KARTA.HTML

11.  В документе KARTA.HTML разместить изображение карты.

12.   Используя соответствующие теги и атрибуты, превратить изображение в навигационную карту

13.  На ней выделить не менее 3-х областей любой формы, не забывая про атрибуты ALT и TITLE

14.  Создать ссылки на фотографии, помещенные рядом с документом  KARTA.HTML или интернет ресурсы с описанием этих объектов

15.  Архив папки КАРТА прислать учителю.

Примеры навигационных карт

Путешествие пр Алтаю  (Карта Златы Ивановой)

Карта любимых станций метро (В. Калашников)

Карта грибника (Е. Антонов)

Краткое описание документа:

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