EPUB 電子書製作入門的六堂課

Name: EPUB 電子書製作入門的六堂課
Rating: 3.4 (12 reviews)

從零學習全手工製作 EPUB 電子書

Created byKaiching Chang

Last updated 3/2019

Chinese (Traditional)

What you'll learn

學會 EPUB 的基本檔案組織與製作方式。
學會 HTML 及 CSS 的基本概念，瞭解如何使用 HTML 及 CSS 設計 EPUB 電子書。
學會利用 Mac 內建的 zip 指令或 Windows 的 ePubPack 製作 EPUB 檔案。
學會使用 Brackets 編輯 HTML 及 CSS 檔案。
學會利用 EPUB-Checker 驗證 EPUB 檔案。

Course content

7 sections • 82 lectures • 2h 48m total length

講座組織及授課方式3:18
這支影片對整個課程進行一次性的導覽，說明前三堂課為基礎，後三堂課為範例實戰，工具網址請見可下載的 TXT 檔案。
Google Play 圖書 App 及 iBooks0:38
這支影片介紹 Google Play 圖書及 iBooks ，在這個課程中會用這兩種 EPUB 閱讀器來測試、查看製作出的 EPUB 檔案。
Brackets 簡介2:33
這支影片介紹 Brackets ，在這個課程中會利用 Brackets 編輯 HTML 及 CSS 檔案，工具網址請見可下載的 TXT 檔案。

第一堂課導覽2:17
這支影片為第一堂課的導覽，第一堂課討論 EPUB 的檔案組織及如何在 Mac 或 Windows 中製作 EPUB 檔案，工具網址請見可下載的 TXT 檔案。
各種數位書籍格式及 EPUB7:25
這支影片介紹 EPUB 的前世今生，以及為什麼電子書要用 EPUB 格式。
什麼是靜態網站？2:28
這支影片介紹靜態網站的概念，以及靜態網頁中最重要的超連結，範例請解壓縮可下載的 public_html.zip 。
什麼是 EPUB 格式？3:22
這支影片介紹 EPUB 檔案內容的基本組織，範例請解壓縮可下載的 hello_epub.zip 。
什麼是 EPUB 檔案的 META 資料頁？3:49
這支影片介紹 EPUB 的 META 資料檔案，範例請見可下載的 metadata.opf 。
什麼是 EPUB 檔案的目錄頁？1:50
這支影片介紹 EPUB 的目錄檔案，範例請解壓縮可下載的 toc.zip 。
什麼是 EPUB 書籍的封面頁？1:07
這支影片介紹 EPUB 的封面檔案，範例請見可下載的 start.html 。
製作 EPUB 檔案的方式1:52
這隻影片介紹製作 EPUB 檔案的模式。
如何在 Windows 中製作 EPUB 檔案1:22
這支影片介紹如何在 Windows 中用 ePubPack 製作 EPUB 檔案，然後用 EPUB-Checker 驗證所製作出的 EPUB 檔案是否有效，下載檔案 hello_epub.zip 為範例電子書的檔案資料夾。
如何在 Mac 中製作 EPUB 檔案2:00
這隻影片介紹如何在 Mac 中利用 zip 指令製作 EPUB 檔案，然後用 EPUB-Checker 驗證所製作出的 EPUB 檔案是否有效，下載檔案 hello_epub.zip 為範例電子書的檔案資料夾，指令.txt 則是 zip 指令。
如果驗證出錯的話1:37
這支影片舉例 EPUB 驗證出錯的情況，下載檔案 pl_hello2.epub 唯有錯誤的 EPUB 檔案。
在 Mac 用 Google Play 圖書網頁及 iBooks 閱讀 EPUB 檔案的內容1:33
這支影片示範在 Google Play 圖書網頁版及 iBooks 開啟範例 EPUB 電子書，下載檔案 hello_epub.epub 為範例電子書。
在 Windows 用 Edge 閱讀 EPUB 檔案的內容0:59
這支影片示範在 Windows 10 中用 Edge 開啟範例電子書檔案，下載檔案 hello_epub.epub 為範例電子書檔案。
Google Chrome 閱讀 EPUB 檔案的應用程式 Readium1:42
這支影片介紹 Google Chrome 的 EPUB 應用程式 Readium ，以及其他跟 Readium 運用相同技術的 EPUB 閱讀器。
取得 EPUB 內容0:50
這支影片示範如何反向取得 EPUB 檔案中的資源檔案，下載檔案 hello_epub.epub 為範例電子書檔案，範例網址.txt 中有更多 DRM-free 的範例電子書。
第一堂課舉一反三1:31
這支影片為第一堂課的總結，說明怎麼用最簡單的 EPUB 原始檔案資料夾出發製作自己需要的 EPUB 檔案，下載檔案 demo.zip 解壓縮後就是最簡單的 EPUB 檔案資料夾。

