深造篇（修改模版）

### Movable Type 新手手册：深造篇（修改模版）

« 目录

- 深造篇（修改模版）

- 基本精神：体用哲学
- 体：呈现的内容与排放的顺序
- 用：样式与视觉效果
- 百尺竿头：RDF
- 其它事项

# 深造篇（修改模版）

这一章会比较深奥，因为不但会谈到更多更抽象的实做注意事项，而会是一些概念上的注意事项。但是无论如何，仍然希望大家花一点时间读一读，才能够在之后实做的章节里，迅速掌握到处理的原则，而举一反三，加以灵活运用。

- ## 基本精神：体用哲学

MT 的模版系统使得网志的「内容」可以跟「形式」抽离；当你在修改版面安排（形式）的时候，完全不会影响到内容；反之亦然。然而在 MT 的预设模版里，又更进一步地使用了 CSS ，把这个「形式」又拆解成「顺序结构」跟「效果」；前者是 HTML 或 XHTML 的部分，后者则是 CSS 的部分。藉由这样的拆解，你可以重新安置页面中的各个组件，而不改变每个组件的呈现效果；也可以重新设计每个组件的呈现效果，而不会改变页面组件的安置。

像是这样的设计理念，有一个说法称做「模块化」，强调各自独立的合作关系，不会一个地方烂掉就全部烂光光。而这也是你在规划模版的时候所该记在心里面的。

- ## 体：呈现的内容与排放的顺序

首先我们要来讲讲这个 HTML/XHTML 的部分。虽然说，有了 CSS 之力，你可以随意地安置各个组件，几乎可以不要考虑他们的先后关联，都有办法做出整齐漂亮的版面；但是在这里仍旧要强调，逻辑清晰的 HTML/XHTML 才是建构优良页面的基础。

为什么呢？有几个主要原因：

- 对于其它祇读取 HTML/XHTML 的浏览器来说，你所安排的组件顺序几乎就等同于他们所能取得信息的顺序。

对于那些因故无法使用你我所熟知的浏览器的读者来说，他们可能得仰赖其它科技的帮助，或者把网页内容逐一转换成点字、或者改以语音的方式逐一朗诵出来。在这种情况下，如果你的 HTML/XHTML 撰写得调理分明、层次清晰的话，也将能提供他们更多的语境线索。

- 群组管理，维护方便。

把相关的组件放在一起，就可以很方便地套上相同的样式；同时在 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 档案时，你可以这么做：

- 从 HTML 模版里找出要修改的组件

这个组件通常会被包在 <div> 和 </div> 卷标之间，所以你可以在 <div> 卷标里找到像是 class="divclass" 或是 id="divid" 这样的属性。有的时候这样的属性是放在 <img> 卷标里或是其它地方，请自行判断。

- 到 CSS 模版里找到相对应的 class 或 id

如果是 id ，那么在 CSS 里面就会是像 #divid 命名的区块；如果是 class ，那么在 CSS 里面就会是像 .divclass 命名的区块。如果多个 class 使用相同的属性，也可以用 .divclass1, .divclass2, .divclass3 这样子的方法来群组 class 。

- 修改 CSS 属性

每一个 CSS 区块都会以 { 开头、以 } 结束，其中列著许多属性，每一个属性后面都会有 : ，然后才是列著多个不同的参数值，再以 ; 来结束对这一个属性的设定；参数值之间则是以空白来分隔。

另外一个 CSS 的重点是在于栏框的阶层。 CSS 中任何组件预设都是「占满可用空间」的，如果你要更动占用空间的尺寸、位置的话，就得留意这个「页(page) ─ 格(box) ─ 栏(margin) ─ 框(border) ─ 留白(padding) ─ 内容物」的先后关系：

- 页(page)是最大的单位，也是几乎不能够调整的。整个浏览器的可视范围就是一个页；所以你不可能同时使用多个页。

- 一页里面可以有好几个格(box)；通常你可以直接使用像是 top, bottom, left, right 这样的属性来指定格的四个边界；这些数值都会直接参照页的四个边界来计算。

- 一格里面还可以有好几个栏(margin)；通常你可以用像是 margin-top, margin-bottom, margin-left, margin-right 这样的属性来指定栏的四个边界；这些数值都会参照这个栏所在的格的四个边界来计算。

- 每个栏都还可以加框(border)，你可以用 border 系列的属性来指定这些框的颜色、样式等。除了加框之外，框线往内还可以留白(padding)；通常你可以用像是 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

Copyright © 2003, 2004 Jedi. Some Rights Reserved.