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

1. Откройте новый, пустой текстовый файл в вашем текстовом редакторе и заполните CSS-таблицу, как показано в Листинге 2.2.

2. С помощью команды Save (Сохранить) вашего текстового редактора сохраните таблицу стиля на жестком диске, задав имя файла Inventory01.css. Созданная вами CSS-таблица сообщает Internet Explorer 5, каким образом форматировать символьные данные элементов.

o Отображать каждый элемент BOOK с отступом сверху в 12 пт (margin-top:12pt) с переводом строки сверху и снизу (display:block), используя размер шрифта 10 пт (font-size:10pt).

o Отображать каждый элемент TITLE курсивом (font-style:italic).

o Отображать каждый элемент AUTHOR полужирным (font-weight:bold).

3. /* File Name: Inventory01.css */

4. BOOK

5. {display:block;

6. margin-top:12pt;

7. font-size:10pt}

8. TITLE

9. {font-style:italic}

10.AUTHOR

{font-weight:bold}

Листинг 2.2. Inventory.css

11. В вашем текстовом редакторе откройте документ Inventory.xml, созданный вами в предыдущем упражнении. Добавьте в конце пролога документа (непосредственно над элементом INVENTORY ) следующую инструкцию по обработке:

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

Эта инструкция по обработке устанавливает связь созданной вами CSS-таблицы и XML-документа. В результате при открытии документа в Internet Explorer 5 браузер отобразит содержимое документа в соответствии с инструкциями, записанными в таблице стилей.

12. Чтобы отразить новое имя файла, которое вы собираетесь присвоить, измените комментарий в начале документа с

<!-- File Name: Inventory.xml -->

на

<!-- File Name: Inventory01.xml -->

В Листинге 2.3 представлен весь XML-документ.

13. Воспользуйтесь командой Save As (Сохранить как) вашего текстового редактора, чтобы сохранить копию измененного документа под именем Inventory01.xml. Проверьте, чтобы этот файл был сохранен в той же папке, что и файл Inventory01.css.

14.<?xml version="1.0"?>

15.<!-- File Name: Inventory01.xml -->

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

17.<INVENTORY>

18. <BOOK>

19. <TITLE>The Adventures of Huckleberry Finn</TITLE>

20. <AUTHOR>Mark Twain</AUTHOR>

21. <BINDING>mass market paperback</BINDING>

22. <PAGES>298</PAGES>

23. <PRICE>$5.49</PRICE>

24. </BOOK>

25. <BOOK>

26. <TITLE>Leaves of Grass</TITLE>

27. <AUTHOR>Walt Whitman</AUTHOR>

28. <BINDING>hardcover</BINDING>

29. <PAGES>462</PAGES>

30. <PRICE>$7.75</PRICE>

31. </BOOK>

32. <BOOK>

33. <TITLE>The Legend of Sleepy Hollow</TITLE>

34. <AUTHOR>Washington Irving</AUTHOR>

35. <BINDING>mass market paperback</BINDING>

36. <PAGES>98</PAGES>

37. <PRICE>$2.95</PRICE>

38. </BOOK>

39. <BOOK>

40. <TITLE>The Marble Faun</TITLE>

41. <AUTHOR>Nathaniel Hawthorne</AUTHOR>

42. <BINDING>trade paperback</BINDING>

43. <PAGES>473</PAGES>

44. <PRICE>$10.95</PRICE>

45. </BOOK>

46. <BOOK>

47. <TITLE>Moby-Dick</TITLE>

48. <AUTHOR>Herman Melville</AUTHOR>

49. <BINDING>hardcover</BINDING>

50. <PAGES>724</PAGES>

51. <PRICE>$9.95</PRICE>

52. </BOOK>

53. <BOOK>

54. <TITLE>The Portrait of a Lady</TITLE>

55. <AUTHOR>Henry James</AUTHOR>

56. <BINDING>mass market paperback</BINDING>

57. <PAGES>256</PAGES>

58. <PRICE>$4.95</PRICE>

59. </BOOK>

60. <BOOK>

61. <TITLE>The Scarlet Letter</TITLE>

62. <AUTHOR>Nathaniel Hawthorne</AUTHOR>

63. <BINDING>trade paperback</BINDING>

64. <PAGES>253</PAGES>

65. <PRICE>$4.25</PRICE>

66. </BOOK>

67. <BOOK>

68. <TITLE>The Turn of the Screw</TITLE>

69. <AUTHOR>Henry James</AUTHOR>

70. <BINDING>trade paperback</BINDING>

71. <PAGES>384</PAGES>

72. <PRICE>$3.35</PRICE>

73. </BOOK>

</INVENTORY>

Листинг 2.3. Inventory01.xml

74. В Windows Explorer (Проводник) или в окне папки дважды щелкните на файле Inventory01.xml, чтобы открыть документ.

Internet Explorer 5 откроет документ Inventory01.xml и отобразит его в соответствии с правилами из связанной таблицы стилей, как показано на рисунке 2.7.

75. Чтобы почувствовать, как можно изменять представление XML-документа путем модификации связанной таблицы стилей, откройте новый, пустой текстовый файл в вашем текстовом редакторе и введите измененную CSS-таблицу, как показано в Листинге 2.4.

76. Воспользуйтесь командой Save (Сохранить) вашего текстового редактора, чтобы сохранить новую таблицу стилей на жестком диске, присвоив ей имя файла Inventory02.css.

Рис. 2.7.

Созданная вами модифицированная таблица стилей сообщает Internet Explorer 5, каким образом форматировать символьные данные элементов.

o Отображать каждый элемент BOOK с отступом сверху в 12 пт ( margin-top:12pt ) и с переводом строки сверху и снизу ( display:block ), используя размер шрифта 10 пт ( font-size:10pt ).

