Конспект урока по Веб-дизайну для 3 курса на тему: "Создание карт изображений"

Тема: Создание карт изображений. Цель:   познакомить   с   тегами  создания   карт   изображений   в  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 отсутствует, то карта с указанным именем ищется в текущем документе.  Рассмотрим синтаксис определения карты изображения:        Параметры:    Данный тэг определяет начало описания карты с именем map_name.    Описывает участок изображения и ставит ему в соответствие URL. Параметры:  SHAPE  Необязательный параметр, указывающий на форму определяемой области  изображения. Может принимать значения:  default ­ по умолчанию (обычно прямоугольник)  rect ­ прямоугольник  circle ­ круг  poly ­ многоугольник произвольной формы      COORDS  Координаты в пикселах описываемой области. Для прямоугольника это четыре координаты левого верхнего и правого нижнего углов, для круга ­ три координаты (две ­ центр круга, третья ­ радиус). Для многоугольника это описание каждого угла в двух координатах ­ соответственно число координат равно удвоенному количеству углов.  Координаты считаются с нуля, поэтому для описания области 100 на 100  используется описание:    HREF="url"  Описание ссылки, действия по которой будут выполняться при щелчке мыши в  заданной области.  NOHREF  Параметр, указывающий, что ссылка отсутствует для данного участка. По  умолчанию, если не указан параметр HREF, то считается что действует параметр  NOHREF. Также, для всех неописанных участков изображения считается, что  используется параметр NOHREF.  Если две описанных области накладываются друг на друга, то используется  ссылка, принадлежащая первой из описанных областей.   Данный тэг завершает описание карты изображения.  Применение:  Технология 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. Задавание на дом Храпоничева, стр.128­129. Практическая работа на тему: «Создание карт изображений» Задание:  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.