【论文】浅析网页整体布局.pdfVIP

浅析 网页整体布局 李迎霞1,2 （1.武汉大学 计算机学院 湖北 武汉 430074；2.湖北城市建设职业技术学院 湖北 武汉 430074） 摘 要： 在网页设计时，只有选择好布局方式，才能使得页面结构清晰明，美观大方，才能让浏览者方便地找到 自己所需的信息。通过实际案例的演示分 解，对页面的整体布局进行剖析。 关键词： 页面布局；固定宽度；可变宽度 中图分类号：F275 文献标识码：A 文章编号：1671－7597（2011）0810014－01 网站网页现已是我们生活中不可缺少的一部分了，当设计网页展示信 content有多少的高度差，都不会对其它的DIV造成影响，所为在footer里 息时，到底什么最重要？色彩搭配？文字变化？除了这些，还有一个是不 面设置了清除，这样就保证了footer无论如何都可以安放在前面两个容器 容忽视的——网页布局。只有适当的布局，才能使页面结构清晰明了，美 的下面了。 观大方，才能让浏览者方便地找到自己所需的信息。 2 可变宽度布局 本文下面会通过实际案例的演示分解，对页面的整体布局进行剖析。 由于宽度不固定，设计时会有很多障碍，导致很多设计者不太乐意使 网页的布局不是千篇一律的，设计者除了要根据需求来设计，还要考虑到 用它，但它的优点却不容忽视。在浏览器的大小发生改变时，可变宽布局 访问者诸多的不同点。如果没有规划好站点尺寸，设计者在开始工作时会 会使视图带来很大的方便。一般情况下，分单列布局、双列布局、多列布 遇到很多问题。下面我就从固定宽度布局和可变宽度布局两方面来解析网 局。我们这里还是以双列布局这种典型的布局方式来讨论，因为复杂的多 页的整体布局。 列布局可以在掌握双列布局后很容易的延伸出去。 1 固定宽度布局 2.1 等比例变宽 许多设计者都喜欢固定宽度布局，一方面它容易实现，另一方面它确 还以上面1-2-1模式为例，当container的总体宽度发生变化时，里面 保了设计者所见即浏览者所见。下面我就以典型的1-2-1布局模式为例来 的sidebar和content如果是按比例同时变大或者变小，就称为等比例变 介绍。 宽。按等比例变宽设计的网页，其宽度会随着浏览器窗口的变化而变化。 1.1 1-2-1布局模式介绍 与固定宽度相比，可变宽布局在 1-2-1布局结构是典型的网页结构，如 定义宽度时使用的是百分比，是相对 左图1示。页面最上方是一个横向栏目，常用 于它们所在容器的宽度而言的，代码 作网页的导航，通常称为页面头部。页面的 如左示 。这里sidebar和content两个 中间部分分为左右两栏，左边栏稍窄，通常 子列的宽度相加没有设成100%，按道 称侧边条，作为页面的设置导航；右边栏相 理来说，应该设为100%才能使整个页 对较宽，常作网页呈现信息的主体部分。页 面上下宽度一致。但是浏览器是通过 面最下方也是一个横栏，用来显示一些版权 计算后来分配每列宽度的，当有小数 等信息，常称为页脚。这样的布局结构看起 位数出