第四章超鏈接

1、第4章 超鏈接重點和難點1、鏈接的檢查與測試2、絕對路徑3、相對路徑4、創(chuàng)建超鏈接5、錨點的建立1項目一：超鏈接基礎知識 超鏈接就是一種超媒體鏈接技術， 超鏈接是指從一個網頁指向一個目標的連接關系,這個目標可以是另一個網頁,也可以是相同網頁上的不同位置,還可以是一個圖片,一個電子郵件地址,一個文件,甚至是一個應用程序。1、超鏈接中的路徑（1）絕對路徑絕對路徑是指被鏈接對象的完整路徑，是一個完整URL地址。 （2）根目錄相對路徑 根目錄相對路徑是指從站點根文件夾到被鏈接對象經過的路徑。站點上所有公開的文件都存放在站點的根目錄下。根目錄相對路徑以一個正斜杠“/”開始，該正斜杠表示站點根文件夾。 （

2、3）文檔目錄相對路徑 文檔目錄相對路徑是指以當前文檔所在位置為起點到被鏈接對象經由的路徑，使用相對路徑可以省去當前文檔與被鏈接對象的絕對路徑或根目錄相對路徑中相同的部分，保留不同的部分。文檔目錄相對路徑適合于網站的內部鏈接。22、 超級鏈接的類型 超級鏈接分為內部鏈接和外部鏈接。內部鏈接又稱為本地鏈接，是指同一網站文件之間的鏈接。外部鏈接是指不同網站文件之間的鏈接。（1）文檔鏈接：指向其他文檔或文件的鏈接。例如，圖像、影片或聲音文件的鏈接。 （2）命名錨記鏈接：又稱為書簽鏈接，這種鏈接將轉到文檔中的一個指定位置。（3）電子郵件鏈接：這種鏈接將創(chuàng)建一個新的空白電子郵件，其中收件人地址已經填入。（

3、4）空鏈接：這種鏈接不會跳轉到任何位置，對于附加Dreamweaver行為有特殊用處。（5）腳本鏈接：創(chuàng)建執(zhí)行JavaScript代碼的鏈接。33、 創(chuàng)建本地鏈接的幾種方法（1） 使用站點地圖中的“指向文件”圖標創(chuàng)建鏈接-操作步驟：在“站點”窗口，單擊“站點地圖”圖標并選擇“地圖和文件”選項，同時顯示站點地圖和本地文件。在站點地圖中，選中一個HTML文件，“指向文件”圖標自動顯示在文件右側。拖動“指向文件”圖標，使其指向站點地圖中的另一個文件；或拖動“指向文件”圖標，使其指向“本地文件”視圖中的某個文件。釋放鼠標。所鏈接文件的名稱與路徑顯示在狀態(tài)欄。 （2）使用屬性面板中的“指向文件”圖標創(chuàng)建

4、鏈接-操作步驟：在文檔窗口的“設計”視圖中選取文本或圖像（例如圖4-31所示的左文檔）。將屬性面板中的“鏈接”框右側的“指向文件”圖標拖動到另外打開的文檔上（例如圖4-31所示的右文檔）。釋放鼠標，創(chuàng)建結束。4（3）使用打開文檔之間的指向創(chuàng)建鏈接-操作步驟：在文檔窗口的“設計”視圖中選取文本。按住Shift鍵并拖動被選中的文本，指向另一個打開的文檔，或指向站點窗口中的某個文件。釋放鼠標，創(chuàng)建結束。（4） 使用菜單創(chuàng)建鏈接-操作步驟：在文檔窗口的“設計”視圖中選取文本或圖像。選擇“修改”菜單中的“創(chuàng)建鏈接”選項，選取鏈接所指向的文件。（5）使用快捷菜單創(chuàng)建鏈接-操作步驟：在文檔窗口的“設計”視圖

