Отображение XML-документов с использованием таблиц каскадных стилей

Вставка элементов HTML в XML-документы и использование пространства имен

Хотя вы можете использовать таблицы каскадных стилей для добавления базовых возможностей форматирования элементов XML в ваш документ, было бы хорошо иметь возможность добавлять стандартные HTML-элементы – такие, как гиперссылки, изображения и формы – чтобы ваш документ выигрывал от применения встроенных в эти элементы функций. К счастью, когда вы отображаете ваш документ с помощью присоединенной таблицы стилей, вы можете вставить в ваш документ любой стандартный элемент HTML и заставить браузер отобразить этот элемент с использованием специальных зарезервированных для этой цели имен элементов.

Вам может показаться, что можно вставить HTML-элемент, просто присвоив XML-элементу такое же имя. Например, вставить HTML-элемент IMG, просто создав элемент IMG следующим образом:

<IMG SRC="Raven.bmp" />

Однако у браузера нет возможности узнать, что это HTML-элемент, а не обычный созданный вами XML-элемент. Чтобы подобный механизм мог работать, все имена HTML-элементов (а их много) должны были быть зарезервированы исключительно для вставки HTML-элементов. Такой подход, однако, противоречил бы духу XML, в соответствии с которым вам разрешается использовать для ваших элементов любые корректно заданные имена.

К счастью, вы можете воспользоваться соглашением XML, известным как пространство имен, которое позволяет различать конфликтующие имена. Два разных элемента могут иметь одно и то же имя, если они принадлежат разным пространствам имен.

Идентификатор пространства имен добавляется в начале имени элемента и отделяется от остальной части имени двоеточием (:), как в следующем примере:

my-namespace:MY-ELEMENT

Элемент с именем my-namespace:MY-ELEMENT и элемент с именем MY-ELEMENT могут существовать в одном и том же документе и считаются различными элементами, поскольку принадлежат отдельным пространствам имен: my-namespace:MY-ELEMENT принадлежит пространству имен my-namespace, а элемент MY-ELEMENT по умолчанию принадлежит к пространству имен документа.

Однако прежде чем вы сможете использовать пространство имен, вы должны соответствующим образом объявить его. Хотя есть несколько мест, в которых вы можете сделать объявление пространства имен, проще всего это сделать внутри начального тега элемента, для которого вы хотите использовать пространство имен. Например, вы можете объявить пространство имен my-namespace, как показано на рисунке 7.38.

Рис. 7.38.

Заметим, что при такой форме объявления пространства имен вы можете использовать пространство имен только внутри элемента, в котором вы его объявили, либо внутри любого из его дочерних элементов.

Если имя XML-элемента совпадает с именем стандартного HTML-элемента (например, IMG, A или HR ) и если он принадлежит пространству имен html, Internet Explorer 5 интерпретирует его как HTML-элемент и поместит его на отображаемую страницу. Однако если элемент не принадлежит пространству имен html, Internet Explorer 5 интерпретирует его как обычный XML-элемент.

Пространство имен html является специальным, зарезервированным пространством имен, которое объявляется следующим образом:

xmlns:html='http://www.w3c.org/TR/REC-html40/'

Вот пример XML-элемента, который указывает Internet Explorer 5 вставить HTML-элемент IMG, для которого источником изображения является файл Raven.bmp:

<html:IMG xmlns:html='http://www.w3c.org/TR/REC-html40/'
			src='Raven.bmp' />

Это корректно сформированный пустой XML-элемент. Его имя включает указание пространства имен, он также имеет два атрибута. Первый атрибут объявляет пространство имен, в то время как второй атрибут является стандартным HTML-атрибутом, который вы можете включить в начальный тег HTML-элемента IMG.

Имейте в виду, что если вы вставляете HTML-элемент описанным выше способом, XML-документ должен иметь присоединенную таблицу стилей, и вы должны открыть его непосредственно в браузере (как и все XML-документы, описанные в этой лекции).

Пример

Версия документа Inventory01.css, представленная в Листинге 7.1, иллюстрирует технику включения HTML в XML-документ. Обратите внимание, что к этому документу присоединена оригинальная версия таблицы стилей Raven.css, которая содержится в Листинге 7.5.

