这一章会比较深奥,因为不但会谈到更多更抽象的实做注意事项,而会是一些概念上的注意事项。但是无论如何,仍然希望大家花一点时间读一读,才能够在之后实做的章节里,迅速掌握到处理的原则,而举一反三,加以灵活运用。
MT 的模版系统使得网志的「内容」可以跟「形式」抽离;当你在修改版面安排(形式)的时候,完全不会影响到内容;反之亦然。然而在 MT 的预设模版里,又更进一步地使用了 CSS ,把这个「形式」又拆解成「顺序结构」跟「效果」;前者是 HTML 或 XHTML 的部分,后者则是 CSS 的部分。藉由这样的拆解,你可以重新安置页面中的各个组件,而不改变每个组件的呈现效果;也可以重新设计每个组件的呈现效果,而不会改变页面组件的安置。
像是这样的设计理念,有一个说法称做「模块化」,强调各自独立的合作关系,不会一个地方烂掉就全部烂光光。而这也是你在规划模版的时候所该记在心里面的。
首先我们要来讲讲这个 HTML/XHTML 的部分。虽然说,有了 CSS 之力,你可以随意地安置各个组件,几乎可以不要考虑他们的先后关联,都有办法做出整齐漂亮的版面;但是在这里仍旧要强调,逻辑清晰的 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 档案时,你可以这么做:
这个组件通常会被包在 <div> 和 </div> 卷标之间,所以你可以在 <div> 卷标里找到像是 class="divclass" 或是 id="divid" 这样的属性。有的时候这样的属性是放在 <img> 卷标里或是其它地方,请自行判断。
如果是 id ,那么在 CSS 里面就会是像 #divid 命名的区块;如果是 class ,那么在 CSS 里面就会是像 .divclass 命名的区块。如果多个 class 使用相同的属性,也可以用 .divclass1, .divclass2, .divclass3 这样子的方法来群组 class 。
每一个 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 的架构,你才可以使用 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