<< Пред. стр.

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

ОГЛАВЛЕНИЕ

След. стр. >>

<body> '•



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

<а class="special" href =" . ./special2 .111:т">Смотрите дополнительный
экстренный выпуск</а>


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


Совет
Нет необходимости приводить правила стилей для всех четырех сос-
тояний ссылки. Достаточно определить состояния, которые применя-
ются к ссылке. Если для специальной ссылки необходимо использо-
вать отдельные цвета для посещенного (visited) и непосещенного
(unvisited) состояний, а для активного (active) и выделенного (hover)
состояний отдельные цвета не требуются, создайте стили только для
состояний link и visited. Стандартные ссылки на странице могут
иметь активное и выделенное состояния, но они не будут относиться
к специальному классу.
ГЛАВА 63.
Выбор подходящего текста
для гиперссылки
Создание гиперссылки не представляет трудностей. В пару тегов-анкеров заключает-
ся фрагмент текста, на котором должны будут щелкать кнопкой мыши посетители.
Разработка гиперссылки — это полностью другое дело. Действительно, какой текст
должен заключаться в теги-анкеры?
Первое практическое правило для любой текстовой гиперссылки заключается в сле-
дующем: ссылка должна сообщать посетителю, что следует ожидать от щелчка на ней.
Это означает, что текст ссылки должен подсказывать, куда ведет ссылка и какие сведе-
ния посетитель получит, проследовав по предлагаемому пути.
Иногда выбор очень прост. Если существует список ссылок, которые функционируют
как часть системы навигации на сайте, очевидно, что ссылки должны быть полными
именами категорий навигации, как на рисунке 63.1. Данное текстовое описание удов-
летворяет требованиям первого практического правила для гиперссылок, поскольку
оно полностью сообщает посетителю, куда ведут ссылки.
Листинг 63.1. Исходный код страницы, вид которой в браузере
показан на рисунке 63.1


<а href="../index.htm">HOME</a> I
<a href="../products.htm">PRODUCTS</a>
href-'../services.htm">SERVICES</a>
<a
<a href="../aboutus.htm">ABOUT US</a> Г




Xools
File Edit JJew Favorites




Page Title
Content goes here. Content goes here. Content goes here. Content goes here Content goes here
Content goes here Content goes here Content goes here. Content goes here Content goes here.
Content goes here Content goes here.




Рис. 63.1. Когда существует список ссылок,
которые функционируют как часть системы навигации на сайте,
заключите в теги-анкеры каждый из вариантов навигации
Строим Web-сайть
344

Выбор текста для ссылок также не составит труда, если имеется список ссылок на бо-
ковой панели или в специальном разделе на странице, как на рисунке 63.2. Здесь не
возникает вопросов, куда введут ссылки. Текст ссылок сам сообщает об их назначении.
Листинг 63.2. Исходный код страницы, вид которой в браузере
показан на рисунке 63.2
<рха href = " h t t p : //external_site01">External Site 1</ах/р>
<рха href = " h t t p : //external_siteO2">External Site 2</ax/p>
<pxa href = " h t t p : //external_siteO3">External Site 3</ax/p>
<pxa href = " h t t p : //external_siteO4">External Site 4</ax/p>




Banner Goes Here
Content goes here. Content goes here.
Content goes here. Content goes here Content g s here. Content goes here
Content goes here. Content goes here Content g • here. Content goes here.
s

Content g ;s here. Content goes here. Content goi s here. Content goes here
Content goi • here. Content goes here. Content
s :s here Content goes here.
Content goi •shere. Content goes here. Content goi here. Content goes here.

Content go :shere. Content goes here. Content go1 ;s here Content goes here.
Content g :s here. Content goes here Content i| here. Content goes here
Content g< 1 here. Content goes here. Content go> •shere. Content goes here.
3




ШМЕ 11




Рис. 63.2. Для ссылок на боковых панелях не возникает
вопросов о том, какой текст заключать в теги-анкеры,

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



Определение
Внутристрочные ссылки (inline links) — это ссылки, расположенные
в основном тексте на странице.
ГЛАВА 63. Выбор подходящего текста для гиперссылки 345




Many of our Investors have expressed cor*
environment enpiioh. borne recent <:




into question, nanoprn tests at several cyiicorj гас
i alone found 3ir emissions up ^comfortable J описи
:
air pollution is so severe witnm a ten mile radius о
cation rtoTonqef exists'
We at Evtlcorp take txillution very seriously. After all, how evil car a
corporation be satd to be if it does not despoil the world's naturalbeauty for
generations to come?


Ш
Цуе approach to B» problem. In
no., we nave recently revised
toxic emissions at all tvlicorp



We at Evllcorp humbly thank you, our Investors, for your support during
triese turbulent times. Please teel tree to download the ftiii review docum*




Рис. 63.3. Здесь целые абзацы служат гиперссылками. Возникает ли у вас
желание щелкнуть на них. Конечно же нет. У вас нет времени для этого

Почему понятным и кратким? Потому что неясность и многословность противоре-
чат сути Интернета, иными словами, они «тормозят» посетителей. Посетители ва-
шего сайта вынуждены будут внимательно вчитываться в текст, как правило, нес-
колько раз, чтобы понять, куда ведут ссылки. Помните, ваши посетители, возмож-
но, величайшие почитатели печатного слова после Стивена Кинга (Stephen King),
но они не читают текст в Интернете. Они скользят. Они сканируют. Они надеются
найти нужную информацию и попросту не смогут это сделать, если будут вникать
во все подряд.
Итак, как сделать ссылку понятной и краткой? Ключ к решению этой задачи — фор-
мирование текста ссылки из контекста. Это означает, что если посетители вашего
сайта не читают какой-либо соседний текст (что вероятнее всего), они по-прежнему
должны иметь возможность понять, куда ведут ссылки.
Возьмем рисунок 63.4. Текст ссылки стал более понятным, и он сообщает о том, ка-
кие сведения следует ожидать на другом конце ссылки, и при этом не требуется чи-
тать весь абзац. Но текст ссылки все еще слишком многословен. Слишком много
текста бросается в глаза со страницы. По-прежнему необходимо читать текст боль-
шого объема.
Дизайн Web-страницы на рисунке 63.5 стал еще лучше. Ссылки достаточно кратки и
они сообщают, куда по ним можно попасть. Даже если не читать соседний текст, яс-
но, что первая ссылка ведет к информации по каким-то исследованиям. Очевидно,
что вторая ссылка указывает на сведения о собственном исследовании. Понятно, что
по третьей ссылке выполняется переход к сведениям о пятилетних оценках, и не воз-
никает сомнений, что последняя ссылка направляет к краткому обзору документа. •
Строим Web-сайты
346




Many of our investors nave expressed concern that we are not polluting the %
environment enough. Some recent evidence suggests that world pollution
Levels are decreasing overall. Air pollution seems especially at risk. Two
now indicate trgtjoxtc emissions into i

internal study of the situation calls many of these assertions
question. Random tests at several Evilcorp faculties in trie ThTrcTWorld
. Random tests at several Evilcorp faculties in trie ThTrcTWorld
e found air emissions up a comfortable 3 billion p percent, while domestic
p
di f Eil
pollution is so severe within a ten-mite radius of some Evilcorp plants that
ennial vegetation no longer exists.
We at Evittorp take pollution very seriously- After all, how evil cart a
corporation be said to be if it does not despoil the world's natural beauty for
generations to come?
That is why we have decided to take s proactive approach to the problem. In
the event that air polluti i i f r t акт i
да d to




We at Evilcorp humbly thank you, our investors, for your support during
these turbulent times. Please teel dee to download the full review document




Puc. 63.4. Ссылки стали лучше, более сфокусированными.
Но текст ссьиюк по-прежнему слишком многословен




Many of our investors have expressed concern that we are not polluting the
environment enough. Some recent evidence suggests that world pollution
levels are decreasing overall. Air pollution seems especially at risk. Two
highly publicized studies now indicate that toxic emissions into the
atmosphere are dowTTby as much as 0.003%.
However, our internal study cf the situation calls many of these assertions
into question, Random tests at several Evltcorp facilities in the Thltd World
alone found air emissions up a comfortable 3 billion percent, while domest
air pollution is so severe within a ten-mile radius of some Evilcorp plants
perennial vegetation no longer exists.
We at Evilcorp take pollution very seriously. After all, how evil can a
corporation be said to be if it does not despoil the world's natural beauty I
. • • m>is to come*
That is why we have decided to take a proactive approach to the problem,
the event that air pollution Is in fact decreasing, we have recently revised
our five-year estimates, pledging to increase toxic emissions at all Evilcorp
f» ,iii..4 Ъу another seventeen billion percent. Such measures should
address any inadvertent environmental protections that may have slipped
our notice.
We j t Evilcorp Lumbly thank /ou, ош investors, foi youi support dunng
these turbulent times. Please fee! free to download the full review docume