5、中選取文本或圖像。在選取的文本或圖像上單擊鼠標右鍵，從快捷菜單中選擇“創(chuàng)建鏈接”選項，然后選取鏈接所指向的文件。（6）創(chuàng)建外部鏈接-操作步驟：選中需要創(chuàng)建外部鏈接的文字或圖像。例如，“搜狐網”。在屬性面板的“鏈接”框中輸入該鏈接的外部網站地址“”。 5項目二：超鏈接實驗（書上典型剖析：信息導航列表）任務一：項目說明（1）在“Mystuhome”下建立文件夾“超鏈接”，在 “超鏈接”文件夾下建立網頁“index.html”和文件夾“image”（2）在網頁中創(chuàng)建鏈接。（3）在網頁中創(chuàng)建E-mail鏈接。（4）在網頁中制作圖像映射，設置圖像熱點的超鏈接。任務二：新建網頁（1）在“Mystuhome

6、”下建立文件夾“超鏈接”，在 “超鏈接”文件夾下建立文件夾“image”和網頁“index.html”，保存網頁文檔，如圖4-1所示。（2）按圖4-1所示編輯網頁，過程這里不在詳敘。演示講解6任務三：創(chuàng)建內部鏈接 為網頁中的文本“我的相冊”建立內部鏈接，操作過程如下。（1）選中要設置超接接的元素，這里是選中文本“我的相冊”。（2）在屬性面板的“鏈接”文本框中直接輸入鏈接路徑或單擊“鏈接”文本框右邊的【瀏覽文件】按鈕，在彈出的“選擇文件”框中選擇一個鏈接目標對象。這里，選擇同一個文件夾下“MyAlbum.html”。也可以在屬性面板中拖動“鏈接”文本框右側的【指向文件】按鈕到“文件”面板中相應的

7、鏈接目標對象，則鏈接將指向該對象。拖動時會出現一條帶箭頭的線，指示要拖動到的位置，指向對象后只需釋放鼠標，即可自動生成鏈接。 (3) 鏈接文本框設置完成后，屬性面板中的“目標”下來列表框就自動變?yōu)榭蛇x狀態(tài)，用于設置目標對象打開的窗口，共有_blank，_parent， _self，_top四個選項可供選擇。_blank ：表示重新打開一個新的瀏覽器窗口顯示網頁。_parent ：表示在本框架的上一級框架或瀏覽器窗口顯示網頁。_self ：表示在自身的框架或瀏覽器窗口內顯示，這個目標選項是默認的沒有指定時就會被采用。_top ：在瀏覽器窗口打開鏈接的網頁。這里選擇“_blank”。(4) 一個內

8、部鏈接創(chuàng)建完成，設置完成后如圖所示。單擊【保存】按鈕，按 F12按鈕預覽網頁。7任務四：為網頁中的文本“我的家鄉(xiāng)”建立外部鏈接，操作過程如下。（1）選中要設置超接接的元素，這里是選中文本“我的家鄉(xiāng)”。（2）在屬性面板的“鏈接”文本框中直接輸入外部鏈接的絕對路徑，這里是。 (3)在屬性面板中的“目標”下來列表框中設置目標對象打開的窗口，這里選擇“_blank”。(4) 一個外部鏈接創(chuàng)建完成，單節(jié)【保存】按鈕，按 F12按鈕預覽網頁。8任務五：創(chuàng)建E-mail鏈接為方便獲取網頁用戶的意見和建議，通常需要在網頁中建立E-mail鏈接。E-mail鏈接被點擊后會調用系統(tǒng)中設置的默認郵件程序，打開一個郵

9、件發(fā)送窗口，用戶可以直接點擊E-mail鏈接發(fā)送郵件。為網頁中文本“我的郵箱”建立E-mail鏈接，操作過程如下。（1）選中要設置超接接的元素，這里是選中文本“我的郵箱”。（2）在Dreamweaver CS4主窗口中，單擊菜單【插入】【電子郵件鏈接】彈出如圖4-3所示的電子郵件鏈接對話框。(3) 對話框中“文本”指在網頁上顯示的文本，“ E-mail”指需要鏈接到的郵箱地址，這里輸入“” ，單擊【確定】按鈕完成E-mail鏈接的設置。也可以在屬性面板的“鏈接”文本框中輸入“mailto:”和郵箱地址，這里是“mailto: ”。(4) 一個E-mail鏈接創(chuàng)建完成，單擊【保存】按鈕，按 F1

