基于html5技术的高校门户网站设计

《基于html5技术的高校门户网站设计》由会员上传分享，免费在线阅读，更多相关内容在学术论文-天天文库。

1、基于HTML5技术的高校门户网站设计　　摘要：针对目前大多数高校门户网站采用HTML4技术实现的网页代码结构不清晰等局限性，本文提出了一套基于HTML5+CSS技术的高校门户网站生成方案。该方案具有Web标准统一，轻松实现跨平台等优点。　　关键词：HTML5；CSS；跨平台　　中文分类号：TP311文献标识码：A文章编号：2095-2163（2015）04-　　DesignofUniversityPortalWebsitebasedonHTML5　　LANYing　　（CollegeofComputerScienceandTechnology，JilinNor

2、malUniversity，Siping136000，China）　　Abstract：Atpresent，mostoftheuniversityportalisrealizedbyusinghtml4technologytorealize，butitsstructureofcodeisnotclear.ThispaperproposesaschemebasedonHTML5+CSStechnology.Theschemehasmanyadvantagessuchasthesamewebstandardandplatformindependence.　　Key

3、words：HTML5；CSS；PlatformIndependence　　0引言　　传统的采用HTML4技术设计的高校门户网站页面中大量使用到DIV+CSS技术进行页面布局。首先使用DIV标签将网页元素分成块，再对分割后的每一块使用7CSS技术进行精确的格式控制，以实现为每部分设置文本格式，段落格式，背景格式，排版，自动隐藏，各种特效等。这种DIV标签的过多使用情况通常会导致在网页代码中嵌套层次过多，进而造成网页代码结构不清晰，给高校门户网站的日后维护带来很大麻烦，并于无形中增加了网站的维护成本。　　HTML5是W3C与WHATWG（WebHypertext

4、ApplicationTechnologyWorkingGroup）在2006年合作创建的一个新版本HTML。该版本将成为HTML和XHTML以及HTMLDOM技术的新标准。2013年5月6日，HTML5.1正式草案公布。HTML5是近年来网站开发标准的巨大飞跃。与之前的HTML版本不同的是HTML5技术并非仅仅用来表示网站的页面内容，而是能够将Web应用带入一个更加成熟的应用平台，在该平台上，文本，音频，视频，图像，动画，以及同电脑的交互活动都将得到高质量的标准化。根据W3C（万维网联盟）的发言稿称：“HTML5是开放的Web网络平台的奠基石。”，这种跨平台

5、的网页程序环境通常被认为是“Web标准”的保护伞。HTML5以及JavaScript和CSS相关技术的联合更使得HTML5技术更趋完善，三者的结合能够让开发者在任何设备上可顺利运行丰富内容的网页应用。基于此，采用HTML5技术设计的高校门户网站页面代码结构将会更加清晰，并且能够轻松实现跨平台。可以预期，越来越多的高校门户网站即将加入到HTML5的大平台上来。　　1基于HTML5的高校门户网站设计　　1.1高校门户网站的系统功能结构设计　　从功能上划分，高校门户网站系统共分为以下几个模块：7首页、学校概况、机构设置、科学研究、师资队伍、人才培养、国际交流、学生工

6、作等功能模块，如图1所示。　　图1高校门户网站系统功能结构　　Fig.1FunctionStructureofUniversityWebSite　　1.2高校门户网站首页的架构设计　　高校门户网站首页的架构采用两栏式网页架构，如图2所示。　　图2高校门户网站首页架构　　Fig.2HomePageStructureofUniversityWebSite　　高校门户网站首页所使用的HTML5结构化标签有：标记、标记、标记、标记、标记和标记。这些标记的具体含义则如表1所示。　　表1高校门户网站首页的结构化语义标记　　Tab.1StructuredSemanticMa

7、rkupofUniversityWebSite　　标记说明　　显示网站名称、主题或者主要信息　　网站的连接菜单　　用于侧边栏　　用于定义主内容区　　用于章节或段落位于页脚，用来放置版权声明、作者信息等　　1.3高校门户网站首页的页面实现　　采用HTML5技术的高校门户网站首页效果如图3所示。高校门户网站首页主要部分代码如下：　　//高校门户网站首页头部　　欢迎来到吉林师范大学好学近知，力行近仁7　　首页学校概况//高校门户网站导航机构设置师资队伍　　　　//高校门户网站的主内容区　　//显示学术活动公告　　学术活动　　07.03大学外语部教师系列学术讲座之六　

8、　……此处省略部分代码　　//高校门户