打开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、 这样框架便呈现出来，实际使用时需按需调整。执行文件—另存为命令，保存网页即可。
