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