Фоновое изображение

Вставляем логотип. Цвет фона и фоновое изображение
Для того, чтобы наполнить нашу таблицу содержимым, будем последовательно вставлять картинки, ссылки и текст в ячейки таблиц.
1. Логотип.
Первая таблица, в которой будут стоять логотип и ссылки (её код мы уже писали во втором уроке):

<table width=»100%» border=»1″>
<td>Логотип</td>
<td WIDTH=200px>Ссылки <br> 200 px</td>
</table>
Внимание! Не забывайте важный момент (я хочу о нём напомнить, потому что такая ошибка встречается): одинарные (‘) и двойные («) кавычки в html и прочих языках программирования имеют разное значение. Две одинарные кавычки не заменят одну двойную. В данном случае, во всех кодах, которые я привожу, кавычки должны быть двойные.

1.1. Для начала нам нужна картинка, которую мы станем использовать, как логотип. Эту картинку нужно сделать определённого размера и загрузить либо на Радикал.ру, либо в корневую папку нашего сайта. Лучше в корневую папку, потому что тогда вы не будете зависеть от неполадок на сервисе изображений Радикал.ру, которые иногда случаются.

Загружаем картинку нужного нам размера в корневую папку. Логотип нужно делать с учётом разрешения монитора. Вы должны учитывать, как ваш логотип будет смотреться на мониторах с разным разрешением: не будет ли он растягивать экран при разрешении меньше, чем ваше, не потеряется ли где-то в углу, отделённый от ячейки с ссылками огромным пустым пространством, на мониторе у которого разрешение больше, чем у вас. Учитывая, что мы поставили вторую ячейку таблицы, предназначенную для ссылок — 200 px, 600+200=800рх. При разрешении монитора 800 на 600 рх логотип и ссылки будут располагаться вплотную друг к другу.
Нужно учитывать, что при любом разрешении, какое бы оно ни было у пользователей, на ваших страницах может появиться горизонтальная полоса прокрутки. Это можно счесть ошибкой в дизайне. Горизонтальной полосы прокрутки на странице с качественным дизайном быть НЕ ДОЛЖНО.
Так же нежелательное явление — большой вес логотипа. Чем меньше весит логотип — тем лучше. Ваша страница будет грузиться быстро и пользователи не будут выражать недовольство по поводу потраченного траффика. Если ваш логотип будет весить меньше 15-ти Кb — будет очень хорошо.
Про масштабирующиеся логотипы поговорим отдельно, а сейчас продолжим про обычный логотип.

1.2. Итак, мы загрузили нужную нам картинку в корневую папку нашего сайта, назвав её к примеру «logo».
Далее мы вставляем картинку в соответствующие теги, как мы это делали, вставляя изображение в баннер:
<img src=»logo.jpg» border=»0″>
Красным цветом обозначена картинка. Не забывайте ставить формат, в котором выполнена картинка. Это в данном случае jpg, но может быть картинка, сохранённая в формате gif или каком-либо другом.

1.3. Теперь всю эту ссылку необходимо вставить в HTML-код нашей таблицы, на то место, где у нас написано слово «Логотип». Чтобы логотип встал с выравниванием по левому краю, добавим в ячейку атрибут выравнивания align=»left»

<table width=»100%» border=»1″>
<td align=»left»> <img src=»logo.jpg» border=»0″> </td>
<td WIDTH=200px>Ссылки <br> 200 px</td>
</table>

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

<table width=»100%» border=»1″>
<td align=»left»> <img src=»logo.jpg» border=»0″> </td>
<td WIDTH=200px> Ссылки </td>
</table>

<table width=»100%» border=»1″>
<td WIDTH=200px> Ссылки<br> 200рх</td>
<td> Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. </td>
<td WIDTH=200px> Баннеры <br> и реклама </td>
</table>

<table width=»100%» border=»1″>
<td> Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. <br> Место для рекламных баннеров. </td>
</table>

1.4. Загрузим всю эту конструкцию на нашу страницу. Получится вот что:
Наша первая страница

2. Цвет фона и фоновое изображение (bgcolor и background)

2.1. Для того, чтобы наша страница была определённого цвета, необходимо задать цвет фона. Поскольку цвет прописывается для всей страницы, то есть для её «тела», необходимо прописать атрибут цвета внутрь тега <body>
Цвет фона задаётся атрибутом bgcolor, которому присваивается значение того цвета, какой вам нужен. Например, мы хотим, чтобы фон страницы был светло-серый. Мы находим в таблице цветов, или в фотошопе соответствующий цвет #c0c0c0 — который отвечает именно за светло-серый, и прописываем атрибут с его значением, так же, как мы прописывали значения других атрибутов: bgcolor=»#c0c0c0″. А теперь этот атрибут помещаем внутрь тега <body> . Получится следующее:
<body bgcolor=»#c0c0c0″>
Вставляем данный изменённый тег в нашу страницу и получается вот что:
Наша первая страница, фон серый

