[Epub]-數字出版物製作-網頁版-[1]

原創

zhu_free

2020-02-21 09:33

需求：按照一定的數字出版物排版流程，講文字，圖片，視頻，音頻在網頁上進行展示。

這一步主要屬於前端的範圍，大體思路是，準備一個大的頁面框架，內容放在特定的div塊中，圖片，視頻和音頻也按照一定的規則包裹在div中插入在合適的地方，再利用css進行美化。

框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="main">
        <img src="" id="cover">
        <h3 class="char_title" id="title_1"></h3>
        <div id="text">

        </div>
    </div>
</body>
</html>

這是一個簡單的html頁面的基本結構，在body標籤中，首先設置了一個id爲cover的img標籤用來放置封面，在這裏我打算後面用js實現封面覆蓋頁面的效果，h3標籤用來放置標題，id爲text的div塊放置內容。

插入文字

每一段文字用p標籤包裹放在#text的div中，爲了使行間距大一些看起來比較舒適，在每個p標籤之後加上了一個換行標籤<br/>。

<p>
     “爸爸拿着斧子去哪兒了？”在他們收拾桌子準備吃早飯時，芬問她的母親。
</p>
<br/>

插入圖片

插入圖片有一定的混排原則

這個流程有點複雜哈最後簡單化了一下差不多是這樣的：

大於瀏覽器寬度的三分之一且是橫圖：放在頁面中間
大於瀏覽器寬度的三分之一且是豎圖：縮放後排側邊
小於瀏覽器寬度的三分之一：排側邊

然後左右放置的順序是：

第一張左邊，第二張右邊，然後依次輪流排。

所以圖片一共有三種：左邊，右邊和中間，在img標籤中賦予不同的類名，用不同的css進行描述，如下：

<img class="pic_in_text_left" src="./pics/pic1.jpg"/>
<img class="pic_in_text_right" src="./pics/pic2.jpg"/>
<div class="pic_in_text_center">
     <img src="./pics/pic5.jpg"/>
</div>

.pic_in_text_left{
    margin: 5px;
    float: left;
    border: 3px solid #42602D;
}
.pic_in_text_right{
    margin: 5px;
    float: right;
    border: 3px solid #42602D;
}
.pic_in_text_center{
    text-align: center;
}
.pic_in_text_center img{
    border: 3px solid #42602D;
}

插入音頻，視頻

<audio class="sound_in_text" controls="controls" src="./sounds/sound1.mp3">
</audio>
<video class="video_in_text" controls="controls" height="450" src="./videos/video1.mp4" width="600">
</video>

.sound_in_text, .video_in_text{
    clear: both;
    display: block;
    margin: auto;
}