You are currently viewing 用Sigil從零開始製作EPUB電子書 | 零基礎簡單學必用到的HTML和CSS

文章最新更新於 28/02/2022

這篇文章主要是想分享給你,用Sigil這個軟件從零製作Epub電子書的方法~我會分成幾個部分,帶你用簡單易懂地方式去製作一個EPUB格式的電子書。除此以外,一些簡單的HTML和CSS知識,是我覺得學了可以幫助你更自由地編排電子書的,也會在這裡一一分享給你。

電子書是什麼

「電子書」是數位化的出版物,主要以電子檔案的方式來呈現內容。

我們可以用電腦、手機或是主要用途是「看電子書」的電子書閱讀器來看「電子書」。

有了電子書,我們不但可以不用帶這麼多厚重的書出門,還同時為「環保」盡了一份力,因為看電子書可以減少不少用紙唷。

而電子書的電子文檔,又有些什麼格式呢?主要較常見的有這幾種:EPUB 2、EPUB 3、PDF、DOCX、TXT、ZIP等等。

個人覺得最常見的會是EPUB、PDF以及DOCX。在這篇文章,我會主要跟你聊EPUB這個格式哦~

EPUB是什麼

EPUB,也寫作 ePub,名稱取自英文——「Electronic Publication」(電子出版物)。它是一種以“.epub”作為文件擴展名的文件格式,是電子書的其中一種文檔格式。 EPUB最大的特點是,它是流動版型的文檔,在各種不同的載具上,會自動編排呈現的方式,讓我們以最舒服的方式來閱讀。像是在這個台灣最大的繁體電子書平台——讀墨上的書,大部分就是以EPUB格式呈現的。

無論你用手機、電腦或是閱讀器來看,它的內容都會根據不同的尺寸而自動調整,你也可以用內置的功能(字行間距、文字大小等)來調整。總結來說,EPUB格式的電子書靈活度非常地高。

目前我在五大平台:Google Play圖書Readmoo讀墨PubuKobo樂天Amazon上自出版書,其中除了Amazon用DOCX以外,其他平台都是以EPUB來上架居多。

對了,「EPUB3」是EPUB最新的版本,接下來我所講的EPUB都是指EPUB3唷~

如何製作EPUB

我在出版第一本書——《太在乎別人的看法怎麼辦?你本來就可以不用去在乎的!》的時候,是用從「人人都是作家-0成本自出版電子書」課程學的方式,完全沒有用到編碼知識(完全不會IT的人也沒問題~)來完成的,也順利上架了。之後,出版長篇小說——《光.如影隨形》的時候,由於在讀墨上架後發現,呈現出來的好像不是自己最喜歡的樣子(上架前可以預覽,可是當時我覺得看起來ok,上架後才感覺看得不夠舒服,所以決定重做 :3),就到讀墨可以下載書籍的「DRM-Free下載」區找到一本有著我喜歡的排版的書。在這個「DRM-Free下載」買的書,都是可以下載它的原始EPUB文檔的唷。

那買了然後下載後,就可以用一些可以打開EPUB文件的軟件比如Calibre、Sigil等來打開文檔。根據裡面一些編碼,我發現那本書的EPUB文件是以Sigil製作的,所以我就決定以Sigil來製作我的EPUB電子書啦~

不過要說明一下,目前我用Sigil製作的EPUB裡的排版格式,比較適用於Readmoo和Pubu~除此以外的,我還是沿用在課程裡學到的方式來做的哦~

接下來,就讓我來和你分享怎麼用Sigil來製作我剛出版的這本《光.如影隨形》的吧!

用Sigil做EPUB

Sigil是什麼

首先,想先簡單來講一下Sigil是什麼。

Sigil是用來製作EPUB電子書的軟體。不管你用的電腦是Windows、Linux或是Mac系統,都可以下載來使用。用它來做電子書非常方便,因為在編碼的同時,旁邊有個視窗可以讓你看見它呈現出的樣子。

接下來,跟著我的步驟做,可以知道如何生成一個EPUB文件哦!

4個步驟簡單製作EPUB文件

下載Sigil在你的電腦。

Sigil從零開始製作 EPub 電子書

根據你的電腦類型來選擇要下載哪一種。它會下載“.exe”文件到你的電腦裡。點這個文件兩下,就和你下載任何軟件時一樣,選擇好你要的設定再不斷「繼續」、「完成」,最後一個叫「Sigil」的軟件就安裝好了。

打開Sigil

