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

1、HTML與CSS前臺頁面設(shè)計(jì)創(chuàng)建超鏈接 第七章HTML與CSS前臺頁面設(shè)計(jì)HTML與CSS前臺頁面設(shè)計(jì)第七章 創(chuàng)建超鏈接 HTML與CSS前臺頁面設(shè)計(jì)本章要點(diǎn) 超鏈接的概念 連接標(biāo)記 使用CSS樣式設(shè)置書簽格式 圖片連接 圖片映射http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/www.xunchi- http:/ http:/ http:/ http:/ http:/ http:/

2、 http:/ http:/ http:/ / http:/ http:/ http:/ http:/ http:/ http:/ http:/www.gz- http:/www.gz- http:/ http:/ http:/ http:/ 超鏈接概述7.2 超鏈接標(biāo)記a及其屬性7.3 利用CSS樣式設(shè)置書簽格式7.4 圖片鏈接7.5 圖片映射鏈接7.6 綜合實(shí)例第七章 創(chuàng)建超鏈接 HTML與CSS前臺頁面設(shè)計(jì)7.1 超鏈接概述超鏈接是一個(gè)網(wǎng)站的靈魂。一個(gè)網(wǎng)站是由多個(gè)頁面組成的，創(chuàng)建超鏈接有利于頁面與頁面之間的跳轉(zhuǎn)，從而將整個(gè)網(wǎng)站中的頁面有機(jī)地連接起來，

3、它是網(wǎng)頁中至關(guān)重要的元素。一般情況是將鼠標(biāo)光標(biāo)移至超連接處時(shí)顯示為下劃線，單擊鼠標(biāo)即可跳轉(zhuǎn)到超鏈接的相應(yīng)頁面。每一個(gè)網(wǎng)頁都有獨(dú)一無二的地址，即URL。HTML與CSS前臺頁面設(shè)計(jì)7.2 超鏈接標(biāo)記a及其屬性超鏈接標(biāo)記雖然在網(wǎng)頁設(shè)計(jì)制作中占有不可替代的地位，但是其標(biāo)記只有一個(gè)，那就是標(biāo)記。本章介紹的超鏈接應(yīng)用都是基于標(biāo)記基礎(chǔ)上的。鏈接文字鏈接文字 HTML與CSS前臺頁面設(shè)計(jì)7.2 超鏈接標(biāo)記a及其屬性每一個(gè)文件都有自己的存放位置和路徑，理解一個(gè)文件到要鏈接的文件之間的路徑關(guān)系式創(chuàng)建超鏈接的根本。URL統(tǒng)一資源定位器，指的就是每一個(gè)網(wǎng)站都具有的獨(dú)立的地址。同一個(gè)網(wǎng)站下的每一個(gè)網(wǎng)頁都屬于同一個(gè)地址

4、下，但是，當(dāng)創(chuàng)建網(wǎng)頁時(shí)，不可能也不需要為每一個(gè)鏈接都輸入完全的地址。我們只需要確定當(dāng)前文檔同站點(diǎn)根目錄之間的相對路徑關(guān)系。因此，鏈接可以分為以下3種：絕對路徑相對路徑根路徑 HTML與CSS前臺頁面設(shè)計(jì)7.2 超鏈接標(biāo)記a及其屬性1.絕對路徑絕對路徑為文件提供完全的路徑，包括適用的協(xié)議，如http,ftp,rtsp等。一般常見的有：http:/當(dāng)鏈接到其他網(wǎng)站中的文件時(shí)，必須使用絕對鏈接。 HTML與CSS前臺頁面設(shè)計(jì)7.2 超鏈接標(biāo)記a及其屬性2.相對路徑相對路徑是最適合網(wǎng)站的內(nèi)部鏈接的。只要是屬于同一網(wǎng)站之下的，即使不在同一個(gè)目錄下，相對鏈接也非常適合。

5、相對鏈接的使用方法為：如果鏈接到同一目錄下，則只需輸入要鏈接文檔的名稱。如鏈接到下一級目錄中的文件，只需先輸入目錄名，然后加“/”，再輸入文件名。如鏈接到上一級目錄中的文件，則先輸入“./”，再輸入目錄名、文件名。HTML與CSS前臺頁面設(shè)計(jì)7.2 超鏈接標(biāo)記a及其屬性要從news1.html鏈接到news2.html，只需在設(shè)置鏈接的位置輸入“news2.html”。要從news3.html鏈接到國內(nèi)新聞目錄中的news2.html，只需輸入“國內(nèi)新聞/news2.html”。要從news1.html鏈接到上一級目錄中的news3.html，只需輸入“./news3.html”。HTML與C

6、SS前臺頁面設(shè)計(jì)7.2 超鏈接標(biāo)記a及其屬性3.根路徑根目錄相對地址同樣適用于創(chuàng)建內(nèi)部鏈接，但大多數(shù)情況下，不建議使用此種地址形式。它在下列情況下使用： 當(dāng)站點(diǎn)的規(guī)模非常大，放置于幾個(gè)服務(wù)器上時(shí) 當(dāng)一個(gè)服務(wù)器上同時(shí)放置幾個(gè)站點(diǎn)時(shí)根目錄相對地址的書寫形式也很簡單，首先以一個(gè)斜杠開頭，代表根目錄，然后書寫文件夾名，最后書寫文件名。 HTML與CSS前臺頁面設(shè)計(jì)http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ ht

