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


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

Урок 4. Вставляем логотип. Цвет фона и фоновое изображение



Для того, чтобы наполнить нашу таблицу содержимым, будем последовательно вставлять картинки, ссылки и текст в ячейки таблиц.
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">
Вставляем данный изменённый тег в нашу страницу и получается вот что:
Наша первая страница, фон серый

Нужный вам цвет можно найти вот в этих таблицах:

http://www.artlebedev.ru/tools/colors/
http://www.antula.ru/palitra.htm
http://fantasyflash.ru/index.php?&kontent=palitra2
http://webmastertools.narod.ru/OnlineTools/palettes.html
http://www.board74.ru/colors/index.html
http://www.board74.ru/colors/rgb.html
http://www.board74.ru/colors/standard.html
http://mytopics.narod.ru/palette/index.html
http://www.antula.ru/colour-name_2.htm
http://www.antula.ru/colour-name_3.htm
http://he-lp.narod.ru/cvetinazvanie.htm
http://skorpion-21.narod.ru/m/000/
http://www.butovo.com/~fiver/files/help/colors.html
http://www.stm.dp.ua/web-design/color-html.php
http://www.webclub.ru/archive/markup_refs/article-44.html
http://www.kaplya.ic.km.ua/HTML-colors-1.html


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">
Наша первая страница, фон серый + фоновая картинка

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


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


© М.В. Гуминенко. 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 на платный хостинг