Страницы разной конфигурации

Что делать, чтобы ссылки на странице были разной конфигурации
Добавить про то, если ссылки поставить только на одну страницу одного вида, как у Аллочки на «мы»

Допустим, вы хотите, чтобы в центральной части вашей страницы ссылки были более крупным шрифтом и выделялись одним цветом, а в боковых модулях ссылки были более мелким шрифтом и выделялись другим цветом. Например, на Главной странице нашего сайта ( Главная страница сайта «Литература и жизнь» ссылки в средней части — большого размера, а ссылки в боковых колонках — меньшего размера.
Для этого вам нужно задать другой стиль ссылок. Это очень просто делается с помощью стиля 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».

What links on the page to have a different configuration

 

Add about that, if only to put the links on a single page of one species, like Alia to «we»

 

Let’s say you want in the middle of your page links are in a larger font and a color allocated, and in the side modules were links in a smaller font, and stood in a different color. For example, on our home page (main page «Literature and Life» link in the middle — large size, and links in the sidebar — the smaller size.

To do this, you need to specify a different style of references. It is very easy to do using the style of CSS.

1. First you specify the name of the new links, such as «ro». And in your document html, between the tags <head> </ head> prescribe style for new links as follows:

 

I remind you that:

a.link — indicates an inactive link

a.visited — is visited links

a.active — is the link you clicked

a.hover — is a reference to which you just have put the mouse cursor

 

<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>

 

Values text-decoration:

— Text-decoration: none; — It means that we ask a link without underlining.

— Text-decoration: underline; — It means that the link will be accentuated.

— Text-decoration: underline overline; — Accentuated and nadchёrknutaya.

 

The color can be defined in words. Example: color: red;

 

Note: If you are asking the link color words (green, red, blue, etc.) — The # sign is not put.

 

Note: The values for the links you ask are what you need.

 

2. Next, in the document html, which you will put links (such as a right module), you enter a link with the class specified in your CSS:

 

<a class=»ro» href=»http://dugward.ru/» target=»_blank»> clickable link different size and color </a>

 

In place of my exile «http://dugward.ru/» you put the link that you need, and place the inscription «clickable link different size and color,» you will enter the desired label. Now I’ll put in a CSS style for new links and two links of a different size and color in the right module. It will look like this:

 

<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> Our first page </ 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»> Read the book </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/»> Article </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»> Forum </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»> As we did this site </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> Title 1 </ h1>

<h2> Heading 2 </ h2>

<h3> Title 3 </ h3>

<h4> Heading 4 </ h4>

<p class = «nev»> text green lined in width, with the type 8pt </ p>

<p class = «p1»>

Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. </ p>

<p class = «p1″>

Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width.

</ p>

<a href=»http://dugward.ru/index.html» target=»_blank»> Home </a>

<a href=http://forum.dugward.ru/ target=»_blank»> forum site «Gemini» </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»> Main page «Literature and Life» </a> <br>

<a class=»ro» href=»http://palmernw.ru/» target=»_blank»> Site «Monasteries and temples of the Northwest» </a>

</ td> </ table>

</ td> </ table>

 

</ td>

</ table>

 

<table width = «100%» cellspacing = «0» cellpadding = «0» border = «3»>

<td align = «center»> <p class = «p1″>

Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. </ p>

<br>

Here you put their banners, if you wish

</ td>

</ table>

 

</ body>

</ html>

I marked in green insert CSS style for new links.

Blue color added by me, I outlined the module is exactly the same as standing to the left on the page to our links look more clearly.

I marked in red fragment with a given class of links and link themselves.

 

Now ready to put the code on the page — and you get this:

 

Our first page with headlines and links two different types of prescribed in the css styles

 

As you can see in the left side module, we get a reference of a different color and size, compared with the others.

 

3. If you would like to have had different links to several pages, the cost-effective options to register new links in the document CSS. To do this, you open your CSS document and the document itself, for example after the usual references, put another class references. All the CSS document will look like this:

 

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;}

I marked in red segment you add style to set new references. Now, if you asked a class references in the document CSS, you are already in html documents to reference other class do not specify the configuration. Themselves references another class in html documents with the prescribed just like I showed you above, in paragraph 2:

 

<a class=»ro» href=»http://dugward.ru/» target=»_blank»> Main page «Literature and Life» </a> <br>

<a class=»ro» href=»http://palmernw.ru/» target=»_blank»> Site «Monasteries and temples of the Northwest» </a>

 

Good luck!

 

Note: Remember that the classes of figures and references are identified only by words, not numbers, as in the case of text headings (H1, H2, H3). It is necessary to write the name of a class prescribed in CSS style links: «ro», or «moi», or still somehow as you want, instead of «1», «2» or «3».