第12章变宽度网页布局剖析与制作讲述.ppt

第12章 变宽度网页布局剖析与制作 本章简介： 上一章对固定宽度的页面布局做了比较深入的分析和讲解。本章对变宽度的页面布局做进一步的分析。变宽度的布局要比固定宽度的布局复杂一些，根本的原因在于，宽度不确定，导致很多参数无法确定。因此必须使用一些技巧来完成。本章将介绍一些通用的方法，并对变宽度网页布局的总体情况进行归纳。 “1-2-1”变宽度网页布局 12.1 “1-3-1”宽度适应布局 12.2 变宽布局方法总结 12.3 分列布局背景色问题 12.4 CSS布局与传统的表格方式布局的分析 12.5 12.1　向报纸学习排版思想 从“1-2-1”布局开始，由简入繁地讲解布局结构，并逐步归纳出普遍的通用解决方案。 对于变宽度的布局，首先要使内容的整体宽度随浏览器窗口宽度的变化而变化。因此，中间的container容器中的左右两列的总宽度也会变化，这样就会产生不同的情况。这两列是按照一定的比例同时变化，还是一列固定，另一列变化。这两种情况都是很常用的布局方式。下面先从等比例方式讲起。 12.1.1　“1-2-1”变宽度网页布局 首先实现按比例的适应方式。在这个页面中，网页内容的宽度为浏览器窗口宽度的85%，页面中左侧的边栏的宽度和右侧的内容栏的宽度保持1:2的比例，可以看到无论浏览器窗口宽度如何变化，它们都会等比例变化。 “1-2-1”等比例布局 12.1.2　 “1-2-1”单列变宽布局 在上述实例中，当宽度变化时，左右两列的宽度都会变化，且它们之间的比例保持不变。实际上，只有单列宽度变化，而其他保持固定的布局可能会更实用。一般在存在多个列的页面中，通常比较宽的一个列是用来放置内容的，而窄列放置链接、导航等内容，这些内容一般宽度是固定的，不需要扩大。因此如果能把内容列设置为可以变化，而其他列固定，会是一个很好的方式。 “1-2-1”等比例布局 12.2　 “1-3-1”宽度适应布局 “1-3-1”布局可以产生很多不同的变化方式，如下： 三列都按比例来适应宽度； 一列固定，其他两列按比例适应宽度； 两列固定，其他一列适应宽度。 对于后两种情况，又可以根据特殊的一列与另外两列的不同位置产生出若干种变化。 尽管变化很多，但是总可以把三列布局转化为两类布局，因此三列布局都是可以实现的。接下来不列举所有的布局方式的代码，而是从方法的角度进行阐述，下面选取最常用的布局方式进行讲解。 12.2.1　 “1-3-1”三列宽度等比例布局 对于“1-3-1”布局的第1种情况，即三列按固定比例伸缩适应总宽度，和前面介绍的“1-2-1”的布局完全一样，只要分配好每一列的百分比就可以。 12.2.2　 “1-3-1”单侧列宽度固定的变宽布局 对于一列固定、其他两列按比例适应宽度的情况，如果这个固定的列在左边或右边，那么只需要在两个变宽列的外面套一个div，并且这个div宽度是变宽的。它与旁边的固定宽度列构成了一个单列固定的“1-2-1”布局，就可以使用“绝对定位”的方法或者“改进浮动”法进行布局，然后再将变宽列中的两个变宽列按比例并排。 结构示意图 修正后的结构示意图 12.2.3　 “1-3-1”中间列宽度固定的变宽布局 本小节介绍的布局形式是固定列被放在中间，它的左右各有一列，并按比例适应总宽度。这是一种很少见的布局形式（最常见的是两侧的列固定宽度，中间列变化宽度）。可以按照“改进浮动”法制作单列宽度固定的“1-2-1”布局的思路，把“负margin”的思路继续深化，实现这种不多见的布局。 结构示意图 12.2.4　进一步思考 在使用“改进浮动”法制作中间列固定和侧列固定这两种案例的时候，使用了不同的思路。注意，二者之中，后者是更具有通用性的方法，因为使用这个方法同样可以实现固定列在中间的布局，而用前者的方法是无法实现单侧列固定宽度布局的。 12.2.5　 “1-3-1”双侧列宽度固定的变宽布局 对于三列布局，一种很实用的布局是3列中的左右两列宽度固定，中间列宽度自适应。这个布局同样可以有两种思路来实现，一种是用绝对定位，另一种是用改进浮动。 1．“绝对定位”法 2．二次“改进浮动”法 12.2.6　 “1-3-1”中列和侧列宽度固定的变宽布局 这节介绍的布局方式即中间列和它一侧的列是固定宽度，另一侧列宽度自适应。两个固定宽度的列相邻，那么它们的宽度之和也是固定的，先把它们看作一列，和第3列构成了一个“1-2-1”布局，实现这个1-2-1布局之后，再把固定列根据宽度数值分成两列就可以了。同样可以使用“绝对定位”法和“改进浮动”法来实现。 12.3　变宽布局方法总结 实际上，关于三列布局的方法还有很多，各有优缺点，适用的范围也各不相同。对本章介绍的各种布局进行总结，可以得到下述3个结构图。 双列布局的分类示意图 单列布