2015-03-08
400
Разработчики Web-страниц могут управлять цветом фона документа, а также указывать изображения, используемые в качестве фонового. Для задания цвета фона употребляется параметр BGCOLOR тега <BODY>, а фоновое изображение включается в документ при помощи параметра BACKGROUND. В качестве значения параметра BGCOLOR указывается название цвета или его составляющие в шестнадцатеричном коде. В качестве фонового изображения должен использоваться графический файл формата GIF или JPG. Приведем пример записи тега <BODY> с указанием фонового цвета и фонового изображения:
<BODY BACKGROUND=texture.gif BGCOLOR=gray>
Для встраивания изображений в HTML-документ следует использовать тег <IMG>, имеющий единственный обязательный параметр SRC, определяющий URL-адрес файла с изображением. Простейший пример встраивания изображения:
<IMG SRC=picture.gif>
Данный тег может иметь ряд параметров. Выравнивание изображений. При включении графического изображения в документ можно указывать его расположение относительно текста или других элементов страницы. Способ выравнивания изображения задается значением параметра ALIGN тега <IMG>.
|
|
|
Возможные значения этого параметра приведены в табл. 3.1.
Таблица 3.1. Значения параметра ALIGN
| Значение | Действие параметра ALIGN |
| ТОР | Верхняя граница изображения выравнивается по самому высокому элементу текущей строки |
| ТЕХТТОР | Верхняя граница изображения выравнивается по самому высокому текстовому элементу текущей строки |
| MIDDLE | Выравнивание середины изображения по базовой линии текущей строки |
| ABSMIDDLE | Выравнивание середины изображения посередине теку щей строки |
| BASELINE или BOTTOM | Выравнивание нижней границы изображения по базовой линии текущей строки |
| ABSBOTTOM | Выравнивание нижней границы изображения по нижней границе текущей строки |
| LEFT | Изображение прижимается к левому полю окна. Текст обтекает изображение с правой стороны |
| RIGHT | Изображение прижимается к правому полю окна. Текст обтекает изображение с левой стороны |
Поясним действие параметров выравнивания, приведенных в таблице. Сразу же оговоримся, что все значения параметров выравнивания изображений можно условно разделить на две группы по их принципу действия. К одной группе относятся два значения параметра — LEFT и RIGHT. При использовании любого из этих параметров мы получаем так называемое "плавающее" изображение. В этом случае изображение прижимается к соответствующему краю окна просмотра браузера, а последующий текст (или другие элементы) "обтекают" изображение с противоположной стороны. Здесь текст, размещаемый рядом с изображением, может занимать несколько строчек.
|
|
|
К другой группе значений параметров относятся все остальные. При их использовании изображение как бы встраивается в строчку текста, а параметры выравнивания задают расположение изображения относительно строки текста. Таким образом, в отличие от плавающих изображений, здесь изображение является обычным элементом строки. Это легко понять, если представить, что изображение является просто одной буквой строки текста, правда, достаточно большой (типа буквицы).
Приведем пример HTML-кода, в котором используются изображения, как элемент строки.
<HTML>
<TITLE>Выравнивание изображений</TITLE>
<BODY>
Выравнивание<IМС SRC=eagle.gif ALIGN=top>no верхнему краю
<Р>
Выравнивание no<IMG SRC=eagle.gif ALIGN =BASELINE>базовой линии
</BODY>
</HTML>
Приведем пример плавающего изображения. В примере изображение прижато к правому краю окна просмотра браузера, а последующий текст располагается с левой стороны от изображения. Количество строк, располагаемое рядом с изображением, может изменяться в зависимости от размеров шрифта текста, а также размеров окна просмотра. Текст, не поместившийся рядом с изображением, автоматически продолжается ниже. Этот
пример построен на следующем исходном коде:
<HTML>
< TITLE >Выравнивание изображений</ TITLE >
<BODY>
<IMG SRC=spb.gif ALIGN=right>
<P ALIGN=JUSTIFY>
Санкт-Петербург расположен в самой восточной оконечности Финского залива в устье реки Невы, на 42-х островах ее дельты. Географические координаты города: 59"57' северной широты и 30"19' восточной долготы от Гринвича. Из крупнейших городов мира (с населением свыше одного миллиона человек) Санкт-Петербург является ближайшим к Северному полюсу, он находится на одной широте с северной частью Камчатки и южной оконечностью Аляски.
<Р ALIGN=JUSTIFY>
Высокоширотным положением города объясняется явление белых ночей. Они наступают 25-26 мая, когда солнце опускается за горизонт не более чем на 9', и вечерние сумерки практически сливаются с утренними. Наибольшая продолжительность дня приходится на 21-22 июня; заканчиваются белые ночи 16-17 июля, продолжаясь в общей сложности более 50 дней.
</BODY>
</HTML>
Базовая линия (BASELINE или BOTTOM) — это нижняя часть линии текста, которая проводится без учета нижней части (descender) некоторых символов, например, букв типа j, q, у. В отличие от выравнивания по базовой линии, при задании значения ABSBOTTOM выравнивание выполняется по нижней части самого низкого элемента в строке, т. е. по одному из символов строки, имеющему элементы, лежащие ниже базовой линии. Аналогично обстоит дело с различием между параметрами ТОР и ТЕХТТОР.
Например, самым высоким элементом в строке может быть графическое изображение, в то время как самым высоким текстовым элементом строки является, как правило, заглавная буква.
<HTML>
<TITLE>Различие параметров выравнивания</ TITLE >
<BODY>
<IMG SRC=monkey.gif>
<IMG SRC=mouse.gif ALIGN=top width=160>
Выравнивание ALIGN=TOP
<IMG SRC=monkey.gif>
<IMG SRC=mouse.gif ALIGN=texttop width=160>
Выравнивание ALIGN=TEXTTOP
</BODY>
</HTML>
Если в документе используются плавающие изображения, выровненные со значением RIGHT или LEFT, то имеется возможность принудительного прекращения обтекания в заданном месте текста. Это обеспечивается применением тега принудительного прерывания строки <BR> с параметром CLEAR.
В качестве значений параметра CLEAR можно использовать следующие: LEFT,
RIGHT или ALL. Так, для приведенного выше примера в нужном месте текста
можно разместить строку:
<BR CLEAR=right>.
Текст, следующий далее, будет размещаться ниже изображения с новой строки.