Документ включает три стандартных HTML-элемента.

• Он содержит изображение, представленное следующим XML-элементом:

  <html:IMG xmlns:html='http://www.w3c.org/TR/REC-html40/'
  	SRC='Raven.bmp' ALIGN='LEFT' />

  Этот элемент помещает стандартный HTML-элемент IMG (изображение). Атрибут HTML ALIGN='LEFT' делает изображение обтекаемым и размещает его слева от последующего текста документа. Этот метод является альтернативой методу, с которым вы познакомились ранее в разделе "Отобразите обтекаемое текстом изображение".
• Он делает имя автора (которое ранее содержалось в элементе AUTHOR ) гиперссылкой с помощью следующего XML-элемента (вместо элемента AUTHOR ):

  <html:A xmlns:html='http://www.w3c.org/TR/REC-html40/'
  	HREF='http://www.edgar.com'>
  	Edgar Allan Poe
  </html:A>

  Этот элемент вставляет стандартный элемент HTML A (якорь).
• Он вставляет две горизонтальные разделительные линии с использованием следующего XML-элемента:

  <html:HR xmlns:html='http://www.w3c.org/TR/REC-html40/' />

  Этот элемент вставляет стандартный элемент HTML HR (горизонтальная линия).

На рисунке 7.39 показано как Internet Explorer 5 отображает документ.

Рис. 7.39.

<?xml version="1.0"?>

<!-- File Name: Raven03.XML -->

<?xml-stylesheet type="text/css" href="Raven.css"?>

<POEM>

<html:IMG xmlns:html='http://www.w3c.org/TR/REC-html40/' 
   SRC='Raven.bmp' ALIGN='LEFT' />

<TITLE>The Raven</TITLE>

<html:A xmlns:html='http://www.w3c.org/TR/REC-html40/' 
   HREF='http://www.edgar.com'>
   Edgar Allan Poe
</html:A>

<DATE>1845</DATE>

<html:HR xmlns:html='http://www.w3c.org/TR/REC-html40/' />

<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&#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&#8212;</VERSE>
   <VERSE>Only this, and nothing more."</VERSE>
</STANZA>

<html:HR xmlns:html='http://www.w3c.org/TR/REC-html40/' />

<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;&#8212;vainly I had sought to borrow</VERSE>
   <VERSE>From my books surcease of sorrow&#8212;sorrow for the lost
 Lenore&#8212;</VERSE>
   <VERSE>For the rare and radiant maiden whom the angels name Lenore&#8212;</VERSE>
   <VERSE>Nameless here for evermore.</VERSE>
</STANZA>

</POEM>

Создание и использование полноценной таблицы стилей

В последующих упражнениях вы создадите XML-документ, содержащий первые четыре строфы поэмы Эдгара По "Ворон". Затем вы создадите таблицу каскадных стилей, которая отформатирует этот документ с использованием почти всех свойств, рассмотренных в этой лекции. На рисунке 7.40 показано как поэма будет выглядеть в Internet Explorer 5.

Рис. 7.40.

Создайте документ

1. Откройте новый, пустой текстовый файл в вашем текстовом редакторе и введите XML-документ, представленный в Листинге 7.12.

   Обратите внимание на следующие важные особенности документа Raven04.xml:

   • к нему присоединена таблица каскадных стилей Raven04.css, которую вы создадите в следующем упражнении;
   • перед каждым элементом STANZA расположен пустой элемент IMAGE. Вы используете элемент IMAGE для отображения рисунка ворона в начале каждой строфы;
   • последняя строка в каждой строфе помещена в специальный элемент с именем LASTVERSE. Это дает вам возможность форматировать последнюю строку отличным образом от остальных строк. (Она выровнена не по левому краю, а по правому.)
