3、定义好页面的结构布局
很多时候，我们在制作网页时总是从视觉出发，先用Photoshop或者Fireworks画出来、思考页面的配色，做一些很炫的效果，很精美的图片，再切割成小图。然后通过编辑HTML将所有设计变成页面。
然而，有视觉的缺陷的人，不能理解这些颜色或者效果。PDA、移动电话和屏幕阅读机上也无法解析这些效果。
因此外观并不是最重要的。一个结构良好的XHTML可以通过CSS的不同定义，显示成任何外观，显示在任何支持XHTML的网络设备上。
通过分析我们可以发现，对于大多数WEB网站来说，页面都是由一些类似的内容区块所组成，如：
站点标题区
站点导航(主菜单，次及菜单)
功能区(例如搜索框、用户登陆区)
内容区(文章正文或者文章、产品列表)
页脚(版权和有关法律声明)
然后我们用DIV标签来将这些区块包含起来，类似这样：
<divclass="pageHeader">站点标题
</div>
<divclass="pageNav">站点导航
</div>
<divclass="catalogNav">栏目导航
</div>
<divclass="pageContent">文章正文或列表等等
</div>
<divclass="pageSearch">查询
</div>
<divclass="pageBottom">页脚
</div>
通过CSS的定义，我们可以将这些DIV标签包含的区块放在页面上任何位置，再指定这些块的颜色、字体、边框、背景以及对齐属性等等。如：我们再建立siteLayout.css文件，定义如下：
.pageHeader
（
padding:10px;
border:1pxsolid#666;
height:100px;
height:70px;
）
.pageNav
（
padding:10px;
border:1pxsolid#666;
height:100px;
height:30px;
）
.catalogNav
（
float:left;
top:130px;
padding:10px;
border:1pxsolid#666;
width:20%;
）
.pageSearch
（
float:left;
top:130px;
padding:10px;
border:1pxsolid#666;
width:20%;
）
.pageContent
（
float:left;
padding:10px;
border:1pxsolid#666;
height:400px;
width:60%;
）
.pageBottom
（
clear:both;
padding:10px;
border:1pxsolid#666;
height:100px;
height:70px;
）
如此，我们定义了一个三列的页面布局：顶部自适应页面宽度。中间三列自适应页面。底部自适应页面宽度，当然您也可以将页面定义为中间只有两列等等，您只需要调整layout.css文件即可，这样您可以灵活的修改页面的布局，让页面外观发生根本的变化，而不必动到HTML源文件，这一点对于服务器端生成代码的程序尤为重要。更多关于CSS布局的资料，请参见：http://www.w3cn.org/article/layout/2004/55.html
4、定义站点独有的样式
经过以上两步之后，我们已经有了一个大概的页面主题外观，接下来我们要设计站点的细节，比如，对站点导航条我们想使用与普通超链接不一样的样式，如：蓝色、加粗、字体更大、再加上有立体效果的背景图：
