网页开发常用概念和布局流程

版心

阅读报纸时我们会发现，虽然其中的内容很多很丰富，但是经过合理的排版布局，版面整体依然清晰、易读。 同样，在制作网页过程中，如果要让页面结构清晰、有条理，也需要对网页的内容进行排版。 版心：是指网页的主要内容所在的区域。一般在浏览器窗口中水平居中显示，从而让用户的视线更加集中。 常见的版心宽度包括：960px、980px、1000px、1200px等 制作方法：使用标准流中的margin居中方法

页面布局流程

提高网页的制作效率，需要了解页面布局流程：

1. 确定页面的版心（可视区域）。 以firwork为例，打开设计图，锁定底图，选择左侧标尺，向右拖动参考线对齐设计元素的最左边，按Ctrl和+号放大再对齐确保完全对齐。最右侧同理。完成最后侧参考线后，选择移动状态，把鼠标移到两条参考线中间按住Shift键，会自动显示两条参考线的距离，得出版心宽度。

2. 分析页面中的行模块，以及每个行模块中的列模块。确定各模块选择的标签、是否使用浮动等方法。

3. 制作HTML页面，CSS文件。

4. CSS初始化，然后开始运用盒子模型的原理，通过div+CSS布局来控制网页的各个模块。

几种常见的布局类型

• 一列固定宽度且居中
• 两列左窄右宽型
• 通栏平均分布型 一般一个网页可能同时包含两种以上的布局类型。