采用DIV+CSS技术的高校门户网站系统分析和设计

摘要：本文针对采用传统表格布局方式的高校门户网站系统设计的局限性，如下载速度慢，网页代码不清晰，维护成本大等缺点，给出了采用DIV+CSS布局技术的高校门户网站系统设计方案。实验表明采用DIV+CSS技术页面布局方案一经开发者熟练掌握之后，将会比表格布局更加灵活实用。

关键词：DIV+CSS页面布局； Table页面布局； 高校门户网站

中图分类号：TP3021 文献标识码：A文章编号：2095-2163（2014）04-0068-04

Abstract：According to the limitation of the table-layout of the university Gateway website system ， such as the slow downloading， blurring page code and high maintenance costs etc， this pape puts forward a design scheme for the university gateway website system using DIV+CSS technology. And the experiments show that the DIV+CSS layout would be more flexible than the table layout.

Key words：DIV+CSS Page Layout；Table Page Layout；University Gateway Website

0引言

高校门户网站是发布日常教学信息、提供学生选课服务、展示高校各类教学科研成果的综合性平台。目前，很多高校门户网站的页面布局采用的仍然是传统Table表格布局方式。表格布局在WEB2.0问世之前是比较通行的页面布局方式，但是随着网络技术的快速发展，这种布局方式的弊端逐渐显现出来。该种表格布局方式将网页的主体内容和页面表现格式混搭在一起，导致网页代码结构不清，不利于网页的设计和网站的维护。表格布局的浏览速度也比较慢，表格布局所在的网页要在表格中的所有元素下载完毕后才能显示完整的页面内容。

DIV+CSS页面布局技术的出现克服了表格页面布局方式的上述不足。采用DIV+CSS网页布局技术的高校门户网站的页面代码，可将页面的内容和页面的表现格式进行分离[1]，这将使得高校门户网站的项目代码更加清晰，方便开发者阅读，有利于日后网站的升级和维护。DIV+CSS技术在提高网站下载速度的同时，也能够使高校门户网站更具亲和力，并且能够提升高校门户网站日后的浏览器兼容性[2]。

1DIV+CSS页面布局技术

CSS（Cascading Style Sheets）层叠样式表又称级联样式表，是由 W3C 的 CSS工作组策划提出的[3]。CSS在网站设计中主要负责网页内容的格式显示和布局方式。层叠样式表是一种不需要编译的标记语言，可以直接由浏览器执行，因为CSS属于浏览器解释型语言。CSS 在网页排版方面表现非常优秀，使用 CSS不仅可以控制网页文字的大小、网页文字颜色、网页文字对齐方式和网页文字字体类型等文本格式，还可以控制网页文字行高、字母间距、英文字符大小写等段落格式，同时也可以控制文本的第一个字或第一行的样式。网页开发者可以将自己所创建的样式规则应用于整个网站的所有网页文件，这样就能实现在任何时候均可寻获需要更改网站内容的格式，如字号增大，或是需要改变正文的字体，并且只需要更改对应的样式表中的CSS属性值即可。

CSS标记语言的代码应用于网页一共有四种方式：直接在HTML标记的Style属性中存放CSS代码；写入网页Head标记内的内部样式规则；嵌入外部样式规则和链接外部样式规则。这种外部样式规则是把CSS代码放在一个独立于网页文件的普通文本文件中，该文本文件要求必须使用css作为文件的扩展名。外部样式表使得网站开发者可以通过简单地更改 CSS 文件，从而实现改变网页的整体表现形式的目的。如此一来，就节省了网站维护成本，也提高了网站的维护效率，更使得只要通过操作一个CSS文件就可以改变整个网站页面的外观风格和布局方式。

DIV（Division）标记是一个容器型标记，可以利用该标记来进行网页的布局。一个网页可以由若干个这样的DIV容器组成，每个容器都对应于网页的一个独立模块。DIV容器和其它HTML标记一样可以通过 CSS进行控制。级联样式表可以控制DIV容器显示大小、背景颜色、背景图片、正文字体类别、正文字体大小以及DIV容器所定义的模块在网页当中具体的摆放位置等[4]。

