第07章創(chuàng)建超鏈接

創(chuàng)建超鏈接

第七章HTML與CSS前臺(tái)頁(yè)面設(shè)計(jì)第七章創(chuàng)建超鏈接

HTML與CSS前臺(tái)頁(yè)面設(shè)計(jì)本章要點(diǎn)超鏈接的概念連接標(biāo)記使用CSS樣式設(shè)置書(shū)簽格式圖片連接圖片映射/////////////////////////////////////////////HTML與CSS前臺(tái)頁(yè)面設(shè)計(jì)目錄：

7.1超鏈接概述

7.2超鏈接標(biāo)記a及其屬性

7.3利用CSS樣式設(shè)置書(shū)簽格式

7.4圖片鏈接

7.5圖片映射鏈接

7.6綜合實(shí)例第七章創(chuàng)建超鏈接

7.1超鏈接概述 超鏈接是一個(gè)網(wǎng)站的靈魂。一個(gè)網(wǎng)站是由多個(gè)頁(yè)面組成的，創(chuàng)建超鏈接有利于頁(yè)面與頁(yè)面之間的跳轉(zhuǎn)，從而將整個(gè)網(wǎng)站中的頁(yè)面有機(jī)地連接起來(lái)，它是網(wǎng)頁(yè)中至關(guān)重要的元素。一般情況是將鼠標(biāo)光標(biāo)移至超連接處時(shí)顯示為下劃線，單擊鼠標(biāo)即可跳轉(zhuǎn)到超鏈接的相應(yīng)頁(yè)面。 每一個(gè)網(wǎng)頁(yè)都有獨(dú)一無(wú)二 的地址，即URL。7.2超鏈接標(biāo)記a及其屬性 超鏈接標(biāo)記雖然在網(wǎng)頁(yè)設(shè)計(jì)制作中占有不可替代的地位，但是其標(biāo)記只有一個(gè)，那就是<a>標(biāo)記。本章介紹的超鏈接應(yīng)用都是基于<a>標(biāo)記基礎(chǔ)上的。 <ahref=”file_url”>鏈接文字</a>

7.2超鏈接標(biāo)記a及其屬性 每一個(gè)文件都有自己的存放位置和路徑，理解一個(gè)文件到要鏈接的文件之間的路徑關(guān)系式創(chuàng)建超鏈接的根本。

URL——統(tǒng)一資源定位器，指的就是每一個(gè)網(wǎng)站都具有的獨(dú)立的地址。同一個(gè)網(wǎng)站下的每一個(gè)網(wǎng)頁(yè)都屬于同一個(gè)地址下，但是，當(dāng)創(chuàng)建網(wǎng)頁(yè)時(shí)，不可能也不需要為每一個(gè)鏈接都輸入完全的地址。我們只需要確定當(dāng)前文檔同站點(diǎn)根目錄之間的相對(duì)路徑關(guān)系。因此，鏈接可以分為以下3種：

絕對(duì)路徑 相對(duì)路徑 根路徑7.2超鏈接標(biāo)記a及其屬性1.絕對(duì)路徑

絕對(duì)路徑為文件提供完全的路徑，包括適用的協(xié)議，如http,ftp,rtsp等。一般常見(jiàn)的有：

當(dāng)鏈接到其他網(wǎng)站中的文件時(shí)，必須使用絕對(duì)鏈接。7.2超鏈接標(biāo)記a及其屬性2.相對(duì)路徑 相對(duì)路徑是最適合網(wǎng)站的內(nèi)部鏈接的。只要是屬于同一網(wǎng)站之下的，即使不在同一個(gè)目錄下，相對(duì)鏈接也非常適合。 相對(duì)鏈接的使用方法為： 如果鏈接到同一目錄下，則只需輸入要鏈接文檔的名稱。 如鏈接到下一級(jí)目錄中的文件，只需先輸入目錄名，然后加“/”，再輸入文件名。 如鏈接到上一級(jí)目錄中的文件，則先輸入“../”，再輸入目錄名、文件名。7.2超鏈接標(biāo)記a及其屬性 要從news1.html鏈接到news2.html，只需在設(shè)置鏈接的位置輸入“news2.html”。 要從news3.html鏈接到國(guó)內(nèi)新聞目錄中的news2.html，只需輸入“國(guó)內(nèi)新聞/news2.html”。 要從news1.html鏈接到上一級(jí)目錄中的news3.html，只需輸入“../news3.html”。7.2超鏈接標(biāo)記a及其屬性3.根路徑

