30天内打造更具亲和力的网站

第一周前言这本书定名为《深入亲和力：在30天内打造更具亲和力的网站》，它回答了两个问题：第一个问题是「为什么该让我的网站更具亲和力？」如果你没有网站的话，你并不是这本书的对象。第二个问题是「该如何让我的网站更具亲和力？」如果你没有被第一个问题的回答所说服，那么你也不会对第二个问题感兴趣。为了回答第一个问题，我要先介绍以下五个人的特徵素描：Jackie、Michael、Bill、Lillian及Marcus。这些人有几个共同点：他们都有著身体上、心理上、以及技术上的障碍，使他们在使用网际网络上较为困难。

虽然这是虚构的，但是他们却都能代表被障碍困扰的真实人们，包括使用网际网络所遇到的状况。

他们在浏览你的网站时都会遭遇到困难。为了回答第二个问题，我会介绍25个可以立刻套用在你的网站上的技巧，让网站更具亲和力。虽然这些概念可以应用在所有网站上，我会把焦点放在几种普及的网志工具(webloggingtools)的实作上。如果你使用的是其它的出版工具或样板系统(templatesystem)，你需要决定如何在那些工具上实作这些建议。每个建议会专注在独立的概念上，解释背后的原因，并指出谁会因为你实作而获益。这也是我们把特徵素描放在前面的原因，因为这把第一个问题的从「为什么我要烦恼这些？」变成「谁因此获益？」，于是我们可以回答「Marcus获益。」「Marcus如何获益？」「好，让我们从这点来看」，如此进行。即使你不是个HTML专家也别紧张。就算你的网站只是自己的网志(weblog)，而且打从你选好样板后就没再碰过它们，也别太担心。在这里我不是要你彻底地重新设计你的网站，诅咒你那些巢状表格，并且把一切转换成XHTML与CSS。只是在跟你聊聊你已有的基础，并利用一些简单而重要的改变让它更好。Jackie、Michael、Bill、Lillian及Marcus也都会因你的体贴而感谢你。第一天：JackieJacquelin（昵称Jackie）和妈妈住在芝加哥伊利诺州的ParkRidge，是个19岁的高中生，成绩优异。她的成绩一部分来自于私人家教的协助，但主要还是因为她的勤奋学习，以及广泛地阅读所致。她所有的课本都是有声书，并使用特殊的录音机来拨放；这种录音机的拨放速度比正常快3倍，却祇会造成一点点失真。她已经失明8年了。Jackie并非天生失明，所以她能理解像色彩这样的视觉概念，而且她仍然会跟妈妈聊到「以前」生活里的色彩。她唯一不谈的是那场害死她爸爸、让她失明的那场车祸；这在她使用「以前」跟「之后」两个词汇时可以看出些许端倪：「就像以前客厅墙壁的那种绿色。」「这像你以前的那件紫色毛衣，不过更亮一点。」诸如此类。由于Jackie努力地调适生活，以致于她的学业进度比同学们慢了两年。今年秋天她将进入芝加哥大学，主修比较文学。她对此相当兴奋，一方面是希望交到新朋友，另一方面则是因为能在线上完成更多课堂作业：阅读课程规划，提出论文，与教授、同学们实时传讯等等。她在高中里的朋友并不多，多半是跟妈妈还有网际网络在一起。她每个月都花超过300美金在有声书、音乐以及一堆小玩意上。虽然有越来越多吸引人的读物能够下载到电子书阅读器里，她大部分的有声书仍然是录音带。她的音乐CD以及那堆小玩意都是从线上零售商买来的。线上购物可未必简单，但跟得自己搭车到卖场、然后等店员来招呼比起来，实在是好太多了。而且线上购物也是少数几件不需要依靠导盲犬的事情。她不喜欢现在这只导盲犬Arthur；它不像之前几只那么优秀。Lancelot跟Guinevere都已经退休了，并且跟她们住在一起。她靠项圈来分辨它们：Arthur的项圈是光滑的、Lancelot的带刺，Guinevere的则有凹槽。跟大部分的盲人一样，Jackie对布拉耶点字法了解不多。她有一台点字卷标机可以帮CD贴卷标，但她没有办法阅读点字书，因为所有的点字书都是用第二级的点字法写的，而她从来没学过。她用最新版的JAWS来线上购物及活动，这是一套能在窗口环境下与InternetExplorer整合的屏幕朗读软体。JAWS使用了先进的电子语音合成器来朗读网站内容，也提供一堆深奥的键盘便捷键来浏览网站。因为Jackie记得所有按键，所以她能用比阅读有声书更快的速度来阅读一个设计良好的网站。第二天：MichaelMichael现年27岁，退休后与女朋友Christine住在长岛的GreatNeck。Michael22岁的时候创立了一家小公司，专门布设超高速光纤电缆。两年后，他在洽当的时机脱手，卖给一家全球性的电讯业集团；同时这家集团也用电话解释给Michael听，让他知道为什么他不能让他那间一个月4000美金的公寓有比56K拨接更好的服务。看来钱能买到权限外的任何东西。Michael眼下的世界跟你所看到的不同。这可不是甚么商业的陈腔滥调或是哲学声明；他看到的世界真的跟你看到的不一样。他是红绿色盲，没有办法分辨红色跟绿色（某些红色看起来会非常深，近似于黑色）。他所有的衣服都标上字母来区分颜色，像是用R代表红色、DG代表深绿等等。他的女朋友设计了一套搭配组合，让他知道哪些衣服可以搭配在一起。他按照这些字母的指示来穿著，也如此表达；但他并不了解其间的差异。当客服人员温言告诉他说他再也不需要工作时，Michael正一如往常地在网络上。现在他退休了，开始把时间都花在蒐集老旧的大型游戏机台上，然后试著把这些游戏机台修好，放进橱柜里、加以详列说明，最后再到拍卖网站上把他们卖掉。事实上大部分的细节都是他的女朋友做的不过其它所有的事都还是Michael在处理的。他还养了一只叫Ralph的雌鼬；因为Christine抱怨说雄鼬的味道太重了，所以他们最后经过了妥协，决定照她的意见。Ralph大部分的时间都拿来在沙发的角落睡觉；不过早上交通颠峰期的时候，它就会坐在窗台上看著窗外的车水马龙。事实上Michael也会。Christine大概是唯一选择继续睡觉的人了。这是专属于他和鼬的独处时间。正如你所料的，Michael的嗜好需要透过大量的线上互动来完成。他得跟那些客户们（不论是过去或是未来所遇到的）、供应商们、机台拥有人以及任何可能在机台零件上有著卓越见解的人打交道。他实在恨透了他的56K（但是实际上祇有28.8K）拨接了，这让他的浏览器也几近爆炸。某些日子里，他会用一个叫Links的纯文字浏览器，这个浏览器就跟其它的图形浏览器一样，可以画出复杂的多栏版面，祇不过祇有文字而已，而没有图片或字形变化。另一些日子里，他也也会用Opera浏览器，因为这个浏览器允许他在背景加载图片，而且可以很方便地开启或关闭图片选项；他多半会因为频宽的考量把他们关闭。今天则是使用Links的日子。红绿灯由上而下分别是红、黄、绿；可是横向的红绿灯位置却不一定，因此相当危险。就跟其它也有色盲的8%美国人一样，Michael其实是偷看了附近其它人的动作，才知道离地最近的是绿灯、最远的是红灯，而中间的是黄灯。第三天：BillBill住在旧金山的一栋小公寓，唯一的亲戚是离他家五哩远的妹妹。他今年62岁，公寓里总是有条不紊，就像要视察前的军营。这是当然的，因为Bill打从18岁就加入军队，从士兵开始不断晋升军阶，并在越战中得到三面勋章。一直到十年前膝盖的伤让他转任文书工作前，他都维持现役职务。他去年罹患了中风而被迫退休，右手臂完全没办法移动，左手则会不由自主地摆动，却没人知道为什么。有500个人参加了他的退休宴会，每个人他都认得。Bill用一台老旧的笔记型计算机跑RedHatLinux操作系统。他用Mozilla浏览网站，并使用Evolution阅读信件。其实他完全不懂这些，这整台计算机（加上里面的软体）都是他那精通计算机的妹妹送的退休礼物。尽管这台老计算机只有13寸屏幕，分辨率还是被固定在1024x768。感谢老天Bill看得到，只是偶尔会找不到读到哪里。从他中风之后就这样，而他妹妹认为这越来越严重了，不过她错了。对他来说最大的恩惠是有个延伸的小方向键盘，让他可以更轻松的用手碰到它们。这个键盘花了$29.99美金，包含$5的邮资。Bill退役前从没上网过，但现在他找到越来越多继续待在网络上的理由。他每天花四个小时去浏览网站以及跟新旧朋友们聊天。由于那些退役同袍的鼓励，以及妹妹在技术上的协助，他发起了关于退役军人权利的邮递论坛。这个论坛已经有200个会员了。令人吃惊地，当Bill把左手稳定放在键盘底部时，只靠移动手指就可以每分钟输入10个字（隔年将会是15个字）。然而他几乎没办法使用鼠标，所以只能靠方向键、跳格键(tabkey)，还有妹妹教他的那一堆令人晕眩的快速键组合。他妹妹也教他如何使用某个特殊的程序，让他可以用方向键来移动光标。但那不但慢得烦人，还会经常发生错误，所以他通常都不为自己找麻烦。虽然他自己还不知道接下来会发生的事：明年这份邮递论坛将会变成一份网志，接下来这份网志还会变成政治活动委员会，并且成为主要的政治力。毕竟政治这回事就是看你认识了多少人，而Bill认识每个人。第四天：Lillian据说Lillian刚从香港搭船移民来美国。其实她是30年前搭飞机来的，不过人们还是如此传颂著。她今年54岁，跟女儿、养子和两岁大的孙子寡居于堪萨斯市，她们大概就花去了她所有的时间了。虽然她的女儿和养子都熟稔于两种语言，但是Lillian的英语还是支支吾吾，不如广东话来得流畅。不跟孙子一起玩的时候，她也会试著读报纸来练英文；她会把报纸摊开在餐桌上，打开天花板上的100瓦大灯，用放大镜慢慢地读。Lillian在一个世界级的电讯业集团里担任行政助理。纯粹为了简化的考量，这个世界级的电讯业集团很凑巧地，也就是那个没办法提供某个住在长岛的二十多岁退休人员高速网络的那一个。不过Lillian并不知道这件事。她们的信息科技部门才刚大规模地转移到WindowsXP和InternetExplorer6的环境里，而且接下来的九个月还会更为乖戾。他们同时采行了新的网际网络安全政策：不准使用Java、不准使用Javascript、不准使用Flash也不准使用ActiveX控制组件，除非经过了他们自己批准。当时他们显然还没有批准任何站台。技术上来说，这表示所有的站台在InternetExplorer的安全性页面里，都是「限制的网站」，所以所有的脚本都被关闭了；你得拥有系统管理权限才有办法把某个站台加入「信任的网站」里。不消说，Lillian自然是没有系统管理权限了。不过她能用19寸的大屏幕来跟信息科技部门的Matt的苦口婆心劝阻相抗衡。他常常想起那一次因为电梯坏掉，所以他得帮Lillian把大屏幕努力扛到楼上去；所幸他很少不耐烦地抱怨这件事。Lillian其实还挺喜欢Matt的，他可以说是那群人当中最善良的一个了，甚至还帮她把InternetExplorer里的字型调到「最大」，好让她女儿网志的字大到能被她阅读；因此她每天都会去看。但是当她问Matt为什么CNN.com的字就没办法调得更大时，Matt激活了技客演说模式，扔出一大堆技术字眼，最后仍旧祇能说他实在无能为力。Lillian好希望可以阅读更多网站；但既然Matt没办法修的话，就没有人有办法。第五天：MarcusMarcus父母吸毒，所以他天生视盲。他早产了三个月，在保温箱里住了六周，祇有10%的机会能够活下来；不过他现在已经31岁了。Marcus在一家AT+T转译中心工作，帮忙在聋人及听人之间转译电话。他们是这样运作的：假设有个聋人或听障的人，我们就先叫她Melissa好了，用她的TDD或计算机拨号到中心来。

