Slide 1

Slide 1 text

董福興 2020年10 月 23 日 HTML與CSS入門數位出版聯盟EPUB3課程第二堂

Slide 2

Slide 2 text

課程規劃課程內容說明

Slide 3

Slide 3 text

整體課程規劃主題與學習對象 • 10/23：HTML與CSS入門   基本網頁技術與EPUB內容編輯【對象】：需要調整EPUB內容的讀者與編輯者 • 10/28：EPUB結構詳解與範本介紹  EPUB結構與聯盟提供的範本說明【對象】：電子書製作者或技術者

Slide 4

Slide 4 text

第二堂課程規劃 HTML與CSS入門 • 第一節：HTML與CSS 用途與XML規則  HTML與CSS的角色 / EPUB中用到的網頁技術/ XML是什麼、XML的規則 • 第二節：HTML構成與常用標籤  HTML檔案構成 / 常用標籤 / EPUB常用模組 • 第三節：CSS基本概念與設計範例  CSS的構造 / CSS對應方式 / 層疊與繼承 / CSS選擇器 CSS常用單位 / CSS 色彩 / CSS盒狀模型與縮寫 / 範例

Slide 5

Slide 5 text

講師介紹董福興 Bobby Tung • 汪達數位出版（Wanderer Digital Publishing Inc.）創辦人 • W3C 國際化工作小組邀請專輯，〈中文排版需求（CLREQ）〉編輯 • W3C Evangelist • 參與制定數位出版聯盟〈台灣 EPUB 3 製作指引〉 • 參與制定中推會業界標準〈注音符號排版〉

Slide 6

Slide 6 text

HTML與CSS 用途與XML規則構成內容的基本技術，與通用全EPUB的規則

Slide 7

Slide 7 text

EPUB內容文件幾乎所有的EPUB內容都使用 HTML • EPUB僅接受兩種內容文件 • XHTML內容文件 • SVG內容文件 • XHTML內容文件可以做到的三種事 • 文字為主的內容（re fl ow）：一般文字書。 • 固定版面漫畫（Fixed Layout）：漫畫與雜誌。 • 固定版面複雜排版（Fixed Layout）：繪本等。

Slide 8

Slide 8 text

EPUB中使用的網頁技術 HTML / CSS / JavaScript HTML CSS JavaScript 內容結構內容樣式控制與動態

Slide 9

Slide 9 text

JavaScript動態範例黃心健《科技蜃樓》大塊文化出版

Slide 10

Slide 10 text

JavaScript動態範例黃心健《科技蜃樓》大塊文化出版

Slide 11

Slide 11 text

EPUB中使用的網頁技術 HTML / CSS的角色 • HTML內容「結構」 • 文字書：標題、段落、引言、列表、圖片與圖說等⋯⋯ • 圖文書：文字區塊、圖片、物件等…… • CSS內容「樣式」 • 基本：文字方向、尺寸、字體、縮排、間距、邊界、邊框、定位等…… • 進階：版面設計(grid, fl exbox)、動畫(animate)、圖文變形(transform)等……

Slide 12

Slide 12 text

──某位CSS 工作小組成員如此說「如果系統不支援最新的CSS，　頂多只是難看一點，內容還是一樣的。」

Slide 13

Slide 13 text

XML是什麼？用於整體EPUB的重要知識

Slide 14

Slide 14 text

XML是什麼？ XHTML與HTML有什麼差別？ • HTML：網頁使用的一套標準化標記語言； • XHTML：符合XML規則的HTML。 • XML是什麼？ • eXtensible Markup Language的縮寫。 • 發展自 SGML，由W3C於1998年完成制定。 • 結構簡單可延伸，但規則嚴謹。

Slide 15

Slide 15 text

XML是什麼？ XML範例 <活動時間地點> <時間><年紀年=" 西元">2019< 月 >3< 日 >12 <地點>台北市開始標籤 start-tag 結束標籤 end-tag 元素 element 屬性 attribute 值 value 內容 content

Slide 16

Slide 16 text

XML是什麼？ XML宣告所有的XML開頭都要有這一行，並且前面不能有空白。 XML能使用哪些標籤與屬性，需要定義DTD或者Schema，這是HTML的DTD宣告。

Slide 17

Slide 17 text

XML規則 XML的八項規則 ① 所有XML都要有一個根元素 ② 所有標籤都需要結束（關閉） ③ 所有標籤都要完整以巢狀結構建構 ④ 標籤名稱有所限制 ⑤ 標籤名稱有分大小寫 ⑥ 標籤名稱不能包含空格 ⑦ 屬性的值需要以""標記 ⑧ 空白會被保留

Slide 18

Slide 18 text

XML是什麼？ 1. 所有XML都要有一個根元素根元素名稱不需要為，範例中根元素為<活動時間地點>， XHTML中則為 <活動時間地點> <時間><年紀年=" 西元">2019< 月 >3< 日 >12 <地點>台北市

Slide 19

Slide 19 text

XML是什麼？ 2. 所有標籤都需要結束（關閉）

有些元素像

，沒有內容。

就在最末加上「/」來結束，稱為  「置空元素（empty element）」。

Slide 20

Slide 20 text

XML是什麼？ 3. 所有標籤都要完整以巢狀結構建構 ❌ 文字 ⭕ 文字 標籤的結束需要依序關閉。 HTML：紅色 紅色粗體粗體 XHTML：紅色 紅色粗體粗體 HTML相對寬鬆，但XHTML需要嚴謹閉合標籤（實際上沒有這裡做為示範）。

Slide 21

Slide 21 text

XML是什麼？ 4. 標籤名稱有所限制 ❌<01_p> ❌<"作者"> XHTML不會遇到這問題，但XML標籤名稱不能以「數字、除了_以外的標點」開頭。

Slide 22

Slide 22 text

XML是什麼？ 5. 標籤名稱有分大小寫 ⭕
❌

常見錯誤，標籤名大小寫有差。

Slide 23

Slide 23 text

XML是什麼？ 6. 標籤名稱不能包含空格 ⭕

❌ 不要說XHTML了，連HTML也不行。

Slide 24

Slide 24 text

XML是什麼？ 7. 屬性的值需要以""標記 HTML時有人不加引號，有人用單引號''，  但XHTML 一律都要用雙引號""。

Slide 25

Slide 25 text

XML是什麼？ 8. 空白會被保留

空白會被保留

盡量減少編輯原稿、InDesign排版時使用空白調整。

Slide 26

Slide 26 text

XML規則如何對應規則？ ② 所有標籤都需要結束（關閉） ③ 所有標籤都要完整以巢狀結構建構 ⑤ 標籤名稱有分大小寫九成錯誤發生於以上三點，但幸好EPUB檢查工具都找得到。然而保留的空白不是錯誤，但會讓排版顯得很醜。不需要強記規則，不推薦手寫製作XHTML；動手做多改就會記得了。

Slide 27

Slide 27 text

Q&A時間 HTML與CSS 用途與XML規則

Slide 28

Slide 28 text

HTML構成與常用標籤從零開始學習HTML結構

Slide 29

Slide 29 text

HTML檔案的構成簡單的概要結構 • 文件檔頭 • （根元素） • •

Slide 30

Slide 30 text

HTML檔案的構成文件檔頭 EPUB 3標準宣告，EPUB 2使用 XHTML 4略有不同。

Slide 31

Slide 31 text

HTML檔案的構成根元素 xmlns為XML namespace，使用的epub字首需要在此宣告才不會變成錯誤。

Slide 32

Slide 32 text

HTML檔案的構成台灣EPUB 3製作指引EPUB 3流式版面範本是EPUB 3中需要修改之處，有時會被閱讀系統使用。

Slide 33

Slide 33 text

HTML檔案的構成書的內容中的內容佔了99%的內容編輯時間。

Slide 34

Slide 34 text

常用標籤標題 • 標籤：

、

• 預設樣式：大字、粗體、加邊界標題是取英文的heading 首字h，預設六層級標題。六層標看似夠用，但其實不大夠，書名、章節就佔去兩組。標題用於不同元素可以之後以CSS做出設計上的差異。

Slide 35

Slide 35 text

常用標籤段落 • 標籤：

• 預設樣式：1rem字級、段落後加邊界段落凸排與縮排使用 CSS配合Class進行設計。段落預設會有間距，記得刪除。縮排可以使用　U+3000 Ideographic Space全形空白來佔位。

Slide 36

Slide 36 text

常用標籤列表 • 標籤：

（項目） • 預設樣式：整體縮排、項目縮排

Slide 37

