ПЯТЫЙ УРОК



Bgcolor и Background

Ну, что же… пришла пора определиться, на чьем же фоне мы будем умопомрачающе выглядеть! И где же тот чудесный тег, который за это дело отвечает? Какие у него есть, выражаясь умным словом "атрибуты"? И, главное, каким образом разместить всю нашу красоту? Короче, вопросов - множество! А ответ всего один. Ну нету такого тега вообще! Еще не придумали!

Но не огорчайтесь! Нет тега и не надо! Зато есть два чудесных атрибута известного нам дескриптора BODY. Так что встречайте старого знакомого!

Фон, или как принято называть задний фон в переводе на английский означает "background". Поэтому нет ничего проще запомнить два атрибутика, созданных в его честь. Один - background, а другой - bgcolor.

Так чем же они отличаются? Какими возможностями обладают? И, главное, чем будут нам полезны?

Начнем, с самого простого - bgcolor. Этот атрибут отвечает за цвет фона. Вы можете подставить любое значение, в буквенном или в числовом значении цвета и ваш фон окрасится как по волшебству.

Что ж, ради примера можем открыть наш шаблон, либо любой, созданный нами ранее файл и попытаться залить страничку любимым цветом. Я же открою свою страничку index.html в блокнотике NotePad и внесу следующие изменения:

<HTML> <HEAD> <TITLE>Моя Домашняя Страничка</TITLE> </HEAD> <BODY bgcolor=blue> <IMG src="foto/myfoto01.jpg"> Ура! Привет мир! Привет люди! Встречайте! </BODY > </HTML>

Сохраним наше творение под тем же именем и посмотрим, что получилось (рис. 15):


Рис. 15. Я на синем фоне.

Если по каким-то причинам вам не нравится голубой фон, можете взять другой цвет, например розовый, можете даже писать цвет не буквами, а числами. Только не забудьте впереди числа поставить решетку. И все у вас получится! Можете поиграть разными цветами, пока не надоест. А как надоест, будем читать дальше про другой атрибут - background.

Этот атрибут указывает не на цвет изображения, а на картинку, которую стоит поместить в качестве фона, или как еще говорят, фоновых обоев. Обои можно подобрать любые, какие только подскажет вам фантазия. Моя фантазия подсказала мне взять картинку, на которой я в новом пиджаке. А потому, не мудрствуя лукаво, открываю свой файл index.html и делаю следующие изменения:

<HTML> <HEAD> <TITLE>Моя Домашняя Страничка</TITLE> </HEAD> <BODY bgcolor=blue background="foto/myfotot01.jpg"> Ура! Привет мир! Привет люди! Встречайте! </BODY> </HTML>

Сохраняем этот файл и смотрим, что у нас получилось (рис.16):


Рис. 16. Вот оно - фоновое изображение!

Что ж, с одной стороны, приятно видеть столько приятных людей в одном месте, но с другой стороны…ну куда столько??? Однако, отбросив шутки в сторону, можно понять, что же сделал атрибут background - он просто взял и размножил исходное изображение, заполнив им весь экран.

Но нельзя ли загрузить одну картину, но на весь экран? В принципе, можно! И мы сейчас этим займемся. Единственно, что необходимо учесть, так это размеры изображения. Так, при разрешении экрана 800 х 600, свободного места для изображения, если вычесть все верхние и нижние панели, остается 781 х 376 пикселей. Вот и подберем такое изображение.

Поэтому я опять открываю программу Adobe Photoshop, выбираю фотографию с изображением моря, подгоняю его размеры под искомые 781 х 376, оптимизирую для web и сохраняю под именем fonsea.jpg в своей папке foto. Ну и затем, иду проторенным путем: открываю файл index.html и ввожу следующие изменения:

<HTML> <HEAD> <TITLE>Моя Домашняя Страничка</TITLE> </HEAD> <BODY bgcolor=blue background="foto/fonsea.jpg"> Ура! Привет мир! Привет люди! Встречайте! </BODY> </HTML>

Опять сохраняем и смотрим результат (рис. 17):


Рис. 17. И вот оно - море! Играет, шумит на просторе…

Красиво, правда? Вот если бы это разрешение экрана было установлено у всех пользователей!

Но, увы! Стоит мне увеличить разрешение до 1152 х 864 и получается уже следующая картина (рис.18):


Рис. 18. Печально я гляжу на это отраженье...

Согласитесь, это совсем не то, что хотелось. Конечно, красота требует жертв, и вы можете спокойно откинуть тех пользователей, чье мнение о разрешении экрана не совпадает с вашим, либо предложить им выбрать настройки, которые вы им укажете. Решать, в конечном счете, только вам.

Хотя бывает красота и без жертв. Которая великолепно будет смотреться на всех мониторах без исключения. И я попытаюсь в этом помочь. Как вы заметили, фон заполняется копиями рисунка. И этим свойством не грех и воспользоваться. Мы ведь можем сделать одну маленькую картинку, которая займет памяти намного меньше большой, и заполним ею весь экран. Тут главная хитрость постараться сделать эту картинку "без швов". То есть, чтобы не было видно стыков между соседними изображениями. И для этого нам опять понадобится незаменимая программа Adobe Photoshop.

Конечно, можно особо и не утруждаться, и взять готовые фоновые картинки из интернета, где они просто кишмя кишат. Для этого можно набрать в любой поисковой системе (www.yandex.ru, www.apport.ru, www.ramber.ru и многих других) заветные слова (фон, фоновые обои, background) и к вашим услугам предстанут десятки и десятки сайтов, готовые отдать вам эти фоны за ради бога, и что особо радует, совершенно бесплатно.

Только не удивляйтесь потом, что точно такой фон вы найдете и на других сайтах. Так что если вы хотите сделать что-то, пусть и сопливое, но СВОЕ, предлагаю закатать рукава, и взяться за дело. Тем более это очень увлекательное занятие, от которого просто трудно оторваться.

И этим делом мы обязательно займемся на следующем уроке.


К списку всех уроков

(В. Ахметзянова, 2005 г)