30天內(nèi)打造更具親和力的網(wǎng)站

第一周前言這本書定名為《深入親和力：在30天內(nèi)打造更具親和力的網(wǎng)站》，它回答了兩個問題：第一個問題是「為什么該讓我的網(wǎng)站更具親和力？」如果你沒有網(wǎng)站的話，你并不是這本書的對象。第二個問題是「該如何讓我的網(wǎng)站更具親和力？」如果你沒有被第一個問題的回答所說服，那么你也不會對第二個問題感興趣。為了回答第一個問題，我要先介紹以下五個人的特徵素描：Jackie、Michael、Bill、Lillian及Marcus。這些人有幾個共同點：他們都有著身體上、心理上、以及技術(shù)上的障礙，使他們在使用網(wǎng)際網(wǎng)絡(luò)上較為困難。

雖然這是虛構(gòu)的，但是他們卻都能代表被障礙困擾的真實人們，包括使用網(wǎng)際網(wǎng)絡(luò)所遇到的狀況。

他們在瀏覽你的網(wǎng)站時都會遭遇到困難。為了回答第二個問題，我會介紹25個可以立刻套用在你的網(wǎng)站上的技巧，讓網(wǎng)站更具親和力。雖然這些概念可以應(yīng)用在所有網(wǎng)站上，我會把焦點放在幾種普及的網(wǎng)志工具(webloggingtools)的實作上。如果你使用的是其它的出版工具或樣板系統(tǒng)(templatesystem)，你需要決定如何在那些工具上實作這些建議。每個建議會專注在獨立的概念上，解釋背后的原因，并指出誰會因為你實作而獲益。這也是我們把特徵素描放在前面的原因，因為這把第一個問題的從「為什么我要煩惱這些？」變成「誰因此獲益？」，于是我們可以回答「Marcus獲益?！埂窶arcus如何獲益？」「好，讓我們從這點來看」，如此進行。即使你不是個HTML專家也別緊張。就算你的網(wǎng)站只是自己的網(wǎng)志(weblog)，而且打從你選好樣板后就沒再碰過它們，也別太擔心。在這里我不是要你徹底地重新設(shè)計你的網(wǎng)站，詛咒你那些巢狀表格，并且把一切轉(zhuǎn)換成XHTML與CSS。只是在跟你聊聊你已有的基礎(chǔ)，并利用一些簡單而重要的改變讓它更好。Jackie、Michael、Bill、Lillian及Marcus也都會因你的體貼而感謝你。第一天：JackieJacquelin（昵稱Jackie）和媽媽住在芝加哥伊利諾州的ParkRidge，是個19歲的高中生，成績優(yōu)異。她的成績一部分來自于私人家教的協(xié)助，但主要還是因為她的勤奮學習，以及廣泛地閱讀所致。她所有的課本都是有聲書，并使用特殊的錄音機來撥放；這種錄音機的撥放速度比正?？?倍，卻祇會造成一點點失真。她已經(jīng)失明8年了。Jackie并非天生失明，所以她能理解像色彩這樣的視覺概念，而且她仍然會跟媽媽聊到「以前」生活里的色彩。她唯一不談的是那場害死她爸爸、讓她失明的那場車禍；這在她使用「以前」跟「之后」兩個詞匯時可以看出些許端倪：「就像以前客廳墻壁的那種綠色。」「這像你以前的那件紫色毛衣，不過更亮一點?！怪T如此類。由于Jackie努力地調(diào)適生活，以致于她的學業(yè)進度比同學們慢了兩年。今年秋天她將進入芝加哥大學，主修比較文學。她對此相當興奮，一方面是希望交到新朋友，另一方面則是因為能在線上完成更多課堂作業(yè)：閱讀課程規(guī)劃，提出論文，與教授、同學們實時傳訊等等。她在高中里的朋友并不多，多半是跟媽媽還有網(wǎng)際網(wǎng)絡(luò)在一起。她每個月都花超過300美金在有聲書、音樂以及一堆小玩意上。雖然有越來越多吸引人的讀物能夠下載到電子書閱讀器里，她大部分的有聲書仍然是錄音帶。她的音樂CD以及那堆小玩意都是從線上零售商買來的。線上購物可未必簡單，但跟得自己搭車到賣場、然后等店員來招呼比起來，實在是好太多了。而且線上購物也是少數(shù)幾件不需要依靠導盲犬的事情。她不喜歡現(xiàn)在這只導盲犬Arthur；它不像之前幾只那么優(yōu)秀。Lancelot跟Guinevere都已經(jīng)退休了，并且跟她們住在一起。她靠項圈來分辨它們：Arthur的項圈是光滑的、Lancelot的帶刺，Guinevere的則有凹槽。跟大部分的盲人一樣，Jackie對布拉耶點字法了解不多。她有一臺點字卷標機可以幫CD貼卷標，但她沒有辦法閱讀點字書，因為所有的點字書都是用第二級的點字法寫的，而她從來沒學過。她用最新版的JAWS來線上購物及活動，這是一套能在窗口環(huán)境下與InternetExplorer整合的屏幕朗讀軟體。JAWS使用了先進的電子語音合成器來朗讀網(wǎng)站內(nèi)容，也提供一堆深奧的鍵盤便捷鍵來瀏覽網(wǎng)站。因為Jackie記得所有按鍵，所以她能用比閱讀有聲書更快的速度來閱讀一個設(shè)計良好的網(wǎng)站。第二天：MichaelMichael現(xiàn)年27歲，退休后與女朋友Christine住在長島的GreatNeck。Michael22歲的時候創(chuàng)立了一家小公司，專門布設(shè)超高速光纖電纜。兩年后，他在洽當?shù)臅r機脫手，賣給一家全球性的電訊業(yè)集團；同時這家集團也用電話解釋給Michael聽，讓他知道為什么他不能讓他那間一個月4000美金的公寓有比56K撥接更好的服務(wù)?？磥礤X能買到權(quán)限外的任何東西。Michael眼下的世界跟你所看到的不同。這可不是甚么商業(yè)的陳腔濫調(diào)或是哲學聲明；他看到的世界真的跟你看到的不一樣。他是紅綠色盲，沒有辦法分辨紅色跟綠色（某些紅色看起來會非常深，近似于黑色）。他所有的衣服都標上字母來區(qū)分顏色，像是用R代表紅色、DG代表深綠等等。他的女朋友設(shè)計了一套搭配組合，讓他知道哪些衣服可以搭配在一起。他按照這些字母的指示來穿著，也如此表達；但他并不了解其間的差異。當客服人員溫言告訴他說他再也不需要工作時，Michael正一如往常地在網(wǎng)絡(luò)上?，F(xiàn)在他退休了，開始把時間都花在蒐集老舊的大型游戲機臺上，然后試著把這些游戲機臺修好，放進櫥柜里、加以詳列說明，最后再到拍賣網(wǎng)站上把他們賣掉。事實上大部分的細節(jié)都是他的女朋友做的不過其它所有的事都還是Michael在處理的。他還養(yǎng)了一只叫Ralph的雌鼬；因為Christine抱怨說雄鼬的味道太重了，所以他們最后經(jīng)過了妥協(xié)，決定照她的意見。Ralph大部分的時間都拿來在沙發(fā)的角落睡覺；不過早上交通顛峰期的時候，它就會坐在窗臺上看著窗外的車水馬龍。事實上Michael也會。Christine大概是唯一選擇繼續(xù)睡覺的人了。這是專屬于他和鼬的獨處時間。正如你所料的，Michael的嗜好需要透過大量的線上互動來完成。他得跟那些客戶們（不論是過去或是未來所遇到的）、供應(yīng)商們、機臺擁有人以及任何可能在機臺零件上有著卓越見解的人打交道。他實在恨透了他的56K（但是實際上祇有28.8K）撥接了，這讓他的瀏覽器也幾近爆炸。某些日子里，他會用一個叫Links的純文字瀏覽器，這個瀏覽器就跟其它的圖形瀏覽器一樣，可以畫出復雜的多欄版面，祇不過祇有文字而已，而沒有圖片或字形變化。另一些日子里，他也也會用Opera瀏覽器，因為這個瀏覽器允許他在背景加載圖片，而且可以很方便地開啟或關(guān)閉圖片選項；他多半會因為頻寬的考量把他們關(guān)閉。今天則是使用Links的日子。紅綠燈由上而下分別是紅、黃、綠；可是橫向的紅綠燈位置卻不一定，因此相當危險。就跟其它也有色盲的8%美國人一樣，Michael其實是偷看了附近其它人的動作，才知道離地最近的是綠燈、最遠的是紅燈，而中間的是黃燈。第三天：BillBill住在舊金山的一棟小公寓，唯一的親戚是離他家五哩遠的妹妹。他今年62歲，公寓里總是有條不紊，就像要視察前的軍營。這是當然的，因為Bill打從18歲就加入軍隊，從士兵開始不斷晉升軍階，并在越戰(zhàn)中得到三面勛章。一直到十年前膝蓋的傷讓他轉(zhuǎn)任文書工作前，他都維持現(xiàn)役職務(wù)。他去年罹患了中風而被迫退休，右手臂完全沒辦法移動，左手則會不由自主地擺動，卻沒人知道為什么。有500個人參加了他的退休宴會，每個人他都認得。Bill用一臺老舊的筆記型計算機跑RedHatLinux操作系統(tǒng)。他用Mozilla瀏覽網(wǎng)站，并使用Evolution閱讀信件。其實他完全不懂這些，這整臺計算機（加上里面的軟體）都是他那精通計算機的妹妹送的退休禮物。盡管這臺老計算機只有13寸屏幕，分辨率還是被固定在1024x768。感謝老天Bill看得到，只是偶爾會找不到讀到哪里。從他中風之后就這樣，而他妹妹認為這越來越嚴重了，不過她錯了。對他來說最大的恩惠是有個延伸的小方向鍵盤，讓他可以更輕松的用手碰到它們。這個鍵盤花了$29.99美金，包含$5的郵資。Bill退役前從沒上網(wǎng)過，但現(xiàn)在他找到越來越多繼續(xù)待在網(wǎng)絡(luò)上的理由。他每天花四個小時去瀏覽網(wǎng)站以及跟新舊朋友們聊天。由于那些退役同袍的鼓勵，以及妹妹在技術(shù)上的協(xié)助，他發(fā)起了關(guān)于退役軍人權(quán)利的郵遞論壇。這個論壇已經(jīng)有200個會員了。令人吃驚地，當Bill把左手穩(wěn)定放在鍵盤底部時，只靠移動手指就可以每分鐘輸入10個字（隔年將會是15個字）。然而他幾乎沒辦法使用鼠標，所以只能靠方向鍵、跳格鍵(tabkey)，還有妹妹教他的那一堆令人暈眩的快速鍵組合。他妹妹也教他如何使用某個特殊的程序，讓他可以用方向鍵來移動光標。但那不但慢得煩人，還會經(jīng)常發(fā)生錯誤，所以他通常都不為自己找麻煩。雖然他自己還不知道接下來會發(fā)生的事：明年這份郵遞論壇將會變成一份網(wǎng)志，接下來這份網(wǎng)志還會變成政治活動委員會，并且成為主要的政治力。畢竟政治這回事就是看你認識了多少人，而Bill認識每個人。第四天：Lillian據(jù)說Lillian剛從香港搭船移民來美國。其實她是30年前搭飛機來的，不過人們還是如此傳頌著。她今年54歲，跟女兒、養(yǎng)子和兩歲大的孫子寡居于堪薩斯市，她們大概就花去了她所有的時間了。雖然她的女兒和養(yǎng)子都熟稔于兩種語言，但是Lillian的英語還是支支吾吾，不如廣東話來得流暢。不跟孫子一起玩的時候，她也會試著讀報紙來練英文；她會把報紙攤開在餐桌上，打開天花板上的100瓦大燈，用放大鏡慢慢地讀。Lillian在一個世界級的電訊業(yè)集團里擔任行政助理。純粹為了簡化的考量，這個世界級的電訊業(yè)集團很湊巧地，也就是那個沒辦法提供某個住在長島的二十多歲退休人員高速網(wǎng)絡(luò)的那一個。不過Lillian并不知道這件事。她們的信息科技部門才剛大規(guī)模地轉(zhuǎn)移到WindowsXP和InternetExplorer6的環(huán)境里，而且接下來的九個月還會更為乖戾。他們同時采行了新的網(wǎng)際網(wǎng)絡(luò)安全政策：不準使用Java、不準使用Javascript、不準使用Flash也不準使用ActiveX控制組件，除非經(jīng)過了他們自己批準。當時他們顯然還沒有批準任何站臺。技術(shù)上來說，這表示所有的站臺在InternetExplorer的安全性頁面里，都是「限制的網(wǎng)站」，所以所有的腳本都被關(guān)閉了；你得擁有系統(tǒng)管理權(quán)限才有辦法把某個站臺加入「信任的網(wǎng)站」里。不消說，Lillian自然是沒有系統(tǒng)管理權(quán)限了。不過她能用19寸的大屏幕來跟信息科技部門的Matt的苦口婆心勸阻相抗衡。他常常想起那一次因為電梯壞掉，所以他得幫Lillian把大屏幕努力扛到樓上去；所幸他很少不耐煩地抱怨這件事。Lillian其實還挺喜歡Matt的，他可以說是那群人當中最善良的一個了，甚至還幫她把InternetExplorer里的字型調(diào)到「最大」，好讓她女兒網(wǎng)志的字大到能被她閱讀；因此她每天都會去看。但是當她問Matt為什么CNN.com的字就沒辦法調(diào)得更大時，Matt激活了技客演說模式，扔出一大堆技術(shù)字眼，最后仍舊祇能說他實在無能為力。Lillian好希望可以閱讀更多網(wǎng)站；但既然Matt沒辦法修的話，就沒有人有辦法。第五天：MarcusMarcus父母吸毒，所以他天生視盲。他早產(chǎn)了三個月，在保溫箱里住了六周，祇有10%的機會能夠活下來；不過他現(xiàn)在已經(jīng)31歲了。Marcus在一家AT+T轉(zhuǎn)譯中心工作，幫忙在聾人及聽人之間轉(zhuǎn)譯電話。他們是這樣運作的：假設(shè)有個聾人或聽障的人，我們就先叫她Melissa好了，用她的TDD或計算機撥號到中心來。

