Отобразите обтекаемое текстом изображение
- В вашем текстовом редакторе откройте таблицу стилей 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.
Поскольку вы назначили элементам IMAGE свойство float:left (см. таблицу стилей), они будут обтекаться текстом и располагаться слева от элемента STANZA (который содержит последующий текст документа).
Полный документ представлен в Листинге 7.10.
<?xml version="1.0"?>
<!-- File Name: Raven02.xml -->
<?xml-stylesheet type="text/css" href="Raven02.css"?>
<POEM>
<TITLE>The Raven</TITLE> <AUTHOR>Edgar Allan Poe</AUTHOR> <DATE>1845</DATE>
<IMAGE /> <STANZA> <VERSE>Once upon a midnight dreary, while I pondered, weak and weary,</VERSE> <VERSE>Over many a quaint and curious volume of forgotten lore&amp;#8212;</VERSE> <VERSE>While I nodded, nearly napping, suddenly there came a tapping,</VERSE> <VERSE>As of some one gently rapping, rapping at my chamber door.</VERSE> <VERSE>"'Tis some visitor," I muttered, "tapping at my chamber door&amp;#8212;</VERSE> <VERSE>Only this, and nothing more."</VERSE> </STANZA>
<IMAGE /> <STANZA> <VERSE>Ah, distinctly I remember it was in the bleak December,</VERSE> <VERSE>And each separate dying ember wrought its ghost upon the floor.</VERSE> <VERSE>Eagerly I wished the morrow;&amp;#8212;vainly I had sought to borrow</VERSE> <VERSE>From my books surcease of sorrow&amp;#8212;sorrow for the lost Lenore&amp;#8212;</VERSE> <VERSE>For the rare and radiant maiden whom the angels name Lenore&amp;#8212;</VERSE> <VERSE>Nameless here for evermore.</VERSE> </STANZA>
</POEM>
Листинг 7.10. Raven02.xml
Рис. 7.35.
