biaoge's blog

以前端技术为主

《无懈可击的web设计》小结

without comments

《无懈可击的web设计》这本书讲了许多提高网站灵活性、可维护性和可访问性的一些小技巧,读过之后发现里面讲的许多方法都是以前没有注意到的,所以有必要对其中的一些内容做一个小小的归纳总结,一方面可以加深印象,另一方面也可以作为一个备忘录以便将来查阅。

1.用关键字和百分比来确定文字大小以便使用户也能控制其大小,并且最大化网页的灵活性。

在body上使用font-size:small来设置全局的文字大小,然后在其他地方全部用百分比来控制,这样不仅可以使得IE用户可以通过菜单栏的“查看>文字大小”来控制文字大小,而且以后要对文字大小进行调整的时候只需要调整一条声明就可以让整个网页的文字大小按比例缩放,使得灵活性大大提高。

2.让导航菜单能够适应任意的文字大小和任意多的内容。

对导航菜单既不要定宽也不要定高,对于菜单内文字和边缘之间的间隙则用padding来填充,这样就适应了任意的文字大小和任意多的内容,对于滑动门菜单也是如此,我以前在写滑动门的时候习惯把高度定死,这并不是一个好习惯。此处还要注意的是如果背景图是渐变效果则要将背景图适当地加长和加高以适应各种长度和高度的内容。

3.用em来作为line-height的单位,同样的,对于两行文字之间margin值也用em为单位。

用em做单位的好处是当文字大小改变的时候此处的line-height和margin也会相应地改变。

4.对一些水平的区块也不要定高,让其高度自适应。

一些水平区块如头部、登录区、搜索区和一些单行文字的区域也不要定高,一方面是为了适应文字大小的变化,另一方面也使得以后在该区块增加内容后不至于使页面变形,例如单行的文字有可能在以后增加到两行。所以以前通过定高度和行高来处理单行文字的做法要改为不定高度并用padding填充文字上下的空白区域。

5.确保页面在禁用图片和CSS的时候仍然不影响正常阅读。

背景图未加载有可能造成文字和下面的背景颜色太接近而使网页阅读困难,解决方法是在凡是有背景图的地方都写上一个背景颜色。作者把裸奔测试称为“十秒钟可用性测试”,就是禁用CSS之后再看页面结构是否清晰,这就要求做好HTML的语义化。一些方便做此类测试的小工具:

6.用border-collapse:collapse;实际上可以替代talble上的属性cellspacing=0,唯有IE/MAC不支持border-collapse,但是IE/MAC现在可以忽略掉了吧。

7.在使用百分比宽度的流体布局中为栏间设定固定像素间距的方法是在每栏的里面加入一个div并在这个里层的div上加上padding。

8.即便是对使用百分比宽度的流体布局也可以使用背景图垂直重复的方法来造成貌似两栏等高的假象,方法是将背景图的水平位置也用百分比来设置。

Related Posts

Written by admin

October 11th, 2008 at 1:14 pm

Posted in 前端技术

Leave a Reply