o Отображать каждый из элементов TITLE, AUTHOR, BINDING и PRICE в отдельной строке ( display:block ).

o Отображать элемент TITLE шрифтом с размером 12 пт ( font-size:12pt ), полужирным ( font-weight:bold ), курсивом ( font-style:italic ). (Обратите внимание, что установка для элемента TITLEразмера шрифта 12 пт превалирует над установкой размера 10 пт для родительского элемента BOOK.)

o отступ слева для каждого из элементов AUTHOR, BINDING и PRICE на 15 пт ( margin-left:15pt ).

o Отображать элемент AUTHOR полужирным ( font-weight:bold ).

o Не отображать элемент PAGES ( display:none ).

/* File Name: Inventory02.css */

BOOK

{display:block;

margin-top:12pt;

font-size:10pt}

 

TITLE

{display:block;

font-size:12pt;

font-weight:bold;

font-style:italic}

 

AUTHOR

{display:block;

margin-left:15pt;

font-weight:bold}

 

BINDING

{display:block;

margin-left:15pt}

 

PAGES

{display:none}

 

PRICE

{display:block;

margin-left:15pt}

Листинг 2.4. Inventory02.css

77. В вашем текстовом редакторе откройте документ Inventory.xml. Добавьте в конце пролога документа (над элементом INVENTORY ) следующую инструкцию по обработке:

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

Эта инструкция по обработке устанавливает связь между новой CSS-таблицей, созданной вами, и XML-документом.

78. Чтобы отразить новое присвоенное вами имя файла, измените комментарий в начале документа с

<!-- File Name: Inventory.xml -->

на

<!-- File Name: Inventory02.xml -->

В Листинге 2.5 представлен полный XML-документ.

79. Воспользуйтесь командой Save As (Сохранить как), чтобы сохранить копию измененного документа под именем Inventory02.xml. Проверьте, чтобы этот файл был сохранен в той же папке, что и файл Inventory02.css.

80.<?xml version="1.0"?>

81.<!-- File Name: Inventory02.xml -->

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

83.<INVENTORY>

84. <BOOK>

85. <TITLE>The Adventures of Huckleberry Finn</TITLE>

86. <AUTHOR>Mark Twain</AUTHOR>

87. <BINDING>mass market paperback</BINDING>

88. <PAGES>298</PAGES>

89. <PRICE>$5.49</PRICE>

90. </BOOK>

91. <BOOK>

92. <TITLE>Leaves of Grass</TITLE>

93. <AUTHOR>Walt Whitman</AUTHOR>

94. <BINDING>hardcover</BINDING>

95. <PAGES>462</PAGES>

96. <PRICE>$7.75</PRICE>

97. </BOOK>

98. <BOOK>

99. <TITLE>The Legend of Sleepy Hollow</TITLE>

100. <AUTHOR>Washington Irving</AUTHOR>

101. <BINDING>mass market paperback</BINDING>

102. <PAGES>98</PAGES>

103. <PRICE>$2.95</PRICE>

104. </BOOK>

105. <BOOK>

106. <TITLE>The Marble Faun</TITLE>

107. <AUTHOR>Nathaniel Hawthorne</AUTHOR>

108. <BINDING>trade paperback</BINDING>

109. <PAGES>473</PAGES>

110. <PRICE>$10.95</PRICE>

111. </BOOK>

112. <BOOK>

113. <TITLE>Moby-Dick</TITLE>

114. <AUTHOR>Herman Melville</AUTHOR>

115. <BINDING>hardcover</BINDING>

116. <PAGES>724</PAGES>

117. <PRICE>$9.95</PRICE>

118. </BOOK>

119. <BOOK>

120. <TITLE>The Portrait of a Lady</TITLE>

121. <AUTHOR>Henry James</AUTHOR>

122. <BINDING>mass market paperback</BINDING>

123. <PAGES>256</PAGES>

124. <PRICE>$4.95</PRICE>

125. </BOOK>

126. <BOOK>

127. <TITLE>The Scarlet Letter</TITLE>

128. <AUTHOR>Nathaniel Hawthorne</AUTHOR>

129. <BINDING>trade paperback</BINDING>

130. <PAGES>253</PAGES>

131. <PRICE>$4.25</PRICE>

132. </BOOK>

133. <BOOK>

134. <TITLE>The Turn of the Screw</TITLE>

135. <AUTHOR>Henry James</AUTHOR>

136. <BINDING>trade paperback</BINDING>

137. <PAGES>384</PAGES>

138. <PRICE>$3.35</PRICE>

139. </BOOK>

</INVENTORY>

Листинг 2.5.

140. В Windows Explorer (Проводник) или в окне папки дважды щелкните на имени файла Inventory02.xml, чтобы открыть его.

Internet Explorer 5 откроет документ Inventory02.xml и отобразит его в соответствии с правилами, установленными в связанной таблице стилей Inventory02.css, как показано на рисунке 2.8 (здесь представлено лишь четыре книги; осуществив прокрутку вниз, вы увидите остальные).

увеличить изображение
Рис. 2.8.

Ссылка. В 3 части вы найдете подробные и исчерпывающие инструкции для отображения XML-документов в Web. Вы познакомитесь с каскадными таблицами стилей, подобными только что созданным вами, в"Отображение XML-документов с использованием таблиц каскадных стилей" . О XSL-таблицах рассказывается в "Отображение XML-документов с использованием XSL-таблиц стилей" . В "Отображение XML-документов с использованием связывания данных" и "Отображение XML-документов с использованием сценариев объектной модели документа" вы узнаете об альтернативных методах отображения XML-документов в Web.