|
|
|
Онлайн учебники на TEPKA.ru Учебник по HTML 4
Выравнивание изображений на WEB страницеПри включении графического изображения на WEB странице можно указывать его расположение относительно текста или других элементов страницы. Способ выравнивания изображения задается значением параметра ALIGN тега <IMG>. Возможные значения этого параметра приведены в табл. 3.1. Таблица 3.1. Значения параметра ALIGN
Поясним действие параметров выравнивания на WEB странице, приведенных в таблице. Сразу же оговоримся, что все значения параметров выравнивания изображений можно условно разделить на две группы по их принципу действия. К одной группе относятся два значения параметра — LEFT и RIGHT. При использовании любого из этих параметров мы получаем так называемое "плавающее" изображение. В этом случае изображение прижимается к соответствующему краю окна просмотра браузера, а последующий текст (или другие элементы) отекают" изображение с противоположной стороны. Здесь текст, размещаемый рядом с изображением, может занимать несколько строчек. К другой группе значений параметров относятся все остальные. При их использовании изображение как бы встраивается в строчку текста, а параметры выравнивания задают расположение изображения относительно строки текста. Таким образом, в отличие от плавающих изображений, здесь изображение является обычным элементом строки. Это легко понять, если представить, что изображение является просто одной буквой строки текста, правда, достаточно большой (типа буквицы). Приведем пример HTML-кода, в котором используются изображения на WEB странице, как элемент строки. <HTML> <TITLE>Выравнивание изображений</TITLE> <BODY> Выравнивание<IMG SRC=eagle.gif ALIGN=top>по верхнему краю <P> Выравнивание по<IMG SRC=eagle.gif ALIGN=baseline>базовой линии </BODY> </HTML> Отображение браузерами приведенного выше кода показано на рис. 3.4.
Рис. 3.4. Выравнивание изображений как элементов текстовой строки Приведем пример плавающего изображения (рис. 3.5). В примере изображение на WEB странице прижато к правому краю окна просмотра браузера, а последующий текст располагается с левой стороны от изображения. Количество строк, располагаемое рядом с изображением, может изменяться в зависимости от размеров шрифта текста, а также размеров окна просмотра. Текст, не поместившийся рядом с изображением, автоматически продолжается ниже. Этот пример построен на следующем исходном коде: <HTML> <TITLE>Выравнивание изображений</TITLE> <BODY> <IMG SRC=spb.gif ALIGN=right> <P ALIGN=JUSTIFY> Санкт-Петербург расположен в самой восточной оконечности Финского залива в устье реки Невы, на 42-х островах ее дельты. Географические координаты города: 59"57' северной широты и 30"19' восточной долготы от Гринвича. Из крупнейших городов мира (с населением свыше одного миллиона человек) Санкт-Петербург является ближайшим к Северному полюсу, он находится на одной широте с северной частью Камчатки и южной оконечностью Аляски. <P ALIGN=JUSTIFY> Высокоширотным положением города объясняется явление белых ночей. Они наступают 25-26 мая, когда солнце опускается за горизонт не более чем на 9', и вечерние сумерки практически сливаются с утренними. Наибольшая продолжительность дня приходится на 21-22 июня; заканчиваются белые ночи 16-17 июля, продолжаясь в общей сложности более 50 дней. </BODY> </HTML>
Рис. 3.5. Выравнивание изображения по правому краю Отметим, что по умолчанию изображения выравниваются по базовой линии. Примечание Браузер Netscape реализует выравнивание со значением ABSBOTTOM точно так же, как и BOTTOM. Аналогично выравнивание со значением ABSMIDDLE реализуется так же, как и MIDDLE. Браузер Microsoft Internet Explorer выполняет выравнивание согласно приведенной выше таблице. Возникает вопрос, в чем разница между базовой линией и нижней границей строки? Или различие между самым высоким элементом строки и самым высоким текстовым элементом строки? Результат действия этих параметров может отличаться в зависимости от содержимого рассматриваемой строки. Базовая линия (BASELINE или BOTTOM) — это нижняя часть линии текста, которая проводится без учета нижней части (descender) некоторых символов, например, букв типа j, q, у. В отличие от выравнивания по базовой линии, при задании значения ABSBOTTOM выравнивание выполняется по нижней части самого низкого элемента в строке, т. е. по одному из символов строки, имеющему элементы, лежащие ниже базовой линии. Аналогично обстоит дело с различием между параметрами ТОР и ТЕХТТОР. Например, самым высоким элементом в строке может быть графическое изображение, в то время как самым высоким текстовым элементом строки является, как правило, заглавная буква. На рис. 3.6 показаны возможные отличия. Для данного примера был использован следующий HTML-код: <HTML> <TITLE>Различие параметров выравнивания</TITLE> <BODY> <IMG SRC=olen.gif> <IMG SRC=belka.gif ALIGN=top width=160> Выравнивание ALIGN=TOP <P> <IMG SRC=olen.gif> <IMG SRC=belka.gif ALIGN=texttop width=160> Выравнивание ALIGN=TEXTTOP </BODY> </HTML>
Рис. 3.6. Выравнивание со значениями ТОР и ТЕХТТОР может отличаться Если в документе используются плавающие изображения, выровненные со значением RIGHT или LEFT, то имеется возможность принудительного прекращения обтекания в заданном месте текста. Это обеспечивается применением тега принудительного прерывания строки <BR> с параметром CLEAR. В качестве значений параметра CLEAR можно использовать следующие: LEFT, RIGHT или ALL. Так, для приведенного выше примера в нужном месте текста можно разместить строку: <BR CLEAR=right>. Текст, следующий далее, будет размещаться ниже изображения с новой строки.
|
|
|