![]() |
||||||
индекс |
Ссылки (гиперссылки)Для связывания страниц гипертекста используется механизм ссылок (гиперссылок), которые в HTML реализуются с помощью тега <a>. Адрес страницы, на которую должен осуществляться переход, задается с помощью специального атрибута href. Причем могут использоваться как абсолютные, так и относительные адреса, когда путь отсчитывается от каталога, в котором расположена текущая страница: <a href="http://server.com/doc3.htm">Ссылка на документ с абсолютным адресом http://server.com/doc3.htm</a> <a href="doc1.htm">Сылка на документ с относительным адресом doc1.htm</a> <a href="mailto:sss@mail.ru">Ссылка на адрес электронной почты sss@mail.ru</a> Ссылка может указывать не только на веб-страницу, но и на конкретную точку на странице. Для этого используется механизм якорей, который представляет собой тег ссылки, которая не содержит никакого текста: <a href="#Пункт 1.1">Ссылка на пункт
1.1</a> <a href="#Пункт 2">Ссылка на пункт 2</a> Если якорь расположен не на текущей странице, как в предыдущем примере, то в атрибуте href следует сначала указать адрес требуемой страницы, а затем после знака # имя якоря: <a href="doc2.htm#Пункт3Документа1">Ссылка
на Пункт 3 Документа 1</a> Рисунки в роли ссылокВ роли ссылок могут выступать рисунки, которые можно использовать, например, в качестве кнопок. Для этого тег <img>, содержащий рисунок <img src="fig1.gif" width="153" height="153" border="0"> необходимо «обернуть» тегом ссылок <a>: <a href="tabledesign.htm"><img src="fig1.gif" alt="Ссылка на страницу tabledesign.htm" width="153" height="153" border="0"></a> Атрибут alt тега <img> содержит текст, который будет выводиться в качестве подсказки, когда пользователь наведет указатель на рисунок. Карты изображенийС помощью карт изображений можно рисунок, используемый в качестве основы такой карты, разбить на области и каждой такой области назначить ссылку на ту или иную страницу. Для этих целей в HTML предназначены теги <map> и <area>. Чтобы указать, что данный рисунок является основой для карты-изображения, используется атрибут usemap, в котором дается ссылка на имя карты изображения. Например, если рисунок fig.gif является основой карты-изображения Map, тег рисунка будет иметь следующий вид: <img src="fig.gif" usemap="#Map"> Для задания конфигурации карты-изображения используется парный тег <map> … </map>. Он имеет единственный атрибут name, являющийся именем карты, это же имя указывается в атрибуте usemap тега рисунка, являющегося ее основой: <map name="Map"> Внутри тега <map> при помощи тега <area> задаются непосредственно области карты-изображения. Тег <area> имеет следующие атрибуты: shape, coords, href, nonhref, target и alt. Допустимыми значениями атрибута shape являются: rect, circle, poly и default. По умолчанию устанавливается значение rect, задающее область в виде прямоугольника. Значениями атрибута coords являются координаты области, которые задаются в виде списка. Для прямоугольника (rect) задаются координаты левого верхнего и правого нижнего углов: <area shape="rect" coords="-1,1,264,232" href="fromimagemap2.htm" alt="На Документ 2"> Для круга (circle) – координата центра и радиус: <area shape="circle" coords="133,116,59"
alt="Нет ссылки Для многоугольника (poly) задаются координаты всех вершин, причем если координаты последней вершины не совпадают с первой, то браузер автоматически создает последнюю вершину с координатами первой, и область замыкается: cords="355,75,400,99,450,130,363,295,356,313,348,348,181,291,189, Dreamweaver имеет достаточно удобные средства создания карт изображений. Для того чтобы создать такую карту, необходимо сначала вставить рисунок, затем выделить его и открыть вкладку Property, расположенную в правом нижнем углу (рис. 3). Там представлены механизмы, позволяющие формировать области тега <area> трех видов: rect, circle и poly. Ссылки задаются как и обычно в Dreamweaver. Рис. 3. Формирование карты изображения в Dreamweaver В качестве примера приведем карту изображения, обеспечивающую навигацию по сайту (рис. 4): <img src="map.gif" width="617"
height="439" border="0" usemap="#Map">
Рис. 4. Пример карты изображения РолловерыЧтобы придать динамизм кнопкам, можно воспользоваться ролловерами. Ролловеры – это такие кнопки, которые изменяют свой вид в тот момент, когда над ними проходит указатель мыши. Это достигается при помощи скрипта, написанного на JavaScript, который меняет один рисунок на другой, когда указатель находится над ним, а так же возвращает исходное изображение после того, как указатель больше не находится над рисунком. Ролловеры так же удобно создавать с помощью Dreamweaver. В качестве
примера приведем код, сгенерированный этой программой для ролловера,
представляющего собой динамическую кнопку. Для того чтобы создать ролловер
необходимо нажать кнопку Ниже приведен код скрипта, сгенерированного Dreamweaver, который управляет сменой изображений. <script language="JavaScript" type="text/JavaScript"> Сам ролловер создается с помощью обычного тега ссылок <a>, в котором добавлены атрибуты, вызывающие функции, определенные в скрипте: <a href="introduction.htm" onMouseOut="MM_swapImgRestore()"
|
|
|||||||||||||
на главную | материалы | ПО | библиография | карта сайта | словарь | наверх |
©Structuralist
2005-2006 structuralist@narod.ru |
![]() |