EPUB 教學和閱讀器開箱

【Sigil 教學】初階 01 — 不懂語法，也能輕鬆自製 EPUB 電子書﹙提供練習素材﹚

字裡航間
字裡航間
發佈於EPUB 教學
閱讀時間約 6 分鐘

製作電子書的工具不只一種，這裡用的是 Sigil 和 PageEdit﹙2.0.2 版﹚兩個免費軟體。想照著以下步驟練習的朋友，請到官網下載程式，並可參考上一篇文章﹙免費軟體 Sigil 和 PageEdit 安裝及偏好設定﹚進行安裝和設定。

※ 練習素材下載

Step 1 置入素材

這個步驟都在〔書本瀏覽器〕操作，它是電子書的資源庫，所有檔案都能在這裡找到，可以把它當成「收納櫃」，用不同資料夾﹙隔層﹚將各式資料分門別類存放。

• 加入樣式表

  1. 展開「Styles」資料夾，游標移到「sgc-nav.css」樣式表，按右鍵顯示快捷選單，點選「刪除」
  2. 勾選彈出視窗的「sgc-nav.css」樣式表，按「刪除標記的檔案」
  3. 回到「Styles」資料夾，按右鍵顯示快捷選單，點選「增加已存在的檔案」
  4. 選取「book-style.css、fixed-layout.css、sgc-nav.css」等樣式表，按「開啟」
圖1 置入素材_加入樣式表

圖1 置入素材_加入樣式表

• 加入圖片

  1. 游標移到「Images」資料夾，按右鍵顯示快捷選單，點選「增加已存在的檔案」
  2. 全選該書圖片﹙.jpg、.png 檔﹚，按「開啟」
圖2 置入素材_加入圖片

圖2 置入素材_加入圖片

• 貼上純文字

  1. 開啟整理過的純文字檔﹙老殘遊記.txt﹚，全選﹙Ctrl+A﹚⇢ 複製﹙Ctrl+C﹚
  2. 回到「Sigil」，左鍵點兩下「Section0001.xhtml」頁面，按「執行外部 Xhtml 編輯器」
  3. 切換到「PageEdit」，按「將剪貼簿的內容貼上到檔案中」，貼入老殘遊記全文
  4. 確認全文都已貼上，按「儲存目前的檔案」
  5. 展開功能列的「檔案」選單，點選「離開」，關閉「PageEdit」
  6. 回到「Sigil」，按「儲存」，在彈出視窗修改檔案名稱為「老殘遊記.epub」，按「存檔」
圖3 置入素材_貼上純文字

圖3 置入素材_貼上純文字

Step 2 製作封面

• 新增封面

  1. 展開功能列的「工具」選單，點選「新增封面」
  2. 點一下彈出視窗左列的「圖片」，選取封面圖﹙Cover.png﹚，按「確定」
圖4 製作封面_新增封面

圖4 製作封面_新增封面

• 在代碼編輯區的<head></head>間貼上語法

  1. 確認代碼編輯區停在「cover.xhtml」分頁
  2. 貼上<meta charset="UTF-8"/>
  3. 貼上<meta name="viewport" content="width=封面寬, height=封面高"/>
  4. 將「封面寬、封面高」改為封面實際寬高﹙可參照新增封面功能自動帶出的數值﹚
圖5 製作封面_在代碼編輯區的<head></head>之間貼上語法

圖5 製作封面_在代碼編輯區的<head></head>之間貼上語法

• 連結樣式表

  1. 游標移到「cover.xhtml」頁面，按右鍵顯示快捷選單，點選「連結樣式表」
  2. 勾選彈出視窗的「fixed-layout.css」樣式表，按「確定」
  3. 確認語法<link href="../Styles/fixed-layout.css" type="text/css" rel="stylesheet"/>已自動新增，按「儲存」﹙Ctrl+S﹚
圖6 製作封面_連結樣式表

圖6 製作封面_連結樣式表

Step 3 設定標題

• 連結樣式表

  1. 游標移到「Section0001.xhtml」頁面，按右鍵顯示快捷選單，點選「連結樣式表」
  2. 勾選彈出視窗的「book-style.css」樣式表，按「確定」
  3. 檢查「Section0001.xhtml」分頁，是否已自動新增語法<link href="../Styles/book-style.css" type="text/css" rel="stylesheet"/>
圖7 設定標題_連結樣式表

圖7 設定標題_連結樣式表

