Методические указания1_2 (1084715), страница 9

Просмтор этого файла доступен только зарегистрированным пользователям. Но у нас супер быстрая регистрация: достаточно только электронной почты!

Текст из файла (страница 9)

Размеры объекта могут не совпадать с размерами рамки. Тогда справа и слева от объекта можно создать пустое пространство:

hspace=число пикселов

По аналогии можно создать пустое пространство выше и ниже:

vspace=число пикселов

3.10. Рисунки и карты

<IMG>

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

Необходимым атрибутом является src — указатель на файл графики:.

src="Ссылка на файл"

Ссылка на файл представляет собой URL. В некоторых случаях у пользователя может возникнуть желание скопировать в отдельную папку, какую-нибудь Web-страницу или набор страниц из Интернета. Это позволяет в дальнейшем использовать страницы, не подключаясь к Сети. Скопировать HTML-файлы легко: это сделает броузер. Сложнее с рисунками. Сначала их надо найти в папке кэша, скопировать в требуемую папку, а затем откорректировать значения всех атрибутов src, указав для них новый путь.

Очень полезным атрибутом является alt. Он позволяет выводить текст в тех местах, где должны располагаться рисунки. Страница может загружаться достаточно долго, и пока графические файлы на подходе, пользователь должен видеть, какие изображения он сможет получить. В некоторых случаях это позволит ему, не дожидаясь окончания загрузки, прокрутить в окне текущий документ или перейти на другую страницу. Вот несколько примеров:

• alt="My photo" — для фотографии;

• alt="SEND'-— если кнопка имеет надпись в виде рисунка;

• alt="www.АДРЕС.com" — если это гиперссылка;

• alt="pict15.gif" — удобно для разработчика страницы.

Высоту и ширину области, в которой демонстрируется рисунок, задают при помощи атрибутов height и width. В том случае, когда задается один из этих атрибутов, рисунок масштабируется таким образом, чтобы его высота или ширина соответствовали заданной. Второй размер устанавливается автоматически, в соответствующей пропорции. Таким образом, применение только одного из атрибутов изменяет оба размера рисунка. Если задать явным образом оба атрибута, то рисунок будет масштабироваться но двум осям в соответствии с заданным размером. Масштабирование, как правило, ухудшает качество изображения.

Рисунок можно снабдить и стандартными атрибутами: class, dir, id, lang, longdesc, style, title, атрибутами событий.

Элемент IMG позволяет использовать изображения, отдельные части которых связаны со ссылками и позволяют выполнять переходы. Такие изображения называются картами (map). В том случае, когда реакцию на щелчок на карте обрабатывает; программа, расположенная на сервере, в элемент включается атрибут ismap. Иногда его. записывают так:

ismap="ismap"

Однако задание значения атрибута совершенно не обязательно. •

В том случае, когда карта обрабатывается браузером, используется атрибут usemap. : Он определяет имя карты: '

usemap ="#Имя"

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

|Интересно, что задание атрибутов usemap придает элементу IMG свойства, характерные для элемента А, то есть возможность осуществления перехода. Кроме того, мы сталкиваемся со случаем, когда необходимо обязательное совместное использование сразу трех элементов: AREA, IMG и MAP.

<МАР> <AREA> </map>

Этот элемент необходим для общего определения карты. Внутри него определяются области карты при помощи элементов AREA и задается имя карты при помощи атрибута:

name="Имя"

Для каждой области карты должен быть создан свой элемент AREA. Он не имеет конечного тега. Этот элемент должен включать атрибут, определяющий ссылку:

href="Адрес"

Атрибут для задания текста, заменяющего изображение карты, не является обязательным:

alt="Текст подсказки"

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

Атрибуты, определяющие форму области на карте, являются обязательными. Существует три стандартных вида областей: круг (circle), прямоугольник (rect) и многоугольник произвольной формы (polygon).

Для круга необходимо задать координаты центра и радиус (г), выраженные в пикселах. Координаты центра отсчитываются от левого Края (х) и верхнего края (у) рисунка (рис. 4.1). Шаблон для задания круговой области таков:

shape="circle" coords=x,y,r

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

shape="poly" coords=x1, y1, x2,y2, х3,у3...

Рис. 4.1. Задание координат на карте

Пример многоугольника показан на рис. 4.1.

При определении прямоугольной области задают координаты верхнего левого и правого нижнего углов прямоугольника:

shape="rect" coords=x1,y1, x2, y2

При помощи атрибута nohref (который используется без значений) можно запретить переход по ссылке для определенной области карты.

На листинге 4.1 приведен пример страницы Map.htm, на которой размещены две карты. Карта, имеющая имя kartal, содержит область в виде круга и область произвольной формы. Карта karta2 содержит область прямоугольной формы.

Листинг 4.1. Web-страница с картами

HTML>

<HEAD>

<TITLE>Карты</title>

</head>

<BODY bgcolor="#FFFFFF" text="#000000" link="#0000FF" vlink="#FF0000" >

<A href="start.htm#gl04"><IMG align="right" src="soder.jpg" alt="На титульную страницу"

border=0 width=150 height=24></a><BR clear="right">

<A NAME="verh"></a>

<CENTER><H2>Примеры карт</h2></center>

<P>Изображения карт иллюстрируют способы задания координат

областей для переходов

<P>

<HR>

<H2>Карта 1</h2>

<MAP name="karta1">

<AREA alt="Круг" shape="circle"

coords="119,114,83" href="http://www.piter-press.ru">

<AREA alt="Многоугольник" shape="poly"

coords="74,242,180,250,249,239,242,278,31,276"

href="Start.htm">

</map>

<MAP name="karta2">

<AREA alt="Переход к карте 2" shape="rect"

