龙源期刊网httpwwwqika
comc
浅析网页整体布局
作者：李迎霞来源：《硅谷》2011年第15期
摘要：在网页设计时，只有选择好布局方式，才能使得页面结构清晰明，美观大方，才能让浏览者方便地找到自己所需的信息。通过实际案例的演示分解，对页面的整体布局进行剖析。
关键词：页面布局；固定宽度；可变宽度
中图分类号：F275文献标识码：A文章编号：1671－7597（2011）0810014－01
网站网页现已是我们生活中不可缺少的一部分了，当设计网页展示信息时，到底什么最重要？色彩搭配？文字变化？除了这些，还有一个是不容忽视的网页布局。只有适当的布局，才能使页面结构清晰明了，美观大方，才能让浏览者方便地找到自己所需的信息。
本文下面会通过实际案例的演示分解，对页面的整体布局进行剖析。网页的布局不是千篇一律的，设计者除了要根据需求来设计，还要考虑到访问者诸多的不同点。如果没有规划好站点尺寸，设计者在开始工作时会遇到很多问题。下面我就从固定宽度布局和可变宽度布局两方面来解析网页的整体布局。
1固定宽度布局
许多设计者都喜欢固定宽度布局，一方面它容易实现，另一方面它确保了设计者所见即浏览者所见。下面我就以典型的121布局模式为例来介绍。
11121布局模式介绍
121布局结构是典型的网页结构，如左图1示。页面最上方是一个横向栏目，常用作网页的导航，通常称为页面头部。页面的中间部分分为左右两栏，左边栏稍窄，通常称侧边条，作为页面的设置导航；右边栏相对较宽，常作网页呈现信息的主体部分。页面最下方也是一个横栏，用来显示一些版权等信息，常称为页脚。这样的布局结构看起来就是一头，两体，一脚，所以把它称为121布局模式，它是典型的固定宽度布局。
12121布局模式的实现方法
我们在实现的时候不能像图1那样只直接定义四个DIV，这样中间部分两栏的并列是无法实现的。因为每个DIV都是一个块元素，独自占用一行，如果要实现中间两个DIV并列显
f龙源期刊网httpwwwqika
comc
示，就得把它们嵌套在一个另一个DIV中，如图2所示。head、co
tai
er、footer这三个DIV竖向排列，CSS样式好写，但是co
tai
er
里的sidebar和co
te
t是横向排列的，CSS该如何实现呢？在这里，我们采用浮动法来实现。代码如下：
为了使整个的页面宽度一致，首先将外层的三个DIV（head、co
tai
er、footer）的宽度设为760px，并将它们的margi
设置为上下为0，左右自动，这样就可以整个页面居中对齐了。co
tai
er里的sidebar和co
te
t，这里首先设置了它们的r