В этом разделе мы поэтапно расскажем, как делался сайт "Созвездие Близнецов"


НазадСодержаниеВперёд

Урок 12. Что делать, чтобы ссылки на странице были разной конфигурации



Добавить про то, если ссылки поставить только на одну страницу одного вида, как у Аллочки на "мы"

Допустим, вы хотите, чтобы в центральной части вашей страницы ссылки были более крупным шрифтом и выделялись одним цветом, а в боковых модулях ссылки были более мелким шрифтом и выделялись другим цветом. Например, на Главной странице нашего сайта ( Главная страница сайта "Литература и жизнь" ) ссылки в средней части - большого размера, а ссылки в боковых колонках - меньшего размера.
Для этого вам нужно задать другой стиль ссылок. Это очень просто делается с помощью стиля CSS.
1. Для начала вы задаёте название новым ссылкам, например "ro". И в вашем документе html, между тегами <head> </head> прописываете стиль для новых ссылок следующим образом:

Напоминаю вам, что:
a.link - означает неактивную ссылку
a.visited - означает посещённую ссылку
a.active - означает ссылку, на которую вы нажали
a.hover - означает ссылку, на которую вы только навели курсор мыши

<style type="text/css">
a.ro:link { text-decoration: none; font-size: 8pt; color: #1503fc;}
a.ro:visited { text-decoration: none; font-size: 8pt; color: #1503fc;}
a.ro:active { text-decoration: none; font-size: 8pt; color: #1503fc;}
a.ro:hover { text-decoration: none; font-size: 8pt; color: #fc0315;}
</style>

Значения text-decoration:
- text-decoration: none; - означает, что мы задаём ссылку без подчёркивания.
- text-decoration: underline; - означает, что ссылка будет подчёркнутая.
- text-decoration: underline overline; - подчёркнутая и надчёркнутая.

Цвет можно задавать словами. Пример: color: red;

Примечание: если задаёте цвет ссылки словами (green, red, blue и пр.) - то знак # не ставится.

Примечание: значения для ссылок вы задаёте такие, какие вам нужно.

2. Далее, в том месте документа html, в который вы будете ставить ссылки (например, в правый модуль) вы вписываете ссылку вместе с заданным в CSS классом:

<a class="ro" href="http://dugward.ru/" target="_blank"> Работающая ссылка другого размера и цвета </a>

На место моей ссылки "http://dugward.ru/" вы поставите ту ссылку, которая вам нужна, а на место надписи "Работающая ссылка другого размера и цвета" вы впишете нужную вам надпись. Теперь я вставлю стиль CSS для новой ссылки и две ссылки другого размера и цвета в правый модуль. Это будет выглядеть так:

<html>
<head>
<LINK REL=STYLESHEET TYPE="text/css" HREF="mystile.css">
<style type="text/css">
.p1
{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-indent: 1.5em;
text-align: justify;
}
</style>

<style type="text/css">
a.ro:link { text-decoration: none; font-size: 8pt; color: #1503fc;}
a.ro:visited { text-decoration: none; font-size: 8pt; color: #1503fc;}
a.ro:active { text-decoration: none; font-size: 8pt; color: #1503fc;}
a.ro:hover { text-decoration: none; font-size: 8pt; color: #fc0315;}
</style>


<title> Наша первая страница </title>
</head>
<body bgcolor="#c0c0c0" background="f3.gif">

<table width="100%" cellspacing="0", cellpadding="0" border="3" VALIGN=top>
<td align="left">
<div id="logo"> </div>
</td>
<td WIDTH=200px>

<table width="100%" border="3" cellspacing="0", cellpadding="0" VALIGN=top>
<td>

<table width="100%" bgcolor=#e5e5e7 border="0">
<tr>
<td align="center" WIDTH=19px> <a href="http://dugward.ru/Sod.html"> <img src="pa1.jpg" border="0"> </a> </td>
<td align="left" VALIGN=top> <a href="http://dugward.ru/Sod.html"> Читать книгу </a> </td>
</tr>
<tr>
<td align="center" WIDTH=19px> <a href="http://septemberfox.ucoz.ru/publ/"> <img src="pa1.jpg" border="0"> </a> </td>
<td align="left" VALIGN=top> <a href="http://septemberfox.ucoz.ru/publ/"> Статьи </a>
</td>
</tr>
</table>
</td> </table>

</td>
</table>

<table width="100%" cellspacing="0", cellpadding="0" border="0">
<td WIDTH=200px VALIGN=top>

<table width="100%" cellspacing="0", cellpadding="0" border="3" VALIGN=top>
<td>

<table width="100%" bgcolor=#e5e5e7 border="0">
<tr>
<td align="center" WIDTH=19px> <a href="http://forum.dugward.ru"> <img src="pa1.jpg" border="0"> </a> </td>
<td align="left" VALIGN=top> <a href="http://forum.dugward.ru"> Форум </a> </td>
</tr>
<tr>
<td align="center" WIDTH=19px> <a href="http://lezione.dugward.ru"> <img src="pa1.jpg" border="0"> </a> </td>
<td align="left" VALIGN=top> <a href="http://lezione.dugward.ru"> Как мы делали этот сайт </a>
</td>
</tr>
</table>
</td> </table>

</td>

<td>
<table width="100%" body bgcolor=#e5e5e7 border="3"> <td align="center">

<table width="95%" border="0" VALIGN=top>
<td align="center">
<h1> Заголовок 1 </h1>
<h2> Заголовок 2 </h2>
<h3> Заголовок 3 </h3>
<h4> Заголовок 4 </h4>
<p class="nev"> Текст зелёного цвета, выровненный по ширине, с шрифтом 8pt </p>
<p class="p1">
Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. </p>
<p class="p1">
Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине.
</p>
<a href="http://dugward.ru/index.html" target="_blank"> Главная страница </a>
<a href=http://forum.dugward.ru/ target="_blank"> Форум сайта "Созвездие Близнецов" </a>
</td> </table>
</td> </table>
</td>
<td WIDTH=200px VALIGN=top>
<table width="100%" cellspacing="0" cellpadding="0" body bgcolor=#e5e5e7 border="2">
<td align="center" VALIGN=top>
<table width="95%" VALIGN=top>
<td align="center" VALIGN=top>

<a class="ro" href="http://dugward.ru/" target="_blank"> Главная страница сайта "Литература и жизнь" </a> <br>
<a class="ro" href="http://palmernw.ru/" target="_blank"> Сайт "Монастыри и храмы Северо-запада" </a>

</td> </table>
</td> </table>


</td>
</table>

<table width="100%" cellspacing="0" cellpadding="0" border="3">
<td align="center"> <p class="p1">
Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. </p>
<br>
А здесь вы поставите свои баннеры, если захотите
</td>
</table>

</body>
</html>


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

Теперь поставим готовый код на страницу - и получится вот что:

Наша первая страница с заголовками и ссылками двух разных видов, прописанными в стилях css

Как видите, в левом боковом модуле у нас получились ссылки другого цвета и размера, по сравнению со всеми остальными.

3. Если вы хотите, чтобы у вас были разные ссылки на нескольких страницах, то рентабельнее прописать параметры новых ссылок в документа CSS. Для этого вы открываете ваш документ CSS и в самом документе, к примеру после обычных ссылок, ставите и другой класс ссылок. Весь документ CSS будет выглядеть так:

BODY
{margin:0; padding:0; background:url('f3.gif ');}

div#logo { width:599;height:98px;background:url('http://dugward.ru/LM311.jpg'); top left no-repeat;}

P {color:#000000; text-align:justify; font-size:14pt;}
P.nev {color:#03fc15; text-align:justify; font-size:18pt;}
H1 {color:#000000; text-align:center; font-style:bold; font-size:20pt;}
H2 {color:#000000; text-align:center; font-style:italic; font-size:20pt;}
H3 {color:#000000; text-align:right; font-style:italic; font-size:12pt;}
H4 {color:#000000; text-align:center; font-family:Arial; font-style:italic; font-size:20pt;}

A:link {font-family: Arial; font-size: 13pt; COLOR: #090f1d;}
A:visited {font-family: Arial; Caption; font-size: 13pt; COLOR: #203b6a;}
A:active {font-family: Arial; Caption; font-style:italic; font-size: 13pt; COLOR: #0f233c;}
A:hover {font-family: Arial; font-size: 13pt; COLOR: #a0707e;}

a.ro:link { text-decoration: none; font-size: 8pt; COLOR: #1503fc;}
a.ro:visited { text-decoration: none; font-size: 8pt; COLOR: #1503fc;}
a.ro:active { text-decoration: none; font-size: 8pt; COLOR: #1503fc;}
a.ro:hover { text-decoration: none; font-size: 8pt; COLOR: #fc0315;}



Красным цветом я обозначила фрагмент, который вы добавляете для задания стиля новых ссылок. Теперь, если вы задали класс ссылок в документе CSS, вы уже в документах html класс для ссылок другой конфигурации не задаёте. Сами же ссылки другого класса в документах html при этом прописываются так же, как я показывала вам выше, в пункте 2:

<a class="ro" href="http://dugward.ru/" target="_blank"> Главная страница сайта "Литература и жизнь" </a> <br>
<a class="ro" href="http://palmernw.ru/" target="_blank"> Сайт "Монастыри и храмы Северо-запада" </a>

Желаю удачи!

Примечание: Помните, что классы рисунков и ссылок обозначаются только словами, а не цифрами, как в случае с заголовками текста (H1, H2, H3). Нужно писать наименование класса прописываемой в стиль CSS ссылки: "ro", или "moi", или ещё как-то, как пожелаете, а не "1", "2", или "3".

Урок окончен.


Перейти к Уроку 13


© М.В. Гуминенко. 2008 г.
По вопросам использования материалов сайта обращаться по адресу: Kippari2007@rambler.ru



Навигация по урокам

Работа с хостингом

Регистрация на Narod.ru

Регистрация на платном хостинге

Переход с одного платного хостинга на другой


Вопросы по таблицам

Таблица как основа для страницы сайта: табличные теги "width", "border"

Таблица как модуль для ссылок: ячейки и строки ("td" и "tr"), значения атрибута "align"

Атрибут "VALIGN" и его значения. Атрибуты "cellpadding" и "cellspacing"

Сложные таблицы. Атрибуты атрибуты "colspan" и "rowspan"


Форматирование текста

Выравнивание текста (атрибут "align"). Имя, цвет, размер шрифта (font: family, face, color, size). Абзац ("p"). Как задать отступ красной строки (немного о стиле CSS)

Как прописать шрифты и заголовки в стилях CSS

Амперсанды. Текстовые теги. Специфические символы


Делаем ссылки

Как написать код ссылки

Как задать внешний вид ссылки (шрифт, цвет, размер и пр.) в стилях CSS

Что нужно сделать, чтобы на одной странице они были разного цвета, шрифта, размера и пр. (в CSS)

Внутристраничные ссылки или закладки (якоря)

Ссылка "Наверх"


Картинки (логотипы, баннеры, фон)

Загрузка изображений на Radikal.ru

Картинки в тексте

Как сделать работающую кнопку (баннер)

Как установить логотип, задать цвет фона (таблицы, страницы сайта), установить фоновое изображение. Атрибуты bgcolor и background

Как установить логотип через документ стилей CSS

Масштабирующиеся логотипы

Масштабирующиеся рамки в обрамлении таблицы (страницы)

Размещение картинки на странице с текстом

Неподвижный фон


Вопросы по JavaScript и динамическому html

Скрытый текст с помощью JavaScript и динамического html

Бегущая строка

Простейшие фотоальбомы

Сменяющийся логотип


Несколько советов по установке форумного движка SMF на платный хостинг