Главная / Информатика / Тема «Основы сайтостроения» Н. Угринович, 9 класс Урок №4. Работаем с тегом МАР.

Тема «Основы сайтостроения» Н. Угринович, 9 класс Урок №4. Работаем с тегом МАР.

Тема «Основы сайтостроения» Н. Угринович, 9 класс

Урок №4. Работаем с тегом МАР.

Тег МАР (парный) позволяет работать с изображением как навигационной картой, так как изображение визуально можно представить в виде отдельных фрагментов - геометрических областей. На каждом фрагменте может срабатывать ссылка на другую страничку или происходить вызов событийного окна с соответствующим текстом.

В МАР – один параметр name - имя карты латинскими буквами, например, karta1

В Map обязательно вложен одиночный тег Area с параметрами, которые определяют геометрические области внутри карты и, либо ссылки на другую страницу, связанные с каждой областью (т.е. куда вы попадете при нажатии на какую-либо часть нашей карты), , либо вызов событийного окна.

Для того, чтобы связать размеченную карту с целым изображением, надо в тег IMG записать параметр usemap

<img src=7.jpg usemap="#karta1">


name=karta1>


...

Параметры теги AREA:

  1. Shape - определяет форму области (shape=rect - прямоугольник, shape=circle - круг shape=poly - многоугольник);

  2. Coords - определяет координаты фрагмента карты. Число координат и порядок их значений зависят от выбранной формы. Для прямоугольника - это координаты верхнего левого и правого нижнего углов (т.е. координаты диагонали).
    <area shape="rect" coords="x1,y1,x2,y2">.
    Для круга – координаты центра и радиус <
    area shape="rect" coords="x,y,r">.
    Как узнать координаты? Открыть изображение в графическом редакторе, например, в
    Paint или ОО Draw, навести мышку на область и в строке состояния посмотреть координаты.

  3. Href - указывает на внешнюю ссылку (на другую страницу).
    <
    area href=2.htm shape="rect" coords="8,13,21,55"> Ссылка на файл 2.htm, работает на прямоугольной области, ограниченной указанными координатами

  4. onClick="alert('текст')" – ссылка на текст в событийном окне. Например, так
    <
    area href="#" shape="circle" coords="330,170,10" onClick="alert('текст, который появится в отдельном событийном окне. Текст может быть большим по объему, но без кода клавиши Enter!!!! ')" title="всплывающий на части изображения текст">


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

Тема «Основы сайтостроения» Н. Угринович, 9 класс Урок №4. Работаем с тегом МАР.
  • Информатика
Описание:

Урок №4 "Работаем с тегом МАР". 9 класс.

Урок с номером 4, естественно, проводится после того, как изучены основные понятия, такие как,  веб- страница, веб-сайт, структура веб- страницы, основные теги для форматирования текста, вставка изображений, гиперссылок.

Тег МАР (парный) позволяет работать с изображением как навигационной картой, так как  изображение визуально можно представить в виде  отдельных фрагментов - геометрических областей. На каждом фрагменте может срабатывать ссылка на другую страничку или происходить вызов событийного окна с соответствующим текстом.

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

Автор Осипова Светлана Леонидовна
Дата добавления 05.01.2015
Раздел Информатика
Подраздел
Просмотров 453
Номер материала 33870
Скачать свидетельство о публикации

Оставьте свой комментарий:

Введите символы, которые изображены на картинке:

Получить новый код
* Обязательные для заполнения.


Комментарии:

↓ Показать еще коментарии ↓