罗敏 罗亚东 刘明锦

摘  要：网络、手机APP等新媒体技术对于促进蜀水文化知识在全社会的普及具有不可替代的作用。文章提出基于HTML5的蜀水文化数字平台的设计方案，前期进行UI设计，通过HTML5+CSS3实现前端页面，利用JSP+SQL进行后台开发。旨在借力网络新媒体技术更好地开展蜀水文化传播，建立开放、合作、创新、共享、可持续发展的立体式蜀水文化教育传播平台，以促进蜀水文化的传承、推广、利用。

关键词：蜀水文化;HTML5;数字平台;建设研究

中图分类号：TP311      文献标识码：A 文章编号：2096-4706（2021）06-0018-05

The Construction Research on Shushui Cultural Education and

Communication Platform Based on HTML5 Technology

LUO Min，LUO Yadong，LIU Mingjin

（Sichuan Water Conservancy College，Chengdu  611231，China）

Abstract：Network，mobile APP and other new media technologies play an irreplaceable role in promoting the popularization of Shushui culture knowledge in the whole society. This paper proposes the design scheme of Shushui culture digital platform based on HTML5. The UI design is carried out in the early stage，the front end page is realized by HTML5+CSS3，and the background development is carried out by JSP+SQL. The purpose of it is to make use of the network new media technology to better carry out the communication of Shushui culture，and to establish a three-dimensional Shushui cultural education and communication platform with open，cooperative，innovative，shared and sustainable development，so as to promote the inheritance，promotion and utilization of Shushui culture.

Keywords：Shushui culture;HTML5;digital platform;construction research

0  引  言

水文化重在建设，成在传播，利用网络新媒体技术搭建水文化传播平台是当前热点所在。水利部部长陈雷在2009年首届中国水文化论坛上，就明确提出：要努力使互联网等新媒体成为传播水文化的主力军，为水文化的弘扬与传承提供强有力的文化支撑和保障。水利部新闻宣传中心陈梦晖副主任也提出要充分发挥新媒体技术的作用，创新水文化传播。作为服务于水利改革和发展，为水利改革和发展提供智力支持、技术支撑和后备力量的四川水利职业技术学院，依托学院深厚的学术文化氛围，建立开放、合作、创新、共享、可持续发展的数字化蜀水文化教育传播网络平台，利用各类网络信息技术、平台，转化水文化资源，并通过网络传播教育方式实现水文化的共享与传播，面向在校学生及水利职工、社会大众开展水利科技、水历史、水资源、节水知识等在内的水文化教育活动。以促进水文化的传承、推广、利用。平台建设具有较强的实用价值[1]。

1  水文化教育传播数字化平台建设研究现状

近年来，水文化传播平台建设研究在国内外引起了广泛关注。2004年，联合国教科文组织国际水教育学院建立水足迹专题网站（http：//www.waterfootprint.org），2008年開始运作，目前该网络由荷兰特文大学进行日常维护[2]。由于我国的水文化是近些年才兴起的一个研究主题，水文化教育的发展也还处于起步阶段，相关水利部门、水利院校的水文化传播教育平台也是近些年才相继建设并投入使用的。目前水文化教育传播数字化平台建设主要有四种形式，即专题网站、微信公众号、微博、水文化APP。

如中国水文化网开辟了水文化专栏，内容包括：水文化资讯、水文化研究、水文化博览、风景与旅游、水故事、水知识。浙江省建设了浙江水文化专题网主要包括水文化教育、水文化研究、古代水文化、水利工程、水诗韵、水景观等栏目，并创建了浙江省水文化微信公众号，平台采取图文并茂的方式，定时向大众推送水文化研究的相关咨询。华北水利水电大学建设了“水研网”专题网站，收集整理了全国关于水文化经典论文百余篇。河海大学成立了水文化研究所，制作了5集网易公开课《中华水文化》。南昌工程学院“水文化研究中心”，建设了“水文化”专题网站[3]。浙江水利水电专科学校建设了《特色水教育》资源库专题网站，该资源库内容丰富，形式多样，包括精心制作的PPT课件、授课录像、题库、水利科技视频[4]。由四川省水利厅建设的四川水利网开辟了蜀水文化专栏，但专栏内容只涉及与水文化相关的散文、诗词等[1]。值得一提的是由四川水利厅建设的微信公众号“四川水利”以“水美四川”为核心，发布水利资讯，普及水情知识，讲好水利故事，传播水利声音，近年来推出了越来越多蜀水文化活动，蜀水文化图文、视频等资源。

