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文件，定义如下：

这样的一个样式文件，可以适用于任何一个网页，只要添加引用我们都可以立刻看见效果。

由于样式表的继承规则是外部的标签样式会保留下来继承给这个标签所包含的其他标签。事实上，所有在标签中嵌套的标签都会继承外层标签指定的属性值，有时会把很多层标签的样式叠加在一起，例如在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>

最新评论