Melissa键入她想要交谈的对象的名字和号码；就先假设那个人叫Todd吧。

Marcus就会打电话给Todd，然后告诉他有个叫Melissa从转译中心要打电话给他。

不论Melissa键入了甚么，Marcus都会从他的ALVA可覆新布拉耶点字显示器上读到。任何Melissa输入的字都会被实时地转换成布拉耶点字。

不论Todd说了甚么，Marcus都会以每分钟110字的神速打给Melissa看。无论是Melissa或Todd都不知道（其实也不在乎）Marcus是盲人。唯一的线索就祇有ALVA的针上下移动时所发出的规律噪音，听起来有点像远处打字机所传来的声音。Marcus的眼睛跟大脑之间真的甚么都没有了。虽然如此，每个下午当太阳光从窗户射进他的隔间时，他还是会抱怨著因此头痛不已，然后把百叶窗拉上。Marcus在家里的时候也会拿ALVA搭配全屏幕DOS窗口里的Lynx纯文字浏览器使用。他在家里读这些网页的方法，就跟他工作时的作法一样：用布拉耶点字，一次读一列。他讨厌屏幕朗读软体，就算有一套也不想听；因为他总是习惯一回到家就把收音机转到最大声，直到睡前才关上。当他听著收音机在网络上漫游时，他也会用电话跟其它人聊天。他每周至少都会跟100个人讲过电话；这听起来很不寻常，不过他自己却完全不晓得。如果你曾经玩过「六度分离」这个游戏，试图寻找你跟世界上任何另一个人的关联时，你很可能会发现Marcus就是你的六度亲人之一。他就是那种三姑六婆型的人，即使是最有经验的市场老手也未必能够打断他的话；就是因为有他这种人，所以你的电话公司才会不打算提供无限市内通话的选择。他热衷于告诉亲朋好友们他刚刚看到了多酷的网站。事实上他刻意地使用了「看到」这个字眼，因为他晓得这会让他们觉得不自在。第二周第六天：选择DOCTYPE就像句子的开头会用大写字母一样，HTML也以DOCTYPE开头；这是最基本的文法。谁因此获益？你从中获益了。因为你必须先知道你所使用的HTML版本，才能够在日后的课程中，选择适当的步骤来套用那些技巧。所以请把它找出来，没有的话就加上去。怎么做你可能已经设定好DOCTYPE了。检查你的网页源码，DOCTYPE（如果有的话）应该在很上面，甚至在<html>卷标之前。如果你用了MovableType的预设模版，DOCTYPE也许会是「XHTML1.0Transitional」。这样很好。如果你用的是RadioUserland、Manila或Blogger的预设模版的话，DOCTYPE也许会是「HTML4.01Transitional」。这也很好。其它有效的DOCTYPE像是「HTML4.01Strict」、「XHTML1.0Strict」、「XHTML1.1」等等，也都很好。如果你已经设定好DOCTYPE的话，就不用改它了。但是如果在你源码中的<html>前面没有DOCTYPE的话，就加上这些：<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd">基于技术上的考量，我不想在此深入探讨细节（如果有兴趣的话，请看「延伸阅读」部分）；你可能会发现加入DOCTYPE之后，页面排版有点小变化。如果不幸发生了，你也可以使用折衷的DOCTYPE来代替，就像这样：<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">请注意，网站上所有的页面都必须包含DOCTYPE；所以你得检查所有的模版。MovableType的使用者必须检查「主要索引(MainIndex)」、「主要汇整页面(MasterArchiveIndex)」、「分类汇整(CategoryArchive)」、「时序汇整(Date-BasedArchive)」，以及「单篇汇整(IndividualEntryArchive)」模版，以及你手动建立的其它汇整模版。RadioUserland与Manila的使用者则必须检查「Maintemplate」跟「Homepagetemplate」。Greymatter的使用者则必须检查「MainIndex-RelatedTemplates」、「Archive-RelatedTemplates」，以及「Entry-RelatedTemplates」。Blogger的使用者必须在主要模版加上DOCTYPE。如果你的「Archivetemplate」是分散的页面（就是说，如果在最上方有<html>卷标的话），也需要加上DOCTYPE。你得知道所使用的是HTML4（任何版本）、XHTML1.0（任何版本）还是XHTML1.1。明天你就会知道为什么了。第七天：指定你的语言你当然知道你用的是哪种语言，所以也请告诉你的读者──以及她们所用的软体。谁因此获益？Jackie从中获益了。因为她的屏幕朗读软体(JAWS)必须先知道你所使用的语言，在朗读时才能准确地发音。如果你没有指定，JAWS就会试著猜测你所使用的语言，而它可能猜错；尤其是当你在网页里引述源码或混杂著其它不属于语言的内容时。即使你写的就是英文，Google也从中获益了，当你使用的不是英语时更是如此。根据GoogleZeitgeist的数据显示，50%的Google使用者用英语之外的语言搜寻，而且许多使用者在Googlepreferences设定只搜寻特定的语言。Google自动侦测语系的算法比其它的都好，但是为什么要让Google的工作更加困难呢？怎么做首先你得找出正确的双字元语系码(languagecode)。英文的语系码是「en」、法文的语系码是「fr」、德文是「de」、中文则是「zh」。如果你用的是其它语言，请到这里找找。语系码并没有大小写的分别。现在把语系码放在<html>卷标之前，实际的方法会依你所使用的HTML版本而有所不同。请先确定你的DOCTYPE，然后照著以下的步骤：如果你用的是任一版本的HTML4，就修改你的<html>卷标（如果你用的不是英文，就换上你自己的语系码）：<htmllang="en">如果你用的是任一版本的XHTML1.0，就修改你的<html>卷标（两个地方都要用你的语系码）：<htmlxmlns="/1999/xhtml"lang="en"xml:lang="en">如果你用的是任一版本的XHTML1.1，就修改你的<html>卷标（当然，用你自己的语系码）：<htmlxmlns="/1999/xhtml"xml:lang="en">跟DOCTYPE一样，你也应该在每个页面里指定你所使用的语言。另外也请注意：如果你同一个页面里里使用了一种以上的语言，你也可以在任何组件里指定使用的语言。比方说，如果你的网站(HTML4)主要使用德语，但是你引用了一段英语的文章，那么可以像这样标注：<htmllang="de">

...

<blockquotelang="en">

...

</blockquote>第八天：建立有意义的网页标题你的网站上每个页面，都该有个独一无二且具有意义的页面标题。首页的标题可以就祇是网站名称。时序汇整页面应该包含网站名称、以及这些页面的日期或时序。例如在我的网志上，我就用了像是以「diveintomark/June19,2002」为标题的逐日汇整，以及像是以「diveintomark/June19,2002」为标题的逐周汇整。分类汇整页面应该包含网站名称以及类别名称。例如我所有关于CSS的文章都汇整到一个名为「diveintomark/CSS」的页面里。单篇汇整页面应该包含网站名称以及项目标题。我没有让单篇项目独立出来，但JonathonDelacour有，而且做得很棒。例如他在2002年6月17日发表的Accessibilitymatters，就以「JonathonDelacour:Accessibilitymatters」命名。用哪些标点符号倒是无所谓；不过有一些屏幕朗读软体预设会把每个标点符号都念出来。根据一般原则，过多的标点符号念起来跟它们看起来一样笨。谁因此获益？Jackie从中获益了。因为JAWS有个特别的键盘快速键(INSERT+F10)能显示（并念出）目前所有开启窗口的标题。如果开启的是网页就会念出网页标题。当使用ALT-TAB切换窗口时，它也会念出窗口标题。其它的屏幕朗读软体，像是HomePageReader之类的，则会在加载网页时读出网页标题。Marcus从中获益了。因为Lynx会在第一行显示网页标题，所以Marcus总是可以先用布拉耶点字读到标题。Bill从中获益了。由于中风的关系，他有时候会搞混或是忽然忘记他读的东西。窗口标题列的网页标题就像是个视觉上的锚点，即使是他卷动页面时仍会留在同一地方；所以他总是可以回头看一下标题来唤起记忆。Google从中获益了。因为Google会在搜寻的结果里显示网页标题，而且位于网页标题的关键词会有比较高的排名。这对你来说是好事，尤其是对于那些单篇汇整页面来说更是如此（选个好标题总是没错的）。怎么做MovableType有许多种索引跟汇整的样板。预设的样板已经够有亲和力了；如果你使用了预设的样板，就可以不需要做任何改变。主索引：<title><$MTBlogName$></title>汇整索引：<title><$MTBlogName$>Archives</title>分类汇整：<title><$MTBlogName$>:<$MTArchiveTitle$></title>按时汇整：<title><$MTBlogName$>:<$MTArchiveTitle$></title>单篇汇整：<title><$MTBlogName$>:<$MTEntryTitle$></title>Greymatter有一套类似的模版，但是用了不同的语法。由于Greymatter没有特别用来指定网志名称的变数，所以你得一个个加上去：MainIndexTemplate:<title>MyWeblog</title>ArchiveMasterIndexTemplate:<title>MyWeblogArchives</title>ArchiveLogIndexTemplate:<title>MyWeblog:{{month}}{{year}}</title>EntryPageTemplate:<title>MyWeblog:{{entrysubject}}</title>Manila可以让你设定每日的标题，所以你应该用它来取代日期，毕竟这与内文本身比较相关。HomePageTemplate:<title>{siteName}</title>Template:<title>{siteName}:{title}</title>在Radio就得用些秘诀了。你可以用Radio的巨集语言为时序汇整页面加入日期。请小心地复制并贴上这段巨集；它们之间不应该断行，Radio会在意这点（感谢JakeSavin提供这些步骤）。HomePageTemplate:<title><%title%></title>MainTemplate:<title><%title%><%local(d);ifradio.weblog.file.getArchiveFileDate(radioResponder.fileBeingRendered,@d){":"+string.dateString(d)}else{""}%></title>很遗憾，我不知道要如何自订令人满意的Blogger网页标题。欢迎来信建议。请记住这些祇是建议而已。你可以自己决定是否要在按时汇整页面中加入「汇整」这个字。只要不过量，标点符号的使用并没有太大的关系。你也可以改把网站名称放在结尾；在网页标题里放入网站名称总是不错的；尤其当人们在许多窗口间切换时，这就能提供一些重要的线索。第九天：提供额外的导览协助也许你对于使用<link>卷标来连结样式表这件事并不陌生。但是你知道可以用类似的语法来指出首页及前后页面的关系吗？举例来说，在按时汇整页面里，你可以指出前一天以及后一天的（如果有的话）的文章。如果每则文章项目都有独立的页面的话，你也可以指出前后的项目。<linkrel="home"title="首页"href="http://网址/指到/首页"/>

