采用DIV+CSS进行网站前台制作，首要的一部便是进行网页布局设计。所谓的DIV+CSS网页布局设计就是在构思好了的情况下，对网页的整体框架进行简单的勾画，包括首页以及一些特殊内部页面。

        在对网页的整体布局构思完善后，使用图片处理软件如PhotoShop或FireWorks等将需要制作的界面布局简单的设计出来。

        我们以网站www.xa-seo.com.cn为例，下图为构思好的界面布局图:

        然后，我们需要根据构思图来规划一下页面的布局，我们大体上可以将页面分为以下几个部分：

1、顶部部分，包括了LOGO、MENU和一幅Banner图片

2、内容部分可分为侧边栏、主体内容；
　　    3、底部，包括一些版权、统计等信息。
　　    有了以上的分析，我们就可以很容易的布局了，我们设计层如下图:

        下图则是根据上图所画的一个实际的页面布局图，进一步说明层的嵌套关系，这样理解起来就会更简单了。

　　DIV结构如下：
　　│body {}　/*这是一个HTML元素，具体就不说明了*/
　　└#Container {}　/*页面层容器*/
　　　　　├#Header {}　/*页面头部*/
　　　　　├#PageBody {}　/*页面主体*/
　　　　　│　├#Sidebar {}　/*侧边栏*/
　　　　　│　└#MainBody {}　/*主体内容*/
　　　　　└#Footer {}　/*页面底部*/

至此，页面布局与规划可以算是已经完成。