ТЕОРИЯ
Элемент <MARQUEE>
Элемент <MARQUEE> используется с целью создания в документе бегущей строки.
<MARQUEE атрибуты > Текст строки </MARQUEE>
Он может иметь атрибуты:
- bgcolor
Этот атрибут задает цвет фона бегущей строки.
Синтаксис: <MARQUEE bgcolor=" цвет "> - height
Этот атрибут задает высоту бегущей строки в пикселях или процентах от всего окна.
Синтаксис: <MARQUEE height= число > - align
Этот атрибут задает выравнивание бегущей строки по верхнему краю top, по середине middle или по нижнему краю bottom.
Синтаксис: <MARQUEE align= ... > - direction
Этот атрибут задает направление движения бегущей строки: left влево, right вправо, up вверх, down вниз.
Синтаксис: <MARQUEE direction=" ... "> - behavior
Этот атрибут задает поведение бегущей строки, либо scroll прокрутка, либо slide прокрутка с остановкой, либо alternate движение от края к краю.
Синтаксис: <MARQUEE behavior=" ... "> - hspace
Этот атрибут задает смещение в пикселах вправо бегущей строки.
Синтаксис: <MARQUEE hspace= число > - vspace
Этот атрибут задает пустое пространство выше и ниже бегущей строки.
Синтаксис: <MARQUEE vspace= число > - loop
Этот атрибут задает количество проходов бегущей строки.
Синтаксис: <MARQUEE loop= число > - scrollamount
Этот атрибут задает скорость движения бегущей строки, если его значение равно 1, то она будет еле ползти, если его значение больше 10, то она будет двигаться очень быстро.
Синтаксис: <MARQUEE scrollamount= число > - scrolldelay
Этот атрибут задает временной интервал между шагами бегущей строки, с помощью него можно заставить строку двигаться рывками.
Синтаксис: <MARQUEE scrolldelay= число >
Пример: Бегущая строка, заданная элементом
<MARQUEE height= 10 behavior=" scroll "> СТРОКА </MARQUEE>
Навигационные карты
Карты, обрабатываемые на клиентской машине браузером, создаются с помощью элементов MAP и AREA и представляют собой гиперссылки, офомленные в виде активных областей на изображении. Применить созданную карту к изображению можно вызвав ее по имени с помощью атрибута USEMAP элемента IMG.
| Пример: | |
| <!-- Создаем карту с именем ImageMap: --> <MAP NAME="ImageMap"> <AREA HREF="something.html" SHAPE="rect" COORDS="0,0,70,140" ALT="Левая половинка"> <AREA HREF="anything.html" SHAPE="rect" COORDS="71,0,140,140" ALT="Правая половинка"> </MAP> <!-- Создали. --> <BODY> <!-- Привинчиваем ее к изображению --> <IMG src="/img/block.gif" USEMAP="#ImageMap" HEIGHT="140" WIDTH="140" BORDER="0">... |
В данном примере мы создали квадратное изображение размером 140x140 пикселов, левая часть которого является ссылкой на файл something.html, а правая – на файл anything.html.
Примечание:
| Для создания карт, обрабатываемых на сервере, используется атрибут ISMAP элемента IMG. Мы их сознательно не рассматриваем, ибо механизм обработки карт на удаленной машине осуществляется с помощью скриптов и не имеет к HTML никакого отношения. |
MAP
(HTML 3.2) – Map
Создает новую навигационную карту. Между начальным и конечным тегами содержит один или несколько элементов AREA, определяющих навигационные области карты.
Атрибуты:
NAME – единственный и обязательный атрибут. Определяет имя навигационной карты, уникальное для данного документа. Используется для вызова карты с помощью атрибута USEMAP элемента IMG. Вы можете указать любое имя без пробелов с использованием латинских символов и цифр.
| Пример: | |
| <!-- Создаем карту Map1: --> <MAP NAME="Map1"> <!-- Задаем области --> <AREA HREF="...> <AREA HREF="...>... </MAP> <!-- Карта готова. Применим её к картинке: --> <IMG SRC="image.gif" USEMAP="#Map1" WIDTH=200 HEIGHT=100 ALT="Картинка"> |
AREA
(HTML 3.2) – Map Area
Создает область карты, определенной с помощью элемента MAP. Элемент должен располагаться между начальным и конечным тегами элемента MAP. Не имеет конечного тега.
Атрибуты:
SHAPE – определяет форму навигационной области. Возможные значения:
rect – прямоугольник;
circle – окружность;
poly – многоугольник.
В зависимости от выбранной формы меняется способ задания ее координат в атрибуте COORDS.
COORDS – определяет координаты навигационной области на карте. Используется в паре с атрибутом SHAPE. Способы задания координат для разных типов областей:
SHAPE="rect" COORDS="левый x, верхний y, правый x, нижний y";
SHAPE="circle" COORDS="центр x, центр y, радиус";
SHAPE="poly" COORDS="x1,y1,x2,y2,x3,y3,...";
HREF – определяет область как гипертекстовую ссылку. Значение задается в виде ссылки (URL).
TARGET – определяет окно (фрейм), на которое указывает гипертекстовая ссылка. Этот атрибут используется только совместно с атрибутом HREF. В качестве значения необходимо задать либо имя одного из существующих фреймов (см. элемент FRAME) либо одно из зарезевированных имен, подробно описанных в атрибуте TARGET элемента A.
NOHREF – определяет область как неактивную (невосприимчивую к нажатию). Данный атрибут противоположен атрибуту HREF и используется для отмены действия последнего.
ALT – определяет альтернативный текст-подсказку для данной области.
| Пример: | |
| <!-- Создаем хитрую карту с круглой дыркой посередине --> <MAP NAME="map1"> <AREA NOHREF SHAPE="circle" COORDS="80,70,40"> <AREA HREF="guide.html" ALT="Путеводитель" SHAPE="rect" COORDS="0,0,167,140"> </MAP>... <!-- Применяем ее к картинке --> <IMG src="/img/logo.gif" WIDTH="167" HEIGHT="140" BORDER="0" ALT="Путеводитель" USEMAP="#map1"> |
Примечания:
|
| В последовательности из нескольких элементов AREA наибольший приоритет имеют те, которые были определены первыми. Они перекрывают области, определенные позже. Именно поэтому в приведенном выше примере сначала создается пассивная область (отверстие) и лишь потом – активная со ссылкой. |
|
| Старайтесь всегда указывать атрибут ALT. Пользователи, работающие в текстовом режиме (а таких немало!), скажут вам спасибо |
ЗАДАНИЕ
Бегущая текстовая строка
1. Вставьте бегущую строку
Создайте в вашей папке, в папке HTML папку Map
Скопируйте в папку Map файл \\P:18школа\ ag00375_01.gif. Создайте в той же папке (с помощью Блокнота) файл 1.html. Наберите в нем следующий код
<html>
<head>
<title>Элвис</title>
</head>
<body>
<img src="ag00375_01.gif">
<marquee behavior=scroll >Это Элвис</marquee>
</body>
</html>
- Откройте созданную WEB-страницу в браузере. Измените тег Marquee таким образом, чтобы надпись была на желтом фоне, прокручивалась с остановками 3 раза от края к краю.
Навигационные карты
- Откройте программу Adobe Photoshop (или Paint) и создайте в нем файл размером 100х100 пикселей со следующим рисунком:
Сохраните его под именем 1.jpg в своей папке. Этот рисунок будет использован вами при создании навигационной карты.
- Скопируйте в папку Map ваши файлы page1.html, page2.html, page3.html, page4.html page5.html
Создайте в папке Map файл 2. html. Наберите в нем следующий код:
<html>
<head>
<title> Навигационная карта </title>
</head>
<body >
<img src="1.jpg"usemap="#karta">
<map name="karta">
<area href="page1.html" target="_blank"shape="rect"coords=0,0,100,50>
<!--Для того, чтобы страницы по ссылкам открывались в новом окне, необходимо добавить в тег <a> атрибут target=_blank-->
<area href="page2.html"target="_blank"shape="rect"coords=0,50,100,100>
</body>
</html>
Откройте созданную страницу в браузере. Нажмите на кнопки навигационной карты
Убедитесь, что страница отображается правильно