建立并显示您的第一份XML文件

rnet Explorer 5 还是会使用预设的XSL样式表来显示文件；并出现「无法使用XSL 样式表」，这个部分你将在第十章中学习。
提示
如同你在本书的各个章节中所学到的，你可以直接在Internet Explorer 5 开启该文件，来快速地检查XML 文件是否为格式正确的。（如果你透过HTML 网页来显示一个XML 文件，如第三篇中将介绍的，含有错误的XML 文件会无法显示，除非你有明确地撰写script 来负责显示，否则你将不会看到错误讯息。）

显示使用串接样式表的XML 文件 1. 在文字编辑器中 开启 一个新的、空白的文本文件，并输入列表2－2 中所列的CSS程序代码。（你将在随书光盘的Inventory01.css 中找到。）
2. 使用文字编辑器的 存盘 指令来将样式表储存到本机硬盘上，并取名为Inventory01.css。
你所建立的CSS 将会告诉Internet Explorer 5 如何来安排元素的字符，如下所示：
每一个BOOK 元素之间以12 Points 的空间来显示（ margin－top:12pt），并在元素的前后放置一个换行（display:block），并且使用10 Points（font－size:10pt）的字体来显示元素。
以斜体方式显示每一个TITLE 元素（font－style:italic）：
以粗体方式显示每一个AUTHOR 元素（font－weight:bold）：
Inventory01.css
/*File Name:Inventory01.css */
BOOK
{display:block;
margin－top:12pt;
font－size:10pt}
TITLE
{font－style:italic}
AUTHOR
{font－weight:bold}
3. 在文字编辑器中， 开启 你在前面的练习中所建立的 Inventory.xml 文件。将下列的处理指令加到文件序文的结尾部份（把指令加到INVENTORY 元素之上）：
<?xml-stylesheet type="text/css" href="Inventory01.css"?>
这个处理指令会将CSS 链接到你刚建立的XML 文件。结果是，当你在Internet Explorer 5 中开启该文件，浏览器会根据样式表中的指令来显示文件内容。
4. 为了表现你将赋予该文件的新档名，将靠近文件起始部份的批注从
<!--File Name:Inventory.xml-->
改变成
<!--File Name:Inventory01.xml-->
列表2－3 显示了完整的XML 文件。（你可以在随书光盘的 Inventory01.css 中找到这段程序代码）
5. 使用文字编辑器的 另存新文件 指令，将Inventory01.xml 中修改过的文件储存到本机硬盘上。确定将文件储存在与档案Inventory01.css 所在相同的目录下。
你所建立的CSS 将会告诉Internet Explorer 5 如何来安排元素的字符，如下所示：
Inventory01.xml
<?xml version="1.0 "?>
<!--File Name:Inventory01.xml-->
<?xml-stylesheet type="text/css" href="Inventory01.css"?>
<INVENTORY>
<BOOK>
<TITLE>The Adventures of Huckleberry
Finn</TITLE>
<AUTHOR>Mark Twain</AUTHOR>
<BINDING>mass market paperback</BINDING>
<PAGES>298</PAGES>
<PRICE>$5.49</PRICE>
</BOOK>
<BOOK>
<TITLE>Leaves of Grass</TITLE>
<AUTHOR>Walt Whitman</AUTHOR>
<BINDING>hardcover</BINDING>
<PAGES>462</PAGES>
<PRICE>$7.75</PRICE>
</BOOK>
<BOOK>
<TITLE>The Legend of Sleepy Hollow</TITLE>
<AUTHOR>Washington Irving</AUTHOR>
<BINDING>mass market paperback</BINDING>
<PAGES>98</PAGES>
<PRICE>$2.95</PRICE>
</BOOK>
<BOOK>
<TITLE>The Marble Faun</TITLE>
<AUTHOR>Nathaniel Hawthorne</AUTHOR>
<BINDING>trade paperback</BINDING>
<PAGES>473</PAGES>
<PRICE>$10.95</PRICE>
</BOOK>
<BOOK>
<TITLE>Moby-Dick</TITLE>
<AUTHOR>Herman Melville</AUTHOR>
<BINDING>hardcover</BINDING>
<PAGES>724</PAGES>
<PRICE>$9.95</PRICE>
</BOOK>
<BOOK>
<TITLE>The Portrait of a Lady</TITLE>
<AUTHOR>Henry James</AUTHOR>
<BINDING>mass market paperback</BINDING>
<PAGES>256</PAGES>
<PRICE>$4.95</PRICE>
</BOOK>
<BOOK>
<TITLE>The Scarlet Letter</TITLE>
<AUTHOR>Nathaniel Hawthorne</AUTHOR>
<BINDING>trade paperback</BINDING>
<PAGES>253</PAGES>
<PRICE>$4.25</PRICE>
</BOOK>
<BOOK>
<TITLE>The Turn of the Screw</TITLE>
<AUTHOR>Henry James</AUTHOR>
<BINDING>trade paperback</BINDING>
<PAGES>384</PAGES>
<PRICE>$3.35</PRICE>
</BOOK>
</INVENTORY>
6. 在Windows 档案总管或目录窗口中，利用鼠标双击 Inventory.xml 来开启文件。Internet Explorer 5 将会开启Inventory01.xml 文件并根据链接其上的Inventory01.css 样式表中的规则来显示文件，如下图所示：