Melissa鍵入她想要交談的對象的名字和號碼；就先假設(shè)那個人叫Todd吧。

Marcus就會打電話給Todd，然后告訴他有個叫Melissa從轉(zhuǎn)譯中心要打電話給他。

不論Melissa鍵入了甚么，Marcus都會從他的ALVA可覆新布拉耶點字顯示器上讀到。任何Melissa輸入的字都會被實時地轉(zhuǎn)換成布拉耶點字。

不論Todd說了甚么，Marcus都會以每分鐘110字的神速打給Melissa看。無論是Melissa或Todd都不知道（其實也不在乎）Marcus是盲人。唯一的線索就祇有ALVA的針上下移動時所發(fā)出的規(guī)律噪音，聽起來有點像遠處打字機所傳來的聲音。Marcus的眼睛跟大腦之間真的甚么都沒有了。雖然如此，每個下午當太陽光從窗戶射進他的隔間時，他還是會抱怨著因此頭痛不已，然后把百葉窗拉上。Marcus在家里的時候也會拿ALVA搭配全屏幕DOS窗口里的Lynx純文字瀏覽器使用。他在家里讀這些網(wǎng)頁的方法，就跟他工作時的作法一樣：用布拉耶點字，一次讀一列。他討厭屏幕朗讀軟體，就算有一套也不想聽；因為他總是習慣一回到家就把收音機轉(zhuǎn)到最大聲，直到睡前才關(guān)上。當他聽著收音機在網(wǎng)絡(luò)上漫游時，他也會用電話跟其它人聊天。他每周至少都會跟100個人講過電話；這聽起來很不尋常，不過他自己卻完全不曉得。如果你曾經(jīng)玩過「六度分離」這個游戲，試圖尋找你跟世界上任何另一個人的關(guān)聯(lián)時，你很可能會發(fā)現(xiàn)Marcus就是你的六度親人之一。他就是那種三姑六婆型的人，即使是最有經(jīng)驗的市場老手也未必能夠打斷他的話；就是因為有他這種人，所以你的電話公司才會不打算提供無限市內(nèi)通話的選擇。他熱衷于告訴親朋好友們他剛剛看到了多酷的網(wǎng)站。事實上他刻意地使用了「看到」這個字眼，因為他曉得這會讓他們覺得不自在。第二周第六天：選擇DOCTYPE就像句子的開頭會用大寫字母一樣，HTML也以DOCTYPE開頭；這是最基本的文法。誰因此獲益？你從中獲益了。因為你必須先知道你所使用的HTML版本，才能夠在日后的課程中，選擇適當?shù)牟襟E來套用那些技巧。所以請把它找出來，沒有的話就加上去。怎么做你可能已經(jīng)設(shè)定好DOCTYPE了。檢查你的網(wǎng)頁源碼，DOCTYPE（如果有的話）應(yīng)該在很上面，甚至在<html>卷標之前。如果你用了MovableType的預設(shè)模版，DOCTYPE也許會是「XHTML1.0Transitional」。這樣很好。如果你用的是RadioUserland、Manila或Blogger的預設(shè)模版的話，DOCTYPE也許會是「HTML4.01Transitional」。這也很好。其它有效的DOCTYPE像是「HTML4.01Strict」、「XHTML1.0Strict」、「XHTML1.1」等等，也都很好。如果你已經(jīng)設(shè)定好DOCTYPE的話，就不用改它了。但是如果在你源碼中的<html>前面沒有DOCTYPE的話，就加上這些：<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd">基于技術(shù)上的考量，我不想在此深入探討細節(jié)（如果有興趣的話，請看「延伸閱讀」部分）；你可能會發(fā)現(xiàn)加入DOCTYPE之后，頁面排版有點小變化。如果不幸發(fā)生了，你也可以使用折衷的DOCTYPE來代替，就像這樣：<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">請注意，網(wǎng)站上所有的頁面都必須包含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)必須先知道你所使用的語言，在朗讀時才能準確地發(fā)音。如果你沒有指定，JAWS就會試著猜測你所使用的語言，而它可能猜錯；尤其是當你在網(wǎng)頁里引述源碼或混雜著其它不屬于語言的內(nèi)容時。即使你寫的就是英文，Google也從中獲益了，當你使用的不是英語時更是如此。根據(jù)GoogleZeitgeist的數(shù)據(jù)顯示，50%的Google使用者用英語之外的語言搜尋，而且許多使用者在Googlepreferences設(shè)定只搜尋特定的語言。Google自動偵測語系的算法比其它的都好，但是為什么要讓Google的工作更加困難呢？怎么做首先你得找出正確的雙字元語系碼(languagecode)。英文的語系碼是「en」、法文的語系碼是「fr」、德文是「de」、中文則是「zh」。如果你用的是其它語言，請到這里找找。語系碼并沒有大小寫的分別。現(xiàn)在把語系碼放在<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一樣，你也應(yīng)該在每個頁面里指定你所使用的語言。另外也請注意：如果你同一個頁面里里使用了一種以上的語言，你也可以在任何組件里指定使用的語言。比方說，如果你的網(wǎng)站(HTML4)主要使用德語，但是你引用了一段英語的文章，那么可以像這樣標注：<htmllang="de">

...

<blockquotelang="en">

...

</blockquote>第八天：建立有意義的網(wǎng)頁標題你的網(wǎng)站上每個頁面，都該有個獨一無二且具有意義的頁面標題。首頁的標題可以就祇是網(wǎng)站名稱。時序匯整頁面應(yīng)該包含網(wǎng)站名稱、以及這些頁面的日期或時序。例如在我的網(wǎng)志上，我就用了像是以「diveintomark/June19,2002」為標題的逐日匯整，以及像是以「diveintomark/June19,2002」為標題的逐周匯整。分類匯整頁面應(yīng)該包含網(wǎng)站名稱以及類別名稱。例如我所有關(guān)于CSS的文章都匯整到一個名為「diveintomark/CSS」的頁面里。單篇匯整頁面應(yīng)該包含網(wǎng)站名稱以及項目標題。我沒有讓單篇項目獨立出來，但JonathonDelacour有，而且做得很棒。例如他在2002年6月17日發(fā)表的Accessibilitymatters，就以「JonathonDelacour:Accessibilitymatters」命名。用哪些標點符號倒是無所謂；不過有一些屏幕朗讀軟體預設(shè)會把每個標點符號都念出來。根據(jù)一般原則，過多的標點符號念起來跟它們看起來一樣笨。誰因此獲益？Jackie從中獲益了。因為JAWS有個特別的鍵盤快速鍵(INSERT+F10)能顯示（并念出）目前所有開啟窗口的標題。如果開啟的是網(wǎng)頁就會念出網(wǎng)頁標題。當使用ALT-TAB切換窗口時，它也會念出窗口標題。其它的屏幕朗讀軟體，像是HomePageReader之類的，則會在加載網(wǎng)頁時讀出網(wǎng)頁標題。Marcus從中獲益了。因為Lynx會在第一行顯示網(wǎng)頁標題，所以Marcus總是可以先用布拉耶點字讀到標題。Bill從中獲益了。由于中風的關(guān)系，他有時候會搞混或是忽然忘記他讀的東西。窗口標題列的網(wǎng)頁標題就像是個視覺上的錨點，即使是他卷動頁面時仍會留在同一地方；所以他總是可以回頭看一下標題來喚起記憶。Google從中獲益了。因為Google會在搜尋的結(jié)果里顯示網(wǎng)頁標題，而且位于網(wǎng)頁標題的關(guān)鍵詞會有比較高的排名。這對你來說是好事，尤其是對于那些單篇匯整頁面來說更是如此（選個好標題總是沒錯的）。怎么做MovableType有許多種索引跟匯整的樣板。預設(shè)的樣板已經(jīng)夠有親和力了；如果你使用了預設(shè)的樣板，就可以不需要做任何改變。主索引：<title><$MTBlogName$></title>匯整索引：<title><$MTBlogName$>Archives</title>分類匯整：<title><$MTBlogName$>:<$MTArchiveTitle$></title>按時匯整：<title><$MTBlogName$>:<$MTArchiveTitle$></title>單篇匯整：<title><$MTBlogName$>:<$MTEntryTitle$></title>Greymatter有一套類似的模版，但是用了不同的語法。由于Greymatter沒有特別用來指定網(wǎng)志名稱的變數(shù)，所以你得一個個加上去：MainIndexTemplate:<title>MyWeblog</title>ArchiveMasterIndexTemplate:<title>MyWeblogArchives</title>ArchiveLogIndexTemplate:<title>MyWeblog:{{month}}{{year}}</title>EntryPageTemplate:<title>MyWeblog:{{entrysubject}}</title>Manila可以讓你設(shè)定每日的標題，所以你應(yīng)該用它來取代日期，畢竟這與內(nèi)文本身比較相關(guān)。HomePageTemplate:<title>{siteName}</title>Template:<title>{siteName}:{title}</title>在Radio就得用些秘訣了。你可以用Radio的巨集語言為時序匯整頁面加入日期。請小心地復制并貼上這段巨集；它們之間不應(yīng)該斷行，Radio會在意這點（感謝JakeSavin提供這些步驟）。HomePageTemplate:<title><%title%></title>MainTemplate:<title><%title%><%local(d);ifradio.weblog.file.getArchiveFileDate(radioResponder.fileBeingRendered,@d){":"+string.dateString(d)}else{""}%></title>很遺憾，我不知道要如何自訂令人滿意的Blogger網(wǎng)頁標題。歡迎來信建議。請記住這些祇是建議而已。你可以自己決定是否要在按時匯整頁面中加入「匯整」這個字。只要不過量，標點符號的使用并沒有太大的關(guān)系。你也可以改把網(wǎng)站名稱放在結(jié)尾；在網(wǎng)頁標題里放入網(wǎng)站名稱總是不錯的；尤其當人們在許多窗口間切換時，這就能提供一些重要的線索。第九天：提供額外的導覽協(xié)助也許你對于使用<link>卷標來連結(jié)樣式表這件事并不陌生。但是你知道可以用類似的語法來指出首頁及前后頁面的關(guān)系嗎？舉例來說，在按時匯整頁面里，你可以指出前一天以及后一天的（如果有的話）的文章。如果每則文章項目都有獨立的頁面的話，你也可以指出前后的項目。<linkrel="home"title="首頁"href="http://網(wǎng)址/指到/首頁"/>

