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、这样整个框架就出来，在实际的使用过程中要根据自己的需要进一步调整，执行文件-另存为命令，将网页保存就完成了。
float+margin实现左右布局。float能够使得元素向左或者向右靠边布局，如果在同级元素中设置一个正常流的区域与浮动块并列，则浮动块会在该正常流同级区域的边界处，只是浮动块会影响该区域块的布局，所以要清除浮动块的影响，所以此时将正常流区域块的盒子设置margin等于浮动块的宽度既可以清除影响。
<style>.main{clear:bothwidth:800pxmargin:auto}
.left{float:leftwidth:390pxheight:300pxborder:1px solid #ccc}
.right{float:rightwidth:390pxheight:300pxborder:1px solid #ccc}
</style>
<div class="main">
<div class="left">左侧</div><div class="right">右侧</div>
</div>
一、html元素可分为三大类：块元素、内联元素、可变元素1.块元素：
常见块状元素：div,p,ul,ol,li,dl,dt,dd,form,hr,table,tr,td,h1-h6,filedset,caption
块状元素特点：
(a)以块的形式显示为一个矩形区域；
(b)块状元素独占一行，自上而下排列；
(c)块状元素可以定义自己的宽度和高度，以及盒模型中的margin,padding,border；
(d)块状元素可以作为一个容器包含其他的块状元素或内联元素。
2.内联元素(行内元素)：
常见内联元素：a,strong,b,i,em,span,label,img,input
内联元素特点：
(a)内联元素在一行逐个进行显示；
(b)内联元素没有自己的形状，不能定义宽度和高度，它的宽高由内容来决定；
(c)内联元素设置与高度相关的一些属性(如margin-top,margin-bottom,padding-top,padding-bottom,line-height)，显示无效或显示不准确；
(d)内联元素设置左右填充和外间距是可以的。
内联块状元素：img,input,textarea
内联块状元素特点：
(a)即具有内联元素特点，也具有块状元素特点
(b)既可以定义容器的宽，高，margin，padding等，还可以和其他内联元素在一行显示
3.可变元素
二、元素类型转换
display:block|inline|inline-block|none|list-item
block:将元素转换为块状元素(大部分块状元素的默认display属性值)
inline:将元素转换为内联元素(大部分内联元素的默认display属性值)
inline-block:将元素转换为内联块状元素(img,input等元素的默认display属性值)
list-item:将元素转换为列表类型(li的默认display属性值)
none:元素隐藏不可见
注：当元素设置了float属性后，就相当于设置了display:block可以给元素定义宽，高了
三、置换元素和非置换元素
1.置换元素
浏览器根据元素的标签和属性，来决定元素的具体显示内容
如img标签，src属性决定了在网页呈现不同的图片
如input标签，type属性决定了在网页中呈现什么类型的input控件
2.非置换元素
除置换元素外其他的html元素都是非置换元素
标签之间书写什么样的内容，浏览器就显示什么内容