打開時,你會看到它的默認狀態就是已經有了一些現成的文件夾和文件。在和你一一解釋這些文件前,要先告訴你,可以到左上角點擊「Edit > Preferences…」,然後在「Language」那裡選擇你看得習慣的語言哦!我這裡會用英語來示範,所以你沒有轉換語言還是可以跟著做唷!

Sigil從零開始製作 EPub 電子書

新開一個EPUB3文件

在左上角點擊「File > New > ePub3」,就會看到屬於EPUB3的自動生成文件夾和文件。

Sigil從零開始製作 EPub 電子書
開新的EPUB3文件
Sigil從零開始製作 EPub 電子書
Epub3文件

先說一下里面這些自動生成的文件夾各自代表了什麼:

Text:用來放置文本文件,文本文件的格式為XHTML或是HTML。一本書會有許多文本文件,比如你的書有三個章節,那你至少就會有三個文本(另外還會有封面、版權頁那些)。

要增加文本的話,在「Text」文件夾上點擊右鍵,點選「Add Blank HTML File」就好。新生成的文件順序會自動接在前面的文件後面。

Styles:放置CSS樣式文件。要新增文件,只要在「Styles」文件夾上點擊右鍵,再點選「Add Blank Stylesheet」就好。至於CSS文件裡要寫什麼,在下面我會簡單地說一下。

Images:放你會使用到的圖片文件。Sigil支持的圖片格式有:.jpg、 .png、 .gif 和 .svg file。要加圖片進來,只要在「Images」上點擊右鍵,再點選「Add Existing Files…」,接著從彈跳出來的視窗點選你電腦裡的圖片就可以了。

Fonts:放置字體文件。我沒有用到這個,字體設在CSS文件裡了~

Audio:放置音頻文件。

Video:放置視頻文件。

Misc:放置其他分類的附件

在以上的文件夾之中,我用到的文件夾只有「Text」、「Styles」、「Images」而已。

而除了這些文件夾以外,Sigil也會自動生成一個文件:content.opf

這個OPF——「Opening Packaging Format」(開放打包格式)的文件,是EPUB的一部分,用來存儲電子書的各種信息,比如標題、語言、創建者、閱讀順序、顯示格式,書籍ID等等。以我的理解是,有這個文件,也等於表示這個文檔是一個EPUB文件。

儲存EPUB文件

一個EPUB文件就製作好了,之後你加入內容或有任何改動時,只要點擊左上角的「File > Save」,它就會更新儲存文件了。

4個步驟簡單製作Sigil目錄

在Sigil自動生成的文件中,有一個文件「nav.xhtml」(在「Text」文件夾中)是代表了「目錄」的存在。

當你在「Text」裡生成多個文本之後,每個文本里會各有不同的「標題標籤」比如h1(標題一)、h2(標題2)這些html的代碼(在下面文章会提到)。

這時,你就可以根據這些標題來自動生成目錄

這裡先做個小小範例,讓你可以照著做。

在第一個文本加標題

在Sigil自動生成的第一個文本「Section0001.xhtml」裡,加上這一行代碼:

(可複制)

<h1>第一章</h1>

放的位置參照圖片:

Sigil從零開始製作 EPub 電子書

新增文本和代碼

用上面步驟三里提到的「新增文本」的方式在「Text」里新增一個文本,你會看到出現「Section0002.xhtml」這個新文件。一樣地,在裡面加一行代碼:

(可複制)

<h1>第二章</h1>

放的位置參照圖片:

Sigil從零開始製作 EPub 電子書

生成「目錄」

在上面的那排工具欄裡選擇「Tools > Table of Contents」,點擊延伸出來的其中一個選項「Generate Table of Contents…」。

目錄步驟3

