网页设计：div分块布局技巧

打开Dreamweaver CS5后，当对话框弹出时选择HTML选项，随后进入主界面编辑区域。

1、 接下来在纸上绘制网页的整体布局草图，做到心中有数。整个页面大致可以划分为四个部分：脚注、导航菜单、主要内容区域以及导航条。

2、 然后点击“设计”视图切换至可视化编辑模式，并在代码区域编写整体结构的CSS样式，如下所示：

3、 在页面主体部分插入相应内容，即可查看整体框架的预览效果。

4、 随后开始编写导航条部分的代码，即

5、 在第一个div标签中添加代码：，然后观察其对页面的影响。

6、 编写主要内容部分的代码，即

7、 将代码插入到整体框架中，并填写“主体内容”，然后检查显示效果。

8、 开始编写菜单导航部分的代码，

9、 接着在整体框架中加入“菜单导航”的相关代码，以完成布局设置。

10、 编写脚注部分的代码，

11、 在主框架内输入代码：“脚注”，并查看最终呈现效果。

12、 整体结构大致完成后，按下F12键进行预览，若效果不理想则需进一步调整代码。将边框统一设置为边框样式，把所有 border 属性修改为 border: solid 5px fcc，确保视觉风格一致且清晰可见。

13、 当前框架未居中显示，需要修改对齐方式，在ztkj类中添加 margin:auto; 属性，从而实现页面居中对齐。

14、 这样一来，整个框架就基本完成了，实际应用时可根据需求进行细节调整。点击“文件”—“另存为”命令保存网页文档。