Word版可编辑-基于流的可伸缩性网页布局的最高效设计方法精心整理.doc

基于流的可伸缩性网页布局的最高效设计方法廖德伟 蔡方萍 朱学锋江西萍乡高等专科学校计算机系，337055摘 要：曾经横行以往的标准即基于table+css的网页设计技术已经不再流行，目前更多的网站更愿意使用div+css的网页结构1。利用现在主流的div+css布局技术能使网页呈现很多梦幻效果，特别是在网页后期的更新与维护中省时省力，只需略做调整便可适应不同风格或不同浏览器。尤其是在设计可伸缩性页面布局方面，div+css技术是最高效的不二选择。 关键词：流式布局；div；css；盒子；定位；嵌套中图法分类号：TP39 文献标识码：A 1作者简介：廖德伟（1975年12月）、讲师、软件工程硕士；研究方向：网络管理与安全。在VS2008的HTML设计器中创建ASPNET页或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：960px height：auto尺寸规格设计的标准页面布局，这是一个母版页测试页面。假定网站里的所有子页面都是套用了这个母版的，那么所有子页面的布局就会随着这个母版页布局的变化而改变的。在这里即页面内容的宽度值固定为960像素，高度值为auto自动适应（随着页面内容的变化而改变）。图1 960*auto标准页面布局实际上， 960像素已经成为了行业标准， 因为主流用户的屏幕分辨率往往是1024768或者更高5。在浏览器呈现的上面图1效果中我们只看到6个div盒子即divtop、 divleft1、divleft2、divcenter、divright、divbottom。实际上我们使用了8个div盒子来设计的，即divall、 divtop、 divleft、 divleft1、divleft2、divcenter、divright、divbottom，其中divall、divleft这2个div盒子在浏览器中没看到，这其实只是由于divall盒子和divleft盒子去掉了边框而已。其中divleft盒子里嵌套了divleft1和divleft2这2个盒子；而divall盒子则是最大的盒子，它里面嵌套了其余7个盒子。由于divall盒子的宽度是可以随时调整的，即使整个网站所有页面都已经发布了，后期还是可以很方便的只需去调整divall的宽度，就可使整个网站所有页面的宽度改变了。当然在后期高度height也是不需要调整的，因为height的值的是auto，它是自动适应内容的变化的。正是因为使用了这个divall盒子，才使整个页面具有较强的可伸缩性，也就是说所有页面的宽度会随着divall盒子宽度的变化而改变的。其实这个母版页的真实架构应该如下图2所示：divtopdivcenterDivleft1Divleft2divrightdivbottomdivleftdivall图2 母版布局真实架构为了给浏览用户一种更简洁美观的布局界面，所以在浏览器中浏览时没必要呈现divall盒子和divleft盒子，故在css代码中将divall盒子和divleft盒子的边框值设为border：0px;。由于div+css这种技术是使用源布局对象div与布局效果分离的技术：即页面源代码中存放div对象标记，页面布局效果则由css来控制实现。首先来关注一下页面源代码，如下图3：图3 源代码视图在源代码视图中我们清楚的看到了这8个div盒子的嵌套结构代码，非常的简洁明了。在源代码中只是存放了这8个盒子而已，这就好比一个需要装修的新的毛坯房，房主已买好了必需的装饰材料在里面，具体怎样装饰怎样设计那就是装修工人的工作了。在源代码视图里我们必须重点关注第8行代码即，此行代码为调用外部css样式表文件our.css。在our.css文件里对这8个div盒子作了详细的样式单定义。以下是our.css文件的具体内容：Body /*此样式单定义页面内容的文本字体格式。*/font-weight: bold;font-size: 30px;.divall /*此样式单定义divall盒子的样式。*/width: 960px; /*divall的宽度设定，利用这个宽度值可控制整个页面的宽度*/margin: 0px auto; /*定义上下左右边界距离，其中上下边界为0像素，左右边界为自动适应，利用这个auto（左右边界距离）值可使整个页面居中对齐*/.divtopwidth: 100%; /*宽度定义，从这个divtop开始包括以下所有div盒子的宽度定义都采用百分比值，即相对宽度，利用相对宽度可使整个页面布局自由伸缩而不会变形。以下类似定义作用相同。*/height: 80px;border: 1px solid #ff0000; /*边框线定义，包括线条粗细、线条样式、线条颜色。以下类似定义作用相同。*/background-color: #E4EFC9; /*背景颜色定义。以下类似定义作用相同。*/.divleftwidth: 30%;height: 600px;background-color: #FDF7FF;margin: 2px; /*上下左右边界距离均定义为2个像素，利用这个值可使divleft与其它对象盒子上下左右分开，并形成2个像素的间距。以下类似定义作用相同。*/ float: left; /*停靠方式定义，利用这个float值实现divleft、divcenter、divright三个盒子呈现分栏效果。以下类似定义作用相同。*/.divcenterwidth: 50%;height: 600px;border: 1px solid #ff0000;background-color: #FFFFFF;margin: 2px;float: left;.divrightwidth: 18.6%;height: 600px;border: 1px solid #ff0000;background-color: #ECF5FF;margin: 2px 0px;float: right;.divbottomwidth: 100%;height: 50px;border: 1px solid #ff0000;background-color: #E9E3FB;clear: both; /*清除divbottom盒子两边的对象，使该盒子对象独占一行。*/.divleft1width: 100%;height: 30%;border: 1px solid #ff0000;margin-bottom: 3px; /*下边界距离定义，利用这个下边界距离值可使divleft1和divleft2上下分开，间距为3像素*/background-color: #FFD9EC;.divleft2width: 100%;height: 69%;border: 1px solid #ff0000;background-color: #F1C5FE;以上代码部分中加了“/*/”为代码注释，在运行时不会产生影响。为验证布局的可伸缩性，图1中呈现的是宽度值为960px的效果；下面可分别将divall盒子的宽度值即width调整改大和改小以验证整个布局效果是不会变的，也就是说整个页面是可伸缩的。（1）将.divall样式单修改为如下：.divallwidth: 1200px; /*修改为比原来960px更大*/margin: 0px auto;此时在浏览器中呈现的效果如下图4：图4 1200*auto标准页面布局此时对比一下图1和图4发现页面布局只是变宽了，布局的架构并没有改变，且没出现混乱错位现象。（2）将.divall样式单修改为如下：.divallwidth: 700px; /*修改为比原来960px更小*/margin: 0px auto;此时在浏览器中呈现的效果如下图5：图5 700*auto标准页面布局至此，可伸缩性布局的母版页设计完毕，而网站的其它子页面只要是套用了该母版页的话，就一定是可伸缩的。此种方法也是目前为止最高效，最强壮的设计方法了，读者不妨借鉴试用。参考文献：1 juner51, DIV+CSS网页总体布局方法介绍 OL. 网易公司/blog/static/695152172009430113451479/. 2009年5月.2 苏啸网站设计与制作M.第一版.北京: 中国铁道出版社2011年8月.67-83. 3 邹建峰ASP.NET开发技术详解M北京.人民邮电出版社，2005年11月.91131.4haha718916, 网页设计中常用布局方式 OL. 百度/question/285119913.html. 2011年7月.5 攀建ASP.NET+ADO.NET项目开发实例M,北京:清华大学出版社，2004年1月，15-17.附（英文译文）标题(title) ： Based on flows of expandable homepage layout and most highly effective design method作者(writer)：Liaodewei Caifangping Zhuxuefeng工作单位：The Computer department of PingXiang College摘要(abstract)： Once standard “ran amuck”-the former table+css homepage design already no longer popular。At present more websites are willing to use div+css homepage structure 1.Using the present mainstream div+css layout technology can cause the homepage to present the very illusion effect, specially reduce effort and time in the later period of renewal and the maintenance.It