2. Воспользуйтесь командой Save (Сохранить) вашего текстового редактора, чтобы сохранить документ на вашем жестком диске как Raven04.xml.

   <?xml version="1.0"?>
   
   <!-- File Name: Raven04.xml -->
   
   <?xml-stylesheet type="text/css" href="Raven04.css"?>
   
   <POEM>
   <TITLE>The Raven</TITLE>
   <AUTHOR>
      Edgar Allan Poe
      <AUTHOR-BIO>Edgar Allan Poe was an American writer who lived from 1809 to 1849.</AUTHOR-BIO>
   </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&#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&#8212;</VERSE>
      <LASTVERSE>Only this, and nothing more."</LASTVERSE>
   </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;&#8212;vainly I had sought to borrow</VERSE>
      <VERSE>From my books surcease of sorrow&#8212;sorrow for the lost Lenore&#8212;</VERSE>
      <VERSE>For the rare and radiant maiden whom the angels name Lenore&#8212;</VERSE>
      <LASTVERSE>Nameless here for evermore.</LASTVERSE>
   </STANZA>
   <IMAGE/>
   <STANZA>
      <VERSE>And the silken sad uncertain rustling of each purple curtain</VERSE>
      <VERSE>Thrilled me&#8212;filled me with fantastic terrors never felt before;</VERSE>
      <VERSE>So that now, to still the beating of my heart, I stood repeating:</VERSE>
      <VERSE>"'Tis some visitor entreating entrance at my chamber door&#8212;</VERSE>
      <VERSE>Some late visitor entreating entrance at my chamber door;</VERSE>
      <LASTVERSE>This it is, and nothing more."</LASTVERSE>
   </STANZA>
   <IMAGE/>
   <STANZA>
      <VERSE>Presently my soul grew stronger; hesitating then no longer,</VERSE>
      <VERSE>"Sir," said I, "or Madam, truly your forgiveness I implore;</VERSE>
      <VERSE>But the fact is I was napping, and so gently you came rapping,</VERSE>
      <VERSE>And so faintly you came tapping, tapping at my chamber door,</VERSE>
      <VERSE>That I scarce was sure I heard you"&#8212;here I opened wide the door;&#8212;</VERSE>
      <LASTVERSE>Darkness there, and nothing more.</LASTVERSE>
   </STANZA>
   </POEM>

   Листинг 7.12. Raven04.xml

Создайте таблицу стилей

1. Откройте новый, пустой файл в вашем текстовом редакторе и введите таблицу каскадных стилей, представленную в Листинге 7.13.

   Относительно этой таблицы стилей следует иметь в виду:

   • таблица стилей демонстрирует почти все свойства, рассмотренные в этой лекции;
   • все использованные в таблице стилей приемы были рассмотрены в предыдущих разделах данной лекции;
   • файл рисунка (RavShade.bmp), отображенный с использованием элементов IMAGE, представляет собой тот же рисунок, который вы отображали в предшествующих версиях документа Raven.xml, за исключением того, что он имеет теневой фон, соответствующий цвету фона элемента POEM ;
   • таблица стилей скрывает содержимое элемента AUTHOR-BIO путем присвоения значения none его свойству display.
2. Воспользуйтесь командой Save (Сохранить) вашего текстового редактора, чтобы сохранить документ на вашем жестком диске под именем Raven04.css.

   /* File Name: Raven04.css */
   
   POEM
      {font-size:12pt;
       width:5.5in;
       padding:1em;
       border-width:1px;
       background-color:rgb(225,225,225)}
   
   POEM, TITLE, AUTHOR, DATE, STANZA
      {display:block;
       margin-bottom:1em}
   
   AUTHOR-BIO
      {display:none}
   
   TITLE, AUTHOR, DATE
      {font-family:Arial,sans-serif;
       text-align:center}
   
   DATE
      {font-style:italic}
   
   TITLE
      {font-size:16pt;
       font-weight:bold;
       letter-spacing:.25em}
   
   IMAGE
      {background-image:url(RavShade.bmp);
       background-repeat:no-repeat;
       background-position:center;
       width:89px;
       height:58px;
       float:left}
   
   STANZA
      {color:navy;
       line-height:1.25em}
   
   VERSE
      {display:block}
   
   LASTVERSE
      {display:block;
       text-align:right}

   Листинг 7.13. Raven04.css
3. Отобразите документ, открыв файл Raven04.xml непосредственно в Internet Explorer 5.