從彈跳出來的視窗,你會看到你剛剛寫在<h1></h1>裡的標題會出現在選項裡,旁邊也有個「h1」的標籤,再旁邊有個讓你打勾勾的格子。(注:如果有h2(標題2)、h3(標題3)等,操作上也是一樣的,如法炮製就可以了。

Sigil從零開始製作 EPub 電子書

只要是你想要生成目錄的,就打好勾勾,然後再按「OK」就可以咯!

檢查目錄

這時,你可以去看剛才提到過的文件——「nav.xhtml」。你會看到兩個文本都已經在裡面設置好了。

Sigil從零開始製作 EPub 電子書

在右邊的視窗,你看到的「Table Of Contents」,是這整個EPUB文件的目錄。而旁邊的「Preview」(預覽)則是你看著的文件的預覽。

Sigil從零開始製作 EPub 電子書

現在你會看到「nav.xhtml」的預覽,你可以自行更換這個文件的<h1></h1>內的文字成你要的文字哦!這會是你的目錄頁的標題~(圖裡我就把預設的「Table of Contents」換成了「目錄」)

再研究這個文件裡的編碼,你會看到這樣的代碼:

<a href=”Section0001.xhtml”>第一章</a>

這個表示當你點擊「第一章」時,它會把你導向「Section0001.xhtml」,也就是你的「第一章」的文件咯!這也方便讀者通過「目錄」跳轉到他們要看的章節~

注:如果你的nav.xhtml文件不是在最上面,可以用滑鼠點著它,將它拖拽到最上面哦!

關於「目錄」的額外資訊

這一段你可以選擇跳過,因為我後來發現沒有這一個文件,我的EPUB文件也可以如常運作。

在我參考的那本EPUB書裡,它有一個文件是「toc.ncx」——EPUB2使用的「目錄」,EPUB3已沒在使用。

ncx是Navigation Control file(導航控製文件)的縮寫。主要功能和以上提到的「nav.xhtml」一樣。

但如果你因為某些原因需要到這個文件,那可以用這個方式來生成:

點擊工具欄裡的「Tools > Epub3 Tools」,點擊「Generate NCX/Guide for epub2 e-readers」,它就會生成「toc.ncx」這個文件了。

從這個文件,你會看到它是用標題文本連結去各自的xhtml文件的。

5個步驟簡單製作封面

那知道了怎么生成「目錄」,我們來聊聊「封面」吧~

一般上,「封面」的話,我們都會想要做成封面圖片填滿一整頁對吧~但「一整頁」在各個載具上也是不一樣尺寸的,所以與其固定一個大小,還不如讓它能夠「伸縮式」地呈現同時以「一整頁」的方式呈現。

我自己用了蠻長時間去摸索,尤其很喜歡一些在讀墨上、封面呈現得很好看的小說,比如《13.67》,想要弄成像那樣的、沒有空隙的封面。如果你也喜歡這樣的封面,可以跟著我的方法做哦~

將圖片加進來

首先,就是要先把你的封面圖片加進「Images」這個文件夾內。

在「Images」文件夾上點擊右鍵,選擇「Add Existing Files…」,挑選一張你電腦裡的圖片。

封面步骤1

那張圖片就會出現在你的「Images」裡。

加新的文本作為「封面」文本

和前面提到的方法一樣,在「Text」文件夾里新增一個文本。

接著,我會在新增的文本上點擊右鍵,選「Rename…」將文本的名字改為「cover.xhtml」。再用滑鼠點著這個文件,將它拖拽到最頂部。

封面步骤2

畢竟封面都是在第一頁的。 :3

編輯封面文本的代碼

cover.xhtml裡,把整頁代碼換成這段代碼:

(可複制)

<?xml version=”1.0″ encoding=”utf-8″?>
<!DOCTYPE html>
<html xmlns=”http://www.w3.org/1999/xhtml” xmlns:epub=”http://www.idpf.org/2007/ops”>
<head>
  <title>Cover</title>
  <link href=”../Styles/Titlepage.css” rel=”stylesheet” type=”text/css”/>
  <meta name=”viewport” content=”width=1400, height=1995″/>
</head>
<body>
  <div style=”text-align: center; padding: 0pt; margin: 0pt;”>
    <svg xmlns=”http://www.w3.org/2000/svg” height=”100%” preserveAspectRatio=”xMidYMid meet” version=”1.1″ viewBox=”0 0 1400 1995″ width=”100%” xmlns:xlink=”http://www.w3.org/1999/xlink”>
      <image width=”1400″ height=”1995″ xlink:href=”../Images/cover.jpg”/>
    </svg>
  </div>
</body>
</html>

封面步驟3

Highlight的部分需要你自己自行修改,分別是:圖片的文件名稱、圖片的長和寬。 (如果是在讀墨上架的話,建議封面圖片的名字放“cover.jpg”)

新增css文件

在「Styles」文件夾,新增文件。(点击右键,选择「Add blank Stylesheet」)將它重新命名為「Titlepage.css」。在上面的cover.xhtml,你會看到這行代碼: <link href=”../Styles/Titlepage.css” rel=”stylesheet” type=”text/css”/>。它指向的就是這個Titlepage.css文件。

在Titlepage.css內,放入這段代碼:

(可複制)

@charset “UTF-8”;
html,
body {
 margin: 0;
 padding: 0;
 font-size: 0;
}

svg {
 margin: 0;
 padding: 0;
}

編輯「content.opf」

在content.opf裡,找出這段代碼:

<item id=”cover.xhtml” href=”Text/cover.xhtml” media-type=”application/xhtml+xml”/>

將它編輯成:

<item id=”cover.xhtml” href=”Text/cover.xhtml” media-type=”application/xhtml+xml” properties=”svg”/>

另外還有,找出這段代碼:

<itemref idref=”cover.xhtml”/>

將它編輯成:

<itemref idref=”cover.xhtml” properties=”rendition:layout-pre-paginated rendition:spread-none rendition:page-spread-center”/>

最後,代碼看起來就是這樣~

封面步驟4

對了,忘了補充一點是,剛才無論是「Text」哪一個文件,比如「Section0001.xhtml」,裡面有一個<title></title>的標籤,要記得在裡面加上那個文件的標題哦,不能留空~

比如我會在「Section0001.xhtml」裡的<title></title>放「第一章」:

文本標題

做到這裡,封面就已經大功告成了哦!

說回在這幾個步驟裡出現的這段代碼:properties=”svg”。指那個特定文件的屬性是svg。

SVG是Scalable Vector Graphics(可縮放矢量圖形)的縮寫。 SVG的文件比起PNG和JPEG格式來得小,卻不影響圖像的質量。下載這個文件的速度也相對地快。所以,封面文本用這個屬性來定義,是十分合適的。

HTML和CSS是什麼

做完了上面那些步驟,就可以來看看一本書最重要的部分——「內容」了。

而內容,當然少不了要用到HTML和CSS。

簡單來說,

HTML是HyperText Markup Language(超文本標記語言)的縮寫。它是一種標記語言,網頁瀏覽器會讀取HTML的檔案,然後將裡面的元素和內容視覺化。

網站的前端都是由html來呈現的,所以我們現在看見的網頁,都是由html來組成的。

CSS是Cascading Style Sheets(層疊樣式表)的縮寫。它主要用來修飾HTML,比如改變文字的大小、顏色。

如果看到這裡,你覺得不太明白,也沒什麼關係。只要大略知道CSS是HTML的助手,而HTML是主體就可以了。

接下來,我會簡單告訴你一些比較普遍會用到或看見的代碼,讓你看到的時候,有個概念它是用來幹嘛的~

簡單學HTML

先說到一個定律,不管是什麼元素,都是以<element>開頭,而</element>作為結尾的。

段落

主要呢,我們會用到<p></p>這個元素。

<p>等於paragraph(段落)。將內容放在<p></p>之間,就可以形成不同的段落。

複製代碼:

<body>
  <h1>第一章</h1>
  <p>第一段</p>
  <p>第二段</p>
</body>

參照圖片:

html1

空行

空行是用<br></br>。但由於中間沒有放任何內容,所以用<br/>就可以了。

br是break line,空行的意思。

想要在段落之間空一行,可以放這個。

複製代碼:

<body>
  <h1>第一章</h1>
  <p>第一段</p>
  <br/>
  <p>第二段</p>
</body>

參照圖片:

html2

標題

標題有分為「標題1」、「標題2」、「標題3」……等等。

「標題1」是最大的,名為<h1></h1>;「標題2」則是<h2></h2>,以此類推,到「標題6」。

從上面「目錄」裡就有看到,用標題可以產出目錄,所以它是很重要的唷!

在<h1></h1>之間放上標題名稱,就可以了。

分區或節

<div></div>是division的縮寫。

放置在<div></div>裡的內容算為一個「區塊」。

比如,如果我放幾個段落在一個<div></div>內,然後指定這個<div></div>的樣式:字體是「Bold粗體」,那在這個區塊內的段落會全部呈現為粗體。

比起每一段去調整字體,這樣會省事不少~

行內的小段落

<span></span>,這個是用於在段落裡,可能會有一小部分的字是有著不同樣式的,就要另外定義。

比如說,在段落<p></p>之間的字是普通字體,中間卻有個字要用到粗體,那麼這時候,只要用<span></span>包著那個字,然後再另外定義就好了。

就像這樣的:

<p>這個字是<span style=”font-weight:bold;”>粗體</span>。</p>

注:style的部分是css,以上只是作為例子唷。

「頭部」和「身體」

在「頭部」<head></head>裡,會有<title></title>元素,用來命名文件。除此以外,還會有一行這樣的代碼:

<link href=”../Styles/Readmoo_main.css” rel=”stylesheet” type=”text/css”/>

highlight部分是根據你的css文件名而更改。這段主要是嵌入和這個文件呼應的CSS文件。在這裡面用到的修飾元素,如果需要從某個CSS文件裡取用,就需要放入這一段代碼在「頭部」。

整體頭部看起來就會是這樣:

<head>
  <title>第一章</title>
  <link href=”../Styles/Readmoo_main.css” rel=”stylesheet” type=”text/css”/>
</head>

至於「身體」<body></body>,則是囊括段落、空行等等要呈現在網頁或前端的「內容」。

講到這裡,可能你看得會有些不明白,可是沒關係,再接著看CSS,會有更多頭緒哦~

簡單學CSS

首先,我們先做一個CSS文件出來吧,會更好理解一些~

根據我在上面定義的CSS文件,我將文件命名為「Readmoo_main.css」。

css1

作為例子,我們做個簡單的測試。

首先,放這段代碼在這個文件裡:

p.big_font {
  font-size:32px;
}

參照圖片:

css2

接著,回到「Section0001.xhtml」那裡,將這段代碼:

<p>第一段</p>

編輯成:

<p class=”big_font”>第一段</p>

參照圖片:

css3

你會看見「第一段」這個字變得很大,因為在CSS文件裡,就定義瞭如果<p>這個元素用“big_font”這個樣式,字體就會變成32px。

這樣看的話,你看出了它們之間的連結了嗎?

接下來,我就簡單介紹幾個樣式給你,你可以玩玩看哦~

文字對齊

text-align: left;

用上面這段代碼的話,就是字會向左對齊;用text-align: center的話,則會向中間對齊(如下圖):

css4

字體粗細

font-weight:bold;

用上面這行代碼,字體就會變成「粗體」;除此以外,用數字的方式也可以調整粗細唷!

比如我用font-weight:800的話,它就會變得比原本的粗(如下圖):

css5

頂部的邊距

margin-top: 200px;

那段文體的頂部邊距可以用這段代碼調整,當然可以用的單元不只是「px」而已,還有比如「em」(以字體本身的大小為準來測量)。這個你也可以自己玩玩看~下圖是我用了margin-top:200px後所呈現的樣子:

css6

寫作模式

這個屬性不太普遍,只是我覺得如果你是要寫「直式」的電子書應該就會用到這段代碼:

-epub-writing-mode:vertical-rl;

它會呈現這個樣子:

css7

整個文本要弄成直式的話,直接設在「body」就好:

body {
  -epub-writing-mode:vertical-rl;
}

參照下圖:

css8

反之,如果是要「橫式」的話,就不需要做任何設定咯~

在哪裡可以學HTML和CSS

這兩個程序語言很通用的,網上資源也不少。

你可以從網上課程學,也可以從網上的免費資源里學習。又或是買相關的教科書學~

我個人是滿推薦從這個免費網站——w3schools學的,在這裡可以學到所有基礎的HTML和CSS,也容易上手,非常適合新手入門。

之後學得更有興趣了,再上課程也不遲~我是這麼覺得啦。 XD

結論

不用Sigil的話能做電子書嗎?答案是能的~

所以如果你看完了這篇文章,認為暫時還不想以這種方式製作電子書,而是想要以更省時更簡便的方式製作電子書的話,我會推薦這個我上了後認為很實惠的課程——「人人都是作家-0成本自出版電子書」給你。 (使用「ORENJI」優惠碼可以獲得折扣哦~)

我覺得一開始如果就要耗費很多時間和精神去做,會消耗掉「想要嘗試去做」的情緒。所以,從簡單的方法入門,再去摸索更進階或是自己更想要的做法,這樣也不壞~

而如果到那時候,你想要嘗試用少許編碼的方式去編排自己的電子書,再回來看看這篇文章吧!

當然,如果你現在就有興趣用上面分享給你的方法去摸索、開始,我希望它有幫助到你!

如果對文章內容有任何問題,歡迎在底下留言讓我知道。

如果你喜歡我的文章,可以免費申請LikeCoin並為我拍五下手,給我一些鼓勵,謝謝你 :3

如果你覺得這文章對你有用,可以按分享按鈕,分享給你的家人朋友喔。

-- Orenji --

Orenji

最大的梦想是成为作家的90后小子。喜欢阅读、弹吉他、喜欢天马行空。在努力达成自由工作和生活的路上。

發佈留言