[教學]【慎入】線上製作EPUB，電電轉換器之基礎篇

我終於PO出教學文了。。。
這篇教學文得感謝KK大以及我家老大的各種催生...

是說我大概是小說版唯一一個沒有發任何資源帖，一上來就發教學文的人了吧？！

先小小的簡介一下電電轉換器優缺點

注意事項：此篇系列教學僅適合有耐心、肯學習新事物的朋友學習，如已習慣且很滿意其他軟體的輸出成果，就不用特別學新的東西了吧！！

限制：

• 僅能上傳TXT、圖片、CSS檔案、設定檔。
• 僅對應Reflow的EPUB 3，不能輸出固定版面的EPUB檔案。
• 上傳的個別檔案容量上限為3MB，最多上傳50個檔案。
• 不能上傳多媒體（聲音、影片）、JavaScript、字型檔案。
• 僅能上傳一個CSS檔案。
• 不能指定腳註的號碼（為各頁面從1開始的流水號）。
• 輸出的NCX檔案不具樹狀構造，為單一階層的結構。（導覽文件的目錄則能依照標題層級建構階層構造）
  

先讓我說個前言...
小說版真的是個好玩的地方，
尤其是新增相同書籍領取區，
在那裡，只要上傳的檔案和原帖有差異，不論是集數、格式差異都可領到至少3碎鑽5幫助(當然得排版得體)，版主看情況還會給個經驗分(好像很常給，小說版主就是慷慨大方)，
所以只須將還未有EPUB這格式的書檔載下來，稍微改一下、檢查看看就可以回覆領獎囉！！
於是我決定好好利用利用...


教學開始！！！


準備東西：

• TXT文檔：可版上找僅有TXT的文檔(較為建議，如檔案太大須先切割 ，最好是按章節分，因為每一個TXT會當成一個html檔，也就是說會分頁，不過對標題沒影響)，也可網路上找(須先自行排版好，可參考Z版的教學，這裡不教基本排版喔~)
  下圖是不按章節分的結果
  
  
                                 
  登錄/註冊後可看大圖
• 某個TXT編輯器(內建的記事本就可以了喔~Notepad++也行)。
• 耐心。
  

準備好了，就開始吧！

第一步，確定檔案名稱是採用半型英文數字、連字號「-」與底線「_」等文字(不推薦使用中文檔名)， 且文字編碼為「UTF-8」，分割檔也建議用01、02、03等等排序。

第二步，先觀察自己載下來的TXT文檔，找出標題的基本格式，例如：第X章、第X節、第X卷等等。

第三步，利用TXT編輯器尋找功能，找標題關鍵字，找到標題後，在標題前後加上n個#(n代表標題層級，通常從2開始，1則是書名)，且須有半行空格，例如：

1. ## 標題 ##

複製代碼

並且在標題前，需要分頁處，加上至少3個"="，前後須以空行夾住，=中間有空格也OK！

                               
登錄/註冊後可看大圖

第二、三步可以手動方式尋找並添加。

第四步，如果想加封面圖(可有可無)，只需準備好圖片(jpg、png、gif都可)，並取名為cover就可。

如此，簡單版的前置作業就算完成了！
趕緊去試試那網站吧！！

第一步，上傳標記好的TXT文檔、封面圖(可有可無)。

                               
登錄/註冊後可看大圖

第二步，輸入書籍相關資料(書名一定要有，作者不一定，有是最好)，指定翻頁方向。

                               
登錄/註冊後可看大圖

第三步，勾選想要的基本頁面與其他選項。

                               
登錄/註冊後可看大圖

第四步，可以轉換了(轉換速度端看上傳檔案大小、數量與網速，快則幾秒，慢則2~5分鐘，轉換期間可做其他事，別關網頁就行)，如需預覽，可勾選預覽，會以bib/i預覽，無論預覽與否，都要先載下來，不然關了就沒了。

預覽情形

                               
登錄/註冊後可看大圖

                               
登錄/註冊後可看大圖

第五步，找個可看EPUB的閱讀器，檢查一下，沒問題就可以回覆或發帖囉！！

                               
登錄/註冊後可看大圖

                               
登錄/註冊後可看大圖

