基于HTML5的互動(dòng)小說閱讀網(wǎng)站設(shè)計(jì)與實(shí)現(xiàn)

鐘云飛 謝素娟 包賢敬 劉 波

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

基于HTML5的互動(dòng)小說閱讀網(wǎng)站設(shè)計(jì)與實(shí)現(xiàn)

鐘云飛 謝素娟 包賢敬 劉 波

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

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

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

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

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

1 現(xiàn)狀分析

1.1 電子閱讀方式比較

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

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

1.2 HTML特點(diǎn)

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

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

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

3)平臺(tái)無關(guān)性。雖然PC機(jī)大行其道，但使用MAC等其他機(jī)器的大有人在，HTML可以使用在廣泛的平臺(tái)上。

2 互動(dòng)閱讀小說網(wǎng)站設(shè)計(jì)與實(shí)現(xiàn)

2.1 結(jié)構(gòu)設(shè)計(jì)

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

2.1.1 網(wǎng)站草案

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

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

2.1.2 網(wǎng)站架構(gòu)

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

圖1 網(wǎng)站架構(gòu)設(shè)計(jì)

2.2 網(wǎng)站模塊設(shè)計(jì)

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