<linkrel="prev"title="前一頁的標題"href="http://前一頁/的/網(wǎng)址"/>

<linkrel="next"title="下一頁的標題"href="http://下一頁/的/網(wǎng)址"/>通常這些鏈結(jié)在圖形接口瀏覽器（例如InternetExplorer）里是看不見的；但是在其它瀏覽器里則會被顯示出來，并且協(xié)助使用者瀏覽你的網(wǎng)站。你也許已經(jīng)提供幾種不同的瀏覽方式了：逐周或逐月的匯整、最近幾篇文章的鏈結(jié)、顯示著每日文章的月歷等；也有可能在匯整頁面上已經(jīng)有往前后一日（篇）的鏈結(jié)了。這些都很好，請留著它們，然后再多加上這些。誰因此獲益？Marcus從中獲益了。他的純文字瀏覽器Lynx會在頁面頂端顯示這些額外的導覽協(xié)助，并顯示我們在title屬性里指定的內(nèi)容。當Marcus瀏覽6月18日的每日匯整頁面時，他看到的是：#HomeJune17,2002June19,2002（#可以讓Marcus了解這是詮釋數(shù)據(jù)，而不是網(wǎng)頁內(nèi)容。Lynx對于有意義的頁面標題也是用一樣的處理方式。）Michael從中獲益了。因為他的Links純文字瀏覽器（別和Marcus的Lynx瀏覽器搞混了）也會在頁面頂端顯示這些額外的導覽協(xié)助，就像這樣：Link:home

Link:prev