Slide 37 text

常用標籤圖片與圖說 • 標籤：、< fi gure>、< fi gcaption> • 預設樣式：無並非所有閱讀系統都支援< fi gure>結構 src要注意到路徑如/images/ ../images/ alt=""為必要，最好加入內容說明 < fi gure>

< fi gcaption>圖說

Slide 38

Slide 38 text

常用標籤表格 • 標籤：（整體）、（資料列）、（標題列）、  （資料格） • 預設樣式：沒有邊框，尺寸按內容而定。跨欄可使用屬性colspan、rowspan來設定閱讀系統表現不一，建議使用圖片來處理表格標題一表格標題二表格內容一表格內容二

Slide 39

Slide 39 text

常用標籤 div與span : 區塊與文內的不同 • 標籤：

（區塊）、（文內） • 佔空間且換行使用

、內文元素的樣式指定使用不想換行但希望行為如區塊元素，可以使用 display: inline-block來處理

你真是癩鬼

.mot { display: inline-block; height: 1rem; }

Slide 40

Slide 40 text

常用標籤文內樣式 • 標籤：、、（不推薦）、、粗體、斜體、底線（不推薦）是過去HTML的樣式符號，現在已經不再推薦使用，而建議使用語意標籤。強調與強烈兩種語意標籤也都可以使用 CSS來調整設計。 還是可以用於一定斜體的文字，如英文書名、依然可用於私名號上。

Slide 41

Slide 41 text

EPUB常用 HTML模組註解注印： 1 注文：

注釋內容中的一個段落。

返回符號

可用取代，但得考慮相容性。

Slide 42

Slide 42 text

EPUB常用 HTML模組註解注ㄓㄨˋ 音ㄧㄣ符ㄈㄨˊ 號ㄏㄠˋ 另須配合CSS設計與嵌入字體方能做到完整的顯示，參考：https://cmex-30.github.io/Bopomofo_on_Web/testpage/index.html

Slide 43

Slide 43 text

小結先從整理書的結構製作範本 • HTML 5中還有很多標籤，EPUB 3也推薦使用、等結構標籤，但以上基礎標籤就可以建構一本書的基礎樣式。 • 實作或練習可以先做一本印刷書的內容摘錄，按照書的樣式與結構來做一範本，然後配合CSS來做設計練習。

Slide 44

Slide 44 text

Q&A時間 HTML構成與常用標籤

Slide 45

Slide 45 text

CSS基本概念與設計範例描述性的設計語言

Slide 46

Slide 46 text

CSS長怎樣？一份CSS範本 • CSS構造 • CSS對應方式 • CSS的層疊(cascading)與繼承(inheritance) • CSS選擇器(selector) • CSS常用單位與色彩 • CSS盒狀模型(box model)與縮寫(shorthand)

Slide 47

Slide 47 text

CSS的構造選擇器、特性與值 • 選擇器（selector）：決定CSS與HTML元素，其class與id屬性對應方式與邏輯 • 特性（properties）：CSS的各種特性，分別有定義好的行為與模式 • 值與數值（value）：CSS特性的值與數值，可使用的值為固定或數值選擇器 { 特性: "值"; 特性: 數值; } h1 { text-algn: "center"; font-size: 1.4em; }

Slide 48

Slide 48 text

CSS對應的方式三種方式但只有一種好 ① 在HTML的中連結外部樣式表 ② 在HTML的中以撰寫樣式 ③ 直接在HTML中以屬性寫入樣式 <link rel="stylesheet" type="text/css" href="../style/book-style.css"/> <style> h2 {font-weight: bold;}

置中標題

Slide 49

Slide 49 text

CSS的層疊(cascading)與繼承(inheritance) CSS的兩項重要特性 • 繼承（inheritance）：子元素會繼承上層元素的特性與值。 • 層疊（cascading）：相同特性與值被指定時，最新（下層）的值會覆蓋前者。 p {line-height: 2; } p {line-height: 1.8; } 最終行距會是1.8，行與行間距離為0.8字級。但如果遇到：

段落

行距就是1.5，行與行間的空格為半字級。

Slide 50

Slide 50 text

CSS選擇器對應到HTML元素與屬性 • 基本對應： • 元素（如h1）：直接對應到指定的元素名稱 • class屬性（如.noteref）：對應到.後的class名稱，HTML中可以有相同的 class • id屬性（如#footnote01）：對應到#後的id名稱，HTML中id僅能出現一次 • 進階對應： • 透過各種邏輯關係決定，以下為例：

