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

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

Такого ещё не было!
Скидка 70% на курсы повышения квалификации

Количество мест со скидкой ограничено!
Обучение проходит заочно прямо на сайте проекта "Инфоурок"

(Лицензия на осуществление образовательной деятельности № 5201 выдана ООО "Инфоурок" 20 мая 2016 г. бессрочно).


Список курсов, на которые распространяется скидка 70%:

Курсы повышения квалификации (144 часа, 1800 рублей):

Курсы повышения квалификации (108 часов, 1500 рублей):

Курсы повышения квалификации (72 часа, 1200 рублей):
Скачать материал

Тема «Основы сайтостроения» Н. Угринович, 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, естественно, проводится после того, как изучены основные понятия, такие как,  веб- страница, веб-сайт, структура веб- страницы, основные теги для форматирования текста, вставка изображений, гиперссылок.

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

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



Самые низкие цены на курсы переподготовки

Специально для учителей, воспитателей и других работников системы образования действуют 50% скидки при обучении на курсах профессиональной переподготовки.

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

Обучение проходит заочно прямо на сайте проекта "Инфоурок", но в дипломе форма обучения не указывается.

Начало обучения ближайшей группы: 25 октября. Оплата возможна в беспроцентную рассрочку (10% в начале обучения и 90% в конце обучения)!

Подайте заявку на интересующий Вас курс сейчас: https://infourok.ru

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

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

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

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


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

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