January 25, 2003

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

第四章:深造篇(修改模版) ─ 模版的精神

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


基本精神:體用哲學

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

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


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

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

為什麼呢?有幾個主要原因:

  1. 對於其他祇讀取 HTML/XHTML 的瀏覽器來說,妳所安排的元件順序幾乎就等同於他們所能取得資訊的順序。
  2. 對於那些因故無法使用妳我所熟知的瀏覽器的讀者來說,他們可能得仰賴其他科技的幫助,或者把網頁內容逐一轉換成點字、或者改以語音的方式逐一朗誦出來。在這種情況下,如果妳的 HTML/XHTML 撰寫得調理分明、層次清晰的話,也將能提供他們更多的語境線索。
  3. 群組管理,維護方便。
  4. 把相關的元件放在一起,就可以很方便地套上相同的樣式;同時在 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> 標籤裡或是其他地方,請自行判斷。
  3. 到 CSS 模版裡找到相對應的 class 或 id
  4. 如果是 id ,那麼在 CSS 裡面就會是像 #divid 命名的區塊;如果是 class ,那麼在 CSS 裡面就會是像 .divclass 命名的區塊。如果多個 class 使用相同的屬性,也可以用 .divclass1, .divclass2, .divclass3 這樣子的方法來群組 class 。
  5. 修改 CSS 屬性
  6. 每一個 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

所發表
[創用 CC 授權條款]
MT 新手手冊 - 深造篇〉由 Jedi 製作,所有內容如無特別聲明,一律以創用 CC 姓名標示 3.0 台灣版授權條款釋出。
相關文章:
    歷史上的今天:
    迴響
    給我迴響吧!
    個人資訊








    是否記住個人資訊?



    請依上圖輸入檢核碼:
    迴響





    Jedi.org: 部落格 | Weblog | 三太子 | 討論 | 網頁親和力 | 深入親和力 | 簡報原力:AV | 履歷 | @ | Flickr | tumblr | NSFW