本站小編為你精心準備了互動小說閱讀網站設計與實現參考范文，愿這些范文能點燃您思維的火花，激發您的寫作靈感。歡迎深入閱讀并收藏。

摘要：

以提高用戶體驗為目標，分析比較了不同電子閱讀方式的兼容性、操作性、美觀度、交互性，以互動小說網站設計為切入點，采用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.

作者：鐘云飛 謝素娟 包賢敬 劉波 單位：湖南工業大學包裝與材料工程學院