Slide 51

Slide 51 text

CSS選擇器對應到HTML元素與屬性 • 雙重class（如.class1.class2）：同時具備兩個class的元素才套用 • 特定子元素（如h1 .sub）：在h1中的.sub class套用 • 特定元素的class（如h2.sub）：class為sub的h2元素 • 兩方都指定（如div, p）：同時將特性套用到div與p • 在前者中的元素（如div > p）：在div裡的所有p元素 • 緊接前者的元素（如h2 + p）：在h2後頭的第一個p元素

Slide 52

Slide 52 text

CSS常用單位 EPUB請多用相對單位 • 絕對單位：cm / mm / pt / px等…… • 相對單位：em / rem / % / vw / vh等…… • 推薦使用 em / rem • em：內文字的尺寸，但指定後會成為該元素的預設尺寸 • rem：內文字的尺寸，不會受到改變 h1 { font-size: 1.4em; } h1 {margin-left: 1 (em / rem?); }

Slide 53

Slide 53 text

CSS常用單位 EPUB請多用相對單位 Apple Books Asset Guide 5.2.1.1 https://help.apple.com/itc/booksassetguide/en.lproj/static.html

Slide 54

Slide 54 text

CSS 色彩使用前請注意：台灣也有電子紙閱讀器 • 色彩選擇方式： • HEX 色碼：#000000 ~ #FFFFFF • rgb值：rgb(255, 255, 255) • rgba值：rgba(200, 200, 200, 0.5) • 還有HSL（Hue, Saturation, Lightness）與HSLA。

Slide 55

Slide 55 text

CSS盒狀模型與縮寫內縮邊界、邊框、外邊界與外框 • padding: 內縮邊界 • border: 邊框 • margin: 外邊界 • outline: 外框，緊貼 border，會佔用 margin的空間，少用。

Slide 56

Slide 56 text

CSS盒狀模型與縮寫 CSS 方向與縮寫（shorthand） • 一個數值代表：區塊的上下左右邊界 • 二個數值代表：區塊的上下、左右邊界 • 三個數值代表：區塊的上、左右、下邊界 • 四個數值代表：區塊的上、右、下、左邊界 p {margin: 0; } .box {padding: 1em 0.9em; } blockquote {margin: 2em 0.9em 1em; } h1 {margin: 2rem 1em 0 3.6rem; }

Slide 57

Slide 57 text

CSS盒狀模型與縮寫 CSS 方向與縮寫（shorthand） • 邊界在CSS中有這些語法： • 可以縮寫成： • 或者僅指定一邊： border-width: 1px; border-style: solid; border-color: black; border: 1px solid black; border-right: 1px solid black;

Slide 58

Slide 58 text

範例 CSS參考資料 • CSS的特性與值眾多，時間有限請參考以下網頁： • W3Schools：  https://www.w3schools.com/css/default.asp • Mozilla Developer：  https://developer.mozilla.org/zh-TW/docs/Web/CSS • CanIuse：  https://caniuse.com

Slide 59

Slide 59 text

範例內文 p { font-family: serif; line-height: 1.8; margin: 0; }

Slide 60

Slide 60 text

範例對話 p.dialogue2 { margin-top: 3em; text-indent: -3em; }

Slide 61

Slide 61 text

範例標題 .box { font-family: sans-serif; margin: 0 0.9em; padding: 1em 0.9em; border: 1px solid red; border-radius: 1em; }

Slide 62

Slide 62 text

範例 box h1 { font-family: sans-serif; font-size: 1.4em; margin: 2rem 1rem 0 3rem; }

Slide 63

Slide 63 text

小結 HTML與CSS於出版應用上的鴻溝 • HTML兼顧人讀與機讀，需要完整的結構，傳統出版能印刷出來就好，鉛字印刷時代還需要嚴謹，但電腦排版反而鬆散。 • Word作為原稿工具，實際上善用樣式的人並不多。 • CSS的門檻不高，入門容易，但設計簡潔、精通各種進階機制難。要讓視覺為主的設計師轉換以描述性語言來設計，也許會有障礙。 • 懂CSS的網站設計師對於書籍排版的規則不大了解。