Пример 15. Документ с сенсорным изображением
<html>
<head>
<title> сенсорное изображение </title>
</head>
<body>
<MAP NAME="computer">
<AREA SHAPE="RECT" COORDS="17, 3, 350, 281" HREF="comp_dop.htm#монит" TARGET="monit " Alt="Монитор ">
<AREA SHAPE="RECT" COORDS="7, 298, 360, 380" HREF="comp_dop.htm#клав" TARGET="keyb" Alt="Клавиатура ">
<AREA SHAPE="RECT" COORDS="374, 15, 546, 348" HREF="comp_dop.htm#блок" TARGET="system" Alt="Системный блок ">
<AREA SHAPE="POLYGON" COORDS="395, 367, 403, 356, 449, 357, 458, 369, 458, 380, 395, 383, 395, 367" HREF="comp_dop.htm#мышь" TARGET="mouse" Alt="Мышь ">
</MAP>
<h1>Устройство компьютера</h1>
<img src="computer.jpg" border=0 width=546 height=383 usemap="#computer">
</body>
</html>
Закончив создание сенсорного изображения, следует тщательно протестировать его с помощью броузера. При тестировании следует опробовать каждый фрагмент и убедиться, что все ссылки сделаны правильно. В нашем примере сенсорное изображение должно функционировать следующим образом. При щелчке на изображении системного блока должно открываться новое окно броузера с главой «Системный блок» из файла comp_dop.htm (см. рис. 8.15), при щелчке на изображении монитора - с главой «монитор», аналогично для мыши и клавиатуры.
Устройство
Рис. 8.15. Окна броузера с сенсорным изображением и файлом-ссылкой
8.12. Фреймы
Фреймы дают возможность разбить Web-страницу на независимые области. В каждую из этих областей можно загрузить отдельный (полный) HTML-документ. Кроме того, при этом образуется еще один «невидимый» документ, представляющий собой описание фреймсодержащей страницы.
Н
1
<Заголовок>
2 < Содержание>
3 <Данные>
Рис.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.