超級鏈接的使用

1、超級鏈接的使用1本課學習目標 理解超級鏈接的作用及類型 理解鏈接路徑及各類型的使用 掌握文本和圖片鏈接的創(chuàng)建方法 掌握Email、錨點鏈接的創(chuàng)建方法27.1 超級鏈接概述 7.1.1 超級鏈接的概念及作用 超級鏈接（超鏈接或鏈接）是從源端點到目標端點的一種跳轉，可以看作是一種文件的指針。它提供了相關聯(lián)文件的路徑，以指向目標端點的文件，并可跳轉到相應的文件； 它是文檔與文檔之間的鏈接，當單擊它時，超鏈接可指向另外一個頁面或文件。鏈接目標通常是另外一個網頁，但也可以是一幅圖片、一個電子郵件地址或其他文檔。 在瀏覽器中，超鏈接通常在鼠標指向它的時候，會變成手形，單擊即可打開超鏈接。 37.1.2 超

2、文本鏈接標記 在HTML語言中，超文本鏈接標記通過錨標記和來實現(xiàn)。此標記需成對出現(xiàn)，以開始，結束。常用的屬性有：href：定義鏈接目標。title：定義當鼠標移動到鏈接上時出現(xiàn)的提示文字。target：設定鏈接目標顯示的窗口，如target=_bank表示在新窗口中打開目標。例如： 搜狐主頁 這段代碼表示：當鼠標移動到“搜狐主頁”上要顯示“ ” 當單擊“搜狐主頁”這幾個文字時，將 中打開“ ”網站主頁。4“目標(R)”的各選項作用如下： _blank：將鏈接的文檔在一個新的、未命名的瀏覽器窗口中打開。 _parent：將鏈接的文檔在該鏈接所在框架的父框架或父窗口中打開。如果包含鏈接的框架不是嵌

3、套框架，則所鏈接的文檔在整個瀏覽器窗口中打開。 _self：將鏈接的文檔在鏈接所在的同一框架或窗口中打開，此目標為默認值，即不指定目標，則在同一框架或窗口打開文檔。 _top：將鏈接的文檔在整個瀏覽器窗口中打開，從而取代當前窗口的所有框架。 l5 在一個文檔中可以創(chuàng)建幾種類型的鏈接(鏈接到其它文檔或文件（如圖形、影片、PDF 或聲音文件）的鏈接)： (1)文本、圖片、熱點鏈接 (2)命名錨記鏈接，此類鏈接跳轉至文檔內的特定位置。 (3)電子郵件鏈接，此類鏈接新建一個收件人地址已經填好的空白電子郵件。 (4)空鏈接和腳本鏈接，此類鏈接使您能夠在對象上附加行為，或者創(chuàng)建執(zhí)行 JavaScript

4、代碼的鏈接。 注意：創(chuàng)建鏈接之前，一定要清楚文檔相對路徑、站點根目錄相對路徑以及絕對路徑的工作方式。 7.1.3超級鏈接的類型6鏈接路徑的類型： 1、絕對路徑 2、相對路徑 (1) 文檔相對路徑 (2) 根目錄相對路徑7.1.4 鏈接路徑71、 絕對地址 絕對路徑提供了所鏈接網頁的完整URL。 例如： 絕對路徑由http:/、等開始的，它不僅提供所鏈接文檔的完整 URL，而且包括所使用的協(xié)議（如對于 Web服務為http:/，F(xiàn)TP服務為）。 注意： 盡管對本地鏈接（即到同一站點內文檔的鏈接）也可使用絕對路徑鏈接，但不建議采用這種方式，因為一旦將此站點移動到其它服務器，則所有本地絕對路徑鏈接都