<linkrel="prev"title="前一页的标题"href="http://前一页/的/网址"/>

<linkrel="next"title="下一页的标题"href="http://下一页/的/网址"/>通常这些链结在图形接口浏览器（例如InternetExplorer）里是看不见的；但是在其它浏览器里则会被显示出来，并且协助使用者浏览你的网站。你也许已经提供几种不同的浏览方式了：逐周或逐月的汇整、最近几篇文章的链结、显示著每日文章的月历等；也有可能在汇整页面上已经有往前后一日（篇）的链结了。这些都很好，请留著它们，然后再多加上这些。谁因此获益？Marcus从中获益了。他的纯文字浏览器Lynx会在页面顶端显示这些额外的导览协助，并显示我们在title属性里指定的内容。当Marcus浏览6月18日的每日汇整页面时，他看到的是：#HomeJune17,2002June19,2002（#可以让Marcus了解这是诠释数据，而不是网页内容。Lynx对于有意义的页面标题也是用一样的处理方式。）Michael从中获益了。因为他的Links纯文字浏览器（别和Marcus的Lynx浏览器搞混了）也会在页面顶端显示这些额外的导览协助，就像这样：Link:home

Link:prev

Link:nextBill从中获益了。因为Mozilla会在网站导览列显示这些额外的导览协助。这类的链结（「home」、「prev」、「next」）会以按钮显示，链结的标题则显示成工具提示(tooltip)。（请注意：网站导览列是在Mozilla0.99版增加的，曾经在1.0版被移除，但在1.1版又被加回来了。在有支持的版本里，你可以从检视选单、显示／隐藏、站台导览列、永远显示来显示）iCab的使用者从中获益了。因为iCab会在工具列上用下拉式选单来显示每个网站连结的标题。怎么做在MovableType的按时汇整模版里，把这几列附加在<head>卷标之后：<linkrel="home"href="<$MTBlogURL$>"title="Home"/>

<MTArchivePrevious>

<linkrel="prev"href="<$MTArchiveLink$>"title="<$MTArchiveTitle$>"/>

</MTArchivePrevious>

<MTArchiveNext>

<linkrel="next"href="<$MTArchiveLink$>"title="<$MTArchiveTitle$>"/>

</MTArchiveNext>再来在单篇汇整模版里，把这几列附加在<head>卷标之后：<linkrel="home"href="<$MTBlogURL$>"title="Home"/>

<MTEntryPrevious>

<linkrel="prev"href="<$MTEntryLink$>"title="<$MTEntryTitle$>"/>

</MTEntryPrevious>

<MTEntryNext>

<linkrel="next"href="<$MTEntryLink$>"title="<$MTEntryTitle$>"/>

</MTEntryNext>在Greymatter的模版里，把这几列附加在<head>卷标之后：<linkrel="home"title="Home"href="{{pageindexlink}}">

<linkrel="prev"title="{{previousentrysubject}}"href="{{entrieswebpath}}/{{previousentrynumberpadded}}.html">

