网页制造aiyiweb文章简介：使用XHTML标准的好处是：只需设计页面一次，即可让该页以完全相反的方式在任何现代的浏览器中显示和任务。例如，在按照标准生成当前，页面在Internet Explorer、Mozilla Firefox、Netscape Navigator、Opera、Camino 和 Safari）中以相反的方式显示，而无需完成任何额外

随着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 
( 
&n