coords="27,31,191,101" href="#verh">

</map>

<IMG src="Map1.gif" width="300" height="300"

usemap="#karta1" alt="Карта 1">

<HR>

<P>На этой странице представлены две карты, которые позволяют

выполнять различные переходы. Для правильного функционирования

страницы необходимо проверить все ссылки на файлы, заданные

с помощью атрибутов <B>src</b> и <B>href</b>.

<P>Щелчок по зеленому кругу обеспечит переход к Web-странице

издательства "Питер". Желтый многоугольник вернет вас

на страницу Start.htm. Красный прямоугольник (см. ниже)

обеспечивает переход в начало этой страницы.

<HR>

<HR>

<HR>

<HR>

<H2>Карта 2</h2>

<IMG src="Map2.gif" usemap="#karta2" alt="Карта 2">

</body>

</html>

Из листинга видно, что описание областей карты и соответствующий элемент IMG могут размещаться в разных частях страницы. Переходы, выполняемые с помощью карты, могут происходить как внутри страницы, так и к удаленному ресурсу;

ПРИМЕЧАНИЕ ——————————————————————————••——————————————-

Файл Map.htm и необходимые для него изображения можно найти на прилагаемой дискете.

Для обращения к карте можно использовать и элемент OBJECT, например:

<OBJECT data="Имя.gif" type="image/gif" usemap="#/karta1"> </object>

С изображениями карт удобно работать в стандартном для Windows 98 редакторе Paint. Для него изображение должно быть представлено в формате BMP. Этот редактор позволяет использовать сетку в режимах увеличения. Ее можно включить или отключить при помощи комбинации клавиш Ctri+G. После выбора инструмента Выделение указатель мыши приобретает вид тонкого крестика. Таким образом, положение указателя можно легко установить с точностью до одного пиксела. В строке состояния редактора будут указаны координаты курсора отно­сительно верхнего левого угла рисунка. Значения координат соответствуют требуемым для атрибута coords величинам и идут в том же порядке (х, у).

Если первоначально изображение создано не в формате GIF, то его можно преобразовать в этот формат, используя любой графический редактор, поддерживающий этот тип файлов. Например, MS Photo Editor, входящий в состав Microsoft Office, или популярный Adobe Photoshop. Достаточно открыть графический файл в редакторе и сохранить его (выполнить команду Сохранить как) в формате GIF. Можно также использовать форматы JPG и PNG.

Реальные карты, созданные с использованием самых разных графических пакетов, смотрятся очень привлекательно. Часто области не имеют четких границ, и неискушенному пользователю «мышечувствительная» карта может показаться последним достижением в области разработки программ или, по крайней мере, хитро придуманным трюком. На самом же деле возможность построения карт была заложена в HTML с самых ранних версий.

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

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

4.3. Элементы объектов

<APPLET> </applet>

Этот элемент поддерживается браузерами, в которые встроен интерпретатор Java. Простейший шаблон, который позволит включить в HTML-страницу апплет на языке Java, показан ниже:

<APPLET code="Имя файла.class" width=nnn height=mmm>

Произвольный текст комментария

</applet>

Атрибут code необходим для задания имени файла, содержащего откомпилированную Java-программу. В отличие от других указателей на ресурсы, значение, этого атрибута может быть только относительным, то есть апплет должен располагаться в той же папке, что и страница. Для задания другого базового пути необходимо использовать атрибут codebase. При выполнении апплета создается окно шириной ппп и высотой mmm пикселов. Внутри элемента APPLET может размещаться произвольный гипертекст. Броузеры, поддерживающие Java, игнорируют все элементы этого гипертекста, включая текст, за исключением элементов PARAM (см. ниже). Броузеры, не поддерживающие Java, игнорируют элементы PARAM и воспроизводят «понятный» для них гипертекст.

Начальный тег элемента APPLET может быть снабжен дополнительными атрибутами. Атрибут codebase предназначен для указания места расположения апплетов:

codebase="URL для апплетов"

Если этот атрибут не задан, то по умолчанию используется URL-страница.

Атрибут alt выполняет ту же функцию, что и при выводе изображений. Если браузер не может воспроизвести апплет, то выводится текст, заданный при помощи этого атрибута:

alt="Произвольный текст"

Атрибут name задает имя апплета. Это необходимо только в том случае, когда несколько апплетов, расположенных на одной странице, взаимодействуют между собой:

name="Имя апплета"

Атрибуты width и height задают параметры окна апплета: ширину и высоту соответственно.

Поскольку для выполнения апплета создается окно, предусмотрено использование уже хорошо известного нам атрибута align для управления размещением этого окна. Атрибут может иметь следующие назначения: bottom, left, middle, right, top

Вокруг окна можно создать пустое пространство:

vspace=Число пикселов выше и ниже

hspace=Число пикселов слева и справа

Допустимые стандартные атрибуты: id, class, title, style.

<ОВJЕСТ> </object>

В простейшем случае этот элемент позволяет разместить рисунок:

<OBJECT data="Имя файла.png" type="image/png">

Но область применения элемента достаточно широка. Он может использоваться, например, для создания окна в документе, то есть выполнять функции элемента IFRAME. Для размещения апплетов рекомендуется указывать элемент OBJECT вмес­то элемента APPLET:

<OBJECT codetype="application/java" classid="java:идентификатор"

width="nnn" height="mmm">

Текстовое описание объекта

</object>

Атрибуты:

• сlаssid="имя объекта" — уникальный идентификатор объекта или адрес объекта;

• codebase="URL" — ссылка на объект или базовый URL, который позволяет указывать местоположение объекта при помощи атрибутов archive, classid или data;

Характеристики

Список файлов книги