3. Мелочи дизайна - ссылки

Фокус. Наверное вы замечали, что после перехода на другой сайт по ссылке, или при работе с клавиатурой - ссылка по всей окружности выделяется пунктиром. Это называется фокус. Нет, не как в цирке :) Эта функция служит в основном для удобства. Так как есть люди, которые работают на компьютере с помощью одной клавиатуры. Не будет этого фокуса и они не поймут на какую ссылку сейчас нажмут. Но многих это раздражает. А убрать эту окантовку очень просто.

Что бы убрать рамку вокруг активных ссылок:

a:focus {outline: none;}


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

Открывает все ссылки в новом окне:

<base target="_blank">

Открывает только одну ссылку в новом окне:

target="_blank"

Вставляется прямо в ссылку. Вот ссылка - 2. Мелочи дизайна - ссылки Вот её код:

<a target="_blank" href="http://seozar.ru/sozdanie-raskrutka-sajta/dizajn-sajta/melochi-dizajna/dizajn-ssilki.php">2. Мелочи дизайна - ссылки</a>


Чем больше внешних ссылок ведёт с сайта, тем хуже для сайта. Подробности обсудим позже. Скажу только одно. Если на страничке более десяти внешних ссылок и относительно мало контента - она имеет реальные шансы загреметь в бан у поисковиков. Внешние ссылки, это ссылки ведущие с вашего сайта на другой сайт. Многие ими торгуют, для этого есть биржи. Вот поэтому поисковики их и не любят. Так как же спрятать ссылку от поисковиков? Люди прячут, как могут. Некоторые даже в javascript засовывают. Но по моему гугля их и там нароет. Ответ на вопрос ниже.

Закрыть ссылку от поисковиков:

rel="nofollow"

Вставляется прямо в ссылку. Гугль и Яндекс запрет на индексирование ссылок понимают. Остальные поисковики в принципе до лампочки. Кто то говорит, что Яша (яндекс) не понимает. Всё это ложь и провокация. Я этой закрывашкой уже больше года пользуюсь - всё отлично. Ни кто, ни чего не видит :)


Со ссылками вообще можно делать много чего интересного. Просто выложу, что помню. Возникнут вопросы - задавайте. Если сами что-нибудь знаете - пишите :)

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

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" valign="top" class="s1">Пример: <a target="_blank" href="dizajn-ssilki.php">2. Мелочи дизайна - ссылки</a></td>
</tr>
</table>

Здесь вы подключаете ваш стиль, к таблице, точнее к колонке. Помните, что таблица разбивается на колонки и строки?

.s1 a:hover {
text-decoration: none;
border-bottom: dotted 1px #00C;
}

А вот этот код уже вставляете в таблицу CSS. Можно поставить и прямо на страничке. Я писал об этом в мелочах - 1.


Пунктирный бордюр, подчёркивание ссылки:

Пример: 2. Мелочи дизайна - ссылки

border-bottom: dotted 1px #0000FF;

Выделение ссылок фоном:

Пример: 2. Мелочи дизайна - ссылки

background-image: url(images/ваш фон.jpg);

Тень от ссылок:

Пример: 2. Мелочи дизайна - ссылки

text-shadow: 1px 1px 5px gray;

Тень можно применять и к простому тексту. Конечно много чего не понаделаешь. Так как основной текст в первую очередь должен хорошо читаться. А все прибамбасы, это уже вторая очередь. Но можно например наложить неяркую и широкую тень. Особенно если у вас яркая фоновая картинка. Тогда текст будет наоборот легче читать. В общем смотрите, думайте, решайте :)


Немного отвлекусь от темы, что бы пояснить маленький нюансик. Как вы заметили где то стоит - #0000FF, а где то - gray. Так обозначается цвет. И касается это не только ссылок. А вообще всего, что покрашено :) Абсолютно всё равно, как вы напишите. Просто это цвета разные. Нравится пишите словами, нравится цифрами. У меня на сайте вообще всё вперемешку. Тормозов, или глюков по этому поводу не заметил.

Немного рекламы :)

Copyright, design, ideas © Mihail. При копировании материалов, ссылка на сайт "Seozar.ru" обязательна. Контакты - admin@halych.ru
Тариф «Первый»: 2 сайта, 1 Гб, 2 MySQL, 2 FTP