Создание клиентского сенсорного изображения

Сенсорное изображение можно создать практически из любого рисунка. Сначала нужно разбить изображение на части. Для этого используются теги <MAP> и <AREA>. Тег <MAP> формирует схему (карту) изображения. Его атрибут NAME задает имя этой схемы.

Тег <AREA> описывает каждый отдельный участок разбиения изображения и соответствующие этому участку ссылки. Атрибуты тега <AREA>:

Shape - содержит форму фрагмента; возможные значения:

rect - прямоугольник;

circle - круг;

poly - многоугольник произвольной формы.

COORDS - координаты области в пикселях; для прямоугольного фрагмента нужно задать четыре координаты – левого верхнего угла и правого нижнего; для круга – три числа – координаты центра и величину радиуса; для многоугольника нужно задать координаты каждого его угла.

HREF - ссылка.

ALT - альтернативный текст.

После того как описана схема изображения, нужно с помощью атрибута USEMAP тега IMG задать имя схемы.

Рассмотрим пример создания сенсорного изображения.

Создадим Web-документ, содержащий информацию об устройстве компьютера. На главной странице этого документа сделаем заголовок «Устройство компьютера» и поместим изображение компьютера (файл рисунка - computer.jpg), включающее основные конструктивные элементы современного ПК (системный блок, монитор, клавиатур, мышь). Вид этого документа в броузере см. на рис. 8.14. Сохраним этот документ с именем computer.htm.

Создадим еще один документ, содержащий информацию об устройстве и назначении отдельных частей компьютера. Сохраним его с именем comp_dop.htm. Разобьем весь текст этого документа на главы. Название каждой главы оформим с помощью тегов заголовка первого уровня. Кроме того, сделаем закладки на каждом заголовке с помощью тега <A name= имя закладки>. Например, глава содержащая информацию об устройстве и назначении системного блока компьютера, будет иметь заголовок, оформленный следующим образом:

<h1><a name="блок"></a>Системный блок</h1>

Аналогично следует оформить заголовки глав «Монитор» (имя закладки – монит), «Клавиатура» (имя закладки – клав), «Мышь» (имя закладки – мышь). Закладки позволят сделать ссылки на разные части одного и того же документа.

Теперь приступим к составлению карты изображения в документе computer.htm. На рисунке выделим три прямоугольные области, охватывающие изображения монитора, системного блока и клавиатуры, и одну область в форме многоугольника, охватывающую изображение мыши.

Устройство

Рис. 8.14. Документ с сенсорным изображением

Области задаются с помощью координат. Координаты измеряются в пикселях, отсчет ведется от левого верхнего угла изображения.

Примечание. Вручную подбирать значения координат фрагментов довольно трудоемко и долго. К счастью, существует ряд удобных средств, облегчающих задание фрагментов для изображения-карты. Это такие программы, как MapThis, Live Image, CrossEye. Пользоваться этими программами несложно. Достаточно загрузить изображение (файл картинки), затем выбрать форму фрагмента с помощью кнопок панели инструментов и мышью очертить этот фрагмент на рисунке. Затем в диалоговом окне Area Settings (Параметры фрагмента) ввести имя файла (или URL), на который будет ссылаться фрагмент. Выполнить эти действия для всех фрагментов изображения, затем сохранить файл карты в формате HTML.

В нашем примере для каждой из четырех выделенных областей рисунка сделаем ссылку на соответствующую главу документа comp_dop.htm. В целом карта изображения будет выглядеть следующим образом:

</MAP>

Описание карты сенсорного изображения следует поместить в начале документа (например, сразу после тега <Body> или после заголовка). В дальнейшем при вставке рисунка в документ (тег <img>) следует указать, что для данного рисунка используется карта с соответствующим именем (атрибут Usemap). В нашем случае имя карты – computer.

Полный текст документа, содержащий описание карты и вставку сенсорного изображения, приведен в примере 15.

Пример 15. Документ с сенсорным изображением

<html>

<head>

<title> сенсорное изображение </title>

</head>

<body>

</MAP>

<h1>Устройство компьютера</h1>

</body>

</html>

Закончив создание сенсорного изображения, следует тщательно протестировать его с помощью броузера. При тестировании следует опробовать каждый фрагмент и убедиться, что все ссылки сделаны правильно. В нашем примере сенсорное изображение должно функционировать следующим образом. При щелчке на изображении системного блока должно открываться новое окно броузера с главой «Системный блок» из файла comp_dop.htm (см. рис. 8.15), при щелчке на изображении монитора - с главой «монитор», аналогично для мыши и клавиатуры.

Устройство

Рис. 8.15. Окна броузера с сенсорным изображением и файлом-ссылкой

Фреймы

