<< Пред. стр.

стр. 36
(общее количество: 51)

ОГЛАВЛЕНИЕ

След. стр. >>

что и стандартная ссылка, браузер перерисовывает всю Web-страницу при наведении
ГЛАВА 60. Создание роловерных гиперссылок 333

указателя на ссылку, как на рисунке 60.2, что может смутить посетителей или даже вы-
нудить их отказаться от дальнейшего просмотра Web-сайта.



The visitor isn't l i o v n i n a «ver this lmk The visitor isn't hovering ov-r this folk. The v
havering over this link The visitor isn't hovering over this lmk




Рис. 60.1. С помощью псевдокласса hover можно создать ссылки,
которые изменяют свой внешний вид при наведении на них указателя мыши



The visitor h n ' l hovering over ths tmk The «inter Щ}4 hovtmnK °ver this bnk I h f visitor




is hover ing „«.

Puc. 60.2. Сравните этот рисунок с рисунком 60.1, и вы увидите,
что браузер перерисовывает страницу, чтобы вместить ссылку
с этим чрезмерно большим ролловерным стилем


Совет
Некоторые дизайнеры любят создавать ролловеры ссылок, которые
по умолчанию отображаются подчеркнутыми, а при наведении указа-
теля на ссылки подчеркивание исчезает. Хотя данная стратегия не ли-
шена смысла, поскольку подчеркивание, используемое по умолча-
нию, помогает посетителям уяснить, какие элементы на странице яв-
ляются гиперссылками, однако не чувствуется, что ролловер перехо-
дит из низкоэнергетического состояния в высокоэнергетическое сос-
тояние. С психологической точки зрения именно этого ожидает посе-
титель. Когда подчеркивание пропадает, ссылка выглядит как закры-
вающаяся — она переходит из состояния с высокой энергией в состо-
яние с низкой энергией. Некоторые посетители могут сделать вывод,
что ссылки так и не являются активными.
Если вы не хотите удалить подчеркивание, используемое по умолчанию,
то и не удаляйте подчеркивание в ролловерном состоянии. Найдите дру-
гой способ выделить ролловер, например, с помощью перехода от нор-
мального к полужирному начертанию или посредством добавления фо-
нового цвета. Каким бы не был выбранный стиль, ролловерная ссылка
должна выглядеть как активизирующаяся, а не как закрывающаяся.
ГААВА61.
Выбор надлежащего пути
Путь гинерссылки подобен набору управляющих инструкций для браузера. Он сооб-
щает браузеру, как добраться до загружаемой Web-страницы, когда посетитель щелка-
ет на ссылке. v



Определение
Путь (path) гиперссылки сообщает браузеру, как добраться до стра-
ницы, которая загружается при щелчке пользователем на ссылке.



Существует три типа путей: абсолютные, относительные, указываемые относительно
документа, и относительные, указываемые относительно корня. Выбор типа пути за-
висит от способа, который требуется использовать для сообщения браузеру о том, как
добраться до связанной страницы. Абсолютный путь сообщает браузеру, как добрать-
ся до требуемой страницы из любого места в Интернете. Относительный путь, ука-
зываемый относительно документа, сообщает браузеру как добраться до требуемого
документа с текущей Web-странйцы, тогда как относительный путь, указываемый
относительно корня, сообщает браузеру, как добраться до требуемой страницы с те-
кущего Web-сайта. У каждого типа пути есть свои достоинства и недостатки, которые
рассматриваются в данной главе.


Определение
Абсолютный (absolute) путь сообщает браузеру, как добраться до
требуемой страницы из любого места в Интернете. Относительный
путь, указываемый относительно документа (document-relative):
сообщает браузеру, как добраться до требуемой страницы с текущей
Web-страницы. Относительный путь, указываемый относительна
корня (root-relative), сообщает браузеру, как добраться до требуе
мой страницы с текущего Web-сайта.




использование абсолютных путей
Абсолютный путь предоставляет полный путь URL (Uniform Resource Locator — уни-
фицированный указатель информационного ресурса) требуемой Web-страницы,
включая префикс «http://www», как в следующем примере:
<а h r e f = " h t t p : / / w w w . р е а г з о п . с о т / " > А б с о л ю т н ы й путь</а>
ГЛАВА 61 • Выбор надлежащего пути 335

