采用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]。……