Установка логотипа через 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:

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

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

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

Add a few useful things that can help you simplify your life, working on the site. First, we solve the problem by setting the logo document styles CSS, which we have prescribed, speaking of the references, titles and text.

To set the logo by CSS, but do not install it on every page manually, you need to register this same logo in our document CSS. Doing it this way:

Open your CSS document and enter the following line in it:

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

— «Div» -, as you already know, boxed tag, which separates from the adjacent element;

— The word «logo» — is the name of our own image logo.

— Attributes «width: 599; height: 98px;» — That, as you already know, width and height of the image (in this case, the width and height of the logo, which we have established in the relevant class);

— «Background: url (‘http://dugward.ru/LM311.jpg’);» — The address of the image that is written in this way (no variations are not allowed, single quotes must be in place);

— «Top left no-repeat;» — The picture will be on the left, do not reproduce.

You can set the parameters for the image and set it on the right or in the middle. So how to you.

Further, in a html-code of your page, the place where you intend to install the image, the image instead of the address you enter a tag, address, to your document CSS:

If we put in our document this fragment, the code page will look like this:

<html>

<head>

.p1

{

margin: 0px 0px 0px 0px;

padding: 0px 0px 0px 0px;

text-indent: 1.5em;

text-align: justify;

}

</ style>

<title> Our first page </ title>

</ head>

</ td>

<td>

<tr>

</ tr>

<tr>

<td align = «left» VALIGN = top> <a href=»http://septemberfox.ucoz.ru/publ/»> Article </a>

</ td>

</ tr>

</ table>

</ td> </ table>

</ td>

</ table>

<td>

<tr>

<td align = «left» VALIGN = top> <a href=»http://forum.dugward.ru»> Forum </a> </ td>

</ tr>

<tr>

</ td>

</ tr>

</ table>

</ td> </ table>

</ td>

<td>

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

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>

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://forum.dugward.ru/ target=»_blank»> forum site «Gemini» </a>

</ td> </ table>

</ td>

<td WIDTH = 200px VALIGN = top> <br> Banners and ads </ td>

</ table>

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>

Red struck-I marked the fragment that you remove and put in its place a new piece, which is highlighted in blue.

In finished form, nothing will change, your logo will be there as well. where it supposed to be on the page.

Thus, you can insert images anywhere on the page of your site. You specify the name of the picture and registers it in the document styles CSS, and then insert the corresponding fragment in the page. For example, you put a picture titled «sw». In a CSS document would look like this:

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

The document in the desired spot on the page you put: <div id = «sw»> </ div> — and the picture will fall to the place of the page, in which you need.

Why do it? What difference stvit page <img src = «logo.jpg» border = «0»> or <div id = «logo»> </ div>?

But imagine: you have created in Photoshop a new, more beautiful logo and want to put it on the site. And you online 20, 40, 80 or more pages. Change the logo by hand on each one hundred pages !!! At the same will leave plenty of time!

And so — you only need to change the image in CSS and it automatically changes on all pages.

Note: Remember that CSS styles do not allow inaccuracies document style is much more «whimsical» than html. So try not to allow any of their own interpretations, and if you do not matter, look carefully, you have not missed somewhere unmatched quote, or put in place unpaired quotes — steam.

Just remember that the drawings are denoted by classes only words, not numbers, as is the case with headlines. It is necessary to write the name of a class prescribed to CSS figure «logo» or «sw», or «net», rather than «1», «2» or «3».

Post Views: 420

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

Один комментарий к “Установка логотипа через CSS”

Добавить комментарий Отменить ответ

Вам также может понравиться

Скрытые ссылки в DLE

Закрыть ссылку от индексации

Php на dle

Один комментарий к “Установка логотипа через CSS”

Добавить комментарий Отменить ответ