DIV+CSS技术在网站页面设计中的应用
2014-08-08 03:38黄成立杨育均
现代情报 2014年5期
黄成立+杨育均
作者简介：黄成立（１９８６－），男，工程师，研究方向：信息管理、数字图书馆技术。•业务研究•
〔摘要〕本文以建设广东开放大学图书馆网站为例，介绍了DIV+CSS技术及利用其设计页面的几个好处：有利于搜索引擎采集和收录、方便定制样式、具有清晰的语义结构和较低的页面成本。文章详细阐述了DIV+CSS技术在图书馆网站页面设计中的布局、结构和样式，以及使用DIV+CSS时需要避免的4个方面，明确了如何设计一个标准化的网站。
〔关键词〕DIV+CSS；图书馆网站；页面设计
ＤＯＩ：１０．３９６９／ｊ．ｉｓｓｎ．１００８－０８２１．２０１４．０５．０３１
〔中图分类号〕ＴＰ３９３０９２〔文献标识码〕Ｂ〔文章编号〕１００８－０８２１（２０１４）０５－０１４６－０４
Application of DIV+CSS Technique to Web Page Design at the Website
——Taking the Library of Guangdong Open University for ExampleHuang ChengliYang Yujun
（Library，Guangdong Open University，Guangzhou 510091，China）
〔Ａｂｓｔｒａｃｔ〕Taking the Library Website of Guangdong Open University for example,the paper described The DIV+CSS web page layout technique and its advantages:conducive to search engine collection and included,easy to customize the style,clear semantic structure and lower cost of the page.The authors described in detail the layout,structure and style of the library website,and pointed out 4 problems that it must be careful while using the DIV+CSS technical methods,explained clearly how to design a standardized website.
〔Ｋｅｙｗｏｒｄｓ〕DIV+CSS;library website;web page design
2013年8月2日，广东开放大学在广东广播电视大学的基础上正式揭牌成立。广东开放大学作为开放教育的载体，肩负构建终身教育体系的社会责任。为了向社会持续提供强大的人才保证和智力支持，广东开放大学要在办学体制、远程开放教育、培养应用型人才和开放合作上办出特色，加强国际国内交流与合作，努力在全国开放大学建设中争当先进［１］。图书馆作为广东开放大学组织机构中的一员，是读者的学习资源中心，致力于提供读者服务和科研服务。目前，图书馆网站是在线服务的窗口，必须重视它的建设，为了适应信息时代对网站的要求，笔者选择DIV+CSS技术进行图书馆网站的网页设计。DIV+CSS技术不仅将网页内容和表现分离，而且使网页结构清晰、维护成本低。DIV+CSS技术可以为读者提供简洁、易用、美观、易修改的图书馆网站平台。
１什么是DIV+CSS技术
网站页面设计制作需要面临的一个问题是定位布局，在以往是用TABLE的方式，即将整个网页当作一个表格，然后在表格里面填充文字、图片、链接之类的元素。现在页面布局已经基本摈弃了TABLE布局方式，而采用DIV+CSS方式。所谓的DIV+CSS是指通过CSS控制DIV的布局。其实DIV可以理解为统称，实际应用的不仅是DIV，还有p、span、img、table、h1—h6、ul、dl、ol等任意节点的定位都可以通过CSS来控制。因此，DIV+CSS技术并不是简单的DIV与CSS的相加，而是利用CSS综合控制HTML的各种标签进行网页布局。
DIV是division的简写，是一个块级元素，可以把HTML文档分割为一块一块的内容，而且内容互相独立。它和常见的HTML标签p、h1等一样，具有它的作用，比如一个p元素应该包含一段文本，而一个h1元素应该包含页面的最高层级标题。DIV被用来表示一个逻辑区块，被用于指定特定的区块或行列，它可以包含段落、标题、表格等。因为DIV的块级属性，使它的内容自动地开始一行，一般设计人员会通过class或id为DIV应用必备的样式，控制这个DIV［２］。
CSS是Cascading Style Sheet（层叠样式表）的缩写，由W3C组织负责制定和发布，是一种用来表现HTML文档样式的计算机标记语言。使用CSS设置页面格式时，内容与表现形式相互分开。页面内容位于自身的HTML文件中，而定义代码表现形式的CSS规则位于另一个文件（即外部样式表）或HTML文档的另一部分（通常为部分）中。网页设计人员可以使用CSS来决定网页的颜色、字体、排版等，CSS可以非常灵活并很好地控制页面的外观，使网页的内容和表现形式分隔开来，增强文件的结构性、可读性。
因此，DIV用于搭建网站的框架和内容，CSS用于创建网站的样式。笔者通过DIV+CSS技术对图书馆网站进行标准化建设，可以设计一个较优秀的网站平台，它不仅有一个清晰的网站结构，还有一个易于维护和扩展的样式。
２利用DIV+CSS技术设计图书馆网站的好处
使用CSS布局的页面，首先它的结构和表现可以分离，分别控制，文档简洁清晰；其次它可以去掉大量冗余代码，使页面的更新和维护更加方便；第三是通过修改CSS文件中定义的样式，可以统一修改网站中所有页面中相同的样式［３］。正因为具备上述优势，使得DIV+CSS设计的页面有明显的好处，主要表现在如下方面：
２１有利于搜索引擎采集和收录
DIV+CSS设计的网页结构清晰，有利于搜索引擎蜘蛛爬行。广东开放大学图书馆网站的HTML代码架构是树形架构，即是首页——栏目页——内容页，之后首页到内容页的层次逐次减少，权重得到良好的传递，保证搜索引擎蜘蛛从网站的某个页面爬行获取内容，然后找到网页中的其他链接。因为每个页面都有一个文本的链接指向，有利于网站的全面抓取和收录，蜘蛛很轻易就能获取网页的HTML代码，保存在自己的数据库中［４］。这样有利于推广广东开放大学图书馆网站。
２２方便定制样式
DIV+CSS设计的网页实现了内容和样式的分离，在内容固定不变的情况下，仅修改CSS样式表就能轻松改变页面的表现效果。理论上，可以根据实际需要使网页产生各种不同的布局，笔者在图书馆首页就实现了3栏布局，而在图书馆新闻页面则实现了2栏布局。又比如设计人员还可以根据1年各个节日的到来，设计庆祝节日的各式背景，只要替换CSS中关于背景设定的样式，就能轻易实现随节日变化的不同背景的网站页面。
２３清晰的语义结构，较低的页面成本
DIV+CSS设计的网页使用了清晰的语义结构，设计人员可以轻易读懂源代码代表的意思，需要维护和更新网站页面的时候会比较容易。另外，广东开放大学图书馆网站采用了自建的内容管理平台生成网页，因为DIV+CSS技术压缩了页面大小，保持了页面的简洁，节省了不少空间，提高了运行网页的速度和效率，让页面加载得更快，响应读者的操作更加及时，带给读者更加友好的体验，降低了页面成本。
endprint
３DIV+CSS技术在图书馆网站的应用
广东开放大学图书馆网站的定位：服务读者、服务开放教育，紧密围绕学校教学与科研的需要，密切关注广大师生读者的实际需求，不断发展和完善文献信息资源保障体系，致力提升惠及每一位读者的图书馆信息服务水平，为读者提供全方位、高质量、高可用性的图书馆管理平台［５］。笔者根据网站的定位和图书馆网站的用户特点，确定网站页面表现风格：架构明晰、大气沉稳、内容凝练全面、色调轻快不呆板。
以首页为例，笔者确定了以白色为主体风格，网页布局采用上中下竖直框架。框架包括，页面头部（图书馆logo、搜索区域、菜单导航）、主内容区（左侧、中部和右侧，包括图书期刊查询、图书馆消息、入馆指南、图书推荐、电子资源、活动专题、专业导航）、页脚区域（包括常用链接、版权信息），如图１首页效果图与框架图所示。
首页的主要HTML结构及页面的主要样式结构CSS如表１所示，其中HTML结构中body控制了网站的背景色和背景图，奠定了网站白色基调。id=″box″是控制整个页面的DIV块，id=″top″是图书馆网站头部位置，网站的搜索框也在其中。id=″nav″是放置上部菜单导航的区域，id=″foot″是页脚信息所在。id=″mid″是网页中部主要内容的DIV块，它嵌套了图片新闻、图书馆消息、入馆指南、图书期刊查询及图书推荐、引进数字资源、专业导航等栏目的DIV块。关键CSS样式处罗列了id是body、box、top、nav、foot、mid这几个DIV块的详细样式，它们奠定了网站首页的基本布局。
id=″mid″部分是详细内容区域，在这个区域中需要制作3栏布局结构，笔者使用了CSS的float属性布局，同时为了确定所有的栏目在特定的位置，笔者还指定了各个DIV块的宽度，比如图片新闻栏目的DIV宽度是350px，图书馆消息栏目的DIV宽度是410px，入馆指南栏目的DIV宽度是230px。按照表１中的HTML结构显示，笔者首先确定了DIV id=″pic-news″的位置，再确定余下DIV的位置。id=″mid″里包含的DIV块都采用浮动，在它们的css样式里写上“float：left”的关键属性。在这仅举图片新闻栏目为例，它的部分关键代码如表２所示。图１首页效果图与框架图
表１首页HTML结构和CSS关键样式
主要HTML结构关键CSS样式
超星搜索框
图片新闻
图书馆消息
入馆指南
图书、期刊查询及图书推荐
引进数字资源
专业导航
页脚信息
#fff;background-image:url（../images/bgpage.jpg）;background-repeat:repeat-x;}#box{width:
1024px;margin:0 auto;zoom:1;overflow:
hidden;}#top {width:inherit;height:140px;
z-index:9;position:relative;}#nav
{width:inherit;height:35px;z-index:8;
position:relative;}#mid {width:inherit;
min-height:700px;height:auto !important;
text- align:left;z-index:3}#foot
{width:inherit;height:130px;
background-color:#f7f7f7;padding:10px 0px 10px 0px;}
为了保持网站一致性，二级页面设计沿用首页的白色基调和基本布局，头部及导航不变，中部主要内容改成2栏布局，既兼顾了与首页的统一风格，也使网站生成了不同版式的页面，不致单调。如图２所示，是图书馆消息的页面效果图，中部左侧是新闻资讯栏，中部右侧是图书馆消息的详细内容。至于页脚部分，采取CSS的clear属性清除2栏布局的浮动，消除浮动带来的元素定位不准的消极影响，得到比较好的表现效果。
表２图片新闻DIV块和css关键样式
图片新闻DIV块图片新闻css关键样式
- 导入图片
- 图片按钮
向左功能
向右功能
height:200px;
float:left;
margin:10px 0px 0px 0px;
position:relative;overflow:hidden;
}图２二级页面效果图
４DIV+CSS技术在网站页面设计中需要注意的方面DIV+CSS技术在网站页面设计中具有许多好处，不过也需要在一些方面详加注意，主要是下面几个方面：
４１避免在HTML文档上直接写CSS样式
有些设计人员喜欢直接在HTML页面上写CSS样式，而不是引用外部样式表。虽然它比将HTML显示和结构指令混在一起是一个进步，但它仍然有同样的缺点，维护会显得困难，而且使HTML文档变得相对臃肿。
４２避免CSS命名的陷阱
CSS和其他编程语言有一些共同的陷阱。尤其在命名CSS的id和class的时候，设计人员会选择一个比较有说明性的名称来命名。比如笔者曾经使用“big-blue”来为“广东开放大学图书馆”这个H2标签命名。在当时，对笔者来说这个名称可能是直觉的，就是一个大蓝字体，但后来笔者决定突出显示的字节应该使用红色而非蓝色，于是“big-blue”的命名就不合适。因此，命名应该突出的是这个“id”或“class”的用意，而不是它是如何被显示［６］。
４３避免过分使用DIV元素嵌套
虽然大部分使用CSS的页面比传统的使用表格的页面要整洁，但过分使用class、id和过于细腻的结构层次同样会使HTML变得臃肿，难以阅读和维护。因此DIV块不是越多越好，如果发现有很多的DIV，就要想想是否存在滥用情况，要思考是否可以用其他标记替代。若h1标签可以更好表示DIV块所标示的内容，就要放弃DIV块。应该使HTML文档在逻辑上具有清晰的结构，所以DIV块数量要适中，能达到样式控制的结果比较好。HTML本身的标签也要灵活应用。
４４避免过量引入解决浏览器兼容性的CSS样式
网上充斥着各类浏览器，每个浏览器对CSS的支持不是完全统一的，使用CSS设计后浏览器的显示效果也是各有不同。例如微软Internet Explorer的旧版本60、甚至70，错误显示一些重要的属性，如width，height和float等，跟W3C的标准有所不同。另外，有些新的CSS3的样式尚未成为标准，使用时需要加上前缀，使其效果可以在不同的浏览器中正确显示。因此，笔者为了解决浏览器差异，需要额外撰写特别的CSS样式，CSS的文件因此增大，如果这些特别的CSS样式太多，它的维护量会很大，会导致维护性能降低。
５结语
笔者通过实际构建广东开放大学图书馆网站，明确了DIV+CSS技术具有的好处，也提出了在设计过程中需要注意的一些问题。DIV+CSS是一个强大的技术工具，只要设计人员运用得当，就能设计一个符合W3C标准的网站，服务好用户。
参考文献
［１］广东开放大学揭牌成立学校发展进入新纪元［ＥＢ／ＯＬ］.http:∥www.fsrtvu.net:8080/newstest/index.php/cms/item-view-id-18.shtml，2014-01-17.
［２］span与div［ＥＢ／ＯＬ］.http:∥zh.wikipedia.org/wiki/Span%E4%B8%8Ediv，2014-01-22.
［３］苏文.DIV+CSS技术在高校教务网站页面设计中的应用［Ｊ］.连云港职业技术学院学报，2013，（6）：24-26.
［４］吴泽欣.SEO教程:搜索引擎优化入门与进阶（第2版）:搜索引擎优化入门与进阶［Ｍ］.北京：人民邮电出版社，2009.
［５］图书馆简介［ＥＢ／ＯＬ］.http:∥library.gdrtvu.edu.cn/guide/g1.html，2014-01-24.
［６］层叠样式表［ＥＢ／ＯＬ］.http:∥zh.wikipedia.org/wiki/%E5%B1%82%E5%8F%A0%E6%A0%B7%E5%BC%8F%E8%A1%A8，2014-01-27.
（本文责任编辑：马卓）
endprint
３DIV+CSS技术在图书馆网站的应用
广东开放大学图书馆网站的定位：服务读者、服务开放教育，紧密围绕学校教学与科研的需要，密切关注广大师生读者的实际需求，不断发展和完善文献信息资源保障体系，致力提升惠及每一位读者的图书馆信息服务水平，为读者提供全方位、高质量、高可用性的图书馆管理平台［５］。笔者根据网站的定位和图书馆网站的用户特点，确定网站页面表现风格：架构明晰、大气沉稳、内容凝练全面、色调轻快不呆板。
以首页为例，笔者确定了以白色为主体风格，网页布局采用上中下竖直框架。框架包括，页面头部（图书馆logo、搜索区域、菜单导航）、主内容区（左侧、中部和右侧，包括图书期刊查询、图书馆消息、入馆指南、图书推荐、电子资源、活动专题、专业导航）、页脚区域（包括常用链接、版权信息），如图１首页效果图与框架图所示。
首页的主要HTML结构及页面的主要样式结构CSS如表１所示，其中HTML结构中body控制了网站的背景色和背景图，奠定了网站白色基调。id=″box″是控制整个页面的DIV块，id=″top″是图书馆网站头部位置，网站的搜索框也在其中。id=″nav″是放置上部菜单导航的区域，id=″foot″是页脚信息所在。id=″mid″是网页中部主要内容的DIV块，它嵌套了图片新闻、图书馆消息、入馆指南、图书期刊查询及图书推荐、引进数字资源、专业导航等栏目的DIV块。关键CSS样式处罗列了id是body、box、top、nav、foot、mid这几个DIV块的详细样式，它们奠定了网站首页的基本布局。
id=″mid″部分是详细内容区域，在这个区域中需要制作3栏布局结构，笔者使用了CSS的float属性布局，同时为了确定所有的栏目在特定的位置，笔者还指定了各个DIV块的宽度，比如图片新闻栏目的DIV宽度是350px，图书馆消息栏目的DIV宽度是410px，入馆指南栏目的DIV宽度是230px。按照表１中的HTML结构显示，笔者首先确定了DIV id=″pic-news″的位置，再确定余下DIV的位置。id=″mid″里包含的DIV块都采用浮动，在它们的css样式里写上“float：left”的关键属性。在这仅举图片新闻栏目为例，它的部分关键代码如表２所示。图１首页效果图与框架图
表１首页HTML结构和CSS关键样式
主要HTML结构关键CSS样式
超星搜索框
图片新闻
图书馆消息
入馆指南
图书、期刊查询及图书推荐
引进数字资源
专业导航
页脚信息
#fff;background-image:url（../images/bgpage.jpg）;background-repeat:repeat-x;}#box{width:
1024px;margin:0 auto;zoom:1;overflow:
hidden;}#top {width:inherit;height:140px;
z-index:9;position:relative;}#nav
{width:inherit;height:35px;z-index:8;
position:relative;}#mid {width:inherit;
min-height:700px;height:auto !important;
text- align:left;z-index:3}#foot
{width:inherit;height:130px;
background-color:#f7f7f7;padding:10px 0px 10px 0px;}
为了保持网站一致性，二级页面设计沿用首页的白色基调和基本布局，头部及导航不变，中部主要内容改成2栏布局，既兼顾了与首页的统一风格，也使网站生成了不同版式的页面，不致单调。如图２所示，是图书馆消息的页面效果图，中部左侧是新闻资讯栏，中部右侧是图书馆消息的详细内容。至于页脚部分，采取CSS的clear属性清除2栏布局的浮动，消除浮动带来的元素定位不准的消极影响，得到比较好的表现效果。
表２图片新闻DIV块和css关键样式
图片新闻DIV块图片新闻css关键样式
- 导入图片
- 图片按钮
向左功能
向右功能
height:200px;
float:left;
margin:10px 0px 0px 0px;
position:relative;overflow:hidden;
}图２二级页面效果图
４DIV+CSS技术在网站页面设计中需要注意的方面DIV+CSS技术在网站页面设计中具有许多好处，不过也需要在一些方面详加注意，主要是下面几个方面：
４１避免在HTML文档上直接写CSS样式
有些设计人员喜欢直接在HTML页面上写CSS样式，而不是引用外部样式表。虽然它比将HTML显示和结构指令混在一起是一个进步，但它仍然有同样的缺点，维护会显得困难，而且使HTML文档变得相对臃肿。
４２避免CSS命名的陷阱
CSS和其他编程语言有一些共同的陷阱。尤其在命名CSS的id和class的时候，设计人员会选择一个比较有说明性的名称来命名。比如笔者曾经使用“big-blue”来为“广东开放大学图书馆”这个H2标签命名。在当时，对笔者来说这个名称可能是直觉的，就是一个大蓝字体，但后来笔者决定突出显示的字节应该使用红色而非蓝色，于是“big-blue”的命名就不合适。因此，命名应该突出的是这个“id”或“class”的用意，而不是它是如何被显示［６］。
４３避免过分使用DIV元素嵌套
虽然大部分使用CSS的页面比传统的使用表格的页面要整洁，但过分使用class、id和过于细腻的结构层次同样会使HTML变得臃肿，难以阅读和维护。因此DIV块不是越多越好，如果发现有很多的DIV，就要想想是否存在滥用情况，要思考是否可以用其他标记替代。若h1标签可以更好表示DIV块所标示的内容，就要放弃DIV块。应该使HTML文档在逻辑上具有清晰的结构，所以DIV块数量要适中，能达到样式控制的结果比较好。HTML本身的标签也要灵活应用。
４４避免过量引入解决浏览器兼容性的CSS样式
网上充斥着各类浏览器，每个浏览器对CSS的支持不是完全统一的，使用CSS设计后浏览器的显示效果也是各有不同。例如微软Internet Explorer的旧版本60、甚至70，错误显示一些重要的属性，如width，height和float等，跟W3C的标准有所不同。另外，有些新的CSS3的样式尚未成为标准，使用时需要加上前缀，使其效果可以在不同的浏览器中正确显示。因此，笔者为了解决浏览器差异，需要额外撰写特别的CSS样式，CSS的文件因此增大，如果这些特别的CSS样式太多，它的维护量会很大，会导致维护性能降低。
５结语
笔者通过实际构建广东开放大学图书馆网站，明确了DIV+CSS技术具有的好处，也提出了在设计过程中需要注意的一些问题。DIV+CSS是一个强大的技术工具，只要设计人员运用得当，就能设计一个符合W3C标准的网站，服务好用户。
参考文献
［１］广东开放大学揭牌成立学校发展进入新纪元［ＥＢ／ＯＬ］.http:∥www.fsrtvu.net:8080/newstest/index.php/cms/item-view-id-18.shtml，2014-01-17.
［２］span与div［ＥＢ／ＯＬ］.http:∥zh.wikipedia.org/wiki/Span%E4%B8%8Ediv，2014-01-22.
［３］苏文.DIV+CSS技术在高校教务网站页面设计中的应用［Ｊ］.连云港职业技术学院学报，2013，（6）：24-26.
［４］吴泽欣.SEO教程:搜索引擎优化入门与进阶（第2版）:搜索引擎优化入门与进阶［Ｍ］.北京：人民邮电出版社，2009.
［５］图书馆简介［ＥＢ／ＯＬ］.http:∥library.gdrtvu.edu.cn/guide/g1.html，2014-01-24.
［６］层叠样式表［ＥＢ／ＯＬ］.http:∥zh.wikipedia.org/wiki/%E5%B1%82%E5%8F%A0%E6%A0%B7%E5%BC%8F%E8%A1%A8，2014-01-27.
（本文责任编辑：马卓）
endprint
３DIV+CSS技术在图书馆网站的应用
广东开放大学图书馆网站的定位：服务读者、服务开放教育，紧密围绕学校教学与科研的需要，密切关注广大师生读者的实际需求，不断发展和完善文献信息资源保障体系，致力提升惠及每一位读者的图书馆信息服务水平，为读者提供全方位、高质量、高可用性的图书馆管理平台［５］。笔者根据网站的定位和图书馆网站的用户特点，确定网站页面表现风格：架构明晰、大气沉稳、内容凝练全面、色调轻快不呆板。
以首页为例，笔者确定了以白色为主体风格，网页布局采用上中下竖直框架。框架包括，页面头部（图书馆logo、搜索区域、菜单导航）、主内容区（左侧、中部和右侧，包括图书期刊查询、图书馆消息、入馆指南、图书推荐、电子资源、活动专题、专业导航）、页脚区域（包括常用链接、版权信息），如图１首页效果图与框架图所示。
首页的主要HTML结构及页面的主要样式结构CSS如表１所示，其中HTML结构中body控制了网站的背景色和背景图，奠定了网站白色基调。id=″box″是控制整个页面的DIV块，id=″top″是图书馆网站头部位置，网站的搜索框也在其中。id=″nav″是放置上部菜单导航的区域，id=″foot″是页脚信息所在。id=″mid″是网页中部主要内容的DIV块，它嵌套了图片新闻、图书馆消息、入馆指南、图书期刊查询及图书推荐、引进数字资源、专业导航等栏目的DIV块。关键CSS样式处罗列了id是body、box、top、nav、foot、mid这几个DIV块的详细样式，它们奠定了网站首页的基本布局。
id=″mid″部分是详细内容区域，在这个区域中需要制作3栏布局结构，笔者使用了CSS的float属性布局，同时为了确定所有的栏目在特定的位置，笔者还指定了各个DIV块的宽度，比如图片新闻栏目的DIV宽度是350px，图书馆消息栏目的DIV宽度是410px，入馆指南栏目的DIV宽度是230px。按照表１中的HTML结构显示，笔者首先确定了DIV id=″pic-news″的位置，再确定余下DIV的位置。id=″mid″里包含的DIV块都采用浮动，在它们的css样式里写上“float：left”的关键属性。在这仅举图片新闻栏目为例，它的部分关键代码如表２所示。图１首页效果图与框架图
表１首页HTML结构和CSS关键样式
主要HTML结构关键CSS样式
超星搜索框
图片新闻
图书馆消息
入馆指南
图书、期刊查询及图书推荐
引进数字资源
专业导航
页脚信息
#fff;background-image:url（../images/bgpage.jpg）;background-repeat:repeat-x;}#box{width:
1024px;margin:0 auto;zoom:1;overflow:
hidden;}#top {width:inherit;height:140px;
z-index:9;position:relative;}#nav
{width:inherit;height:35px;z-index:8;
position:relative;}#mid {width:inherit;
min-height:700px;height:auto !important;
text- align:left;z-index:3}#foot
{width:inherit;height:130px;
background-color:#f7f7f7;padding:10px 0px 10px 0px;}
为了保持网站一致性，二级页面设计沿用首页的白色基调和基本布局，头部及导航不变，中部主要内容改成2栏布局，既兼顾了与首页的统一风格，也使网站生成了不同版式的页面，不致单调。如图２所示，是图书馆消息的页面效果图，中部左侧是新闻资讯栏，中部右侧是图书馆消息的详细内容。至于页脚部分，采取CSS的clear属性清除2栏布局的浮动，消除浮动带来的元素定位不准的消极影响，得到比较好的表现效果。
表２图片新闻DIV块和css关键样式
图片新闻DIV块图片新闻css关键样式
- 导入图片
- 图片按钮
向左功能
向右功能
height:200px;
float:left;
margin:10px 0px 0px 0px;
position:relative;overflow:hidden;
}图２二级页面效果图
４DIV+CSS技术在网站页面设计中需要注意的方面DIV+CSS技术在网站页面设计中具有许多好处，不过也需要在一些方面详加注意，主要是下面几个方面：
４１避免在HTML文档上直接写CSS样式
有些设计人员喜欢直接在HTML页面上写CSS样式，而不是引用外部样式表。虽然它比将HTML显示和结构指令混在一起是一个进步，但它仍然有同样的缺点，维护会显得困难，而且使HTML文档变得相对臃肿。
４２避免CSS命名的陷阱
CSS和其他编程语言有一些共同的陷阱。尤其在命名CSS的id和class的时候，设计人员会选择一个比较有说明性的名称来命名。比如笔者曾经使用“big-blue”来为“广东开放大学图书馆”这个H2标签命名。在当时，对笔者来说这个名称可能是直觉的，就是一个大蓝字体，但后来笔者决定突出显示的字节应该使用红色而非蓝色，于是“big-blue”的命名就不合适。因此，命名应该突出的是这个“id”或“class”的用意，而不是它是如何被显示［６］。
４３避免过分使用DIV元素嵌套
虽然大部分使用CSS的页面比传统的使用表格的页面要整洁，但过分使用class、id和过于细腻的结构层次同样会使HTML变得臃肿，难以阅读和维护。因此DIV块不是越多越好，如果发现有很多的DIV，就要想想是否存在滥用情况，要思考是否可以用其他标记替代。若h1标签可以更好表示DIV块所标示的内容，就要放弃DIV块。应该使HTML文档在逻辑上具有清晰的结构，所以DIV块数量要适中，能达到样式控制的结果比较好。HTML本身的标签也要灵活应用。
４４避免过量引入解决浏览器兼容性的CSS样式
网上充斥着各类浏览器，每个浏览器对CSS的支持不是完全统一的，使用CSS设计后浏览器的显示效果也是各有不同。例如微软Internet Explorer的旧版本60、甚至70，错误显示一些重要的属性，如width，height和float等，跟W3C的标准有所不同。另外，有些新的CSS3的样式尚未成为标准，使用时需要加上前缀，使其效果可以在不同的浏览器中正确显示。因此，笔者为了解决浏览器差异，需要额外撰写特别的CSS样式，CSS的文件因此增大，如果这些特别的CSS样式太多，它的维护量会很大，会导致维护性能降低。
５结语
笔者通过实际构建广东开放大学图书馆网站，明确了DIV+CSS技术具有的好处，也提出了在设计过程中需要注意的一些问题。DIV+CSS是一个强大的技术工具，只要设计人员运用得当，就能设计一个符合W3C标准的网站，服务好用户。
参考文献
［１］广东开放大学揭牌成立学校发展进入新纪元［ＥＢ／ＯＬ］.http:∥www.fsrtvu.net:8080/newstest/index.php/cms/item-view-id-18.shtml，2014-01-17.
［２］span与div［ＥＢ／ＯＬ］.http:∥zh.wikipedia.org/wiki/Span%E4%B8%8Ediv，2014-01-22.
［３］苏文.DIV+CSS技术在高校教务网站页面设计中的应用［Ｊ］.连云港职业技术学院学报，2013，（6）：24-26.
［４］吴泽欣.SEO教程:搜索引擎优化入门与进阶（第2版）:搜索引擎优化入门与进阶［Ｍ］.北京：人民邮电出版社，2009.
［５］图书馆简介［ＥＢ／ＯＬ］.http:∥library.gdrtvu.edu.cn/guide/g1.html，2014-01-24.
［６］层叠样式表［ＥＢ／ＯＬ］.http:∥zh.wikipedia.org/wiki/%E5%B1%82%E5%8F%A0%E6%A0%B7%E5%BC%8F%E8%A1%A8，2014-01-27.
（本文责任编辑：马卓）
endprint
