第13章網(wǎng)頁中鏈接的設(shè)置

1、使用Dreamweaver創(chuàng)建鏈接即簡單又方便，只要選中要設(shè)置成鏈接的文字或圖像，然后在“屬性”面板上的“鏈接”文本框中添加相應(yīng)的URL地址即可，也可以拖動指向文件的指針圖標(biāo)指向鏈接的文件，同時可以使用“瀏覽”按鈕在當(dāng)?shù)睾途钟蚓W(wǎng)上選擇鏈接的文件。每一個文件都有自己的存放位置和路徑，理解一個文件到要鏈接的另一個文件之間的路徑關(guān)系是創(chuàng)建鏈接的根本。在Dreamweaver CC 中，可以很容易的選擇文件鏈接的類型并設(shè)置路徑。鏈接路徑主要可以分為相對路徑、絕對路徑和根路徑3種。13.1.1相對路徑相對路徑相對路徑最適合網(wǎng)站的內(nèi)部鏈接。只要是屬于同一網(wǎng)站，即使不在同一個目錄中，相對路徑也非常的適合。如

2、果鏈接到同一目錄中，則只需輸入要鏈接文檔的名稱；如果要鏈接到下一級目錄中的文件，只需先輸入目錄名，然后加“/”，再輸入文件名；如果要鏈接到上一級目錄中的文件，則先輸入“./”，再輸入目錄名、文件名。13.1.2創(chuàng)建內(nèi)部鏈接創(chuàng)建內(nèi)部鏈接本節(jié)中所設(shè)置的鏈接都屬于內(nèi)部鏈接，簡單的說，內(nèi)部鏈接就是鏈接站點內(nèi)部的文件，在“鏈接”文本框中用戶需要輸入文檔的相對路徑，一般使用“指向文件”和“瀏覽文件”的方式來創(chuàng)建。課堂案例課堂案例創(chuàng)建內(nèi)部鏈接創(chuàng)建內(nèi)部鏈接課堂案例：創(chuàng)建內(nèi)部鏈接最終文件：光盤最終文件第13章13-1-2.html視頻：光盤視頻第13章13-1-2.swf13.1.3絕對路徑絕對路徑絕對路徑為文

3、件提供完整的路徑，包括使用的協(xié)議（如http、ftp、rtsp等）。一般常見的絕對路徑如http:/、/等。絕對路徑也會出現(xiàn)在尚未保存的網(wǎng)頁上，如果在沒有保存的網(wǎng)頁上插入圖像或添加鏈接，Dreamweaver CC 會暫時使用絕對路徑，網(wǎng)頁保存后，Dreamweaver CC 會自動將絕對路徑轉(zhuǎn)換為相對路徑。13.1.4創(chuàng)建外部鏈接創(chuàng)建外部鏈接外部鏈接比內(nèi)部鏈接更好理解，即在“鏈接”文本框中直接輸入所鏈接頁面的URL絕對地址，并且包括所使用的協(xié)議（例如對于Web頁面，通常使用http:/，即超文本傳輸協(xié)議）。課堂案例課堂案例創(chuàng)建外部鏈接創(chuàng)建外部鏈接課堂案例：

4、創(chuàng)建外部鏈接最終文件：光盤最終文件第13章13-1-4.html視頻：光盤視頻第13章13-1-4.swf13.1.5根路徑根路徑根路徑同樣適用于創(chuàng)建內(nèi)部鏈接，但大多數(shù)情況下，不建議使用此種路徑形式。通常它只在以下兩種情況下使用，一種是當(dāng)站點的規(guī)模非常大，放置于幾個服務(wù)器上時；另一種情況是當(dāng)一個服務(wù)器上同時放置幾個站點時。13.2.1創(chuàng)建文字鏈接創(chuàng)建文字鏈接文字鏈接即以文字作為媒介的鏈接，它是網(wǎng)頁中最常被使用的鏈接方式，具有文件小、制作簡單和便于維護(hù)的特點。13.2.2創(chuàng)建圖像鏈接創(chuàng)建圖像鏈接圖像也是常被使用的鏈接媒體，它和文字鏈接非常相似。Dreamweaver CC 為文字與圖像提供了多種