Link:nextBill從中獲益了。因為Mozilla會在網(wǎng)站導覽列顯示這些額外的導覽協(xié)助。這類的鏈結(jié)（「home」、「prev」、「next」）會以按鈕顯示，鏈結(jié)的標題則顯示成工具提示(tooltip)。（請注意：網(wǎng)站導覽列是在Mozilla0.99版增加的，曾經(jīng)在1.0版被移除，但在1.1版又被加回來了。在有支持的版本里，你可以從檢視選單、顯示／隱藏、站臺導覽列、永遠顯示來顯示）iCab的使用者從中獲益了。因為iCab會在工具列上用下拉式選單來顯示每個網(wǎng)站連結(jié)的標題。怎么做在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里輕松做到這些事。下載導覽鏈結(jié)巨集。解開壓縮檔，并把四個檔案(navigationLinks.txt,nextDayLink.txt,prevDayLink.txt,permalinkUrl.txt)復制到Macros數(shù)據(jù)夾里；按照Windows上的標準安裝程序來說，它會被放在C:\ProgramFiles\RadioUserLand\Macros。接著在MainTemplate里，把這一列附加在<head>卷標之后：<%navigationLinks()%>很遺憾地，我不知道要如何在Manila或Blogger里實作令人滿意的前后文鏈結(jié)，但是至少你可以在網(wǎng)頁的<head>卷標后加上這個鏈結(jié)：<linkrel="home"title="Home"href="http://url/of/your/home/page">第十天：先呈現(xiàn)你的主要內(nèi)容純粹祇用CSS來處理版面的主要好處之一，是可以輕松的重新編排HTML源碼中各組件的順序，而不影響到實際的版面。因此當其它數(shù)據(jù)還在加載時，主要內(nèi)容早就已經(jīng)顯示出來了。我發(fā)現(xiàn)許多網(wǎng)站仍在使用表格來制作版面，所以我為你撰寫了這個訣竅。如果你用表格設(shè)計版面，對Marcus與Jackie等失明的使用者來說，你放在左側(cè)的瀏覽列會比主要內(nèi)容更早顯示出來。我不知道怎么形容隨之而來的問題，不過你可以自己看看：用表格制作的版面。修改過的版面，這次內(nèi)文在前面。在圖形接口的瀏覽器上看起來應(yīng)該一樣，但是在Lynx上有著明顯的差異。原本的版面在Lynx下的效果。修改過的版面在Lynx下的效果。主要內(nèi)文會先顯示，然后才是導覽列。你不需要從頭規(guī)劃整個模版來避免這個問題。我們可以用一些（相對之下）較簡單的技術(shù)來讓主要內(nèi)文先顯示，并且讓導覽列維持在左側(cè)。我們稱這些技術(shù)叫「表格秘訣」。誰因此獲益？Marcus從中獲益了。就跟上面的范例所展示的一樣，Lynx會依照HTML源碼的順序顯示內(nèi)容。這代表Marcus每次瀏覽你的網(wǎng)頁時都必須要卷動屏幕來跳過導覽列。卷頁爛透了。Jackie從中獲益了。因為JAWS跟Lynx一樣，都會依照HTML源碼的順序顯示內(nèi)容；不過JAWS的情況會更糟，因為Jackie必須要坐著等JAWS念完整個導覽列后才能聽到真正的內(nèi)容，而且還沒有保證能直接跳到主要內(nèi)容的方法。（明天我們就會談到這個問題。）Google從中獲益了。越接近頂端的內(nèi)容，Google會給予越多的加權(quán)。這里的頂端不是指看起來的，而是指HTML源碼的頂端。實際上許多了解這個技術(shù)的人，都參與著搜尋引擎最佳化的研究；對他們來說，網(wǎng)站親和力反倒是次要的。怎么做用LynxViewer檢查你的網(wǎng)站，確定每天的文章都會比導覽列先顯示。MovableType的預設(shè)模版就已經(jīng)是正確的了；如果你用的是預設(shè)的模版，大概就不需要再做任何事情了；不過還是用LynxViewer試試看吧，你會因此對這個議題有更深一層的了解。如果你使用的是Radio的預設(shè)模版，也許就需要修改表格，讓主要內(nèi)文放在前面了。這沒有辦法用復制/貼上的方式做到；你必須鉆研自己的模版，并且檢視表格的架構(gòu)。簡單版面與修改過的版面展示了基本的技術(shù)。用表格制作的版面：<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>第三周第十一天：跳過導覽列的鏈結(jié)就算你不想要把模版改成內(nèi)容在前的樣子，至少也該妥協(xié)一下，提供跳過導覽區(qū)的鏈結(jié)。這并不是多完美的解決方案（先把主要的內(nèi)容放在前面才是王道），但至少是許多站臺都愿意采用的權(quán)變之策。這個「跳過鏈結(jié)」就跟其它鏈結(jié)一樣，其實就祇是標準的<a>卷標；不過我們會用CSS把他隱藏起來，所以你在InternetExplorer或Netscape上完全看不到，也不會影響到你本來的版面設(shè)計。誰因此獲益？Marcus從中獲益了。因為當他瀏覽這個頁面時，Lynx就會顯示出這個鏈結(jié)，讓他能夠跳過導覽列，而直接閱讀主要的內(nèi)容。至于這件事的重要性，請參照第十天：先呈現(xiàn)你的主要內(nèi)容里所舉的例子。Jackie從中獲益了。因為當他瀏覽這個頁面時，JAWS就會讀出這個鏈結(jié)，讓他能夠跳過導覽列，而直接閱讀主要的內(nèi)容。怎么做首先請用LynxViewer來看看你的主頁面是不是會把導覽列放在主要內(nèi)容之前。如果你的主要內(nèi)容更早出現(xiàn)的話，你就不需要用到今天我們所要探討的訣竅了；放自己一天假，去玩樂吧！現(xiàn)在讓我們定義這個跳過鏈結(jié)所要用的CSS樣式，讓它在視覺性瀏覽器上消失不見。如果你用了外部樣式表的話，就把這個規(guī)則加到最后面（如果你用了多重外部樣式表的話，請把這個規(guī)則加到適用Netscape4的那一個里）。如果你本來是在模版開頭的地方使用<style>區(qū)段來定義樣式的話，就在<style>卷標之后加入這個規(guī)則。.skiplink{display:none}接下來是把這個跳過鏈結(jié)直接插入到站臺名稱和站臺描述之后的地方。找不到嗎？也許你該搜尋一下相對應(yīng)的模版變數(shù)。MovableType:尋找<$MTBlogTitle$>和<$MTBlogDescription$>。Greymatter:沒有特定的模版變數(shù)；你應(yīng)該直接搜尋網(wǎng)站的名稱和卷標列。Radi尋找<%siteName%>和<%description%>。Manila:尋找{homePageLink(siteName)}和{tagLine}。Blogger:尋找<$BlogTitle$>。現(xiàn)在找到了嗎？切記要在站臺名稱和描述的正下方插入這個跳過鏈結(jié)：<aclass="skiplink"href="#startcontent">跳過導覽列</a>好，現(xiàn)在你還需要設(shè)立跳過連結(jié)所要指到的錨卷標，理論上也就是指到你的主要內(nèi)容去。你找不到主要內(nèi)容嗎？別著急，模版變數(shù)再度拯救了今天的課程。MovableType:尋找<MTEntries>。Greymatter:在你的MainIndexTemplate里尋找{{logbody}}，然后在你的EntryPageTemplates里尋找{{entrymainbody}}。Radi尋找<%bodytext%>。Manila:尋找{bodytext}。Blogger:尋找<Blogger>。接下來，要使用的錨卷標格式則會因你使用的HTML不同而有所出入。檢查一下你的DOCTYPE，然后從底下選一個合適的來用：如果你用的是任何一種HTML4的話，在你的主要內(nèi)容前面加入這個：<aname="startcontent"></a>如果你用的是任何一種XHTML1.0的話，在你的主要內(nèi)容前面加入這個：<aname="startcontent"id="startcontent"></a>如果你用的是任何一種XHTML1.1的話，在你的主要內(nèi)容前面加入這個：<aid="startcontent"></a>你應(yīng)該在網(wǎng)站上的每一頁都提供這樣的跳過鏈結(jié)，所以在每個模版里都依樣畫葫蘆，加入這些東西吧。第十二天：安全地使用色彩這個訣竅基本上可以廣泛套用到網(wǎng)頁設(shè)計的各個領(lǐng)域，不過我在此祇會針對網(wǎng)志里的一種常見情形加以說明：鏈結(jié)文字。有兩個潛在的問題跟顏色有關(guān)。首先，你所使用的鏈結(jié)文字可能跟底色的對比不夠明顯；任何白色底色上的淡色系文字都很糟，鏈結(jié)文字甚至會就這么消逝于底色之中。同樣地，黑色底色上的深色系文字也很慘。事實上這個訣竅不僅適用于鏈結(jié)文字，而是適用于所有的文字；祇不過通常網(wǎng)志上的一般文字都可以很容易的被閱讀，倒是鏈結(jié)文字常常一不小心就變得難以閱讀。這也就是我要在此提及的原因。第二個潛在的問題是鏈結(jié)裝飾。如果你在CSS中重新把鏈結(jié)定義成不同的顏色，那么你最好也要確定除了顏色之外，你還提供了別的線索，像是用粗體字、斜體字或加上底線等，讓讀者能夠加以區(qū)辨。否則雖然你的鏈結(jié)文字能夠被閱讀，但有色盲的讀者將無法辨別那是否是一個鏈結(jié)。我們將在后面的小節(jié)加以描述。誰因此獲益？Michael從中獲益了。以下是三種不同的鏈結(jié)裝飾組合：正如你所看到的，第一句里的鏈結(jié)采用了預設(shè)的組合，會在視覺性瀏覽器里顯示成藍色/紫色并加上底線。第二個鏈結(jié)套用了兩種文字裝飾，會顯示成紅色粗體字（但是不會加上底線）。第三個鏈結(jié)祇有套用一種文字裝飾，所以祇會顯示成紅色?，F(xiàn)在這里是相同的三個鏈結(jié)，祇不過這是Michael所看到的樣子。如你所見，第一個鏈結(jié)仍然可以被清楚地看到；Michael的色盲并不會影響到藍色的部分。在第二個句子中，鏈結(jié)的紅色褪去了，幾乎變成黑色；不過鏈結(jié)本身仍然呈現(xiàn)粗體字，所以Michael仍然可以分辨得出來。第三個鏈結(jié)就出問題了。因為這個鏈結(jié)原本祇能靠紅色來分辨，可是現(xiàn)在紅色褪成黑色，于是單靠視覺將難以將之與其它尋常文字加以區(qū)辨。怎么做如果你要檢查你的文字顏色跟背景顏色是否有「顯著對比」，你可以用VisCheck來把你的網(wǎng)頁仿真成色盲讀者所看到的樣子。如果你要檢查鏈結(jié)裝飾的問題會不會發(fā)生，你可以在CSS規(guī)則里尋找"a"卷標所會用到的樣式。舉例來說，如果你在CSS里用了下列的規(guī)則，那么你的鏈結(jié)將祇能夠用紅色來加以區(qū)辨，這樣是不對的：a{

text-decoration:none;

color:red;}你的鏈結(jié)可以沿用紅色，但是你得確定你的鏈結(jié)同時也呈現(xiàn)成粗體字、斜體字或加上底線。如果你要讓它變成紅色粗體字，就祇要加上一列：a{

text-decoration:none;

color:red;

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

}第十三天：使用真實鏈結(jié)網(wǎng)頁設(shè)計的苦難根源乃是「javascript:」鏈結(jié)；這個假鏈結(jié)會在你按下的時候執(zhí)行一段Javascript程序碼。這個問題最常發(fā)生于網(wǎng)志用這種鏈結(jié)來在另一個窗口里顯示回響。為什么這會是個問題呢？因為有11%的網(wǎng)際網(wǎng)絡(luò)使用者因為某些原因而不使用Javascript；這同時也包括許多殘障的朋友，因為她們所能夠使用的瀏覽器就是不支持。這種假鏈結(jié)對她們來說不能用，你應(yīng)當改用真實的鏈結(jié)。雖然這個問題很容易描述及修改，但是無論我多么強調(diào)這個訣竅的重要性也都不為過。多數(shù)問題，像是不提供跳過導覽列的「跳過鏈結(jié)」都祇不過會在某種程度上減低可用性罷了，但至少你的頁面還能夠被讀取。但是現(xiàn)在我們所遇到的這個問題，卻會讓重要的內(nèi)容幾乎完全無法被取得。如果你的回響被藏在某個「javascript:」鏈結(jié)之后，就幾乎不存在了。誰因此獲益？Marcus從中獲益了。因為Lynx并不支持Javascript。Michael從中獲益了。因為Links并不支持Javascript。Lillian從中獲益了。雖然她用的是InternetExplorer，但是信息部門祇允許某些獲準的站臺使用Javascript，而把其它站臺的Javascript給擋掉了；很不幸地，你的站臺并不在這些獲準的站臺中。Google從中獲益了。因為Google會跟著鏈結(jié)來尋找更多內(nèi)容并加以建立索引，但是它卻無法使用「javascript:」鏈結(jié)；因為當它索引網(wǎng)頁時并不會執(zhí)行任何Javascript程序碼。怎么做現(xiàn)在MovableType和Radio的預設(shè)模版都把這個部分處理好了，所以你無須再做任何處理。檢視你的首頁并搜尋「javascript:」；如果你完全找不到，那么你也就用不到今天的訣竅了。然而，如果你的MovableType模版包含有像這樣的鏈結(jié)：<ahref="javascript:OpenComments(<$MTEntryID$>)">Comments(<$MTEntryCommentCount$>)</a>就請把它改成這樣：<ahref="<$MTCGIPath$>mt-comments.cgi?entry_id=<$MTEntryID$>"onclick="OpenComments(<$MTEntryID$>);returnfalse">Comments(<$MTEntryCommentCount$>)</a>在支持Javascript的瀏覽器里，原來的鏈結(jié)仍會具有相同的作用；因為onclick屬性會優(yōu)先于href屬性。所以在新版里，仍然會叫用OpenComments函式，然后彈出新窗口。然而在不支持Javascript的瀏覽器（還有Google）里，就會完全忽略onclick屬性，而祇從href屬性來連結(jié)，而用同一個窗口來顯示評論。如果你因為其它原因而用了javascript:假鏈結(jié)的話，停。停下來。別繼續(xù)下去，別繼續(xù)領(lǐng)四千元，或之類的。在你的源碼里套用上述的技巧，讓不支持Javasript的瀏覽器至少還有機會能夠使用真實鏈結(jié)。第十四天：在鏈結(jié)上加入標題既然網(wǎng)頁上充斥著鏈結(jié)，你可能會因此覺得有很多人都知道title屬性；不過我真的很少看到它。很多人可能不知道，所有的鏈結(jié)都可以在<a>卷標里用title屬性來指定一個標題。這個標題會額外附加到任何你指定的鏈結(jié)文字上；它可以在視覺性瀏覽器上產(chǎn)生工具提示，而且在非視覺性的瀏覽器上也一樣會有類似的效果。并非所有的鏈結(jié)都該有標題。如果鏈結(jié)文字是某一篇文章的標題，就請不要加上標題；因為鏈結(jié)文字本身應(yīng)該就足夠清楚了。但是如果你閱讀鏈結(jié)文字本身時，發(fā)現(xiàn)自己在狀況外而不知道它會指往何處的話，就加上標題吧。誰因此獲益？Jackie從中獲益了。因為JAWS提供了一個選項，可以跟著鏈結(jié)文字讀出鏈結(jié)標題。（這個選項預設(shè)并不會被選取。為了要啟用這個功能，Jackie按下了INSERT+V叫出JAWS的冗長選項窗口，然后把"Textlinksverbosity"改成"Alttagortitle"。）Michael從中獲益了。因為當她把光標移到某個叫Opera的鏈結(jié)上時，鏈結(jié)的標題會顯示在狀態(tài)列上，同時也以工具提示的樣子顯示出來。這讓他得以決定是否要把頻寬花在這個鏈結(jié)上。Lillian從中獲益了。因為當她在InternetExplorer里把光標移到鏈結(jié)上時，鏈結(jié)標題就以工具提示的樣子顯示出來了。Marcus從中獲益了。因為當他按下了「l」之后，Lynx就會顯示出那一頁的鏈結(jié)清單；這份清單同時包含了每個鏈結(jié)的標題（如果有的話）。怎么做每一個鏈結(jié)文字本身并不一定能提供足夠的信息，來讓讀者決定是否要按下那個鏈結(jié)。這個時候你應(yīng)該加入一個title屬性，像這樣：在我的導覽列上，有一個連到我的統(tǒng)計頁面的鏈結(jié)。這個鏈結(jié)的鏈結(jié)文字就祇是Statistics而已，但是title屬性卻可以提供更多信息：<atitle="referrersandothervisitorstatistics"href="/stats/">Statistics</a>在我的導覽列上，有一個連到我的書DiveIntoPython的鏈結(jié)，看起來就像這樣：<atitle="FreePythonbookforexperiencedprogrammers"href="/">DiveIntoPython</a>當我用句子里的某個詞連結(jié)到某一篇文章時，我會試著用title屬性來提供更多關(guān)于這個鏈結(jié)的信息，像是那篇文章的標題或引述之類的。再舉個例子，昨天的訣竅里就包含這個句子：為什么這會是個問題呢？因為<atitle="TheCstatisticsonJavascriptusageinbrowsers,April2002"href="/stats/2002/April/javas.php">有11%的網(wǎng)際網(wǎng)絡(luò)使用者因為某些原因而不使用Javascript</a>；這同時也包括許多殘障的朋友，因為她們所能夠使用的瀏覽器就是不支持。在瀏覽器里看起來會像這樣：為什么這會是個問題呢？因為有11%的網(wǎng)際網(wǎng)絡(luò)使用者因為某些原因而不使用Javascript；這同時也包括許多殘障的朋友，因為她們所能夠使用的瀏覽器就是不支持。切勿濫用title屬性。凡事皆適可而止。第十五天：定義快速鍵HTML有一個鮮為人知的功能，就是在鏈結(jié)及表單里還可以使用accesskey屬性，讓網(wǎng)頁設(shè)計師能夠定義常用鏈結(jié)或表單區(qū)域的快速鍵。在Windows上，你可以按下ALT+某個便捷鍵；在Macintosh上則是按下Control+某個便捷鍵。如果便捷鍵是被定義在某個鏈結(jié)上的話，你的瀏覽器就會跟著連結(jié)出去；如果是被定義在表單區(qū)域的話，你的瀏覽器就會把焦點一到那個區(qū)域里。InternetExplorer從4.0版開始支持便捷鍵，Netscape則是從6.0版開始支持。比較舊的瀏覽器就祇會單純地忽略掉這個屬性，所以不會有甚么可怕的影響。雖然那個按鍵對應(yīng)到甚么功能并沒有一個標準，但是這里還是列出了一些常用的快速鍵：便捷鍵1

