为了提高网页制作的效率，布局时通常需要遵守一定的布局流程，具体如下：
1、确定页面的版心（可视区）。
2、分析页面中的行模块，以及每个行模块中的列模块。
3、制作HTML结构 。
4、CSS初始化，然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块。
一列固定宽度且居中
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box {
width: 900px
background-color: #eee
border: 1px dashed #ccc
margin: 0 auto
}
.top {
height: 80px
}
.banner {
height: 120px
/*margin: 0 auto*/
margin: 5px auto
}
.main {
height: 500px
}
.footer {
height: 100px
/*margin: 0 auto
margin-top:5px*/
margin: 5px auto 0
}
</style>
</head>
<body>
<div class="top box">top</div>
<div class="banner box">banner</div>
<div class="main box"></div>
<div class="footer box"></div>
</body>
</html>
版心（也就是要通过边距来设置） 新建文档时，选择“边距与分栏”即会看到边距设置对话框（也就是文档总尺寸－边距=版心），文档建成后可以通过“版面>边距和分栏”来重新设置。
版心面积及位置 版心面积即版心规格，用版心宽度×版心高度表示。如文字或图表超过版心规格，称“超版心”。
（1）版心宽度
①影响视力的字行长度
小五号字的字行长度超过90mm。五号字的字行长度超过110mm。
②目前通行的图书字行长度
大32开本图书的字行长度：五号字，27～29字/行，约100～108mm。
版心
32开本图书字行长度：五号字，25～27字/行，约92～100mm。小五号，29～31字/行，约92～98mm。 16开本图书字行长度：五号字，38～40字/行，约146～150mm。小五号，48～50字/行，约150～156mm。
16开本的字行长度，显然已经超过了视力适度的范围。故除了个别书刊偶有用五号字单行排式外，大多都采用双栏排式。
（2）版心在版面上的位置
①直排版式版心位置：偏下靠右或居中。
理由：天头(上白边)较为舒展，可供批注；双单码面时，订口白边相对较小。
②横排版式版心位置：偏上靠左或居中。
理由：版心面积不计页码，如版心上下居中，视觉版心下坠。
Word里面所谓的版心就是纸张大小减去页边距的和装订线所剩余的空间。1、在页面设置里面设置页边距和装订线以后，在Word里面工具菜单的选项命令，选中显示正文边框，可以看到版心的的边界线了。
2、在“菜单栏——文件——页面设置”里面设置：版心尺寸——页面除去页边距剩下可以编辑（打印）部分。纸张——选“纸张大小”——下面就有纸张的宽度和高度，再减去“页边距——上下左右”的尺寸，就是版心尺寸。上白边，天头——页眉。版式——页眉和页脚——页眉：输入尺寸。（页眉会优先于上边距）订口——装订线。页边距——装订线——选左或上，再输入尺寸。每页22行每行28个字——文档网络。文档网络——文字对齐字符网络——字符（每行）、行（每页）分别输入28个字和22行。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）