基于HTML5/.NET的新型高校图书馆数字资源系统设计与实现

龙德应+唐嫦燕

摘要：HTML5提供了Web应用信息描述和数据交互的新模式，解决了之前Web应用中的Web交互，即时更新、多设备跨平台和自适应等方面的问题。该文通过新型高校图书馆数字资源系统的设计与实现，探讨了在系统中应用HTML5、CSS3、Bootstrap和.NET技术的若干要点和思路。基于HTML5和.NET的新型图书馆资源系统能自动响应手机、平板和桌面计算机等各种设备，提供不同操作系统和浏览器中的一致性的良好体验。

关键词：HTML5；CSS3；.Bootstrap；.NET；响应式Web设计

中图分类号：G250.7 文献标识码：A 文章编号：1009-3044（2017）28-0003-02

Abstract： HTML5 provides a new model of web application information description and data exchange， and solves the problems of web interaction， real-time updating， multi-device， cross-platform and self adaptation in web application. In this paper， through the design and implementation of a new type of university library digital resources system， the paper discusses the application of HTML5， CSS3， Bootstrap and.NET technology of some key points and ideas. The new library resources system Based on HTML5 and.NET can automatically respond to various devices such as mobile phone， tablet and desktop computer， and provide a good experience of consistency between different operating systems and browsers.

Key words： HTML5； CSS3； Bootstrap； .NET； Responsive web design

1 概述

HTML5是新一代的HTML，用于取代HTML4.01；经过历时8年的精心研究和讨论，2014年10月，W3C（World Wide Web Consortium）最终正式推出了HTML5标准规范。

HTML5的推出，使Web网站的开发、浏览体验进入了崭新的时代，除了展示基础文字和图片，不需安装其他插件，HTML5原生的支持以前难以实现的动画、视频等多媒体的展示与交互，使Web网站成为了一个极大的内容丰富的平台；HTML5是梦想中的“开放Web平台”的基石，如能最终实现，可进一步推动更深层次的跨平台Web应用。W3C会员如Apple、Google、Microsoft以及中国移动和华为等众多知名公司的积极参与，对HTML5的推出发挥了重要作用，随着整个产业的共识，HTML5标准得到了Firefox、Chrome和Edge等众多浏览器和平台的支持和实现。

HTML5的主要优点在于，该技术可以实现多设备以及跨平台的使用，比如你开发了一款新的HTML5系统，你可以在Unix、Linux和Windows等不同操作系统发布，也可以方便地在Facebook、Apple、Google和微信等的应用平台上封装部署，HTML5的跨平台性十分强大，这也是业界厂商和用户对HTML5很有兴趣的重要原因。HTML5还拥有即时更新功能，更新HTML5系统就好像更新页面一样，是马上的、即时的更新。HTML5适应移动互联应用“富内容、富交互、富体验、跨平台”的要求，支持离线访问、支持全媒体内容展示、支持交互式的 2D/3D 图像渲染、提供了一套机制允许 Web 页面根据一些设备特性（包括屏幕分辨率）适配布局和行为 [1] 。HTML5还有一些其他新特性，如：video和audio元素用于音视频媒介的回放，canvas元素用于容器绘画，对离线应用和本地存储数据提供了更好的支持，还有nav、article、header等新的特殊内容标签，以及search、date、calendar等新的表单和控件。

本文以HTML5技术标准为基础，对图书馆数字资源系统进行设计与研究。通过HTML5、CSS3、JavaScript和Bootstrap等技术相结合，设计跨平台响应式的网站系统。同时采用.NET技术进行后台应用逻辑开发，以SQL Server为后端数据库。运用HTML5的新标签和CSS3的各种新属性，以及JavaScript的各种脚本特效，结合Bootstrap进行响应式开发，这是一种全新的设计理念，据此设计出适应手机、平板和计算机等不同访問设备的网站，增强我校师生对图书馆数字资源的访问体验。

2 系统的设计与实现

2.1 开发工具的选择

鉴于.NET框架的技术优势，本资源系统基于Windows Server平台构建，采用C#作为应用层开发语言，基于.NET Framework 4.5运行时，选取SQL Server 2008 R2作为后端数据库平台，XML或JSON作为客户端和服务器间的信息交换语言，同时作为数据资源的表示格式，HTTP作为传输协议，同时前端UI基于HTML5和Bootstrap，构建基于.NET和HTML5的新型图书馆数字资源系统。所构建系统能更好地满足图书馆数字资源系统的应用需求，具有自动响应手机、平板和计算机等不同屏幕尺寸设备，系统性能响应速度快，良好的信息交换及扩展性等优点，并且可以跨平台访问。一次开发在不同操作系统上就可以拥有统一的用户交互体验，节约了开发和维护成本 [2，4] 。endprint

