XML和XSLT结合使网站设计浑然一体

2016-02-19 21:45 9 1 收藏

get新技能是需要付出行动的,即使看得再多也还是要动手试一试。今天图老师小编跟大家分享的是XML和XSLT结合使网站设计浑然一体,一起来学习了解下吧!

【 tulaoshi.com - Web开发 】

  XML和XSLT的转换使Web设计受益无穷。借助XML和 XSLT转换,你可以实现将动态用语(dynamic verbiage)和网站内容存储在数据库中。你可以在XML中传输数据库,然后再通过XSLT转换将其转变为HTML脚本。

  在网络发展初期,凝聚性(cohesiveness)是由服务器端实现的,但要牵涉到大量的人工文件管理工作。幸运的是,随着网络的日益成熟,网络开发工具也日臻完善。例如,在.NET框架下,你可以创建各种Web控件来统一设计。

  在设计用户/数据交互功能时,如何让数据的完整性、用户界面的功能性和商务规则的完善实现。本文将提供一个网站实例,并说明XML 和XSLT如何使你的网站设计浑然一体。

  
  以下是引用片段:
  html
  head
  /head
  body
  form method="POST" name="thisForm" id="thisForm" action="somepage.php"
  input type="text" name="txtText" id="txtText" size="25"br
  input type="submit" name="btnSubmit" id="btnSubmit" value="Submit"
  /form
  /body
  /html  
   

        以上代码段完成了主要功能,但还需用XML和XSLT来对其加以美化。

  在XML中,代码有开头和结尾标签,而在HTML中没有。INPUT 和BR标签是个特例,它们不需结尾标签。然而,在结尾标签标记“”前加一个正斜杠,可确保HTML符合XML规范。如果在编写HTML脚本时注意遵从这些规范,你就能够将XML/HTML(aka XHTML)转换为不错的HTML页面。  

  以下是引用片段:
  form method="POST" name="thisForm" id="thisForm" action="somepage.php"
  input type="text" name="txtText" id="txtText" size="25" transform="blueText"/
  br/
  input type="submit" name="btnSubmit" id="btnSubmit" value="Submit"
  transform="bigButton"/
  /form 运行下列代码,完成XSLT转换:
  ?xml version="1.0"?
  xsl:stylesheet
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"
  
  xsl:output method="html"/
  xsl:template match="/"
  table width="100%" cellpadding="0" cellspacing="0"
  trtd align="center"This is the defined header/td/tr
  trtdxsl:apply-templates select="//form"//td/tr
  trtd align="center"This is the defined footer/td/tr
  /table
  /xsl:template
  xsl:template match="form"
  xsl:element name="form"
  xsl:attribute name="method"xsl:value-of
  select="@method"//xsl:attribute
  xsl:attribute name="action"xsl:value-of
  select="@action"//xsl:attribute
  xsl:attribute name="name"xsl:value-of select="@name"//xsl:attribute
  xsl:attribute name="id"xsl:value-of select="@id"//xsl:attribute
  xsl:apply-templates select="*"/
  /xsl:element
  /xsl:templatexsl:template match="*"
  xsl:choose
  xsl:when test="@transform='blueText'"xsl:element name="input"
  xsl:attribute name="name"xsl:value-of select="@name"//xsl:attribute
  xsl:attribute name="id"xsl:value-of select="@id"//xsl:attribute
  xsl:attribute name="type"text/xsl:attribute
  xsl:attribute name="style"color:blue/xsl:attribute
  xsl:if test="@value"xsl:attribute name="value"xsl:value-of
  select="@value"//xsl:attribute/xsl:if
  /xsl:element
  /xsl:when
  xsl:when test="@transform='redText'"xsl:element name="input"
  xsl:attribute name="name"xsl:value-of
  select="@name"//xsl:attribute
  xsl:attribute name="id"xsl:value-of
  select="@id"//xsl:attribute
  xsl:attribute name="type"text/xsl:attribute
  xsl:attribute name="style"color:red/xsl:attribute
  xsl:if test="@value"xsl:attribute name="value"xsl:value-of
  select="@value"//xsl:attribute/xsl:if
  /xsl:element
  /xsl:when
  xsl:when test="@transform='bigButton'"xsl:element name="input"
  xsl:attribute name="name"xsl:value-of
  select="@name"//xsl:attribute
  xsl:attribute name="id"xsl:value-of
  select="@id"//xsl:attribute
  xsl:attribute name="style"height:30px;width:100px;font-
  size:18pt;font-weight:700;/xsl:attribute
  xsl:attribute name="value"xsl:value-of
  select="@value"//xsl:attribute
  /xsl:element
  /xsl:when
  /xsl:choose
  /xsl:template
  /xsl:stylesheet 

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

  以上代码无法为你实现创建命名空间、定义XML标签、确认DTD或schema。它使你能够创建可行的HTML脚本,并可转化为完整的新页面,无需担心设计因素。

  在样式表中,用HTML标签的转换属性驱动转换操作。我曾考虑用一个FORM窗体作为定义转换操作所需的用户控件的单元,因为所有用于用户输入的控件都应在一个FORM中。本例中,输出为一个文本INPUT,文本颜色为蓝色;一个高20像素、宽100像素的按钮,字体为18点加粗。我们可以通过修改转换属性来改变文本框中的文本颜色。

  有多种方法可将静态内容添加到网页中本例中只采用最简单的方式,即在样式表中增加header和footer。

  现在,要创建一个新窗体用于用户输入时,要做的只是创建一个一般窗体。一旦一般窗体通过测试,就可以将这些窗体添加到转换中生成主题的HTML输出。你只要记住输入控件类型,并注意把它添加为转换属性即可。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

来源:http://www.tulaoshi.com/n/20160219/1627048.html

延伸阅读
标签: Web开发
以前从来没有用过 schema, 这次希望能给我的 xml 文件加上 namespace, schema, 然后用 xslt 转换成 html, 没想到花了不少功夫。现在我把工作正常的结果记录下来,希望对大家有些帮助。 先来看看我的 xml 文件。打算用来定义网页的菜单。 ?xml version="1.0" encoding="GB2312"?menu_itemsmenu_item href="...
标签: PHP
<?php         require_once "DB.php";            //PEAR中的数据库处理类     $dataType = "mysql" ;           &...
标签: 生活常识
有没有近视和老花一体的眼镜 有没有近视和老花一体的眼镜 第一:近视眼的人照样会老花,只是近视和老花有一部分度数会相抵消,有些近视的人不戴老花镜要把近视镜摘掉才能看清近处,但是有些人看近处就要换一副老花镜,这样很不方便,而且还会造成头晕、眼涩、眼干等不适。 第二:很多人患了老花后不够重视,随便买一副眼镜配戴,而且...
功能不同 简单的说手自一体是自动挡加了一些功能的,是可以人为的给变速箱电脑一个换档信息,就好象手动档车辆那样换档的感觉一样 (图为手自一体的汽车) 变速比不同 就是有两套变速箱,各自的变速比是不同的,在不同的行车环境可选择不同的变速方式,如在密集交通时可使用自动档,以减轻操作强度;在长途或高速时可选择手动,以体验...
标签: 电脑
1、一体机又称AIO(All In One),顾名思义,所谓一体机就是把传统台式机de显示器、主机箱、甚至键盘鼠标整合于一体,将硬件全部集成于显示器后部。因此,一体机没有了庞大de主机箱、零零碎碎de配件产品,以及各种繁杂de电源和线路,既节省空间又方便移动,看起来简洁时尚、美观大方。 2、但是一体机与传统de台式机de定位并不完全...

经验教程

347

收藏

72
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部