<linkrel="next"title="{{nextentrysubject}}"href="{{entrieswebpath}}/{{nextentrynumberpadded}}.html">SjoerdVisscher提供了一套巨集，可以在Radio里轻松做到这些事。下载导览链结巨集。解开压缩档，并把四个档案(navigationLinks.txt,nextDayLink.txt,prevDayLink.txt,permalinkUrl.txt)复制到Macros数据夹里；按照Windows上的标准安装程序来说，它会被放在C:\ProgramFiles\RadioUserLand\Macros。接著在MainTemplate里，把这一列附加在<head>卷标之后：<%navigationLinks()%>很遗憾地，我不知道要如何在Manila或Blogger里实作令人满意的前后文链结，但是至少你可以在网页的<head>卷标后加上这个链结：<linkrel="home"title="Home"href="http://url/of/your/home/page">第十天：先呈现你的主要内容纯粹祇用CSS来处理版面的主要好处之一，是可以轻松的重新编排HTML源码中各组件的顺序，而不影响到实际的版面。因此当其它数据还在加载时，主要内容早就已经显示出来了。我发现许多网站仍在使用表格来制作版面，所以我为你撰写了这个诀窍。如果你用表格设计版面，对Marcus与Jackie等失明的使用者来说，你放在左侧的浏览列会比主要内容更早显示出来。我不知道怎么形容随之而来的问题，不过你可以自己看看：用表格制作的版面。修改过的版面，这次内文在前面。在图形接口的浏览器上看起来应该一样，但是在Lynx上有著明显的差异。原本的版面在Lynx下的效果。修改过的版面在Lynx下的效果。主要内文会先显示，然后才是导览列。你不需要从头规划整个模版来避免这个问题。我们可以用一些（相对之下）较简单的技术来让主要内文先显示，并且让导览列维持在左侧。我们称这些技术叫「表格秘诀」。谁因此获益？Marcus从中获益了。就跟上面的范例所展示的一样，Lynx会依照HTML源码的顺序显示内容。这代表Marcus每次浏览你的网页时都必须要卷动屏幕来跳过导览列。卷页烂透了。Jackie从中获益了。因为JAWS跟Lynx一样，都会依照HTML源码的顺序显示内容；不过JAWS的情况会更糟，因为Jackie必须要坐著等JAWS念完整个导览列后才能听到真正的内容，而且还没有保证能直接跳到主要内容的方法。（明天我们就会谈到这个问题。）Google从中获益了。越接近顶端的内容，Google会给予越多的加权。这里的顶端不是指看起来的，而是指HTML源码的顶端。实际上许多了解这个技术的人，都参与著搜寻引擎最佳化的研究；对他们来说，网站亲和力反倒是次要的。怎么做用LynxViewer检查你的网站，确定每天的文章都会比导览列先显示。MovableType的预设模版就已经是正确的了；如果你用的是预设的模版，大概就不需要再做任何事情了；不过还是用LynxViewer试试看吧，你会因此对这个议题有更深一层的了解。如果你使用的是Radio的预设模版，也许就需要修改表格，让主要内文放在前面了。这没有办法用复制/贴上的方式做到；你必须钻研自己的模版，并且检视表格的架构。简单版面与修改过的版面展示了基本的技术。用表格制作的版面：<table>

<tr>

<tdvalign="top"align="left"width="25%">

...navigationbar...

</td>

<tdvalign="top"align="left">

...maincontent...

</td>

</tr>

</table>我们做了这样的修改：<table>

<tr>

<!--spacerGIFinupper-leftcell-->

<td><imgsrc="/images/1.gif"width="1"height="1"alt=""></td>

<!--maincontentcellfirst,withrowspan=2-->

<tdvalign="top"align="left"rowspan="2">

...maincontent...

</td>

</tr>

<tr>

<tdvalign="top"align="left"width="25%">

...navigationbar...

</td>

</tr>