• 設定標題層級

  1. 參照原書目錄，確認內文各級標題
  2. 左鍵快點兩下「Section0001.xhtml」頁面，按「執行外部 Xhtml 編輯器」
  3. 切換到「PageEdit」，按「在頁面中尋找文字」，在「搜尋欄」輸入「第一回」後，按「Enter」﹙被搜尋的文字會呈現橘色﹚
  4. 滑鼠移到橘色文字上，點擊左鍵，讓游標停在該處
  5. 點開「設定選取的文字的標題等級」，選取「標題 1」﹙共二十回，請重複 3~5 完成設定﹚
  6. 確認標題都設定完畢，按「儲存目前的檔案」
圖8 設定標題_設定標題層級

圖8 設定標題_設定標題層級

Step 4 分割內文和分頁命名

分頁只能以「英文、數字、-、_」命名，建議改為容易辨認的名稱，方便日後修改時尋找內文。

• 分割內文

  1. 參照目錄和內文字多寡，確認章節如何分割
  2. 游標移到要分割的章、節文字「前」﹙本書為第二至二十回﹚，按「插入 Sigil 分割檔案標記」
  3. 確認章節「前」都插入分割標記後，按「儲存目前的檔案」，關閉「PageEdit」﹙Ctrl+Q﹚
  4. 回到「Sigil」，確認「分割標記」<hr class="sigil_split_marker"/>位置正確，展開功能列的「編輯」選單，點選「從標記分割」
圖9 分割內文和分頁命名_分割內頁

圖9 分割內文和分頁命名_分割內頁

• 分頁命名

  1. 游標移到要更改名稱的「.xhtml」頁面，按右鍵顯示快捷選單，點選「重新命名」
  2. 輸入新名稱後，按「Enter」
  3. 改完全部分頁名稱後，按「儲存」
圖10 分割內文和分頁命名_分頁命名

圖10 分割內文和分頁命名_分頁命名

Step 5 建立書籤、目錄頁

Step 3 和 Step 5 順序不可顛倒，因為產生目錄功能是依據標題層級自動帶出目錄。

• 自動產生目錄

  1. 確認標題都設好，按「產生目錄」
  2. 檢查「標題」有無缺漏，「層級」是否正確﹙左◀右▶鍵可調整標題層級﹚
  3. 勾選「只顯示目錄條目」
  4. 展開「選擇要包含在目錄中的標頭」，點選「全部」，按「確定」
圖11 建立書籤、目錄頁_自動產生目錄

圖11 建立書籤、目錄頁_自動產生目錄

• 連結樣式表

  1. 滑鼠移到「nav.xhtml」頁面，按住左鍵不放，拖曳到「cover.xhtml」頁面下
  2. 游標停在「nav.xhtml」頁面，按右鍵顯示快捷選單，點選「連結樣式表」
  3. 勾選彈出視窗的「sgc-nav.css」樣式表，按「確定」
  4. 左鍵點兩下「nav.xhtml」頁面，檢查是否已自動新增語法<link href="../Styles/sgc-nav.css" type="text/css" rel="stylesheet"/>
  5. 按「儲存」
圖12 建立書籤、目錄頁_連結樣式表

圖12 建立書籤、目錄頁_連結樣式表

Step 6 建立書目資訊

  1. 按「中繼資料編輯器」
  2. 在首個彈出視窗的「標題」值欄位快按左鍵 2 下，填上「書名」
  3. 按「加入中繼資料」
  4. 在第二個彈出視窗點選「作者」，按「確定」
  5. 在首個彈出視窗的「創作者」值欄位快按左鍵 2 下，填上「作者名」，按「確定」
  6. 按「儲存」
圖13 建立書目資訊

圖13 建立書目資訊

Step 7 更新屬性和美化 HTML 檔案

• 更新資訊清單屬性

  1. 展開功能列的「工具」選單，點選「Epub3 工具」，再點選「更新資訊清單屬性」
  2. 左鍵點兩下「content.opf」頁面，檢查<manifest></manifest>間的<item id="cover.xhtml" …略…/>該行是否已自動新增properties="svg"語法
圖14 更新屬性和美化 HTML 檔案_更新資訊清單屬性

圖14 更新屬性和美化 HTML 檔案_更新資訊清單屬性

• 修復美化 HTML 檔案

  1. 展開功能列的「工具」選單，點選「重新格式化 HTML」，再點選「修復並美化所有 HTML 檔案」
  2. 按「儲存」
圖15 更新屬性和美化 HTML 檔案_修復美化 HTML 檔案

圖15 更新屬性和美化 HTML 檔案_修復美化 HTML 檔案

