Графические изображения

Фоновые изображения.

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

< BODY BACKGROUND = backgrd2.png BGCOLOR = GRAY>

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

Цветовая нотация:

Black (Черный) = " #000000" Green (Зеленый) = " #008000"

Silver (Серебро)= " #C0C0C0" Lime (Известь) = " #00FF00"

Gray (Серый) = " #808080" Olive (Оливковый) = " #808000"

White (Белый) = " #FFFFFF" Yellow (Желтый)= " #FFFF00"

Maroon (Темно-бордовый) = " #800000" Navy (Темно-синий) = " #000080"

Red (Красный) = " #FF0000" Blue (Синий) = " #0000FF"

Purple (Фиолетовый) = " #800080" Teal (Чирок) = " #008080"

Fuchsia (Фуксия) = " #FF00FF" Aqua (Аква) = " #00FFFF"

Встраивание изображений в HTML-документы.

Для встраивания изображений в HTML-документ используют тэг < IMG>, имеющий единственный обязательный параметр SRC, определяющий URL-адрес файла с изображением.

При включении графического изображения в документ можно указывать его расположение относительно текста или других элементов страницы. Способ выравнивания задается значением параметра ALIGN тэга < IMG>. Возможные значения этого параметра приведены в таблице 6.

Таблица 6. Значения параметра ALIGN

Все значения параметров выравнивания изображений условно делят на две группы по их принципу действия. К одной группе относят два значения параметра — LEFT и RIGHT. При использовании любого из этих параметров мы получаем так называемое «плавающее» изображение. В этом случае изображение прижимается к соответствующему краю окна просмотра браузера, а последующий текст, размещаемый рядом с изображением, может занимать несколько строчек. К другой группе значений параметров относятся все остальные. При их использовании изображение встраивается в строчку текста, а параметры выравнивания задают расположение изображения относительно строки текста. Таким образом, в отличие от плавающих изображений, здесь изображение является обычным элементом строки. Например:

< HTML>

< HEAD>

< TITLE> Встраивание изображений< /title> < /head>

< BODY>

Выравнивание изображений < IMG SRC = final.gif ALIGN=top > по верхнему краю

< P>

Выравнивание изображений по < IMG SRC = final.gif ALIGN=baseline > базовой линии

< /BODY>

< /HTML>

В этом примере изображения используются как элемент строки.

Приведем пример плавающего изображения:

< HTML>

< HEAD>

< TITLE> Встраивание изображений - как плавающих элементов строки< /title> < /head>

< BODY>

< IMG SRC =final.gif ALIGN=right>

< P ALIGN=JUSTIFY>

(Здесь идет текст абзаца)

< IMG SRC =final.gif ALIGN=left>

< P ALIGN=JUSTIFY>

(Здесь идет текст абзаца)

< /BODY>

< /HTML>

Если в документе используются плавающие изображения, выровненные со значением RIGHT и LEFT, то имеется возможность принудительного прекращения обтекания в заданном месте текста. Это обеспечивается применением тэга принудительного прерывания строки < BR> с параметром CLEAR. В качестве значений параметра CLEAR можно использовать следующие: LEFT, RIGHT или ALL. Так для приведенного выше примера в нужном месте текста можно разместить строку:

< BR CLEAR=ALL>

Текст, следующий далее, будет размещаться ниже изображения с новой строки.

Тэг встраивания изображений имеет два необязательных параметра, указывающих размеры изображений при отображении — WIDTH и HEIGHT. Значения параметров могут указываться как в пикселях, так и в процентах от размеров окна просмотра. Значения ширины и высоты изображения могут не совпадать с истинными размерами изображения. В этом случае браузеры при загрузке изображений выполняют его перемасштабирование. Любой из этих параметров может быть опущен. Если задан только один из параметров, то при загрузке рисунка второй параметр буде вычисляться автоматически из условия сохранения пропорций. Изменение размеров изображений при помощи задания параметров ширины и высоты может использоваться для просмотра иллюстраций в уменьшенном виде, однако такой подход не сокращает время загрузки изображения. Если не требуется решать задачу изменения размеров изображения, рекомендуется указывать их реальные размеры в пикселях с помощью параметров WIDTH и HEIGHT.

Указание действительных размеров:

ü позволяет читателю, работающему в режиме отключения загрузки изображений, иметь представление о размерах иллюстраций по пустому прямоугольнику, выдаваемому на экран вместо изображения (если размеры не будут указаны, то браузер не зная их, выведет маленькую пиктограмму и форматирование страницы будет нарушено);

ü позволяет ускорить верстку документа на экране. Обычно браузеры должны загрузить все встроенные изображения прежде, чем отформатировать текст на экране. Указание размеров встроенных изображений позволяет выполнить форматирование документа до полной загрузки файлов с изображениями.

Например:

< HTML>

< HEAD>

< TITLE> Масштабирование изображений< /title> < /head>

< BODY>

< IMG SRC =final.gif WIDTH=300>

< IMG SRC =final.gif WIDTH=500>

< IMG SRC =final.gif WIDTH=100>

< /BODY>

< /HTML>

Отделение изображения от текста

Для тэга < IMG> можно задавать параметры HSPACE и VSPACE, значения которых определяют отступы от изображения, оставляемые пустыми, по горизонтали и по вертикали соответственно.

Рамки вокруг изображений

Изображение, встраиваемое на страницу, можно поместить в рамку различной ширины. Для этого служит параметр BORDER тэга < IMG>. В качестве значения параметра используется число, означающее толщину рамки в пикселях. По умолчанию рамка вокруг изображения не рисуется. Исключением является только случай, когда изображение является ссылкой. В этом случае браузеры заключают изображение в рамку синего цвета. Избежать появления рамки можно указав значение BORDER=0.

Альтернативный текст

Параметр тэга < IMG> ALT определяет альтернативный текст. Его указание дает возможность пользователям неграфических браузеров или пользователям, работающим в режиме отключения загрузки изображений, получить некоторую текстовую информацию о встроенных изображениях. При отключенном изображении вместо них на экране появится альтернативный текст, определенный значением параметра ALT. Значение этого параметра имеет смысл и для случаев, когда загрузка изображений выполняется. Поскольку загрузка изображений выполняется на втором проходе после отображения текстовой информации, то изначально на экране на месте изображения появится альтернативный текст, который по мере загрузки будет сменяться изображением. Современные браузеры будут также отображать альтернативный текст в качестве подсказки при помещении курсора мыши в область изображения.

Использование изображений в качестве ссылки

Для обеспечения работы изображения в качестве ссылки на другие ресурсы достаточно включить изображение внутрь тэга контейнера < A>.

Например:

< HTML>

< HEAD>

< TITLE> Рамки вокруг изображений и альтернативный текст< /title> < /head>

< BODY>

< IMG SRC=ctxlogo.gif ALT=" Это пирамида" BORDER=10 ALIGN=LEFT HSPACE=40 VSPACE=20>

< P ALIGN=CENTER>

Отделение изображения от текста

< P ALIGN =JUSTIFY>

(Здесь идет текст абзаца)

< P AliGN=center>

Рамки вокруг изображений

< P AliGN=justify>

(Здесь идет текст абзаца)

< P AliGN=center>

Альтернативный текст

< P AliGN=justify>

(Здесь идет текст абзаца)

< P AliGN=center>

< A HREF=text.htm> < IMG SRC=ctxlogo.gif ALT=" Это ссылка" ALIGN=left BORDER=0> < /A>

Использование изображений в качестве ссылки

< P AliGN=justify>

(Здесь идет текст абзаца)

< /BODY> < /HTML>