采用XML和XSLT，使网页设计更紧密如果你还未考虑采用一种单一的、紧密结合的方式进行网页设计的话，请看本文。
}-q,[#Xq&Ld-L}
eFx+@X)U
在网络发展初期，凝聚性（cohesiveness）是由服务器端实现的，但要牵涉到大量的人工文件管理工作。幸运的是，随着网络的日益成熟，网络开发工具也日臻完善。例如，在.NET框架下，你可以创建各种Web控件来统一设计。
6@!j(@8uh)J
gP
Ye4K(oh}%f
XML和XSLT的转换使Web设计受益无穷。借助XML和 XSLT转换，你可以实现将动态用语（dynamic verbiage）和网站内容存储在数据库中。你可以在XML中传输数据库，然后再通过XSLT转换将其转变为HTML脚本。本文中，我将提供一个网站实例，并说明XML 和XSLT如何使你的网站设计浑然一体。
4bH&m&iJ&`z X @ G
JY6ca4W
在设计用户/数据交互功能时，我最为关心的是数据的完整性、用户界面的功能性和商务规则的完善实现。我最不关心的是按钮的颜色。而这些细枝末节却往往是程序员发挥技术的地方。
e Uv7` vc d5V.i
C:x(Ko9^:q;p2o It
当设计一个全新的页面时，我只投入最低限度的精力用于用户界面的设计，如只安置一个文本框和一个提交按钮。对于本例中的HTML网页，我增加了两个INPUT标签来完成这一任务。
&|*V(C
U-g f
K ?[l"J s
<html>
+d v D {4Y:UZgm1?AIA(kA
<head>
@6EC
cut.w
</head>
m9}e-qd
<body>
*j e4Y)u%[l+A6@,r5Zl
<form method="POST" name="thisForm" id="thisForm" action="somepage.php">
G"w j KtJI cF
<input type="text" name="txtText" id="txtText" size="25"><br>
*^ Nn9e%T7T
<input type="submit" name="btnSubmit" id="btnSubmit" value="Submit">
b7];F Fq D kL
</form>
z6O7n#h5iS8Om+G
</body>
T,Z&P#kK y @ a3i
</html>
7zv'\n y9]
;an2_*f z(R
以上代码段完成了主要功能，但还需用XML和XSLT来对其加以美化。
I }+V
nK9ic,G
"w(}K9SdJ8M%w1l
在XML中，代码有开头和结尾标签，而在HTML中没有。INPUT 和BR标签是个特例，它们不需结尾标签。然而，在结尾标签标记“>”前加一个正斜杠，可确保HTML符合XML规范。如果在编写HTML脚本时注意遵从这些规范，你就能够将XML/HTML（aka XHTML）转换为不错的HTML页面。
Q@b:n Y|
Q"f PY a&tX
<form method="POST" name="thisForm" id="thisForm" action="somepage.php">
uYX9{W3ZqK-j
<input type="text" name="txtText" id="txtText" size="25" transform="blueText"/>
&@^J1o y5]
<br/>
Dm:s w*R&}
@
<input type="submit" name="btnSubmit" id="btnSubmit" value="Submit"
%D
?xmKV+c j
transform="bigButton"/>
E HwS(jz6d!i
</form>
l
? {}%D5_
a:p3S3h7e8x'q0I/I;R
运行下列代码，完成XSLT转换：
W6?2t#E)S;BK[5g]:y
<?xml version="1.0"?>
&v(\Q ~ X uAf
<xsl:stylesheet
U;_ v3CH A)|
xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"
`l4wNT*j$C_7LH;@
>
l;OP!L@3W
<xsl:output method="html"/>
x4h Q \:~rd-d:I
Us L7v4Z
W(r P1A
<xsl:template match="/">
L l T/H&r9U4Ux7bn I%S
<table width="100%" cellpadding="0" cellspacing="0">
{7k(^/j H9k
H2m oiD
<tr><td align="center">This is the defined header</td></tr>
k,K3h k zS$~ I O
<tr><td><xsl:apply-templates select="//form"/></td></tr>
}2` b~`9d y{ m5~
C
<tr><td align="center">This is the defined footer</td></tr>
+| V7M!b(y g
</table>
Eu2`tt]
</xsl:template>
FQdWM V
xOU8n#c&\pG0uQ
<xsl:template match="form">
]7c:J uv:TM)L
<xsl:element name="form">
;h*z)bS'z0F!F Iz h
<xsl:attribute name="method"><xsl:value-of
3I+v!o(XJ#eyu
select="@method"/></xsl:attribute>
G1Vxh,Z;zk;H[8n
<xsl:attribute name="action"><xsl:value-of
^+bR8q!`F2D
select="@action"/></xsl:attribute>
*nxb(A+T;EN:B
<xsl:attribute name="name"><xsl:value-of select="@name"/></xsl:attribute>
2b]"\ E JlM;G!B
l
<xsl:attribute name="id"><xsl:value-of select="@id"/></xsl:attribute>
!U;[+PU4T] P g Z
<xsl:apply-templates select="*"/>
|&L)V@_m%z
</xsl:element>
|f_ mw {9] f,U
</xsl:template>
0j`,U2q^7RC T4h1X e
u]j7la+zzy
<xsl:template match="*">
{ v W*sM.P:T&d3q;z
<xsl:choose>
:A x HH;yex
<xsl:when test="@transform='blueText'"><xsl:element name="input">
X!q$q%i4` m)S8L
<xsl:attribute name="name"><xsl:value-of select="@name"/></xsl:attribute>
B6F U,U6kr
<xsl:attribute name="id"><xsl:value-of select="@id"/></xsl:attribute>
!|,N-S6\ a0D'[ O#{ Z&]
<xsl:attribute name="type">text</xsl:attribute>
r&qW3_&HB ?%{4k |
<xsl:attribute name="style">color:blue</xsl:attribute>
,V[ i(D C
<xsl:if test="@value"><xsl:attribute name="value"><xsl:value-of
B J f8\)sN
select="@value"/></xsl:attribute></xsl:if>
4{*b;` I6UP
</xsl:element>
B s;S7Fgk(MJ
</xsl:when>
8?1?`
u [(d(z N
<xsl:when test="@transform='redText'"><xsl:element name="input">
b/eJp dY O*?/X6@(C f
<xsl:attribute name="name"><xsl:value-of
Af)T?aABr~
select="@name"/></xsl:attribute>
DG w Qy-M.Y
<xsl:attribute name="id"><xsl:value-of
G(s-Z;_7T+|
dc
select="@id"/></xsl:attribute>
e
\?0N
u2D
<xsl:attribute name="type">text</xsl:attribute>
V4M+TM8~ [
<xsl:attribute name="style">color:red</xsl:attribute>
!Jf:Sa2a
<xsl:if test="@value"><xsl:attribute name="value"><xsl:value-of
!nc SB{Xce;t
select="@value"/></xsl:attribute></xsl:if>
I"`5E0v*E
$C G)?&n&} f
A
</xsl:element>
O"y!F
YT3F,s!K9x
</xsl:when>
-{cU+f7Jv]} S1N
<xsl:when test="@transform='bigButton'"><xsl:element name="input">
id&T3NL,m5C L-X
<xsl:attribute name="name"><xsl:value-of
PZ([Z4v-k-U
select="@name"/></xsl:attribute>
7gGy!i;Q V:[ B!U5M
<xsl:attribute name="id"><xsl:value-of
Z/OxX._ nhV H
select="@id"/></xsl:attribute>
Ippor/~9t
<xsl:attribute name="style">height:30px;width:100px;font-
y8L
ucX%K P;m;N
size:18pt;font-weight:700;</xsl:attribute>
&LOX3s(lc*d%\
q:I
<xsl:attribute name="value"><xsl:value-of
T'B g2f j
select="@value"/></xsl:attribute>
Q2c(s"z"D
</xsl:element>
T@1H&cQK7u$\)}
</xsl:when>
?r(M$DV{U:x
</xsl:choose>
hZ{
G5vh'M
</xsl:template>
*Gy:V*~8[4^.@[#o
.Z!NoYq tY
</xsl:stylesheet>
P1n5[Q4gY6w
WTa@5y
以上代码无法为你实现创建命名空间、定义XML标签、确认DTD或schema。它使你能够创建可行的HTML脚本，并可转化为完整的新页面，无需担心设计因素。
7^.N)s%VD FoC!n
M? v!`
^ET nP
在样式表中，我用HTML标签的转换属性驱动转换操作。我曾考虑用一个FORM窗体作为定义转换操作所需的用户控件的单元，因为所有用于用户输入的控件都应在一个FORM中。本例中，输出为一个文本INPUT，文本颜色为蓝色；一个高20像素、宽100像素的按钮，字体为18点加粗。我可以通过修改转换属性来改变文本框中的文本颜色。
S5Z2_d1Y&F2G
HS;Ug$g/k
有多种方法可将静态内容添加到网页中，但出于演示目的，我只采用最简单的方式，即在样式表中增加header和footer。
.s)T
}'Du
3H/FyY e1N ?
现在，当我要创建一个新窗体用于用户输入时，我要做的只是创建一个一般窗体。一旦一般窗体通过测试，我就可以将这些窗体添加到转换中生成主题的HTML输出。你只要记住输入控件类型，并注意把它添加为转换属性即可。
T
Q]"V,`,m8R }
d [:yU Q
U*l5E7a0A
达到目的的方法有很多种，通过这个例子，我希望能帮助你们学会如何标准化HTML输出。