Тема: Создание карт изображений.
Цель: познакомить с тегами создания карт изображений в HTML, настройке
переходов по ссылкам активных областей изображения; развивать информационную
грамотность, внимание, память, речь; воспитывать культуру информационного
общения.
Оборудование: медиапроектор, презентация к уроку, карточки со словарными
словами, справочная литература.
Организационное начало.
I.
1. Приветствие.
2. Проверка готовности к уроку.
Ход урока.
Повторительнообучающая работа.
II.
1. Работа по карточкам.
Лабораторная работа
«Работа с графикой в документе html»
Задание: создать HTML – документ по образцу:
![]()
Этот маяк расположен на берегу моря и служит кораблям для ориентира. Он очень
помогает морякам в плохую погоду.
![]()
Это небольшая яхта.
Я люблю море, но не умею плавать.
![]()
Море, море мир безбрежный
2. Подведение итогов этапа.
Работа по осмыслению и усвоению нового материала.
III.
1. Объявление темы и цели урока
2. Проведение инструктажа по ТБ.
3. Изучение нового материала.
Создание карты изображения является одной из привлекательнейших
возможностей HTML, позволяющей пользователю привязывать ссылки на другие
документы к отдельным частям изображений. Щелкая мышью на отдельных частях
изображения, пользователь может выполнять те или иные действия, переходить по той
или иной ссылке на другие документы и т.п.
Картаизображение представляет собой графический рисунок, а значение карты
определяется в виде координатных кривых. Данные значения указывают активные
области изображения и содержат информацию куда следует перейти после нажатия
на одну из этих областей. Активные области имеют форму многоугольника,
прямоугольника и круга.
Типы карт:
а) клиентский вариант позволяет разместить все данные об активных
областях в самом HTMLдокументе.
б) серверный вариант подразумевает, что документ находится на Web
сервере. Процесс перехода по гиперссылкам осуществляется следующим образом.
При нажатии на одну из активных областей браузер передает координаты на
сервер, который обращается к специальному файлу. Результат обращения
возвращается браузеру в виде адреса, который загружается в окне обозревателя.
Для того чтобы браузер определил изображение как карту, необходимо в теге
![]()
,указать параметр ismap, а файл сохранить в формате map.
Рассмотрим наиболее популярный вариант клиентский. Вспомним еще раз, что
картаизображение это любой рисунок части которого являются ссылками на другие
документы. И чтобы перейти к другой странице надо просто щелкнуть мышью на
определенной части рисунка.Для определения того,что изображение является картой
используется параметр usename тега
![]()
.
Чтобы включить поддержку карты для изображения, необходимо ввести
дополнительный параметр в тэг IMG:
![]()
Параметр USEMAP указывает, в каком месте находится карта описываемого
изображения. Карта изображения определяет, какому участку изображения какой URL
соответствует. Карта изображения может находиться в том же документе, что и
изображение, или в другом документе. Помещение карты в другой документ позволяет
собрать все карты изображений в одном документе (если у вас их несколько в
различных документах), но добавляет еще одну итерацию в сети, когда за первую
итерацию выясняется местонахождение карты, а за вторую выполнение действия,
предписанного URL для данного участка изображения. Параметр map_name
указывает имя карты для изображения, а предшествующий ему URL определяет
местонахождение карты. Если данный URL отсутствует, то карта с указанным именем
ищется в текущем документе.
Рассмотрим синтаксис определения карты изображения:
Параметры:
Данный тэг завершает описание карты изображения.
Применение:
Технология Image Map применяется в самых различных областях. Однако
наиболее часто ее применение можно увидеть при создании графических меню, когда
создается одно большое изображение с элементами меню, и каждому участку
изображения предписывается какое либо действие.
Так же прменять данную технологию можно при создании простых ГИСподобных
систем с картографическими возможностями.
IV. Практическая работа.
1. Сообщение задания.
2. Самостоятельная работа.
Задание:
1. Создать HTML – документ в папке student\3Г под названием Карта.html.
2. Вставьте рисунок duck.gif в html – документ. Изображения находятся в папке
«Практическая 3Г» в папке «Student».
3. Создать карту изображений на рисунок duck.gif. Установите активные
области:
а) шляпа (прямоугольная область) – ссылка на изображение Krokodil.gif.
б) тело (окружность) – ссылка на изображение Gorilla.gif.
в) трость (многоугольник) – ссылка на изображение Giraph.gif.
3. Текущий инструктаж.
4. Проверка выполнения задания.
Полный листинг:
Итог урока.
V.
1. Фронтальный устный опрос.
Для чего служат карты изображений?
Какой тег отвечает за вставку карт изображений
Какие параметры активных областей есть у тега shape?
VI.
Задавание на дом
Храпоничева, стр.128129.
Практическая работа на тему:
«Создание карт изображений»
Задание:
1. Создать HTML – документ в папке student\3Г под названием Карта.html.
2. Вставьте рисунок duck.gif в html – документ. Изображения находятся в папке
«Практическая 3Г» в папке «Student».
3. Создать карту изображений на рисунок duck.gif. Установите активные
области:
а) шляпа (прямоугольная область) – ссылка на изображение Krokodil.gif.
б) тело (окружность) – ссылка на изображение Gorilla.gif.
в) трость (многоугольник) – ссылка на изображение Giraph.gif.Практическая работа на тему:
«Создание карт изображений»
Задание:
1. Создать HTML – документ в папке student\3Г под названием Карта.html.
2. Вставьте рисунок duck.gif в html – документ. Изображения находятся в папке
«Практическая 3Г» в папке «Student».
3. Создать карту изображений на рисунок duck.gif. Установите активные
области:
а) шляпа (прямоугольная область) – ссылка на изображение Krokodil.gif.
б) тело (окружность) – ссылка на изображение Gorilla.gif.
в) трость (многоугольник) – ссылка на изображение Giraph.gif.