Опубликован: 24.01.2007 | Доступ: свободный | Студентов: 9066 / 1431 | Оценка: 4.28 / 4.09 | Длительность: 20:51:00
Лекция 7:

Отображение 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-документы, описанные в этой лекции).

Ссылка. Официальную спецификацию пространства имен вы можете найти на Web-странице консорциума W3C по адресу http://www.w3.org/TR/REC-xml-names/.

Пример

Версия документа 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.
Максим Попов
Максим Попов

Почему при использовании скриптов, приведенных в курсе Основы XML

лекция Лекция 8: 

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

не происходит связывания XLM документа с HTML?

Отображаются пустые поля. Браузер IE11

Владислав Нагорный
Владислав Нагорный

Подскажите, пожалуйста, планируете ли вы возобновление программ высшего образования? Если да, есть ли какие-то примерные сроки?

Спасибо!

Геннадий Шестаков
Геннадий Шестаков
Беларусь, Орша
Наталья Алмаева
Наталья Алмаева
Россия