1、启动dreamweaver cs5，在弹出的对话框窗口中选择html，进入主界面编辑区域。
2、接着对网页的整个布局在草纸上绘制下来，做到心中有数，主要分成那几个模块。主要有脚注、菜单导航、主体、导航条四大部分。
3、接着点击设计进入设计状态，在代码区域书写整体框架的css，即
#ztkj｛width:80%
boder:1px solid #000000
height:800px}
在body里添加<div id="ztkj"></div>即可在下面看到整体框架。
4、接着在书写导航条代码，即
#dht{padding:10px
boder:1px solid#000000
background-color:#a2a2ff}
在第一个div中输入<div id="dht"></div>，查看效果变化。
5、书写主体内容的代码，即
#ztnr{
float:leftwidth:60%
height:600pxboder:1px solid #000000
text-align:center
margin-light:10px
margin-left:10px}
在整体框架中输入<div id="ztnr">主体内容</div>，查看效果
6、书写菜单导航代码
#cddh{
float:right
margin-right:10px
width:35%boder:1px #a2a2ff
height:600px}
接着在整体框架中输入代码<div id="cddh">菜单导航</div>
7、书写脚注的代码
#jz{
padding:10px
boder:3px #a2a2ff
text-algin:center
clear:both
margin-top:20px}
在整体框架中输入代码<div id="jz">脚注</div>查看效果。
8、这样大体框架就制作出来了，按f12进行查看效果，效果不好需要进一步修改代码。把边框设置出来，把所有的boder进行修改为border:solid 5px #fcc
9、由于整个框架不在中间位置，需要修改让其居中对齐，所以要在ztkj中添加一条语句margin:auto
10、这样整个框架就出来，在实际的使用过程中要根据自己的需要进一步调整，执行文件-另存为命令，将网页保存就完成了。
html页面中表单怎么用div分列布局主要分两个步骤操作：
第一种情况，float浮动相同
让两个div盒子的float值相同，比如都设置float:left或float:right，宽度设置合适即可。这里我们通过案例实现一行两列DIV布局。
1、完整实例DIV+CSS代码：
<!DOCTYPE html><html>
<head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8" />
<title>两个DIV并排</title>
<style>
.div-a{ float:leftwidth:49%border:1px solid #F00}
.div-b{ float:leftwidth:49%border:1px solid #000}
</style>
</head>
<body>
<div class="div-a">第一个DIV盒子</div>
<div class="div-b">第二个DIV盒子</div>
</body>
</html>
2、实例截图
一行两列DIV并排效果截图
需要注意是宽度，要想一行两列DIV布局，避免第三个DIV也并排，这里就要设置计算好宽度（这里设置百分比宽度为49%），三个DIV盒子宽度之和大于父级宽度，两个DIV宽度之和小于父级宽度，即可实现只有2个DIV并排。
第二种情况，float浮动值不同
一个设置为float:left一个设置为float:right.。
1、完整HTML源代码：
<!DOCTYPE html><html>
<head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8" />
<title>两个DIV并排</title>
<style>
.div-c{ float:leftwidth:49%border:1px solid #F00}
.div-d{ float:rightwidth:49%border:1px solid #000}
</style>
</head>
<body>
<div class="div-c">第三个DIV盒子</div>
<div class="div-d">第四个DIV盒子</div>
</body>
</html>
2、两列并排DIV实例截图