主頁面便捷鍵2

跳到主要內(nèi)容（也就是導覽列跳過鏈結(jié)）便捷鍵9

響應(yīng)誰因此獲益？Jackie從中獲益了。因為當JAWS讀到定義有accesskey的鏈結(jié)時，也會把這個便捷鍵念出來。舉例來說，<ahref="/"accesskey="1">HomepageD</a>這個鏈結(jié)會被JAWS讀成「link:Homepage,ALT+1」。所以Jackie可以按下ALT+1來把瀏覽器焦點移到那個鏈結(jié)，然后再按下ENTER就可以從那個鏈結(jié)連出去。Bill從中獲益了。雖然Bill受到中風的影響，沒辦法有效率地使用鼠標，但是他還可以靠鍵盤導覽以及快速鍵的幫忙來在頁面中移動。便捷鍵可以幫他非常有效率地跳到常用的鏈結(jié)。Bill能夠按下ALT+1，接著Mozilla就會馬上連到定義有accesskey="1"的鏈結(jié)去。（注：既然Mozilla不會把便捷鍵念出來，那么Bill要怎么發(fā)現(xiàn)有這個便捷鍵可以用就會變成一個重要的議題了。我們將在后面討論到這個訣竅。）怎么做：主頁鏈結(jié)MovableType:預設(shè)的模版并沒有連回主頁的鏈結(jié)，所以你應(yīng)該在站臺名稱的地方加上鏈結(jié)，并且賦予一個accesskey。在你的模版里搜尋<$MTBlogName$>，然后改成這樣：<ahref="<$MTBlogURL$>"style="color:black;text-decoration:none"accesskey="1"><$MTBlogName$></a>Radi在你的模版中搜尋{siteName}。這很有可能已經(jīng)是某個鏈結(jié)了，就像這樣：<ahref="<%radio.macros.weblogUrl()%>"style="color:black;text-decoration:none"><%siteName%></a>所以你祇要在這個鏈結(jié)里加上accesskey屬性就行了。像這樣：<ahref="<%radio.macros.weblogUrl()%>"style="color:black;text-decoration:none"accesskey="1"><%siteName%></a>Blogger:在你的模版里搜尋<$BlogTitle$>。如果這個卷標已經(jīng)被<a>卷標關(guān)上了的話，就在<a>卷標里加上accesskey="1"屬性，就跟前面的Radio一樣。如果你的<$BlogTitle$>卷標還沒有被<a>卷標關(guān)上的話，就用像這樣的卷標把它關(guān)上（別忘記要插入你自己的主頁網(wǎng)址）：<ahref="http://你的/主頁的/網(wǎng)址"style="color:black;text-decoration:none"accesskey="1"><$BlogTitle$></a>怎么做：跳過導覽鏈結(jié)你是否有提供一個跳過導覽列的鏈結(jié)呢？如果有的話，就指定accesskey="2"給它吧。<aclass="skiplink"href="#startcontent"accesskey="2">跳過導覽列</a>怎么做：回饋鏈結(jié)你是否有提供連到回饋表單或你的電子郵件住指的鏈結(jié)呢？如果有的話，就指定accesskey="9"給它吧。<ahref="mailtme@"accesskey="9">寄信給我</a>注意：Radio網(wǎng)志通常會有個連到回饋表單的鏈結(jié)（小信封圖標），但是這個鏈結(jié)是由巨集所產(chǎn)生的，所以你沒辦法在上面加上accesskey。請確定你在網(wǎng)站上的每一頁都加上了accesskey；這表示你得修改所有相關(guān)的模版。第四周第十六天：不要開出新窗口幾乎每個網(wǎng)頁使用者都知道「上一頁」這個按鈕。這幾乎也是瀏覽網(wǎng)頁的必備動作了。連到某個鏈結(jié)，回到上一頁；瀏覽某個搜尋結(jié)果，然后回到上一頁。就算是我老爸也知道可以這樣用，而他本人現(xiàn)在還因為第一次成功地在「Internet」圖標上雙擊成功而興奮不已。在所有的主流瀏覽器里，如果你用了<atarget="_blank">卷標，就會強迫鏈結(jié)開出一個新窗口而讓「上一頁」按鈕失效。這個新窗口不會保有前一個窗口的瀏覽歷程，所以「上一頁」按鈕將會失去功效。即使是對有10年網(wǎng)頁經(jīng)驗的我來說，這都會造成嚴重的混淆。在2002年的今日人們還會這樣子用，實在是太不可思議了。別這樣做。別強迫鏈結(jié)開啟新窗口。請注意這個訣竅是針對網(wǎng)頁設(shè)計師所提出的，而非針對網(wǎng)頁使用者。如果你想要在你瀏覽網(wǎng)頁的時候開出新窗口，請用后述的方法。在Windows上的InternetExplorer里，按下鏈結(jié)時同時按住Shift鍵，就可以把連結(jié)開到新窗口去。在Netscape6和Mozilla里的話，則是同時按住Control。在Mac上的InternetExplorer里則需要按住Command。（另外像是Opera的某些瀏覽器，還支持進階組合鍵，像是Control+Shift+點選，這樣會在背景開出連結(jié)的新窗口。）這里的重點在于是否要開出新窗口應(yīng)該要由使用者來選擇，而不是由網(wǎng)頁設(shè)計師。誰因此獲益？Jackie從中獲益了。雖然JAWS會在連結(jié)開出新窗口時念出「Newbrowserwindow」，但仍然容易在它念出鏈結(jié)文字和新頁面內(nèi)容之間被漏掉。HomePageReader提供了更好的解決方案：每當有新窗口開啟時，它就會播放某個指定的聲音。另外一個叫WindowEyes的屏幕朗讀軟體則完全不會提示有新窗口。無論如何，「上一頁」按鈕就此爛掉。如果Jackie沒有聽到「newbrowserwindow」的話，她就沒辦法瞥到工作列上開了兩個瀏覽器窗口了。于是她就得去讀整個已開啟窗口清單；可能是透過JAWS指定的窗口清單快速鍵INSERT+F10或標準的ALT+TAB。Lillian從中獲益了。因為她的InternetExplorer窗口總是最大化（這樣她才看得見），所以新窗口開啟的時候也會預設(shè)變成最大化。除此之外WindowsXP還會把同一個應(yīng)用程序的多個窗口群組整理在工作列上，所以在視覺上就更難發(fā)現(xiàn)新窗口被開出來了。突然之間，「上一頁」按鈕莫名其妙地失效了，而Lillian完全不知到為什么會這樣。如果你預期她會很高興地閱讀連結(jié)后的內(nèi)容，倒是可以略過這個問題。Bill從中獲益了。他妹妹把Mozilla設(shè)定成多頁瀏覽模式，所以Bill可以看到分頁，然后很快地記住他開的是那個窗口，并且在那些分頁間切換（在他靈巧華麗的延伸鍵盤上用CTRL+PAGEUP和CTRL+PAGEDOWN）。被強迫開出新窗口的連結(jié)會開出另外一個全新的Mozilla窗口。這不僅僅會越過分頁瀏覽的偏好，還會讓他所以已開啟的窗口都不見；因為新的窗口上不會有任何前一個窗口上的分頁。怎么做不要用<atarget="_blank">來強迫連結(jié)開出新窗口。

如果你一定得要把某個連結(jié)開到新窗口，請務(wù)必明確地警告讀者。這祇是個不理想的權(quán)變方案，通常是隨著某些「不得與外部內(nèi)容相關(guān)聯(lián)」的商業(yè)政策而來的。舉例來說，CNN的「相關(guān)站臺」頁面就是這樣。

如果你看到「在新窗口開啟鏈結(jié)」核選框，請確定它按照預設(shè)值而處于關(guān)閉的狀態(tài)。第十七天：定義頭字語我上個月曾經(jīng)在我自己的網(wǎng)志上用了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個你都懂，那實在是可喜可賀；你顯然會是成為技術(shù)編輯的好材料。否則你就會感激我實際上用了<acronym>卷標把他們逐項加以定義了。把你的光標一到每一個頭字語上，看看他們各代表些甚么意思。在現(xiàn)今的瀏覽器上這都有效，而對于Netscape4之類的則無傷。你應(yīng)該在任何使用頭字語的時候都加以定義，或在每一篇里面至少定義過一次。誰因此獲益？Michael從中獲益了。因為當Michael把光標滑過頭字語的時候，Opera就會用工具提示的方式顯示頭字語標題。Bill從中獲益了。因為Mozilla甚至會自動在頭字語底下加上點狀底線；當Bill把光標滑過頭字語時，Mozilla還會把光標變成光標+問號的形狀，并且以工具提示的方式顯示頭字語標題。（你可以用樣式表來覆寫掉這個預設(shè)的作用，或者用CSS來讓其它瀏覽器也有相似的效果）。Google從中獲益了。因為Google不但會用頭字語本身做索引，也會用頭字語標題來做索引，所以人們就算用完整的拼寫當關(guān)鍵詞也可以找到你的頁面。我希望我也能說Jackie從中獲益了，但是她并沒有。因為不論JAWS或其它任何目前市面上的屏幕朗讀軟體都不會念出頭文字標題。我希望有朝一日他們將能夠有這個功能，那么你就搶先了一步。怎么做當你第一次使用頭文字的時候，用一個<acronym>卷標加以標記，像這樣：<acronymtitle="cascadingstylesheets">CSS</acronym>Radio的使用者可以用快速鍵自動地加以標記。從你的Radio主頁里，在主導覽選單中點選「Shortcuts」然后定義你常用的頭文字。舉例來說：Name:CSS

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

(Besuretochangetheinputtypefrom"WYSIWYG"to"Source"soyoucantypetheHTMLdirectly.)然后在你的文章里，祇需要鍵入"CSS"（包含引號），那么Radio就會自動地按照你所定義的內(nèi)容加上頭文字卷標。怎么做：樣式表你還可以用樣式表來更換所有頭字語看起來的樣子。不單單是Radio，這對所有的工具都有效。以下是我在所有的瀏覽器（而不單單祇是Mozilla）中產(chǎn)生點狀底線的規(guī)則：acronym{

border-bottom:1pxdottedblack;}這么做還有額外的好處；我用了下面這個規(guī)則，所以當打印我的網(wǎng)頁時，會自動地把頭文字展開成全稱。（其實祇有從Mozilla和Opera打印時才有效，不過對于其它瀏覽器來說是無害的）。acronym:after{

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

}第十八天：在月歷中加上真的標題「可是，」我聽到你在哀嚎了，「我的月歷已經(jīng)有個標題了??！看那邊，明明在上面就有年份跟月份了呀，我甚至還用了粗體字耶。」但是如果你有挖掘過你的HTML源碼的話，你就會發(fā)現(xiàn)你的月歷并沒有真的標題。它可能祇是一個表格的<td>格子，占滿著整個第一列，然后用了CSS規(guī)則來讓他看起來是粗體字。相較之下，如果你用了真正的<caption>卷標的話，反而簡單多了。這樣不但在模版里讀起來更簡單，也可以為你的頁面多省下幾個位元，在視覺性瀏覽器里看起來效果也相同，同時還更具親和力。誰因此獲益？Marcus從中獲益了。因為Lynx顯示標題時，會在前面再加上「CAPTION:」，讓他明白這一列是標題，而不是字段標頭或表格數(shù)據(jù)。Jackie間接地獲益了。因為用了真正的<caption>卷標能夠奠定使用真正表格標頭的良好基礎(chǔ)；我們將在明天的訣竅中討論到Jackie到底能從中獲益到些甚么。怎么做這個訣竅祇能夠適用于支持月歷的出版工具（所以Blogger就被排除掉了），同時這個出版工具還要能讓你自訂產(chǎn)生月歷的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屬性乃是選用性的；我在這里把他留著，因為這樣就可以拿來取代掉預設(shè)的MovableType樣本，繼續(xù)用CSS規(guī)則來讓年份及月份采用粗體字。像這樣子用<caption>卷標之后，你的頁面看起來仍舊會跟以前一模一樣。在Greymatter中的狀況仍舊相同，但是模版卷標卻不同：<caption>{{monthword}}{{yearyear}}</caption>同樣地，祇要你這么做，你就可以用樣式表來改變caption的視覺樣式。在Radio中，整個過程將會比較復雜，但并非不可能（我得感謝TonyBowden提供了這些指引）。在Radio里，開啟實際的Radio應(yīng)用程序。如果是在Windows的話，從系統(tǒng)列里在小Radio圖標上按鼠標右鍵，然后選擇「OpenRadio」。在「Tools」選單里，選擇「Developers」，然后選「Jump...」(Control+J)。跳至「system.verbs.builtins.radio.weblog.drawCalendar」（不含引號）?，F(xiàn)在到「Edit」選單里，選「FindandReplace」，然后選「Find...」(Control+F)并且尋找「hCalendarTable」。這樣應(yīng)該會展現(xiàn)出繪制啟始<table>卷標和假月歷標題的源碼區(qū)塊。把這個區(qū)塊中最后一列（在<tr>卷標中寫著monthYearString的那一列）改成這樣：add("<caption>"+monthYearString+"</caption>")關(guān)閉窗口。你會被詢問到是否要編譯這個變更，請回答是。如果你想要的話，還可以設(shè)定標題的樣式。到你的HomePageTemplate（在Prefs頁面中）并且新增一個給caption用的樣式。以下這個是我自己在用的；在<style>區(qū)段中原本包含這些東西：body,td,p{

font-family:verdana,sans-serif;

font-size:12p