Фреймы дают возможность разбить Web-страницу на независимые области. В каждую из этих областей можно загрузить отдельный (полный) HTML-документ. Кроме того, при этом образуется еще один «невидимый» документ, представляющий собой описание фреймсодержащей страницы.

Наиболее распространенный способ разбивки страницы на фреймы – это структура «заголовок – содержание – данные» (см. рис. 8.16).

Он обеспечивает эффективный доступ к содержимому Web-страницы. В самом верхнем фрейме отображается название (заголовок) или краткое содержание данного сайта, в левом фрейме – список разделов сайта (содержание), а в самом большом фрейме – собственно информация страницы. При такой структуре сайта на экране одновременно можно видеть три документа (каждый в своем фрейме). Кроме того, имеется еще четвертый документ, содержащий описание фреймов.

Разбивка страницы на фреймы начинается с тега <FRAMESET>. Этот тег имеет следующие атрибуты:

COLS=ширина столбца -создает фреймы в виде колонок (делит экран по вертикали); ширина может выражаться в пикселях или в процентах ширины страницы.

ROWS= ширина строки -создает фреймы в виде строк (делит экран по горизонтали); ширина может выражаться в пикселях или в процентах высоты страницы.

FRAMEBORDER = 1 или 0 - если задано значение 1, то на экране отображается объемная рамка, 0 – нет рамки.

FRAMESPACING=кол-во пикселей – задает дополнительное пространство между рамками.

Описание каждого отдельного фрейма выполняется с помощью тега <FRAME>. Атрибуты этого фрейма:

ALIGN=тип выравнивания; возможные значения: TOP, CENTER, BOTTOM, LEFT, RIGHT.

FRAMEBORDER= 1 или 0 - рамка.

NAME=имя фрейма.

MARGINHEIGHT=высота полей во фрейме.

MARGINWIDTH= ширина полей во фрейме.

SCROLLING=yes или no - разрешение или запрещение использования полос прокрутки.

NORESIZE - запрещение изменения размеров окна.

SRC=url - адрес документа, загружаемого во фрейм.

TARGET=NAME - определяет место загрузки документа (имя фрейма), на который указывает ссылка.

Рассмотрим пример фреймсодержащей страницы показанной на рис. 8.17. Как видно из рисунка, вся страница разбита на три фрейма: фрейм заголовка (вверху страницы), фрейм-содержание (слева) и фрейм основной информации. Полный текст фреймсодержащей страницы приведен ниже в примере 16.

Пример 16. Страница с фреймами

<html>

<head>

</head>

</frameset>

<body>

<p>This page uses frames, but your browser doesn't support them.</p>

</body>

</noframes>

</html>

Рис. 8.17. Пример страницы, использующей фреймы

В этом примере использованы вложенные теги <frameset>. Он указывают, каким образом разделить окно. Первый тег <frameset> делит страницу на два горизонтальных фрейма: фрейм-строку шириной 8% высоты страницы (тег <frameset rows="8%,*">) и фрейм , размер которого задан относительно (*). Для верхнего фрейма-строки запрещено использование полос прокрутки и изменение размера фрейма (атрибуты scrolling="no" noresize тега frame). В этот фрейм загружается файл с именем tt.htm. Этот файл содержит фразу заголовка с соответствующим оформлением (фоновый рисунок, цвет, размещение, выравнивание).

Вложенный тег <frameset cols="20%,*"> делит нижний горизонтальный фрейм еще на два вертикальных фрейма-столбца: ширина первого из них задана явно – 20% ширины страницы, а другого – относительно (*). В левый фрейм загружается файл rtslst.htm, содержащий перечень разделов сайта, оформленный в виде таблицы. В правый фрейм загружаются файлы, содержащие основную информацию страницы. Причем загружаться могут разные файлы, в зависимости от выбранного названия раздела. При начальной загрузке сайта – это титульный файл tit.htm, при выборе с помощью оглавления других разделов сайта в этот фрейм будут загружаться другие файлы.

Таким образом, можно просматривать информацию в главном фрейме (загружать различные файлы, пролистывать длинные файлы с помощью полосы прокрутки и т.п.), а в двух других фреймах при этом не будет изменяться содержимое. Т.е. постоянно на странице будет виден заголовок сайта в верхнем фрейме, а в левом фрейме - перечень разделов страницы, позволяющий быстро перемещаться по сайту (от одного раздела к другому).

Не все броузеры поддерживают фреймы. Для броузеров, не работающих с фреймами, в тексте документа есть тег <noframes>. Он сообщает, что данная страница содержит фреймы.

<body>

<p>This page uses frames, but your browser doesn't support them.</p>

</body>

</noframes>

<35 36 373839 40 41 >

Дата добавления: 2015-08-26; просмотров: 919;