這是基礎篇，下次指不定我還會發個進階篇，就是有設定檔和CSS檔的，
看大家的迴響囉！

最後是Q&A時間，有什麼問題儘管問，我知道的都會答，不知道的就......
如果有先研究過，對於設定檔或CSS檔有疑問的，也可以問喔～

您好！您暫時不能瀏覽帖子的全部內容，請 登錄 | 沒有帳號？ 註冊

littleglin 發表於 2017-5-13 09:06
教學很詳細！
可是看得很吃力！
果然實務經驗是很重要的

喔喔喔喔喔~
竟然還有人要看這篇教學文...

是要跟我說"別偷懶了，還欠一篇教學勒？"嗎？

恩~
你的問題問得很好，
畢竟我選擇的編輯器是記事本，
能用的功能太少了！
只能這樣...

不過，竟然你都問起了，
我就介紹另一種做法吧！

其實，只需要找個高級點的編輯器，搭配正規表示法就行囉！！

廢話不多說，現在開始吧！

我要介紹的是小Z版版曾經介紹過的編輯器軟體---Notepad++
平常我都拿來看(改)程式碼，也可以拿來排版電子書喔~

那就一步一步來吧！
舉個比較複雜的例子吧！
因為還沒想要排版那本書，所以連繁化都沒用，別在意喔~

第一步　以Notepad++開啟書檔(這就不附圖啦！)

第二步　觀察書檔，找出標題規則

                               
登錄/註冊後可看大圖

第三步　按下圖紅色圈起來的圖示或搜尋--->取代或快捷鍵ctrl+H，開啟取代視窗

                               
登錄/註冊後可看大圖

                               
登錄/註冊後可看大圖

第四步　在尋找內容處打上如下敘述，

1. 第([一-十])*卷

複製代碼

而取代為打上

1. =====＼n＼n## 第＼1＼卷

複製代碼

最下面的搜尋模式請記得改勾選規則運算式

                               
登錄/註冊後可看大圖

很抱歉～
有些東西還來不及解釋，所以比較不懂…
現在回來說明一下正規表示法的應用……

對照圖上所寫，中括弧[]代表一個數字範圍，
而*字鍵代表中括弧裡的數字出現0次以上，
最後，取代裡的＼1＼代表尋找裡的小括弧()

為了表示出反斜線，反斜線都用全形的，記得改為半形喔～

您好！您暫時不能瀏覽帖子的全部內容，請 登錄 | 沒有帳號？ 註冊

哎~都沒人問...怎麼用粗體字......我都特地在圖裡標出來的說.........
罷了！還是我自己出來聊好了(雖然不會有人理我...)

樓主文裡教的是常用的標記方式(標題、分頁)
這裡要教的是其他可能有用的標記方式...

電電Markdown(因為它也可以讀HTML記法，所以我會兩個都擺喔~)

段落主要與排版有關，我就不多說了！
比較需要知道的就是段首縮排，
在電電裡，想要段首縮排，只需在段首加入全形空白，作法參考13、14樓。

標題如樓主文所述，標題前後加半形#字號與半形空白，
#字號數量代表標題層級，通常一個#字號是用在書名。

標題層級1

1. # 標題層級1 #

複製代碼

另一種記法(=個數不影響，不推薦易與分頁記法搞混)

1. 標題層級1
   
2. ===

複製代碼

對應HTML

1. <h1>標題層級1</h1>

複製代碼

標題層級2

1. ## 標題層級2 ##

複製代碼

另一種記法(-個數不影響)

1. 標題層級2
   
2. ------------

複製代碼

對應HTML

1. <h2>標題層級2</h2>

複製代碼

標題層級3

1. ### 標題層級3 ###

複製代碼

對應HTML

1. <h3>標題層級3</h3>

複製代碼

依此類推，可到標題層級6

換頁(檔案分割)，同樓主文，以三個以上半形=號，前後需加空行。

1. 這是一般的段落。
   
2. 
   
3. ===
   
4. 
   
5. ## 大標 ##

複製代碼

此例整個大標後面會成為新的HTML檔。

文字強調(我主要想說的，但並非每個閱讀器都可以看到)

斜體：一個半形星號「*」包圍的文字。

1. 這是*斜體字*。

