基于DIV+CSS设计ASP网站

张岩

[摘 要]Web标准在国内的逐渐普及，网站随着时代不断重构，应深入细致地分析DIV+CSS在动态的网站设计中的简洁、适用性的技术优势，探讨动态ASP网站设计中使用DIV+CSS的注意事项。

[关键词]DIV CSS ASP 网站设计

[中图分类号] TP393[文献标识码] A[文章编号] 2095—3437（2012）09—0060—02

一、几组重要概念

（一）动态服务器主页ASP

ASP是用来写动态网页的一种语言。创建动态web页，需要动态服务器主页（Active Server Page）的缩写为ASP。同时，web生成应用程序，也离不开ASP页的HTML标记，少不了文本与脚本命令文件的参与。动态服务器主页，任务的执行需要调用ActiveX组件连接到数据库来实现，利用ASP为web页添加交互板块。

（二）DIV+CSS布局

DIV+CSS是一种网页的布局方法。我们经常会在看到“web标准”，其实这是一种术语，即DIV+CSS网站标准，是一种与传统的HTML网页设计不同的网页的布局方法。在这一传统语言中，网页的布局方法依靠table布局，进行表格定位。采用DIV+CSS架构的网页布局，优势在于能够达到W3C内容与表现相分离。可以保障网站页面的加载速度，使得搜索引擎更加优化。

二、DIV+CSS布局优点

（一）DIV+CSS布局使页面快速载入

DIV+CSS定位方式，将页面分成好多区域，在页面的加载中，会逐层进行，不用读取大表格和小的表格，无形中加快了加载的速度。

（二）使得流量费大大减少

DIV+CSS定位方式，缩小了页面体积，但使得网页的浏览速度加快。大大方便了那些控制主机流量的网站。DIV+CSS的精简代码是table无法相比的，DIV+CSS实现了样式和布局完全分离，减少前台垃圾代码。

（三）提高修改设效率

页面的修改，使用DIV+CSS制作方法，变得更加容易、省时。页面修改时，由于存在区域的内容标记，非常容易地就能在CSS里找到相应的ID，页面其他部分的布局样式，依然完整不会被破坏。

（四）视觉始终保持一致性

页面之间，或区域之间的显示效果，由于传统上采用了表格嵌套的制作方法，会有偏差。而DIV+CSS制作方法，改变了传统方法上的缺陷，在视觉上保持了的页面的一致性。用CSS文件控制所有的页面与区域，并实现统一。这种方法使得页面的不同区域、不同页面效果偏差降低到最小。

（五）更好地被搜索引擎收录

对浏览者和浏览器有亲和力的网站，浏览量就高，这一特性在DIV+CSS中就有显示。在CSS文件中，写进大量的HTML代码，使得正文部分在网页中非常的突出明显，大大提高了网页被搜索引擎收录的几率。CSS中的样式多样，根据不同的浏览器灵活地选择页面，使显示效果不断统一固定。DIV+CSS更加有利于SEO的优化，使用DIV+CSS的构建的网站也深受搜索引擎的喜欢。

三、DIV+CSS存在的问题

DIV+CSS存在的优势很多，但是到目前来看用CSS+DIV进行动态网站建，还是存在一些问题的。

（一）CSS+DIV定位复杂

在网页的设计中，CSS+DIV需要以CSS为依托，但是这样操作就使得网页设计比起传统的table表格布局定位复杂很多。就使得网站设计过程中，或多或少的问题就容易出现。

（二）整个网站，受CSS文件影响较大

在动态网站的设计中，在几个外部文件中，都存放着CSS网站制作的设计元素。一旦 CSS文件出现问题，整个网站的正常浏览将受到很大的影响。由于CSS文件之间关系复杂文件较大，就会出现调用CSS文件异常，严重的整个网站将处于瘫痪状态。

（三）浏览器兼容性差

虽然CSS+DIV优势多，但浏览器的兼容性是不及于HTML4.0的网页设计的，因为改版后IE4.0不存在浏览器兼容性问题。而CSS+DIV设计的网站相反，只在IE浏览器中页面能正常显示，在FireFox（火狐浏览器）中却被显示的大相径庭。

（四）网页设计的专业水平，决定CSS+DIV引擎优化

网页设计的专业水平，是决定CSS+DIV对搜索引擎优化程度。CSS+DIV网页自身代码设计，不比HTML网站简洁，不能对网页搜索引擎进行优化。搜索引擎对于网页的收录和网站排序衡量标准，不考虑是CSS及web标准制作还是使用传统表格布局。网站结构、内容、相关网站链接是搜索引擎、网站优化的直接因素。

四、使用DIV+CSS设计ASP网站需要注意的环节

在使用DIV+CSS设计ASP网站中，需要检查HTML元素的拼写，结束标记是否写好，div嵌套关系，是否弄错。为防止错误出现可以用dreamweaver网页编辑工具的验证功能进行检查。同时检查CSS拼写是否正确，尤其是结尾的“}”。CleanCSS需要充分利用起来，既能够为CSS“瘦身”，也可以检查 CSS的拼写错误。当找准影响整体布局的错误位置后，可将div块逐一删除，直到恢复正常显示为止，来确定错误发生的准确位置。使用float属性布局容易出错，需要确定元素边界，为元素添加border属性显示出错误原因。显示未指定width的float元素时，多数浏览器会有bug。因此，指定width属性，使用em单位指定元素，是必不可少的。

另外，不要忘记写DTD，在对浏览器调整无效，显示结果还是不一样，需要检查页面开头是否写出了DTD：<！DOCTYPE HTML PUBLIC “—//W3C//DTD HTML 4.01 Transitional//EN”。

[参考文献]

[1] 周鑫.浅谈DIV+CSS技术在网页设计中的应用[J].科技信息，2011，（17）.

[2] 朱俊，汪舒银.CSS在网页设计中的应用[J].安徽水利水电职业技术学院学报，2007，（1）.

[3] 黄雄平.基于Dreamweaver的DIV+CSS网页设计初步研究[J].电脑知识与技术，2010，（36）.

[4] 张志洁，李书明，赵玲.CSS技术在网页设计中的应用探析[J].电脑知识与技术（学术交流），2007，（10）.

[5] 袁自海.CSS在网页设计中的应用[J].电脑知识与技术；2008，（8）.

[6] 赵清华，林学华.基于DIV+CSS的网页布局技术应用研究[J].现代计算机（专业版），2010，（5）.

[责任编辑：戴祯杰]