本教程为且行资源原创，欢迎转载，遵循：“署名-非商业用途-保持一致”的创作共用协议.
Dreamweaver是公认的最好的网页设计工具，从Dreamweaver8开始对CSS已经有了近乎
完美的支持，在这里我也以Dreamweaver最新版本CS3相当于Dreamweaver9.0为工具向
大家介绍CSS布局的实例。
我们先要来认识CSS样式面板(如果没有显示，可以窗口菜单找到)：
大家来看一下示意图，有几个地方是值得注意的：
在最上方我们可以看到CSS样式是和AP元素组合 在一起的，AP元素实际就是层即<div>，这是布局里的重要标签，而css样式面板会为我们提供几乎所有关于CSS的操作包括对各个对象的样式定义。
注意一：全部模式：在这种模式下，用户能够看到当前文档所有使用和定义的样式。我们可以直接选择其中的CSS样式，并在下方的属性里修改值。
正在模式：其实就是当前模式，是显示当前所选中对象的样式信息，在这种模式下大家注意规则面板的右下角有两个按钮，其中一个是规则层叠模式，它会列出对当前样式有关的(有影响，层叠)的所有样式。
注意二:面板的左下角提供了属性的排列方式切换：类别 字母 只显示设置属性
注意三：面板的右下角提供了对样式的编辑：导入 添加 修改和删除。
下面介绍如何利用Dreamweaver来创建css布局页面：
1 新建一个HTML文档
2 使用工具栏上的布局工具组，选择div标签，如下图：
插入div的位置：
- 在插入点：
- 在结束标签之前
- 在开始标签之后
。。。。
类是指在文档定义过的class属性
id是指在文档中定义过的id但没有使用过的id，我们在这里定义id为 header意指网页的顶部
因为这是一个新文档，我们没有定义过class也没有定义过id所以就新建一个css样式，我们因为前面定义了id为header所以在新建的csss样式表的选择器中我们选择#header
确定后会出现CSS文件保存对话框：存在style文件夹下命名为keshi.css(可以自己选择文件夹和文件名：))关于CSS的具体设置，先不要管它。
插入div标签也按确定按钮
在Dreamweaver的代码视图中将出现以下两行标签：
head区：<link href="style/keshi.css" rel="stylesheet" type="text/css" />
body区：<div id="header">此处显示 id "header" 的内容</div> 有事情要忙了，先写到这里，有时间再接着写：)