第二堂課導覽1:24
這支影片為第二堂課的導覽，第二堂課討論 HTML ，介紹 HTML 的各種元素，工具網址請見可下載的 TXT 檔案。
用 Google Play 圖書的 App 閱讀第二堂課範例1:39
這支影片示範用 Google Play 網頁版閱讀第二堂課的範例 EPUB 檔案。
用 iBook App 閱讀第二堂課範例1:21
這支影片示範用 iBooks 閱讀第二堂課的範例 EPUB 檔案。
HTML 與 XHTML2:51
這支影片比較 HTML 及 XHTML 的差別。
XHTML 的優點1:55
這支影片舉例說明使用 XHTML 的優點。
標籤與屬性2:49
這支影片介紹 HTML 的標籤與屬性。
什麼是區塊元素及行內元素2:20
這支影片介紹 HTML 的行內元素與區塊元素。
如何編輯文字段落資料1:32
這支影片介紹 HTML 的 <p> 元素， <p> 為放文字資料的區塊元素。
如何設定文字格式0:43
這支影片介紹 HTML 的 <b> 、 <i> 、 <sub> 、 <sup> 等元素，這些為文字樣式的行內元素。
如何加入超連結1:07
這支影片介紹 HTML 的 <a> 元素， <a> 設定超連結的行內元素。
如何加入標題文字0:34
這支影片介紹 HTML 的標題元素，包括 <head> 裡的 <title> 及 <body> 中的 <h1> 到 <h6> ，其中 <h1> 到 <h6> 為區塊元素。
如何加入分隔線0:29
這支影片介紹 HTML 的 <hr> 元素， <hr> 為顯示分隔線的區塊元素。
如何加入表格2:27
支影片介紹 HTML 的 <table> 、 <tr> 、 <th> 、 <td> 元素， <table> 為顯示表格的區塊元素， <tr> 為表格中的列， <th> 為表格標題的儲存格， <th> 則是表格標題的儲存格。
如何加入列表0:51
這支影片介紹 HTML 的 <ol> 、 <ul> 、 <li> 元素， <ol> 為按數字順序排列的列表區塊元素， <ul> 為用符號排列的列表區塊元素， <li> 則是列表中每一列的資料。
如何加入程式碼0:49
這支影片介紹 HTML 的 <pre> 、 <code> 元素， <pre> 為按照原始編排的區塊元素， <code> 為語意上程式碼的行內元素。
如何加入圖片0:48
這支影片介紹 HTML 的 <img> 元素， <img> 為顯示圖片的行內元素。
如何加入音檔1:08
這支影片介紹 HTML 的 <audio> 及 <source> 元素， <audio> 為顯示聲音檔案的行內元素， <source> 則是 <audio> 內設定資源檔路徑的標籤。
如何加入影片0:59
這支影片介紹 HTML 的 <video> 及 <source> 元素， <video> 為顯示影片檔案的行內元素， <source> 則是 <video> 內設定資源檔路徑的標籤。
如何加入注音1:25
這支影片介紹 HTML 的 <ruby> 、 <rp> 及 <rt> 元素，這三種元素用來替東亞文字標示注音。
第二堂課舉一反三2:36
這支影片為第二堂課的總結，以第四堂課及第五堂課的 EPUB 範例，說明怎麼用學來的 HTML 元素設計自己所需的 HTML 結構。

