Основы XML

       

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


  1. В вашем текстовом редакторе откройте таблицу стилей Raven.css, представленную в Листинге 7.5.
  2. Модифицируйте таблицу стилей в соответствии с Листингом 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 , чтобы изображение располагалось слева от обтекающего его текста документа.

  3. Воспользуйтесь командой 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)

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



  6. В документ Raven.xml добавьте следующий пустой элемент IMAGE непосредственно перед каждым элементом STANZA: <IMAGE />

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

  7. Воспользуйтесь командой Save As (Сохранить как) текстового редактора, чтобы сохранить копию модифицированного документа под именем Raven02.xml.

    Полный документ представлен в Листинге 7.10.

    Листинг 7.10. Raven02.xml (html, txt)

  8. Откройте файл Raven02.xml в Internet Explorer 5. Он будет отображен, как показано на рисунке 7.35.


    Рис. 7.35. 


  • В документ Raven. xml добавьте следующий пустой элемент IMAGE непосредственно перед каждым элементом STANZA: <IMAGE />

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

  • Воспользуйтесь командой Save As (Сохранить как) текстового редактора, чтобы сохранить копию модифицированного документа под именем Raven02.xml.

    Полный документ представлен в Листинге 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;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;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;amp;#8212;vainly I had sought to borrow</VERSE> <VERSE>From my books surcease of sorrow&amp;amp;#8212;sorrow for the lost Lenore&amp;amp;#8212;</VERSE> <VERSE>For the rare and radiant maiden whom the angels name Lenore&amp;amp;#8212;</VERSE> <VERSE>Nameless here for evermore.</VERSE> </STANZA>

    </POEM>

    Листинг 7.10. Raven02.xml

  • Откройте файл Raven02.xml в Internet Explorer 5. Он будет отображен, как показано на рисунке 7.35.


    Рис. 7.35. 




  • Содержание раздела