EPUB 教學和閱讀器開箱EPUB 教學
EPUB 教學和閱讀器開箱
10會員
5內容數
Epub 格式電子書教學，與閱讀器使用
留言0
查看全部
發表第一個留言支持創作者！
EPUB 教學和閱讀器開箱 的其他內容
免費軟體 Sigil 和 PageEdit 安裝及偏好設定
閱讀時間約 5 分鐘
你可能也想看
恩典見證 | 親歷過紅海的時刻Moments as Similar as for Moses at Red Sea这是一件发生在六年前的事情，我把它记录下来为要见证神奇妙的带领，再次感恩神预备天使让我们在处境和危机时，回到祂的面前寻求祂的帮助。作为父母等待孩子们回家团聚那是一份何等温暖的心情。2017年的圣诞节我们全家从各地不同处团聚在美国匹兹堡将在其中发生了很多的事情，但是神却把很深的意义放在其中。
Thumbnail
avatar
Eric H
2023-08-16
#恩典#見證#護照
「企業及個人如何估算網站流量：Similarweb、Ubersuggest、我的商家、Sitemap」 「企業及個人如何估算網站流量：Similarweb、Ubersuggest、我的商家、Sitemap」 為了獲取有效的商業營運結果，對於業務或者網路策略而言，並不是擁有便宜的行銷資源便能使企業發揮最大效益。其中，衡量網站流量便是非常重要的一環，透過網站流量可以更加有效率地管理企業行銷軌跡。下文將介紹
avatar
唐志偉
2023-07-07
準備好迎接夏天！Sigala 搶先釋出超嗨的夏日電音〈Feels This Good〉！ Hi there，今年已經來到了四月，我想在西洋樂壇的各家音樂人已經摩拳擦掌準備好，要進行各種夏日歌曲的轟炸，而計畫在今年9月1日發行第二張專輯《Every Cloud》(2023) 的英國 DJ Sigala，也搶先在上個月初釋出了大概半張專輯《Every Cloud – Silver L
Thumbnail
avatar
睿忒
2023-04-05
#睿忒#Sigala#FeelsThisGood
9/11 Day 8. 西西里最混亂的城市，卡塔尼亞（Catania, Sicilia Chaos）卡塔尼亞初來乍到，竟有恍如身在南美的錯視感。 隨處可見的垃圾，油黑到發亮的地面， 還在光天化日之下看見了西西里島登島以來的第一隻蟑螂。 這根本不是南美。印象中的南美，比這裡乾淨清爽多了。 卡塔尼亞不是那種第一眼美女，這座城市給我一種⋯⋯在大學教書的女教授，白天不修邊幅，但夜晚玩得比誰都瘋；長得不起
Thumbnail
avatar
沙海潛行 Desertstalker / 行旅，在廣袤世界中
2023-03-12
#義大利#歐洲#旅遊
資料分析 | 業界最愛用的強大競站分析工具SimilarWeb首先，聊聊我與SimilarWeb的不解之緣😊，以前在媒體界擔任產品經理時，老闆最愛問下屬的一件事，別人家競品的網站狀況如何？流量如何？廣告策略有哪些？可是坦白說，沒有認識到別家公司內部員工的話，誰有辦法清楚知道，這時只能想些折衷的辦法，去翻翻網路資訊，或請教一些數位界的前輩，了解是否有哪些第三方
Thumbnail
avatar
我吃故窩宅
2022-11-24
義大利西西里島泰雷德紅葡萄酒Terreliade Nero D'Avola Syrah Sicilia DOC家樂福175，味道有點膩，但也不是很甜，總之結構不佳，單寧有，酸度中低，小家子氣 購入地點：家樂福
Thumbnail
avatar
盧克開酒評
2022-10-17
#家樂福#義大利#紅酒
Alang有話想說｜S2EP05 SisilEmbiyax su hug? (你好嗎?) 我是來自花蓮的太魯閣族，我是Putang Nuku。
Thumbnail
avatar
Putang Nuku
2022-10-08
#Alang有話想說#太魯閣族語#太魯閣族
为什么 Simily.co 开始错了第一印象 + 统计数据 大约一周前，我创建了我的Simily帐户，将我的内容重新用于 Medium 并将其发布在 Simily 上。我有四个帖子，其中两个是虚构的，两个是非虚构的。这次我赚了整整 0.64 美元。以下是我目前的统计数据： 我的 Simily.co 仪表板的屏幕截图 我的观点是：
Thumbnail
avatar
Pop Popok
2022-07-11
Shutterstock開始有點煩人的reject理由 – Similar Content 早期Shutterstock對判定上傳的圖是Similar Content的標準還比較合理，但近期實在是三不五時有點讓人覺得莫明奇妙了 @@
Thumbnail
avatar
店小二DianXiaoEr
2021-09-28
#微圖庫專區