第三堂課導覽1:29
這支影片為第三堂課的導覽，第三堂課討論 CSS ，介紹 CSS 規則的寫法，工具網址請見可下載的 TXT 檔案。
用 Google Play 圖書的 App 閱讀第三堂課範例3:36
這支影片示範用 Google Play 圖書的 App 閱讀第三堂課範例
用 iBooks App 閱讀第三堂課範例2:49
這支影片示範用 iBooks 閱讀第三堂課的範例 EPUB 檔案。
樣式表可以寫在哪裡3:00
這支影片示範樣式表可以寫在 CSS 檔案或 HTML 檔案中的 <style> 元素或 style 標籤。
各種樣式及單位5:58
這支影片說明 CSS 經常設定的樣式及單位。
什麼是盒子模式1:46
這支影片介紹 HTML 的盒子模式， HTML 元素都需要設定 padding 、 border 、 margin 三個 CSS 屬性。
怎麼寫選取器3:00
這支影片介紹怎麼寫 CSS 的選取器，範例包括四種最常見的選取器。
如何設定段落樣式1:33
這支影片介紹怎麼設定 <p> 元素的樣式。
如何設定文字樣式3:30
這支影片以 <p> 及 <span> 為例，介紹怎麼替文字設定字型、顏色底線、刪除線等樣式。
如何設定對齊方式1:44
這支影片介紹 CSS 的 text-align 屬性，並且舉例說明如何設定置中對齊、靠左對其、靠右對齊以及左右對齊。
如何設定分欄1:18
這支影片介紹 CSS 的 column-count 屬性， column-count 可以設定在區塊元素中分成幾欄。
如何加入字型1:52
這支影片介紹設定自己加入的字型檔案，商業字型需要購買授權，這裡示範用 Google 提供的開源字型。
如何設定表格樣式2:25
這支影片介紹怎麼設定 <table> 的樣式，表格樣式主要設定表格寬度及儲存格的格線。
如何設定列表樣式1:42
這支影片介紹如何設定 <ol> 及 <ul> 的樣式。
如何設定圖片樣式2:04
這支影片說明怎麼替圖片 <img> 元素加入 CSS 樣式。
關於流動方式1:32
這支影片介紹 float 屬性，讓文字從特定的區塊元素的左側或右側流動。
關於螢幕尺寸問題1:23
這支影片介紹怎麼用 CSS 針對不同的螢幕尺寸做不同的 CSS 設定。
如何設定背景圖片1:53
這支影片介紹怎麼設定 HTML 元素的背景圖片。
如何設定背景顏色1:09
這影影篇介紹怎麼設定 HTML 元素的背景顏色。
如何設定頁首及頁尾1:07
這支影片介紹怎麼設定 HTML 頁首及頁尾的樣式。
如何設定透明度0:39
這支影片介紹怎麼設定透明度。
第三堂課舉一反三2:19
這支影片為第三堂課的總結，以第五堂課及第六堂課的 EPUB 範例，說明 CSS 設計的重要。

第四堂課導覽1:02
這支影片為第四堂課的導覽，第四堂課討論如何製作流動式版面的 EPUB 文字書。
用 Google Play 圖書的 App 閱讀第四堂課範例1:29
這支影片示範用 Google Play 圖書的 App 閱讀第四堂課範例。
用 iBook App 閱讀第四堂課範例1:09
這支影片示範用 iBooks 閱讀第四堂課的範例 EPUB 檔案。
文字書網頁示例3:04
這支影片以 Google Chrome 示範文字書的 HTML 檔案。
文字書 HTML 設計4:15
這支影片以 Brackets 解說文字書的 HTML 檔案。
文字書 CSS 設計6:39
這支影片以 Brackets 解說文字書的 CSS 檔案。
第四堂課舉一反三1:01
這支影片為第四堂課的總結，說明設計文字書的重點之處。

