浅析CSSDIV网页布局优缺点.doc

浅析CSSDIV网页布局优缺点 　　【摘 要】 本文先从一个案例着手，简要介绍了使用CSS+DIV技术对页面布局的思维过程。从而分析出CSS+DIV技术具有结构与表现分离、页面下载速度快、容易被搜索、页面容易修改与排版能力强等优点， 同时也存在CSS代码编写难度高、调用复杂等缺点。 　　【关键词】 网页布局 CSS+DIV WEB2.0标准 Table 　　随着WEB2.0标准化设计理念的普及，国内外很多大型门户网站及商业网站纷纷采用CSS+DIV技术来布局网页。使得CSS+DIV布局已经成为网页设计师必备技术。 　　1 CSS+DIV网页布局案例 　　下面以布局一个页面为例，简要说明如何使用CSS+DIV对页面布局的思维过程。 　　（1）设计人员使用Photoshop等工具制作出页面的整体效果通常如图1所示。 　　（2）根据页面效果构思页面布局。这里通过分析后可以发现页面大致可以分为顶部、中部和底部三部分，为了更加直观地说明他们之间的关系，图2所示是拟规划的页面布局图。 　　（3）通过拟规划的页面布局图，设计人员在网页中创建一系列的DIV容器，其结构如图3所示。 　　（4）待页面布局完成后，便可以书写CSS规则和增加实质的内容信息。在制作过程中，通过浏览器预览页面，对CSS规则做进一步修改直到与效果图相一致。 　　生成的CSS样式表文件部分代码如下： 　　* {margin：0px；padding：0px；} 　　body {background：#fff；font-family：Times New Roman， serif；font-size：12px；} 　　#container {width：900px；margin：auto；}/*定义头部区域规则*/ 　　#header {width：900px；height：426px；background： url（../images/header-bg.gif） no-repeat bottom left；margin-bottom：45px；} 　　#logo{width：204px；height：80px；float：left；background-image： url（../images/logo.gif）；background-repeat： no-repeat；background-position： left bottom；} 　　/*定义导航列表规则*/ 　　#top-links {float：right；width：400px；} 　　/*定义内容主体宽度*/ 　　#content-box {width：900px；float：left；} 　　#col-1 {width：260px；float：left；} 　　/*定义主体区域中第二列规则（居中列）*/ 　　#col-2 {width：270px；float：left；padding-left：50px；} 　　/*定义主体区域中第三列规则（右侧列）*/ 　　#col-3 {width：280px；float：left；margin-left：40px；} 　　#footer{width：900px；color：#999；float：left；margin-top：30px；height：50px；text-align：center；} 　　2 CSS+DIV网页布局的优点 　　通过以上对布局过程的描述，可以发现CSS+DIV布局的优势体现在如下方面： 　　2.1 将结构与表现相分离[1] 　　HTML语言定义了网页的内容和结构，而CSS用于控制网页内容外观的样式，从而将定义结构的部分和定义格式的部分分离开来，使用户能够对页面的布局施加更多的控制。像精确定位、行间距或字间距等任务都可以通过CSS来完成。HTML仍可以保持简单明了的初衷，CSS代码独立出来，从另一个角度控制页面外观。 　　2.2 网页体积更小且下载更快 　　由于将大部分页面代码写在了CSS当中，样式表只是简单的文本，就像HTML那样。它不需要图像、执行程序及插件。使用CSS可以减少表格标签及其他加大HTML体积的代码，还可以减少图像数量从而减小文件的大小使得页面体积容量变得更小，从而网页下载速度更快。 　　2.3 修改设计时速度更快 　　没有CSS时，如果想更新整个站点中所有主体文本的字体，必须一页一页地修改每个网页文件。CSS的主旨就是将格式和结构分离。利用样式表，可以将站点上所有的网页都指向单一的一个CSS文件，因此只要修改CSS文件中的某一行，那么整个站点都会随之发生改变。[2] 　　2.4 保持视觉的一致性 　　CSS+DIV最重要的优势之一：保持视觉的一致性；以