相关文章
北京网站制作最小高度100%页脚保持在底部的布局方法
北京网页设计教程/dreamweaver/入门 Dreamweaver 4 简明教程7(让你的网页更漂亮)
网站设计CSS入门教程之CSS的语法
北京网站建设Dreamweaver打造多彩文字链接
北京网站制作Flash MX 2004 星星的残影效果制作(1)
网站设计FLASH MX 2004视频教程:梦幻太空(二)
网站设计FLASH MX 2004视频教程:诞生鸡(上)
北京网站建设十二个Dreamweaver鲜为人知的小秘诀
网站制作DW2004 中文乱码解决方案 [2]
网站制作Meta标签详解
品牌理念
北京网站建设最佳合作伙伴
北京网站建设专家企通互联
竭诚为您提供网站建设服务!
友好连接
文章搜索
你的位置:首页 >> 网站制作 >> 网页设计北京网站设计采用XML和XSLT,使网页设计更紧密
网页设计北京网站设计采用XML和XSLT,使网页设计更紧密
北京网站建设如果你还未考虑采用一种单一的、紧密结合的方式进行网页设计的话,请看本文。
在网络发展初期,凝聚性(cohesiveness)是由服务器端实现的,但要牵涉到大量的人工文件管理工作。幸运的是,随着网络的日益成熟,网络开发工具也日臻完善。例如,在.NET框架下,你可以创建各种Web控件来统一设计。
XML和XSLT的转换使Web设计受益无穷。借助XML和 XSLT转换,你可以实现将动态用语(dynamic verbiage)和网站内容存储在数据库中。你可以在XML中传输数据库,然后再通过XSLT转换将其转变为HTML脚本。本文中,我将提供一个网站实例,并说明XML 和XSLT如何使你的网站设计浑然一体。
在设计用户/数据交互功能时,我最为关心的是数据的完整性、用户界面的功能性和商务规则的完善实现。我最不关心的是按钮的颜色。而这些细枝末节却往往是程序员发挥技术的地方。
当设计一个全新的页面时,我只投入最低限度的精力用于用户界面的设计,如只安置一个文本框和一个提交按钮。对于本例中的HTML网页,我增加了两个INPUT标签来完成这一任务。
<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网站建设 www.qitongnet.com
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输出。你只要记住输入控件类型,并注意把它添加为转换属性即可。
达到目的的方法有很多种,通过这个例子,我希望能帮助你们学会如何标准化HTML输出。