浅析CSS+DIV网页布局的优缺点
- 格式：doc
- 大小：18.00 KB
- 文档页数：4
龙源期刊网
浅析CSS+DIV网页布局的优缺点
作者：张克新
来源：《中国科技纵横》2013年第24期
【摘 要】 本文先从一个案例着手，简要介绍了使用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最重要的优势之一：保持视觉的一致性；以往表格嵌套的制作方法，会使得页面与页面，或者区域与区域之间的显示效果会有偏差。而使用CSS+DIV的制作方法，将所有页面，或所有区域统一用CSS文件控制，就避免了不同区域或不同页面体现出的效果偏差。
2.5 更好地被搜索引擎收录
由于将大部分网页代码和内容样式写入到CSS文件中，这就使得网页中正文部分更加突出，有利于搜索引擎更有效地搜索到Web页面。
2.6 对浏览者和浏览器更具亲和力[3]
因CSS富含丰富的样式，从而使页面的设计更加灵活。它可以根据不同的浏览器，设计出不同的CSS，而达到显示效果的统一和不变形。这样设计的页面对浏览者和浏览器更具有亲和力。
3 CSS+DIV网页布局的缺点
说了这么多CSS网页布局的意义与优势，同时也不能轻视CSS网页布局的弊端：
3.1 依赖程度高
因网页对CSS的高度依赖性使得网页设计变得比较复杂。例如，CSS的定位就比表格定位要复杂的多，即使对于网站设计高手也很容易出现问题，更不要说初学者了。
3.2 CSS文件异常将影响整个网站的正常浏览[4]
用CSS+DIV技术制作的网站，其设计元素通常放在1个或几个外部文件中，这些文件有可能相当复杂，甚至比较庞大，如果调用CSS文件出现异常，那么整个网站将变得面目全非。
3.3 浏览器的兼容性问题比较突出 龙源期刊网
虽然说CSS+DIV解决了大部分浏览器兼容问题，但是也有在部分浏览器中使用出现异常，比如火狐浏览器，在IE中显示正常的页面，到了火狐浏览器中可能会面目全非。当然这应该是浏览器的问题，但是可以说在目前来看，CSS+DIV还有待于各个浏览器厂商的进一步支持。
3.4 专业化程度高
比较表格布局和CSS+DIV发现，CSS语法其实很容易理解，设计师也都承认掌握CSS+DIV并非需要高深莫测的知识才行，但某些概念的确还是需要他们去消化吸收。同时，bug问题也是阻止CSS普及的原因之一，即使是web专业人士往往也要花费大量时间修改bug，不用说那些对CSS使用的新手了。深度比较发现，一些通过表格方式可以轻松解决的问题在使用CSS+DIV的时候变得复杂，如果是一个CSS爱好者这可能对他是一种挑战和乐趣，但对于一般设计者而言，这无疑令人沮丧。
4 结语
综合以上分析，我们可以看出，对于CSS+DIV技术，它用来制作网页、美化网页的功能是很强大方便的，它可以弥补Table制作表格时的很多不足和美工上的缺点；但是完全只用CSS+DIV技术来设计网页，太费时费力，我们选择Table+DIV+CSS是最好的组合，也是最省时省力的办法。一般，我们可以按以下两项原则来进行选择：一是网页中各版块的布局及定位通过CSS+DIV来完成；二是网页中用来显示数据的区域则通过Table来完成。[5]
参考文献：
[1]吴丰，丁欣.Dreamweaver CS5网页设计与制作—CSS+DIV版[M].北京：清华大学出版社， 2012.7.
[2]黄玉春.CSS+DIV网页布局技术教程[M].北京：清华大学出版社，2013.9.
[3]王欣.特定领域电子商务平台的系统架构与关键技术[D].天津：南开大学，2010.
[4]刘效春.浅谈静态网页制作中DIV+CSS在网页布局中的优劣势[J].山西青年管理干部学院学报，2011.12.
[5]孙小英.表格与DIV+CSS的布局设计分析[J].数字技术与应用，2011.12.
