[活字印刷] MT 新手手冊 - 深造篇

第四章：深造篇（修改模版） — 模版的精神

這一章會比較深奧，因為不但會談到更多更抽象的實做注意事項，而會是一些概念上的注意事項。但是無論如何，仍然希望大家花一點時間讀一讀，纔能夠在之後實做的章節裡，迅速掌握到處理的原則，而舉一反三，加以靈活運用。

基本精神：體用哲學

MT 的模版系統使得網誌的「內容」可以跟「形式」抽離；當妳在修改版面安排（形式）的時候，完全不會影響到內容；反之亦然。然而在 MT 的預設模版裡，又更進一步地使用了 CSS ，把這個「形式」又拆解成「順序結構」跟「效果」；前者是 HTML 或 XHTML 的部分，後者則是 CSS 的部分。藉由這樣的拆解，妳可以重新安置頁面中的各個元件，而不改變每個元件的呈現效果；也可以重新設計每個元件的呈現效果，而不會改變頁面元件的安置。

像是這樣的設計理念，有一個說法稱做「模組化」，強調各自獨立的合作關係，不會一個地方爛掉就全部爛光光。而這也是妳在規劃模版的時候所該記在心裡面的。

體：呈現的內容與排放的順序

首先我們要來講講這個 HTML/XHTML 的部分。雖然說，有了 CSS 之力，妳可以隨意地安置各個元件，幾乎可以不要考慮他們的先後關聯，都有辦法做出整齊漂亮的版面；但是在這裡仍舊要強調，邏輯清晰的 HTML/XHTML 纔是建構優良頁面的基礎。

為什麼呢？有幾個主要原因：

  1. 對於其他祇讀取 HTML/XHTML 的瀏覽器來說，妳所安排的元件順序幾乎就等同於他們所能取得資訊的順序。
    2. 對於那些因故無法使用妳我所熟知的瀏覽器的讀者來說，他們可能得仰賴其他科技的幫助，或者把網頁內容逐一轉換成點字、或者改以語音的方式逐一朗誦出來。在這種情況下，如果妳的 HTML/XHTML 撰寫得調理分明、層次清晰的話，也將能提供他們更多的語境線索。
  2. 群組管理，維護方便。
    3. 把相關的元件放在一起，就可以很方便地套上相同的樣式；同時在 HTML/XHTML 源碼及網頁實際輸出上取得相似性的話，也比較能方便妳日後加以維護修改的工作。

切記，編撰 HTML/XHTML 模版的時候，妳應當揚棄以往使用表格來排版的方式，而把排版的工作留給 CSS 來處理。表格應剛祇在真的是「表格」的情況下纔使用。

撰寫 HTMLXHTML 模版的時候，妳可能會需要具備基本的 HTML/XHTML 能力，另外可以參考 Movable Type 使用手冊：模版標籤來插入其他 MT 標籤；如果妳之前也有使用過其他的網誌系統或者出版管理系統，而且也用那些系統製作過模版的話，妳也許會想參考一下 Movable Type 模版；這份文件裡有對於不同系統間模版差異的解釋，也有著簡單的模版作用機制說明，對於編撰模版來說，一定有所幫助。

如果想要做出比好還要好的 HTML/XHTML 模版，也應該留意 Accessibility(親和力/無障礙) 的議題。妳可以看一下 W3C Web Accessibility Initiative 的內容（有人正在把它翻譯成中文版）；另外也有幾份不錯而簡短的文件該讀一讀，像是 hlb 正在翻譯的 Dive Into Accessibility 就是一本分量輕薄的小書，可以幫助妳在三十天內讓網頁更棒。

此外，妳也可以看一看我寫的這一篇「我的網頁哲學」，裡面闡述著我自己的編撰理念。

當妳寫出 HTML/XHTML 模版後，也可以用 W3C MarkUp Validation Service 來驗證看看是不是有語法上的瑕疵；通常要修改這些瑕疵都會耗上大量的時間精力，但是卻可以幫助妳把 HTML/XHTML 寫得更合邏輯；事實上，這也可以鍛鍊妳的 HTML/XHTML 功力。

用：樣式與視覺效果

CSS 是另外一門大學問；舉凡字形變化、邊框留白、顏色圖片乃至於游標音效，都幾乎可以透過 CSS 來達成。除此之外，可重複利用也是另一個 CSS 的特色；祇要妳規劃得當，就可以讓同一類的 HTML/XHTML 元件去取用相同的屬性變化，毫不囉唆。

