用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讀墨、Pubu、Kobo樂天和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在你的電腦。

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

二

打開Sigil

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

三

新開一個EPUB3文件

在左上角點擊「File > New > ePub3」,就會看到屬於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」裡，加上這一行代碼：

（可複制）

放的位置參照圖片：

二

新增文本和代碼

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

（可複制）

放的位置參照圖片：

三

生成「目錄」

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

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

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

四

檢查目錄

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

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

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

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

這個表示當你點擊「第一章」時，它會把你導向「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…」，挑選一張你電腦裡的圖片。

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

二

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

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

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

畢竟封面都是在第一頁的。 :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>

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裡，找出這段代碼：

將它編輯成：

另外還有，找出這段代碼：

將它編輯成：

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

對了，忘了補充一點是，剛才無論是「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>之間，就可以形成不同的段落。

複製代碼：

參照圖片：

二

空行

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

br是break line，空行的意思。

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

複製代碼：

參照圖片：

三

標題

標題有分為「標題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>包著那個字，然後再另外定義就好了。

就像這樣的：

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

六

「頭部」和「身體」

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

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

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

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

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

簡單學CSS

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

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

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

首先，放這段代碼在這個文件裡：

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

參照圖片：

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

編輯成：

參照圖片：

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

這樣看的話，你看出了它們之間的連結了嗎？

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

一

文字對齊

text-align: left;

用上面這段代碼的話，就是字會向左對齊；用text-align: center的話，則會向中間對齊（如下圖）：

二

字體粗細

font-weight:bold;

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

比如我用font-weight:800的話，它就會變得比原本的粗（如下圖）：

三

頂部的邊距

margin-top: 200px;

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

四

寫作模式

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

-epub-writing-mode:vertical-rl;

它會呈現這個樣子：

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

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

參照下圖：

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

在哪裡可以學HTML和CSS

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

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

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

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

結論

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

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

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

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

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

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

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

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

-- Orenji --

電子書是什麼

EPUB是什麼

如何製作EPUB

用Sigil做EPUB

Sigil是什麼

4個步驟簡單製作EPUB文件

4個步驟簡單製作Sigil目錄

5個步驟簡單製作封面

HTML和CSS是什麼

簡單學HTML

簡單學CSS

在哪裡可以學HTML和CSS

結論

Orenji

You Might Also Like

人人都是作家-0成本自出版電子書 | 看了我的課程評價再買也不遲喲！

為什麼我要辭職 | 真正喜歡做的事，是長什麼樣子的？3個特徵讓你認出它來

8大寫小說平台 | 在哪裡可以寫中文小說 | 夢想 vs 賺錢 還是能兩者兼具？

發佈留言 取消回覆

8大寫小說平台 | 在哪裡可以寫中文小說 | 夢想 vs 賺錢還是能兩者兼具？

發佈留言取消回覆