2.2. Теперь зададим другое значение — background. Этот атрибут и означает фоновую картинку.
Вставим в фон вот такую картинку:

Я поясню, почему она такая маленькая.
При желании можно поставить фоновым изображением картинку, которая будет занимать весь экран. Но учтите, что это изображение в фоне имеет несколько присущих ему качеств:

Предположим, у нас есть какая-то очень красивая картинка, например какой-нибудь зимний пейзаж. Картинка размером 1024х768. И если на неё смотреть монитора, разрешение которого 1024 на 768 — всё будет выглядеть прекрасно. Но если на наш сайт посмотрит пользователь у которого разрешение монитора 1280х1024, он увидит, что сама картинка отъехала в верхний левый угол, а свободные места снизу и справа от неё заполнились кусками этой же картинки, совершенно не состыкованными с первоначальным изображением. В общем, наш фон окажется на таком разрешении изуродованным.
Если же вдруг у пользователя разрешение монитора меньше, чем 1024х768 он увидит только кусочек вашего фона, точнее, его левый верхний угол.
Нам это не подходит.

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

Третья сложность: на ярком, красочном фоне ничего не возможно прочитать. Буквы будут просто теряться среди ярких красок.
Поэтому пожертвуем пейзажами и картинами и поставим что-нибудь поскромнее, полегче весом, масштабирующееся под любое разрешение монитора и не мешающее читать текст.

Итак, суммируем: вес фоновой картинки прибавляется к общему весу страницы, поэтому не грузите сильно тяжёлые картинки, экономьте трафик.
Фоновое изображение может по каким-то причинам не открываться сразу, особенно если вы захотите загрузить его не на свой сайт, а для экономии места воспользуетесь чьим-нибудь сервисом картинок. К примеру, тем же Радикалом. И если на Радикале произойдёт сбой, ваше изображение может не загрузиться вовсе.
Нужно учитывать так же, что если у вас текст набран чёрными буквами, а вы положили под фоновое изображение чёрный фон — если фоновое изображение не откроется, чёрный текст на чёрном фоне прочитать будет невозможно и гость будет очень удивлён, увидев сплошное чёрное пятно вместо вашей страницы.
Иными словами, подбирая фоновое изображение, вы должны учитывать контрастность текста по отношению к фоновому изображению и фону под ним. Чтобы ваш текст ВСЕГДА был ХОРОШО ЧИТАЕМ!

Для фона я в данном случае взяла очень маленькую картинку, 30 на 28 пикселов, которая весит очень мало, около 51 байта. И вес всей страницы будет считаться только по одной картинке, которая просто размножается в фоне бесчисленное множество раз. Теперь давайте посмотрим, как поставить фоновое изображение.

2.3. Допустим, мы загрузили в нашу папку, где лежат все наши страницы, фоновую картинку и присвоили ей имя «f3.gif» (формат может быть и jpg).
Поскольку фон стоит для всей страницы, то и прописать его нужно в «тело» страницы, то есть всё в тот же <body> . Здесь нам понадобится атрибут «background», который и означает фоновое изображение. Оставим цвет фона на тот случай, чтобы если картинка не открылась, страница имела бы хотя бы цвет фона.
Выглядеть это будет так: <body bgcolor=»#c0c0c0″ background=»f3.gif»>
Наша первая страница, фон серый + фоновая картинка

Фоновое изображение можно прописать не только для всей страницы. Его можно прописать в ячейку таблицы или в какую-то определённую таблицу. Фоновое изображение в отличие от вставленной картинки, всегда масштабируется и поверх него можно вставлять текст. А картинка не масштабируется, имеет строго определённый размер и поверх неё ничего написать нельзя.

Insert logo. The background color and background image

 

In order to fill our table of contents will consistently insert pictures, links and text in the table cells.

1. Logo.

The first table, which will be a logo and links (its code we have already written in the second class):

 

<table width = «100%» border = «1»>

<td> logo </ td>

<td WIDTH = 200px> Links <br> 200 px </ td>

</ table>

Attention! Do not forget an important point (I want about him recalled because such an error occurs): single (‘) and double quotes («) in html and other programming languages have different meanings. Two single quotation marks will not replace one double. In this case, all codes, which I quote, quotation marks must be double.

 

eleven. First, we need a picture which we will use as a logo. This image needs to be done a certain size and download either Radikal.ru or in the root directory of our site. Better in the root folder, because then you will not depend on the problems at the service of images Radikal.ru that sometimes happen.

 

Load the desired image size us to the root folder. The logo should be done taking into account the resolution of the monitor. You should consider how your logo would look on monitors with different resolutions: not whether it will stretch the screen at a resolution of less than yours, is not lost if somewhere in a corner, separated from the cell with links to a huge empty space on the monitor which resolution more than you. Given that we have put a second cell of the table, designed for reference — 200 px, 600 +200 = 800rh. When the monitor resolution of 800 by 600 px logo and link will be placed close to each other.