综上可知，四川水文化研究尚缺乏基于大数据和新媒体技术的，以地方特色为基础、传承水文化为主线的集水文化咨询、水利博览、数字水利、水文化教育、学术建设、文化交流功能于一体的水文化数字化教育传播平台建设案例。因此，本研究在国内外已有的研究基础上，采用基于HTML5和数据库软件的B/S分层设计方式，构建积水文化资讯、水利博览、数字水利、社会教育、学术建设、文化交流功能于一体的网络平台，建立开放、合作、创新、共享、可持续发展的数字蜀水文化教育传播网络平台，以促进蜀水文化的传承、推广、利用[5]。

2  HTML5技术在水文化数字平台建设中的优势

HTML5技术是为了适应日新月异的Web技术和更复杂多样的应用需求。HTML5技术相比之前的HTML技术新增了很多元素和属性、提供了更多的API接口、多媒体、智能表单、离线存储等技术支持等，让网页开发和使用更加迅速便捷，还降低了浏览器对计算机资源的占有率以及对相关插件的依赖。HIML5技术支持在网页页面直接显示动画、图片、视频、音频等多媒体元素，并满足多种媒体的跨平台需求[4]。HTML5技术在水文化数字平台建设中的优势主要有以下几个方面。

2.1  美化页面设计

页面设计在蜀水文化数字传播平台中具有重要作用。以往的页面排版是将图片作为背景设计出符合需求的版式，但这样的操作比较复杂烦琐，如果需要对页面版型进行修改、颜色填充，则要加载安装Flash或Silverlight插件。应用HTML5技术设计页面，可以用HBuilder创建页面，并可以利用相关标签属性自动生成网页骨架，还可以在网页中绘制和处理图形，画出矩形、弧线等，还能通过JavaScript控制图像的像素，让多媒体网页设计更加便捷，以此提升页面视觉冲击，增加平台访问率[5]。

2.2  多媒体技术支持

HTML5添加了（图形定义）、

2.3  离线缓存提升平台运行流畅度

蜀水文化教育传播平台多媒体资源内容众多，平台运行的流畅性需要更好的技术支持。而HTML5提供了LocalStorage和Application Cache两大离线存储技术。相对于传统的离线存储技术 Cookie而言，能够提升数据的交互操作能力及效率，其次LocalStorage能够存储大量数据，提高了数据的存储能力，为硬件设备减轻了压力，让平台运行流畅性得到提升[7]。

2.4  平台交互性强

蜀水文化教育传播平台的应用决定了平台需要具有良好的交互性。在蜀水文化春宝平台开发设计中要充分考虑加入线上讨论区、留言板，甚至专家交流系统，提供较好的在线咨询服务，提升平台的交互性。HTML5技术可以实现在与后端进行数据交互过程中可以使用JavaScript、AJAX和JSON技術实现数据的快速交互，提升用户使用体验[8]。

3  基于HTML5的蜀水文化平台的设计开发

3.1  蜀水文化教育传播平台构建思路

聚焦于数字水文化网络平台发展滞后的现实问题，借助现代信息技术、数字媒体技术、网络等新媒体技术设计解决该问题的数字蜀水文化立体式教育传播平台，采用基于HTML5和数据库软件的B/S分层设计方式将水文化相关的文本、图形图像、视频、动画整合起来构建集水文化资讯、水利博览、数字水利等于一体的蜀水文化专题门户网站。通过“方案设计—平台建设—分析研究—方案修改”的多次迭代式研究与实践，达到促进水文化保护、传承、推广、利用的目的，并形成一套有效的数字水文化网络平台建设方案。

3.2  蜀水文化教育传播平台框架设计

从内容模块上划分，蜀水文化教育传播平台按照传播需求分为如下模块：网站首页、新闻资讯、蜀水教育、蜀水研究、蜀水资源、基地建设等模块。如图1所示。

3.3  蜀水文化数字化平台的实现

3.3.1  蜀水文化平台架构设计

蜀水文化教育传播数字平台的前端页面设计采取分栏式的设计，在首页上对各栏目都有概要式的展示，平台的首页架构标签设计如图2所示。

在平台前端页面设计是，使用结构化的语义标记可以让整个网站的结构清晰明了、易于修改，开发时引用到的标签主要有