Графический фон
Создавая наши первые Web-страницы, мы использовали'для них однотонный фон, указывая его цвет в теге <body> с помощью атрибута bgcolor. Однако фон может быть не только однотойным, но также в виде рисунка или фотографии. В этом случае, как и любое другое изображение, рисунок фона должен быть представлен в формате GIF, JPEG или NPG. Для указания фонового рисунка в теге <body> используется атрибут background, значение которого - имя или URL-адрес файла с рисунком.
Вставим в файл geoton.html в качестве фона Web-страницы рисунок BG.JPG, который мы сохранили в папке Web в предыдущем опыте.
> В файле geoton.html, открытом в программе Блокнот (Notepad), удалите HTML-элемент <izng src="http://geoton.narod.ru/BG.JPG">.
> -Добавьте в конец открывающего тега <body> атрибут background=BG.JPG так, чтобы тег <body> принял следующий вид:
<body bgcolor=blue text=yellow link=white vlink=yellow alink=red background=BG.JPG>
После такого редактирования код HTML в файле geoton.html должен принять вид как на Рис. 3.9. В окне браузера вы увидите, что теперь фон этой страницы не однотонный синий, как прежде, а изображение из загруженной нами фотографии, записанной в файле BG.JPG. И на этом Новом фоне отображается текст документа и рисунок CLOUD.GIF (Рис. 3.10). Однако напомним, что мы не удалили атрибут bgcolor в теге <body>. В таких случаях, когда в теге <body> указываются оба атрибута - bgcolor и background -браузер обычно отдает предпочтение атрибуту background, но, если изображение фона загрузить невозможно, используется атрибут bgcolor.
Еще один способ определения фона - с помощью языка каскадных таблиц стилей CSS. . Как вы сейчас увидите, этот способ предоставляет разработчику Web-страниц значительно больше возможностей управления фоновым изображением. Чтобы удобнее было знакомиться с ними, вставим рисунок BQ.JPG в качестве фонового изображения второй Web-страницы нашего сайта, сохраненной в файле spisok.html, воспользовавшись языком каскадных таблиц стилей.
В опыте со стилями первой главы мы определили вид текста на первой Web-странице с помощью языка каскадных таблиц стилей, указав нужные стили как значения атрибута style в теге <р>. Но есть другой, более предпочтительный вариант определения стилей, при котором описание стилей располагается внутри заголовка Web-документа <head>...</head> в открывающем теге <etyle>. В таком случае вы можете использовать описанные стили для HTML-элементов всей страницы.
В теге <style> обязательно должен присутствовать атрибут type="text/css", который служит указанием браузеру использовать язык каскадных таблиц стилей CSS. Таким образом, элемент <style,>... </style> должен иметь следующий вид:
<style type=”text/css">
</style>
Вставим этот тег в код HTML файла spisok.html.
> Вставьте пустую строку в файле spisok.html после элемента <title>Чем мы занимаемся? </title> и введите теги <style></style>, как указано выше. Код HTML заголовка Web-страницы, заключенный между тегами <head>... </head>, должен иметь такой вид:
<head>
<title> Чем мы занимаемся?</title>
<style type="text/css">
</style>
</head>
Следующее, что нужно сделать - это присвоить стили элементам HTML. В общем случае присвоение стиля элементу выглядит так:
название_элемента { свойство: значение },
где наавание_элемента - это имя HTML-тега, например, hi, p, body, а параметры в фигурных скобках - перечень свойств элементов и присвоенных им значений. Например, чтобы указать, что все абзацы, описываемые тегами <р>.. .</р> текущего Web-документа, должны иметь полужирное курсивное начертание шрифта с размером 150% и • выравнивание по центру, следует присвоить этому элементу стили следующим образом:
<style type="text/css”>
p { font-weights bold; font-style: italic; font-size: 150%; text-align: center }
</style>
Напомним, что такие стили мы присвоили элементу <р>... </р> на нашей первой Web-странице - geoton.html - и сделали это с помощью атрибута style. При этом стили были присвоены, только данному элементу <р>.. .</р>. Если же стили определяются в заголовке документа указанным выше способом, то они присваиваются всем элементам <р>... </р> данной страницы.
Но нам требуется вставить рисунок, который будет служить фоном Web-страницы. Для этого в теге < style> элементу body должно быть присвоено свойство background-image, значением которого должен быть URL-адрес файла с изображением. Этот адрес в языке таблиц стилей указывается в скобках после символов url так: url ("BQ.jpq" ). На основании сказанного, элементу body в теге <etyle> нужно присвоить следующий стиль: body { background-image: url("BG.JPG") }
> Вставьте пустую строку между открывающим тегом <style> и закрывающим тегом < / etyle> и введите указанный код, определяющий стиль элемента body.
Элемент HTML <style>... </style> должен выглядеть следующим образом:
<style type=”text/css">
body { background-image; url("BG.JPG") }
</style>
> Сохраните файл spisok.html и откройте его в программе-браузере. Вы увидите, что установленный вами ранее цветной фон заменен изображением из файла BG.JPG и текстовое содержимое документа отображается теперь на новом фоне.
> Если текст плохо виден на новом фоне, измените его цвет с помощью атрибута text тега <body>, например, <body text="black”>.
Когда вы просмотрите текущий документ, воспользовавшись вертикальной полосой прокрутки, то увидите, что в нижней части страницы фоновое изображение повторяется. Если у вас установлено разрешение монитора 1024x768 или выше, то повторение будет и справа. Во всех случаях, когда размер фонового рисунка меньше размера текущей страницы, браузер по умолчанию повторяет рисунок по вертикали и по горизонтали. Но вы можете указать программе просмотра не повторять рисунок, т.е. выводить его только один раз. Для этого используется свойство background-repeat со значением no-repeat: background-repeat: no-repeat.
> Вставьте указанное свойство в код HTML файла spisok.html так, чтобы элемент
<style>.. .</style> принял следующий вид;
<style type="text/css">
body { background-image: url("BG.JPG"); background-repeat:no-repeat } </style>
Теперь в окне браузера фоновый рисунок занимает только верхнюю часть документа. Нижняя и, возможно, правая часть, в случае высокого разрешения монитора, заполнена однотонным фоном, который вы установили ранее.
Свойство background-repeat может иметь также следующие значения:
-
repeat - фон повторяется как по горизонтали, так и по вертикали; это значение устанавливается по умолчанию;
-
repeat-х-фон повторяется только по горизонтали;
-
repeat-у-фон повторяется только по вертикали.
Положение фонового рисунка на странице можно изменить с помощью свойства Ьае]«-ground-position. В качестве значений этого свойства указываются ключевые слова . характеризующие положение изображения по вертикали — top (вверху), canter (по цен. тру), bottom (внизу), - и по горизонтали - left (слева), center (по центру), right (справа). Первым должно указываться вертикальное положение. Например, код background-position: center center выровняет рисунок по центру страницы как по горизонтали, так и по вертикали.
> Добавьте в описание свойств элемента body файла spisok.html свойство background-position: center center. Элемент <style>.. .</style> в этом файле должен принять следующий вид:
<style type=ntext/cssn>
body {background-image: url("BG.JPG"); background-repeat: no-repeat; background-position: center center }
</style>
Фоновый рисунок будет помещен в центре страницы, при этом нижняя и верхняя части страницы, а также правая и левая при разрешении монитора 1024x768 и выше, будут заполнены сплошным цветом.
> Просмотрите еще раз изображение в окне браузера, воспользовавшись вертикальной полосой прокрутки, и обратите внимание на то, что фоновый рисунок прокручивается • вместе с текстом.
Вы можете, однако, фиксировать изображение так, чтобы при прокрутке фон страницы оставался неподвижным, а текст перемещался относительно фонового изображения. Для этого в элементе body следует использовать свойство background-attachment со значением fixed: background-attachment: fixed.
-
Вставьте указанное свойство в описание стиля элемента body. Элемент <style>.. </style> HTML-кода файла spisok.html должен принять следующий вид:
<style type="text/css”>
body { background-image: url("BG.JPG"); background-repeat: no-repeat; background-position: center center; background-attachment: fixed }
</style>
Теперь вы увидите, что при прокрутке страницы фоновое изображение остается неподвижным, а текст и другие элементы Web-страницы перемещаются относительно фона.
Как видите, использование языка каскадных таблиц стилей предоставляет больше возможностей для представления фонового изображения на Web-странице, чем применение атрибута background в теге <body>.
Изображения для использования в качестве фона и рисунков в своих Web-страницах вы можете свободно загрузить со следующих Web-сайтов:
http://www.abcgiant.com/
http://barrysclipart.com/
http://www.arttoday.com/