互动小说阅读网站设计与实现范文

本站小编为你精心准备了互动小说阅读网站设计与实现参考范文，愿这些范文能点燃您思维的火花，激发您的写作灵感。欢迎深入阅读并收藏。

摘要：

以提高用户体验为目标，分析比较了不同电子阅读方式的兼容性、操作性、美观度、交互性，以互动小说网站设计为切入点，采用HTML互动小说阅读网站是指一个具有交互、互动功能的小说阅读网站。HTML5是超文本标记语言的最新标准，是能将Web从内容平台推向标准化的应用平台。使用HTML5+CSS3+JavaScript搭建一个可跨平台使用的互动小说阅读网站，在代码的编写上，摒弃了旧标签而使用了新的更加语义化的标签，而在体验上，比一般的小说阅读网站多了触屏滑动等交互功能。这个网站不仅能够在计算机平台上正常阅读，并且能够在移动端拥有更好的体验。

关键词：

HTML5；交互式设计；电子阅读；数字出版

近年来，信息技术的不断发展带动了很多学科都在向信息技术靠近，并以信息技术为载体，衍生出无数新生事物，渗透到人类社会的各个领域。数字出版作为一支不可忽视的力量开始与传统出版形成争锋之势[1]。网络环境下，小说阅读网站早已兴起。小说阅读网站，即提供小说阅读的网站，其阅读方式从最初提供简陋不美观的在线阅读，到打包制作成PDF、CHM或EXE格式等对操作系统有要求，或者是需要另外安装阅读器软件，这些都增添了出版商的痛苦，并使读者不方便，不能感受到良好的阅读体验[2,3]。于是人们迫切希望在电子阅读上，技术能有大的突破，带来崭新的体验。作为网络上应用最为广泛的语言——HTM（LHyperTextMark-upLanguage，超文本标记语言或超文本链接标示语言）的最新标准是HTML5[4,5]。该标准于2008年草案，将在2014年推出正式版。HTML5旨在将Web从内容平台推向标准化应用平台并统一各大平台阵营的标准，虽然目前在真正意义上实现HTML5可能会需要很长时间，因为该标准还在制定、开发、讨论和实验阶段，但它无疑会给Web标准的发展带来巨大飞跃。“CSS之父”HakonWiumLie认为，HTML5与CSS3将是全球互联网未来发展的趋势[6]。本文主要研究使用HTML5技术，并结合CSS3和JavaScript，设计并实现一个可跨平台使用的互动小说阅读网站。

1现状分析

1.1电子阅读方式比较广义上来说，电子书就是将内容数字化的图书[7]，当前电子书阅读方式主要分为两种形式，即在线阅读方式和离线阅读方式。在线阅读主要是在线阅读网站形式的电子书，现在很多网站都有小说阅读平台，小说类型繁多，而且多由Flash做出电子书，离线阅读主要是使用其他电子文本形式和独立APP应用形式的电子书[8]。表1是对当前电子阅读方式从兼容性、操作性、美观度、交互性四个方面的比较。从表1可以看出，在线阅读网站形式是最有跨平台潜质的，只是需要一定的改进，改进的方法则可采用HTML5。使用HTML5规范开发出来的东西可运行在跨平台、跨浏览器的环境中，而且会更快，开发和维护都很经济。

1.2HTML特点HTML是一种标记语言（markuplanguage），自90年代初被引入到互联网以来就一直在不断地发展。其主要特点如下：1)简易性。HTML版本升级采用超集方式，从而更加灵活方便。2)可扩展性。HTML语言的广泛应用带来了加强功能，增加标识符等要求，HTML采取子类元素的方式，为系统扩展带来保证。3)平台无关性。虽然PC机大行其道，但使用MAC等其他机器的大有人在，HTML可以使用在广泛的平台上。

2互动阅读小说网站设计与实现

2.1结构设计当前移动设备浏览器的发展走在了计算机端的前方，在这个智能手机和将平板电脑大爆炸的时代，移动优先已成趋势，不管开发什么，都以移动为主，人们阅读也逐渐不会依赖于计算机屏幕阅读而转向各种移动设备[9,10]。本文将基本实现一个基于HTML5建立的互动小说阅读网站，比起一般在电脑上打开的阅读网站结构设计更简单化，并在移动设备上会有更好的体验。由于本网站主要面向的对象是使用移动设备进行小说阅读的群众，故假想存在一个互联网上已有PC版的小说阅读网站，PC版与移动版将动态引用同一数据库的内容。