</table>第三周第十一天：跳过导览列的链结就算你不想要把模版改成内容在前的样子，至少也该妥协一下，提供跳过导览区的链结。这并不是多完美的解决方案（先把主要的内容放在前面才是王道），但至少是许多站台都愿意采用的权变之策。这个「跳过链结」就跟其它链结一样，其实就祇是标准的<a>卷标；不过我们会用CSS把他隐藏起来，所以你在InternetExplorer或Netscape上完全看不到，也不会影响到你本来的版面设计。谁因此获益？Marcus从中获益了。因为当他浏览这个页面时，Lynx就会显示出这个链结，让他能够跳过导览列，而直接阅读主要的内容。至于这件事的重要性，请参照第十天：先呈现你的主要内容里所举的例子。Jackie从中获益了。因为当他浏览这个页面时，JAWS就会读出这个链结，让他能够跳过导览列，而直接阅读主要的内容。怎么做首先请用LynxViewer来看看你的主页面是不是会把导览列放在主要内容之前。如果你的主要内容更早出现的话，你就不需要用到今天我们所要探讨的诀窍了；放自己一天假，去玩乐吧！现在让我们定义这个跳过链结所要用的CSS样式，让它在视觉性浏览器上消失不见。如果你用了外部样式表的话，就把这个规则加到最后面（如果你用了多重外部样式表的话，请把这个规则加到适用Netscape4的那一个里）。如果你本来是在模版开头的地方使用<style>区段来定义样式的话，就在<style>卷标之后加入这个规则。.skiplink{display:none}接下来是把这个跳过链结直接插入到站台名称和站台描述之后的地方。找不到吗？也许你该搜寻一下相对应的模版变数。MovableType:寻找<$MTBlogTitle$>和<$MTBlogDescription$>。Greymatter:没有特定的模版变数；你应该直接搜寻网站的名称和卷标列。Radi寻找<%siteName%>和<%description%>。Manila:寻找{homePageLink(siteName)}和{tagLine}。Blogger:寻找<$BlogTitle$>。现在找到了吗？切记要在站台名称和描述的正下方插入这个跳过链结：<aclass="skiplink"href="#startcontent">跳过导览列</a>好，现在你还需要设立跳过连结所要指到的锚卷标，理论上也就是指到你的主要内容去。你找不到主要内容吗？别著急，模版变数再度拯救了今天的课程。MovableType:寻找<MTEntries>。Greymatter:在你的MainIndexTemplate里寻找{{logbody}}，然后在你的EntryPageTemplates里寻找{{entrymainbody}}。Radi寻找<%bodytext%>。Manila:寻找{bodytext}。Blogger:寻找<Blogger>。接下来，要使用的锚卷标格式则会因你使用的HTML不同而有所出入。检查一下你的DOCTYPE，然后从底下选一个合适的来用：如果你用的是任何一种HTML4的话，在你的主要内容前面加入这个：<aname="startcontent"></a>如果你用的是任何一种XHTML1.0的话，在你的主要内容前面加入这个：<aname="startcontent"id="startcontent"></a>如果你用的是任何一种XHTML1.1的话，在你的主要内容前面加入这个：<aid="startcontent"></a>你应该在网站上的每一页都提供这样的跳过链结，所以在每个模版里都依样画葫芦，加入这些东西吧。第十二天：安全地使用色彩这个诀窍基本上可以广泛套用到网页设计的各个领域，不过我在此祇会针对网志里的一种常见情形加以说明：链结文字。有两个潜在的问题跟颜色有关。首先，你所使用的链结文字可能跟底色的对比不够明显；任何白色底色上的淡色系文字都很糟，链结文字甚至会就这么消逝于底色之中。同样地，黑色底色上的深色系文字也很惨。事实上这个诀窍不仅适用于链结文字，而是适用于所有的文字；祇不过通常网志上的一般文字都可以很容易的被阅读，倒是链结文字常常一不小心就变得难以阅读。这也就是我要在此提及的原因。第二个潜在的问题是链结装饰。如果你在CSS中重新把链结定义成不同的颜色，那么你最好也要确定除了颜色之外，你还提供了别的线索，像是用粗体字、斜体字或加上底线等，让读者能够加以区辨。否则虽然你的链结文字能够被阅读，但有色盲的读者将无法辨别那是否是一个链结。我们将在后面的小节加以描述。谁因此获益？Michael从中获益了。以下是三种不同的链结装饰组合：正如你所看到的，第一句里的链结采用了预设的组合，会在视觉性浏览器里显示成蓝色/紫色并加上底线。第二个链结套用了两种文字装饰，会显示成红色粗体字（但是不会加上底线）。第三个链结祇有套用一种文字装饰，所以祇会显示成红色。现在这里是相同的三个链结，祇不过这是Michael所看到的样子。如你所见，第一个链结仍然可以被清楚地看到；Michael的色盲并不会影响到蓝色的部分。在第二个句子中，链结的红色褪去了，几乎变成黑色；不过链结本身仍然呈现粗体字，所以Michael仍然可以分辨得出来。第三个链结就出问题了。因为这个链结原本祇能靠红色来分辨，可是现在红色褪成黑色，于是单靠视觉将难以将之与其它寻常文字加以区辨。怎么做如果你要检查你的文字颜色跟背景颜色是否有「显著对比」，你可以用VisCheck来把你的网页仿真成色盲读者所看到的样子。如果你要检查链结装饰的问题会不会发生，你可以在CSS规则里寻找"a"卷标所会用到的样式。举例来说，如果你在CSS里用了下列的规则，那么你的链结将祇能够用红色来加以区辨，这样是不对的：a{

text-decoration:none;

color:red;}你的链结可以沿用红色，但是你得确定你的链结同时也呈现成粗体字、斜体字或加上底线。如果你要让它变成红色粗体字，就祇要加上一列：a{

text-decoration:none;

color:red;

font-weight:bold;/*祇需要加上这一列*/

}第十三天：使用真实链结网页设计的苦难根源乃是「javascript:」链结；这个假链结会在你按下的时候执行一段Javascript程序码。这个问题最常发生于网志用这种链结来在另一个窗口里显示回响。为什么这会是个问题呢？因为有11%的网际网络使用者因为某些原因而不使用Javascript；这同时也包括许多残障的朋友，因为她们所能够使用的浏览器就是不支持。这种假链结对她们来说不能用，你应当改用真实的链结。虽然这个问题很容易描述及修改，但是无论我多么强调这个诀窍的重要性也都不为过。多数问题，像是不提供跳过导览列的「跳过链结」都祇不过会在某种程度上减低可用性罢了，但至少你的页面还能够被读取。但是现在我们所遇到的这个问题，却会让重要的内容几乎完全无法被取得。如果你的回响被藏在某个「javascript:」链结之后，就几乎不存在了。谁因此获益？Marcus从中获益了。因为Lynx并不支持Javascript。Michael从中获益了。因为Links并不支持Javascript。Lillian从中获益了。虽然她用的是InternetExplorer，但是信息部门祇允许某些获准的站台使用Javascript，而把其它站台的Javascript给挡掉了；很不幸地，你的站台并不在这些获准的站台中。Google从中获益了。因为Google会跟著链结来寻找更多内容并加以建立索引，但是它却无法使用「javascript:」链结；因为当它索引网页时并不会执行任何Javascript程序码。怎么做现在MovableType和Radio的预设模版都把这个部分处理好了，所以你无须再做任何处理。检视你的首页并搜寻「javascript:」；如果你完全找不到，那么你也就用不到今天的诀窍了。然而，如果你的MovableType模版包含有像这样的链结：<ahref="javascript:OpenComments(<$MTEntryID$>)">Comments(<$MTEntryCommentCount$>)</a>就请把它改成这样：<ahref="<$MTCGIPath$>mt-comments.cgi?entry_id=<$MTEntryID$>"onclick="OpenComments(<$MTEntryID$>);returnfalse">Comments(<$MTEntryCommentCount$>)</a>在支持Javascript的浏览器里，原来的链结仍会具有相同的作用；因为onclick属性会优先于href属性。所以在新版里，仍然会叫用OpenComments函式，然后弹出新窗口。然而在不支持Javascript的浏览器（还有Google）里，就会完全忽略onclick属性，而祇从href属性来连结，而用同一个窗口来显示评论。如果你因为其它原因而用了javascript:假链结的话，停。停下来。别继续下去，别继续领四千元，或之类的。在你的源码里套用上述的技巧，让不支持Javasript的浏览器至少还有机会能够使用真实链结。第十四天：在链结上加入标题既然网页上充斥著链结，你可能会因此觉得有很多人都知道title属性；不过我真的很少看到它。很多人可能不知道，所有的链结都可以在<a>卷标里用title属性来指定一个标题。这个标题会额外附加到任何你指定的链结文字上；它可以在视觉性浏览器上产生工具提示，而且在非视觉性的浏览器上也一样会有类似的效果。并非所有的链结都该有标题。如果链结文字是某一篇文章的标题，就请不要加上标题；因为链结文字本身应该就足够清楚了。但是如果你阅读链结文字本身时，发现自己在状况外而不知道它会指往何处的话，就加上标题吧。谁因此获益？Jackie从中获益了。因为JAWS提供了一个选项，可以跟著链结文字读出链结标题。（这个选项预设并不会被选取。为了要启用这个功能，Jackie按下了INSERT+V叫出JAWS的冗长选项窗口，然后把"Textlinksverbosity"改成"Alttagortitle"。）Michael从中获益了。因为当她把光标移到某个叫Opera的链结上时，链结的标题会显示在状态列上，同时也以工具提示的样子显示出来。这让他得以决定是否要把频宽花在这个链结上。Lillian从中获益了。因为当她在InternetExplorer里把光标移到链结上时，链结标题就以工具提示的样子显示出来了。Marcus从中获益了。因为当他按下了「l」之后，Lynx就会显示出那一页的链结清单；这份清单同时包含了每个链结的标题（如果有的话）。怎么做每一个链结文字本身并不一定能提供足够的信息，来让读者决定是否要按下那个链结。这个时候你应该加入一个title属性，像这样：在我的导览列上，有一个连到我的统计页面的链结。这个链结的链结文字就祇是Statistics而已，但是title属性却可以提供更多信息：<atitle="referrersandothervisitorstatistics"href="/stats/">Statistics</a>在我的导览列上，有一个连到我的书DiveIntoPython的链结，看起来就像这样：<atitle="FreePythonbookforexperiencedprogrammers"href="/">DiveIntoPython</a>当我用句子里的某个词连结到某一篇文章时，我会试著用title属性来提供更多关于这个链结的信息，像是那篇文章的标题或引述之类的。再举个例子，昨天的诀窍里就包含这个句子：为什么这会是个问题呢？因为<atitle="TheCstatisticsonJavascriptusageinbrowsers,April2002"href="/stats/2002/April/javas.php">有11%的网际网络使用者因为某些原因而不使用Javascript</a>；这同时也包括许多残障的朋友，因为她们所能够使用的浏览器就是不支持。在浏览器里看起来会像这样：为什么这会是个问题呢？因为有11%的网际网络使用者因为某些原因而不使用Javascript；这同时也包括许多残障的朋友，因为她们所能够使用的浏览器就是不支持。切勿滥用title属性。凡事皆适可而止。第十五天：定义快速键HTML有一个鲜为人知的功能，就是在链结及表单里还可以使用accesskey属性，让网页设计师能够定义常用链结或表单区域的快速键。在Windows上，你可以按下ALT+某个便捷键；在Macintosh上则是按下Control+某个便捷键。如果便捷键是被定义在某个链结上的话，你的浏览器就会跟著连结出去；如果是被定义在表单区域的话，你的浏览器就会把焦点一到那个区域里。InternetExplorer从4.0版开始支持便捷键，Netscape则是从6.0版开始支持。比较旧的浏览器就祇会单纯地忽略掉这个属性，所以不会有甚么可怕的影响。虽然那个按键对应到甚么功能并没有一个标准，但是这里还是列出了一些常用的快速键：便捷键1