Другими словами, абсолютный путь полностью совпадает с путем URL, вводимым в
браузере в поле адреса. Чтобы перейти на требуемую страницу, не надо вводить другой
URL, когда используется другой компьютер или когда вы находитесь на другом
Web-сайте. Именно это свойство делает путь абсолютным — он всегда одинаков, неза-
висимо от того, в каком месте Интернета просматривает ресурсы браузер.


Совет
Используйте абсолютные пути для внешних ссылок (external links)
или для ссылок на страницы, которые не принадлежат вашему
Web-сайту. На практике для этих целей следует обязательно исполь-
зовать абсолютные пути. Относительные пути, указываемые относи-
тельно документа (document-relative) или корня (root-relative), не ра-
ботают с внешними страницами.


Поскольку абсолютный путь всегда одинаков, его не надо обновлять в исходном коде,
если изменяется положение страницы в иерархии вашего Web-сайта. Страницу с абсо-
лютной ссылкой можно перемещать в любое место на своем Web-сайте и ссылка всег-
да будет соединять с требуемой страницей до тех пор, пока путь URL в атрибуте h r e f
будет точным.


Определение
' Внутренняя ссылка (internal link) — это ссылка на страницу, находя-
щуюся в пределах вашего Web-сайта, тогда как внешняя ссылка
(external link) — это ссылка на страницу за пределами вашего
Web-сайта.


Но поскольку необходимо приводить полный путь URL при каждой записи абсолют-
ного пути, эти пути могут быть громоздкими для внутренних ссылок (internal links)
или для ссылок, которые указывают на страницы собственного Web-сайта. Для внут-
ренних ссылок, как правило, лучше подходят относительные ссылки, указываемые от-
носительно документа или корня. Кроме того, чтобы абсолютные пути работали, для
вашего компьютера должно быть установлено активное подключение к Интернету.
Если открыть окно браузера в автономном режиме для тестирования собственного
Web-сайта, то при щелчке на ссылке с абсолютным путем браузер откроет подключе-
ние к Интернету.