5、將斷開。 若本地鏈接使用相對路徑還能在需要在站點內移動文件時，提供更大的靈活性。82、相對地址 相對地址是由文件名及其擴展名組成的，并且假設URL指向位于同一臺WEB服務器上的文件。 相對路徑的基本思想是省略掉對于當前網頁和所鏈接的網頁都相同的絕對URL部分，而只提供不同的路徑部分。 91相對路徑 (1) 文檔相對路徑 在當前網頁與所鏈接的網頁處于同一文件夾內，而且可能一直保持這種狀態(tài)的情況下，文檔相對路徑特別有用。文檔相對路徑也可用來鏈接到其它文件夾中的文檔，方法是利用文件夾層次結構，指定從當前網頁到所鏈接網頁的路徑。文檔相對路徑有以下三種形式： 鏈接目標與當前網頁在同一文件夾中時，只需提供

6、被鏈接網頁的文件名即可。 鏈接目標位于當前網頁所在文件夾的子文件夾中時，需要提供子文件夾名和文件名，中間用正斜杠(/)分隔。如：“dreamweaver/main.html”。 鏈接目標位于當前網頁所在文件夾的父文件夾中時，要在文件名前加上“./”(“.”表示上級文件夾)。10 鏈接目標與當前網頁在同一文件夾中時，只需提供被鏈接網頁的文件名即可。如：“herf.html” 鏈接目標位于當前網頁所在文件夾的子文件夾中時，需要提供子文件夾名和文件名，中間用正斜杠(/)分隔。如：“”。 鏈接目標位于當前網頁所在文件夾的父文件夾中時，要在文件名前加上“./”(“.”表示上級文件夾)。如：“./inde

7、x.html”1112 3、站點根目錄相對路徑 站點根目錄相對路徑以一個正斜杠(/)開始，該正斜杠表示站點根文件夾。如，/file/ herf2.htm 是文件 (herf2.htm) 的站點根目錄相對路徑，該文件位于站點根文件夾的file子文件夾中。 在某些 Web 站點中，需要經常在不同文件夾之間移動 HTML 文件，在這種情況下，站點根目錄相對路徑通常是指定鏈接的最佳方法。移動含有根目錄相對鏈接的文檔時，不需要更改這些鏈接 。131、實例創(chuàng)意 下面以實例制作一個簡單網頁，實例中只用到簡單的幾個頁面元素。各個文件的文件名及位置如圖如示。7.2.1 實例：創(chuàng)建超級鏈接（文本和圖片）7.2 創(chuàng)

8、建超級鏈接14方法一： 選擇文字，然后單擊屬性面板上“鏈接”文本框右側的文件夾圖標，彈出“選擇文件”對話框，選擇文件單擊“確定”按鈕關閉對話框。方法二： 將鼠標光標定位于頁面中的文字“關于本站”后，選擇主菜單“【插入】【超級鏈接】”，彈出“超級鏈接”對話框，輸入相應內容。方法三： 打開屬性面板，選擇“鏈接(L)”右邊的“指向文件”圖標“”，拖動該圖標至站點目錄下的鏈接文件，即可自動生成鏈接。方法四： 打開屬性面板，在“鏈接(L)” 直接輸入鏈接地址，如要鏈接到站點內的其他文檔，輸入目標文件的具體路徑與文件名；要鏈接到站點以外的文檔，則輸入完整 URL，而且包括所使用的協(xié)議。 157.2.2 實

9、例：創(chuàng)建電子郵件鏈接1、 實例創(chuàng)意 電子郵件鏈接在網頁中也經?？梢?，在網頁中添加電子郵件的目的在于可以使網頁的瀏覽者方便發(fā)送郵件，點擊電子郵件鏈接即可自動打開Microsoft Outlook Express，并自動創(chuàng)建新郵件。16方法一： 選中所要創(chuàng)建電子郵件的文本，“”，屬性面板的“鏈接(L)”輸入mailto:，如圖5-1-13所示。 17方法二： 將鼠標光標定位于頁面中要顯示電子郵件的地方，選擇主菜單“【插入】【電子郵件鏈接(L) 】”，彈出“電子郵件鏈接”對話框，輸入相應內容后單擊“確定”按鈕，如圖5-1-14所示?！半娮余]件鏈接”對話框中，設置以下選項：文本。顯示在頁面中的文字，可

