基于流的可伸缩性网页布局的高效设计方法.doc

基于流的可伸缩性网页布局的最高效设计方法————————————————————————————————作者:————————————————————————————————日期: 基于流的可伸缩性网页布局的最高效设计方法廖德伟蔡方萍朱学锋江西萍乡高等专科学校计算机系,337055摘要:曾经横行以往的标准即基于table+css的网页设计技术已经不再流行,目前更多的网站更愿意使用div+css的网页结构[1]。利用现在主流的div+css布局技术能使网页呈现很多梦幻效果,特别是在网页后期的更新与维护中省时省力,只需略做调整便可适应不同风格或不同浏览器。尤其是在设计可伸缩性页面布局方面,div+css技术是最高效的不二选择。关键词:流式布局;div;css;盒子;定位;嵌套中图法分类号:TP39文献标识码:页或HTML网页时,对象的物理布局是从上至下。在网页中对对象的定位方式有3种,分别是absolute(绝对定位)、relative(相对定位)以及static(静态流式定位)[2]。以此3种定位方式即形成了网页的两种布局形式,即一是流式布局(即static定位);二是二维方式布局(即absolute绝对定位与relative相对定位)。默认情况下,当在浏览器中呈现页面时,流式布局将网页中的对象按照相同的从上至下、从左至右顺序呈现;而二维方式布局是对网页中的对象使用水平和垂直坐标在页中的相应位置定位对象。由于使用absolute绝对定位和relative相对定位的对象在页面中可能不会按照标记声明中的顺序来显示,这可能会引起混乱。例如,在源视图中,可能将某个按钮定义为标记中的第一个对象,但设置它的定位后,该按钮可能在呈现的页面或设计视图中显示为最后一个对象。而使用流式布局即不会出现此种情况,且使用此种布局的页面对任何Web浏览器都可显示出来[3]。本文将采用流式布局来构造一个自由的可伸缩性的网页布局。在流式布局中,最常用的布局方法有两种:div+css和table(表格)两种布局方式,table表格布局兼容性较好,基本不要考虑浏览器兼容问题,但是一些高级效果,表格是无法做出的。表格布局的代码偏长,效率不及div布局,简单说表格低效、稳定、比较难控制[4]。div其实就是一个盒子,盒子里可以装东西和所有页面内容,也可以说div盒子是一个容器。div高效先进,兼容性好,且对于后期的页面更新与维护极为方便,因为div+css布局是使用源布局对象与布局效果分离的技术:即页面源代码中存放div对象标记,页面布局效果则由css来控制实现。下面是按照width:960pxheight:auto尺寸规格设计的标准页面布局,这是一个母版页测试页面。假定网站里的所有子页面都是套用了这个母版的,那么所有子页面的布局就会随着这个母版页布局的变化而改变的。在这里即页面内容的宽度值固定为960像素,高度值为auto自动适应(随着页面内容的变化而改变)。图1960*auto标准页面布局实际上,960像素已经成为了行业标准,因为主流用户的屏幕分辨率往往是1024×768或者更高[5]。在浏览器呈现的上面图1效果中我们只看到6个div盒子即divtop、divleft1、divleft2、divcenter、divright、divbottom。实际上我们使用了8个div盒子来设计的,即