Еще раз о правилах хорошего тона
Я уже поднимала вопрос о правилах хорошего тона по отношению к гиперссылкам. Но раз нынче мы говорим об оформлении, подойдем к вопросу культуры гиперссылок с этой стороны. За годы существования такой вид, как Интернет-Пользователь выработал ряд условных рефлексов, в том числе и на ссылки. Пытаться привить ему новые рефлексы и правила - дело неблагодарное и может привести к поголовной эмиграции (выселению) данного вида с вашего сайта. (Заботтесь о Пользователях!)
Каковы его наши рефлексы в отношении гиперссылок? Они должны быть выделены. Цветом, подчеркиванием, картинками. С последним не переборщите. Жирный шрифт? - скорее всего нет, все-таки у него несколько другие задачи. Но цвет и подчеркивание (их комбинация или отдельное применение) - это то, что однозначно в нашем уже подсознании определяет ссылку и, буквально, требует клика. Именно по этой причине настоятельно не рекомендуется использование подчеркивания вне ссылок - это вводит пользователей в заблуждение, а затем начинает раздражать.
"Был или не был" и другие категории ссылок
Давайте, начнем с ситуации. Вот читаете вы текст, к примеру такой:
Есть в нашем сообществе совершенно особенный тип сайтов. Они либо специализируются на выпуске статей в формате журналов, либо выпускают такие веб-журналы помимо основных статей. Вот некоторые из них: Журнал "Клан Мирчар", Тайны Мирчара, Mirchar Stars: модный журнал для стильных чаров.
Вот тут и видно, на каких сайтах вы успели побывать, а на каких еще не доводилось. Удобно? - Удобно. Спасибо админу, что позаботился. А делается это исключительно вручную.
Откроем файл css-стилей (нам ведь нужно задать правило оформления для всех, ну, или большинства ссылок на сайте) и запишем там следующее (ну, это пример, сейчас объясню, что можно менять, а что нет):
a:link {color: #0000EE; text-decoration: underline;}
a:visited {color: #551A8B; text-decoration: underline;}Первая a обозначает, что правило задается для тега ссылок. :link - специальный определитель (псевдо-класс), который определяет ссылку, которую еще не нажимали и никогда не были. :visited - аналогичный псевдо-класс, который определяет ссылку, которая уже была когда-то открыта (на основании журнала браузера). Свойство color определяет цвет текста ссылки в hex-формате - выбирайте, какой вам по дизайну. Свойство text-decoration - добавляет тексту оформление, в данном случае, подчеркивание. Подчеркивание можно убрать, задав для text-decoration: none, а некоторые оригиналы любят для посещенных ссылок задавать text-decoration: line-through зачеркнутый текст. Эти два свойства наиболее часто задаются для оформления ссылок. Но ссылки бывают не только "visited", они еще могут становиться "hover". Это такое состояние ссылки, когда над ней находится курсор мыши. (Кстати, это свойство можно прописывать любому элементу веб-странице, а не только ссылке).
a:hover {color: #0000EE; text-decoration: none;}Посленее общепринятое состояние ссылки "active".
a:active {color: #FF0000; text-decoration: none;}Долго не могла представить, что это такое, ведь активная ссылка - та, по которой кликнули. А раз кликнули, то уже загружается следующая страница, как же увидеть эту "активность"? В поисках ответа на этот вопрос я забрела в спецификацию W3С, которая регламентирует все правила css и html:
Псевдо-класс active применяется если элемент активирован пользователем (всегда убивала логичность подобных заявлений). Например, между моментами нажатия и отпускания кнопки мыши.
Между прочим, согласно правилу каскадности (ведь css - это таблица каскадных стилей), записывать свойства ссылок нужно именно в таком порядке: link, visited, hover, active. В противном случае последнее свойство перекроет предыдущее и желаемого эффекта вы не получите.
Цветик-семицветик
Как лучше распределить цвета между четырьмя вариантами? Не стоит устраивать "радугу", пусть это будут оттенки одного цвета. Даже в цветах для гиперссылок по умолчанию (когда никаких правил не задано) используется всего три цвета: синий (link и hover), фиолетовый (visites) и красный (active). И в каких случаях применять подчеркивание.
На самом деле тут стоит сказать о нескольких группах ссылок, несущих разную функциональную нагрузку.
- ссылки в основном тексте. Желательно использовать подчеркивание, сделать visited отличным от других. Если в качестве анкора используется картинка, есть смысл оставить рамку, которая задается для таких картинок по умолчанию. Цвет рамки определяется цветами ссылки. Есть те, кому подчеркивание картинок (наследство от ссылок) не нравится. Убирается это просто:
a img {text-decoration: none;}
//применяется ко всем тегам img, так или иначе находящихся внутри a- ссылки в меню. Желательно не использовать подчеркивание, а link и visited делать одинаковым. Пункты меню, как правило, ведут не на конечные страницы, а на разделы, которые регулярно меняются. Поэтому, на мой взгляд, не корректно акцентировать внимание, открывалась ли эта страница. Для картинок-ссылок, являющихся частью дизайна (логотипы, шапки, пиктограммы, картинки-кнопки) необходимо убрать рамку:
a img {border: 0px;}А еще для ссылок меню актуальны пиктограммы перед текстом.
И картинок побольше!
Гиперссылки, как и другие элементы веб-страницы, могут иметь фон заданного цвета или даже картинки. Здесь, как и в любом другом аспекте дизайна, главное не перегибать палку. Нет ничего ужасней, когда под текстом все мерцает, сияет и переливается так, что букв не видно - не важно, происходит ли это в обычном состоянии (link) или под мышкой (hover). Картинки к ссылкам намного уместней в виде пиктограмм слева от текста.
Картинку перед ссылкой, конечно, можно вставить отдельно, но тогда вы лишите себя возможности использовать hover. К примеру, "подсвечивать" пиктограмму при наведении курсора.
В этом случае, структура ссылки будет выглядеть так:
1 - фоновое, неповторяющееся изображение;
2 - анкор (текст ссылки);
3 - отступ от левого края ссылки (гипотетического прямоугольника, в который вписывается содержание тега <a>), равный ширине картинки + отступ от картинки для удобочтимости.
Вот как будут выглядеть код "по тексту" и правила css в простейшем случае с картинкой:
<a href="#" class="logout">Выход</a> //задаем класс ссылки, чтобы привязать к ней css-стили
<style>
a.logout:link {
background: url('/img/logout1.gif') no-repeat;
padding-left:20px;
} //пиктограмма перед ссылкой
a.logout:hover {
background:url('/img/logout2.gif') no-repeat;
padding-left: 20px;
} //при наведении курсора картинка будет меняться
</style>Свойство background - сложное по своей структуре, в него через пробел можно записать цвет, фоновое изображение, размножение этого изображение и его положение относительно верхнего левого угла блочной модели ссылки (гипотетического прямоугольника, в который вписывается содержание тега <a>).
url('ссылка на фоновую картинку картинку') - адрес записывается именно в кавычках.
no-repeat - указание не размножать изображение.
Свойство padding-left задает отступ слева; считаем, что ширина картинки 16 пикселей + 4 на отступ от картинки.
Если картинка по высоте меньше высоты текста, ее положение можно подогнать с помощью свойства background-position. Если же картинка задумана больше высоты текста, положение текста можно отрегулировать с помощью свойства padding по высоте. Все эти свойства записываются в стиль нашей ссылки.
В заключение хочу сказать, что значения отступов и положения удобно использовать Firebug - он позволит подобрать значения "на лету", без постоянного сохранения css-файла/обновления страницы, сразу увидев результат. Только не забудьте выписать значения, которые вас устроят, а потом сохранить в css - один раз.
Подробности по свойству background
Подробности по свойству padding
Рекомендую: Посещенные ссылки
0