10、2按鈕預覽網頁。9任務六：創(chuàng)建錨鏈接 超鏈接除了可以鏈接到文件外，還可以鏈接到本頁中的任意位置，這種鏈接方式稱為“錨鏈接”。當一個網頁的主題或文字較多時，為了方便用戶瀏覽，可以在網頁內的某些分項內容上建立多個標記點，將超鏈接指定到這些標記點上，使用戶能快速找到要閱讀的內容。我們將這些標記點稱為錨點（Anchor） 對于一篇包含大量文本信息的、很長的網頁來說，組織按標題“索引”，能夠“跳躍”式閱覽是十分必要的。利用書簽錨記可以完成上述的需求。 創(chuàng)建書簽鏈接包含兩個步驟： 首先創(chuàng)建命名錨記，然后再創(chuàng)建指向該命名錨記的鏈接。 101、創(chuàng)建命名錨記-操作步驟：在文檔窗口的設計視圖中，單擊需要創(chuàng)建命名錨

11、記的位置，設置插入點。例如，正文區(qū)的“八達嶺”之前。執(zhí)行下列操作之一，彈出命名錨記對話框。選擇“插入”菜單中的“命名錨記”選項。 按下快捷鍵“Ctrl + Alt + A”。在“常用”工具欄中，單擊“命名錨記”按鈕，在“錨記名稱”文本框中，輸入錨記名稱。例如，輸入a1。單擊“確定”按鈕。此時，錨記符號（書簽標志）將顯示在插入點位置。如果錨記符號沒有顯示在插入點位置，可以在“查看”菜單，選擇“可視化助理”中的“不可見元素”選項，以使錨記可見。參照步驟，繼續(xù)創(chuàng)建其他錨記。選中錨記符號，屬性面板將顯示該錨記的屬性。 112、建立錨記鏈接-操作步驟：在文檔窗口的設計視圖中，選取要創(chuàng)建鏈接的文本或圖像。

12、執(zhí)行下列操作之一，建立鏈接。在“屬性”面板的“鏈接”中，輸入一個數字符號#以及錨記名稱。例如，鏈接到當前文檔中名為“a1”的錨記，則輸入“#a1”。單擊“屬性”面板“鏈接”框右側的“指向文件”圖標，并將它拖動到需要鏈接的錨記處，無論該錨記是在同一文檔中還是在其他打開的文檔中。按住Shift鍵并拖動被選中的文本到需要鏈接的錨記處，無論該錨記是在同一文檔還是在其他打開的文檔中。參照步驟，為第二行中的其他文本分別設置錨記鏈接。按快捷鍵Ctrl + S保存網頁。按快捷鍵F12預覽網頁。 12項目三：超級鏈接的檢查與測試任務一：檢查指定文檔中的鏈接-操作步驟：打開需要檢查鏈接的站點。在“文件”菜單中選擇

13、“檢查頁”、“檢查鏈接”選項，或按快捷鍵“Shift + F8”，顯示“鏈接檢查器”面板。單擊“檢查鏈接按鈕”，選擇如下三個選項之一開始檢查。檢查當前文檔中的鏈接：選擇此項前應打開需要檢查鏈接的文檔。為整個站點檢查鏈接：選擇此項前應打開需要檢查鏈接的站點。為站點中的選定文件/文件夾檢查鏈接：選擇此項前應在站點窗口選中需要檢查鏈接的文件或文件夾。從“顯示”下拉列表中選取需要顯示的鏈接報告。三個選項是：斷掉的鏈接、外部鏈接、孤立文件。13任務二：鏈接測試 網站發(fā)布之前，應該通過瀏覽器對鏈接進行測試。在Dreamweaver CS4主窗口中，單擊菜單【文件】【在瀏覽器中預覽】【IExplore6.0】，或按F12鍵或單擊“在瀏覽器中預覽”按鈕就可以在瀏覽器中預覽網頁，進行鏈接測試。14課 后 習 題一、選擇題1. 下列路徑屬于絕對路徑的是（ ）。 A） B）/stuhome/index.html C）index.html D）stuhome/index.html2. 將超鏈接的目標網頁在新窗口中打開的方式是（ ）。 A）blank B）parent C）top D）self 3. 用于在同一網頁內容之間相互跳轉的超鏈接是（ ）。 A）錨點鏈接 B）空鏈接 C）電子郵件鏈接 D）圖像鏈接二、簡答題