Урок 11. Установка логотипа через CSS

Добавим несколько полезных вещей, с помощью которых можно облегчить себе жизнь, работая над сайтом. Прежде всего, решим вопрос установки логотипа через документ стилей CSS, который мы уже прописывали, говоря о ссылках, заголовках и тексте.

Для того, чтобы установить логотип через CSS, а не устанавливать его на каждой странице сайта вручную, нужно прописать этот самый логотип в нашем документе CSS. Делаем это так:
Открываем наш документ CSS и вписываем в него такую строчку:
div#logo { width:599; height:98px; background:url('http://dugward.ru/LM311.jpg'); top left no-repeat;}

- "div" -, как вы уже знаете, коробочный тег, который отграничивает элемент от соседних;
- слово "logo" - это собственное наименование нашей картинки логотипа.
- атрибуты "width:599; height:98px;" - это, как вы уже знаете, ширина и высота картинки (в данном случае, ширина и высота логотипа, который мы устанавливали в соответствующем уроке);
- "background:url('http://dugward.ru/LM311.jpg');" - адрес картинки, который записывается именно таким образом (никаких вариаций не допускается, одинарные кавычки должны быть на своих местах);
- "top left no-repeat;" - картинка будет стоять слева, не размножаться.

Вы можете задать свои параметры для изображения и установить его справа, либо по центру. Так, как нужно вам.

Далее, в html-код вашей страницы, в то место, на котором вы намерены установить картинку, вместо адреса картинки вы вписываете такой тег, адресующий к вашему документу CSS:

<div id="logo"> </div>

Если мы разместим в нашем документе этот фрагмент, то код страницы будет выглядеть так:

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

<table width="100%" cellspacing="0", cellpadding="0" border="3" VALIGN=top>
<td align="left">
~~<img src="logo.jpg" border="0">~~
<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> Баннеры <br> и реклама </td>
</table>

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

</body>
</html>

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

Таким образом можно вставлять картинки в любое место страницы вашего сайта. Вы задаёте картинке название и прописываете её в документа стилей CSS, а потом вставляете соответствующий фрагмент в страницу сайта. Например, вы ставите картинку под названием "sw". В документе CSS это будет выглядеть так:

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

В документе в нужном месте страницы вы ставите: <div id="sw"> </div> - и картинка встанет в то место страницы, в которое вам нужно.

Зачем это нужно? Какая разница, ствить на страницу <img src="logo.jpg" border="0"> или <div id="logo"> </div> ?
Но представьте: вы создали в фотошопе новый, более красивый логотип и хотите поставить его на сайт. А у вас на сайте 20, 40, 80 или более страниц. Поменять логотип вручную на каждой из ста страниц!!! На это же уйдёт уйма времени!
А так - вам достаточно поменять картинку в CSS и она автоматически поменяется на всех страницах.

Примечание: Помните, что стили CSS не допускают неточностей, документ стилей гораздо более "капризный", чем html. Поэтому старайтесь не допускать никаких собственных интерпретаций и если у вас что-то не пошло, внимательно посмотрите, не пропустили ли вы где-нибудь непарную кавычку, или поставили вместо непарной кавычки - парную.
Так же помните, что классы рисунков обозначаются только словами, а не цифрами, как в случае с заголовками. Нужно писать наименование класса прописываемого в CSS рисунка "logo" или "sw", или "net", а не "1", "2", или "3".
Урок окончен.

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

Наверх