操作方法
启动dreamweaver cs5,在弹出的对话框窗口中选择html,进入主界面编辑区域。
接着对网页的整个布局在草纸上绘制下来,做到心中有数,主要分成那几个模块。主要有脚注、菜单导航、主体、导航条四大部分。
接着点击设计进入设计状态,在代码区域书写整体框架的css,即 #ztkj{width:80%; boder:1px solid #000000; height:800px;} 在body里添加<div id="ztkj"></div>即可在下面看到整体框架。
接着在书写导航条代码,即 #dht{padding:10px; boder:1px solid#000000; background-color:#a2a2ff;} 在第一个div中输入<div id="dht"></div>,查看效果变化。
书写主体内容的代码,即 #ztnr{ float:left;width:60%; height:600px;boder:1px solid #000000; text-align:center; margin-light:10px; margin-left:10px;} 在整体框架中输入<div id="ztnr">主体内容</div>,查看效果
书写菜单导航代码 #cddh{ float:right; margin-right:10px; width:35%;boder:1px #a2a2ff; height:600px;} 接着在整体框架中输入代码<div id="cddh">菜单导航</div>
书写脚注的代码 #jz{ padding:10px; boder:3px #a2a2ff; text-algin:center; clear:both; margin-top:20px;} 在整体框架中输入代码<div id="jz">脚注</div>查看效果。
这样大体框架就制作出来了,按f12进行查看效果,效果不好需要进一步修改代码。把边框设置出来,把所有的boder进行修改为border:solid 5px #fcc;
由于整个框架不在中间位置,需要修改让其居中对齐,所以要在ztkj中添加一条语句margin:auto;
这样整个框架就出来,在实际的使用过程中要根据自己的需要进一步调整,执行文件-另存为命令,将网页保存即可。