来自国外博客veerle的一个系列教程，分八个部分讲解一张完整CSS页面的构建过程。虽然它不是每个步骤都解释得非常详细，但是其中提及的很多技巧和经验都很值得初学者借鉴，从界面设计到页面构建，强调了很多细节的设计理念。在翻译的过程中，个人觉得本教程比较薄弱的环节是页面整体布局的搭建，篇幅不是很充分，不过大家仍然可以通过观察源文件进行查漏补缺。

原文博客：veerle

翻译整理：西米CC

本教程最终效果如下（浏览示例页面）：

本教程素材及页面源代码下载:

1.远程下载 ximicc2.zip

2.本站下载CSS布局实战系列.rar （33.25 KB）

教程的每个部分都有其侧重点，其中前三节都是关于素材制作与设计的，要求有一定的Photoshop操作基础，我想这也是网页设计必备的基础技能之一。

下面罗列了教程每部分的主题，大家可以有选择的进行学习，相关部分的教程整理完毕后会在下列主题上添加链接：

1.导航菜单素材的设计

2.色彩选择及背景图案的制作

3.顶部图片的细节及视觉修饰

4.页面DIV布局解构

5.侧边栏导航菜单的实现

6.正文与图片的混排

7.页脚的构建

8.侧边栏友情链接的实现