随着XHTML的逐渐推广流行，HTML 在许多场合已经显得过时。World Wide Web Consortium (W3C) 于 2000 年 6 月 26 日发布了 XHTML 的第一个版本作为推荐标准。XHTML 标准的目标是取代 html。按照 W3C 的说法，“XHTML 是 html 的继续者”(http://www.w3.org/MarkUp/)。
XHTML具有两大目标：
在文档结构和表示形式之间创建更明显的分离。
将 html 重新表示为 XML 的应用程序。
使用XHTML标准的好处是：只需设计页面一次，即可让该页以完全相同的方式在任何现代的浏览器中显示和工作。例如，在按照标准生成以后，页面在Internet Explorer、Mozilla Firefox、Netscape Navigator、Opera、Camino 和 Safari）中以相同的方式显示，而无需完成任何额外的工作。并且XHTML标准可以使 Web 站点更易于为智能手机、残疾人电脑等设备访问。
由于XHTML标准要求在在文档结构和表示形式之间创建更明显的分离。因此使用CSS
样式表是必不可少的。CSS在网页中占着极重要的地位，它的使用一直是热门讨论的话题。CSS是Cascading Style Sheet的简写，译为“层叠
样式表单”。 在1997年W3C颁布HTML4标准的同时也公布了有关
样式表的第一个标准CSS1, 自CSS1的版本之后，又在1998年5月发布了CSS2版本。
CSS 的发明者的目的是除去表示性元素，即应该根据内容所表示的东西来标记内容，而
样式表应该用于美化内容。而这一点与XHTML分离文档结构和表示形式的目标是一致，（在XHTML 2.0将除去b 、 i 和 img 标记（以及 big 、 small 和 tt ），甚至不赞成使用 br ，预备从将来的发行版中除去它。原因在于大多数标记都是表示性的。它们的唯一目的就是给予浏览器指令，规定有关其内容应该如何显示，但却完全未提供有关其内容是什么的信息。） 因此它们成了最好的合作伙伴。更多关于XHTML2.0的资料，请参见：http://www-128.ibm.com/developerworks/cn/xml/x-wa-xhtml/index.html
CSS过去经常被用来定义字体的属性，而现在新标准中我们将用它来控制整个页面的显示。然而，我们必须需要做一些不同于以往的处理来适应这种新的变化，如：使用div来布局而不是表格，使用结构化、语义化的标记等等。由于采用新的处理方式，我们现在可以轻松地设计出可重用的CSS（同一个
样式文件多个WEB站点中使用）以及可换肤的WEB站点（一个站点使用多种不同风格的
样式）。
示例请见四川省建设厅信息门户,界面切换在右上方，如图1所示。由于时间原因，并未通过XHTML和CSS校验，但原理是一样的。
图1：界面
样式切换
1、重新设计站点的HTML
首先我们要去掉网页中有关外观的标签。在以前的代码中，我们常用一个表格用来在页面的内容中创建一个有边框的区块，我们还使用〈b〉来加粗文本。用<font color=red>来改变字体颜色等等。用<br>标签来创建段落等。
而要做出能适应XHTML标准和能随意换肤的网站，我们须要避免在页面中使用有关外观的标签。使文档结构和表示形式分离的一个最大的好处就是它使文档在没有CSS时，仍然可以使用和访问。表现（就是文档看上去的样子）在一个支持性好的浏览器中也将呈现的不一样，但是它的内容将永远不变，大多数情况，对于访问网站的人来说，内容实际上比表现的方式更加重要。这就是为什么给那些支持性不好的浏览器发送一个没有
样式的页面，要比把他们排斥在外要好的原因。
现在比较流行的做法是使用DIV、SPAN等标签来布局整个页面，而TABLE,UL,PRE,CODE等标签来显示数据，用UL是用来显示无序的列表信息，而OL显示有序的列表信息。这将比用TABLE来显示一个列表更有语义上的意义，同时UL和OL在浏览器中比TABLE标签更快有下载速度，并且相对于TABLE，CSS对UL和OL的外观控制更加灵活。当然对于复杂的数据，比如报表，用TABLE来显示仍然是不二的选择。
2、建立基本的通用
样式由于所有的XHTML文件都是由各种各样的HTML标签和标签内的文字组成，而一些基本的标签在每个XHTML文件都存在的，如：body、table、td、div、h1—h6、ul、li、input等等，假如我们定义好了这些标签的CSS
样式，如：字体，字号，行距，背景色，背景图等等，我们就有了一个基本的
样式风格，就如同在Word或PowerPoint中的主题，每个主题就是一套风格
样式。 因此，我们可以根据基本的HTML标签定义出一个通用的
样式来，例如建立一个siteComm.css文件，定义如下：
/*文中的
样式表语法中的"("及""为示例所用,因为blog每次保存花括号都出现错误。请在使用时改为正确的符号*/
BODY
(
background: url(images/bg_page.jpg);
font: 10pt verdana,arial,;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
)
H1, H2, H3, H4, H5, H6
(
border-bottom: solid 1px #ccc;
margin: 1em 0;
)
TD
(
font: 10pt;
)
A:link
(
color: #057AE0;
text-decoration: none;
)
A:visited
(
color: #057AE0;
text-decoration: none;
)
A:hover
(
color: #009900;
)
A:active
(
color: #009900;
)
这样的一个
样式文件，可以适用于任何一个网页，只要添加引用我们都可以马上看见效果。
由于
样式表的继续规则是外部的标签
样式会保留下来继续给这个标签所包含的其他标签。事实上，所有在标签中嵌套的标签都会继续外层标签指定的属性值，有时会把很多层标签的
样式叠加在一起，例如在body标签中定义了字体大小，那么div、p等标签也会继续一样的字体大小，假如在P标签中又定义了字体颜色，那么P标签中的文字既具有body标签的字体大小又有P标签的字体颜色。需要注重的是，table标签不会继续body的字体大小设定，所以在上面的
样式表中，我们单独来定义td的
样式。
3、定义好页面的结构布局
很多时候，我们在制作网页时总是从视觉出发，先用Photoshop或者Fireworks画出来、思考页面的配色，做一些很炫的效果，很精美的图片，再切割成小图。然后通过编辑HTML将所有设计变成页面。
然而，有视觉的缺陷的人，不能理解这些颜色或者效果。PDA、移动电话和屏幕阅读机上也无法解析这些效果。
因此外观并不是最重要的。一个结构良好的XHTML可以通过CSS的不同定义，显示成任何外观，显示在任何支持XHTML的网络设备上。
通过分析我们可以发现，对于大多数WEB网站来说，页面都是由一些类似的内容区块所组成，如：
站点标题区
站点导航(主菜单，次及菜单)
功能区(例如搜索框、用户登陆区)
内容区(文章正文或者文章、产品列表)
页脚(版权和有关法律声明)
然后我们用DIV标签来将这些区块包含起来，类似这样：
<div class="pageHeader">站点标题
</div>
<div class="pageNav">站点导航
</div>
<div class="catalogNav">栏目导航
</div>
<div class="pageContent">文章正文或列表等等
</div>
<div class="pageSearch">查询
</div>
<div class="pageBottom">页脚
</div>
通过CSS的定义，我们可以将这些DIV标签包含的区块放在页面上任何位置，再指定这些块的颜色、字体、边框、背景以及对齐属性等等。如：我们再建立siteLayout.css文件，定义如下：
.pageHeader
（
padding: 10px;
border: 1px solid #666;
height: 100px;
height: 70px;
）
.pageNav
（
padding: 10px;
border: 1px solid #666;
height: 100px;
height: 30px;
）
.catalogNav
（
float: left;
top: 130px;
padding: 10px;
border: 1px solid #666;
width: 20%;
）
.pageSearch
（
float: left;
top: 130px;
padding: 10px;
border: 1px solid #666;
width: 20%;
）
.pageContent
（
float: left;
padding: 10px;
border: 1px solid #666;
height: 400px;
width: 60%;
）
.pageBottom
（
clear: both;
padding: 10px;
border: 1px solid #666;
height: 100px;
height: 70px;
）
如此，我们定义了一个三列的页面布局：顶部自适应页面宽度。中间三列自适应页面。底部自适应页面宽度，当然您也可以将页面定义为中间只有两列等等，您只需要调整layout.css文件即可，这样您可以灵活的修改页面的布局，让页面外观发生根本的变化，而不必动到HTML源文件，这一点对于服务器端生成代码的程序尤为重要。 更多关于CSS布局的资料，请参见：http://www.w3cn.org/article/layout/2004/55.html
4、定义站点独有的
样式 经过以上两步之后，我们已经有了一个大概的页面主题外观，接下来我们要设计站点的细节，比如，对站点导航条我们想使用与普通超链接不一样的
样式，如：蓝色、加粗、字体更大、再加上有立体效果的背景图：
. pageNav a:link, . pageNav a:hover, . pageNav a:visted (Color:#36c;
font-weight:bold; font-size:120%; background: url(images/bg_siteMenu.jpg) #36c;
)
对于栏目导航，我们想给每个栏目连接加上背景色，并且有鼠标滑过和移出的效果。 栏目导航区的html代码为：
<div class="catalogNav">
<ul>
<li>
<A href="1">栏目1</A>
<li>
<A href="2">栏目2</A>
<li>
<A href="3">栏目3</A>
<li>
<A href="4">栏目4</A>
<li>
<A href="5">栏目5</A>
<li>
<A href="6">栏目6</A>
</li>
</ul>
</div>
栏目导航区对应的Css代码为：
.catalogNav ul
(
margin-left: -30px;
list-style: none;
)
.catalogNav li
(
float: left;
background: #CCC;
line-height: 30px;
border: solid 1px #black;
)
.catalogNav a
(
width: 100%;
text-align: center;
height: 30px;
)
.catalogNav a:link
(
color: #666;
background: url(arrow_off.gif) #CCC no-repeat 5px 12px;
text-decoration: none;
)
.catalogNav a:visited
(
color: #666;
text-decoration: underline;
)
.catalogNav a:hover
(
color: #FFF;
font-weight: bold;
text-decoration: none;
background: url(arrow_on.gif) #F00 no-repeat 5px 12px;
)
接下来我们还需要定义其他的站点独有的
样式，如栏目标题、文章列表、文章正文、时间、注释、提示、错误等等各种
样式，而且这些
样式多以类和id来作为选择符。这些
样式都是针对某个站点的，不适用于其他的站点，然后我们将这些
样式保存为siteStyle.css文件。
这样我们就有了3个CSS文件。 SiteComm.css：任何站点都可以使用的
样式文件，定义了常用的html标签
样式。 SiteLayout.css：站点的布局文件，能适用于大多数的网站结构，具体细节需要调整。 siteStyle.css：站点独有的
样式文件，能显示出本站点独特的风格和适应于站点的内容。
然后我们采用外部调用法：将这些
样式表与页面关联起来。
<LINK rev="stylesheet" media="all" href="css/SiteComm.css" type="text/css" rel="stylesheet">
<LINK rev="stylesheet" media="all" href="css/SiteLayout.css" type="text/css" rel="stylesheet">
<LINK rev="stylesheet" media="all" href="css/siteStyle.css" type="text/css" rel="stylesheet">
在符合XHTML标准的设计中，我们使用外部调用法，好处不言而喻，HTML文档会变得非常的小，CSS文件被存在浏览器的缓存中，仅仅需要下载一次即可，并且你只需要修改一个文件就可以改变整个网站的
样式。
并且这样我们才能通过客户端脚本，或者服务器端代码方便地改变
样式表的连接地址，而快捷地实现换肤功能。
5、根据用户设置换肤
网站
样式切换在网上已有很多现成的javascript换肤代码，一般使用cookie来保存用户设置，在请求页面时，改变页面的CSS文件连接即可。
而服务器端的换肤做法是根据用户请求，动态地生成CSS文件连接，用户设置一般保存在数据库或者cookie中。
由于我们使用了3个不同功能CSS
样式文件来显示网站，所以我们可以设计出更加灵活的换肤方案和组合，如只切换主题而保留布局，和切换布局和主题，以及各种细节等等。
使用3个CSS
样式文件额外的好处是，每当我们设计一个新的系统，它的
样式风格特性几乎都可以大部分应用到以前的系统上（因为我们采用大致相同的页面结构模型，虽然显示千差万别，但主要的框架是一样的），这样我们就可以积累出相当数量和相当风丰富的界面
样式库来。
6、通过校验
整个过程的最后一个步骤就是对XHTML\CSS代码进行验证。有很多种的工具都可以帮你对二者进行验证。
例如Dreamweaver MX即可检查我的样本代码的可访问性。你可以通过在文件菜单中选择Check Page然后选择Check Accessibility来实现。任何错误或是警告都会显示出来，还包括出现位置的行号以及对问题简要的解释。你可以在Dreamweaver MX的Reference工具中找到更多关于这些错误和警告的内容。
而Microsoft ASP.NET 2.0 具有很多有用的功能，也能帮助我们设计和生成符合 XHTML 和可访问性标准的 Web 站点。 使用 Web 标准生成 ASP.NET 2.0 Web 站点 http://www.microsoft.com/china/msdn/library/webservices/asp.net/ASPNETusStan.mspx
此外，World Wide Web Consortium (W3C)提供了超过30个的可访问性评估工具的链接。W3C还提供了针对HTML和CSS的基于Web的免费验证器。
因此假如想要改善网站友好度，可用性，可访问性等，可将新标准视为一个机会，而不是一个障碍。要了解更多关于新标准和可访问性的内容，你可以去看一看World Wide Web Consortium中的Web Accessibility Initiative (WAI)。
QQ：2693987339(点击联系)购买教程光盘
:
