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

《30天内打造更具亲和力的网站》由会员分享，可在线阅读，更多相关《30天内打造更具亲和力的网站（51页珍藏版）》请在装配图网上搜索。

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

2、站时都会遭遇到困难。为了回答第二个问题，我会介绍 25 个可以立刻套用在你的网站上的技巧，让网站更具亲和力。虽然这些概念可以应用在所有网站上，我会把焦点放在几种普及的网志工具 (weblogging tools) 的实作上。如果你使用的是其它的出版工具或样板系统 (template system) ，你需要决定如何在那些工具上实作这些建议。每个建议会专注在独立的概念上，解释背后的原因，并指出谁会因为你实作而获益。这也是我们把特徵素描放在前面的原因，因为这把第一个问题的从为什么我要烦恼这些？变成谁因此获益？，于是我们可以回答Marcus 获益。Marcus 如何获益？好，让我们从这点来看.，如此

3、进行。即使你不是个 HTML 专家也别紧张。就算你的网站只是自己的网志 (weblog) ，而且打从你选好样板后就没再碰过它们，也别太担心。在这里我不是要你彻底地重新设计你的网站，诅咒你那些巢状表格，并且把一切转换成 XHTML 与 CSS。只是在跟你聊聊你已有的基础，并利用一些简单而重要的改变让它更好。Jackie、Michael、Bill、Lillian 及 Marcus 也都会因你的体贴而感谢你。第一天：JackieJacquelin （昵称 Jackie ）和妈妈住在芝加哥伊利诺州的 Park Ridge ，是个 19 岁的高中生，成绩优异。她的成绩一部分来自于私人家教的协助，但主要还

4、是因为她的勤奋学习，以及广泛地阅读所致。她所有的课本都是有声书，并使用特殊的录音机来拨放；这种录音机的拨放速度比正常快 3 倍，却祇会造成一点点失真。她已经失明 8 年了。Jackie 并非天生失明，所以她能理解像色彩这样的视觉概念，而且她仍然会跟妈妈聊到以前生活里的色彩。她唯一不谈的是那场害死她爸爸、让她失明的那场车祸；这在她使用以前跟之后两个词汇时可以看出些许端倪：就像以前客厅墙壁的那种绿色。这像你以前的那件紫色毛衣，不过更亮一点。诸如此类。由于 Jackie 努力地调适生活，以致于她的学业进度比同学们慢了两年。今年秋天她将进入芝加哥大学，主修比较文学。她对此相当兴奋，一方面是希望交到新朋

5、友，另一方面则是因为能在线上完成更多课堂作业：阅读课程规划，提出论文，与教授、同学们实时传讯等等。她在高中里的朋友并不多，多半是跟妈妈还有网际网络在一起。她每个月都花超过 300 美金在有声书、音乐以及一堆小玩意上。虽然有越来越多吸引人的读物能够下载到电子书阅读器里，她大部分的有声书仍然是录音带。她的音乐 CD 以及那堆小玩意都是从线上零售商买来的。线上购物可未必简单，但跟得自己搭车到卖场、然后等店员来招呼比起来，实在是好太多了。而且线上购物也是少数几件不需要依靠导盲犬的事情。她不喜欢现在这只导盲犬 Arthur ；它不像之前几只那么优秀。 Lancelot 跟 Guinevere 都已经退休

6、了，并且跟她们住在一起。她靠项圈来分辨它们： Arthur 的项圈是光滑的、 Lancelot 的带刺， Guinevere 的则有凹槽。跟大部分的盲人一样，Jackie 对布拉耶点字法了解不多。她有一台点字卷标机可以帮 CD 贴卷标，但她没有办法阅读点字书，因为所有的点字书都是用第二级的点字法写的，而她从来没学过。她用最新版的 JAWS 来线上购物及活动，这是一套能在窗口环境下与 Internet Explorer 整合的屏幕朗读软体。 JAWS 使用了先进的电子语音合成器来朗读网站内容，也提供一堆深奥的键盘便捷键来浏览网站。因为 Jackie 记得所有按键，所以她能用比阅读有声书更快的速度

7、来阅读一个设计良好的网站。第二天：MichaelMichael 现年 27 岁，退休后与女朋友 Christine 住在长岛的 Great Neck 。 Michael 22 岁的时候创立了一家小公司，专门布设超高速光纤电缆。两年后，他在洽当的时机脱手，卖给一家全球性的电讯业集团；同时这家集团也用电话解释给 Michael 听，让他知道为什么他不能让他那间一个月 4000 美金的公寓有比 56K 拨接更好的服务。看来钱能买到权限外的任何东西。Michael 眼下的世界跟你所看到的不同。这可不是甚么商业的陈腔滥调或是哲学声明；他看到的世界真的跟你看到的不一样。他是红绿色盲，没有办法分辨红色跟绿色

8、（某些红色看起来会非常深，近似于黑色）。他所有的衣服都标上字母来区分颜色，像是用 R 代表红色、 DG 代表深绿等等。他的女朋友设计了一套搭配组合，让他知道哪些衣服可以搭配在一起。他按照这些字母的指示来穿著，也如此表达；但他并不了解其间的差异。当客服人员温言告诉他说他再也不需要工作时， Michael 正一如往常地在网络上。现在他退休了，开始把时间都花在蒐集老旧的大型游戏机台上，然后试著把这些游戏机台修好，放进橱柜里、加以详列说明，最后再到拍卖网站上把他们卖掉。事实上大部分的细节都是他的女朋友做的不过其它所有的事都还是 Michael 在处理的。他还养了一只叫 Ralph 的雌鼬；因为 Chr

9、istine 抱怨说雄鼬的味道太重了，所以他们最后经过了妥协，决定照她的意见。 Ralph 大部分的时间都拿来在沙发的角落睡觉；不过早上交通颠峰期的时候，它就会坐在窗台上看著窗外的车水马龙。事实上 Michael 也会。 Christine 大概是唯一选择继续睡觉的人了。这是专属于他和鼬的独处时间。正如你所料的， Michael 的嗜好需要透过大量的线上互动来完成。他得跟那些客户们（不论是过去或是未来所遇到的）、供应商们、机台拥有人以及任何可能在机台零件上有著卓越见解的人打交道。他实在恨透了他的 56K （但是实际上祇有 28.8K ）拨接了，这让他的浏览器也几近爆炸。某些日子里，他会用一个叫

10、 Links 的纯文字浏览器，这个浏览器就跟其它的图形浏览器一样，可以画出复杂的多栏版面，祇不过祇有文字而已，而没有图片或字形变化。另一些日子里，他也也会用 Opera 浏览器，因为这个浏览器允许他在背景加载图片，而且可以很方便地开启或关闭图片选项；他多半会因为频宽的考量把他们关闭。今天则是使用 Links 的日子。红绿灯由上而下分别是红、黄、绿；可是横向的红绿灯位置却不一定，因此相当危险。就跟其它也有色盲的 8% 美国人一样， Michael 其实是偷看了附近其它人的动作，才知道离地最近的是绿灯、最远的是红灯，而中间的是黄灯。第三天：BillBill 住在旧金山的一栋小公寓，唯一的亲戚是离他

11、家五哩远的妹妹。他今年 62 岁，公寓里总是有条不紊，就像要视察前的军营。这是当然的，因为 Bill 打从 18 岁就加入军队，从士兵开始不断晋升军阶，并在越战中得到三面勋章。一直到十年前膝盖的伤让他转任文书工作前，他都维持现役职务。他去年罹患了中风而被迫退休，右手臂完全没办法移动，左手则会不由自主地摆动，却没人知道为什么。有 500 个人参加了他的退休宴会，每个人他都认得。Bill 用一台老旧的笔记型计算机跑 Red Hat Linux 操作系统。他用 Mozilla 浏览网站，并使用 Evolution 阅读信件。其实他完全不懂这些，这整台计算机（加上里面的软体）都是他那精通计算机的妹妹送

12、的退休礼物。尽管这台老计算机只有 13 寸屏幕，分辨率还是被固定在 1024x768 。感谢老天 Bill 看得到，只是偶尔会找不到读到哪里。从他中风之后就这样，而他妹妹认为这越来越严重了，不过她错了。对他来说最大的恩惠是有个延伸的小方向键盘，让他可以更轻松的用手碰到它们。这个键盘花了 $29.99 美金，包含 $5 的邮资。Bill 退役前从没上网过，但现在他找到越来越多继续待在网络上的理由。他每天花四个小时去浏览网站以及跟新旧朋友们聊天。由于那些退役同袍的鼓励，以及妹妹在技术上的协助，他发起了关于退役军人权利的邮递论坛。这个论坛已经有 200 个会员了。令人吃惊地，当 Bill 把左手稳定

13、放在键盘底部时，只靠移动手指就可以每分钟输入 10 个字（隔年将会是 15 个字）。然而他几乎没办法使用鼠标，所以只能靠方向键、跳格键 (tab key) ，还有妹妹教他的那一堆令人晕眩的快速键组合。他妹妹也教他如何使用某个特殊的程序，让他可以用方向键来移动光标。但那不但慢得烦人，还会经常发生错误，所以他通常都不为自己找麻烦。虽然他自己还不知道接下来会发生的事：明年这份邮递论坛将会变成一份网志，接下来这份网志还会变成政治活动委员会，并且成为主要的政治力。毕竟政治这回事就是看你认识了多少人，而 Bill 认识每个人。第四天：Lillian据说 Lillian 刚从香港搭船移民来美国。其实她是 3

14、0 年前搭飞机来的，不过人们还是如此传颂著。她今年 54 岁，跟女儿、养子和两岁大的孙子寡居于堪萨斯市，她们大概就花去了她所有的时间了。虽然她的女儿和养子都熟稔于两种语言，但是 Lillian 的英语还是支支吾吾，不如广东话来得流畅。不跟孙子一起玩的时候，她也会试著读报纸来练英文；她会把报纸摊开在餐桌上，打开天花板上的 100 瓦大灯，用放大镜慢慢地读。Lillian 在一个世界级的电讯业集团里担任行政助理。纯粹为了简化的考量，这个世界级的电讯业集团很凑巧地，也就是那个没办法提供某个住在长岛的二十多岁退休人员高速网络的那一个。不过 Lillian 并不知道这件事。她们的信息科技部门才刚大规模地

15、转移到 Windows XP 和 Internet Explorer 6 的环境里，而且接下来的九个月还会更为乖戾。他们同时采行了新的网际网络安全政策：不准使用 Java 、不准使用 Javascript 、不准使用 Flash 也不准使用 ActiveX 控制组件，除非经过了他们自己批准。当时他们显然还没有批准任何站台。技术上来说，这表示所有的站台在 Internet Explorer 的安全性页面里，都是限制的网站，所以所有的脚本都被关闭了；你得拥有系统管理权限才有办法把某个站台加入信任的网站里。不消说， Lillian 自然是没有系统管理权限了。不过她能用 19 寸的大屏幕来跟信息科技部

16、门的 Matt 的苦口婆心劝阻相抗衡。他常常想起那一次因为电梯坏掉，所以他得帮 Lillian 把大屏幕努力扛到楼上去；所幸他很少不耐烦地抱怨这件事。 Lillian 其实还挺喜欢 Matt 的，他可以说是那群人当中最善良的一个了，甚至还帮她把 Internet Explorer 里的字型调到最大，好让她女儿网志的字大到能被她阅读；因此她每天都会去看。但是当她问 Matt 为什么 CNN.com 的字就没办法调得更大时， Matt 激活了技客演说模式，扔出一大堆技术字眼，最后仍旧祇能说他实在无能为力。Lillian 好希望可以阅读更多网站；但既然 Matt 没办法修的话，就没有人有办法。第五天

17、：MarcusMarcus 父母吸毒，所以他天生视盲。他早产了三个月，在保温箱里住了六周，祇有 10% 的机会能够活下来；不过他现在已经 31 岁了。Marcus 在一家 AT+T 转译中心工作，帮忙在聋人及听人之间转译电话。他们是这样运作的：假设有个聋人或听障的人，我们就先叫她 Melissa 好了，用她的 TDD 或计算机拨号到中心来。 Melissa 键入她想要交谈的对象的名字和号码；就先假设那个人叫 Todd 吧。 Marcus 就会打电话给 Todd ，然后告诉他有个叫 Melissa 从转译中心要打电话给他。 不论 Melissa 键入了甚么， Marcus 都会从他的 ALVA

18、可覆新布拉耶点字显示器 上读到。任何 Melissa 输入的字都会被实时地转换成布拉耶点字。 不论 Todd 说了甚么， Marcus 都会以每分钟 110 字的神速打给 Melissa 看。无论是 Melissa 或 Todd 都不知道（其实也不在乎） Marcus 是盲人。唯一的线索就祇有 ALVA 的针上下移动时所发出的规律噪音，听起来有点像远处打字机所传来的声音。Marcus 的眼睛跟大脑之间真的甚么都没有了。虽然如此，每个下午当太阳光从窗户射进他的隔间时，他还是会抱怨著因此头痛不已，然后把百叶窗拉上。Marcus 在家里的时候也会拿 ALVA 搭配全屏幕 DOS 窗口里的 Lynx

19、纯文字浏览器使用。他在家里读这些网页的方法，就跟他工作时的作法一样：用布拉耶点字，一次读一列。他讨厌屏幕朗读软体，就算有一套也不想听；因为他总是习惯一回到家就把收音机转到最大声，直到睡前才关上。当他听著收音机在网络上漫游时，他也会用电话跟其它人聊天。他每周至少都会跟 100 个人讲过电话；这听起来很不寻常，不过他自己却完全不晓得。如果你曾经玩过六度分离这个游戏，试图寻找你跟世界上任何另一个人的关联时，你很可能会发现 Marcus 就是你的六度亲人之一。他就是那种三姑六婆型的人，即使是最有经验的市场老手也未必能够打断他的话；就是因为有他这种人，所以你的电话公司才会不打算提供无限市内通话的选择。他

20、热衷于告诉亲朋好友们他刚刚看到了多酷的网站。事实上他刻意地使用了看到这个字眼，因为他晓得这会让他们觉得不自在。第二周第六天：选择 DOCTYPE就像句子的开头会用大写字母一样， HTML 也以 DOCTYPE 开头；这是最基本的文法。谁因此获益？你从中获益了。因为你必须先知道你所使用的 HTML 版本，才能够在日后的课程中，选择适当的步骤来套用那些技巧。所以请把它找出来，没有的话就加上去。怎么做你可能已经设定好 DOCTYPE 了。检查你的网页源码， DOCTYPE （如果有的话）应该在很上面，甚至在 卷标之前。 如果你用了 Movable Type 的预设模版， DOCTYPE 也许会是 X

21、HTML 1.0 Transitional 。这样很好。 如果你用的是 Radio Userland 、 Manila 或 Blogger 的预设模版的话， DOCTYPE 也许会是 HTML 4.01 Transitional 。这也很好。 其它有效的 DOCTYPE 像是 HTML 4.01 Strict 、 XHTML 1.0 Strict 、 XHTML 1.1 等等，也都很好。 如果你已经设定好 DOCTYPE 的话，就不用改它了。但是如果在你源码中的 前面没有 DOCTYPE 的话，就加上这些：基于技术上的考量，我不想在此深入探讨细节（如果有兴趣的话，请看延伸阅读部分）；你可能会发

22、现加入 DOCTYPE 之后，页面排版有点小变化。如果不幸发生了，你也可以使用折衷的 DOCTYPE 来代替，就像这样：请注意，网站上所有的页面都必须包含 DOCTYPE ；所以你得检查所有的模版。 Movable Type 的使用者必须检查主要索引 (Main Index) 、主要汇整页面 (Master Archive Index) 、分类汇整 (Category Archive) 、时序汇整 (Date-Based Archive) ，以及单篇汇整 (Individual Entry Archive) 模版，以及你手动建立的其它汇整模版。 Radio Userland 与 Manila

23、的使用者则必须检查 Main template 跟 Home page template 。 Greymatter 的使用者则必须检查 Main Index-Related Templates 、 Archive-Related Templates ，以及 Entry-Related Templates 。 Blogger 的使用者必须在主要模版加上 DOCTYPE 。如果你的 Archive template 是分散的页面（就是说，如果在最上方有 卷标的话），也需要加上 DOCTYPE 。 你得知道所使用的是 HTML 4 （任何版本）、 XHTML 1.0 （任何版本）还是 XHTML 1

24、.1 。明天你就会知道为什么了。第七天：指定你的语言你当然知道你用的是哪种语言，所以也请告诉你的读者以及她们所用的软体。谁因此获益？ Jackie 从中获益了。因为她的屏幕朗读软体 (JAWS) 必须先知道你所使用的语言，在朗读时才能准确地发音。如果你没有指定， JAWS 就会试著猜测你所使用的语言，而它可能猜错；尤其是当你在网页里引述源码或混杂著其它不属于语言的内容时。 即使你写的就是英文， Google 也从中获益了，当你使用的不是英语时更是如此。根据 Google Zeitgeist 的数据显示，50% 的 Google 使用者用英语之外的语言搜寻，而且许多使用者在 Google pre

25、ferences 设定只搜寻特定的语言。Google 自动侦测语系的算法比其它的都好，但是为什么要让 Google 的工作更加困难呢？ 怎么做首先你得找出正确的双字元语系码 (language code) 。英文的语系码是 en 、法文的语系码是 fr 、德文是 de 、中文则是 zh 。如果你用的是其它语言，请到这里找找。语系码并没有大小写的分别。现在把语系码放在 卷标之前，实际的方法会依你所使用的 HTML 版本而有所不同。请先确定你的 DOCTYPE ，然后照著以下的步骤： 如果你用的是任一版本的 HTML 4 ，就修改你的 卷标（如果你用的不是英文，就换上你自己的语系码）： 如果你用的

26、是任一版本的 XHTML 1.0 ，就修改你的 卷标（两个地方都要用你的语系码）： 如果你用的是任一版本的 XHTML 1.1 ，就修改你的 卷标（当然，用你自己的语系码）：跟 DOCTYPE 一样，你也应该在每个页面里指定你所使用的语言。另外也请注意：如果你同一个页面里里使用了一种以上的语言，你也可以在任何组件里指定使用的语言。比方说，如果你的网站 (HTML 4) 主要使用德语，但是你引用了一段英语的文章，那么可以像这样标注：.第八天：建立有意义的网页标题你的网站上每个页面，都该有个独一无二且具有意义的页面标题。 首页的标题可以就祇是网站名称。 时序汇整页面应该包含网站名称、以及这些页面的

27、日期或时序。例如在我的网志上，我就用了像是以 dive into mark/June 19, 2002 为标题的逐日汇整，以及像是以 dive into mark/June 19, 2002 为标题的逐周汇整。 分类汇整页面应该包含网站名称以及类别名称。例如我所有关于 CSS 的文章都汇整到一个名为 dive into mark/CSS 的页面里。 单篇汇整页面应该包含网站名称以及项目标题。我没有让单篇项目独立出来，但 Jonathon Delacour 有，而且做得很棒。例如他在 2002 年 6 月 17 日发表的 Accessibility matters ，就以 Jonathon De

28、lacour: Accessibility matters 命名。 用哪些标点符号倒是无所谓；不过有一些屏幕朗读软体预设会把每个标点符号都念出来。根据一般原则，过多的标点符号念起来跟它们看起来一样笨。谁因此获益？ Jackie 从中获益了。因为 JAWS 有个特别的键盘快速键 (INSERT + F10) 能显示（并念出）目前所有开启窗口的标题。如果开启的是网页就会念出网页标题。当使用 ALT-TAB 切换窗口时，它也会念出窗口标题。其它的屏幕朗读软体，像是 Home Page Reader 之类的，则会在加载网页时读出网页标题。 Marcus 从中获益了。因为 Lynx 会在第一行显示网页标

29、题，所以 Marcus 总是可以先用布拉耶点字读到标题。 Bill 从中获益了。由于中风的关系，他有时候会搞混或是忽然忘记他读的东西。窗口标题列的网页标题就像是个视觉上的锚点，即使是他卷动页面时仍会留在同一地方；所以他总是可以回头看一下标题来唤起记忆。 Google 从中获益了。因为 Google 会在搜寻的结果里显示网页标题，而且位于网页标题的关键词会有比较高的排名。这对你来说是好事，尤其是对于那些单篇汇整页面来说更是如此（选个好标题总是没错的）。 怎么做Movable Type 有许多种索引跟汇整的样板。预设的样板已经够有亲和力了；如果你使用了预设的样板，就可以不需要做任何改变。 主索引：

30、 汇整索引： Archives 分类汇整： : 按时汇整： : 单篇汇整： : Greymatter 有一套类似的模版，但是用了不同的语法。由于 Greymatter 没有特别用来指定网志名称的变数，所以你得一个个加上去： Main Index Template: My Weblog Archive Master Index Template: My Weblog Archives Archive Log Index Template: My Weblog: month year Entry Page Template: My Weblog: entrysubject Manila 可以让你设

31、定每日的标题，所以你应该用它来取代日期，毕竟这与内文本身比较相关。 Home Page Template: siteName Template: siteName: title 在 Radio 就得用些秘诀了。你可以用 Radio 的巨集语言为时序汇整页面加入日期。请小心地复制并贴上这段巨集；它们之间不应该断行， Radio 会在意这点（感谢 Jake Savin 提供这些步骤）。 Home Page Template: Main Template: 很遗憾，我不知道要如何自订令人满意的 Blogger 网页标题。欢迎来信建议。请记住这些祇是建议而已。你可以自己决定是否要在按时汇整页面中加入汇

32、整这个字。只要不过量，标点符号的使用并没有太大的关系。你也可以改把网站名称放在结尾；在网页标题里放入网站名称总是不错的；尤其当人们在许多窗口间切换时，这就能提供一些重要的线索。第九天：提供额外的导览协助也许你对于使用 卷标来连结样式表这件事并不陌生。但是你知道可以用类似的语法来指出首页及前后页面的关系吗？举例来说，在按时汇整页面里，你可以指出前一天以及后一天的（如果有的话）的文章。如果每则文章项目都有独立的页面的话，你也可以指出前后的项目。通常这些链结在图形接口浏览器（例如 Internet Explorer）里是看不见的；但是在其它浏览器里则会被显示出来，并且协助使用者浏览你的网站。你也许已

33、经提供几种不同的浏览方式了：逐周或逐月的汇整、最近几篇文章的链结、显示著每日文章的月历等；也有可能在汇整页面上已经有往前后一日（篇）的链结了。这些都很好，请留著它们，然后再多加上这些。谁因此获益？ Marcus 从中获益了。他的纯文字浏览器 Lynx 会在页面顶端显示这些额外的导览协助，并显示我们在 title 属性里指定的内容。当 Marcus 浏览 6 月 18 日的每日汇整页面时，他看到的是：#Home June 17, 2002 June 19, 2002（ # 可以让 Marcus 了解这是诠释数据，而不是网页内容。Lynx 对于 有意义的页面标题也是用一样的处理方式。） Micha

34、el 从中获益了。因为他的 Links 纯文字浏览器（别和 Marcus 的 Lynx 浏览器搞混了）也会在页面顶端显示这些额外的导览协助，就像这样： Link: homeLink: prevLink: next Bill 从中获益了。因为 Mozilla 会在网站导览列显示这些额外的导览协助。这类的链结（ home 、 prev 、 next ）会以按钮显示，链结的标题则显示成工具提示 (tooltip) 。（请注意：网站导览列是在 Mozilla 0.99 版增加的，曾经在 1.0 版被移除，但在 1.1 版又被加回来了。在有支持的版本里，你可以从检视选单、显示隐藏、站台导览列、永远显示来

35、显示） iCab 的使用者从中获益了。因为 iCab 会在工具列上用下拉式选单来显示每个网站连结的标题。怎么做在 Movable Type 的按时汇整模版里，把这几列附加在 卷标之后：link rel=home href= title=Home /link rel=prev href= title= /link rel=next href= title= /再来在单篇汇整模版里，把这几列附加在 卷标之后：link rel=home href= title=Home /link rel=prev href= title= /link rel=next href= title= /在 Greyma

36、tter 的模版里，把这几列附加在 卷标之后：Sjoerd Visscher 提供了一套巨集，可以在 Radio 里轻松做到这些事。 下载导览链结巨集。 解开压缩档，并把四个档案 (navigationLinks.txt, nextDayLink.txt, prevDayLink.txt, permalinkUrl.txt) 复制到 Macros 数据夹里；按照 Windows 上的标准安装程序来说，它会被放在 C:Program FilesRadio UserLandMacros 。 接著在 Main Template 里，把这一列附加在 卷标之后：很遗憾地，我不知道要如何在 Manila

37、或 Blogger 里实作令人满意的前后文链结，但是至少你可以在网页的 卷标后加上这个链结：第十天：先呈现你的主要内容纯粹祇用 CSS 来处理版面的主要好处之一，是可以轻松的重新编排 HTML 源码中各组件的顺序，而不影响到实际的版面。因此当其它数据还在加载时，主要内容早就已经显示出来了。我发现许多网站仍在使用表格来制作版面，所以我为你撰写了这个诀窍。如果你用表格设计版面，对 Marcus 与 Jackie 等失明的使用者来说，你放在左侧的浏览列会比主要内容更早显示出来。我不知道怎么形容随之而来的问题，不过你可以自己看看： 用表格制作的版面。 修改过的版面，这次内文在前面。在图形接口的浏览器上

38、看起来应该一样，但是在 Lynx 上有著明显的差异。 原本的版面在 Lynx 下的效果。 修改过的版面在 Lynx 下的效果。主要内文会先显示，然后才是导览列。 你不需要从头规划整个模版来避免这个问题。我们可以用一些（相对之下）较简单的技术来让主要内文先显示，并且让导览列维持在左侧。我们称这些技术叫表格秘诀。谁因此获益？ Marcus 从中获益了。就跟上面的范例所展示的一样， Lynx 会依照 HTML 源码的顺序显示内容。这代表 Marcus 每次浏览你的网页时都必须要卷动屏幕来跳过导览列。卷页烂透了。 Jackie 从中获益了。因为 JAWS 跟 Lynx 一样，都会依照 HTML 源码的

39、顺序显示内容；不过 JAWS 的情况会更糟，因为 Jackie 必须要坐著等 JAWS 念完整个导览列后才能听到真正的内容，而且还没有保证能直接跳到主要内容的方法。（明天我们就会谈到这个问题。） Google 从中获益了。越接近顶端的内容，Google会给予越多的加权。这里的顶端不是指看起来的，而是指 HTML 源码的顶端。实际上许多了解这个技术的人，都参与著搜寻引擎最佳化的研究；对他们来说，网站亲和力反倒是次要的。 怎么做用 Lynx Viewer 检查你的网站，确定每天的文章都会比导览列先显示。Movable Type 的预设模版就已经是正确的了；如果你用的是预设的模版，大概就不需要再做任

40、何事情了；不过还是用 Lynx Viewer 试试看吧，你会因此对这个议题有更深一层的了解。如果你使用的是 Radio 的预设模版，也许就需要修改表格，让主要内文放在前面了。这没有办法用复制/贴上的方式做到；你必须钻研自己的模版，并且检视表格的架构。简单版面与修改过的版面展示了基本的技术。用表格制作的版面：. navigation bar . main content .我们做了这样的修改：. main content . navigation bar .第三周第十一天：跳过导览列的链结就算你不想要把模版改成内容在前的样子，至少也该妥协一下，提供跳过导览区的链结。这并不是多完美的解决方案（先把

41、主要的内容放在前面才是王道），但至少是许多站台都愿意采用的权变之策。这个跳过链结就跟其它链结一样，其实就祇是标准的 卷标；不过我们会用 CSS 把他隐藏起来，所以你在 Internet Explorer 或 Netscape 上完全看不到，也不会影响到你本来的版面设计。谁因此获益？ Marcus 从中获益了。因为当他浏览这个页面时， Lynx 就会显示出这个链结，让他能够跳过导览列，而直接阅读主要的内容。至于这件事的重要性，请参照第十天：先呈现你的主要内容里所举的例子。 Jackie 从中获益了。因为当他浏览这个页面时， JAWS 就会读出这个链结，让他能够跳过导览列，而直接阅读主要的内容。

42、怎么做首先请用 Lynx Viewer 来看看你的主页面是不是会把导览列放在主要内容之前。如果你的主要内容更早出现的话，你就不需要用到今天我们所要探讨的诀窍了；放自己一天假，去玩乐吧！现在让我们定义这个跳过链结所要用的 CSS 样式，让它在视觉性浏览器上消失不见。如果你用了外部样式表的话，就把这个规则加到最后面（如果你用了多重外部样式表的话，请把这个规则加到适用 Netscape 4 的那一个里）。如果你本来是在模版开头的地方使用 区段来定义样式的话，就在 卷标之后加入这个规则。.skiplink display:none接下来是把这个跳过链结直接插入到站台名称和站台描述之后的地方。找不到吗？

43、也许你该搜寻一下相对应的模版变数。 Movable Type: 寻找 和 。 Greymatter: 没有特定的模版变数；你应该直接搜寻网站的名称和卷标列。 Radi 寻找 和 。 Manila: 寻找 homePageLink (siteName) 和 tagLine 。 Blogger: 寻找 。 现在找到了吗？切记要在站台名称和描述的正下方插入这个跳过链结：跳过导览列好，现在你还需要设立跳过连结所要指到的锚卷标，理论上也就是指到你的主要内容去。你找不到主要内容吗？别著急，模版变数再度拯救了今天的课程。 Movable Type: 寻找 。 Greymatter: 在你的 Main Ind

44、ex Template 里寻找 logbody ，然后在你的 Entry Page Templates 里寻找 entrymainbody 。 Radi 寻找 。 Manila: 寻找 bodytext 。 Blogger: 寻找 。 接下来，要使用的锚卷标格式则会因你使用的 HTML 不同而有所出入。检查一下你的 DOCTYPE ，然后从底下选一个合适的来用：如果你用的是任何一种 HTML 4 的话，在你的主要内容前面加入这个：如果你用的是任何一种 XHTML 1.0 的话，在你的主要内容前面加入这个：如果你用的是任何一种 XHTML 1.1 的话，在你的主要内容前面加入这个：你应该在网站上

45、的每一页都提供这样的跳过链结，所以在每个模版里都依样画葫芦，加入这些东西吧。第十二天：安全地使用色彩这个诀窍基本上可以广泛套用到网页设计的各个领域，不过我在此祇会针对网志里的一种常见情形加以说明：链结文字。有两个潜在的问题跟颜色有关。首先，你所使用的链结文字可能跟底色的对比不够明显；任何白色底色上的淡色系文字都很糟，链结文字甚至会就这么消逝于底色之中。同样地，黑色底色上的深色系文字也很惨。事实上这个诀窍不仅适用于链结文字，而是适用于所有的文字；祇不过通常网志上的一般文字都可以很容易的被阅读，倒是链结文字常常一不小心就变得难以阅读。这也就是我要在此提及的原因。第二个潜在的问题是链结装饰。如果你在

46、 CSS 中重新把链结定义成不同的颜色，那么你最好也要确定除了颜色之外，你还提供了别的线索，像是用粗体字、斜体字或加上底线等，让读者能够加以区辨。否则虽然你的链结文字能够被阅读，但有色盲的读者将无法辨别那是否是一个链结。我们将在后面的小节加以描述。谁因此获益？ Michael 从中获益了。以下是三种不同的链结装饰组合：正如你所看到的，第一句里的链结采用了预设的组合，会在视觉性浏览器里显示成蓝色/紫色并加上底线。第二个链结套用了两种文字装饰，会显示成红色粗体字（但是不会加上底线）。第三个链结祇有套用一种文字装饰，所以祇会显示成红色。现在这里是相同的三个链结，祇不过这是 Michael 所看到的样

47、子。如你所见，第一个链结仍然可以被清楚地看到； Michael 的色盲并不会影响到蓝色的部分。在第二个句子中，链结的红色褪去了，几乎变成黑色；不过链结本身仍然呈现粗体字，所以 Michael 仍然可以分辨得出来。第三个链结就出问题了。因为这个链结原本祇能靠红色来分辨，可是现在红色褪成黑色，于是单靠视觉将难以将之与其它寻常文字加以区辨。怎么做如果你要检查你的文字颜色跟背景颜色是否有显著对比，你可以用 VisCheck 来把你的网页仿真成色盲读者所看到的样子。如果你要检查链结装饰的问题会不会发生，你可以在 CSS 规则里寻找 a 卷标所会用到的样式。举例来说，如果你在 CSS 里用了下列的规则，那

48、么你的链结将祇能够用红色来加以区辨，这样是不对的：a text-decoration: none;color: red;你的链结可以沿用红色，但是你得确定你的链结同时也呈现成粗体字、斜体字或加上底线。如果你要让它变成红色粗体字，就祇要加上一列：a text-decoration: none;color: red;font-weight: bold; /* 祇需要加上这一列 */第十三天：使用真实链结网页设计的苦难根源乃是 javascript: 链结；这个假链结会在你按下的时候执行一段 Javascript 程序码。这个问题最常发生于网志用这种链结来在另一个窗口里显示回响。为什么这会是个问题呢

49、？因为 有 11% 的网际网络使用者因为某些原因而不使用 Javascript ；这同时也包括许多残障的朋友，因为她们所能够使用的浏览器就是不支持。这种假链结对她们来说不能用，你应当改用真实的链结。虽然这个问题很容易描述及修改，但是无论我多么强调这个诀窍的重要性也都不为过。多数问题，像是不提供跳过导览列的跳过链结都祇不过会在某种程度上减低可用性罢了，但至少你的页面还能够被读取。但是现在我们所遇到的这个问题，却会让重要的内容几乎完全无法被取得。如果你的回响被藏在某个 javascript: 链结之后，就几乎不存在了。谁因此获益？ Marcus 从中获益了。因为 Lynx 并不支持 Javascr

50、ipt 。 Michael 从中获益了。因为 Links 并不支持 Javascript 。 Lillian 从中获益了。虽然她用的是 Internet Explorer ，但是信息部门祇允许某些获准的站台使用 Javascript ，而把其它站台的 Javascript 给挡掉了；很不幸地，你的站台并不在这些获准的站台中。 Google 从中获益了。因为 Google 会跟著链结来寻找更多内容并加以建立索引，但是它却无法使用 javascript: 链结；因为当它索引网页时并不会执行任何 Javascript 程序码。 怎么做现在 Movable Type 和 Radio 的预设模版都把这个

51、部分处理好了，所以你无须再做任何处理。检视你的首页并搜寻 javascript: ；如果你完全找不到，那么你也就用不到今天的诀窍了。然而，如果你的 Movable Type 模版包含有像这样的链结：a href=javascript:OpenComments()Comments ()就请把它改成这样：a href=mt-comments.cgi?entry_id= onclick=OpenComments(); return falseComments ()在支持 Javascript 的浏览器里，原来的链结仍会具有相同的作用；因为 onclick 属性会优先于 href 属性。所以在新版里，

52、仍然会叫用 OpenComments 函式，然后弹出新窗口。然而在不支持 Javascript 的浏览器（还有 Google ）里，就会完全忽略 onclick 属性，而祇从 href 属性来连结，而用同一个窗口来显示评论。如果你因为其它原因而用了 javascript: 假链结的话，停。停下来。别继续下去，别继续领四千元，或之类的。在你的源码里套用上述的技巧，让不支持 Javasript 的浏览器至少还有机会能够使用真实链结。第十四天：在链结上加入标题既然网页上充斥著链结，你可能会因此觉得有很多人都知道 title 属性；不过我真的很少看到它。很多人可能不知道，所有的链结都可以在 卷标里用

53、title 属性来指定一个标题。这个标题会额外附加到任何你指定的链结文字上；它可以在视觉性浏览器上产生工具提示，而且在非视觉性的浏览器上也一样会有类似的效果。并非所有的链结都该有标题。如果链结文字是某一篇文章的标题，就请不要加上标题；因为链结文字本身应该就足够清楚了。但是如果你阅读链结文字本身时，发现自己在状况外而不知道它会指往何处的话，就加上标题吧。谁因此获益？ Jackie 从中获益了。因为 JAWS 提供了一个选项，可以跟著链结文字读出链结标题。（这个选项预设并不会被选取。为了要启用这个功能， Jackie 按下了 INSERT+V 叫出 JAWS 的冗长选项窗口，然后把 Text li

54、nks verbosity 改成 Alt tag or title 。） Michael 从中获益了。因为当她把光标移到某个叫 Opera 的链结上时，链结的标题会显示在状态列上，同时也以工具提示的样子显示出来。这让他得以决定是否要把频宽花在这个链结上。 Lillian 从中获益了。因为当她在 Internet Explorer 里把光标移到链结上时，链结标题就以工具提示的样子显示出来了。 Marcus 从中获益了。因为当他按下了 l 之后， Lynx 就会显示出那一页的链结清单；这份清单同时包含了每个链结的标题（如果有的话）。 怎么做每一个链结文字本身并不一定能提供足够的信息，来让读者决定是否要按下那个链结。这个时候你应该加入一个 title 属性，像这样： 在我的导览列上，有一个连到我的统计页面的链结。这个链结的