第五堂課導覽1:07
這支影片為第五堂課的導覽，第五堂課討論如何製作流動式版面的 EPUB 圖文書。
用 Google Play 圖書的 App 閱讀第五堂課範例1:49
這支影片示範用 Google Play 圖書的 App 閱讀第五堂課範例。
用 iBook App 閱讀第五堂課範例1:29
這支影片示範用 iBooks 閱讀第五堂課的範例 EPUB 檔案。
圖文書網頁示例2:05
這支影片以 Google Chrome 示範圖文書的 HTML 檔案。
圖文書 HTML 設計4:24
這支影片以 Brackets 解說圖文書的 HTML 檔案。
圖文書 CSS 設計7:35
這支影片以 Brackets 解說圖文書的 CSS 檔案。
第五堂課舉一反三1:14
這支影片為第五堂課的總結，說明設計圖文書的重點之處。

第六堂課導覽0:58
這支影片為第六堂課的導覽，第六堂課討論將第四堂課的文字書改為中文直書，然後討論如何製作第五堂課的 CSS 動畫。
用 Google Play 圖書的 App 閱讀中文直書範例1:40
這支影片示範用 Google Play 圖書的 App 閱讀中文直書的 EPUB 範例。
用 iBook App 閱讀中文直書範例0:29
這支影片示範用 iBooks 閱讀中文直書的 EPUB 範例。
怎麼製作中文直書的 EPUB 電子書1:58
這支影片說明製作中文直書 EPUB 的方式。
CSS 動畫範例 Animate.css1:41
這支影片介紹 CSS 動畫的範例網站 Animate.css 。
CSS 動畫設計2:28
這支影片說明如何製作第五堂課圖文書的 CSS 動畫。
延伸學習1:09
這支影片替這六堂課做總結，說明需要繼續延伸學習的項目。

Requirements

有桌機或筆電， Mac 或 Windows 均可。
有 Google 帳號，可以上傳 EPUB 電子書到 Google Play 。
有 Android 或 iOS 裝置，可以用 Google Play 圖書 App 或 iBooks 查看 EPUB 檔案。

Description

這個課程從零開始介紹如何製作 EPUB 檔案，包括 EPUB 的組織及呈現 EPBU 內容的 HTML 與 CSS ，提供六本 DRM-free 的 EPUB 電子書當範例，可以使用 Windows 或 Mac 電腦，並採用免費、開源、跨平台的工具，如 Brackets 、 Google Chrome 、 zip 、 ePubPack 及 EPUBChecker 等等。以下為六堂課的分別介紹

第一堂課 - 介紹 EPUB 的基本概念及怎麼製作 EPUB
第二堂課 - 介紹 HTML 的基本概念及各種 HTML 元素
第三堂課 - 介紹 CSS 的基本概念及各種 CSS 樣式
第四堂課 - 以《西遊記》第十七回當內容，介紹怎麼製作文字書
第五堂課 - 以《如何自學程式設計》的附錄當內容，介紹怎麼製作圖文書
第六堂課 - 介紹怎麼製作中文直書的 EPUB 及 CSS 動畫

Who this course is for:

想要學習並製作 EPUB 格式電子書的人。
想要學習 HTML 及 CSS 的人。

EPUB 電子書製作入門的六堂課

What you'll learn

Explore related topics

Course content

課程導覽3 lectures • 6min

第一堂課 EPUB 的基本概念16 lectures • 36min

第二堂課 HTML 的基本概念20 lectures • 30min

第三堂課 CSS 的基本概念22 lectures • 48min

第四堂課 製作流動式版面的文字書7 lectures • 19min

第五堂課 製作流動式版面的圖文書7 lectures • 20min

第六堂課 中文直書與製作 CSS 動畫書7 lectures • 10min

Requirements

Description

Who this course is for: