14121

ИЗОБРАЖЕНИЯ-КАРТЫ. Создание изображения-карты в редакторе HomeSite

Конспект урока

Информатика, кибернетика и программирование

УРОК 11 ИЗОБРАЖЕНИЯКАРТЫ Изображениекарта – это такое изображение различные фрагменты которого служат ссылками на разные HTMLфайлы или URL. Выбирая с помощью мыши различные фрагменты изображения посетители сайта могут перемещаться со страницы на страницу. Создание

Русский

2013-05-21

408 KB

2 чел.


УРОК 11

ИЗОБРАЖЕНИЯ-КАРТЫ

Изображение-карта – это такое изображение, различные фрагменты которого служат ссылками на разные HTML-файлы или URL. Выбирая с помощью мыши различные фрагменты изображения, посетители сайта могут перемещаться со страницы на страницу.

Создание изображения-карты в редакторе HomeSite

  1.  На панели инструментов Tools нажать кнопку (New Image Map)
  1.  В появившемся диалоговом окне
    •  указать адрес и имя файла с рисунком, который будете использовать в основе карты (Image name)
    •  ввести имя карты (Map name)
    •  нажать кнопку ОК для перехода к следующему окну

  1.  В следующем диалоговом окне
    •  выбрать конфигурацию выделения и  выделить фрагмент;
    •  в появившемся окне ввести адрес ссылки (href);
    •  ввести альтернативный  текст;
    •  нажать кнопку ОК;

  1.  повторить действия пункта 3 для других фрагментов
  2.  Завершить формирование карты, выполнив сохранение (File → Save and Exit)

 


По завершении процесса создания изображения-карты в тексте программы появится следующий код:

<MAP name="klass">

 <AREA shape="circle" coords="51,145,13" href="8.htm" alt="Бачурина Инна" >

 <AREA coords="292,2,343,67" href="7.htm" alt="Мартова Света">

 <AREA shape="poly" coords="517,367,519,359,524,355,536,355,545,360,548,372,544,384,531,393,523,390,516,381"

href="13.htm" alt="Трубников Сергей">

</MAP>

<IMG src="class.jpg" width="600" height="450" border="0" alt="142 группа" usemap="#klass">

Ключевое слово usemap в теге IMG сообщает браузеру, что данное изображение является картой, и указание ему найти раздел <MAP> </MAP>с именем  klass, описывающий систему фрагментов и ссылок.

Каждый тег AREA описывает отдельный фрагмент изображения, где атрибут shape определяет конфигурацию выделения фрагмента, атрибут cords координаты узлов (для окружности – координаты центра и радиус),:

прямоугольная область –  shape=”rect”,

окружность –  shape="circle",

многоугольник –  shape="poly".
Если атрибут
shape отсутствует, предполагается прямоугольная область.

Атрибутом alt задается текст, всплывающий при наведении указателя мыши на заданный фрагмент, а атрибутом  href – адрес ссылки для него.

Замечание: если выделенные области перекрещиваются, то работает ссылка на файл, указанный первым в списке <MAP>.


Задание

  1.  Рассмотреть пример страницы с изображением-картой (primer11/klass.htm)
  2.  Создать свой вариант Web-страницы с изображением-картой, на котором выделены минимум три фрагмента различной конфигурации. Продемонстрировать результат преподавателю в окне браузера.

PAGE  3

  1.  

 

А также другие работы, которые могут Вас заинтересовать

41782. Изучение и анализ конструкций систем смазки транспортных двигателей 141.06 KB
  Вывод: Ознакомились с устройством систем смазки различных двигателей научились анализировать их конструктивные особенности.
41784. Создание цветных изображений с использованием цветов, контуров и инструментов заливки 6.16 MB
  Цели занятия: Научить создавать изображения с цветом контуром и инструментами заливки. Учащиеся должны научиться: Создает цветные изображения с использованием цветов контуров и инструментов заливки. Различают восемь типов заливок: однородные или сплошные заливки; градиентные заливки; заливки двухцветным узором; заливки цветным узором; заливки точечным узором; текстурные заливки; заливки растром PostScript; сетчатые заливки.
41785. Изучение метода обратного рассеяния в волоконных световодах с помощью оптического рефлектометра 437.08 KB
  Изучение метода обратного рассеяния, способов определения параметров неоднородных оптических линейных трактов по рефлектограмме, получение навыков работы с оптическим рефлектометром.
41786. Настройка фрезерного станка с числовым программным управлением ЛФ260МФЗ на обработку заданной детали 2.95 MB
  Цель работы: 1 Ознакомится с устройством и органами управления фрезерногостанка с ЧПУ ЛФ260МФЗ и системой управления НЗЗ1М. Ознакомится с технологическими возможностями станка и способами их реализации. Органы управления размещены на пульте управления станка и системе управления НЗЗ1М.
41787. ИССЛЕДОВАНИЕ СПОСОБОВ КОРРЕКЦИИ СИСТЕМ АВТОМАТИЧЕСКОГО УПРАВЛЕНИЯ 2.7 MB
  Исследование влияния обратных связей на характеристики линейных динамических звеньев. Изучение и исследование способов повышения качества САР при различных корректирующих устройствах.
41788. Приемы обработки числовой информации в среде Excel 90.72 KB
  Введите в ячейки А1 и А2 заголовок таблицы заполнив ячейки своими данными. Выполните объединение ячеек а 1:H1 и б 2:H2 Введите текстовые значения в ячейки А3:А8 и В3:H3. Скопируйте формулу из ячейки H4 в ячейки диапазона H5:H8. Для копирования ячейки перетащите выделение удерживая нажатой кнопку мыши в ячейки блока H5:H8.
41789. РАСЧЕТ ОТКЛИКА ЦЕПИ ПРИ ПРОИЗВОЛЬНОМ ВХОДНОМ ВОЗДЕЙСТВИИ 138.3 KB
  Цель работы: Изучение временного метода анализа цепи. Выполнение расчета цепи в среде PSpice. Результатом расчета согласно варианту задания является ток : Реакция цепи на входное воздействие: Переходная характеристика: Импульсная характеристика: 7.