很多时候，我们在制作网页时总是从视觉出发，先用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文件，定义如下: