鐘云飛 謝素娟 包賢敬 劉 波

（湖南工業(yè)大學包裝與材料工程學院，湖南 株洲 郵編：412007）

基于HTML5的互動小說閱讀網(wǎng)站設計與實現(xiàn)

鐘云飛 謝素娟 包賢敬 劉 波

（湖南工業(yè)大學包裝與材料工程學院，湖南 株洲 郵編：412007）

以提高用戶體驗為目標，分析比較了不同電子閱讀方式的兼容性、操作性、美觀度、交互性，以互動小說網(wǎng)站設計為切入點，采用HTML互動小說閱讀網(wǎng)站是指一個具有交互、互動功能的小說閱讀網(wǎng)站。HTML5是超文本標記語言的最新標準，是能將Web從內(nèi)容平臺推向標準化的應用平臺。使用HTML5+CSS3+JavaScript搭建一個可跨平臺使用的互動小說閱讀網(wǎng)站，在代碼的編寫上，摒棄了舊標簽而使用了新的更加語義化的標簽，而在體驗上，比一般的小說閱讀網(wǎng)站多了觸屏滑動等交互功能。這個網(wǎng)站不僅能夠在計算機平臺上正常閱讀，并且能夠在移動端擁有更好的體驗。

HTML5；交互式設計；電子閱讀；數(shù)字出版

近年來，信息技術的不斷發(fā)展帶動了很多學科都在向信息技術靠近，并以信息技術為載體，衍生出無數(shù)新生事物，滲透到人類社會的各個領域。數(shù)字出版作為一支不可忽視的力量開始與傳統(tǒng)出版形成爭鋒之勢[1]。網(wǎng)絡環(huán)境下，小說閱讀網(wǎng)站早已興起。小說閱讀網(wǎng)站，即提供小說閱讀的網(wǎng)站，其閱讀方式從最初提供簡陋不美觀的在線閱讀，到打包制作成PDF、CHM或EXE格式等對操作系統(tǒng)有要求，或者是需要另外安裝閱讀器軟件，這些都增添了出版商的痛苦，并使讀者不方便，不能感受到良好的閱讀體驗[2,3]。于是人們迫切希望在電子閱讀上，技術能有大的突破，帶來嶄新的體驗。

作為網(wǎng)絡上應用最為廣泛的語言——HTML（Hyper Text Mark-up Language，超文本標記語言或超文本鏈接標示語言）的最新標準是HTML5[4,5]。該標準于2008年發(fā)布草案，將在2014年推出正式版。HTML5旨在將Web從內(nèi)容平臺推向標準化應用平臺并統(tǒng)一各大平臺陣營的標準， 雖然目前在真正意義上實現(xiàn)HTML5可能會需要很長時間，因為該標準還在制定、開發(fā)、討論和實驗階段，但它無疑會給Web標準的發(fā)展帶來巨大飛躍?！癈SS之父”Hakon Wium Lie認為，HTML5與CSS3將是全球互聯(lián)網(wǎng)未來發(fā)展的趨勢[6]。本文主要研究使用HTML5技術，并結合CSS3和JavaScript，設計并實現(xiàn)一個可跨平臺使用的互動小說閱讀網(wǎng)站。

1 現(xiàn)狀分析

1.1 電子閱讀方式比較

廣義上來說，電子書就是將內(nèi)容數(shù)字化的圖書[7]，當前電子書閱讀方式主要分為兩種形式，即在線閱讀方式和離線閱讀方式。在線閱讀主要是在線閱讀網(wǎng)站形式的電子書，現(xiàn)在很多網(wǎng)站都有小說閱讀平臺，小說類型繁多，而且多由Flash做出電子書，離線閱讀主要是使用其他電子文本形式和獨立APP應用形式的電子書[8]。表1是對當前電子閱讀方式從兼容性、操作性、美觀度、交互性四個方面的比較。

從表1可以看出，在線閱讀網(wǎng)站形式是最有跨平臺潛質(zhì)的，只是需要一定的改進，改進的方法則可采用HTML5。使用HTML5規(guī)范開發(fā)出來的東西可運行在跨平臺、跨瀏覽器的環(huán)境中，而且會更快，開發(fā)和維護都很經(jīng)濟。

1.2 HTML特點

HTML是一種標記語言（markup language），自90年代初被引入到互聯(lián)網(wǎng)以來就一直在不斷地發(fā)展。其主要特點如下：

1)簡易性。HTML版本升級采用超集方式，從而更加靈活方便。

2)可擴展性。HTML語言的廣泛應用帶來了加強功能，增加標識符等要求，HTML采取子類元素的方式，為系統(tǒng)擴展帶來保證。

3)平臺無關性。雖然PC機大行其道，但使用MAC等其他機器的大有人在，HTML可以使用在廣泛的平臺上。

2 互動閱讀小說網(wǎng)站設計與實現(xiàn)

2.1 結構設計

當前移動設備瀏覽器的發(fā)展走在了計算機端的前方，在這個智能手機和將平板電腦大爆炸的時代，移動優(yōu)先已成趨勢，不管開發(fā)什么，都以移動為主，人們閱讀也逐漸不會依賴于計算機屏幕閱讀而轉(zhuǎn)向各種移動設備[9,10]。本文將基本實現(xiàn)一個基于HTML5建立的互動小說閱讀網(wǎng)站，比起一般在電腦上打開的閱讀網(wǎng)站結構設計更簡單化，并在移動設備上會有更好的體驗。由于本網(wǎng)站主要面向的對象是使用移動設備進行小說閱讀的群眾，故假想存在一個互聯(lián)網(wǎng)上已有PC版的小說閱讀網(wǎng)站，PC版與移動版將動態(tài)引用同一數(shù)據(jù)庫的內(nèi)容。

2.1.1 網(wǎng)站草案

網(wǎng)站首頁暫定分為一個header、三個article跟一個footer。

header中放置網(wǎng)站LOGO與導航。第一個article包含五個版塊，分別是“熱門”、“更新”、“新作”、“結局”、“經(jīng)典”，每個版塊放置六篇小說；第二個article是“今日推薦”，做簡單的圖片幻燈，小說封面兩張兩張切換；第三個article放置“四海推薦”、“全站強推”、“新類新風”。還考慮了是否添加一個“最近閱讀”的article。最下方是footer，采用單色底加網(wǎng)站名字。

2.1.2 網(wǎng)站架構

圖1為網(wǎng)站架構圖。由于真正做到一個閱讀網(wǎng)站需要一個龐大的數(shù)據(jù)庫，且牽涉到版權問題，此處僅做一個簡單的技術演示站，所涉及到的頁面只有首頁小說目錄頁和小說正文頁。

圖1 網(wǎng)站架構設計

2.2 網(wǎng)站模塊設計

該網(wǎng)站采用HTML5+CSS3+Javascript編寫，取消了一些過時的HTML4標記，將內(nèi)容和展示分離，使用全新的表單輸入對象以及更合理的Tag，并用到本地數(shù)據(jù)庫，記錄閱讀歷史。如以首頁代碼為例，取消了通篇的