2.2 系统的设计实现

数据库的设计是本资源系统中最基础的部分，通过运用ORM （对象角色建模）方法设计数据库，同时创建实体关系图，具体可以使用Visio工具来实现，通过该方法建立数据库，容易创建或修改业务规则，并且可以轻松对数据库进行反向工程。

数据库系统由管理员表manager、newsManager，内容表news，图像表image和链接表link等组成。其中news表包含数据资源系统的主要内容数据，字段设计如图1所示：

资源系统的核心部分是系统业务层设计，通过剥离表示层与业务层，实现了系统的扩展性和灵活性，设计离线、分布式和灵活的基于XML和JSON的数据体系结构，基于.NET实现了业务层的操作功能调用。

系统表示层的设计基于HTML5、CSS3、Javascript和Bootstrap技術，Bootstrap框架整合有一套基础CSS插件、基于jQuery的Javascript插件集、灵活的响应式栅格系统，崇尚移动优先的思想[3]，构建响应式图书馆数字资源系统，只需一次的设计开发，系统就能自动适应手机、平板和桌面计算机等不同设备的正常访问，在Firefox、Chrome、Safari和Edge中具有良好的显示，更好地满足新环境下图书馆数字资源随时随地跨平台多设备的访问需求。得益于这些技术的综合应用，不但提高了系统设计的效率，也提高了资源系统的运行效率，同时降低了后期系统的维护难度。

系统表示层HTML的主要结构代码如下所示。

其中<！DOCTYPE html>声明HTML5文档类型，viewport设置可视窗口随不同屏幕尺寸的设备自动响应式显示。bootstrap.min.css导入Bootstrap的样式表定义，bootstrap.min.js导入Bootstrap的支持脚本，jquery.min.js导入JQuery框架支持。

2.3 系统的部署运行

系统部署在Windows Server 2008 R2的IIS服务的发布目录下，基于.NET Framework 4.5，jQuey3.1.1，Bootstrap3.3.7，以及SQL Server 2008 R2。

本文构建的高校图书馆数字资源系统（可拓学专题数据库），实现了跨平台，多设备，响应性，更好地满足用户的访问体验，同时适应手机、平板和计算机等不同尺寸屏幕设备的友好访问。

系统部署运行后计算机和平板访问界面如图2所示：

系统部署运行后手机访问界面如图3所示（其中右图为点击菜单响应）：

3 结论

HTML5是新一代的互联网平台，拥有跨平台，多设备，自适应网页设计，即时更新等优点，结合最新.NET的互联网软件和服务战略，囊括了一整套新的工具与技术，HTML5改变了应用程序设计和部署的模式，引入了新的属性标签和新的功能，改变用户与文档的交互方式，支持离线编辑，支持网页端的Audio、Video等多媒体功能。

HTML5拥有广泛的适用性，如发布网络图像、动画视频、表单控件以及其他网格排版等数字内容，所发布应用程序具有优越的跨平台性，HTML5既是一个完整的Web开发环境，又是一个Web开放标准不断蓬勃发展的基石。本文基于.NET、HTML5和Bootstrap等技术，研究构建了一个新型图书馆数字资源系统平台，并且基于该平台实现了可拓学专题数据库的建设。通过数字资源系统的构建过程，对适应手机、平板和桌面计算机等不同访问设备的系统开发技术进行了一定的探讨。事实证明，HTML5和.NET技术给新一代的动态响应式系统开发提供了崭新的解决方案。

参考文献：

[1] 黄悦深. 基于HTML5的移动Web App开发[J]. 图书馆杂志，2014（7）：72-77.

[2] 舒远仲，黄文强，梅梦喆. 基于HTML5跨平台高校就业信息服务系统的设计与实现[J]. 计算机时代，2016 （3）：93-96.

[3] 舒后，熊一帆，葛雪娇. 基于Bootstrap框架的响应式网页设计与实现[J]. 北京印刷学院学报，2016 （2）：47-52

[4] 李华.ASP.NET （C#） 程序设计[M].北京：清华大学出版社，2014.endprint