7、tp:/ http:/www.xunchi- http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ / http:/ http:/ http:/ http:/ http:/ http:/ http:/www.gz- http:/www.gz- http:/ http:/ http:/ http:/ 內(nèi)部鏈接所謂內(nèi)部鏈接，指的是在同一個(gè)網(wǎng)站內(nèi)部，不同的HTML頁面之間的鏈接關(guān)系。在建立網(wǎng)站內(nèi)部鏈接的時(shí)候，要考慮到使鏈接具有清晰的導(dǎo)航結(jié)構(gòu)，使用戶方便地找到所需內(nèi)容的HTML文件。7.2.2

8、 書簽鏈接建立書簽鏈接分為兩步，一是建立書簽，二是為書簽制作鏈接。建立書簽：文字文字書簽鏈接：文字鏈接文字鏈接7.2 超鏈接標(biāo)記a及其屬性HTML與CSS前臺頁面設(shè)計(jì)7.2.3 外部鏈接所謂外部鏈接，指的是跳轉(zhuǎn)到當(dāng)前網(wǎng)站外部，與其他網(wǎng)站中頁面或其他元素之間的鏈接關(guān)系。這種鏈接在一般情況下需要書寫絕對地址。制作外部鏈接的時(shí)候，使用URL統(tǒng)一資源定位符來定位萬維網(wǎng)信息，這種方式可以簡潔、準(zhǔn)確地描述信息所在的地點(diǎn)。常見的URL格式如表所示。7.2 超鏈接標(biāo)記a及其屬性HTML與CSS前臺頁面設(shè)計(jì)1.鏈接外部網(wǎng)站文字鏈接文字鏈接2.鏈接FTP文字鏈接文字鏈接3.鏈接到news新聞組文字鏈接文字鏈接4.

9、發(fā)送e-mail發(fā)送郵件發(fā)送郵件郵件主題郵件主題抄送抄送密件抄送密件抄送 7.2 超鏈接標(biāo)記a及其屬性HTML與CSS前臺頁面設(shè)計(jì)7.2.4 文件（非HTML頁面）鏈接 除了鏈接到HTML頁面的超鏈接外，還可以制作提供文件下載的鏈接。如果希望制作下載文件的鏈接，只需在鏈接地址處輸入文件所在的位置即可。當(dāng)瀏覽器用戶單擊鏈接后，瀏覽器會(huì)自動(dòng)判斷文件的類型，以做出不同情況處理。文字鏈接文字鏈接file_url代表文件所在的路徑，可以寫下相對路徑，也可以寫下絕對路徑。7.2 超鏈接標(biāo)記a及其屬性HTML與CSS前臺頁面設(shè)計(jì)7.3 利用CSS樣式設(shè)置書簽樣式 超鏈接在默認(rèn)情況下，鏈接被顯示為帶下劃線，未

10、被查看過時(shí)為藍(lán)色，訪問過的為紫色。我們可以通過CSS來設(shè)置鏈接不同狀態(tài)中的樣式 。鏈接分為5個(gè)狀態(tài)，它們的視覺外觀根據(jù)當(dāng)前狀態(tài)而改變。這些狀態(tài)如下：link鏈接在沒有任何操作之前的標(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)下鏈接的字體、大小、顏色、加粗斜體、下劃線等格式。 HTML與CSS前臺頁面設(shè)計(jì)7.4 圖片連接 雖然鏈接主要是基于文本的，但是可以用一個(gè)鏈接來包裝一個(gè)圖像，從

11、而使其變成一個(gè)鏈接。圖像的鏈接標(biāo)記和文字是相同的。都是標(biāo)記。區(qū)別在于，文本的鏈接在超鏈接標(biāo)記之間輸入文本鏈接文字鏈接文字圖片的鏈接在之間輸入的是圖片的代碼。另外，圖片默認(rèn)情況下沒有邊框，一旦添加鏈接后會(huì)有藍(lán)色邊框，想要去掉邊框，可在標(biāo)記中將border屬性值設(shè)為0，如，或者在CSS樣式表中將圖片標(biāo)記img的樣式統(tǒng)一設(shè)成imgborder:0;。HTML與CSS前臺頁面設(shè)計(jì)7.5 圖片映射鏈接 圖像映射（image map）使你可以在一個(gè)單獨(dú)圖像中定義多個(gè)鏈接。例如，如果你有一個(gè)氣象圖，可以使用一個(gè)圖像映射鏈接到各個(gè)地區(qū)的氣象預(yù)報(bào)。圖像映射中可單擊的范圍可以是基本形狀（矩形或者圓形），也可以是復(fù)雜的多邊形。HTML與CSS前臺頁面設(shè)計(jì)7.6 綜合實(shí)例 HTML與CSS前臺頁面設(shè)計(jì)第七章本章結(jié)束創(chuàng)建超鏈接 http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/ http:/www.xunch