体验DIV+CSS(3)：用 DIV + CSS 布局网站

一、学习准备

我们应该有准备地做任何事情，这是一个好的习惯。

开发环境
以Windows XP系统，IIS或Apache服务器为例。你也可以在其他环境下开发。
编辑工具
Dreamweaver，这里我说的编辑工具，不是自动生成代码的工具。所以将Dreamweaver调整到代码模式(Code)下。
相关手册
前面教程中已经提及过很多次了，在这里可以方便我们自行举一反三。
测试浏览器
IE6.0以及Firefox2.0，1024*768以及更高分辨率。记得，我们写的代码越标准、越严格，兼容性就会越好。当然了，部分特例除外，这些特例在以后的学习中会遇到并讲解。
其它
一杯白开水，或一杯绿茶。对于长期工作在电脑前的人来说，绿茶有太多功效。

二、网站页面的开发流程

在刚刚学习制作网页的时候，我们经常会被这样告知，在Photoshop里设计，然后做切片。所以最终结果是部分网站，全部是图片组成，包括所有的文本信息。

不过更多的时候我们是这样的，先胸有成竹地插入一个大表格……

设计制作流程，目前没有见过相关地硬性规定，这里我给大家一个合理的建议：

在Photoshop做出效果图，以象素为单位，精确的标出每个版块的布局位置。如果没有条件使用Photoshop，也可以在稿纸上绘制出。
在Dreamweaver中对照效果图，将一个页面中的每个版块的框架绘制出（在编辑模式下用DIV+CSS代码绘制）。
细化每个版块，填充相关内容。

在实际工作中我们可能还会需要若干其它的步骤。原则是我们尽量不要急于下手，好的准备可以有效地提高以后的效率。

三、用DIV+CSS 绘制网页框架

以“http://www.hanroll.com/gallery”这个页面为例。
点击打开这个页面截图，打开图片

我们可以把上面的这个图作为我们设计好地效果图。按照前面提及的开发流程，我们因该可以绘制出如下框架。（不同版块部分用不同颜色标出）。

第一步：绘制横向部分：打开完成后的效果

页面源代码：

图库__汉路轮滑时尚网

CSS：(01.css)

body {
    font-size:12px;
    font-family: "宋体", Arial, Helvetica, sans-serif;
    color:#FFF;
    background-color:#000;
    margin:5px 0 0 4px;
}
/*include Login & address*/
#pub_top {
    height:25px;
    width:996px;
    overflow:hidden;
    background-color:#999;
}
#visual {
    width:996px;
    height:100px;
    background-color:#C30;
    overflow:hidden;
}
#topbar {
    width:996px;
    height:25px;
    background-color:#666;
}
#top_plat {
    width:996px;
    height:280px;
    background-color:#F6F6F6;
}
#plat2 {
    width:996px;
    height:600px;
    background-color:#CCC;
}
#btnav {
    width:996px;
    height:25px;
    background-color:#666;
    border-bottom:1px solid #FFF;
}
#copyright {
    width:996px;
    height:80px;
    background-color:#CCC;
}

在这个页面中我们共用到了以下几个标签元素：