主页面便捷键2

跳到主要内容（也就是导览列跳过链结）便捷键9

响应谁因此获益？Jackie从中获益了。因为当JAWS读到定义有accesskey的链结时，也会把这个便捷键念出来。举例来说，<ahref="/"accesskey="1">HomepageD</a>这个链结会被JAWS读成「link:Homepage,ALT+1」。所以Jackie可以按下ALT+1来把浏览器焦点移到那个链结，然后再按下ENTER就可以从那个链结连出去。Bill从中获益了。虽然Bill受到中风的影响，没办法有效率地使用鼠标，但是他还可以靠键盘导览以及快速键的帮忙来在页面中移动。便捷键可以帮他非常有效率地跳到常用的链结。Bill能够按下ALT+1，接著Mozilla就会马上连到定义有accesskey="1"的链结去。（注：既然Mozilla不会把便捷键念出来，那么Bill要怎么发现有这个便捷键可以用就会变成一个重要的议题了。我们将在后面讨论到这个诀窍。）怎么做：主页链结MovableType:预设的模版并没有连回主页的链结，所以你应该在站台名称的地方加上链结，并且赋予一个accesskey。在你的模版里搜寻<$MTBlogName$>，然后改成这样：<ahref="<$MTBlogURL$>"style="color:black;text-decoration:none"accesskey="1"><$MTBlogName$></a>Radi在你的模版中搜寻{siteName}。这很有可能已经是某个链结了，就像这样：<ahref="<%radio.macros.weblogUrl()%>"style="color:black;text-decoration:none"><%siteName%></a>所以你祇要在这个链结里加上accesskey属性就行了。像这样：<ahref="<%radio.macros.weblogUrl()%>"style="color:black;text-decoration:none"accesskey="1"><%siteName%></a>Blogger:在你的模版里搜寻<$BlogTitle$>。如果这个卷标已经被<a>卷标关上了的话，就在<a>卷标里加上accesskey="1"属性，就跟前面的Radio一样。如果你的<$BlogTitle$>卷标还没有被<a>卷标关上的话，就用像这样的卷标把它关上（别忘记要插入你自己的主页网址）：<ahref="http://你的/主页的/网址"style="color:black;text-decoration:none"accesskey="1"><$BlogTitle$></a>怎么做：跳过导览链结你是否有提供一个跳过导览列的链结呢？如果有的话，就指定accesskey="2"给它吧。<aclass="skiplink"href="#startcontent"accesskey="2">跳过导览列</a>怎么做：回馈链结你是否有提供连到回馈表单或你的电子邮件住指的链结呢？如果有的话，就指定accesskey="9"给它吧。<ahref="mailtme@"accesskey="9">寄信给我</a>注意：Radio网志通常会有个连到回馈表单的链结（小信封图标），但是这个链结是由巨集所产生的，所以你没办法在上面加上accesskey。请确定你在网站上的每一页都加上了accesskey；这表示你得修改所有相关的模版。第四周第十六天：不要开出新窗口几乎每个网页使用者都知道「上一页」这个按钮。这几乎也是浏览网页的必备动作了。连到某个链结，回到上一页；浏览某个搜寻结果，然后回到上一页。就算是我老爸也知道可以这样用，而他本人现在还因为第一次成功地在「Internet」图标上双击成功而兴奋不已。在所有的主流浏览器里，如果你用了<atarget="_blank">卷标，就会强迫链结开出一个新窗口而让「上一页」按钮失效。这个新窗口不会保有前一个窗口的浏览历程，所以「上一页」按钮将会失去功效。即使是对有10年网页经验的我来说，这都会造成严重的混淆。在2002年的今日人们还会这样子用，实在是太不可思议了。别这样做。别强迫链结开启新窗口。请注意这个诀窍是针对网页设计师所提出的，而非针对网页使用者。如果你想要在你浏览网页的时候开出新窗口，请用后述的方法。在Windows上的InternetExplorer里，按下链结时同时按住Shift键，就可以把连结开到新窗口去。在Netscape6和Mozilla里的话，则是同时按住Control。在Mac上的InternetExplorer里则需要按住Command。（另外像是Opera的某些浏览器，还支持进阶组合键，像是Control+Shift+点选，这样会在背景开出连结的新窗口。）这里的重点在于是否要开出新窗口应该要由使用者来选择，而不是由网页设计师。谁因此获益？Jackie从中获益了。虽然JAWS会在连结开出新窗口时念出「Newbrowserwindow」，但仍然容易在它念出链结文字和新页面内容之间被漏掉。HomePageReader提供了更好的解决方案：每当有新窗口开启时，它就会播放某个指定的声音。另外一个叫WindowEyes的屏幕朗读软体则完全不会提示有新窗口。无论如何，「上一页」按钮就此烂掉。如果Jackie没有听到「newbrowserwindow」的话，她就没办法瞥到工作列上开了两个浏览器窗口了。于是她就得去读整个已开启窗口清单；可能是透过JAWS指定的窗口清单快速键INSERT+F10或标准的ALT+TAB。Lillian从中获益了。因为她的InternetExplorer窗口总是最大化（这样她才看得见），所以新窗口开启的时候也会预设变成最大化。除此之外WindowsXP还会把同一个应用程序的多个窗口群组整理在工作列上，所以在视觉上就更难发现新窗口被开出来了。突然之间，「上一页」按钮莫名其妙地失效了，而Lillian完全不知到为什么会这样。如果你预期她会很高兴地阅读连结后的内容，倒是可以略过这个问题。Bill从中获益了。他妹妹把Mozilla设定成多页浏览模式，所以Bill可以看到分页，然后很快地记住他开的是那个窗口，并且在那些分页间切换（在他灵巧华丽的延伸键盘上用CTRL+PAGEUP和CTRL+PAGEDOWN）。被强迫开出新窗口的连结会开出另外一个全新的Mozilla窗口。这不仅仅会越过分页浏览的偏好，还会让他所以已开启的窗口都不见；因为新的窗口上不会有任何前一个窗口上的分页。怎么做不要用<atarget="_blank">来强迫连结开出新窗口。

如果你一定得要把某个连结开到新窗口，请务必明确地警告读者。这祇是个不理想的权变方案，通常是随著某些「不得与外部内容相关联」的商业政策而来的。举例来说，CNN的「相关站台」页面就是这样。

