ВУЗ: Не указан
Категория: Не указан
Дисциплина: Не указана
Добавлен: 06.04.2021
Просмотров: 267
Скачиваний: 1
16
1.3.3.
Серверный
вариант
Серверный
вариант
реализации
карты
-
изображения
(Server-Side
Imagemap)
подразумевает
,
что
документ
,
в
котором
прописаны
координаты
областей
,
находится
на
самом
web-
сервере
,
который
обязательно
должен
поддерживать
выполнение
CGI-
сценария
.
Процесс
перехода
по
гиперссылкам
на
карте
-
изображении
осуществ
-
ляется
следующим
образом
.
При
нажатии
на
одной
из
активных
областей
браузером
передаются
координаты
на
сервер
,
который
обращается
к
спе
-
циальному
конфигурационному
файлу
.
Результат
обработки
данных
воз
-
вращается
браузеру
назад
в
виде
адреса
,
соответствующего
данной
актив
-
ной
области
,
он
загружается
в
окне
обозревателя
.
В
случае
если
конфигурационный
файл
не
содержит
данных
об
ис
-
комой
активной
области
,
выводится
сообщение
об
отсутствии
данного
до
-
кумента
.
Для
того
чтобы
браузер
определил
графический
объект
как
карту
-
изображение
,
необходимо
в
теге
<IMG>
,
описывающем
конфигурацию
карты
-
изображения
,
указать
параметр
ISMAP
,
а
файл
конфигурации
со
-
хранить
в
формате
MAP.
Серверный
вариант
поддерживает
два
формата
реализации
карт
-
изображений
– CERN
и
NCSA.
Первый
разработан
научным
центром
European Organization for
Nuclear Research
и
предлагает
следующую
запись
координат
активных
об
-
ластей
:
т
ип
области
координаты
адрес
Значения
пар
координат
разделяются
запятой
и
заключаются
в
круг
-
лые
скобки
,
например
:
rect (54, 127)(45, 344) http://www.site.ru/
В
начале
конфигурации
стоит
значение
rect (
прямоугольное
выделение
для
задания
активной
области
).
Другими
значениями
могут
быть
: circle (
круг
),
poly (
многоугольник
)
и
default (
значение
по
умолчанию
).
Формат
NCSA
разработан
центром
приложений
для
суперкомпьюте
-
ров
National Center for Supercomputing Applications
и
предлагает
несколько
иной
формат
записи
конфигурации
карт
-
изображений
:
тип
области
адрес
координаты
Координаты
тоже
разделяются
запятыми
,
но
в
скобки
не
заключают
-
ся
,
например
:
rect http://www.site.ru/ 54, 127 45, 344
Кроме
типов
областей
,
предложенных
CERN,
данный
формат
разре
-
шает
использование
типа
point (
активизируется
та
ссылка
после
нажатия
,
которая
обозначена
ближе
всего
к
точке
соприкосновения
).
17
1.3.4.
Клиентский
вариант
Клиентский
вариант
позволяет
разместить
все
данные
об
активных
областях
карты
-
изображения
в
самом
HTML-
документе
.
В
этом
случае
ко
-
личество
обращений
к
серверу
сильно
сокращается
,
а
конфигурировать
саму
карту
-
изображение
можно
параллельно
с
изменением
HTML-
кода
.
Размещать
файл
конфигурации
на
web-
сервере
не
нужно
–
координа
-
ты
активных
областей
указываются
в
самом
документе
,
куда
встроен
гра
-
фический
объект
для
карты
-
изображения
.
При
использовании
клиентского
варианта
(Client-Side Imagemap)
в
тег
<IMG>
добавляется
параметр
USEMAP
.
В
связи
с
тем
что
клиентский
вариант
на
сегодня
распространен
бо
-
лее
широко
и
к
тому
же
более
доступен
,
подробно
рассмотрим
процесс
конфигурации
карты
-
изображения
на
примере
Client-Side Imagemap.
Для
определения
конфигурации
активных
областей
карты
-
изобра
-
жения
используется
специальный
тег
-
контейнер
<
МАР
>
с
параметром
NAME
,
который
должен
соответствовать
свойству
параметра
USEMAP
в
теге
<IMG>
.
Необходимо
отметить
,
что
описание
карты
-
изображения
следует
сразу
же
после
указания
тега
рисунка
<IMG>
:
<IMG SRC="picture.gif" USEMAP="#mymap">
<MAP NAME="mymap">
Координаты
активных
областей
...
</MAP>
Описание
активных
областей
карты
-
изображения
осуществляется
с
помощью
тега
<AREA>
,
не
требующего
за
собой
закрывающего
тега
.
Тег
<AREA>
может
включать
следующие
параметры
:
•
SHAPE
–
определяет
форму
активной
области
(
значения
такие
же
,
как
в
формате
CERN
серверного
варианта
);
•
COORDS
–
осуществляет
выбор
конкретной
активной
области
и
со
-
держит
значения
пар
координат
.
Начало
координат
размещается
в
верхнем
ле
-
вом
углу
графического
изображения
,
которому
соответствует
начальное
зна
-
чение
0, 0;
•
TARGET
–
используется
при
работе
с
фреймами
;
•
ALT
–
действие
параметра
аналогично
использованию
его
в
обыч
-
ных
гиперссылках
на
основе
графических
указателей
(
альтернативный
текст
);
•
HREF
–
наличие
гиперссылки
для
данной
области
;
•
NOHREF
–
отсутствие
гиперссылки
для
данной
области
.
Пример
карты
-
изображения
(
клиентский
вариант
)
приведен
в
лис
-
тинге
1.4.
18
Листинг
1.4.
Пример
карты
-
изображения
(
клиентский
вариант
)
<HTML>
<HEAD>
<TITLE>
Пример
карты
-
изображения
(
клиентский
вариант
)</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="black" LINK="#00FF00"
ALINK="#00FFFF" VLINK="BLUE">
<IMG SRC="images\imagemap.jpg" BORDER="1" WIDTH="461" ALT=""
USEMAP="#gift">
<MAP NAME="gift">
<AREA SHAPE="rect" COORDS="85, 35 235, 235" HREF="kefir.html"
ALT="
Кефир
">
<AREA SHAPE="rect" COORDS="270, 110 420, 210"
HREF="ahs_tray.html" ALT="
Пепельница
">
</MAP>
</BODY>
</HTML>
В
завершение
следует
добавить
,
что
возможно
совмещение
серверного
и
клиентского
вариантов
карты
-
изображения
.
В
этом
случае
в
теге
рисунка
<IMG>
необходимо
указывать
оба
параметра
–
ISMAP
и
USEMAP
.
При
этом
следует
помнить
,
что
параметр
USEMAP
будет
доминирующим
.
Такой
комби
-
нированный
вариант
можно
применять
во
избежание
трудностей
,
связанных
с
отсутствием
поддержки
данной
технологии
некоторыми
браузерами
(
хотя
та
-
ких
–
считанные
единицы
).
Если
браузер
не
поддерживает
Client-Side
Imagemap,
то
параметр
USEMAP
проигнорируется
,
а
реализован
будет
сервер
-
ный
вариант
(
при
наличии
конфигурационного
файла
на
сервере
и
поддержке
последним
CGI).
19
2 HTML-
документы
на
основе
фреймов
2.1.
ПОНЯТИЕ
ФРЕЙМА
Фрейм
(
от
англ
. «frame» –
рамка
,
каркас
,
кадр
)
представляет
собой
отдельное
рабочее
окно
браузера
,
разделенное
еще
на
несколько
различ
-
ных
по
параметрам
и
размеру
фреймам
.
Совокупность
таких
окон
принято
называть
фреймовой
структурой
.
Чаще
всего
такие
структуры
называют
просто
окнами
(
или
же
в
со
-
ответствии
с
родным
названием
–
фреймы
).
Фреймовая
структура
позволя
-
ет
разбивать
основную
область
на
любое
число
составляющих
подфреймов
(
подобластей
),
причем
по
необходимости
определяя
внутреннее
поведение
подфреймов
.
Каждый
фрейм
–
это
не
что
иное
,
как
отдельный
HTML-
документ
,
загружающийся
браузером
в
предназначенном
для
него
окне
.
Таким
обра
-
зом
, HTML-
документ
,
созданный
на
фреймовой
основе
,
является
набором
взаимосвязанных
электронных
документов
,
параметры
и
свойства
которых
определяются
настройками
всей
фреймовой
структуры
.
Впервые
возможность
отображения
фреймов
была
реализована
ком
-
панией
Netscape
в
одноименном
браузере
версии
2.0.
Но
ничего
замеча
-
тельного
первоначальный
вариант
поддержки
подобной
структуры
не
предлагал
своим
пользователям
.
Однако
уже
с
выходом
версии
3.0
в
брау
-
зере
Netscape
появился
ряд
нововведений
,
расширивших
диапазон
пара
-
метров
основных
тегов
описания
фреймов
.
В
настоящее
время
фреймы
получили
достаточное
распространение
и
представляют
собой
еще
один
вариант
системы
навигации
интернет
-
ресурса
.
2.2.
ОБЛАСТИ
ПРИМЕНЕНИЯ
ФРЕЙМОВ
Диапазон
применения
фреймов
не
настолько
широк
как
,
например
,
у
карт
-
изображений
или
меню
навигации
в
виде
обыкновенных
текстовых
гиперссылок
.
Чаще
всего
прибегают
к
фреймовой
структуре
в
следующих
случаях
:
•
создание
неподвижной
или
прокручиваемой
навигационной
пане
-
ли
управления
;
•
одновременное
отображение
информации
в
нескольких
местах
;
•
постоянное
визуальное
присутствие
определенного
текстового
,
графического
или
иного
объекта
;
•
разработка
web-
интерфейса
для
онлайн
-
игр
.
Рассмотрим
подробнее
каждую
из
названных
областей
применения
.
Панель
навигации
.
Независимо
от
типа
интернет
-
ресурса
(
корпора
-
тивный
сервер
,
персональная
страница
,
общественная
организация
и
т
.
д
.)
в
последнее
время
стало
весьма
популярным
применение
фреймов
для
соз
-
дания
привлекательных
и
удобных
навигационных
панелей
(
меню
).
Эти
панели
могут
быть
статичными
,
т
.
е
.
независящими
от
действий
посетите
-
ля
,
и
динамическими
,
когда
какое
-
либо
действие
со
стороны
пользователя
(
нажатие
комбинации
клавиш
или
на
кнопку
мыши
и
пр
.)
приводит
к
раз
-
личным
по
виду
и
масштабу
изменениям
,
начиная
с
замены
внешнего
вида
навигационных
кнопок
(
эффект
RollOver/MouseOver)
и
заканчивая
испол
-
нением
сложных
программных
сценариев
.
Такая
реализация
фреймов
удобна
прежде
всего
тем
,
что
она
позво
-
ляет
посетителю
перемещаться
по
сайту
и
независимо
от
его
местораспо
-
ложения
(
двадцать
страниц
он
пролистал
или
всего
одну
)
постоянно
иметь
перед
глазами
панель
управления
с
перечнем
всех
или
основных
разделов
сайта
.
Реализовать
такую
панель
управления
можно
разными
способами
:
•
в
главном
фрейме
обозначить
только
основные
разделы
web-
сайта
,
а
подразделы
открывать
в
другом
окне
;
•
в
главном
фрейме
разместить
ссылки
на
документы
подразделов
,
тогда
при
нажатии
на
ссылку
конкретного
подраздела
главный
фрейм
пе
-
резагрузится
и
откроется
расширенный
вариант
меню
;
•
в
главном
меню
расположить
динамическое
меню
в
виде
раскры
-
вающегося
списка
,
при
нажатии
на
пункты
которого
в
другом
фрейме
бу
-
дет
открываться
нужный
документ
.
На
рис
. 5
представлен
пример
меню
навигации
,
составленного
на
ос
-
нове
фреймовой
структуры
.
Рис
. 5.
Меню
навигации
на
примере
фреймовой
структуры
Одновременное
отображение
информации
.
Иногда
бывает
необхо
-
димо
иметь
перед
глазами
одновременно
несколько
текстовых
или
иных
информационных
блоков
,
расположенных
в
разных
окнах
.
Например
,
сравнительные
характеристики
котировок
акций
(
покупка
/
продажа
),
20