HTML中的鏈接,正確的說法應(yīng)該稱作"錨點",它不僅讓我們能指向文檔,還能指向頁面里的特定段落,更能當作"精準鏈接"的便利工具.讓鏈接對象接近焦點.在這一章里,我們將看到四種不同的錨點做法,說明每個方法的優(yōu)點,也會介紹title屬性如何能提升鏈接的易用性,另外也將使用CSS為鏈接設(shè)計樣式.
這是在設(shè)計網(wǎng)站時經(jīng)常遇到的情況,你想鏈接到某個頁面的特定部分,可是使用者正在閱讀的可能是在另外的一個頁面,接下來討論的四種方法之中任選一種都能讓你達成目標. Webjx.Com
在示例中,假設(shè)我們打算鏈接到同一個頁面中的特定標題:
<p><a href="#oranges">About Oranges</a></p>
Webjx.Com
...一些文字...
<a name="oranges"></a>
<h2>Oranges Are Tasty</h2>
...更多文字...
使用一個內(nèi)容空白的錨點標簽再配上name屬性,標記特定的鏈接點,或許這是你熟悉的方法,在標題前放一個內(nèi)容空白的<a>,并且連向它(使用#符號,后面加上name屬性的值),就能讓我們連到頁面的特定部分了,當頁面包含了很長需要滾動的項目清單時,我們能通過這個方法十分方便的連到特定的項目.
圖7-1顯示了點擊"About Oranges"鏈接之后的結(jié)果,也就是跳到我們標識<a name="oranges"></a>的地方,正好在標題上面. 網(wǎng)頁教學網(wǎng)
圖7-1.點擊連上具體錨點鏈接的示例
效果不錯,但是浪費一個內(nèi)容空白的標簽來標識鏈接位置有點不合語義,方法B能改進這點.
Webjx.Com
<p><a href="#oranges">About Oranges</a></p>
Webjx.Com
...一些文字...
Webjx.Com
<h2><a name="oranges">Oranges Are Tasty</a></h2> Webjx.Com
...更多文字...
Webjx.Com
與方法A一樣,我們?nèi)匀皇褂?lt;a>標簽配上name屬性,但這次我們把它包在我想要鏈接的標題外面,這么做看起來的確比較符合語義,在方法A里頭,我們的連接對象是...恩,什么都沒有,但是在方法B里,我們不僅說明了這段文字是標題標簽的一部分,同時也是這個頁面的連接錨點之一.
如果使用了方法B的話,有個地方必須要注意.如果你為所有的<a>元素指定了全局的CSS樣式的話(顏色,文字大小,文字裝飾等等),這些樣式就會覆蓋你為<h2>元素指定的樣式.會發(fā)生這種情況的原因是,在這個例子里頭,<a>標簽是位于包圍它的<h2>標簽之內(nèi)的子元素.
舉例來說,假如你的CSS內(nèi)有類似這樣的聲明:
a{
網(wǎng)頁教學網(wǎng)
color:green;
Webjx.Com
font-weight:bold; Webjx.Com
text-decoration:underline;
Webjx.Com
} 網(wǎng)頁教學網(wǎng)
方法B配上這段CSS就會讓標題與其他頁面內(nèi)的<a>一樣變成綠色,粗體,加上下劃線,或許與你期望的<h2>樣式不同.
我們能使用<a>的:link偽類以避免這種現(xiàn)象(同時也能獲得其他好處),在本章稍后的"技巧延伸"中會詳細討論.
使用方法B(以及方法A)的好處之一,就是name屬性可以處理更豐富的錨點名稱,具體來說,就是能在名稱之內(nèi)使用符號 Webjx.Com
舉例來說,如果使用方法B的話,你可以這么做(在此é代表符號"e"): 網(wǎng)頁教學網(wǎng)
<p><a href="#resumé">My Resumé</a></p>
網(wǎng)頁教學網(wǎng)
...一些文字...
<h2><a name="resumé">Dan's Resumé</a></h2>
...更多文字...
在處理不屬于英文字母的字符時,這個功能十分重要.
但是還有幾個方法值得一提,下面這個方法完全不需要使用<a>設(shè)定錨點,讓我們看看方法C. 網(wǎng)頁教學網(wǎng)
<p><a href="#oranges">About Oranges</a></p> 網(wǎng)頁教學網(wǎng)
...一些文字... Webjx.Com
<h2 id="oranges">Oranges Are Tasty</h2>
網(wǎng)頁教學網(wǎng)
...更多文字...
啊哈,id屬性的功能就像name屬性,同樣能為頁面指定錨點,除此之外,方法C還消除了方法A,B使用name屬性是需要的額外<a>標簽,我們減少了源代碼,這向來是好事.
由于id屬性可以加到任何標簽里,因此我們能輕易地在頁面內(nèi)任意為需要的元素加上錨點.在這個例子中,我們選擇為標題加上錨點,但我們也能同樣輕易的為<div>,<form>,<p>,<ul>...還有其他所有標簽加上錨點.
事實上,在大多數(shù)情況下,我們都能為先前存在id屬性添加樣式或者scripting,這是方法C的另一個好處.由于這個緣故,我們不需要為僅僅設(shè)定錨點而加上額外的代碼.
舉例來說,讓我們假設(shè)你在很長的頁面底部有一個用來留下評論的表單,而你想在頁首加上鏈接,這個表單已經(jīng)為了指定獨特樣式而設(shè)了id="comments".這是我們能直接把id當作錨點進行連接,而不必再加上有name屬性的<a>標簽.
網(wǎng)頁教學網(wǎng)
代碼看起大概類似這樣:
<p><a href="#comments">Add a Comment!</a></p>
...很多文字...
<form id="comments" action="/path/to/script">
...表單元素...
</form> Webjx.Com
同時,如果你的頁面很長,那么你在底部加上鏈接到頂部錨點的鏈接,以便用戶"回到頂部".
值得一提的是:雖然看起來十分合適,但最好避免在指定錨點名稱時使用"top",有些瀏覽器保留這個名稱做為特殊用途,那么使用這個名稱可能會造成不一致的結(jié)果,最好選擇一個類似,但又不會造成問題的名稱,或許用#gemesis?還是用#utmost?你自己拿主意了.
古老瀏覽器與id屬性
只使用id屬性當作錨點時,有個重要的缺點值得一提,那就是某些古老的瀏覽器并不支持這個方法.哦喔,在標識你自己的錨點時這的確是個必須考慮的問題,同時這也是向前兼容的不幸示例.讓我們看看最后一個實例,方法D. 網(wǎng)頁教學網(wǎng)
<p><a href="#oranges">About Oranges</a></p>
...一些文字...
<h2><a id="oranges" name="oranges">Oranges Are Tasty</a></h2>
...更多文字...
如果在標記錨點時,你希望達到向前兼容和向后兼容,那么你大概會喜歡這種方法.不管是古老的或是未來的瀏覽器都能正確的辨識具名錨點標簽,但是由于W3C在XHTML1.0建議書中不推薦使用name屬性(http://www.w3.org/TR/xhtml1/#C_8),因此你也用id屬性支持未來的瀏覽器. 網(wǎng)頁教學網(wǎng)
與方法B相同,我們必須留意對<a>標簽造成影響的全局樣式.
Webjx.Com
如果你選擇使用方法D的話,為id與name屬性選用相同名稱完全可以被接受(可能也十分便利),但是只在它們位于相同標簽時才能這樣.此外,也只有幾個特定的標簽允許這么做,精確來說,包含了<a>,<applet>,<frame>,<img>,<map>.因此,我們把id="oranges"從<h2>移到錨點標簽之內(nèi). Webjx.Com
現(xiàn)在我們已經(jīng)看過了四種建立錨點的方法,讓我們歸納一下每種方法的優(yōu)劣. Webjx.Com
雖然我覺得有兩種方法略占優(yōu)勢(C和D),但是這一章里頭大概沒有明顯的優(yōu)勝者,每個方法都有用各自的優(yōu)缺點,讓我們回顧一下每種方法: 網(wǎng)頁教學網(wǎng)
方法A:
方法B:
方法C:
方法D:
看來方法C與D是比較好的選擇,具備向后兼容,較少的標簽,與額外標簽,完全兼容型形成對比,我的建議是考慮讀者群,并且以此進行適當?shù)臎Q定.
舉例來說,如果你正在構(gòu)建一套需要最新瀏覽器才能使用的網(wǎng)絡(luò)應(yīng)用程序或是內(nèi)部網(wǎng)站,那么方法C大概是最棒的選擇.這個方法不需要額外的標簽,但是已知某些4.X版本的瀏覽器無法正常處理這個方法. 網(wǎng)頁教學網(wǎng)
如果你設(shè)計一個會被任何人,在任何時間瀏覽的網(wǎng)站,你或許會選擇方法D,這個方法能夠確保向前兼容以及向后兼容,但是必須背負錨點標簽的些許包袱. 網(wǎng)頁教學網(wǎng)
選擇權(quán)在你,希望在看過每個方法后,能在適當時機選擇適當?shù)姆椒ㄊ褂?
在這個單元內(nèi),我們會看看更多錨點相關(guān)的東西,特別是使用了title屬性的好處,以及利用CSS為錨點加上樣式的方法. 網(wǎng)頁教學網(wǎng)
先前我們明確的討論怎么為頁面段落指定錨點,現(xiàn)在讓我們看看一般的錨點連接,也就是指向其他頁面的鏈接.
為錨點連接加上title屬性能為使用者提供更豐富,更確切的連接目的說明,這屬于易用性功能之一.加上這項資訊能讓使用者更清楚他們即將前往何處,讓他們不必單純以鏈接文字,圖片當作判斷基礎(chǔ). 網(wǎng)頁教學網(wǎng)
使用者如何應(yīng)用這項資訊?我們很快就會看到.
讓我們看看title屬性的應(yīng)用示例,我們能這樣標注普通鏈接:
I just read <a href=http://www.downwithwallpaper.com/tips.html title="How to Take Down Wallpaper">a great article</a> that gave me a few home improvement tips.
這個例子的文字故意寫的有些模糊,而title屬性正好能在這種情況下提供鏈接的額外信息,在這個例子里,是連接到的文章的標題.
另一個使用title屬性常見的方法,是單純使用連接對象的title內(nèi)容(通常這會顯示在瀏覽器的標題列),當然這個方法只能在標題列內(nèi)容具有意義的時候使用,最好同時包含網(wǎng)站的標題以及文章的標題.
網(wǎng)頁教學網(wǎng)
舉例來說,讓我們假設(shè)前一個例子中,連接對象的標題列內(nèi)容是"DownWithWallpaper.com | How to Take Down Wallpaper".除非你只鏈接這個網(wǎng)站的這篇文章,不然你就能把它用在title屬性里,像這樣:
I just read <a href=http://www.downwithwallpaper.com/tips.html title="DownWithWallpaper.com | How to Take Down Wallpaper">a great article</a> that gave me a few home improvement tips.
現(xiàn)在我們把連接對象描述的更加詳細了,但是使用者要怎么取用title屬性里的信息呢?
大多數(shù)現(xiàn)代瀏覽器都支持將title屬性轉(zhuǎn)成"工具提示",當鼠標滑過鏈接時跳出的彩色小框,視覺上,這能讓使用者在點擊鏈接前就能得到這些額外的信息,讓使用者知道即將前往那里是個顯而易見的好處. 網(wǎng)頁教學網(wǎng)
圖7-2是這個示例在瀏覽器中的顯示效果,鼠標放在鏈接上以顯示工具提示.
圖7-2,示例效果,鼠標放在鏈接上以顯示title內(nèi)容.
加上title屬性的另一個好處,就是屏幕閱讀器會讓它與文字內(nèi)容一并念出來,視力不好的使用者與視力正常的人一樣能更了解你想帶他們前往的地方,而這當然是好事.
記得我在本章開始的時候提到過"留意全局鏈接樣式",有個方法能避免在無意間為具名錨點標簽加上樣式,而將我們的目標范圍縮小到具備href屬性的超鏈接上.
在文件的HTML內(nèi)定義鏈接色彩的時代已經(jīng)過去了,現(xiàn)在我們能改用:link,:visited,:active,:hover這些偽類為超鏈接指定各種獨特的樣式,把這些設(shè)計細節(jié)跟標簽分開. Webjx.Com
讓我們看看幾個能夠用在一般鏈接上的CSS樣式:
a:link {
color: green;
text-decoration: none;
font-weight: bold;
} 網(wǎng)頁教學網(wǎng)
十分簡單,上面這段聲明會使所有使用href的錨點標簽變成綠色,粗體,同時不加下劃線.
除了text-decoration:none外,我們也能指定underline(預(yù)設(shè)值),overline(那些愛搞怪的家伙有福了),甚至可以同時使用兩者,像這樣: 網(wǎng)頁教學網(wǎng)
a:link {
color: green;
text-decoration: underline overline;
font-weight: bold;
} Webjx.Com
圖7-3就是一般瀏覽器顯示underline overline組合的方式,有點不符合規(guī)矩,但是可行.
網(wǎng)頁教學網(wǎng)
圖7-3 加上下劃線上劃線文字裝飾的鏈接示例
Webjx.Com
為連接指定獨特樣式的可能性似乎永無止境,大多數(shù)我們在其他標簽上使用過的CSS規(guī)則都可以用在錨點上,舉例來說,我們也能為鏈接指定背景顏色,甚至是背景圖片,或許能用個小圖片,對齊鏈接文字的左邊或右邊,像圖7-4這樣:
圖7-4 為鏈接加上對齊右側(cè)的圖片當作背景
能夠達成7-4效果的CSS大致是這樣: Webjx.Com
a:link {
padding-right: 15px;
background: url(link_icon.gif) no-repeat center right;
}
我們將圖片對齊中線(垂直)以及鏈接文字的右方,并且在右側(cè)加上額外的內(nèi)補丁,讓圖片在顯示的時候不會與任何文字重疊.
厭倦了經(jīng)年累月的單調(diào),實心底線鏈接了嗎?我們可以在邊框?qū)傩灾付╠otted或dashed,我們就能建立...才對了,點狀或虛線的邊框. Webjx.Com
首先,我們需要使用text-decoration屬性關(guān)掉預(yù)設(shè)的下劃線,接著再加上1像素寬,綠色的點狀border-bottom.
a:link {
color: green;
text-decoration: green;
border-bottom: 1px dotted green;
} Webjx.Com
有個重點必須留意,如果你想使點狀邊線的顏色與鏈接文字相同的話,就必須在border-bottom屬性里聲明顏色,結(jié)果如圖7-5所示.
圖7-5 使用點狀邊線的鏈接
網(wǎng)頁教學網(wǎng)
你也能使用上面的做法混用色彩,為鏈接文字指定一種顏色(使用color屬性),并且為邊線指定另一種顏色(使用border-bottom屬性),此外,也可以在border-bottom屬性內(nèi)使用solid,dashed設(shè)定值
留意:windows上的internet explorer再使用1像素寬的時候沒辦法正確顯示dotted屬性,配合dotted邊線使用1像素寬時,顯示的效果看起來就像dashed,沒啥好擔心的,只是個小問題.
別忘了加上a:visited聲明,幫助使用者看出他們曾經(jīng)去過的地方.所有一般CSS規(guī)則都能用在偽類上,為瀏覽過的鏈接指定獨特的樣式:顏色,邊框,背景等等. 網(wǎng)頁教學網(wǎng)
CSS規(guī)則就像這樣:
a:visited {
color: purple;
} Webjx.Com
上面這段聲明能將訪問過的鏈接的顏色改為紫色,最小限度的提醒使用者:他們已經(jīng)看過這個鏈接了,這種效果十分重要就算只像這個例子做一點小改動也行.
同樣的,我們也能使用:hover這個偽類在鼠標滑過鏈接時加上威力無窮的效果.可以使顏色改變,加上邊線,背景顏色或圖片等等,有無窮的可能性.
Webjx.Com
a:link {
color: green;
text-decoration: green;
border-bottom: 1px dotted green;
}
a:hover {
color: blue;
border-bottom: 1px solid blue;
}網(wǎng)頁教學網(wǎng)
上面兩個聲明會把連接變成綠色,加上點狀邊線,但是在鼠標移過鏈接時,鏈接會變成藍色,邊線也會變成實線(同時也變成藍色).
Webjx.Com
這是個簡單的示例,只要試著組合不同的CSS規(guī)則應(yīng)用在連接,鼠標移動效果上,你不必用上javascript或是額外的標簽也能設(shè)計出輕巧的鼠標滑過效果.
網(wǎng)頁教學網(wǎng)
:active 這個偽類代表的是鼠標按鍵按下時鏈接的樣式.你能在此使用相同的規(guī)則:改變顏色,文字裝飾,背景等等,舉例來說,如果你讓鏈接在點擊時變成紅色,就能以視覺提醒使用者:他們選擇前往這個特定的頁面,而且也實際點擊了這個鏈接.
以下的聲明能夠辦到這件事: 網(wǎng)頁教學網(wǎng)
a:active {
color: red;
}Webjx.Com
為了讓之前提到的四個偽類能正常運作,排列的順序變得十分重要,以防他們的設(shè)定值彼此覆蓋.
LoVe / HAte 是個記住正確聲明順序的口訣(http://www.mezzoblue.com/css/cribsheet/):
當然,你可以自創(chuàng)口訣,只要能幫助記憶就行, Love Vegetables? Have Asparagus! (愛吃素菜嗎?來點蘆筍吧)
作為示例,以下是四個先前的例子,依照正確的順序組合成完整套件結(jié)果:
a:link {
color: green;
text-decoration: green;
border-bottom: 1px dotted green;
}
a:visited {
color: purple;
}
a:hover {
color: blue;
border-bottom: 1px solid blue;
}
a:active {
color: red;
} Webjx.Com