2.1.1网站草案网站首页暂定分为一个header、三个article跟一个footer。header中放置网站LOGO与导航。第一个article包含五个版块，分别是“热门”、“更新”、“新作”、“结局”、“经典”，每个版块放置六篇小说；第二个article是“今日推荐”，做简单的图片幻灯，小说封面两张两张切换；第三个article放置“四海推荐”、“全站强推”、“新类新风”。还考虑了是否添加一个“最近阅读”的article。最下方是footer，采用单色底加网站名字。

2.1.2网站架构图1为网站架构图。由于真正做到一个阅读网站需要一个庞大的数据库，且牵涉到版权问题，此处仅做一个简单的技术演示站，所涉及到的页面只有首页小说目录页和小说正文页。同时后期修改代码时也一目了然。在HTML4+CSS时代，若想做出一个渐变或者阴影，多数使用图片完成，在电脑上，有时由于网速缓慢等原因，会导致无法达到预期效果，而在移动设备上，又往往因为图片质量被压缩，致使效果严重失真。

2.2网站模块设计该网站采用HTML5+CSS3+Javascript编写，取消了一些过时的HTML4标记，将内容和展示分离，使用全新的表单输入对象以及更合理的Tag，并用到本地数据库，记录阅读历史。如以首页代码为例，取消了通篇的<div>标签，用更形象的HTML5标签代替旧HTML标签。网站程序代码更加简洁，无论是在搜索引擎收录还是浏览器兼容上，均有不小的提升，同时后期修改代码时也一目了然。在HTML4+CSS时代，若想做出一个渐变或者阴影，多数使用图片完成，在电脑上，有时由于网速缓慢等原因，会导致无法达到预期效果，而在移动设备上，又往往因为图片质量被压缩，致使效果严重失真，但在CSS3中，可以使用几个简单的语句就显示出预期的效果来，本站首页搜索框等渐变均使用CSS3绘制，无论在什么设备什么平台上均可完美展现。由于时间的限制，对草案中设想的功能并没有完全实现——比如并没有实现小说正文页两边的侧栏设计（包括书签和微博互动），而是将微博互动放在了小说目录下面，见图2所示。

2.3网站测试各平台测试结果如表2、表3所示。表2及表3说明，基于HTML5技术搭建互动小说阅读网站的实验整体来说是成功的，但由于各浏览器对HTML5的支持度不一，导致了个别问题的出现，但并不影响整体使用。当然，HTML5的技术所能达到的水平绝不仅仅如此，但就交互与互动上来说，能在一定程度上代替Flash所给人带来的惊喜体验。使用HTML5开发的网站，随着时间的推移，必将能够很好地跨平台展现。

3结语

使用HTML5开发的互动小说阅读网站，标签语义化，能降低机器和开发人员理解内容和语境的难度。该网站能在各平台内基本能够正常显示，只要有浏览器即可进行电子书的在线阅读，无需再安装其他插件，更具兼容性。各浏览器对HTML5的兼容还未达到完美状态是当前基于HTML5开发的网站所面对的主要问题，而解决这个问题的办法是，在不兼容的地方使用JavaScript和Flash作为备选方案，保证自己的实现适合所有用户，而随着时间的推移，HTML5能被所有浏览器完美展现时，在不改变当前实现的前提下，即可移除JavaScript和其他备选方案。电子书的发展趋势，很大可能也会偏向跨平台展示，即用HTML5进行开发就可达到更好的体验。虽然因为技术水平的限制，并没有展示得很好，但用HTML5开发互动小说阅读网站必是一个很有前瞻性的尝试。

参考文献

[1]张波.网络出版的利弊分析和我们的对策[J].编辑学报,2000,12(2):82-84.

[2]李敏娜.Web时代下的网络出版研究[D].南宁：广西民族大学,2010:23.

[3]赵爱美.基于HTML5和.NET的移动学习平台研究与实现[J].河南科技学院学,2013,41(4):62-66.

[4]刘华星，杨庚.HTML5——下一代Web开发标准研究[J].计算机技术与发展,2011,21(8):54-58.

[5]闵栋，魏凯，文婷.移动智能终端HTML5技术与标准研究[J].中兴通讯技术,2013,6:10.

[6]吴庆涛,刘超慧,聂荣.HTML5—下一代Web开发标准的核心技术探讨[J].许昌学院学报,2011,30(5):61-63.

[7]练小川.电子书的分类[J].出版参考,2011,Z1:42.

[8]文艳霞.阅读类App的发展与出版机构的对策[J].科技与出版，2012，30(7):10-12.

[9]马志强，蒋晓.基于用户体验的智能手机网站界面设计探讨[J].包装工程，2012，33(16):63-66.

[10]贺兆达，季铁，袁翔.跨平台数字阅读的“通用”界面模式设计探索[J].包装工程，2013，34(18):54-57.

作者：钟云飞 谢素娟 包贤敬 刘波 单位：湖南工业大学包装与材料工程学院