如果你看到「在新窗口开启链结」核选框，请确定它按照预设值而处于关闭的状态。第十七天：定义头字语我上个月曾经在我自己的网志上用了50个头字语：ADA,ALT,AOL,API,CGI,CMS,CSS,CTRL,DMV,DNS,DTD,EFF,FAQ,FSF,GFDL,GIA,GPL,HTML,IE,IIRC,IIS,IO,KB,KDE,LONGDESC,MB,MSDN,MSN,MT,Mac,NC,OPML,P2P,PGDN,PGUP,PBS,PDF,PONUR,RSS,RU,SOAP,SSN,TDD,US,VNC,W3C,WCAG,WYSIWYG,Win,XHTML,和XML.如果50个你都懂，那实在是可喜可贺；你显然会是成为技术编辑的好材料。否则你就会感激我实际上用了<acronym>卷标把他们逐项加以定义了。把你的光标一到每一个头字语上，看看他们各代表些甚么意思。在现今的浏览器上这都有效，而对于Netscape4之类的则无伤。你应该在任何使用头字语的时候都加以定义，或在每一篇里面至少定义过一次。谁因此获益？Michael从中获益了。因为当Michael把光标滑过头字语的时候，Opera就会用工具提示的方式显示头字语标题。Bill从中获益了。因为Mozilla甚至会自动在头字语底下加上点状底线；当Bill把光标滑过头字语时，Mozilla还会把光标变成光标+问号的形状，并且以工具提示的方式显示头字语标题。（你可以用样式表来覆写掉这个预设的作用，或者用CSS来让其它浏览器也有相似的效果）。Google从中获益了。因为Google不但会用头字语本身做索引，也会用头字语标题来做索引，所以人们就算用完整的拼写当关键词也可以找到你的页面。我希望我也能说Jackie从中获益了，但是她并没有。因为不论JAWS或其它任何目前市面上的屏幕朗读软体都不会念出头文字标题。我希望有朝一日他们将能够有这个功能，那么你就抢先了一步。怎么做当你第一次使用头文字的时候，用一个<acronym>卷标加以标记，像这样：<acronymtitle="cascadingstylesheets">CSS</acronym>Radio的使用者可以用快速键自动地加以标记。从你的Radio主页里，在主导览选单中点选「Shortcuts」然后定义你常用的头文字。举例来说：Name:CSS

Value:<acronymtitle="cascadingstylesheets">CSS</acronym>

(Besuretochangetheinputtypefrom"WYSIWYG"to"Source"soyoucantypetheHTMLdirectly.)然后在你的文章里，祇需要键入"CSS"（包含引号），那么Radio就会自动地按照你所定义的内容加上头文字卷标。怎么做：样式表你还可以用样式表来更换所有头字语看起来的样子。不单单是Radio，这对所有的工具都有效。以下是我在所有的浏览器（而不单单祇是Mozilla）中产生点状底线的规则：acronym{

border-bottom:1pxdottedblack;}这么做还有额外的好处；我用了下面这个规则，所以当打印我的网页时，会自动地把头文字展开成全称。（其实祇有从Mozilla和Opera打印时才有效，不过对于其它浏览器来说是无害的）。acronym:after{

content:"("attr(title)")";

}第十八天：在月历中加上真的标题「可是，」我听到你在哀嚎了，「我的月历已经有个标题了啊！看那边，明明在上面就有年份跟月份了呀，我甚至还用了粗体字耶。」但是如果你有挖掘过你的HTML源码的话，你就会发现你的月历并没有真的标题。它可能祇是一个表格的<td>格子，占满著整个第一列，然后用了CSS规则来让他看起来是粗体字。相较之下，如果你用了真正的<caption>卷标的话，反而简单多了。这样不但在模版里读起来更简单，也可以为你的页面多省下几个位元，在视觉性浏览器里看起来效果也相同，同时还更具亲和力。谁因此获益？Marcus从中获益了。因为Lynx显示标题时，会在前面再加上「CAPTION:」，让他明白这一列是标题，而不是字段标头或表格数据。Jackie间接地获益了。因为用了真正的<caption>卷标能够奠定使用真正表格标头的良好基础；我们将在明天的诀窍中讨论到Jackie到底能从中获益到些甚么。怎么做这个诀窍祇能够适用于支持月历的出版工具（所以Blogger就被排除掉了），同时这个出版工具还要能让你自订产生月历的HTML源码（所以Manila也被排除掉了）。在MovableType中，你的主索引模版里可能有个用来当月历的表格，就像这一个（搜寻「calendarhead」就差不多能找到它了）：<tableborder="0"cellspacing="4"cellpadding="0">

<tr>

<tdcolspan="7"align="center"><spanclass="calendarhead"><$MTDateformat="%B%Y"$></span></td>

</tr>

<tr>

<tdalign="center"><spanclass="calendar">Sun</span></td>

...留著这个表格卷标，但是把表格中第一个<tr>列全部代换成真正的<caption>卷标，就像这样：<tableborder="0"cellspacing="4"cellpadding="0">

<captionclass="calendarhead"><$MTDateformat="%B%Y"$></caption>

<tr>

<tdalign="center"><spanclass="calendar">Sun</span></td>

...剩下来的部分留著别动；我们明天再来加以修改。<caption>卷标里的class属性乃是选用性的；我在这里把他留著，因为这样就可以拿来取代掉预设的MovableType样本，继续用CSS规则来让年份及月份采用粗体字。像这样子用<caption>卷标之后，你的页面看起来仍旧会跟以前一模一样。在Greymatter中的状况仍旧相同，但是模版卷标却不同：<caption>{{monthword}}{{yearyear}}</caption>同样地，祇要你这么做，你就可以用样式表来改变caption的视觉样式。在Radio中，整个过程将会比较复杂，但并非不可能（我得感谢TonyBowden提供了这些指引）。在Radio里，开启实际的Radio应用程序。如果是在Windows的话，从系统列里在小Radio图标上按鼠标右键，然后选择「OpenRadio」。在「Tools」选单里，选择「Developers」，然后选「Jump...」(Control+J)。跳至「system.verbs.builtins.radio.weblog.drawCalendar」（不含引号）。现在到「Edit」选单里，选「FindandReplace」，然后选「Find...」(Control+F)并且寻找「hCalendarTable」。这样应该会展现出绘制启始<table>卷标和假月历标题的源码区块。把这个区块中最后一列（在<tr>卷标中写著monthYearString的那一列）改成这样：add("<caption>"+monthYearString+"</caption>")关闭窗口。你会被询问到是否要编译这个变更，请回答是。如果你想要的话，还可以设定标题的样式。到你的HomePageTemplate（在Prefs页面中）并且新增一个给caption用的样式。以下这个是我自己在用的；在<style>区段中原本包含这些东西：body,td,p{

font-family:verdana,sans-serif;

font-size:12p