当前位置: 首页 > 图文教程 > XML家族 > XML > XML和XSLT结合使网站设计浑然一体

XML
XML简易教程之四
XML与HTML的结合（上）
XML与HTML的结合（下）
XML入门的常见问题(一)
XML入门的常见问题(二)
XMLHTTP资料
什么是XML
什么是 XML Web Service
XML正在接管Web服务 成为SOA的基础
怎么样在网页上读取远程xml的数据
XML教程—编写结构完整的XML文档
读写xml文件的2个小函数
XML文档的基本操作
初学者如何开发出一个高质量的J2EE系统
优化 JavaScript 代码
自动更新程序的设计框架
使Firefox对XML的处理兼容IE的节点处理方法
WML学习之四 锚和任务
WML学习之五 显示表单
WML学习之六 事件

No. « 17 18 19 20 »

技术文章搜索

关键字

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

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-10-17   浏览: 38 ::
收藏到网摘: n/a

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="http://www.knowsky.com/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="http://www.knowsky.com/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">
<tr><td align="center">This is the defined header</td></tr>
<tr><td><xsl:apply-templates select="//form"/></td></tr>
<tr><td 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:template><xsl: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> 

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

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

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

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