根目錄相對(duì)地址同樣適用于創(chuàng)建內(nèi)部鏈接，但大多數(shù)情況下，不建議使用此種地址形式。它在下列情況下使用：當(dāng)站點(diǎn)的規(guī)模非常大，放置于幾個(gè)服務(wù)器上時(shí)當(dāng)一個(gè)服務(wù)器上同時(shí)放置幾個(gè)站點(diǎn)時(shí) 根目錄相對(duì)地址的書(shū)寫(xiě)形式也很簡(jiǎn)單，首先以一個(gè)斜杠開(kāi)頭，代表根目錄，然后書(shū)寫(xiě)文件夾名，最后書(shū)寫(xiě)文件名。/////////////////////////////////////////////7.2.1內(nèi)部鏈接 所謂內(nèi)部鏈接，指的是在同一個(gè)網(wǎng)站內(nèi)部，不同的HTML頁(yè)面之間的鏈接關(guān)系。在建立網(wǎng)站內(nèi)部鏈接的時(shí)候，要考慮到使鏈接具有清晰的導(dǎo)航結(jié)構(gòu)，使用戶方便地找到所需內(nèi)容的HTML文件。7.2.2書(shū)簽鏈接 建立書(shū)簽鏈接分為兩步，一是建立書(shū)簽，二是為書(shū)簽制作鏈接。 建立書(shū)簽：<aname=”name”>文字</a> 書(shū)簽鏈接：<ahref=”#name”>文字鏈接</a>7.2超鏈接標(biāo)記a及其屬性7.2.3外部鏈接 所謂外部鏈接，指的是跳轉(zhuǎn)到當(dāng)前網(wǎng)站外部，與其他網(wǎng)站中頁(yè)面或其他元素之間的鏈接關(guān)系。這種鏈接在一般情況下需要書(shū)寫(xiě)絕對(duì)地址。 制作外部鏈接的時(shí)候，使用URL統(tǒng)一資源定位符來(lái)定位萬(wàn)維網(wǎng)信息，這種方式可以簡(jiǎn)潔、準(zhǔn)確地描述信息所在的地點(diǎn)。 常見(jiàn)的URL格式如表所示。7.2超鏈接標(biāo)記a及其屬性1.鏈接外部網(wǎng)站 <ahref=”http://”>文字鏈接</a>2.鏈接FTP <ahref=”ftp://”>文字鏈接</a>3.鏈接到news新聞組 <ahref=”news://”>文字鏈接</a>4.發(fā)送e-mail <ahref=”mailto:a@b.c”>發(fā)送郵件</a> <ahref=”mailto:a@b.c?subject=content”>郵件主題</a> <ahref=”mailto:a@b.c?cc=a@b.c”>抄送</a> <ahref=”mailto:a@b.c?bcc=a@b.c”>密件抄送</a>

7.2超鏈接標(biāo)記a及其屬性7.2.4文件（非HTML頁(yè)面）鏈接

除了鏈接到HTML頁(yè)面的超鏈接外，還可以制作提供文件下載的鏈接。如果希望制作下載文件的鏈接，只需在鏈接地址處輸入文件所在的位置即可。當(dāng)瀏覽器用戶單擊鏈接后，瀏覽器會(huì)自動(dòng)判斷文件的類型，以做出不同情況處理。 <ahref=”file_url”>文字鏈接</a> file_url代表文件所在的路徑，可以寫(xiě)下相對(duì)路徑，也可以寫(xiě)下絕對(duì)路徑。7.2超鏈接標(biāo)記a及其屬性7.3利用CSS樣式設(shè)置書(shū)簽樣式

超鏈接在默認(rèn)情況下，鏈接被顯示為帶下劃線，未被查看過(guò)時(shí)為藍(lán)色，訪問(wèn)過(guò)的為紫色。我們可以通過(guò)CSS來(lái)設(shè)置鏈接不同狀態(tài)中的樣式。鏈接分為5個(gè)狀態(tài)，它們的視覺(jué)外觀根據(jù)當(dāng)前狀態(tài)而改變。這些狀態(tài)如下： link鏈接在沒(méi)有任何操作之前的標(biāo)準(zhǔn)狀態(tài) visited鏈接被單擊之后的狀態(tài) hover鼠標(biāo)指針懸停在連接上時(shí)的狀態(tài) focus鏈接獲得焦點(diǎn)時(shí)的狀態(tài) active鏈接正在被單擊時(shí)的狀態(tài) 在默認(rèn)外觀中，link為藍(lán)色，visited為紫色，active為紅色，三者都帶有下劃線。 使用CSS可以調(diào)節(jié)不同狀態(tài)下鏈接的字體、大小、顏色、加粗斜體、下劃線等格式。7.4圖片連接

雖然鏈接主要是基于文本的，但是可以用一個(gè)鏈接來(lái)包裝一個(gè)圖像，從而使其變成一個(gè)鏈接。圖像的鏈接標(biāo)記和文字是相同的。都是<a>標(biāo)記。 區(qū)別在于，文本的鏈接在超鏈接標(biāo)記<a></a>之間輸入文本 <ahref=”file_url”>鏈接文字</a> 圖片的鏈接在<a></a>之間輸入的是圖片的代碼。 <ahref=”file_url”><imgsrc=”img_url”></a> 另外，圖片默認(rèn)情況下沒(méi)有邊框，一旦添加鏈接后會(huì)有藍(lán)色邊框，想要去掉邊框，可在<img>標(biāo)記中將border屬性值設(shè)為0，如<imgsrc=”img_url”border=”0”>，或者在CSS樣式表中將圖片標(biāo)記img的樣式統(tǒng)一設(shè)成img{border:0;}。7.5圖片映射鏈接

圖像映射（imagemap）使你可以在一個(gè)單獨(dú)圖像中定義多個(gè)鏈接。例如，如果你有一個(gè)氣象圖，可以使