5、創(chuàng)建鏈接的方法，而且可以通過對其屬性的控制，達(dá)到一種較好的視覺效果，同時它還有效地使頁面之間形成一個龐大而緊密聯(lián)系的整體。課堂案例課堂案例創(chuàng)建文字鏈接創(chuàng)建文字鏈接課堂案例：創(chuàng)建文字鏈接最終文件：光盤最終文件第13章13-2-1.html視頻：光盤視頻第13章13-2-1.swf課堂案例課堂案例創(chuàng)建圖像鏈接創(chuàng)建圖像鏈接課堂案例：創(chuàng)建圖像鏈接最終文件：光盤最終文件第13章13-2-2.html視頻：光盤視頻第13章13-2-2.swf13.2.3鏈接打開方式鏈接打開方式無論是為文字設(shè)置鏈接還是為圖像設(shè)置鏈接，在“屬性”面板上的“鏈接”文本框旁都有一個“目標(biāo)”下拉列表，該選項主要用于設(shè)置鏈接頁面的打

6、開方式，在該選項的下拉列表中包含5個選項。_blank：打開一個新的瀏覽器窗口，原來的網(wǎng)頁窗口仍然存在，這種方法可以應(yīng)用在用戶希望保留主要的窗口時。new：與_blank類似，將鏈接的頁面以一個新的瀏覽器打開。_parent：如果網(wǎng)頁中使用“框架”，新鏈接的網(wǎng)頁將回到上一級“框架”所在的窗口中，這種鏈接方式多用于“框架”文件中需要回到使用“框架”首頁的情況。_self：表示在當(dāng)前文檔中打開。_top：表示在鏈接所在的最高級窗口中打開。在網(wǎng)頁中使用超鏈接除了可以實現(xiàn)文件之間的跳轉(zhuǎn)之外，還可以實現(xiàn)文件下載鏈接、E-mail鏈接、圖像映射等其他的一些鏈接形式。本節(jié)將向讀者詳細(xì)介紹其他一些特殊鏈接形式

7、的創(chuàng)建方法。13.3.1空鏈接空鏈接有些客戶端行為的動作，需要由超鏈接來調(diào)用，這時就需要用到空鏈接了。訪問者單擊網(wǎng)頁中的空鏈接，將不會打開任何文件。13.3.2文件下載鏈接文件下載鏈接鏈接到下載文件的方法和鏈接到網(wǎng)頁的方法完全一樣。當(dāng)被鏈接的文件是exe文件或zip文件等瀏覽器不支持的類型時，這些文件會被下載，這就是網(wǎng)上下載的方法。例如要給頁面中的文字或圖像添加下載鏈接，希望用戶單擊文字或圖像后下載相關(guān)的文件，這時只需要將文字或圖像選中，直接鏈接到相關(guān)的壓縮文件就可以了。課堂案例課堂案例在網(wǎng)頁中創(chuàng)建在網(wǎng)頁中創(chuàng)建空鏈接空鏈接課堂案例：在網(wǎng)頁中創(chuàng)建空鏈接最終文件：光盤最終文件第13章13-3-1.

8、html視頻：光盤視頻第13章13-3-1.swf課堂案例課堂案例在網(wǎng)頁中創(chuàng)建在網(wǎng)頁中創(chuàng)建文件下載鏈接文件下載鏈接課堂案例：在網(wǎng)頁中創(chuàng)建文件下載鏈接最終文件：光盤最終文件第13章13-3-2.html視頻：光盤視頻第13章13-3-2.swf13.3.3E-Mail鏈接鏈接無論是個人網(wǎng)站還是商業(yè)網(wǎng)站，都經(jīng)常在網(wǎng)頁的最下方留下站長或公司的E-mail地址，當(dāng)網(wǎng)友對網(wǎng)站有意見或建議時，就可以直接單擊E-mail超鏈接，給網(wǎng)站的相關(guān)人員發(fā)送郵件。E-mail超鏈接可以建立在文字中，也可以建立在圖像中。課堂案例課堂案例在網(wǎng)頁中創(chuàng)在網(wǎng)頁中創(chuàng)建建E-Mail鏈接鏈接課堂案例：在網(wǎng)頁中創(chuàng)建E-Mail鏈接最