Часто задаваемые вопросы
Можно ли использовать для внешних ссылок относительные пу-
ти, указываемые относительно документа?
Нет. Относительные пути, указываемые относительно документа,
предназначены исключительно для внутренних ссылок.
336 Строим Web-сай [ 11


использование относительных путей,
указываемых относительно документа
В относительном пути, указываемом относительно документа, вы сообщаете браузеру
как добраться до требуемой страницы с текущей Web-страницы. Это делается путем
пошагового перемещения браузера по иерархии сайта.
Следует тогда отметить, что для написания действующего относительного пути, ука-
зываемого относительно документа, необходимо знать иерархию своего сайта. Возь-
мем следующую структуру сайта:
• Домашняя страница
• Фильмы
• Приключения
• Комедии
• Драмы
• Романтические
• Детективы
• Ужасы
• Научная фантастика
• Музыка
• Популярная
• Джаз
• Классика
• Игры
• Компьютерные
• Консольные
Допустим, что текущей страницей является домашняя страница. Относительный
путь, указываемый относительно документа, в применении к странице «Фильмы» o f
носительно домашней страницы будет выглядеть следующим образом:
<а href="фильмы/фильмы.htm">C домашней страницы на страницу "Филь-
мы" </а>
тогда как для страницы «Приключения» в категории «Фильмы» относительный путь,
указываемый относительно документа, будет следующим:
<а h r e f = "фильмы/приключения/приключения.1л1:т">С домашней страницы
на страницу "Приключения"</а>
Однако если текущая страница изменяется, изменяется и относительный путь. Для пе-
рехода на страницу «Приключения» со страницы «Фильмы», а не с домашней страни-
цы, путь будет выглядеть следующим образом:
ГЛАВА 61. Выбор надлежащего пути 337

<а href="приключения/приключения.htm">Co страницы "Фильмы" на
страницу "Приключения"</а>
Как можно видеть, нет необходимости указывать префикс «http://www» или имя доме-
на для своего сайта. Все это подразумевается в относительном пути, указываемом от-
носительно документа. Все, что необходимо сделать, это направить браузер к надле-
жащему каталогу и файлу относительно текущей страницы.
Все объяснения, приведенные выше, касались переходов вглубь структуры сайта, а
что если необходимо возвращаться в обратном направлении по иерерархии Web-стра-
ниц. Как записать относительный путь, указываемый относительно документа, для
страницы «Фильмы» относительно страницы «Фантастика»? Потребуется некоторая
техническая терминология:
<а href="..фильмы.htm">Co страницы "Научная фантастика" на страни-
цу "Фильмы"</а>
Две точки (. .) являются компьютерным кодом действия «Перейти на один уровень
вверх в структуре сайта». Таким образом, если браузер находится на странице «Науч-
ная фантастика» и видит две точки в относительном пути, указываемом относительно
документа, он понимает, что необходимо вернуться на один уровень назад по иерар-
хии, чтобы найти файл фильмы.htm. Подобным образом, если необходимо перейти
со страницы «Научная фантастика» назад на несколько уровней в направлении к до-
машней странице, потребуется несколько наборов двоеточий:
<а h r e f = " . . / . . / i n d e x . h t m " > C o страницы "Научная фантастика" на до-
машнюю страницу</а>
Данный относительный путь предписывает браузеру перейти на два уровня вверх в
структуре сайта, чтобы найти файл index.htm.
В одном и том же относительном пути, указываемом относительно документа, можно
комбинировать перемещения вверх и вниз по структуре сайта. Скажем, требуется пе-
рейти со страницы «Ужасы» в категории «Фильмы» на страницу «Классика» в катего-
рии «Музыка». Относительный путь, указываемый относительно документа, мог бы
выглядеть следующим образом:
<а href="../Музыка/Классика/классика.Ь1:т">Со страницы "Научная фан-
тастика" на страницу "Классика"</а>
Если описывать действия на обычном языке, то браузер переходит в иерархии на
один уровень вверх, чтобы найти папку музыки. Он ищет внутри папки музыки папку
классики, и внутри папки классики ищет файл классика.htm.


Совет
При перемещении страниц в структуре сайта инструменты управле-
ния сайтами такие, как Macromedia Dreamweaver, Adobe GoLive и
Microsoft FrontPage автоматически обновляют относительные пути,
указываемые относительно документа.


Полезное свойство относительных путей, указываемых относительно документа, сос-
тоит в том, что они работают в автономном режиме также хорошо, как и в интерак-
тивном режиме. Другими словами, можно тестировать сайт автономно в браузере без
Строим Web-сайты
338

необходимости подключаться к Интернету, при этом все ссылки с относительными пу-
тями, указываемыми относительно документа, действуют в полном объеме. Основной
недостаток относительных путей, указываемых относительно документов — при пере-
мещении страницы, содержащей ссылку на другой уровень сайта, ссылка больше не бу-
дет работать. Помните, относительный путь, указываемый относительно документа,
направляет браузер вверх и вниз по иерархии сайта. Если страница не находится в
прежнем положении в иерархии, шаги перемещения по структуре сайта не будут сов-
падать с Прежней последовательностью шагов. Эта проблема отсутствует для абсолют-
ных путей, поскольку абсолютные пути не зависят от текущего положения браузера.



использование относительных путей,
указываемых относительно корня
Относительные пути, указываемые относительно корня (root-relative paths), сходны с
относительными путями, указываемыми относительно документа (document-relative
paths), в том, что они используются только для внутренних ссылок и не применяются
для внешних ссылок. Однако относительные пути, указываемые относительно корня,
больше похожи на абсолютные пути, хотя в них не указывается ни префикс
«http://www», ни имя домена для сайта:
<а href="/index.htm">Относительный путь, указываемый относительно
корнж/а>
Относительные пути, указываемые относительно корня, начинаются с левой косой
черты (/), и они описывают положение целевой страницы относительно корня (root)
или самого верхнего уровня вашего сайта. Поэтому относительный путь, указываемый
относительно корня, всегда одинаков, как и абсолютный путь. Путь не изменяется в за-
висимости от текущего положения браузера, т.к. не изменяется сам корень сайта.



Совет
Корень (root) сайта — это самый верхний уровень сайта.




Взяв в качестве примера иерархию сайта из предыдущего раздела данной главы, полу-
чим для страницы «Классика» следующий относительный путь, указываемый относи-
тельно корня:
<а href="/музыка/классика/классика.htm">l43 корня к странице "Клас-
сика"</а>
Абсолютный путь для этой страницы выглядит точно также, только добавляются пре-
фикс «http://www» и имя домена для сайта.
ГЛАВА 61. Выбор надлежащего пути 339

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


Часто задаваемые вопросы
Итак, я не могу тестировать в автономном режиме относитель-
ные ссылки, указываемые относительно корня?
В действительности вы можете, но для этого требуются специальное
программное обеспечение и оборудование. Профессиональные раз-
работчики Web-сайтов обходят проблему с относительными путями,
указываемыми относительно корня, одним из двун способов: уста-
навливая Web-сервер на своем персональном компьютере или заг-
ружая страницы на вспомогательный сервер (staging server), являю-
щийся личным Web-сервером, предназначенным для отладки и тес-
тирования.
ГЛАВА 62.
изменение цвета одиночной гиперссылки
В обычном коде HTML не существует способа для изменения цвета одиночной гипе-
рссылки на странице. В теге <body> доступны атрибуты l i n k , v l i n k и a l i n k , кото-
рые определяют цвета в равной степени для всех ссылок, и у вас, например, нет воз-
можности сделать стандартные непосещенные ссылки синими, а одну конкретную не-
посещенную ссылку красной.
Это означает, что у вас нет такой возможности, если вы не используете каскадные i и -
>
лицы стилей, которые предоставляют пару разных способов для изменения цвета од| [ -
ночной ссылки.


Совет
Будьте осторожны, изменяя цвета отдельных ссылок слишком часто.
Посетители вашего сайта полагаются на цвета ссылок, которые поз-
воляют им судить о том, какие страницы вашего сайта уже просмот-
рены ими. Любое отклонение от образца цветовой схемы стандар -
ных ссылок связано с риском запутать аудиторию своего сайта.
Однако применение этих методов полностью правомерно для изме-
нения цвета ссылок, запускающих сценарии, с целью обособления их
от обычных гиперссылок. Поступая таким образом, вы акцентируете
внимание на различии между ссылками, запускающими сценарии, и
ссылками, предназначенными для загрузки страницы, что помогает
сделать сайт более удобным для использования.




изменение цвета, используемого по умолчанию
для всех состояний ссылок
ЕСЛИ требуется изменить цвет, в который ссылка окрашена по умолчанию, и если не-
обходимо, чтобы этот же цвет применялся для ссылки независимо от ее состояния,
просто добавьте правило стиля в атрибут s t y l e тега-анкера ссылки:
<а h r e f = " . . / s p e c i a l . h t m " style="color: #FF0000;">Смотрите экстрен-
ный выпуск</а>
В этом примере гиперссылка всегда отображается красной, независимо от состояния
ссылки и используемых по умолчанию цветов ссылки.
В альтернативном варианте, если то же самое форматирование применяется к нес-
кольким ссылкам на странице, можно создать стиль класса для управления специаль-
ным цветом гиперссылки:
<style type="text/css">
a.special {
ГЛАВА 62. Изменение цвета одиночной гиперссылки 341

color: #FF0000;
}


</style>


<body>


<a class="special" href="../speciall.ЬЬш">Смотрите экстренный вы-
пуск</а>
<а class="special" href="../special2.htm">CMOTpMTe дополнительный
экстренный выпуск</а>


</body>
Теперь любые теги-анкеры, принадлежащие классу s p e c i a l , имеют одинаковые свой-
ства цвета независимо от состояния ссылки и стандартных цветов ссылок.



изменение стандартного цвета
для отдельных состояний ссылок
ЕСЛИ требуется менять специальный цвет ссылки в зависимости от состояния ссылки,
атрибут s t y l e тега-анкера не поможет сделать это, поскольку необходим доступ к
псевдоклассам тега-анкера. Нет проблем — просто создайте специальный стиль класса
подобный следующему:
<style type="text/css">


a. special:link {
color: #FF0000;




a.special:visited {
color: #CC0000;
} • • • . . .




a.special:active {
color: #990000;
Строим Web-сайты
342




а.special:hover {
color: #660000-;



</style>


<< Пред. стр.

стр. 36
(общее количество: 51)

ОГЛАВЛЕНИЕ

След. стр. >>