页面布局一般有三种方式:
- 表格布局
- 框架布局
- DIV+CSS布局
其中,DIV+CSS布局符合W3C标准,目前已成为网页布局主流。
<div>标签的主要作用是用于设定文字、图片、表格等的摆放位置。当把文字,图片等放在<div>标签中时,该标签被称为“DIV块”或“DIV元素”或“DIV层”。
使用CSS和DIV可以很好的解决图像或文字定位的难题,通过DIV和CSS结合使用,网页设计人员可以精确的设定内容的位置,还可以将定位的内容上下叠放。 使用DIV+CSS布局,可先先将页面内容的语义或结构确定下来而不是先考虑外观。 一个结构良好的XHTML页面可以通过CSS以任意外观表现出来。 CSS布局能实现真正意义上的结构和外观的分离,与传统的TABLE网页布局相比,具有以下4个显著优势:
1、表现和内容相分离。将设计部分剥离出来放在一个独立样式文件中,XHTML文件中只存放文本信息。
2、提高搜索引擎对网页的索引效率。用只包含结构化内容的XHTML代替嵌套的标签,搜索引擎将更有效地搜索到你的网页内容,并可能给你一个较高的评价。
3、提高页面浏览速度。对于同一个页面视觉效果,采用DIV+CSS重构的页面容量要比TABLE编码的页面文件容量小得多,前者一般只有后者的1/2大小。给用户最直观的体验就是网页打开速度快了很多,能给用户更好的体验。
4、易于维护和改版。你只要简单的修改几个CSS文件就可以重新设计整个网站的页面。
利用DIV和CSS的定位技术进行网页的布局是现在主流的页面布局模式,是TABLE页面布局的替代技术。采用CSS+DIV布局的页面容量要比用TABLE布局的页面文件小很多,前者一般只有后者的1/2大小,节省了大量的带宽,同时降低了网站改版的成本。W3C组织提供对CSS代码的验证服务,地址在:
http://jigsaw.w3.org/css-validator/