9、終文件：光盤最終文件第13章13-3-3.html視頻：光盤視頻第13章13-3-3.swf課堂案例課堂案例在網(wǎng)頁中創(chuàng)在網(wǎng)頁中創(chuàng)建腳本鏈接建腳本鏈接課堂案例：在網(wǎng)頁中創(chuàng)建腳本鏈接最終文件：光盤最終文件第13章13-3-4.html視頻：光盤視頻第13章13-3-4.swf13.3.4腳本鏈接腳本鏈接腳本鏈接對多數(shù)人來說是比較陌生的詞匯，腳本鏈接一般用于提供給瀏覽者有關(guān)于某個方面的額外信息，而不用離開當(dāng)前頁面。腳本鏈接具有執(zhí)行JavaScript代碼的功能，例如校驗表單等，下面為頁面添加一個腳本鏈接。13.3.5圖像熱點鏈接圖像熱點鏈接不僅可以將整張圖像作為鏈接的載體，還可以將圖像的某一部分設(shè)為

10、鏈接，這要通過設(shè)置圖像映射來實現(xiàn)。熱點鏈接的原理就是利用HTML語言在圖像上定義一定形狀的區(qū)域，然后給這些區(qū)域加上鏈接，這些區(qū)域被稱為熱點。圖像映射就是一張圖片上多個不同的區(qū)域擁有不同的鏈接地址。課堂案例課堂案例在網(wǎng)頁中創(chuàng)建圖像熱點鏈接在網(wǎng)頁中創(chuàng)建圖像熱點鏈接課堂案例：在網(wǎng)頁中創(chuàng)建圖像熱點鏈接最終文件：光盤最終文件第13章13-3-5.html視頻：光盤視頻第13章13-3-5.swf使用HTML中的超鏈接標(biāo)簽創(chuàng)建的超鏈接非常普通，除了顏色發(fā)生變化和帶有下劃線，其他的特征和普通文本沒有太大的區(qū)別，這種傳統(tǒng)的超鏈接樣式顯然無法滿足網(wǎng)頁設(shè)計制作的需求，這時就可以通過CSS樣式對網(wǎng)頁中的超鏈接樣式進(jìn)

11、行控制。對于超鏈接的修飾，通?？梢圆捎肅SS偽類。偽類是一種特殊的選擇器，能被瀏覽器自動識別。其最大的優(yōu)勢是在不同狀態(tài)下可以對超鏈接定義不同的樣式效果，是CSS本身定義的一種類。在CSS樣式中提供了4種用于超鏈接狀態(tài)的偽類，分別介紹如下。a:link：定義超鏈接對象在沒有訪問前的樣式。a:hover：定義當(dāng)鼠標(biāo)移至超鏈接對象上時的樣式。a:active：定義當(dāng)鼠標(biāo)單擊超鏈接對象時的樣式。a:visited：定義超鏈接對象已經(jīng)被訪問過后的樣式。在了解了超鏈接的CSS偽類后，我們就可以通過對超鏈接CSS偽類的定義來實現(xiàn)網(wǎng)頁中各種不同的超鏈接效果。課堂案例課堂案例美化網(wǎng)頁中的超鏈接文字美化網(wǎng)頁中的超鏈接文字課堂案例：美化網(wǎng)頁中的超鏈接文字最終文件：光盤最終文件第13章13-4.html視頻：光盤視頻第13章13-4.swf課堂案例課堂案例制作音樂類網(wǎng)站頁面制作音樂類網(wǎng)站頁面課堂案例：制作音樂類網(wǎng)站頁面最終文件：光盤最終文件第13章13-5.