7. 为了体验你如何借着修改连结到文件的样式表更改XML 文件的外观，在文字编辑器中 开启 一个新的、空白的文字文件，并输入列表2－4 中修改过的CSS。（你将在随书光盘的 Inventory02.css 中找到这程序。）
8. 使用文字编辑器的 存盘 指令将新的样式表储存到本机硬盘上，取名为 Inventory02.css 。刚输入修改过的样式表，将会告诉Internet Explorer 5 如何安排元素的字符，数据如下：
每一个BOOK 元素之间以12 Points 的空间来显示（margin－top:12pt），并在元素的前后放置一个换行（display:block），并且使用10 Points（font－size:10pt））的字体来显示元素。
显示TITLE、AUTHOR、BINDING 与PRICE 元素，每个元素放置个别的行上。（display:block）
将TITLE 元素利用字体12 大小（font－size:12pt）、粗体（fontweight:bold）、斜体（font－style:italic）字型来显示。（注意，TITLE 元素中指定的字体12 将会覆盖TITLE 元素的父元素BOOK 中所指定的字体10。）
将AUTHOR、BINDING 与PRICE 元素以字体15 大小进行缩排（ margin －left:15pt）。
以粗体方式显示AUTHOR 元素（font－weight:bold）。
不显示PAGES 元素（display:none）。
Inventory02.css
/*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}
9. 在文书编辑器中， 开启Inventory.xml 文件。在文件序文的结尾部份加入下列程序（就加在INVENTORY 元素之上）：
<?xml－stylesheet type="text/css" href="Inventory02.css"?>
这个处理指令会将你刚建立的新CSS 链接到XML 文件。
10. 为了显示你将指定的文件名称，请修改靠近文件起始部份的批注，从
<!--File Name:Inventory.xml-->
修改成
<!--File Name:Inventory02.xml-->
列表2－5 显示了完整的XML 文件。（你可在随书光盘的 Inventory02.xml 中找到这段程序代码。）
11. 使用文字编辑器的 另存新文件 指令来将档案重新命名为 Inventory02.xml ，将文件储存到本机硬盘上。并且确定文件储存在与档案 Inventory02.css 所在相同的目录下。
12. Inventory02.css/*File Name:Inventory02.css */
13.
14. BOOK
15. {display:block;
16. margin－top:12pt;
17. font-size:10pt}
18.
19. TITLE
20. {display:block;
21. font-size:12pt;
22. font-weight:bold;
23. font-style:italic}
24.
25. AUTHOR
26. {display:block;
27. margin-left:15pt;
28. font-weight:bold}
29.
30. BINDING
31. {display:block;
32. margin-left:15pt}
33.
34. PAGES
35. {display:none}
36. PRICE
37. {display:block;
margin-left:15pt}
38. 在Windows档案总管或目录窗口中，利用鼠标双击文件名 Inventory02.xml 以 开启 该档。
Internet Explorer 5 将会开启 Inventory02.xml 文件并根据文件连结的Inventory.css 样式表中的规则来显示该文件，如下图所示（只有前五本书被显示，向下卷动将会显示剩下的三本）：

提示
本书的第三篇提供了在网站上显示XML 文件的全部指令。在第七章，笔者将讨论串接样式表（CSS），就像你在这里所建立的。在第十章中，笔者将介绍XSL 样式表。而在第八、九两章，你将学习显示XML 文件的其它方法。

上一页  [1] [2] 

   

进入问吧