打造无懈可击的web设计——流动布局和弹性布局.doc

打造无懈可击的Web设计——流动布局和弹性布局防弹衣并不能100%保证不受伤害,但穿了总是比不穿好。这样的规则同样适用于Web设计。通过增加网页的灵活性,以及采用必要的步骤来保证它在尽可能多的场景中都具备可读性,我们就给自己的作品赋予了一些与众不同的特色。这是一个循序渐进的过程,并且当采用HTML和CSS后,将能够更加容易构建出赏心悦目并且具有良好适应能力的设计方案。如何创建流动布局和弹性布局,为我们无懈可击的设计方案增添一个工具。掌握如何恰当地使用它们,将给网页设计增加更多的灵活性。流动布局并不是只能由CSS实现的,它也可以通过表格来实现。文中您将会发现,把布局的细节放在样式表中实现,还有许多其他好处。弹性布局中的列使用em作为长度单位,基于em的布局会随着字体大小的变化而放大或缩小。为什么这样设计不是无懈可击的?一、常见的方法多列布局并不是只能由CSS实现,也可以使用表格同样实现能够根据浏览器窗口的大小而自由缩放的(流动)布局。以前,设计者会考虑到使用列来实现,每一列都由一系列表格单元格来构造。图中显示了一个常用的布局结构,有一个页头横跨顶部、两列内容以及一个横跨底部的页脚。常会看到与此类似的一种两列的布局结构以前,我们似乎很自然地会使用表格来构建这种结构,用colspan这个特性使页头和页脚横跨于内容列的上方与下方。大致的 HTML代码如下所示:<table><tr><td colspan=”2″>header</td></tr><tr><td>content</td><td>sidebar</td></tr><tr><td colspan=”2″>footer</td></tr></table>但大多数的设计者和开发者不会就此罢休。构造好了基础结构以后,会在这个结构中的每一个单元格中再嵌入表格,为布局创建边界和像素级别精度的间距。最终,为了使构造的结构和页面的样式能够更加变化灵活,会添加很多HTML代码。为了达到流动可变性,可将表单元格的宽度设成百分比形式,这使得布局可以完全扩展而不需要考虑浏览器窗口的大小。<table width=”100%”><tr><td colspan=”2″>header</td></tr><tr><td width=”70%”>content</td><td width=”30%”>sidebar</td></tr><tr><td colspan=”2″>footer</td></tr></table>整个表格被设置成100%的宽度,列可以根据任意需要的宽度进行拆分。如图所示:左边是一个宽一些的内容栏,右边是一个窄一些的侧边栏。当浏览器窗口扩展或收缩而使布局的大小发生变化时,各列宽度的比例将保持不变。这表明了表格能够用来构造布局,同时也表明了表格能够用来构造随浏览器窗口变化的流动布局。然而,还可以采用其他更完美的办法做到这一点。二、值得思考的问题:为什么这样设计不是无懈可击的?表格布局最主要的问题之一,就是表示内容与外观的 HTML 代码混在一起了。换句话说,边框、空白GIF和图片所用的代码都嵌入在表示重要内容的代码中。这意味着只典型的桌面浏览器才能够顺利地阅读这样的网页。而使用屏幕阅读软件、文本浏览器或在移动设备上阅读软件时,就可能遇到困难。1. 大量的代码内容与外观的缠结还意味着代码量的增大。使用嵌套表格来构造布局,所需要的代码量有时候是相当惊人的。许多额外的表单元格被用来构造栏间空白、边框和其他页面视觉效果。如果使用 CSS,HTML 代码就能够减少到只保留它最本质的部分,对外观的设定可以移到样式表中。这样,网页在非传统浏览设备和浏览软件中的可读性就立刻提高了,对搜索引擎也更加友好(这是一个额外的、免费的好处)。2. 噩梦般的维护工作因为大量的嵌套表格造成纠缠在一起的大量代码,这只能增加维护的工作量。对于基于表格布局的网页,要改造它们的外观,需要花费更大的力气——检查大量的单元格和额外的 H T M L 代码。在这样的情形下,修改的工作量会大得令人发狂,还不如推倒重来。3. 并非最佳的内容顺序使用基于表格的布局还存在一个缺点,即文本浏览器和屏幕阅读器上所呈现出来的内容有顺序问题。例如,有一个三列的布局,我们知道,HTML 中的顺序总是左列、中间列,然后右列。这是操作的表格方式。基于表格的内容通常的顺序是左列、中间列、右列在那些基于文本的浏览器或屏幕阅读器中,通常只能按上面的这种顺序对内容进行解析。但最主要的内容往往并不放在左列,而是放在中间列,这样,它很有可能被埋没在页面代码中。使用表格构造布局时,想要安排重要的内容在其他浏览器或软件中先被读到是不可能实现的。对于所有浏览设备都只有一种顺序,迫使用户在使用文本和屏幕阅读器时,想要得到重要内容之前,就要先艰难地穿过那些无关紧要的代码。幸