Оформление ссылок

Начнём с того, что ссылки бывают двух видов: текстовые и графические, и каждый вид требует своих подходов в оформлении.

Если доверить цвет и стиль текстовых ссылок браузеру, то он сделает их синими и подчёркнутыми, что, может быть, хорошо для поисковиков, почтовиков и новостных сайтов, но может напрочь испортить дизайн тематического сайта, менее склонного к белому фону и лаконичности.

Тут есть два варианта цветового и несколько версий стилевого оформления.

Цвет для ссылки можно назначить того же цвета, что и текст. В этом случае, чтобы ссылка не затерялась, обязательно выделите её подчёркиванием, жирным шрифтом или буквами другого шрифта (не стоит использовать все приёмы оформления разом!).

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

Если Вы, как и я, пользуетесь какими-либо HTML-редакторами, у Вас может появиться соблазн задавать цвет ссылки прямо в теле документа (в тэге <body>). Не стоит ему поддаваться. Сделайте это профессионально — добавьте нужный код в соответствующую таблицу стилей. При этом помните о порядке задания стилей: сначала основной стиль ссылки, затем стиль посещённой, выделенной (наведением курсора) и активной ссылок, именно в таком порядке (согласно рекомендациям W3C).

Что касается графических ссылок, то их существует три вида: кнопки, карты-изображения и логотипы (обычно применяющиеся в качестве ссылок на главную страницу). Любую графическую ссылку обязательно надо сопровождать альтернативным описанием (при помощи атрибута alt в тэге <img>), на случай, если по каки-то причинам посетитель загрузит страничку с отключенными изображениями.

Однако в случае с картой-изображением всё немного сложнее. Даже если задать атрибут alt для каждой отдельной активной области, эти пояснения не появляются на месте отключённого рисунка. В этом случае я бы рекомендовала оформить карту-изображение так: в атрибуте alt тэга <img> указать что-нибудь вроде "меню" или "карта", а для каждой активной области указать значение атрибута title, описывающее ссылку. Обязательно укажите размеры для карты-изображения, чтобы, даже не подгружая картинок, экономный посетитель мог воспользоваться навигационным меню.

Чтобы вокруг графической ссылки не появлялось синей рамки при просмотре в некоторых браузерах, обязательно укажите нулевую толщину границы (атрибут border).

Отдельного упоминания стоят ссылки с абстрактными названиями или картинками. Может быть, они и стильно звучат и выглядят, но пользоваться ими очень трудно, и это раздражает. Поэтому для каждой такой ссылки нужно указывать более ясное и подробное описание, пользуясь атрибутом title (вставляется прямо в тэг <a>).

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

[вернуться к меню]

CrazyLilya

Слово о домашней страничке, CrazyLilya

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

Разработка тематической странички, CrazyLilya

Во многих он-лайн учебниках, посвящённых веб-дизайну, Вы найдёте полный или краткий курс HTML, иногда — CSS и JavaScript, очень редко — советы по визуальному дизайну. А вот о том, как на практике организовать свой сайт, говорится очень мало. Эта статья призвана восполнить этот пробел в публикациях, посвящённых веб-дизайну.

Графические элементы сайта, CrazyLilya

Виды графических элементов (т.е. используемых с какой-либо целью картинок) и их правильное оформление

Hosted by uCoz