Свойством, которое лучше всего характеризует Всемирную паутину Web, является возможность прямого соединения одной страницы с любой другой страницей в любом месте Web. Обычно это гипертекстовое соединение запускается щелчком мыши на букве, слове, фразе или графическом изображении на вызывающей странице, а вызываемая страница немедленно извлекается и загружается в браузер. Соединение Web можно делать с локальными страницами, расположенными на том же сервере Web, что и вызывающая страница, или со страницами на любом другом сайте в Web. Это очень мощное, но, тем не менее, легко используемое средство, которое позволяет просматривать страницы, разбросанные по всему миру с помощью простого щелчка мыши.
Наиболее распространенным типом ссылки является реагирующее на щелчок мыши слово или фраза, которая соединяется непосредственно с вызываемой страницей. Текстовая ссылка создается с помощью тега <a>, он охватывает строку текста и определяет расположение страницы, с которой создается соединение. Базовый формат тега показан на листинге 7.1.
<a href="url">текст ссылки</a>
Текст ссылки, по умолчанию, подчеркивается и выводится в браузере синим цветом, как визуальный указатель, что строка текста является ссылкой, реагирующей на щелчок мыши. Расположение страницы соединения задается атрибутом href (hyperlink reference - гипертекстовая ссылка).
Можно создать ссылку на собственную страницу или на страницу на удаленном сайте Web. Если локальная связанная страница находится в том же каталоге, что и вызывающая страница, то в качестве URL требуется только имя страницы. Если связанная страница находится на том же сервере Web, что и вызывающая страница, но в другом каталоге, то в качестве URL используется путь доступа к каталогу этой вызываемой страницы (относительная ссылка). Если вызываемая страница находится на другом сайте Web, то ссылка должна включать протокол и ссылку на домен "http://имя домена" (абсолютная ссылка). Можно соединиться с именем сайта, чтобы извлечь используемую по умолчанию домашнюю страницу, или, если известен адрес, с определенной страницей на этом сайте.
<a href="xhtml07-01.htm">Перезагрузить эту страницу</a> <a href="http://www.weather.com">Погода</a>
Вспомните, что тег <a> является линейным тегом и, чтобы соответствовать стандартам XHTML 1.1, должен быть заключен внутри блочного тега, такого, как тег <p> или <div>.
Если не задано иначе, то вызываемая страница открывается в том же окне браузера, которое выводит вызывающую страницу. Исходная страница заменяется вызываемой страницей. Часто удобно, особенно при соединении с удаленными сайтами Web, открывать эту страницу в другом окне браузера. Когда посетители покидают сайт, чтобы просмотреть удаленные сайты, они могут оказаться не в состоянии вернуться назад к исходной странице, используя кнопку возврата в браузере. Открывая удаленные сайты в новом окне, посетители не теряют контакт со страницей. Исходный сайт будет всегда доступен в исходном окне.
Можно определить, как должна открываться вызываемая страница, кодируя в теге <a> атрибут target="_window". Чтобы указать окно для открытия страницы, в коде используются специальные значения, каждое из которых имеет в качестве префикса символ подчеркивания ( _ ). Эти окна кодируются следующим образом:
_blank - новое окно _self - текущее окно (по умолчанию) _top - все окно браузера (применяется при использовании фреймов) _parent - родительский фрейм (применяется при использовании фреймов)
В следующем примере удаленный сайт открывается в новом окне браузера, содержащая ссылку страница остается видимой в исходном окне браузера.
<a href="http://www.weather.com" target="_blank">The Weather Channel</a>
Атрибут target не действителен по стандартам XHTML 1.1. Тем не менее, открытие удаленных сайтов Web в отдельном окне браузера остается хорошей идеей. Можно разрешить эту ситуацию, не нарушая стандартов XHTML, с помощью описанной ниже техники.
Страницу Web можно открыть в новом окне браузера не нарушая стандартов XHTML, если поместить в тег
<a href="javascript:" onclick="open('http://www.weather.com','','')">The Weather</a>
Приведенный выше код содержит "обработчик событий" JavaScript onclick, который перехватывает щелчок пользователя на тексте ссылки. Щелчок на ссылке приводит к выполнению оператора open() для открытия заданного URL в новом окне браузера. Атрибут href="javascript:" заменяет URL обычной ссылки на указание, что вместо соединения со страницей выполняется процедура JavaScript.
Этот код можно использовать для локальных или удаленных ссылок, изменяя просто значения URL и выводимый текст. Проверьте, что код заключается в кавычки, точно таким же образом, как показано выше.
Текстовые ссылки выводятся тремя различными цветами, чтобы определить три возможных состояния ссылки. Ссылка, которая еще не была посещена, выводится синим цветом, посещенная ссылка - пурпурным, а активная ссылка (кнопка мыши щелкнула при указании на текст ссылки) - красным цветом. Текстовые ссылки, кроме того, подчеркиваются.
Можно переопределить эти цвета и подчеркивание, а также включить другие визуальные индикаторы состояния ссылки с помощью селекторов таблицы стилей для тега <a>, показанных в таблице 7.1.
| Свойство | Значение |
|---|---|
a:link a:hover a:active a:visited |
Любое свойство текста |
Селектор a:link определяет непосещенную ссылку, селектор a:hover - ссылку с расположенным над ней указателем мыши, селектор a:active - ссылку, на которой был сделан щелчок, а селектор a:visited - ссылку, которая была посещена. Это оформление состояния ссылок можно изменить с помощью любой комбинации свойств значений текстовых стилей. Следующая таблица стилей иллюстрирует возможные настройки для четырех состояний ссылок.
<style type="text/css">
a:link {color:blue; text-decoration:none; font-size:12pt}
a:hover {color:green; font-weight:bold; text-decoration:underline;
font-size:14pt}
a:active {color:red; text-decoration:underline; font-size:14pt}
a:visited {color:gray; text-decoration:none; font-size:12pt}
</style>
<p><a href="SomePage.htm">Text Link</a></p>
(рис 7.1) Оформление текстовых ссылок в соответствии с действиями пользователяОбычная непосещенная ссылка выводится синим цветом, но без подчеркивания. Когда курсор мыши перемещается поверх ссылки, она изменяет свой цвет на зеленый, подчеркивается и выводится размером 14pt. Когда делают щелчок на ссылке, ее цвет изменяется на красный. Посещенная ссылка выводится серым цветом без подчеркивания и размером 12pt.
Цвета ссылок страницы можно изменять, кодируя атрибуты в теге <body>. Существует три атрибута:
link="color" vlink="color" alink="color"
использующие имена цветов или шестнадцатеричные значения для задания цвета непосещенной ссылки, посещенной ссылки и активной ссылки, соответственно.
<body link="green" vlink="gray" alink="purple">
Эти атрибуты исключены в XHTML, поэтому следует отдать предпочтение применению подобных селекторов ссылок и свойствам таблиц стилей.
Ссылки обычно создают между различными документами Web, чтобы посетители могли перемещаться между страницами. Однако ссылки можно делать на различные элементы в том же самом документе. Эти ссылки на странице часто используют для перехода из списка содержимого, находящегося вверху страницы, к подробной информации, находящейся в другом месте на той же странице.
Идею иллюстрирует рисунок 7.2, где текстовые ссылки вверху страницы соединяются с разделами контента, расположенными ниже на странице. Кроме того, ссылки в конце каждого раздела контента возвращают к верхней части страницы.
(рис 7.2) Ссылки на страницеЧтобы создать ссылки внутри страницы, необходимо закодировать пару анкерных тегов, показанных на листинге 7.5.
<a href="#name">текст ссылки</a> ... <a id="name">текст объекта ссылки</a>
Место, в которое делается ссылка (обычно боковой заголовок на странице, но можно использовать любой другой текст), помещается внутрь тега <a id="name">, содержащего текстовое значение для идентификации этого места назначения ссылки на странице. Текст, откуда делается ссылка, помещается внутрь тега <a href="#name"> , в котором это имя места назначения кодируется с предшествующим символом "#".
Следующий код показывает три ссылки в три различные места на странице. Позиции мест назначения имеют идентификаторы ITEM1, ITEM2, и ITEM3. Когда происходит щелчок на ссылке вверху страницы, браузер переходит к одной из этих указанных позиций назначения.
<!-- Ссылки --> <div><a href="#ITEM1">Go to Item 1</a></div> <div><a href="#ITEM2">Go to Item 2</a></div> <div><a href="#ITEM3">Go to Item 3</a></div> <!-- Места назначения ссылок --> <div><a id="ITEM1"><b>Here is Item 1</b></a></div> ... <div><a id="ITEM2"><b>Here is Item 2/<b></a></div> ... <div><a id="ITEM3"><b>Here is Item 3</b></a></div> ...
Даже хотя текстовые строки места назначения помещены внутри тегов <a>, они не окрашены и не подчеркнуты, как обычные ссылки. Они являются "невидимыми" целями ссылок (использующими атрибут id ), а не самими ссылками (использующими атрибут href ).
При создании ссылки из верхней части страницы Wеb в место, расположенное ниже на той же странице, желательно создавать ссылки для возврата к началу страницы. В данном примере каждый раздел ссылки ( ITEM1, ITEM2, и ITEM3 ) сопровождается ссылкой возврата к началу ( Top ) страницы. Каждая из этих ссылок на странице кодируется следующим образом.
<div><a href="#">Top</a></div>
Отметим, что в URL ссылки ( href="#" ) не задано имя места назначения на странице. Когда для ссылки на странице задается место назначения без имени, то браузер по умолчанию возвращается к вершине страницы.
Конечно, можно задать текстовое значение имени в качестве места назначения для возврата к вершине страницы или в любое другое место на странице. Можно, например, добавить заголовок вверху страницы в качестве места назначения для ссылки возврата.
<h1><a id="TOP">Top of Page</a></h1> . . . <div><a href="#TOP">Top</a></div>
Теперь, когда происходит щелчок на ссылке Top, страница перемещается к помеченному месту назначения заголовка "Top of Page.".
Можно создать ссылку на одной странице в определенное место на другой странице, объединяя <a id="SECTION3">. Воспользуемся форматом для ссылки на странице <a href="#name"> и добавим просто в качестве префикса для места назначения #name имя страницы.
<div><a href="NextPage.htm#SECTION3">Go to Section 3 on Next Page</a></div>
Эта ссылка для перехода на страницу с именем NextPage.htm и последующего перехода на этой странице к тегу, помеченному как <a id="SECTION3">. Такой тип соединения обычно можно сделать только с собственными страницами. Вряд ли будут известны именованные разделы на удаленных страницах, даже если они и доступны для соединения.
Место назначения ссылки внутри страницы можно кодировать в формате <a name="name">, а не <a id="name">, используя атрибут name вместо атрибута id. Хотя атрибут name еще работает в современных браузерах, он не распознается стандартами XHTML 1.1. Атрибут name можно использовать, если документ не будет проверяться службами валидации W3C.
Ссылки можно создавать также на документы, которые не являются страницами Web. Тег <a> можно использовать для ссылки на текстовые документы, документы текстового процессора, электронные таблицы, графические файлы и другие типы документов. Браузер обрабатывает такой документ в зависимости от расширения файла документа и того, как браузер настроен для обработки расширений, отличных от HTML.
Стандартные текстовые файлы с расширением .txt открываются в браузере так же, как и документы XHTML. Файл выводится тем типом шрифта и стилем, которые использовались при создании документа, браузер при этом сохраняет исходные переносы строк и пробелы, созданные в документе. Следующая ссылка извлекает текстовый документ, расположенный в том же каталоге, что и страница Web с этой ссылкой, и открывается в браузере, как показано на рисунке 7.3.
<p><a href="TextDocument.txt">Вывод текстового документа</a></p>
(рис 7.3) Текстовый документ, открытый в блокнотеВ этом примере текстовый документ открывается в окне браузера, заменяя вызывающую страницу. Однако, когда документ с расширением файла .txt открывается в отдельном окне, он открывается программой, ассоциированной с этим типом файла. В случае файла .txt для открытия документа используется программа текстового редактора, обычно Notepad. Документ появится во внешнем окне Notepad. Если пользователь выбрал другую программу редактора в качестве используемой по умолчанию в системе, то документ откроется в окне этой программы.
Документы, созданные текстовым процессором, могут выводиться в браузере, если на компьютере пользователя имеется совместимое программное обеспечение. При соединении с документом Microsoft Word - если программа Microsoft Word (или специальная программа для чтения документов Word) установлена в компьютерной системе пользователя - документ Word открывается в окне браузера. Следующая ссылка открывает документ Word, заменяющий вызывающую страницу, как показано на рисунке 7.4.
<p><a href="WordDocument.doc">Вывод документа Word</a></p>
(рис 7.4) Документ Word, открытый в окне браузераОтметим, что программа Microsoft Word открывается внутри окна браузера и что в панель меню браузера добавляется подмножество меню Word. Пользователи могут выполнять основные операции редактирования документа Word и сохранять его на своем локальном компьютере. Они не могут, конечно, редактировать и сохранить исходный документ, только копию, выводимую в окне браузера. Кнопка браузера Back используется для возврата на вызывающую страницу. Если вызываемый документ открывается в отдельном окне браузера, то это окно тоже содержит подмножество меню редактирования Word.
Как и для документов текстовых процессоров, электронные таблицы выводятся в браузере, если на компьютере пользователя имеется совместимое программное обеспечение. При соединении с документом Microsoft Excel - и если программа Microsoft Excel (или специальная программа чтения файлов Excel) установлена в системе пользователя - электронная таблица открывается в окне браузера. Следующая ссылка открывает электронную таблицу Excel в том же окне браузера, что и вызывающая страница, как показано на рисунке 7.5.
<p><a href="ExcelDocument.xls">Вывод документа Excel</a></p>
(рис 7.5) Документ Excel, открытый в окне браузераПодмножество меню Excel добавляется в панель меню браузера, позволяя выполнять небольшое редактирование и сохранение документа на локальном компьютере. Кнопка Back используется для возврата на вызывающую страницу. Аналогичный вывод создается, когда ссылка выводится в отдельном окне браузера.
Слайдовая презентация выводится в браузере, если на компьютере пользователя имеется соответствующее программное обеспечение. При соединении с документом Microsoft PowerPoint - если программа PowerPoint (или специальная программа чтения документов PowerPoint) установлена в системе пользователя - презентация открывается в окне браузера. Кнопка браузера Back предназначена для возврата на вызывающую страницу. Следующая ссылка открывает документ PowerPoint для вывода в окне браузера, как показано на рисунке 7.6.
<p><a href="PowerPointDocument.ppt">Вывод презентации PowerPoint</a></p>
(рис 7.6) Документ PowerPoint, открытый в окне браузера
Изображения GIF, PNG, и JPEG можно выводить в браузере, используя прямые ссылки на эти графические файлы. Другими словами, чтобы вывести графическое изображение, не требуется встраивать его в страницу Web. При простом соединении с файлом с расширением .gif, .png и .jpg изображения открываются прямо в окне браузера.
Так как изображения не форматируются на странице Web, они выводятся в верхнем левом углу окна браузера со своим исходным размером. Следующая ссылка открывает файл изображения .gif, как показано на рисунке 7.7. Когда изображение открывается в том же окне браузера, кнопка Back используется для возврата на вызывающую страницу.
<p><a href="GraphicImage.gif">Вывод изображения GIF</a></p>
(рис 7.7) Изображение GIF, открытое в окне браузера
Существует вариант атрибута href, который позволяет задать ссылку e-mail. Щелчок на этой ссылке открывает используемую по умолчанию почтовую программу посетителя для создания переписки с адресом, указанным в ссылке. Общий формат этой ссылки показан на листинге 7-10.
<a href="mailto:email@address">текст ссылки</a>
За атрибутом href=" следует адрес e-mail, обычно адрес, по которому ведут переписку с посетителями. Следующая ссылка, например, открывает программу e-mail посетителя (которая задана как используемая браузером по умолчанию) и вводит указанный адрес e-mail в строку адреса.
<p><a href="mailto:anybody@mail.ru">Пишите мне</a></p>
(рис 7.8) Открытая по ссылке href="mailto:" программа e-mail
Ссылки можно инициировать графическими изображениями, помещая тег <img/> внутрь тега <a>. Общий формат присваивания ссылок графическим изображениям показан ниже.
<a href="url"><img src="url" alt="text"/></a>
Изображения особенно эффективны для ссылок, так как с помощью информативной графики можно сразу сказать о назначении сайта. Ссылки, закодированные на листинге 7.12 и показанные на рисунке 7.9, созданы из изображений, полученных с соответствующих сайтов.
<style type="text/css">
img {border:0; vertical-align:middle}
</style>
<p>
<a href="http://www.ebay.com"><img src="ebay.jpg" alt="eBay Link"/></a>
<a href="http://www.ebay.com">Ebay</a>
</p>
<p>
<a href="http://www.nascar.com"><img src="nascar.jpg" alt="NASCAR Link"/></a>
<a href="http://www.nascar.com">NASCAR</a>
</p>
<p>
<a href="http://www.weather.com"><img src="weather.jpg" alt="Weather Link"/></a>
<a href="http://www.weather.com">The Weather Channel</a>
</p>
<p>
<a href="http://www.microsoft.com"><img src="microsoft.jpg" alt="Microsoft Link"/></a>
<a href="http://www.microsoft.com">Microsoft</a>
</p>
(рис 7.9) Графические и текстовые ссылкиПо умолчанию графические ссылки окружены границей, чтобы указать, что это ссылка, - цель та же, что и у подчеркивания текстовых ссылок. В данном примере вывод границы подавляется в таблице стилей, задавая границу изображений толщиной 0px.
При использовании графических изображений в качестве ссылок желательно создавать также текстовые ссылки. В данном примере это сделано включением отдельных текстовых ссылок, которые выровнены по центру их соответствующих изображений с помощью свойства таблицы стилей
Вспомните, что удаленный сайт Web должен открываться в отдельном окне браузера, чтобы пользователь оставался в контакте с исходным сайтом. Приведенные выше ссылки модифицированы в следующем коде так, чтобы они открывались в новом окне браузера с помощью описанной ранее техники использования JavaScript.
<p>
<a href="javascript:" onclick="open('http://www.ebay.com','','')"><img
src="ebay.jpg" alt="eBay Link"/></a>
<a href="javascript:"
onclick="open('http://www.ebay.com','','')">Ebay</a>
</p>
<p>
<a href="javascript:" onclick="open('http://www.nascar.com','','')"><img
src="nascar.jpg" alt="NASCAR Link"/></a>
<a href="javascript:"
onclick="open('http://www.nascar.com','','')">NASCAR</a>
</p>
<p>
<a href="javascript:" onclick="open('http://www.weather.com','','')"><img
src="weather.jpg" alt="Weather Link"/></a>
<a href="javascript:"
onclick="open('http://www.weather.com','','')">The Weather Channel</a>
</p>
<p>
<a href="javascript:" onclick="open('http://www.microsoft.com','','')"><img
src="microsoft.jpg" alt="Microsoft Link"/></a>
<a href="javascript:
" onclick="open('http://www.microsoft.com','','')">Microsoft</a>
</p>
Карта ссылок является графическим изображением, имеющим реагирующие на щелчок мыши области, которые соединяются индивидуально с различными страницами. Часто карты ссылок используются для вывода большого изображения на открывающей сайт странице, на котором отдельные части изображения представляют ссылки на отдельные области сайта, на которые может перейти посетитель.
Карта ссылок и сопровождающие текстовые ссылки, показанные на рисунке 7.10, являются ссылками внутри страницы на заголовки, появляющиеся далее на странице. Карта ссылок использует основные геометрические фигуры в качестве
(рис 7.10) Карта ссылок и сопровождающие текстовые ссылкиЧтобы создать карту ссылок, начинают с изображения, на котором требуется создать
Рисунок 7.11 показывает изображение, из которого создана приведенная выше карта ссылок. Изображение выводится в программе Windows Paint, которая может отслеживать перемещение мыши по изображению.
(рис 7.11) Определение горизонтальных и вертикальных координат на графическом изображенииОбратите внимание, что в строке состояния окна выводятся вертикальные и горизонтальные координаты указателя "карандаша". Указатель находится в одном из углов многоугольника, и отслеживаемая позиция показывает 175, 200; то есть, указатель расположен на расстоянии 175 пикселей от левого края изображения (горизонтальная позиция) и на расстоянии 200 пикселей от верхнего края изображения (вертикальная позиция). Координаты всегда измеряются от верхнего левого угла всего изображения.
В зависимости от формы отображаемой области, требуется различная информация о положении.
Для прямоугольника надо знать горизонтальные и вертикальные координаты верхнего левого ( top-left ) и нижнего правого ( bottom-right ) углов. Эти две координаты h,v можно определить, помещая указатель "карандаш" в каждый из этих углов и считывая координаты из строки состояния. В приведенном выше рисунке пиксельными координатами этих двух точек являются top-left = 8,13 и bottom-right = 130,123.
Для круга необходимо знать координаты центра и величину радиуса в пикселях. Координаты центра приведенного выше круга определяют, помещая указатель "карандаш" (приблизительно) в центре и считывая в строке состояния значения 228, 123. Радиус является расстоянием от центра до края круга. Радиус можно определить, считывая координаты правого края круга (на той же вертикальной координате, что и центр круга) и находя разность между горизонтальными координатами центра и края: радиус = (290 - 228) = 62.
Для многоугольника необходимо знать координаты каждой из его угловых точек, обходя по часовой или против часовой стрелки его ребра, начиная с любой угловой точки на многоугольнике. Обходя по часовой стрелке, начав с верха этого многоугольника, мы получаем координаты 100,144; 175,200; 155,255; 50,250; и 45,172.
Имея эти координаты фигур, теперь можно создавать код карты ссылок и присваивать адреса URL ссылок различным фигурам.
Изображение, которое станет картой ссылок, помещается на страницу с помощью тега <img/>. Кроме своих стандартных атрибутов этот тег содержит атрибут usemap="mapname", который указывает на названный этим именем тег <map>, задающий описания <img/> и <map> показан на листинге 7.14.
<img src="url" alt="text" usemap="#mapname"/>
<map id="mapname">
<area
shape="rect|circle|poly"
coords="coordinates"
href="url"
alt="text"
/>
...
</map>
В теге <img/> задается #mapname, чтобы связать изображение с тегом <map>, определенным с помощью mapname. Внутри тега <map> имеются теги <area/>, по одному для каждой отображаемой области в изображении. Эти теги определяют форму, координаты в пикселях и страницу ссылки для всех
Следующий код определяет изображение, показанное на рисунке 7.11, как карту ссылок со ссылками на различные заголовки текущей страницы Web.
<img src="MyMap.gif" alt="Image Map" usemap="#MyImageMap">
<map id="MyImageMap">
<area shape="rect" coords="8,13,130,123"
href="#LINK1" alt="Determining Mapped Areas"/>
<area shape="circle" coords="228,123,62"
href="#LINK2" alt="Coding an Image Map"/>
<area shape="poly" coords="100,144 175,200 155,255 50,250 45,175"
href="#LINK3" alt="Overlapped Mapped Areas"/>
</map>
Обратите внимание на связь между usemap="#MyImageMap" в теге <img/> и id="MyImageMap" в теге <map>. Идентификатор id="MyImageMap" соединяет карту ссылок с графическим изображением. Также при кодировании окончательной страницы оба тега <img/> и <map> должны быть внутри блочного тега, такого, как <p> или <div>.
Теги <area/> задают координаты ( coords ) для определения отдельных геометрических фигур и для соединения адресов URL со щелчком мыши на этой фигуре. В этом примере адреса URL являются ссылками внутри страницы; но можно соединяться с другими страницами на сайте или с внешними сайтами Web.
Когда shape="rect" (прямоугольник), coords определяют четырьмя числами, разделенными запятыми. Эта запись представляет две пары координат h,v, первая пара задает координаты верхнего левого угла прямоугольника, а вторая - координаты нижнего правого угла ( 8,13,130,123 ).
Когда shape="circle" (круг), coords определяют тремя числами, разделенными запятыми. Первые два числа представляют координаты h,v центра круга, а последнее число является величиной радиуса в пикселях ( 228,123,62 ).
Когда shape="poly" (многоугольник), coords определяют координатами h,v вершин многоугольника. Числовые пары можно перечислять по часовой или против часовой стрелки вдоль периметра многоугольника; они разделяются пробелами ( 100,144 175,200 155,255 50,250 45,175 ).
Тег <map> может появиться на странице в любом месте. Где бы он ни появился в теле документа, он связывается с соответствующим тегом <img> через имя отображения.
Даже если карта ссылок создается с атрибутом alt для каждой активной области вместе с текстом alt для самого тега <img/>, тем не менее, желательно предоставить множество сопоставимых текстовых ссылок для посетителей с программным обеспечением для чтения текста или для тех, кто отключает вывод графики в браузере.
В случае необходимости можно создавать перекрывающиеся <map> раньше.
В примере на рисунке 7.12 щелчок в перекрывающейся области соединяет с адресом URL, заданным для shape="rect", так как его определение появляется в карте ссылок раньше shape="circle", хотя графическое изображение круга перекрывает и изображение прямоугольника.
<map name="ImageMap"> <area shape="rect" ...> <area shape="circle" .../> </map>
(рис 7.12) Приоритет перекрывающихся областей карты ссылокМожно также при желании присвоить ссылку области изображения, которая не отображается специально ни на одну из этих фигур. Ссылка, связанная с этой "фоновой" фигурой, должна появиться последней в списке тегов <area/>, чтобы она не имела преимущества по отношению к другим фигурам как перекрывающее изображение. Координаты фонового изображения будут охватывать всю прямоугольную область изображения.
Следующий листинг показывает код карты ссылок, описанной в текущем примере страницы. Текстовые параграфы присутствуют не полностью, только ссылки внутри страницы на эти разделы страницы.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Использование графических карт</title>
<style type="text/css">
body {margin:20px}
.center {text-align:center}
</style>
</head>
<body>
<h2 class="center">Using Image Maps</h2>
<p class="center">
<img src="MyMap.gif" usemap="#MyImageMap" alt="Image Map" style="border:0px/">
<map id="MyImageMap">
<area shape="rect" coords="8,13,130,123"
href="#LINK1" alt="Determining Mapped Areas"/>
<area shape="circle" coords="228,123,62"
href="#LINK2" alt="Coding an Image Map"/>
<area shape="poly" coords="100,144 175,200 155,255 50,250 45,175"
href="#LINK3" alt="Overlapped Mapped Areas"/>
</map>
</p>
<p class="center"">
<a href="#LINK1">Determining Mapped Areas</a> |
<a href="#LINK2">Coding an Image Map</a> |
<a href="#LINK3">Overlapped Mapped Areas</a>
</p>
<h3><a name="LINK1">Determining Mapped Areas</a></h3>
...text...
<p><a href="#">Top</a></p>
<h3><a name="LINK2">Coding an Image Map</a></h3>
...text...
<p><a href="#">Top</a></p>
<h3><a name="LINK3">Overlapped Mapped Areas</a></h3>
...text...
<p><a href="#">Top</a></p>
</body>
</html>
Этот пример использует для карты ссылки внутри страницы. Атрибут href тега <area/> может точно также открывать внешний сайт Web в том же самом или новом окне браузера.
Показанный выше общий формат атрибута usemap для тега <img/>
usemap="#mapname"
использует символ "#" в качестве префикса для mapname. Однако в стандартах XHTML 1.1 этот символ считается незаконным. Текущие стандарты требуют, чтобы атрибут записывался в упрощенном формате: usemap="mapname", без символа префикса. Проблема в том, что некоторые браузеры не соответствуют стандартам и не распознают рекомендованный формат. Поэтому может понадобиться использовать старый формат атрибута usemap, чтобы карты ссылок работали правильно. Единственный недостаток в том, что в этом случае страница не будет считаться корректной при проверке службой валидации W3C.
В Интернете можно встретить сайты Web, которые автоматически переадресуют посетителей с одной страницы на другую. Эта техника часто используется, когда домашняя страница перемещается с одного адреса URL на другой. В течение некоторого периода времени исходный адрес URL переадресует на новый адрес URL, чтобы пользователи имели возможность изменить свои закладки или каталоги ссылок.
Переадресация выполняется с помощью тега <meta>, который присутствует в разделе <head> документа и используется обычно для предоставления информации о документе XHTML. Общая форма этого тега, применяемая для переадресации, показана ниже.
<meta http-equiv="refresh" content="seconds; url=url" />
Атрибут http-equiv определяет такое использование тега <meta>, как обновление или перезагрузку текущей страницы. Атрибут content определяет количество секунд ожидания, прежде чем произойдет перезагрузка вместе с адресом URL страницы, на которую произойдет переадресация, когда текущая страница перезагрузится.
Например, страница с именем Redirect.htm расположена в каталоге, где находится страница xhtml07-04.htm. На странице Redirect.htm кодируется тег meta, который через пять секунд ожидания перенаправляет вызов на страницу xhtml07-04.htm.
В разделе <head> страницы Redirect.htm имеется следующий тег <meta> для перехода на страницу xhtml07-04.htm.
<head> <title>Redirect Page</title> <meta http-equiv="refresh" content="5; url=xhtml07-04.htm"/> </head>
В теге <meta/> с атрибутами http-equiv и content можно закодировать переход на ряд страниц, чтобы создать самовыполняющуюся демонстрацию слайдов (слайд-шоу), которая автоматически загружает одну страницу за другой. Каждый тег <meta/> определяет время просмотра страницы вместе со ссылкой на следующую страницу последовательности.
Следующая графическая ссылка загружает первую (Slide1.htm) из пяти страниц слайд-шоу, которые все расположены в текущем каталоге. Код этой начальной ссылки показан ниже.
<a href="Slide1.htm"><img src="Pixar.gif" alt="Просмотр слайд-шоу"/></a>
(рис 7.13) Ссылка на слайд-шоуКаждая страница слайд-шоу содержит тег <meta/>, задающий адрес URL следующей страницы в последовательности и задающий таймер обновления на три секунды. Следующий сокращенный код находится на страницах слайдов.
<head> <title>Slide 1</title> <meta http-equiv="refresh" content="3; url=Slide2.htm"/> </head> <body> <h1>Toy Story</h1> <p><img src="ToyStory.jpg" alt="Toy Store Image"/></p> </body> <head> <title>Slide 2</title> <meta http-equiv="refresh" content="3; url=Slide3.htm"/> </head> <body> <h1>A Bug's Life</h1> <p><img src="BugsLife.jpg" alt="A Bugs's Life Image"/></p> </body> <head> <title>Slide 3</title> <meta http-equiv="refresh" content="3; url=Slide4.htm"/> </head> <body <h1>Finding Nemo</h1> <p><img src="FindingNemo.jpg" alt="Finding Nemo Image"/></p> </body> <head> <title>Slide 4</title> <meta http-equiv="refresh" content="3; url=Slide5.htm"/> </head> <body <h1>Monsters, Inc.</h1> <p><img src="MonstersInc.jpg" alt="Monsters, Inc. Image"/></p> </body> <head> <title>Slide 5</title> <meta http-equiv="refresh" content="3; url=begin.htm"/> </head> <body <h1>Toy Story 2</h1> <p><img src="ToyStory2.jpg" alt="Toy Store 2 Image"/></p> </body>
Последняя страница слайд-шоу переадресует снова на начальную страницу слайд-шоу, содержащую исходную ссылку на первый слайд. Если необходимо выполнить слайд-шоу в отдельном окне браузера, то исходная ссылка открывает новое окно.
<a href="#" onclick="open('Slide1.htm','','')">
<img src="Pixar.gif" alt="Просмотр слайд-шоу"/>
</a>
Отметим, что так как тег <meta/> не может закрыть окно браузера, то последняя страница слайдов, которая открывается в этом отдельном окне, не должна содержать тег <meta/> для переадресации снова на исходную страницу, приводя тем самым к тому, что исходная страница будет открыта в двух отдельных окнах - в исходном окне и в отдельном окне слайд-шоу. Вместо этого конечная страница слайд-шоу должна предложить посетителям просто закрыть окно, чтобы оставить только исходное окно, содержащее страницу с исходной ссылкой.
По мере накопления большого числа документов Web, скорее всего, потребуется организация различных приложений Web по отдельным каталогам, подчиненным корневому каталогу - который, в свою очередь, подчинен основному каталогу Web. Рисунок 7.14 иллюстрирует эту идею с помощью трех подкаталогов в корневом каталоге Website, каждый из которых содержит страницы Web. Папка Application3 содержит, кроме того, подкаталог Media для хранения всех графических файлов, относящихся к этому приложению.
(рис 7.14) Пример структуры каталога WebПри кодировании атрибута src в теге <img/> или атрибута href в теге <a> необходимо проследить иерархию каталогов от страницы Web, содержащей тег до расположения определенных в ссылке реального изображения или страницы. Это означает, что может понадобиться спуститься на один или несколько уровней каталогов, чтобы найти изображение или присоединенную страницу; или что необходимо подняться по иерархии, чтобы найти изображение или страницу; или что необходимо подняться в иерархии в каталог более высокого уровня, а затем спуститься в папку, содержащую изображение или страницу ссылки.
Причина этого перемещения вверх и вниз по каталогам состоит в том, что присоединяемые страницы или изображения указываются относительно страницы, содержащей ссылку. Используя иллюстрацию, предположим, что PageA.htm в каталоге Application1 содержит тег <img/>, указывающий на Picture1.gif в подкаталоге каталога Application3. Чтобы создать ссылку src со страницы PageA.htm на Picture1.gif, необходимо пройти следующий путь доступа:
- перейти на один уровень вверх из папки Application1 в папку WebSite;
- перейти на один уровень вниз из папки WebSite в папку Application3;
- перейти еще на один уровень вниз из папки Application3 в папку Media.
Используется два типа спецификации пути доступа для перемещения в иерархии каталогов при определении местонахождения страниц Web и графических изображений:
- записывают две точки, за которыми следует наклонная черта ( "../" ), для каждого уровня при перемещении вверх по иерархии папок;
- записывают имя папки, за которым следует наклонная черта ( "/" ), для каждого уровня при перемещении вниз по иерархии папок.
Например, адрес URL для ссылки <img/> со страницы PageA.htm на Picture1.gif будет следующим:
<img src="../Application3/Media/Picture1.gif"/>
Из текущего каталога, содержащего PageA.htm, перемещаемся вверх на один уровень ( ../ ) из каталога Application1 в каталог WebSite. Из каталога WebSite спускаемся вниз по каталогам Application3/ и Media/, чтобы найти Picture1.gif.
Обычно спецификации путей доступа будут не такими сложными. Как правило, для папки, содержащей страницы Web, создают одну папку Media внутри папки страниц, в которой хранятся все изображения, используемые на этих страницах. Тогда ссылка src на изображение должна будет указывать вниз только на один уровень каталогов:
<img src="Media/Picture.gif"/>
Приведенный выше пример соединяет страницу Web с изображением. Тот же самый подход используют при соединении одной страницы с другой. В приведенной выше структуре каталогов ссылка на странице PageA.htm, указывающая на страницу Page2.htm, будет иметь вид:
<a href="../Application3/Page2.htm">На страницу Page2.htm</a>
Достаточно просто проследить путь со страницы Web к графическому изображению или другой странице Web, если ориентироваться по структуре папок, начиная с папки, содержащей страницу, и заканчивая в папке, содержащей файл. Не забудьте также уделить внимание дереву каталогов; необходимо следовать иерархии вверх и вниз по ветвям дерева, а не делать поперечные ссылки, где отсутствуют соединяющие папки "линии".
Свойством, которое лучше всего характеризует Всемирную паутину Web, является возможность прямого соединения одной страницы с любой другой страницей в любом месте Web. Обычно это гипертекстовое соединение запускается щелчком мыши на букве, слове, фразе или графическом изображении на вызывающей странице, а вызываемая страница немедленно извлекается и загружается в браузер. Соединение Web можно делать с локальными страницами, расположенными на том же сервере Web, что и вызывающая страница, или со страницами на любом другом сайте в Web. Это очень мощное, но, тем не менее, легко используемое средство, которое позволяет просматривать страницы, разбросанные по всему миру с помощью простого щелчка мыши.
Наиболее распространенным типом ссылки является реагирующее на щелчок мыши слово или фраза, которая соединяется непосредственно с вызываемой страницей. Текстовая ссылка создается с помощью тега <a>, он охватывает строку текста и определяет расположение страницы, с которой создается соединение. Базовый формат тега показан на листинге 7.1.
<a href="url">текст ссылки</a>
Текст ссылки, по умолчанию, подчеркивается и выводится в браузере синим цветом, как визуальный указатель, что строка текста является ссылкой, реагирующей на щелчок мыши. Расположение страницы соединения задается атрибутом href (hyperlink reference - гипертекстовая ссылка).
Можно создать ссылку на собственную страницу или на страницу на удаленном сайте Web. Если локальная связанная страница находится в том же каталоге, что и вызывающая страница, то в качестве URL требуется только имя страницы. Если связанная страница находится на том же сервере Web, что и вызывающая страница, но в другом каталоге, то в качестве URL используется путь доступа к каталогу этой вызываемой страницы (относительная ссылка). Если вызываемая страница находится на другом сайте Web, то ссылка должна включать протокол и ссылку на домен "http://имя домена" (абсолютная ссылка). Можно соединиться с именем сайта, чтобы извлечь используемую по умолчанию домашнюю страницу, или, если известен адрес, с определенной страницей на этом сайте.
<a href="xhtml07-01.htm">Перезагрузить эту страницу</a> <a href="http://www.weather.com">Погода</a>
Вспомните, что тег <a> является линейным тегом и, чтобы соответствовать стандартам XHTML 1.1, должен быть заключен внутри блочного тега, такого, как тег <p> или <div>.
Если не задано иначе, то вызываемая страница открывается в том же окне браузера, которое выводит вызывающую страницу. Исходная страница заменяется вызываемой страницей. Часто удобно, особенно при соединении с удаленными сайтами Web, открывать эту страницу в другом окне браузера. Когда посетители покидают сайт, чтобы просмотреть удаленные сайты, они могут оказаться не в состоянии вернуться назад к исходной странице, используя кнопку возврата в браузере. Открывая удаленные сайты в новом окне, посетители не теряют контакт со страницей. Исходный сайт будет всегда доступен в исходном окне.
Можно определить, как должна открываться вызываемая страница, кодируя в теге <a> атрибут target="_window". Чтобы указать окно для открытия страницы, в коде используются специальные значения, каждое из которых имеет в качестве префикса символ подчеркивания ( _ ). Эти окна кодируются следующим образом:
_blank - новое окно _self - текущее окно (по умолчанию) _top - все окно браузера (применяется при использовании фреймов) _parent - родительский фрейм (применяется при использовании фреймов)
В следующем примере удаленный сайт открывается в новом окне браузера, содержащая ссылку страница остается видимой в исходном окне браузера.
<a href="http://www.weather.com" target="_blank">The Weather Channel</a>
Атрибут target не действителен по стандартам XHTML 1.1. Тем не менее, открытие удаленных сайтов Web в отдельном окне браузера остается хорошей идеей. Можно разрешить эту ситуацию, не нарушая стандартов XHTML, с помощью описанной ниже техники.
Страницу Web можно открыть в новом окне браузера не нарушая стандартов XHTML, если поместить в тег
<a href="javascript:" onclick="open('http://www.weather.com','','')">The Weather</a>
Приведенный выше код содержит "обработчик событий" JavaScript onclick, который перехватывает щелчок пользователя на тексте ссылки. Щелчок на ссылке приводит к выполнению оператора open() для открытия заданного URL в новом окне браузера. Атрибут href="javascript:" заменяет URL обычной ссылки на указание, что вместо соединения со страницей выполняется процедура JavaScript.
Этот код можно использовать для локальных или удаленных ссылок, изменяя просто значения URL и выводимый текст. Проверьте, что код заключается в кавычки, точно таким же образом, как показано выше.
Текстовые ссылки выводятся тремя различными цветами, чтобы определить три возможных состояния ссылки. Ссылка, которая еще не была посещена, выводится синим цветом, посещенная ссылка - пурпурным, а активная ссылка (кнопка мыши щелкнула при указании на текст ссылки) - красным цветом. Текстовые ссылки, кроме того, подчеркиваются.
Можно переопределить эти цвета и подчеркивание, а также включить другие визуальные индикаторы состояния ссылки с помощью селекторов таблицы стилей для тега <a>, показанных в таблице 7.1.
| Свойство | Значение |
|---|---|
a:link a:hover a:active a:visited |
Любое свойство текста |
Селектор a:link определяет непосещенную ссылку, селектор a:hover - ссылку с расположенным над ней указателем мыши, селектор a:active - ссылку, на которой был сделан щелчок, а селектор a:visited - ссылку, которая была посещена. Это оформление состояния ссылок можно изменить с помощью любой комбинации свойств значений текстовых стилей. Следующая таблица стилей иллюстрирует возможные настройки для четырех состояний ссылок.
<style type="text/css">
a:link {color:blue; text-decoration:none; font-size:12pt}
a:hover {color:green; font-weight:bold; text-decoration:underline;
font-size:14pt}
a:active {color:red; text-decoration:underline; font-size:14pt}
a:visited {color:gray; text-decoration:none; font-size:12pt}
</style>
<p><a href="SomePage.htm">Text Link</a></p>
(рис 7.1) Оформление текстовых ссылок в соответствии с действиями пользователяОбычная непосещенная ссылка выводится синим цветом, но без подчеркивания. Когда курсор мыши перемещается поверх ссылки, она изменяет свой цвет на зеленый, подчеркивается и выводится размером 14pt. Когда делают щелчок на ссылке, ее цвет изменяется на красный. Посещенная ссылка выводится серым цветом без подчеркивания и размером 12pt.
Цвета ссылок страницы можно изменять, кодируя атрибуты в теге <body>. Существует три атрибута:
link="color" vlink="color" alink="color"
использующие имена цветов или шестнадцатеричные значения для задания цвета непосещенной ссылки, посещенной ссылки и активной ссылки, соответственно.
<body link="green" vlink="gray" alink="purple">
Эти атрибуты исключены в XHTML, поэтому следует отдать предпочтение применению подобных селекторов ссылок и свойствам таблиц стилей.
Ссылки обычно создают между различными документами Web, чтобы посетители могли перемещаться между страницами. Однако ссылки можно делать на различные элементы в том же самом документе. Эти ссылки на странице часто используют для перехода из списка содержимого, находящегося вверху страницы, к подробной информации, находящейся в другом месте на той же странице.
Идею иллюстрирует рисунок 7.2, где текстовые ссылки вверху страницы соединяются с разделами контента, расположенными ниже на странице. Кроме того, ссылки в конце каждого раздела контента возвращают к верхней части страницы.
(рис 7.2) Ссылки на страницеЧтобы создать ссылки внутри страницы, необходимо закодировать пару анкерных тегов, показанных на листинге 7.5.
<a href="#name">текст ссылки</a> ... <a id="name">текст объекта ссылки</a>
Место, в которое делается ссылка (обычно боковой заголовок на странице, но можно использовать любой другой текст), помещается внутрь тега <a id="name">, содержащего текстовое значение для идентификации этого места назначения ссылки на странице. Текст, откуда делается ссылка, помещается внутрь тега <a href="#name"> , в котором это имя места назначения кодируется с предшествующим символом "#".
Следующий код показывает три ссылки в три различные места на странице. Позиции мест назначения имеют идентификаторы ITEM1, ITEM2, и ITEM3. Когда происходит щелчок на ссылке вверху страницы, браузер переходит к одной из этих указанных позиций назначения.
<!-- Ссылки --> <div><a href="#ITEM1">Go to Item 1</a></div> <div><a href="#ITEM2">Go to Item 2</a></div> <div><a href="#ITEM3">Go to Item 3</a></div> <!-- Места назначения ссылок --> <div><a id="ITEM1"><b>Here is Item 1</b></a></div> ... <div><a id="ITEM2"><b>Here is Item 2/<b></a></div> ... <div><a id="ITEM3"><b>Here is Item 3</b></a></div> ...
Даже хотя текстовые строки места назначения помещены внутри тегов <a>, они не окрашены и не подчеркнуты, как обычные ссылки. Они являются "невидимыми" целями ссылок (использующими атрибут id ), а не самими ссылками (использующими атрибут href ).
При создании ссылки из верхней части страницы Wеb в место, расположенное ниже на той же странице, желательно создавать ссылки для возврата к началу страницы. В данном примере каждый раздел ссылки ( ITEM1, ITEM2, и ITEM3 ) сопровождается ссылкой возврата к началу ( Top ) страницы. Каждая из этих ссылок на странице кодируется следующим образом.
<div><a href="#">Top</a></div>
Отметим, что в URL ссылки ( href="#" ) не задано имя места назначения на странице. Когда для ссылки на странице задается место назначения без имени, то браузер по умолчанию возвращается к вершине страницы.
Конечно, можно задать текстовое значение имени в качестве места назначения для возврата к вершине страницы или в любое другое место на странице. Можно, например, добавить заголовок вверху страницы в качестве места назначения для ссылки возврата.
<h1><a id="TOP">Top of Page</a></h1> . . . <div><a href="#TOP">Top</a></div>
Теперь, когда происходит щелчок на ссылке Top, страница перемещается к помеченному месту назначения заголовка "Top of Page.".
Можно создать ссылку на одной странице в определенное место на другой странице, объединяя <a id="SECTION3">. Воспользуемся форматом для ссылки на странице <a href="#name"> и добавим просто в качестве префикса для места назначения #name имя страницы.
<div><a href="NextPage.htm#SECTION3">Go to Section 3 on Next Page</a></div>
Эта ссылка для перехода на страницу с именем NextPage.htm и последующего перехода на этой странице к тегу, помеченному как <a id="SECTION3">. Такой тип соединения обычно можно сделать только с собственными страницами. Вряд ли будут известны именованные разделы на удаленных страницах, даже если они и доступны для соединения.
Место назначения ссылки внутри страницы можно кодировать в формате <a name="name">, а не <a id="name">, используя атрибут name вместо атрибута id. Хотя атрибут name еще работает в современных браузерах, он не распознается стандартами XHTML 1.1. Атрибут name можно использовать, если документ не будет проверяться службами валидации W3C.
Ссылки можно создавать также на документы, которые не являются страницами Web. Тег <a> можно использовать для ссылки на текстовые документы, документы текстового процессора, электронные таблицы, графические файлы и другие типы документов. Браузер обрабатывает такой документ в зависимости от расширения файла документа и того, как браузер настроен для обработки расширений, отличных от HTML.
Стандартные текстовые файлы с расширением .txt открываются в браузере так же, как и документы XHTML. Файл выводится тем типом шрифта и стилем, которые использовались при создании документа, браузер при этом сохраняет исходные переносы строк и пробелы, созданные в документе. Следующая ссылка извлекает текстовый документ, расположенный в том же каталоге, что и страница Web с этой ссылкой, и открывается в браузере, как показано на рисунке 7.3.
<p><a href="TextDocument.txt">Вывод текстового документа</a></p>
(рис 7.3) Текстовый документ, открытый в блокнотеВ этом примере текстовый документ открывается в окне браузера, заменяя вызывающую страницу. Однако, когда документ с расширением файла .txt открывается в отдельном окне, он открывается программой, ассоциированной с этим типом файла. В случае файла .txt для открытия документа используется программа текстового редактора, обычно Notepad. Документ появится во внешнем окне Notepad. Если пользователь выбрал другую программу редактора в качестве используемой по умолчанию в системе, то документ откроется в окне этой программы.
Документы, созданные текстовым процессором, могут выводиться в браузере, если на компьютере пользователя имеется совместимое программное обеспечение. При соединении с документом Microsoft Word - если программа Microsoft Word (или специальная программа для чтения документов Word) установлена в компьютерной системе пользователя - документ Word открывается в окне браузера. Следующая ссылка открывает документ Word, заменяющий вызывающую страницу, как показано на рисунке 7.4.
<p><a href="WordDocument.doc">Вывод документа Word</a></p>
(рис 7.4) Документ Word, открытый в окне браузераОтметим, что программа Microsoft Word открывается внутри окна браузера и что в панель меню браузера добавляется подмножество меню Word. Пользователи могут выполнять основные операции редактирования документа Word и сохранять его на своем локальном компьютере. Они не могут, конечно, редактировать и сохранить исходный документ, только копию, выводимую в окне браузера. Кнопка браузера Back используется для возврата на вызывающую страницу. Если вызываемый документ открывается в отдельном окне браузера, то это окно тоже содержит подмножество меню редактирования Word.
Как и для документов текстовых процессоров, электронные таблицы выводятся в браузере, если на компьютере пользователя имеется совместимое программное обеспечение. При соединении с документом Microsoft Excel - и если программа Microsoft Excel (или специальная программа чтения файлов Excel) установлена в системе пользователя - электронная таблица открывается в окне браузера. Следующая ссылка открывает электронную таблицу Excel в том же окне браузера, что и вызывающая страница, как показано на рисунке 7.5.
<p><a href="ExcelDocument.xls">Вывод документа Excel</a></p>
(рис 7.5) Документ Excel, открытый в окне браузераПодмножество меню Excel добавляется в панель меню браузера, позволяя выполнять небольшое редактирование и сохранение документа на локальном компьютере. Кнопка Back используется для возврата на вызывающую страницу. Аналогичный вывод создается, когда ссылка выводится в отдельном окне браузера.
Слайдовая презентация выводится в браузере, если на компьютере пользователя имеется соответствующее программное обеспечение. При соединении с документом Microsoft PowerPoint - если программа PowerPoint (или специальная программа чтения документов PowerPoint) установлена в системе пользователя - презентация открывается в окне браузера. Кнопка браузера Back предназначена для возврата на вызывающую страницу. Следующая ссылка открывает документ PowerPoint для вывода в окне браузера, как показано на рисунке 7.6.
<p><a href="PowerPointDocument.ppt">Вывод презентации PowerPoint</a></p>
(рис 7.6) Документ PowerPoint, открытый в окне браузера
Изображения GIF, PNG, и JPEG можно выводить в браузере, используя прямые ссылки на эти графические файлы. Другими словами, чтобы вывести графическое изображение, не требуется встраивать его в страницу Web. При простом соединении с файлом с расширением .gif, .png и .jpg изображения открываются прямо в окне браузера.
Так как изображения не форматируются на странице Web, они выводятся в верхнем левом углу окна браузера со своим исходным размером. Следующая ссылка открывает файл изображения .gif, как показано на рисунке 7.7. Когда изображение открывается в том же окне браузера, кнопка Back используется для возврата на вызывающую страницу.
<p><a href="GraphicImage.gif">Вывод изображения GIF</a></p>
(рис 7.7) Изображение GIF, открытое в окне браузера
Существует вариант атрибута href, который позволяет задать ссылку e-mail. Щелчок на этой ссылке открывает используемую по умолчанию почтовую программу посетителя для создания переписки с адресом, указанным в ссылке. Общий формат этой ссылки показан на листинге 7-10.
<a href="mailto:email@address">текст ссылки</a>
За атрибутом href=" следует адрес e-mail, обычно адрес, по которому ведут переписку с посетителями. Следующая ссылка, например, открывает программу e-mail посетителя (которая задана как используемая браузером по умолчанию) и вводит указанный адрес e-mail в строку адреса.
<p><a href="mailto:anybody@mail.ru">Пишите мне</a></p>
(рис 7.8) Открытая по ссылке href="mailto:" программа e-mail
Ссылки можно инициировать графическими изображениями, помещая тег <img/> внутрь тега <a>. Общий формат присваивания ссылок графическим изображениям показан ниже.
<a href="url"><img src="url" alt="text"/></a>
Изображения особенно эффективны для ссылок, так как с помощью информативной графики можно сразу сказать о назначении сайта. Ссылки, закодированные на листинге 7.12 и показанные на рисунке 7.9, созданы из изображений, полученных с соответствующих сайтов.
<style type="text/css">
img {border:0; vertical-align:middle}
</style>
<p>
<a href="http://www.ebay.com"><img src="ebay.jpg" alt="eBay Link"/></a>
<a href="http://www.ebay.com">Ebay</a>
</p>
<p>
<a href="http://www.nascar.com"><img src="nascar.jpg" alt="NASCAR Link"/></a>
<a href="http://www.nascar.com">NASCAR</a>
</p>
<p>
<a href="http://www.weather.com"><img src="weather.jpg" alt="Weather Link"/></a>
<a href="http://www.weather.com">The Weather Channel</a>
</p>
<p>
<a href="http://www.microsoft.com"><img src="microsoft.jpg" alt="Microsoft Link"/></a>
<a href="http://www.microsoft.com">Microsoft</a>
</p>
(рис 7.9) Графические и текстовые ссылкиПо умолчанию графические ссылки окружены границей, чтобы указать, что это ссылка, - цель та же, что и у подчеркивания текстовых ссылок. В данном примере вывод границы подавляется в таблице стилей, задавая границу изображений толщиной 0px.
При использовании графических изображений в качестве ссылок желательно создавать также текстовые ссылки. В данном примере это сделано включением отдельных текстовых ссылок, которые выровнены по центру их соответствующих изображений с помощью свойства таблицы стилей
Вспомните, что удаленный сайт Web должен открываться в отдельном окне браузера, чтобы пользователь оставался в контакте с исходным сайтом. Приведенные выше ссылки модифицированы в следующем коде так, чтобы они открывались в новом окне браузера с помощью описанной ранее техники использования JavaScript.
<p>
<a href="javascript:" onclick="open('http://www.ebay.com','','')"><img
src="ebay.jpg" alt="eBay Link"/></a>
<a href="javascript:"
onclick="open('http://www.ebay.com','','')">Ebay</a>
</p>
<p>
<a href="javascript:" onclick="open('http://www.nascar.com','','')"><img
src="nascar.jpg" alt="NASCAR Link"/></a>
<a href="javascript:"
onclick="open('http://www.nascar.com','','')">NASCAR</a>
</p>
<p>
<a href="javascript:" onclick="open('http://www.weather.com','','')"><img
src="weather.jpg" alt="Weather Link"/></a>
<a href="javascript:"
onclick="open('http://www.weather.com','','')">The Weather Channel</a>
</p>
<p>
<a href="javascript:" onclick="open('http://www.microsoft.com','','')"><img
src="microsoft.jpg" alt="Microsoft Link"/></a>
<a href="javascript:
" onclick="open('http://www.microsoft.com','','')">Microsoft</a>
</p>
Карта ссылок является графическим изображением, имеющим реагирующие на щелчок мыши области, которые соединяются индивидуально с различными страницами. Часто карты ссылок используются для вывода большого изображения на открывающей сайт странице, на котором отдельные части изображения представляют ссылки на отдельные области сайта, на которые может перейти посетитель.
Карта ссылок и сопровождающие текстовые ссылки, показанные на рисунке 7.10, являются ссылками внутри страницы на заголовки, появляющиеся далее на странице. Карта ссылок использует основные геометрические фигуры в качестве
(рис 7.10) Карта ссылок и сопровождающие текстовые ссылкиЧтобы создать карту ссылок, начинают с изображения, на котором требуется создать
Рисунок 7.11 показывает изображение, из которого создана приведенная выше карта ссылок. Изображение выводится в программе Windows Paint, которая может отслеживать перемещение мыши по изображению.
(рис 7.11) Определение горизонтальных и вертикальных координат на графическом изображенииОбратите внимание, что в строке состояния окна выводятся вертикальные и горизонтальные координаты указателя "карандаша". Указатель находится в одном из углов многоугольника, и отслеживаемая позиция показывает 175, 200; то есть, указатель расположен на расстоянии 175 пикселей от левого края изображения (горизонтальная позиция) и на расстоянии 200 пикселей от верхнего края изображения (вертикальная позиция). Координаты всегда измеряются от верхнего левого угла всего изображения.
В зависимости от формы отображаемой области, требуется различная информация о положении.
Для прямоугольника надо знать горизонтальные и вертикальные координаты верхнего левого ( top-left ) и нижнего правого ( bottom-right ) углов. Эти две координаты h,v можно определить, помещая указатель "карандаш" в каждый из этих углов и считывая координаты из строки состояния. В приведенном выше рисунке пиксельными координатами этих двух точек являются top-left = 8,13 и bottom-right = 130,123.
Для круга необходимо знать координаты центра и величину радиуса в пикселях. Координаты центра приведенного выше круга определяют, помещая указатель "карандаш" (приблизительно) в центре и считывая в строке состояния значения 228, 123. Радиус является расстоянием от центра до края круга. Радиус можно определить, считывая координаты правого края круга (на той же вертикальной координате, что и центр круга) и находя разность между горизонтальными координатами центра и края: радиус = (290 - 228) = 62.
Для многоугольника необходимо знать координаты каждой из его угловых точек, обходя по часовой или против часовой стрелки его ребра, начиная с любой угловой точки на многоугольнике. Обходя по часовой стрелке, начав с верха этого многоугольника, мы получаем координаты 100,144; 175,200; 155,255; 50,250; и 45,172.
Имея эти координаты фигур, теперь можно создавать код карты ссылок и присваивать адреса URL ссылок различным фигурам.
Изображение, которое станет картой ссылок, помещается на страницу с помощью тега <img/>. Кроме своих стандартных атрибутов этот тег содержит атрибут usemap="mapname", который указывает на названный этим именем тег <map>, задающий описания <img/> и <map> показан на листинге 7.14.
<img src="url" alt="text" usemap="#mapname"/>
<map id="mapname">
<area
shape="rect|circle|poly"
coords="coordinates"
href="url"
alt="text"
/>
...
</map>
В теге <img/> задается #mapname, чтобы связать изображение с тегом <map>, определенным с помощью mapname. Внутри тега <map> имеются теги <area/>, по одному для каждой отображаемой области в изображении. Эти теги определяют форму, координаты в пикселях и страницу ссылки для всех
Следующий код определяет изображение, показанное на рисунке 7.11, как карту ссылок со ссылками на различные заголовки текущей страницы Web.
<img src="MyMap.gif" alt="Image Map" usemap="#MyImageMap">
<map id="MyImageMap">
<area shape="rect" coords="8,13,130,123"
href="#LINK1" alt="Determining Mapped Areas"/>
<area shape="circle" coords="228,123,62"
href="#LINK2" alt="Coding an Image Map"/>
<area shape="poly" coords="100,144 175,200 155,255 50,250 45,175"
href="#LINK3" alt="Overlapped Mapped Areas"/>
</map>
Обратите внимание на связь между usemap="#MyImageMap" в теге <img/> и id="MyImageMap" в теге <map>. Идентификатор id="MyImageMap" соединяет карту ссылок с графическим изображением. Также при кодировании окончательной страницы оба тега <img/> и <map> должны быть внутри блочного тега, такого, как <p> или <div>.
Теги <area/> задают координаты ( coords ) для определения отдельных геометрических фигур и для соединения адресов URL со щелчком мыши на этой фигуре. В этом примере адреса URL являются ссылками внутри страницы; но можно соединяться с другими страницами на сайте или с внешними сайтами Web.
Когда shape="rect" (прямоугольник), coords определяют четырьмя числами, разделенными запятыми. Эта запись представляет две пары координат h,v, первая пара задает координаты верхнего левого угла прямоугольника, а вторая - координаты нижнего правого угла ( 8,13,130,123 ).
Когда shape="circle" (круг), coords определяют тремя числами, разделенными запятыми. Первые два числа представляют координаты h,v центра круга, а последнее число является величиной радиуса в пикселях ( 228,123,62 ).
Когда shape="poly" (многоугольник), coords определяют координатами h,v вершин многоугольника. Числовые пары можно перечислять по часовой или против часовой стрелки вдоль периметра многоугольника; они разделяются пробелами ( 100,144 175,200 155,255 50,250 45,175 ).
Тег <map> может появиться на странице в любом месте. Где бы он ни появился в теле документа, он связывается с соответствующим тегом <img> через имя отображения.
Даже если карта ссылок создается с атрибутом alt для каждой активной области вместе с текстом alt для самого тега <img/>, тем не менее, желательно предоставить множество сопоставимых текстовых ссылок для посетителей с программным обеспечением для чтения текста или для тех, кто отключает вывод графики в браузере.
В случае необходимости можно создавать перекрывающиеся <map> раньше.
В примере на рисунке 7.12 щелчок в перекрывающейся области соединяет с адресом URL, заданным для shape="rect", так как его определение появляется в карте ссылок раньше shape="circle", хотя графическое изображение круга перекрывает и изображение прямоугольника.
<map name="ImageMap"> <area shape="rect" ...> <area shape="circle" .../> </map>
(рис 7.12) Приоритет перекрывающихся областей карты ссылокМожно также при желании присвоить ссылку области изображения, которая не отображается специально ни на одну из этих фигур. Ссылка, связанная с этой "фоновой" фигурой, должна появиться последней в списке тегов <area/>, чтобы она не имела преимущества по отношению к другим фигурам как перекрывающее изображение. Координаты фонового изображения будут охватывать всю прямоугольную область изображения.
Следующий листинг показывает код карты ссылок, описанной в текущем примере страницы. Текстовые параграфы присутствуют не полностью, только ссылки внутри страницы на эти разделы страницы.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Использование графических карт</title>
<style type="text/css">
body {margin:20px}
.center {text-align:center}
</style>
</head>
<body>
<h2 class="center">Using Image Maps</h2>
<p class="center">
<img src="MyMap.gif" usemap="#MyImageMap" alt="Image Map" style="border:0px/">
<map id="MyImageMap">
<area shape="rect" coords="8,13,130,123"
href="#LINK1" alt="Determining Mapped Areas"/>
<area shape="circle" coords="228,123,62"
href="#LINK2" alt="Coding an Image Map"/>
<area shape="poly" coords="100,144 175,200 155,255 50,250 45,175"
href="#LINK3" alt="Overlapped Mapped Areas"/>
</map>
</p>
<p class="center"">
<a href="#LINK1">Determining Mapped Areas</a> |
<a href="#LINK2">Coding an Image Map</a> |
<a href="#LINK3">Overlapped Mapped Areas</a>
</p>
<h3><a name="LINK1">Determining Mapped Areas</a></h3>
...text...
<p><a href="#">Top</a></p>
<h3><a name="LINK2">Coding an Image Map</a></h3>
...text...
<p><a href="#">Top</a></p>
<h3><a name="LINK3">Overlapped Mapped Areas</a></h3>
...text...
<p><a href="#">Top</a></p>
</body>
</html>
Этот пример использует для карты ссылки внутри страницы. Атрибут href тега <area/> может точно также открывать внешний сайт Web в том же самом или новом окне браузера.
Показанный выше общий формат атрибута usemap для тега <img/>
usemap="#mapname"
использует символ "#" в качестве префикса для mapname. Однако в стандартах XHTML 1.1 этот символ считается незаконным. Текущие стандарты требуют, чтобы атрибут записывался в упрощенном формате: usemap="mapname", без символа префикса. Проблема в том, что некоторые браузеры не соответствуют стандартам и не распознают рекомендованный формат. Поэтому может понадобиться использовать старый формат атрибута usemap, чтобы карты ссылок работали правильно. Единственный недостаток в том, что в этом случае страница не будет считаться корректной при проверке службой валидации W3C.
В Интернете можно встретить сайты Web, которые автоматически переадресуют посетителей с одной страницы на другую. Эта техника часто используется, когда домашняя страница перемещается с одного адреса URL на другой. В течение некоторого периода времени исходный адрес URL переадресует на новый адрес URL, чтобы пользователи имели возможность изменить свои закладки или каталоги ссылок.
Переадресация выполняется с помощью тега <meta>, который присутствует в разделе <head> документа и используется обычно для предоставления информации о документе XHTML. Общая форма этого тега, применяемая для переадресации, показана ниже.
<meta http-equiv="refresh" content="seconds; url=url" />
Атрибут http-equiv определяет такое использование тега <meta>, как обновление или перезагрузку текущей страницы. Атрибут content определяет количество секунд ожидания, прежде чем произойдет перезагрузка вместе с адресом URL страницы, на которую произойдет переадресация, когда текущая страница перезагрузится.
Например, страница с именем Redirect.htm расположена в каталоге, где находится страница xhtml07-04.htm. На странице Redirect.htm кодируется тег meta, который через пять секунд ожидания перенаправляет вызов на страницу xhtml07-04.htm.
В разделе <head> страницы Redirect.htm имеется следующий тег <meta> для перехода на страницу xhtml07-04.htm.
<head> <title>Redirect Page</title> <meta http-equiv="refresh" content="5; url=xhtml07-04.htm"/> </head>
В теге <meta/> с атрибутами http-equiv и content можно закодировать переход на ряд страниц, чтобы создать самовыполняющуюся демонстрацию слайдов (слайд-шоу), которая автоматически загружает одну страницу за другой. Каждый тег <meta/> определяет время просмотра страницы вместе со ссылкой на следующую страницу последовательности.
Следующая графическая ссылка загружает первую (Slide1.htm) из пяти страниц слайд-шоу, которые все расположены в текущем каталоге. Код этой начальной ссылки показан ниже.
<a href="Slide1.htm"><img src="Pixar.gif" alt="Просмотр слайд-шоу"/></a>
(рис 7.13) Ссылка на слайд-шоуКаждая страница слайд-шоу содержит тег <meta/>, задающий адрес URL следующей страницы в последовательности и задающий таймер обновления на три секунды. Следующий сокращенный код находится на страницах слайдов.
<head> <title>Slide 1</title> <meta http-equiv="refresh" content="3; url=Slide2.htm"/> </head> <body> <h1>Toy Story</h1> <p><img src="ToyStory.jpg" alt="Toy Store Image"/></p> </body> <head> <title>Slide 2</title> <meta http-equiv="refresh" content="3; url=Slide3.htm"/> </head> <body> <h1>A Bug's Life</h1> <p><img src="BugsLife.jpg" alt="A Bugs's Life Image"/></p> </body> <head> <title>Slide 3</title> <meta http-equiv="refresh" content="3; url=Slide4.htm"/> </head> <body <h1>Finding Nemo</h1> <p><img src="FindingNemo.jpg" alt="Finding Nemo Image"/></p> </body> <head> <title>Slide 4</title> <meta http-equiv="refresh" content="3; url=Slide5.htm"/> </head> <body <h1>Monsters, Inc.</h1> <p><img src="MonstersInc.jpg" alt="Monsters, Inc. Image"/></p> </body> <head> <title>Slide 5</title> <meta http-equiv="refresh" content="3; url=begin.htm"/> </head> <body <h1>Toy Story 2</h1> <p><img src="ToyStory2.jpg" alt="Toy Store 2 Image"/></p> </body>
Последняя страница слайд-шоу переадресует снова на начальную страницу слайд-шоу, содержащую исходную ссылку на первый слайд. Если необходимо выполнить слайд-шоу в отдельном окне браузера, то исходная ссылка открывает новое окно.
<a href="#" onclick="open('Slide1.htm','','')">
<img src="Pixar.gif" alt="Просмотр слайд-шоу"/>
</a>
Отметим, что так как тег <meta/> не может закрыть окно браузера, то последняя страница слайдов, которая открывается в этом отдельном окне, не должна содержать тег <meta/> для переадресации снова на исходную страницу, приводя тем самым к тому, что исходная страница будет открыта в двух отдельных окнах - в исходном окне и в отдельном окне слайд-шоу. Вместо этого конечная страница слайд-шоу должна предложить посетителям просто закрыть окно, чтобы оставить только исходное окно, содержащее страницу с исходной ссылкой.
По мере накопления большого числа документов Web, скорее всего, потребуется организация различных приложений Web по отдельным каталогам, подчиненным корневому каталогу - который, в свою очередь, подчинен основному каталогу Web. Рисунок 7.14 иллюстрирует эту идею с помощью трех подкаталогов в корневом каталоге Website, каждый из которых содержит страницы Web. Папка Application3 содержит, кроме того, подкаталог Media для хранения всех графических файлов, относящихся к этому приложению.
(рис 7.14) Пример структуры каталога WebПри кодировании атрибута src в теге <img/> или атрибута href в теге <a> необходимо проследить иерархию каталогов от страницы Web, содержащей тег до расположения определенных в ссылке реального изображения или страницы. Это означает, что может понадобиться спуститься на один или несколько уровней каталогов, чтобы найти изображение или присоединенную страницу; или что необходимо подняться по иерархии, чтобы найти изображение или страницу; или что необходимо подняться в иерархии в каталог более высокого уровня, а затем спуститься в папку, содержащую изображение или страницу ссылки.
Причина этого перемещения вверх и вниз по каталогам состоит в том, что присоединяемые страницы или изображения указываются относительно страницы, содержащей ссылку. Используя иллюстрацию, предположим, что PageA.htm в каталоге Application1 содержит тег <img/>, указывающий на Picture1.gif в подкаталоге каталога Application3. Чтобы создать ссылку src со страницы PageA.htm на Picture1.gif, необходимо пройти следующий путь доступа:
- перейти на один уровень вверх из папки Application1 в папку WebSite;
- перейти на один уровень вниз из папки WebSite в папку Application3;
- перейти еще на один уровень вниз из папки Application3 в папку Media.
Используется два типа спецификации пути доступа для перемещения в иерархии каталогов при определении местонахождения страниц Web и графических изображений:
- записывают две точки, за которыми следует наклонная черта ( "../" ), для каждого уровня при перемещении вверх по иерархии папок;
- записывают имя папки, за которым следует наклонная черта ( "/" ), для каждого уровня при перемещении вниз по иерархии папок.
Например, адрес URL для ссылки <img/> со страницы PageA.htm на Picture1.gif будет следующим:
<img src="../Application3/Media/Picture1.gif"/>
Из текущего каталога, содержащего PageA.htm, перемещаемся вверх на один уровень ( ../ ) из каталога Application1 в каталог WebSite. Из каталога WebSite спускаемся вниз по каталогам Application3/ и Media/, чтобы найти Picture1.gif.
Обычно спецификации путей доступа будут не такими сложными. Как правило, для папки, содержащей страницы Web, создают одну папку Media внутри папки страниц, в которой хранятся все изображения, используемые на этих страницах. Тогда ссылка src на изображение должна будет указывать вниз только на один уровень каталогов:
<img src="Media/Picture.gif"/>
Приведенный выше пример соединяет страницу Web с изображением. Тот же самый подход используют при соединении одной страницы с другой. В приведенной выше структуре каталогов ссылка на странице PageA.htm, указывающая на страницу Page2.htm, будет иметь вид:
<a href="../Application3/Page2.htm">На страницу Page2.htm</a>
Достаточно просто проследить путь со страницы Web к графическому изображению или другой странице Web, если ориентироваться по структуре папок, начиная с папки, содержащей страницу, и заканчивая в папке, содержащей файл. Не забудьте также уделить внимание дереву каталогов; необходимо следовать иерархии вверх и вниз по ветвям дерева, а не делать поперечные ссылки, где отсутствуют соединяющие папки "линии".
Для получения официальных документов о завершении программы дополнительного профессионального образования (удостоверения о повышении квалификации, дипломов о профессиональной переподготовке и MBA) необходимо предоставить:
Внимание! Вы можете не заказывать доставку бумажной версии официального документы, а скачать его в электронном виде и распечатать самостоятельно. Информация о выданном документе в течение 1 месяца загружается в Федеральную информационную систему «Федеральный реестр сведений о документах об образовании и (или) о квалификации, документах об обучении» - ФИС ФРДО.
Доступ на новый сайт осуществляется с использованием адреса электронной почты, который был указан вами при регистрации на "старом". Мы постарались перенести все ваши данные с прежнего ресурса, однако не исключена вероятность потери части информации.
При возникновении проблемы со входом, воспользуйтесь функцией сброса пароля
Если вы обнаружите несоответствия, пожалуйста, сообщите нам.