Основы 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. 




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