ТОР 5 статей: Методические подходы к анализу финансового состояния предприятия Проблема периодизации русской литературы ХХ века. Краткая характеристика второй половины ХХ века Характеристика шлифовальных кругов и ее маркировка Служебные части речи. Предлог. Союз. Частицы КАТЕГОРИИ:
|
Выравнивание изображенийПри включении графического изображения в документ можно указывать его расположение относительно текста или других элементов страницы. Способ выравнивания изображения задается значением параметра align тэга <IMG>. Возможные значения этого параметра: тор – верхняя граница изображения выравнивается по самому высокому элементу текущей строки; техттор – верхняя граница изображения выравнивается по самому высокому текстовому элементу текущей строки; middle – выравнивание середины изображения по базовой линии текущей строки; absmiddle – выравнивание середины изображения посередине текущей строки; baseline или bottom – выравнивание нижней границы изображения по базовой линии текущей строки; absbottom – выравнивание нижней границы изображения по нижней границе текущей строки; left – изображение прижимается к левому полю окна. Текст обтекает изображение с правой стороны; right – изображение прижимается к правому полю окна. Текст обтекает изображение с левой стороны. Все значения параметров выравнивания изображений можно условно разделить на две группы по их принципу действия. К одной группе относятся два значения параметра – left и right. При использовании любого из этих параметров мы получаем так называемое "плавающее" изображение. В этом случае изображение прижимается к соответствующему краю окна просмотра браузера, а последующий текст (или другие элементы) "обтекают" изображение с противоположной стороны. Текст, размещаемый рядом с изображением, может занимать несколько строчек. К другой группе значений параметров относятся все остальные. При их использовании изображение как бы встраивается в строчку текста, а параметры выравнивания задают расположение изображения относительно строки текста. Таким образом, в отличие от плавающих изображений, здесь изображение является обычным элементом строки. Это легко понять, если представить, что изображение является просто одной буквой строки текста, правда, достаточно большой (типа буквицы). Пример HTML-кода, в котором используются изображения, как элемент строки (рис. 1.5.1). <HTML> <TITLE>Выравнивание изображений</TITLE> <BODY> Выравнивание<IMG src=square.gif align=”top”>no верхнему краю <Р> Выравнивание no<IMG src = square.gif align=Ьазе1iпе>базовой линии </BODY> </HTML>
Рис. 1.5.1. Выравнивание изображения по элементу текстовой строки
Пример плавающего изображения (рис. 1.5.1). В примере изображение прижато к правому краю окна просмотра браузера, а последующий текст располагается с левой стороны от изображения. Количество строк, располагаемое рядом с изображением, может изменяться в зависимости от размеров шрифта текста, а также размеров окна просмотра. Текст, не поместившийся рядом с изображением, автоматически продолжается ниже. Этот пример построен на следующем исходном коде: <HTML> <TITLE>Выравнивание изображений</ TITLE > <BODY> <IMG src=square.gif ALIGN=right> <P align=justify> Пример плавающего изображения (рис. 1.5.2). В примере изображение прижато к правому краю окна просмотра браузера, а последующий текст располагается с левой стороны от изображения. Количество строк, располагаемое рядом с изображением, может изменяться в зависимости от размеров шрифта текста, а также размеров окна просмотра. Текст, не поместившийся рядом с изображением, автоматически продолжается ниже. </BODY> </HTML> Рис.1.5.2. Выравнивание изображения по правому краю.
Если в документе используются плавающие изображения, выровненные со значением RIGHT или LEFT, то имеется возможность принудительного прекращения обтекания в заданном месте текста. Это обеспечивается применением тэга принудительного прерывания строки <вк> с параметром CLEAR. В качестве значений параметра CLEAR можно использовать LEFT, RIGHT или ALL. Для приведенного выше примера в нужном месте текста можно поместить строку: <BR clear=right>. Текст, следующий далее, будет размещаться ниже изображения с новой строки. Не нашли, что искали? Воспользуйтесь поиском:
|