Puc. 63.5. Ссылки стали еще лучше. Они кратки и сообщают посетителю,
к каким сведениям можно перейти, следуя по ссылкам
Обратите внимание, что текст первой ссылки не должен растолковывать, какие виды
исследований присутствуют на связанной странице. Ваши пользователи могут быть
нетерпеливыми, но они неглупые люди. Им уже известно, что они находятся на стра-
нице «Pollution» (загрязнение окружающей среды). Поставьте себя на их место. Если
ГЛАВА 63. Выбор подходящего текста для гиперссылки 347

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


Часто задаваемые вопросы
А как насчет знаков препинания? Являются ли они частью текста
гиперссылки?
Текст внутристрочной ссылки обычно не включает начальные и конеч-
ные знаки препинания такие, как круглые скобки, точки или запятые.
Этот общий стиль полностью противоположен правилам печатных из-
даний, где выделенные слова и фразы, как правило, включают на-
чальные и конечные знаки препинания.


Обратите также внимание, что вторая ссылка читается как «internal study» (собствен-
ное исследование), тогда как первая ссылка — «studies» (исследования).
С точки зрения краткости, можно было бы предположить, что во второй ссылке следо-
вало бы опустить слово «internal» и оставить только «study». В некоторых случаях вы,
возможно, были бы нравы. Но здесь слово «study» слишком похоже на слово «studies»
первой ссылки. Фраза «internal study» является достаточно краткой и резко контрасти-
рует с первой ссылкой, помогая различать эти две ссылки. В свою очередь, посетители
ожидают, что ссылки ведут на разные страницы, что они и делают. Слова «studies» и
«study» не так уж сильно различаются между собой, поэтому некоторые посетители мо-
гут предположить, что они указывают на одну и ту же страницу.
Наконец, в последней ссылке не должно употребляться слово «download» (загрузка),
которое может ожидаться некоторыми. Почему нет? Потому что download (загрузка)
не имеет смысла, если исходить из контекста. Гиперссылка на странице «Pollution»
(загрязнение окружающей среды), включающая download (загрузку), ни о чем не гово-
рит, за исключением того, что при щелчке на ссылке будет что-то загружаться, веро-
ятно, связанное с загрязнением окружающей среды. Но гиперссылка на странице
«Pollution» (загрязнение окружающей среды), состоящая из фразы «review document»,
позволяет ясно представить, чего следует ожидать: краткого обзора документа, под-
готовленного, по-видимому, компанией Evilcorp, о случаях загрязнения.
И в заключение этой главы рассмотрим один более чем уместный вопрос: как насчет
использования сверхпопулярной ссылки «Click Here» (Щелкните здесь)? Дизайн
Web-страницы, показанной на рисунке 63.6, предоставляет четыре варианта этой
непревзойденной классики, и не один из них не является хорошо разработанной ги-
перссылкой. Все ссылки за исключением первой являются краткими, но понятны ли
они? Имеют ли они смысл, если исходить из контекста?
Есть один только способ проверить это: очень бегло просмотреть страницу. Сообща-
ют ли ссылки, куда они ведут? Ясно ли из их текста, какие сведения следует ожидать
на другом конце ссылки? Наиболее удачной является последняя ссылка, которая
обещает information (информацию), но этот термин настолько широк, что практи-
чески бесполезен.
Ссылки «Click Here» (Щелкните здесь) читаются как команды. Они ничего не сооб-
щают посетителям о том, что находится на связанной странице. Вместо этого они
348 Строим Web-сайты

указывают посетителям, что надо делать. Но посетители уже знают, как работа > '
гиперссылки. И если они не знают, они смогут догадаться. В конце концов, кто нау-
чил вас, как надо щелкать?

Э 6306.fmg® 100%




