新书推介:《语义网技术体系》
作者:瞿裕忠,胡伟,程龚
   XML论坛     W3CHINA.ORG讨论区     计算机科学论坛     SOAChina论坛     Blog     开放翻译计划     新浪微博  
 
  • 首页
  • 登录
  • 注册
  • 软件下载
  • 资料下载
  • 核心成员
  • 帮助
  •   Add to Google

    >> DTD, XML Schema(XMLS), RELAX NG
    [返回] 中文XML论坛 - 专业的XML技术讨论区XML.ORG.CN讨论区 - XML技术『 DTD/XML Schema 』 → 技巧: 使用 CSS2 显示 XML 文档 查看新帖用户列表

      发表一个新主题  发表一个新投票  回复主题  (订阅本版) 您是本帖的第 5867 个阅读者浏览上一篇主题  刷新本主题   平板显示贴子 浏览下一篇主题
     * 贴子主题: 技巧: 使用 CSS2 显示 XML 文档 举报  打印  推荐  IE收藏夹 
       本主题类别:     
     anchen0617 帅哥哟,离线,有人找我吗?双子座1983-6-17
      
      
      威望:5
      等级:大二(研究C++)
      文章:281
      积分:3413
      门派:XML.ORG.CN
      注册:2004/10/17

    姓名:(无权查看)
    城市:(无权查看)
    院校:(无权查看)
    给anchen0617发送一个短消息 把anchen0617加入好友 查看anchen0617的个人资料 搜索anchen0617在『 DTD/XML Schema 』的所有贴子 访问anchen0617的主页 引用回复这个贴子 回复这个贴子 查看anchen0617的博客楼主
    发贴心情 技巧: 使用 CSS2 显示 XML 文档

    没有定制编辑器和查看器,阅读 XML 数据是相当困难的。一种查看 XML 的轻量型方法就是:将级联样式表(cascading style sheet (CSS2))附加到 XML 文档上,然后使用最新的 Web 浏览器来查看这些 XML 文档(Mozilla 非常棒,通常 IE 就足够了)。developerWorks 专栏作家 David Mertz 在本技巧文章中讨论了这一替代方法。
    阅读 XML 文档对于人类来说并不容易。XML 文档全是文本,但是各部分的可视安排未必很好地对应于各部分之间概念上的连接。而且,在标记当中查找内容使得略读也很困难。当然,XML 的主要目的并不是作为供人类直接查看的一种格式。通常,在 XML 源代码能够为人们所理解前,都 将其转换成其它格式。对于面向散文的文档,目标通常是 HTML 页面或 PDF 文件(通过“格式编排对象 [FO](Formatting Object,FO)”标记),也可以是一个打印页面。常用 XSLT 来执行到人类可读格式的转换。对于面向数据的 XML 文档,目标一般是 DBMS 数据格式或读取 XML 文 件的应用程序提供的内存表示。

    但是,developerWorks 的读者通常都是开发人员。我们的重点是介绍可以并且应该不让最终用户烦恼的许多事物。当在格式转换的幕后行踪中出现问题时,我们的工作就是详查中间格式(包括 XML)。通常,在开发过程期间,我们还要负责开发样本或测试 XML 文档, 以模拟可能发生的情况或进入到分布式应用程序中的某一阶段(在实际的生成器或客户存在之前)。

    与一些格式比较,原始格式的 XML 比较好管理。与二进制格式不同,在文本编辑器或文本查看器中打开 XML 文档也不是不可能。但是,标记很难可视地进行解析,特别是在 XML 编写者没有为便于解析而排列垂直和水平空白的情况下。如果您的工作主要是阅读原始 XML 文档,请查看我 以前评论过的 XML 编辑器之一(请参阅参考资料)。但是,对于只是偶尔查看 XML 源文件的人(或当许多人需要查看这些文件时),XML 编辑器往往显得太贵;不仅因为获得许可证的费用,还有学习曲线方面。

    使用 Web 浏览器
    几乎所有开发人员都已安装了一个非常好的 XML 查看器……好吧,至少是相当不错的。最新版本的 Internet Explorer 和 Mozilla/Netscape 都努力同时解释 XML 文档与 HTML 文档。其它象 Opera 和 Konquorer 那样的浏览器也实现 CSS2 — Opera 5+ 工作得很完美,Konqueror 2.2 是一个相当好的浏览器。大体上,Mozilla 和 Netscape 6 在显示以 CSS2 样式表中表示的样式的 XML 文档上做得非常好,而且准确。Internet Explorer(至少是版本 6)做得也不错,只是好象忽略了 display: inline 属性。这使得 IE6 不太适合于显示面向散文的 XML 文 档(但它对于面向数据的 XML 文档仍然不错)。不过,IE6 在显示分层树中缺少 CSS2 样式表的 XML 文档方面确有优势,而且它允许折叠子树。

    通常,我不是使用 XMetal(带有我 developerWorks 同事 Beno顃 Marchal 提供的一些 XMetal“规则”),就是用我称之为“智能 ASCII”来编写源代码,并使用我编写的 txt2dw.py 工具将它转换为 XML。txt2dw.py 工具将文本转换成 developerWork 的 XML 手稿格式。作为练习,我决定只使用文本编辑器(加上 Mozilla 0.9.5)编写这一技巧文章。练习帮助我彻底掌握 Web 浏览器加上 CSS2 方法。

    构建样式表
    这里展示了我是如何处理这些事物的。我用适当的 XML 方言写了一些字(使用先前的技巧作为模板)。然后,创建一个要使用的空的 dW.css CSS2 文件,并把下列行添加到我的 XML 文档中充当样式表声明:


      dW.css" type="text/css"?>


    到目前为止,只有这个样式表声明,Mozilla 还不能对查看文档结构有任何帮助。接下来要做的就是构建一个 CSS2 样式表来修饰 XML 文档。一个容易的方法是从 XML 文档的顶部开始,然后按您的方式往下做。例如,developerWorks article.dtd 文档中的第一项是表示专栏的名称等的 。 我将使这部分看上去很大并用粗体,还把它居中以示强调。事实上,甚至在这 之前,我就知道还有一些缺省值是整个文档应该具有的(我们可以根据需要,为各个上下文重设这些值)。清单 1 显示了我的 CCS2 文件的前几行。

    清单 1. 初始样式表内容


    $DOCUMENT {

      font-family: "Times New Roman";

      font-size: 12pt;

      margin-top: 5px;

      margin-left: 10px;

    }

    * {

      display: block;

      background-color: white;

      padding: 2px;

    }

    seriestitle {

      font-weight: bold;

      font-size: 18pt;

      text-align: center;

    }


    从这时开始,我继续到下一个遇到的元素(在这个示例中是 ),一个接着一个。在添加了一些块级别的元素后,我知道有必要确保所有内联元素都以这种方式出现。为此,浏览 DTD 帮助提醒我相关的元素。所以,我在清单 2 中包含了几行。

    清单 2. 处理内联元素


    /* Inline Typographic Elements */

    a, i, b, sub, sup, p>code { display: inline;

                       background-color: inherit; }

    a               { color: blue;

                       text-decoration: underline; }

    i               { font-style: italic; }

    b               { font-weight: bold; }

    b[class="red"]  { color: red; }

    b[class="blue"] { color: blue; }

    b[class="green"]{ color: green; }

    sub             { vertical-align: sub }

    sup             { vertical-align: super }

    sub,sup         { font-size: small }


    再添加一些块级别元素,您就完成了一个非常漂亮的 XML 文档的表示。更好的是,将来每次我需要查看相同 XML 方言表示的文档时,要做的这少许工作是有用的。假设使用了最新的 Web 浏览器,不需要先将 XML 源代码转换成 HTML 或 PDF 格式(developerWorks 作为其自己处理过程程的一部分执行这一操作),就可以查看完全相同的有用外观。

    最终外观
    开发 CSS2 样式表以匹配 XML 文档的方言,这一过程非常简单。当然,您会发现要担心不同的特定标记。而且,对于更多面向数据的文档,您几乎肯定要在定义的某些地方使用一些 display: table 属性。进行少量工作来设置 CSS2 样式表,使检验 XML 文档大为轻松。

    让我向您展示一张我所使用过的本文档的图片:图 1。可以在参考资料链接中找到相应的源码,但是读者可能使用不同的浏览器版本和平台,这样产生的效果会有所不同(如果您的浏览器有些方面不合理,请升级):

    图 1. 用 Mozilla 查看的、由 CSS2 样式表指导的本文档视图


       收藏   分享  
    顶(0)
      




    ----------------------------------------------
    xml这门语言太好了,我们共同努力吧!!!!!

    点击查看用户来源及管理<br>发贴IP:*.*.*.* 2004/11/13 14:22:00
     
     GoogleAdSense双子座1983-6-17
      
      
      等级:大一新生
      文章:1
      积分:50
      门派:无门无派
      院校:未填写
      注册:2007-01-01
    给Google AdSense发送一个短消息 把Google AdSense加入好友 查看Google AdSense的个人资料 搜索Google AdSense在『 DTD/XML Schema 』的所有贴子 访问Google AdSense的主页 引用回复这个贴子 回复这个贴子 查看Google AdSense的博客广告
    2024/4/19 16:59:51

    本主题贴数1,分页: [1]

     *树形目录 (最近20个回帖) 顶端 
    主题:  技巧: 使用 CSS2 显示 XML 文档(5399字) - anchen0617,2004年11月13日

    W3C Contributing Supporter! W 3 C h i n a ( since 2003 ) 旗 下 站 点
    苏ICP备05006046号《全国人大常委会关于维护互联网安全的决定》《计算机信息网络国际联网安全保护管理办法》
    62.500ms