1、启动dreamweaver cs5，在d出的对话框窗口中选择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、这样整个框架就出来，在实际的使用过程中要根据自己的需要进一步调整，执行文件-另存为命令，将网页保存就完成了。
1. 如图上面那两个div设置百分比宽度不要占满，
footer CSS.one{width:1240pxheight:340pxmargin:16px auto 16px}.one o{width:702pxheight:320pxbackground:#333float:leftborder-radius:5pxborder:10px solid #666}.one o .ss{width:702pxheight:155pxbackground:#333float:leftborder-radius:5px}.one o .three{width:702pxheight:155pxbackground:#333border-radius:5pxborder-top:10px solid #666float:left}aside{width:492pxheight:340pxbackground:#666float:rightborder-radius:5px}footer{width:1240pxheight:60pxbackground:#666border-radius:5pxmargin:0 auto 10pxtext-align: centerline-height:60pxcolor:whitefont-size:28px}。 2. HTML如何把网页分成多个部分
<html>
<frameset cols="25%,50%,25%">
<frame src=/example/html/frame_a>
<frame src=/example/html/frame_b>
<frame src=/example/html/frame_c>
</frameset>
</html>
上面的代码是将网页分成垂直的3部分，大小依次是25%,50%,25%
3. Html怎么把一个页面分成上中下三部分,中间和下面再分成左右两部分
<frameset rows="20%,60%,20%">
<frame src=top>
<frameset cols="20%,*">
<frame src=left>
<frame src=right>
</frameset>
<frameset cols="50%,*">
<frame src=left1>
<frame src=rigth1>
</frameset>
</frameset>
扩展资料：
注意事项
用frame的好处在于不用象DIV一样要对浮动和大小进行精确控制，以及要考虑宽屏的时候怎么办，而且在导航的时候非常简单。
比如说左边是导航栏，右边是显示内容的frame，如果用DIV，每点一下导航栏进行一次页面跳转，那每个页面里都要有左边的导航栏，这样代码的复用性不高，如果用frame，只要将导航放在左边frame，在点击链接时，只需要将链接的target指向右边的内容显示frame就OK了。
<frameset rows="80px,*,20px" border=0 frameborder="0" framespacing="0" marginwidth="0" marginheight="0">
<frame name=header src=header scrolling="no">
<frameset cols="200px,*" border=0 frameborder="0" framespacing="0">
<frame name=menu src=menu scrolling="auto">
<frame name=main src=home scrolling="auto">
</frameset>
<frame name=footer src=footer scrolling="no">
</frameset>
<noframes>
<body>
</body>
</noframes>
4. 如图
上面那两个div设置百分比宽度不要占满，
<section class="one">
<section class="two">
<section class="ss"></section>
<section class="three"></section>
</section>
<aside></aside>
</section>
<footer>footer</footer>
CSS
.one{
width:1240px
height:340px
margin:16px auto 16px
}
.one o{
width:702px
height:320px
background:#333
float:left
border-radius:5px
border:10px solid #666
}
.one o .ss{
width:702px
height:155px
background:#333
float:left
border-radius:5px
}
.one o .three{
width:702px
height:155px
background:#333
border-radius:5px
border-top:10px solid #666
float:left
}
aside{
width:492px
height:340px
background:#666
float:right
border-radius:5px
}
footer{
width:1240px
height:60px
background:#666
border-radius:5px
margin:0 auto 10px
text-align: center
line-height:60px
color:white
font-size:28px
}
html5可以将网页分块， 网页分块意味着将一个页面划分为几个独立的部分，包括内容、菜单、头部、底部、链接等， 这些只要使用一些新的标签。下面是一张html5概念图：
1、<header>网站头部标签
2、<nav>导航标签
3、<article>内容标签
4、<section>文章标签
5、<aside> 侧边栏
6、<footer>网站底部标签
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）