Keep in mind that at any resolution, whatever it may have been from users on your pages, you may receive a horizontal scroll bar. This can be considered a fault in design. The horizontal scroll bar on the page with a quality design should not be.

The same undesirable phenomenon — a lot of weight logo. The logo weighs less — the better. Your page will load quickly and users will not complain about spent traffic. If your logo will weigh less than 15 kb — it will be very good.

About scaled logos talk separately, but we will continue about the usual logo.

 

12. So we loaded our desired image to the root folder of our website, for example calling it a «logo».

Next, we insert a picture into the appropriate tags, as we did, inserting an image in the banner:

<img src = «logo.jpg» border = «0»>

Red indicates the picture. Do not forget to set the format in which the picture is made. It is in this case, jpg, but can be a picture saved in gif or any other.

 

13. Now all you need to paste this link in the HTML-code of our table, the place where we have written the word «logo». To logo stood aligned to the left, add to the cell alignment attribute align = «left»

 

<table width = «100%» border = «1»>

<td align = «left»> <img src = «logo.jpg» border = «0»> </ td>

<td WIDTH = 200px> Links <br> 200 px </ td>

</ table>

Now substitute the table in our website, which we have done all of the tables for our site, and all of the code would look like this:

 

<table width = «100%» border = «1»>

<td align = «left»> <img src = «logo.jpg» border = «0»> </ td>

<td WIDTH = 200px> Links </ td>

</ table>

 

<table width = «100%» border = «1»>

<td WIDTH = 200px> Links <br> 200rh </ td>

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

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

</ table>

 

<table width = «100%» border = «1»>

<td> Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. <br> Place for banner ads. </ td>

</ table>

14. We load the whole design on our page. Get this:

Our first page

 

2. The background color and background image (bgcolor and background)

 

2.1. To ensure that our page has a certain color, you must set the background color. Since the prescribed color for the entire page, that is, for her «body», it is necessary to register the color attribute inside the <body> tag

The background color attribute is set bgcolor, which is set to the color which you need. For example, we want the page background was light gray. We find in the color table, or in Photoshop corresponding color # c0c0c0 — which is responsible for the light gray, and put this attribute with its value, just as we have prescribed values of other attributes: bgcolor = «# c0c0c0». And now this attribute is placed inside the tag <body>. Received the following:

<body bgcolor = «# c0c0c0»>

Paste this modified tag in our page and get this:

Our first page gray background

 

2.2. Now ask a different value — background. This attribute means the background image.

Insert into the background here is a picture:

 

 

 

I will explain why it is so small.

You may want to put a background image picture, which will occupy the entire screen. But note that this image is in the background has some inherent qualities:

 

Suppose we have some very beautiful picture, for example, some winter landscape. Picture size of 1024×768. And if you look at it the monitor resolution is 1024 by 768 — everything will look fine. But if you look at our site the user whose screen resolution of 1280×1024, he will see that the picture itself slid into the upper left corner, and the free space from the bottom and right of it filled with pieces of the same image, it is not docked to the original image. In general, our background is on this resolution disfigured.

If suddenly the user screen resolution lower than 1024×768 it will see only a piece of your background, more precisely, its upper left corner.

We do not fit.

 

The second problem: the larger the picture size, the greater its weight, the longer it will be loaded and thus spend more user traffic.

 

The third difficulty: a bright, colorful background nothing can be read. The letters are simply lost among the bright colors.

Therefore we sacrifice landscapes and paintings and put something more modest, lighter weight, scales to any screen resolution, and does not interfere with reading the text.

 

So, to summarize: the weight of the background image is added to the total weight of the page, so do not load much heavier images and save traffic.

The background image may for some reason did not open at once, especially if you do not want to upload it to your site, and to save space using someone’s service pictures. For example, the same radical. And if on the radical causes a crash, your image may fail to boot at all.

It should be taken into account as well, if you text is black letters, and you put a background image of a black background — if the background image does not appear, black text on a black background reading is not possible and the guest will be very surprised to see a solid black stain instead of your page .

In other words, selecting a background image, you need to consider the contrast of the text relative to the background image and the background under it. To make sure your text is always a good read!

 

For the background I have in this case took a very small image, 30 to 28 pixels, which weighs very little, about 51 bytes. And the weight of the entire page will be considered as only one picture, which simply replicates in the background of countless times. Now let’s look at how to put a background image.

 

2.3. Suppose we loaded our folder where are all our pages, background image and assign it the name «f3.gif» (format can be jpg).

Since the background is for the entire page, then you need to register it in the «body» of the page, that is, all the same <body>. Here we need the attribute «background», which means the background image. Leave the background to the case to see if the picture is not opened, the page would have had at least a background color.

It will look like this: <body bgcolor = «# c0c0c0» background = «f3.gif»>

Our first page, background Grey + background image

 

The background image can be assigned not only to the entire page. It can be prescribed in a table cell or in any certain table. Background image in contrast to the inserted image, scalable and always on top of it, you can insert text. But the picture is not scaled, has a strictly defined size and on top of it you can not write anything.