Ajax集成开发框架的布局重构之路(zt)

原作者：macro(原名陈邦宏)

 

< div  class ="dorado-layout-container" >  
< div  class =" dorado-layout-header" > top </ div >  
< div  class =" dorado-layout-body" >  
< div  class =" dorado-layout-sidebar" > left </ div >  
< div  class =" dorado-layout-content" > center </ div >  
< div  class =" dorado-layout-sidebar" > right </ div >  
</ div >  
< div  class =" dorado-layout-footer" > footer </ div >  
</ div >   

 

.dorado-layout-container {...} { 
width:300px; height:200px; border:1px solid gray; 
}  
.dorado-layout-header {...} { 
height:40px; padding:10px; border-bottom:1px solid gray; 
}  
.dorado-layout-body {...} { 
clear:both; width:100%; height:100%; 
}  
.dorado-layout-sidebar {...} { 
float:left; width:10%;height:100%;border-right:1px solid gray; 
}  
.dorado-layout-content {...} { 
float:left; width:68%;height:100%; 
}  
.dorado-layout-footer {...} { 
height:40px; padding:10px; clear:both; width:100%;border-top:1px solid gray; 

}   

在使用DIV+CSS进行布局重构的时候，可以说是我对网页布局观念的不断转变以及对web标准认识不断加深的过程，也是对CSS技术灵活运用逐步熟练的过程。起初对CSS的一些布局属性不是很熟，感觉使用DIV进行布局比传统采用TABLE要麻烦许多，几乎达到放弃的地步，不过值得庆幸的是目前采用DIV+CSS已经成为一种趋势，因此网上相关的资料非常的丰富，解决了我所遇到的各种问题，比如如何实现DIV高度和宽度的自适应， 如何做到CSS的布局在不同浏览器的兼容等等，这些问题都可以通过google找到相关的答案。要得到理想的布局效果，一个合适的编辑器也是我们必备的利器之一。由于本人长期使用EditPlus编辑各种文本文件，因此成了首选，不过目前最新的Web设计工具Dreamweaver8已经实现了对CSS布局的可视化，相信会成为大家的最爱。
下面是我在进行布局重构的时候认为比较重要的几个观念和要点。
1、在CSS中涉及到布局方面主要是float，overflow，clear，display，padding，margin以及position几个属性，我们必须对它们各自的作用，以及不同的属性值的意义做到“烂熟于胸”，否则布局工作将是一件非常痛苦的事情。因此本人强烈推荐苏沈小雨编著的《CSS2手册》，该文档也应该成为每个使用DIV+CSS进行布局的开发人员的“葵花宝典”。
2、对CSS盒模式的理解，下面的示意图对于我们进行合适的布局非常有帮助，特别是在进行细微的布局调整方面。

3、不论是使用DIV还是TABLE进行布局，尽量减少嵌套层次。当使用了太多的嵌套层次之后，浏览器进行解析的时候将会得到全部的内容才能做显示，而使用尽可能少的嵌套div则可以做到边接收边显示（TABLE则需要完全取得整个表格中的内容才能做显示），这样可以加快显示速度。
4、在对class和id名称进行定义的时候尽量与内容结构相关，而不是与布局、表现相关。否则在布局发生改变之后，就会造成class或者id的名字跟它自己的表现形式不符，造成理解上的困难，对于页面内容旁边的side bar区域不要定义成leftBar，而应该根据内容定义成titleBar或者hotBar之类的名字，这样在布局发生改变的时候不会到该名字的继续使用。
5、使用XHML的语义元素来定义页面中的内容结构，比如用<h1><h2>这样的元素来定义各种标题结构的内容，用<ul><li>来定义各种条目结构的内容，用<table>来定义表格结构的内容。
6、在使用DIV，SPAN块状元素进行布局重构的时候还有一点需要特别注意，当我们以前采用TABLE进行布局的时候，TABLE在布局前会拿到所有的内容，然后会根据各个部分内容以及每块的布局设置来进行“通盘”考虑，然后重新计算最终的布局结构，块状元素则比较“自私”，缺少一种“全局”观念，它仅仅关心自己的布局，至于它前后左右是如何布局则不管，而这个工作则需要设计者来决定，当然我们也可以通过一些布局技巧来提高块状元素的“全局”素养，当做到这一步的时候，采用DIV+CSS进行布局将会变成一件非常轻松的事情！