Позиционирование изображения на странице

Выравнивание текста по краю изображения.

Вставка изображения в документ.

Тема: Подготовка и размещение графических объектов.

План:

1. Вставка изображения в документ.

2. Фоновая графика. Использование изображения в качестве ссылки.

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

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

<IMG SRC="filename">

Например, для показа графического файла LOGOTIP.JPG следует написать тэг

<IMG SRC="logotip.jpg">

По умолчанию браузер выводит изображение немедленно после текста или другого объекта, описанного предыдущими инструкциями.

Для увеличения скорости передачи графического изображения в тэге <IMG> можно использовать атрибут (дополнительный параметр) LOWSRC, который принимает в качестве аргумента адрес графического файла. Вы можете создать два графических файла: один (например, пусть это файл LOGOTIP.JPG) содержит картинку, полученную с высоким разрешением, а другой (например, LOGOTIP.GIF) — картинку, полученную с низким разрешением. Тогда тэг:

<IMG SRC="logotip.jpg" LOWSRC="logotip.gif">

предпишет браузеру сначала загрузить файл LOGOTIP.GIF, а затем по мере приема заменить его файлом LOGOTIP.JPG.

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

Таблица 1

Значение	Описание.
ТОР	Выравнивает текст по верху изображения.
MIDDLE	Выравнивает текст по середине изображения.
BOTTON	Выравнивает текст по низу изображения.

По умолчанию программа просмотра выводит изображение в текущей строке. Текст не "обтекает" его. Однако при помощи атрибута ALIGN тэга <IMG> изображение можно сделать "плавающим", т. е. заставить текст расположиться вокруг изображения.

В табл. 2 приведены значения атрибута ALIGN, позиционирующие обтекаемое текстом изображение относительно краев окна браузера.

Таблица 2

Значение	Описание.
LEFT	Обтекаемое текстом изображение прижато к левой стороне окна браузера.
RIGHT	Обтекаемое текстом изображение прижато к правой стороне окна браузера.

Например, следующий тэг задает обтекание графики из файла LOGOTIP.JPG справа (картинка будет находиться слева от текста):

<IMG SRC="logotip.jpg" ALIGN=LEFT>

Если требуется расположить картинку справа от текста, то нужно атрибуту ALIGN присвоить аргумент RIGHT:

<IMG SRC="logotip.jpg" ALIGN=RIGHT>

Обычно картинка встраивается вплотную с текстом, что может быть некрасиво. Во избежание этого, можно задать пустые поля вокруг иллюстрации. Поля создаются с помощью атрибутов VSPACE для верхнего и нижнего полей и НSPACE для боковых полей в тэге <IMG>. Аргументы этих атрибутов указываются в виде чисел, определяющих размеры полей в пикселах. Для отмены обтекания графики текстом служит тэг <BR CLEAR=...>.

Дата добавления: 2014-12-23