注册本站  论坛  繁體中文

电脑技巧
手机 | MP3 | MP4 | 显卡 | 主板 | 显示器 | 光存储 | 笔记本 | 网络设备 | 移动存储 | 数码相机
键鼠 | CPU | 音箱 | GPS | 电视 | 服务器 | 投影机 | 机箱电源 | 品牌电脑 | 办公打印 |
| 网站首页 | Cisco | Windows | Linux | Java | Dotnet | Oracle | 网页设计 | 平面设计 | 安全 | 软件应用 | 电脑维修 | 办公维修 |
您现在的位置: 电脑技巧 >> 网页设计 >> XML >> 网页设计正文

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

文章来源:网页教学网 作者:站长整理 更新时间:2007-10-6 20:49:00 【 】 【加入收藏
如果你还未考虑采用一种单一的、紧密结合的方式进行网页设计的话,请看本文。

     在网络发展初期,凝聚性(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
    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输出。

  • 上一篇网页设计:

  • 下一篇网页设计:
  • 最 新 热 门
     Flash教程:if条件语句的用法
     Flash教程:测试AS代码的执行速度
     Flash教程:trace()的使用
     实现在AJAX下的前进、后退功能
     创建吸引访问者的网站内容的14种方法
     LBS功能:图片的自适应实现代码
     LBS增加引用地址和永久地址点击复制功能
     学习CSS布局网页的一些实例
     CSS学习者:2008年不要作浮躁的人
     网页设计制作之改进超级链接效果
    最 新 推 荐
     学习XML关于图像超链接的制作
     使用XML实现多渠道接入网站的构架
     将XML数据转换成HTML
     历数Firefox2.0对XML处理的改进
     用XML将机器内码转换为人们容易理解的信息
     Microsoft的XMLHTTP对象介绍
     XQuery 初学者入门教程:XQuery 术语和语法
     XQuery 初学者入门教程:XQuery FLWOR + HT…
     XQuery 初学者入门教程:XQuery FLWOR 表达…
     jQuery入门简介
    相 关 文 章

    XHTML常用标签介绍
    HTML网页图片标记<IMG>学习教程
    HTML网页超链接标记<A>学习教程
    HTML网页列表标记学习教程
    HTML表单标记教程(5):文字域标记<TEXTAREA>
    HTML表单标记教程(4):<SELECT>标记
    HTML表单标记教程(3):输入标记<INPUT>
    HTML表单标记教程(2):<FORM>的属性应用
    HTML表单标记教程(1):<FORM>标记概述
    学习XML关于图像超链接的制作

    | 设为首页 | 加入收藏 | 联系站长 | 友情链接 | 版权申明 | 网站公告

     

    Copyright 2006-2008 pcjx.com All Rights Reserved
    电脑技巧 版权所有 粤ICP备06059145号 地图
    本网站所有内容未经许可不得转载或做其他使用