10、以為Email地址或其它文字。E-mail。郵件地址。187.2.3 實例：創(chuàng)建錨點鏈接 1、 實例創(chuàng)意 錨點即為一個文檔中的某一個特定的位置的標記，通過首先創(chuàng)建錨點，可使某個超級鏈接鏈接到文檔的某個錨點，方便文檔之間的跳轉。 錨點通常放在文檔的特定主題處或頂部。然后可以創(chuàng)建到這些錨點的鏈接，這些鏈接可快速將訪問者帶到指定位置。 創(chuàng)建到錨點的鏈接的過程分為兩步。首先，創(chuàng)建錨點，然后創(chuàng)建到該錨點的鏈接。 19注意： 1.創(chuàng)建到錨點的鏈接，會在錨點名稱前加一個“”號，表示后面為一個錨點的名稱。2.若要創(chuàng)建到其他文檔的錨點，只要在文檔名后加“錨點名稱”即可。如要鏈接到abount.htm文檔中一個名

11、為aboutme的錨點，只需在鏈接中輸入“about.htm#aboutme”即可。如圖所示。3.選中打開的文檔中文本或圖像，并拖動到所要鏈接的錨點，也同樣可以創(chuàng)建到錨點的鏈接。 直接輸入：about.htm#aboutme20綜合練習 一、選擇題 1、以下哪個不是絕對路徑？ A） B） C） D） ./index.asp 2、以下哪個不能創(chuàng)建超級鏈接？ A）文本 B）圖片 C）郵件地址 D）視頻 二、填空題 1超級鏈接路徑可分為 、 、 、課后練習：如何在網頁中創(chuàng)建文件下載鏈接？21本課小結 超級鏈接是網站及網頁的基本元素，要建立一個能夠實際應用的網站，必須將網站中的各個網頁通過超鏈接方式聯(lián)

12、系起來，這樣才能夠讓瀏覽者在不同的頁面之間跳轉。主要介紹了Dreamweaver 超級鏈接的概念、類型和使用方法，包括文本鏈接、圖片鏈接、Email鏈接、錨點鏈接。 超級鏈接可以分為多種類型：文字、圖片、Email、錨點、熱區(qū)等, 應熟練掌握這些類型。 22本課學習目標 掌握文本和圖片鏈接的創(chuàng)建方法 掌握Email、錨點鏈接的創(chuàng)建方法 掌握熱區(qū)鏈接的創(chuàng)建方法掌握鏈接效果的編輯方法235.1.5 實例：創(chuàng)建熱區(qū)鏈接 1、 實例創(chuàng)意 一張圖片內可以創(chuàng)建包含多個鏈接，圖像內不同的區(qū)域或文字都可以指向具體鏈接目標。圖像圖內創(chuàng)建鏈接的區(qū)域稱為“熱區(qū)”，熱區(qū)與鏈接目標逐一對應，單擊熱區(qū)后，即可對鏈接目標進行跟蹤、訪問。 熱區(qū)的形狀有三種：矩形、圓形與多邊形，在Dreamweaver 的“設計視圖”模式下，這些熱區(qū)是可見的，但在WEB瀏覽內這些邊框卻是不可見的，因此有的必要在圖像地圖內添加一些文本標識，為瀏覽者了解熱點的確切位置提供幫助。 24255.2 編輯鏈接效果 5.2.1 實例：自定義鏈接顏色 鏈接顏色可分為三種狀態(tài)：鏈接顏色（Link）、訪問過的鏈接顏色（Visited）、活動鏈接顏色（Active），通過CSS設置，鏈接還有第四種狀態(tài)，即指向鏈接時的動態(tài)顏色（Hover），默認的文字鏈接樣式都是帶下劃線的效果。在Dreamweaver中允許用戶自定義鏈接的顏色