Отобразите обтекаемое текстом изображение

В вашем текстовом редакторе откройте таблицу стилей Raven.css, представленную в Листинге 7.5.
Модифицируйте таблицу стилей в соответствии с Листингом 7.9.

Главным дополнением является введение правила для элемента IMAGE:
IMAGE {background-image:url(Raven.bmp); background-repeat:no-repeat; background-position:center; width:89px; height:58px; float:left}

Элемент IMAGE является пустым элементом (его вы позднее добавите в XML-документ), созданным для отображения обтекаемого текстом рисунка. Элемент не содержит текста, но ему назначен фоновый рисунок (с помощью трех свойств, устанавливаемых в правиле), который будет отображен вместо текста.

Свойствам width и height элемента присвоены точные значения ширины и высоты изображения. Поскольку файл рисунка является растровым (точечным), важно указать размер в пикселях, чтобы изображение могло быть полностью отображено на любом мониторе в любом графическом режиме. Заметим, что если вы не присвоите значений свойствам width и height элемента, размер его будет нулевым, поскольку он не содержит текста и поэтому будет скрыт.

Наконец, вы установили для свойства float значение left , чтобы изображение располагалось слева от обтекающего его текста документа.
Воспользуйтесь командой Save As (Сохранить как) вашего текстового редактора, чтобы сохранить копию модифицированного документа под именем Raven02.css.

/* File Name: Raven02.css */

POEM {font-size:12pt}

POEM, TITLE, AUTHOR, DATE, IMAGE, STANZA, VERSE {display:block}

DATE, STANZA {margin-bottom:.25in}

IMAGE {background-image:url(Raven.bmp); background-repeat:no-repeat; background-position:center; width:89px; height:58px; float:left}

Листинг 7.9. Raven02.css (html, txt)
В вашем текстовом редакторе откройте документ Raven.xml, представленный в Листинге 7.6.
В документе Raven.xml отредактируйте инструкцию по обработке xml-stylesheet в начале файла, чтобы она указывала на новую таблицу стилей, которую вы только что создали – Raven02.css – следующим образом: <?xml-stylesheet type="text/css" href="Raven02.css"?>
В документ Raven.xml добавьте следующий пустой элемент IMAGE непосредственно перед каждым элементом STANZA: <IMAGE />

Поскольку вы назначили элементам IMAGE свойство float:left (см. таблицу стилей), они будут обтекаться текстом и располагаться слева от элемента STANZA (который содержит последующий текст документа).
Воспользуйтесь командой Save As (Сохранить как) текстового редактора, чтобы сохранить копию модифицированного документа под именем Raven02.xml.

Полный документ представлен в Листинге 7.10.
Листинг 7.10. Raven02.xml (html, txt)
Откройте файл Raven02.xml в Internet Explorer 5. Он будет отображен, как показано на рисунке 7.35.

Рис. 7.35.

Содержание Назад Вперед