lany of our investors have expressed concern that we are not polluting the
nvironment enough. Some recent evidence suggests that world pollution
•veis are decreasing overall. Air pollution seems especially at risk. Two
highly publicized studies now indicate that toxic emissions Into the
atmosphere are down by as iruch as 0.003%. Click here for more

However, our internal study of the situation calls many of these assertions
into question. Random tests at several Evllcorp facilities in the Third World
alone found air emissions up a comfortable 3 billion percent, while domestic
ait pollution Is so severe within a ten-mile radius of some Evilcorp plants that
perennial vegetation no kjnger exists. Ciick here for more information.
We at EvHcorp take pollution very seriously. After all, how evil can a
corporation be said to be if it cioes not despoil the world's natural beauty for '
generations to come?
That is why we have decided to take a proactive approach to the problem, in
the event that air pollution is in fact decreasing, we have recently revised
our five-year estimates, piedg ng to increase toxic emissions at all Evlkorp
facilities by another seventeer billion percent, Such measures should
address any inadvertent environmental protections that may have slipped
* mation.
our notice. Ctick here for r informal
We at Evilcofp humbly thank you, our investors, for your support during
;
these turbulent times. Please ee! free to download the fijtt review document.
Click here for more information




Рис. 63.6. He важно, что представлено несколько вариантов
популярной ссылки «Click Here » (щелкните здесь), она здесь не работает.
Эта ссылка не несет никакого смысла, если исходить из контекста

Посетители вашего сайта знают, где щелкать. Им уже известно, как щелкать. От вас же
они хотят узнать, почему надо щелкать, а об этом как раз ссылка «Click Here» (Щелк-
ните здесь) и не сообщает.
ГЛАВА 6 4 .
Создание Всплывающих подсказок
для гиперссылок
Время от времени, когда вы наводите указатель мыши на изображение, размещенное
на Web-странице, появляется всплывающая подсказка, содержащая дополнительные
сведения об изображении. Вам известно из главы 34, что вы, как дизайнер, полностью
управляете содержанием всплывающей подсказки, поскольку браузер отображает то,
что находится в атрибуте a l t тега img:
<img s r c = " h o r s e . j p g " width="100" height="50" alt="Антикварная ка-
чающаяся лошадка из красного дерева с латунным колокольчиком на
шее " >
Добавление текста в атрибут a l t для изображения помогает сделать его более доступ-
ным для людей с дефектами зрения. Текст описывает содержание изображения, давая
возможность любому, кто слышит текст из атрибута a l t , представить изображение!
не видя его.
Такой же принцип действует для текстовых гиперссылок, особенно для тех, которые
находятся вне блока текста. Зрячие посетители просто обращают внимание на синий
цвет текста ссылки и на подчеркивание, и они знают, что надо делать, не задумываясь
об этом. Но когда вы отделяете список ссылок на боковой панели, строке навигации
или на панели навигации внизу страницы, назначение этих ссылок может быть неяс-
ным для тех, кому недоступны достоинства синего цвета, подчеркивания или положе-
ния ссылок на странице относительно остального содержимого. Поэтому вы улучши-
те доступность своего сайта для разных категорий посетителей, если разъясните точ-
но, что эти ссылки делают.
Тег-анкер не содержит атрибута a l t , но для него есть атрибут t i t l e , который выпол-
няет ту же функцию.


<а href="../index.htm" title="Перейти на начальную страни-
цу ">НОМЕ</а> I
<а href="../products/products.htm" title="Перейти на страницу
npoflyKTbi">PRODUCTS</a> I
<а href="../services/services.htm" title="Перейти на страницу Ус-
nyrn">SERVICES</a> I
<a href="../aboutus/aboutus.htm" title="Перейти на страницу О
Hac">ABOUT US</a> I
Строим Web-сайты
350


Совет
Чтобы сделать всплывающую подсказку максимально доступной, не
ограничивайтесь простым повторением текста ссылки. Это противо-
речит назначению подсказки. Лучше сообщите посетителю, куда ве-
дет ссылка. Другими словами, не указывайте для атрибута title
ссылки значение Home Page (Начальная страница). Лучшим вариан-
том будет Go to home page (Переход на начальную страницу).


<< Пред. стр.

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

ОГЛАВЛЕНИЕ

След. стр. >>