Онлайн учебники на TEPKA.ru

Учебник по HTML 4

Фоновые изображения Web-страниц

Разработчики Web-страниц могут управлять цветом фона документа, а также указывать изображения, используемые в качестве фонового. Идея применения фоновых изображений хорошо знакома пользователям системы Windows, в которой предусмотрен ряд возможностей по изменению параметров рабочего стола (desktop). В этой системе в качестве параметров отображения рабочего стола может быть указан как однотонный цвет, так и фоновый узор или рисунок (рис. 3.1).

Рис. 3.1. Выбор параметров рабочего стола MS Windows

Во многом аналогично выполняется настройка параметров фона для HTML-документов. Для задания цвета фона употребляется параметр BGCOLOR тега <BODY>, а фоновое изображение включается в документ при помощи параметра BACKGROUND. В качестве значения параметра BGCOLOR указывается название цвета или его составляющие в шестнадцатеричном коде. В качестве фонового изображения должен использоваться графический файл формата GIF или JPG.

Фоновое изображение для HTML-документа всегда заполняет все окно просмотра (в отличие от рабочего стола Windows, где изображение может не размножаться). Если размер изображения меньше размеров окна просмотра, то оно будет размножено по принципу мозаики. Поэтому фоновые изображения должны создаваться так, чтобы при появлении на экране границы сшивки повторяющихся изображений были бы невидимы. Эта задача напоминает подбор рисунка при оклеивании обоями стен комнаты.

Обычно в качестве фонового берется небольшое изображение, для загрузки которого по сети не требуется значительного времени. Существуют огромные коллекции изображений (текстур), которые можно использовать при разработке своих собственных HTML-документов (рис. 3.2).

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

Приведем пример записи тега <BODY> с указанием фонового цвета и фонового изображения:

Пример документа с фоновым изображением показан на рис. 3.3. Заметим, что одновременное задание параметров BACKGROUND и BGCOLOR вовсе не обязательно. Любой из них, равно как и оба вместе, могут отсутствовать.

На первый взгляд может показаться, что указание фонового цвета излишне при задании фонового изображения. В действительности все наоборот. Можно рекомендовать всегда указывать цвет фона документа если задается фоновое изображение. Дело в том, что при загрузке документа прежде всего отображается текстовая часть, а на следующем проходе будут загружаться изображения, в том числе и изображение, используемое в качестве фонового. До момента загрузки и отображения фонового изображения цвет фона документа будет определяться значением параметра BGCOLOR или устанавливаться по умолчанию. Опыт работы с HTML-документами, получаемыми по сети, показывает, что до загрузки фонового изображения порой проходит достаточное количество времени, в течение которого пользователь знакомится с уже загруженным текстом. В какой-то момент проявляется фоновое изображение, изменяя гамму цветов документа. Чтобы предотвратить резкое изменение гаммы цветов, следует задавать значение цвета фона близким к цветам фонового изображения.

Фоновые изображения Web-страниц

Рис. 3.2. Коллекция текстур

Фоновые изображения Web-страниц

Рис. 3.3. Использование фонового изображения

Примечание

При выборе цвета фона и характера фонового изображения следует не забывать о необходимости контраста между цветом текста и фона. Неудачное соотношение цветов может затруднить чтение текста. Обратите внимание на рис. 3.3. Без фонового изображения прочитать текст было бы гораздо проще.

Есть еще причина, из-за которой задание цвета фона документа следует рекомендовать. Пользователь может отключить загрузку изображений. В этом случае фоновое изображение также не будет загружено.

Еще один вариант предпочтений пользователя исключит и выдачу фонового изображения и указание цвета фона. Конкретный вариант настроек зависит от используемого браузера. Так, например, в браузере Netscape есть режим принудительного задания гаммы цветов, перекрывающих настройки, указанные в документе (пункт Always use my colors, overriding document меню Colors вкладки Preferences). При установке данного флажка цветовые настройки отображаемого документа не будут использоваться, в том числе вообще не будет загружаться фоновое изображение.

Примечание

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

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