複製代碼

對應HTML

1. 這是<em>斜體字</em>。

複製代碼

粗體： 兩個半形星號「*」包圍的文字。

1. 這是**粗體字**。

複製代碼

對應HTML

1. 這是<strong>粗體字</strong>。

複製代碼

縱中橫排： 直排文章中，特定文字採橫排，以半形「^」符號包圍的文字，在橫排沒效，需有CSS檔。

1. 民國^74^年

複製代碼

對應HTML

1. 民國<span class="tcy">74</span>年

複製代碼

tcy在CSS檔設定的，14樓有CSS檔跟文字檔一起上傳就好。
縱中橫排所指定的文字數最好為2個半型字。

若指定超過這數量的文字為縱中橫排時，就可能會解除縱中橫排，
或者文字從該行切出，與其他行文字重疊。

圖片的話參照14樓

表格(應該只有教學書用的到)：半型垂直線「|」與減號「-」的組合。

1. 名稱 | 人口
   
2. ------- | ----------
   
3. 台北市 | 262萬人
   
4. 北京市 | 2018萬人

複製代碼

表格的HTML比較複雜，大概跟論壇表格BBcode寫法差不多，我就不說了。

剩下還有很多語法沒說，例如：引用、列表、超連結、注釋、Ruby文字等等，
想知道的就到這看吧！！
http://conv.denshochan.com/tw/markdown

您好！您暫時不能瀏覽帖子的全部內容，請 登錄 | 沒有帳號？ 註冊

✧(๑✪д✪)۶✨交作業✨٩(✪д✪๑)✧

圖片加上去了!!!

實際操作上有一個問題~

我是將插圖設成獨立一個分頁 像這樣↴  </img>另加在後面

===

<img src="http://tryimg.com/8/2016/11/26/eZY4L.jpg" alt="eZY4L.jpg" border="0" /></img>

===

結果出現錯誤訊息

登錄/註冊後可看大圖

沉默的守者 發表於 2016-11-26 10:54
首先，感謝球球真的認真學習，
我原本就覺得不會有人真的去學的...

剛剛用幾行字加上一張圖的連結試著轉看看，圖片真的有在指定位子耶!

原本擔心沒有妳說的"</img>"↴

<img src="http://tryimg.com/8/2016/11/26/eZY4L.jpg" alt="eZY4L.jpg" border="0" />

還有原本不懂妳說的"CSS檔"

後來看了你給的下載連結，原來是要CSS檔跟文字檔兩個一起上傳啊~

好啦~等我全部弄好再傳上來看看^^

感恩你的用心教學

您好！您暫時不能瀏覽帖子的全部內容，請 登錄 | 沒有帳號？ 註冊

球-球 發表於 2016-11-26 01:02
按教學步驟一步一步來真的成功了!!!
尤其第三步那張動圖真的幫了大忙，
如果只有文字敘述真的不太好理解~

首先，感謝球球真的認真學習，
我原本就覺得不會有人真的去學的...

再來，回答你的問題喔~

一、想要讓段首縮排，在電電裡頭必須是全形空格，來教一下，如何簡單達成...

一樣善用取代的功能，先將段首空白全複製起來，

登錄/註冊後可看大圖

按教學步驟一步一步來真的成功了!!!
尤其第三步那張動圖真的幫了大忙，
如果只有文字敘述真的不太好理解~

我有兩個問題請教~

一. 原來的TXT文檔內容每段前面都有空格，但轉換後就沒空格(直/橫排都是)，請問如何設定?
二. 如果我有15張插圖，可以放進指定位子嗎?

      ～謝謝!


附上標記好的TXT文檔及轉換後的epub檔案~

落櫻繽紛.txt (743.64 KB, 下載次數: 1)

2016-11-26 01:28 上傳

點擊文件名下載附件
落櫻繽紛 作者：宮部美幸 (橫排).epub (427.08 KB, 下載次數: 1)

2016-11-26 01:26 上傳

點擊文件名下載附件

                               
登錄/註冊後可看大圖

                               
登錄/註冊後可看大圖

我知道原因了!

原來是縮排的空格不是全形
全部置換後就OK啦! 哈~真開心

登錄/註冊後可看大圖