DIV+CSS 布局方式的思路是首先使用DIV容器标记，将网页划分成几个模块，每个DIV标记可以对应一个独立的网页模块[5]。其后把页面的内容元素分别放入所对应的DIV模块中，再通过CSS规则来控制每个容器模块的样式，并采用CSS边框属性（Border）、填充属性（Padding） 、边界属性 （Margin） 和浮动属性 （Float）来控制容器模块间的相对位置，最终确定相互之间的布局方案和位置关系[6]。

2采用DIV+CSS技术的高校网站系统分析和设计

高校门户网站系统从功能上划分共分为以下几个模块：首页、学校概况、机构设置、师资队伍、人才培养、科学研究、国际交流、学生工作、招生信息、就业指导和公共服务。各模块的详细结构即如图1所示。

（1）网站LOGO区域：用来显示高校名称和其LOGO标志图片。

（2）网站导航区域：以导航链接列表的形式显示网站的各个功能模块超链接。主要链接内容包括首页链接、学校概况链接、机构设置链接、师资队伍链接、人才培养链接、科学研究链接、国际交流链接、学生工作链接、招生信息链接、就业指导链接和公共服务链接等。 第4期刘松：采用DIV+CSS技术的高校门户网站系统分析和设计智能计算机与应用第4卷

（3）网站主体区域：使用无序列表UL标记的形式显示高校的学术活动信息和校园公告信息。

（4）网站新闻区域：显示高校的近期新闻列表。

（5）网站友情链接区域：显示了各兄弟院校网站的链接信息。

（6）网站版权信息区域：展示了高校门户网站系统的版权信息和该高校的具体联系方式及所处地理位置信息。

3采用DIV+CSS技术进行页面结构设计的优势

经过实际运行的使用效果表明，DIV+CSS布局相对传统的表格布局掌握起来要复杂一些，因为在这种方式下，控制各布局的DIV层都是通过大量CSS规则代码来实现的。但是DIV+CSS这种页面布局方式一经开发者熟练掌握之后，则会比表格布局更加灵活实用。现对其表现出的设计优势具体表述如下：

（1）采用DIV+CSS技术进行页面结构设计的高校门户网站网页，在调整各网页容器模块之间的相对位置时比较简单。因为各DIV 模块间是相对比较独立的，不受其它模块的影响。

（2）采用DIV+CSS技术进行页面结构设计的高校门户网站网页的页面格式更改非常有效。DIV+CSS模式下网站的内容代码和格式代码是相分离的，因此在调整和维护时高校门户网站的布局结构和显示格式修改更加简便有效。

（3）采用DIV+CSS技术进行页面结构设计的高校门户网站网页，由于涉及的各布局DIV 层可以依次下载显示，因此其网页的访问速度会比表格网页布局方式更为快速。

（4）采用DIV+CSS技术进行页面结构设计的高校门户网站网页对浏览器的兼容性高。因为DIV+CSS网页布局方式符合W3C标准的特性，使得该技术可以实现对浏览器软件的向后兼容。

（5）DIV+CSS页面结构设计方式相比于表格布局方式，更加方便搜索引擎有效定位、使得在万维网上快速搜寻高校门户网站成为可能。

4结束语

采用DIV+CSS网页布局技术的高校门户网站系统网页，克服了之前采用表格页面布局方式的不足。这种将网页内容代码与网页格式代码和网页定位代码相分离的技术，使得高校门户网站的代码更加简洁，方便网站日后的升级和维护，极大地节省了维护网站的人力和物力成本。经过实际应用表明，采用DIV+CSS技术的高校门户网站系统的下载速度明显优于采用表格布局技术的高校门户网站系统网页。而且，该技术在提高网页下载速度的同时，更为有效地减少了网站网页流量。

参考文献：

[1]刘翼.DIV+CSS技术在延安大学网上考试系统中的应用研究[J].电子设计工程，2012（10）：35 -37.

[2]周潇.DIV+CSS技术在网页重构中的技巧应用[J].赤峰学院学报（自然科学版），2011（12）：25 -26.

[3]袁磊，陈伟卫. 网页设计与制作实例教程[M].北京：清华大学出版社，2011.

[4]尚博. 基于DIV+CSS的网页布局方式解析[J].电脑知识与技术，2010（27）： 7465-7467.

[5]陈婷婷.教务网站交互界面设计原则浅析[J].天津职业院校联合学报，2011（3）：12 -14.

[6]孙晓娟.基于WEB标准的网页布局的设计与实现[J].科技信息，2010（1）：44.