網路上可以找到的中文 CSS 相關文鍵不特別多，從（又是） hlb 翻譯的CSS實務排版技巧、秘訣與技術開始著手。大致上當妳一開始祇能夠修改既有的 CSS 檔案時，妳可以這麼做：

  1. 從 HTML 模版裡找出要修改的元件
    2. 這個元件通常會被包在 <div> 和 </div> 標籤之間，所以妳可以在 <div> 標籤裡找到像是 class="divclass" 或是 id="divid" 這樣的屬性。有的時候這樣的屬性是放在 <img> 標籤裡或是其他地方，請自行判斷。
  2. 到 CSS 模版裡找到相對應的 class 或 id
    3. 如果是 id ，那麼在 CSS 裡面就會是像 #divid 命名的區塊；如果是 class ，那麼在 CSS 裡面就會是像 .divclass 命名的區塊。如果多個 class 使用相同的屬性，也可以用 .divclass1, .divclass2, .divclass3 這樣子的方法來群組 class 。
  3. 修改 CSS 屬性
    4. 每一個 CSS 區塊都會以 { 開頭、以 } 結束，其中列著許多屬性，每一個屬性後面都會有 : ，然後纔是列著多個不同的參數值，再以 ; 來結束對這一個屬性的設定；參數值之間則是以空白來分隔。

另外一個 CSS 的重點是在於欄框的階層。 CSS 中任何元件預設都是「佔滿可用空間」的，如果妳要更動佔用空間的尺寸、位置的話，就得留意這個「頁(page) — 格(box) — 欄(margin) — 框(border) — 留白(padding) — 內容物」的先後關係：

頁(page)是最大的單位，也是幾乎不能夠調整的。整個瀏覽器的可視範圍就是一個頁；所以妳不可能同時使用多個頁。

一頁裡面可以有好幾個格(box)；通常妳可以直接使用像是 top, bottom, left, right 這樣的屬性來指定格的四個邊界；這些數值都會直接參照頁的四個邊界來計算。

一格裡面還可以有好幾個欄(margin)；通常妳可以用像是 margin-top, margin-bottom, margin-left, margin-right 這樣的屬性來指定欄的四個邊界；這些數值都會參照這個欄所在的格的四個邊界來計算。

每個欄都還可以加框，妳可以用 border 系列的屬性來指定這些框的顏色、樣式等。除了加框之外，框線往內還可以留白；通常妳可以用像是 padding-top, padding-bottom, padding-left, padding-right 這樣的屬性來指定四邊各要留多少空間，其內剩下來的區域纔是內容物所會佔用的空間。

通常當妳很高興地安排完一整套的 CSS 欄框排版之後，很有可能出乎意料（或意料之中？）地發現，瀏覽器所畫出來的樣子跟妳原先所設想的完全不同！所以在嘗試及除錯的階段，妳可以先暫時地使用粗而明顯的邊框，來觀察看看到底瀏覽器把妳的欄框放到哪裡去了。以下是一個除錯用邊框的範例： 

border: red solid 10px;
妳可以等位置擺對了之後，再把這個邊框改回妳想要的樣子（或者把它去掉，如果妳不想要有邊框的話）。

大致說來，妳可以任意地把玩 CSS 的各種屬性，無須擔心會損毀妳的內容跟架構。所以，盡情享樂吧！

當妳寫出 CSS 模版後，也可以用 W3C CSS Validation Service 來驗證看看是不是有語法上的瑕疵。好消息是，這應該會比 HTML/XHTML 的驗證容易通過得多了。

另外還有一個壞消息：目前號稱市場佔有率最高的 IE 徹底霸道，不遵守 W3C CSS 標準；所以妳可能祇需要花 20% 的時間就可以做出漂亮的版面，卻要再花上 80% 的時間來處理 IE 的相容性。

額外給華文世界使用者的資訊： KKMan 的結果會更糟。

百尺竿頭：RDF

RDF 的用途是用來描述妳所能夠提供給其他人的資訊有哪些用的。透過 RDF 的架構，妳纔可以使用 RSS 來跟其他站台串聯彙整。

如果妳對此毫無理解，那倒也沒有關係；因為 MT 內附的 RDF 模版其實已足堪用了。妳唯一應當注意的事情是，確定裡面關於內容語言的描述是否正確。如果妳的網誌內容是繁體中文，請確定妳用了 <dc:language>zh-tw</dc:language>(RSS 1.0) 或 <language>zh-tw</language>(RSS 0.91)。

至於更深入的細節，則建議可以參考一下 Resource Description Framework (RDF) / W3C Semantic Web Activity 以及 RDF Site Summary (RSS) 1.0

jedi.org: