|
一、全屏插圖頁 全屏插圖頁擴(kuò)展在ePub文件的opf文件中的spine節(jié)點(diǎn)下，spine節(jié)點(diǎn)定義了ePub文件中文章出現(xiàn)的順序，每一個itemref項為一章，我們擴(kuò)展一個properties屬性值duokan-page-fullscreen，示例如下： <spine> <itemref idref="chapter100" properties="duokan-page-fullscreen"> …… </spine> 這樣id為“chapter100”的章就會按全屏插圖頁邏輯處理，而相應(yīng)的html內(nèi)容應(yīng)如下所示： <?xml version="1.0" encoding="utf-8"standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www./TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www./1999/xhtml"> <head> <title></title> <link href="../Styles/stylesheet.css"rel="stylesheet" type="text/css" /> </head> <body> <p><img src="../Images/sanguoyanyi.png"/></p> </body> </html> 注意，html中應(yīng)只含有一個img，不需要設(shè)置任何樣式，程序會自動將圖片撐滿展示。 二、富文本腳注 用戶可以通過單擊文內(nèi)腳注的圖標(biāo)，彈出顯示腳注內(nèi)容的窗口。文內(nèi)注可以支持復(fù)雜的內(nèi)容描述，比如多段落，帶有樣式的文本等等，具體描述如下： 在需要插入注的位置插入如下代碼： <a class="duokan-footnote"href="#df-1"><img src=" ../Images/note.png"/></a> 在文章的末尾插入如下代碼： <ol class="duokan-footnote-content"> <li class="duokan-footnote-item"id="df-1"><p>這是一個注釋文本。</p></li> </ol> 注和內(nèi)容之間使用id鏈接，通過這樣的擴(kuò)展方式，可以將整個章節(jié)的所有文內(nèi)注內(nèi)容集中在一個有序列表中，這部分內(nèi)容不會直接在頁面上渲染出來，而是通過應(yīng)用層的交互來呈現(xiàn)。 三、交互圖 對于交互圖，應(yīng)用層會響應(yīng)點(diǎn)擊放大操作，提供額外的交互體驗，具體擴(kuò)展如下所示： <div class="duokan-image-single"> <img src="../Images/tree.png"alt="" /> <p class="duokan-image-maintitle">主標(biāo)題：大自然</p> <p class="duokan-image-subtitle">副標(biāo)題：森林中的樹</p> </div> 為了保證點(diǎn)擊放大之后的圖像呈現(xiàn)效果，采用交互模式的圖像數(shù)據(jù)應(yīng)該保證足夠的分辨率。 注意： 1. 主標(biāo)題和副標(biāo)題可以不出現(xiàn)； 2. 主標(biāo)題和副標(biāo)題可以在img之前出現(xiàn)； 3. 交互圖不可以嵌套出現(xiàn)。 //========================樸素的分割線======================== // 20130930 更新第二彈 四、多看字體使用 多看官方客戶端可用字體列表：
示例： 首先在CSS文件中增加下面的樣式 p.usekaiti { font-family: "DK-KAITI"; } 然后在xhtml文件中使用 … <p class="usekaiti">這段文字使用楷體顯示</p> … 這樣就ok了。 //========================樸素的分割線======================== // 20140307 更新第三彈 五、多媒體（音頻、視頻） 由于移動設(shè)備的一些特性，html中標(biāo)準(zhǔn)的音頻、視頻的排版特點(diǎn)并不完全滿足我們的需求，因此，需要進(jìn)行一些“小小”的擴(kuò)展，才能得到比較完美的展示效果。 音頻 在HTML 5規(guī)范中，音頻采用標(biāo)準(zhǔn)的audio標(biāo)簽，但需要擴(kuò)展說明其占位圖像，示例如下： <audio class="duokan-audio content-speaker" placeholder="speaker.jpg" activestate="active-speaker.jpg" title="軍港之夜"> <source src="song.mp3" type="audio/mpeg" /> </audio> duokan-audio為擴(kuò)展標(biāo)簽，表明了該audio標(biāo)簽為多看擴(kuò)展類型，placeholder用于表示占位圖，activestate表示活動狀態(tài)下的占位圖，title表示標(biāo)題名。 一般情況下可以指定audio采用的CSS樣式，在繪制占位圖時需要遵循該樣式，示例代碼如下： audio.content-speaker { font-size: 16px; width: 0.8em; } audio的controls屬性出現(xiàn)時，表明應(yīng)用層需要顯示控制欄，如果不出現(xiàn)，則無需顯示控制欄。 視頻 在HTML 5規(guī)范中，視頻采用標(biāo)準(zhǔn)的video標(biāo)簽，示例如下： <video class="duokan-video content-matrix" poster="matrix.jpg"> <source src="matrix.mp4" type="video/mp4" /> </video> duokan-video為擴(kuò)展標(biāo)簽，表明了該video標(biāo)簽為多看擴(kuò)展類型。 一般情況下可以指定video采用的CSS樣式，在繪制poster時需要遵循該樣式，示例代碼如下： video.content-matrix { width: 320px; height: 240px; } video的controls屬性禁止出現(xiàn)。 //========================樸素的分割線======================== // 20140819 更新第四彈 六、畫廊模式 畫廊模式可以支持在同一個位置顯示多張大小一致的圖像，用戶可以通過滑動等手勢切換不同的圖像內(nèi)容。 如下，即為一個擁有三幀畫面的畫廊（每一個duokan-image-gallery-cell聲明一個分幀）： <div class="duokan-image-gallery"> <div class="duokan-image-gallery-cell"> <img src="images/tree1.png"alt="" /> <p class="duokan-image-maintitle">主標(biāo)題：大自然</p> <p class="duokan-image-subtitle">副標(biāo)題：柏樹</p> </div> <div class="duokan-image-gallery-cell"> <imgsrc="images/tree2.png" alt="" /> <p class="duokan-image-maintitle">主標(biāo)題：大自然</p> <p class="duokan-image-subtitle">副標(biāo)題：柳樹</p> </div> <div class="duokan-image-gallery-cell"> <imgsrc="images/tree3.png" alt="" /> <p class="duokan-image-maintitle">主標(biāo)題：大自然</p> <p class="duokan-image-subtitle">副標(biāo)題：楊樹</p> </div> </div> 注意： 1. 各分幀圖片最好保持同樣大??； 2. 最好各分幀都存在主標(biāo)題和副標(biāo)題； 3. 畫廊整體樣式應(yīng)該放在duokan-image-gallery所在的div上； //========================樸素的分割線======================== 首次制作多看版圖書時，不注意就會發(fā)生的悲?。?/strong> 1. 圖像路徑大小寫不匹配，導(dǎo)致圖像各種不出現(xiàn)，請注意epub規(guī)范大小寫敏感哦； 2. 富文本注內(nèi)容使用ul標(biāo)簽，導(dǎo)致注點(diǎn)擊無反應(yīng)，更甚可能死機(jī)哦，請注意注內(nèi)容應(yīng)該放置在ol標(biāo)簽內(nèi)； 3. 應(yīng)該使用半角符號； 4. 一定要注意紅色部分屬性和內(nèi)容哦； |
|
|
