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

Полный список статей / Оформление ссылок / Версия для печати / translit / абракадабра :-)

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

Внешние ссылки

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

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

$link_str = preg_replace (
'#<a(.+?)href=["|']http://(.+?)["|'](.+?)>(.+?)</a>#is',
"<a href="http://\2" class="outsite" \1 \3>\4</a>", $link_str);

Недостаток этого способа в том, то что он работает на стороне сервера, но я вижу его наиболее
оптимальным.

Добавление к ссылке иконки
Здесь реализовать этот прием можно одним или сразу двумя способами: также регулярными выражениями (просто добавив ко второй части функции код-изоображения) и с помощью JavaScript. Я использую jQuery, так что приведу пример на нем. Предварительно проведем наши ссылки через регулярное выражение и зададим им класс outsite, дальше используем jQuery:

$(".outsite").append("<img src='arrow.gif' />");

Результат:
Если Вы считаете нужным, можно добавить target="_blank".

Внутренние ссылки

Я очень мало видел сайтов, на которых как-либо можно опознать внутренние ссылки. А ведь это упущение часто вводит в затруднение, или пользователь просто пропускает эти ссылки. Опять же я существуют два, наиболее оптимальных способа выделить внутренние ссылки.

Подчеркивание штрихом
За примером далеко ходить не пришлось — на сайте студии Артемия Лебедева давно так делают. Действительно, способ максимально прост и понятен, тем более, что , подчеркнутая штрихом, — редкость.

Иконка
Иногда это бывает просто необходимо :)

habrahabr.ru/blog/ui_design_and_usability/39028.html