Лабораторная работа №8. Карты-изображения Цель работы Основные понятия

Лабораторная работа №8. Карты-изображения
Цель работы: Познакомиться с возможностями языка HTML по созданию
карт-изображений.
Основные понятия.
Карта-изображение внешне выглядит как обычное встроенное изображение, но при выборе той или иной области на этом изображении выполняется переход на другие страницы. Для того чтобы изображение могло использоваться в качестве опорного для карты-изображения, формально не
накладывается никаких дополнительных ограничений.
Конфигурация карты-изображения записывается в виде обычного текста, который в зависимости от используемого формата может быть сохранен
в отдельном файле или являться частью HTML-документа. Описание конфигурации содержит координаты для каждой из активных областей изображения, а также URL-адреса, связанные с каждой из этих областей.
Карты-изображения могут быть двух вариантов: серверный и клиентский варианты. В свою очередь серверный вариант может быть реализован в
двух различных форматах – NCSA и CERN.
Серверный вариант. Для реализации серверного варианта картыизображения необходимо, чтобы HTML-документ был размещен на сервере.
Для каждой карты-изображения на сервере должен быть размещен файл, описывающий конфигурацию активных областей.
Для обеспечения функционирования карты-изображения необходимо
указать, что данное изображение является опорным для карты. Это выполняется заданием параметра ISMAP в тэге <IMG>. Кроме того, картуизображение необходимо сделать ссылкой к файлу конфигурации картыизображения, содержащему координаты активных областей изображения.
<А HREF=MyImage.map> <IMG SRC=MyImage.gif ISMAP> </A>
Клиентский вариант. Клиентский вариант карты-изображения позволяет поместить всю информацию о конфигурации карты в HTML-файле, в который встроено изображение.
Для указания того, что встроенное изображение является опорным для
карты, используется параметр USEMAP тэга <IMG>. Значением параметра
USEMAP является ссылка на описание конфигурации карты. Например:
<IMG SRC=risunok.gif USEMAP=#name_map>
Описание конфигурации активных областей должно располагаться в том
же файле, что и данная строка HTML-кода, и иметь имя name_map.
Для описания конфигурации областей карты-изображения используется
специальный тэг <МАР>, единственным параметром которого является
NAME. Значение параметра NAME определяет имя, которое должно соответствовать имени в USEMAP. Тэг <МАР> требует закрывающего тэга </МАР>.
Создание веб-страниц
Внутри этой пары тэгов должны располагаться описания активных областей
карты, для чего используется специальный тэг <AREA>.
Каждый отдельный тэг <AREA> задаёт одну активную область. Параметрами тэга <AREA> являются:
SHAPE – форма активной области (rect, circle, poly, default);
COORDS – координаты отдельной активной области:
 для области типа rect задаются координаты верхнего левого и правого нижнего углов прямоугольника;
 для области типа circle задаются три числа – координаты центра круга и радиус;
 для области типа poly задаются координаты вершин многоугольника
в нужном порядке;
 область типа default не требует задания координат;
HREF – адрес ссылки;
NOHREF – отсутствие ссылки;
TARGET – употребляется при работе с фреймами, для указания имя
фрейма, в который будет загружаться документ по данной ссылке;
ALT – альтернативный текст.
Пример:
<МАР NAME="logo">
<AREA SHAPE=rect COORDS="33, 60, 191, 246" HREF="r.htm"
ALT="Прямоугольная область">
<AREA SHAPE=circle COORDS="366, 147, 109" HREF="c.htm"
ALT="Круговая область">
<AREA SHAPE=poly COORDS="534, 62, 699, 62, 698, 236, 626, 261,
534, 235" HREF="p.htm" ALT="Многоугольник">
<AREA SHAPE=default HREF="default.htm">
</MAP>
Порядок выполнения работы
1. Откройте Paint.
2. В Paint создайте рисунок размером 600х600 точек и сохраните его в папку
D:\Users\...\Web\ Lab8\ в формате JPG под именем mymap.
3. В Paint создайте рисунок размером 100х300 точек и сохраните его в папку
D:\Users\...\Web\ Lab8\ в формате JPG под именем pic.
4. Откройте Блокнот.
5. Создайте HTML-документ с заголовком Карта-изображения.
6. Сохраните файл в папку D:\Users\...\Web\ Lab8\ с именем index8.html.
7. В HTML-документе:
 измените фоновый цвет;
 создайте невидимую таблицу, состоящую из одной строки и трёх ячеек:
1-я ячейка – шириной 200 точек, 2-я – 600, 3-я – 200;
 в среднюю ячейку вставьте рисунок mymap и сделайте его опорным для
карты-изображения.
2
Создание веб-страниц
8. Создайте области карты-изображения:
 в центре рисунка круговую область радиусом 100, при выборе которой
происходил бы переход к документу f1.html;
 в левом верхнем углу прямоугольную область размером 200х100, при
выборе которой происходил бы переход к документу f2.html;
 в правом верхнем углу шестиугольную область, при выборе которой
происходил бы переход к документу f3.html;
 при выборе оставшейся области рисунка должен происходить переход к
документу f4.html.
9. Создайте HTML-документ с именем f1.html. В документе:
 измените фоновый цвет;
 вставьте рисунок pic, сделайте, чтобы он выравнивался по центру.
10. Создайте HTML-документ с именем f2.html. В документе:
 измените фоновый цвет;
 создайте нумерованный список, состоящий из 10 строк. Нумерация
должна быть римскими цифрами.
11. Создайте HTML-документ с именем f3.html. В документе:
 измените фоновый цвет;
 видимую таблицу вида:
12. Создайте HTML-документ с именем f4.html. В документе:
 измените фоновый цвет;
 создайте заголовок " Разработчик", измените его цвет;
 создайте горизонтальную линию. Для линии задайте цвет, длину и толщину. Сделайте, чтобы она выравнивалась по центру;
 напишите своё Ф.И.О., факультет, группу.
3