1、第第4章網頁超鏈接章網頁超鏈接4.1 4.1 編織網站鏈接編織網站鏈接足球新聞足球新聞4.24.2 超鏈接構成及類別超鏈接構成及類別4.3 4.3 管理超鏈接管理超鏈接4.1 4.1 編織網站鏈接編織網站鏈接足球新聞足球新聞1 案例綜述案例綜述 “ “足足球新聞球新聞”網頁中的超鏈接網頁中的超鏈接n到網站到網站內內頁面的超鏈接頁面的超鏈接 內部內部鏈接；鏈接；n外外 外部外部鏈接；鏈接；n電子郵件形式的超鏈接電子郵件形式的超鏈接 E-mail鏈接；鏈接； ( (聯系我們聯系我們熱點熱點) )n到網頁某一特定位置的超鏈接到網頁某一特定位置的超鏈接 錨點錨點鏈接；鏈接；n下載下載鏈接。鏈接。 4.

2、1 4.1 編織網站鏈接編織網站鏈接足球新聞足球新聞2 實現步驟實現步驟1 1）準備網頁內容）準備網頁內容 將素材文件夾中的相關文檔復制到站點文件夾下。將素材文件夾中的相關文檔復制到站點文件夾下。2 2） 創建超鏈接創建超鏈接 步驟步驟1 1選中頁面中的選中頁面中的文字文字或或圖像圖像， 步驟步驟2 2 在在屬性面板屬性面板中單擊中單擊“鏈接鏈接”文本框右側的文件夾圖標，文本框右側的文件夾圖標，以通過瀏覽方式選擇一個文件（以通過瀏覽方式選擇一個文件（內部鏈接內部鏈接）。）。 或者直接在或者直接在“鏈接鏈接”文本框輸入網址（文本框輸入網址（外部鏈接外部鏈接）。）。 步驟步驟3 3從從“目標目標”

3、下拉菜單中，選擇文檔的打開位置。下拉菜單中，選擇文檔的打開位置。n_ _blank :blank :新打開的空窗口（每次新建空窗口）新打開的空窗口（每次新建空窗口）n_ _parentparent：如果是嵌套的如果是嵌套的框架框架，則在，則在父框架父框架中打開。中打開。n_ _selfself：會在當前網頁所在的窗口或框架中打開會在當前網頁所在的窗口或框架中打開( (默認默認) )。n_ _toptop：會在完整的瀏覽器窗口中打開。會在完整的瀏覽器窗口中打開。nnewnew：在名稱為：在名稱為“newnew”的窗口中，可取的窗口中，可取別的別的名字。名字。n框架名框架名：3) 錨點鏈接錨點鏈接

4、指同一個頁面中的某位置，或其他頁面中的某位置。指同一個頁面中的某位置，或其他頁面中的某位置。分為兩步：分為兩步：4.1 4.1 編織網站鏈接編織網站鏈接足球新聞足球新聞n創建命名錨記創建命名錨記 (用錨點用錨點 標記位置標記位置)n將光標定位在要設置將光標定位在要設置錨點錨點的位置，的位置，n插入欄命名錨記輸入插入欄命名錨記輸入錨點名稱錨點名稱（注意：區分大小寫）（注意：區分大小寫）n創建到錨點的鏈接創建到錨點的鏈接n選擇要創建鏈接的文本或圖像選擇要創建鏈接的文本或圖像n在屬性面板的鏈接文本框中，鍵入在屬性面板的鏈接文本框中，鍵入號和號和 錨點名稱錨點名稱n或在瀏覽對話框中，選中要鏈接的或在瀏

5、覽對話框中，選中要鏈接的文件文件后加后加和和錨記名稱錨記名稱。4）Email鏈接鏈接當瀏覽者單擊電子郵件鏈接時，可即時打開瀏覽器默認當瀏覽者單擊電子郵件鏈接時，可即時打開瀏覽器默認的電子郵件程序處理程序。的電子郵件程序處理程序。步驟：步驟：n 選中文本和圖像選中文本和圖像n 插入欄常用電子郵件鏈接輸入郵件地址插入欄常用電子郵件鏈接輸入郵件地址 或在屬性面板的鏈接欄中直接輸入或在屬性面板的鏈接欄中直接輸入4.1 4.1 編織網站鏈接編織網站鏈接足球新聞足球新聞mailto:郵件地址郵件地址5) 5) 下載鏈接下載鏈接 當被鏈接的文件是當被鏈接的文件是exeexe文件或文件或rarrar文件等瀏覽

6、器不支持的文件等瀏覽器不支持的類型時，這些文件會被下載，這就是網頁上下載文件的方法。類型時，這些文件會被下載，這就是網頁上下載文件的方法。 創建方法和鏈接到網頁的方法完全一樣。創建方法和鏈接到網頁的方法完全一樣。4.1 4.1 編織網站鏈接編織網站鏈接足球新聞足球新聞6 6）空鏈接）空鏈接-占位符作用占位符作用n選中要制作空鏈接的對選中要制作空鏈接的對象，在鏈接文本框中直接輸入象，在鏈接文本框中直接輸入。n一般在站點首頁的導航欄中的首頁鏈接，就可以是一個空一般在站點首頁的導航欄中的首頁鏈接，就可以是一個空鏈接。鏈接。7 7) ) 圖像分區鏈接圖像分區鏈接在圖像上畫出一個或多個在圖像上畫出一個或

7、多個區域區域（熱點），在每個區域上建立鏈（熱點），在每個區域上建立鏈接。操作：接。操作：n選中圖像選中圖像n在圖像屬性面板中，使用分區工具（矩形、橢圓、多邊形）在圖像屬性面板中，使用分區工具（矩形、橢圓、多邊形）在圖像上劃分區域。在圖像上劃分區域。a.a.為區域設置鏈接為區域設置鏈接8 8） 跳轉菜單跳轉菜單 彈出式菜單，每一菜單項上有一鏈接。彈出式菜單，每一菜單項上有一鏈接。DreamWeaverDreamWeaver內置組件內置組件：下拉式列表框：下拉式列表框+JavaScript+JavaScript代碼代碼操作方法：操作方法：n 插入欄表單跳轉菜單插入欄表單跳轉菜單a.a. 在在“插入

8、跳轉菜單插入跳轉菜單”對話框中，單擊號添加菜單項對話框中，單擊號添加菜單項4.1 4.1 編織網站鏈接編織網站鏈接足球新聞足球新聞n 在在“選擇時。轉到選擇時。轉到URL”URL”文本框中，輸入該文件的路徑。文本框中，輸入該文件的路徑。超鏈接源超鏈接源鏈接資源鏈接資源熱點熱點(文本、圖片、圖片分區文本、圖片、圖片分區)1) 網頁網頁(含路徑含路徑)2) 網頁中的書簽網頁中的書簽(錨點錨點) #錨點，錨點， #top, 網頁網頁#錨點錨點3) 腳本程序腳本程序, javascript:代碼代碼 javascript:window.close(); javascript:alert(警告警告);4

9、) 空空#， javascript:;5) 電子郵件電子郵件 mailto:zhou_6) 媒體文件媒體文件x.jpg, y.swf7) 瀏覽器不能識別的文件瀏覽器不能識別的文件x.doc y.rar z.exe資源顯示位置資源顯示位置 超鏈接源超鏈接源 鏈接類別鏈接類別1) 按按熱點熱點不同不同n文本鏈接文本鏈接, n圖片圖片，n圖片熱點圖片熱點,2) 按按鏈接資源不同鏈接資源不同n普通網頁鏈接普通網頁鏈接,n錨點鏈接，錨點鏈接，n腳本代碼連接，腳本代碼連接，n空連接，空連接，n郵件連接，郵件連接，n媒體文件鏈接，媒體文件鏈接，n下載連接下載連接4.2 4.2 超鏈接構成及類別超鏈接構成及類

10、別(某窗口窗口,框架框架)跳轉菜單（跳轉菜單（表單表單+下拉列表框下拉列表框+javascript代碼代碼）4.2 4.2 超鏈接構成及類別超鏈接構成及類別 網頁路徑網頁路徑 （與（與圖片路徑表示方法圖片路徑表示方法相同）相同）1 1）絕對路徑絕對路徑：在鏈接中使用完整的：在鏈接中使用完整的URLURL地址。地址。a =“http:/ 2 2）相對路徑相對路徑：相對于網頁文件（位于當前目錄）的相對于網頁文件（位于當前目錄）的位置位置 當前目錄的文件引用方式：當前目錄的文件引用方式： hrefhref= =“* *. .* *” ” 的下級目錄：的下級目錄： hrefhref=“=“下級目錄名下

11、級目錄名/ /* *. .* *” ” 的上一級目錄：的上一級目錄： hrefhref=“ ./=“ ./當前文件夾名當前文件夾名/ /* *. .* *” ” 3 3）基于站點根目錄的路徑基于站點根目錄的路徑：以站點的根目錄為參考點，用一：以站點的根目錄為參考點，用一個斜線個斜線“/ /”表示根目錄。表示根目錄。( (要在要在webweb服務器上運行服務器上運行) ) 根目錄的文件引用方式：根目錄的文件引用方式： hrefhref=“=“/ /* *. .* *” ” 的下級目錄：的下級目錄： hrefhref=“=“/ /下級目錄名下級目錄名/ /* *. .* *” ” 4.2 4.2

12、超鏈接構成及類別超鏈接構成及類別1 自動更新鏈接設置自動更新鏈接設置 在首選參數對話框中設置自動更新。在首選參數對話框中設置自動更新。 選擇選擇“編輯編輯”|“|“首選參數首選參數”命令，打開命令，打開“首選參數首選參數”對話框，在對話框，在“移動文件時更新鏈接移動文件時更新鏈接”選項的下拉列表中進行選項的下拉列表中進行選擇。選擇。n總是總是每當每當移動移動或或重命名重命名選定文檔選定文檔時，時，DreamweaverDreamweaver將將自動更新自動更新其他文檔其他文檔中指向中指向該文檔該文檔的所有鏈接。的所有鏈接。n提示提示將顯示一個提示對話框，列出更改影響到的所有將顯示一個提示對話框

13、，列出更改影響到的所有文件，以進行進一步選擇，系統默認的選項是文件，以進行進一步選擇，系統默認的選項是“提示提示”。 4.3 4.3 管理超鏈接管理超鏈接 4.3 4.3 管理超鏈接管理超鏈接 2 更改鏈接更改鏈接1） 移動、更名文檔時更新鏈接移動、更名文檔時更新鏈接如 果 對 站 點 中 的 文 檔 要 進 行 移 動 、 更 名 操 作 ，如 果 對 站 點 中 的 文 檔 要 進 行 移 動 、 更 名 操 作 ，Dreamweaver CS5Dreamweaver CS5會彈出會彈出“更新文件更新文件”對話框，點擊對話框，點擊“更新更新”按鈕，則會修改文本框中文件的鏈接；點擊按鈕，則會

14、修改文本框中文件的鏈接；點擊“不更新不更新”按鈕，按鈕，則不會修改文本框中文件的鏈接。則不會修改文本框中文件的鏈接。b.htm a.htm c . htmddd4.3 4.3 管理超鏈接管理超鏈接2)2) 改變鏈接改變鏈接n 直接修改超鏈接（在編輯源文件的窗口）直接修改超鏈接（在編輯源文件的窗口）n 使用菜單命令更改超鏈接使用菜單命令更改超鏈接n 在在“文件文件”面板中選擇一個文件，如果更改電子郵件鏈接、面板中選擇一個文件，如果更改電子郵件鏈接、FTPFTP鏈接、空鏈接則不需要選擇文件。鏈接、空鏈接則不需要選擇文件。n 選擇選擇“站點站點”|“|“改變站點范圍內鏈接改變站點范圍內鏈接”命令，出

15、現命令，出現“更改整更改整個站點鏈接個站點鏈接”對話框，對話框，n 單擊單擊“確定確定”按鈕，會出現按鈕，會出現“更新文件更新文件”對話框，其中列出對話框，其中列出了需要更新的鏈接文件，單擊了需要更新的鏈接文件，單擊“更新更新”按鈕。按鈕。 3 3 刪除鏈接刪除鏈接1) 1) 使用菜單命令刪除超鏈接使用菜單命令刪除超鏈接 點擊點擊“修改修改”菜單，選擇菜單，選擇“移除鏈接移除鏈接”命令，或者按命令，或者按Ctrl+Shift+LCtrl+Shift+L組合鍵即可刪除或者取消一個超鏈接組合鍵即可刪除或者取消一個超鏈接。2) 2) 使用快捷菜單刪除超鏈接使用快捷菜單刪除超鏈接 點擊鼠標右鍵，在彈出

16、的子菜單上選擇點擊鼠標右鍵，在彈出的子菜單上選擇“刪除標簽刪除標簽”命命令即可刪除超鏈接。令即可刪除超鏈接。3) 3) 使用屬性面板刪除超鏈接使用屬性面板刪除超鏈接 單擊屬性面板中的單擊屬性面板中的“鏈接鏈接”下拉列表框，使之呈現為選擇狀下拉列表框，使之呈現為選擇狀態，按態，按DeleteDelete鍵刪除原來的鏈接地址即可。鍵刪除原來的鏈接地址即可。4.3 4.3 管理超鏈接管理超鏈接 4 檢查鏈接檢查鏈接1)1) 檢查檢查當前文檔當前文檔中的鏈接中的鏈接 在在“文件文件”面板中，從面板中，從“當前站點當前站點”彈出菜單中選擇一個站點。彈出菜單中選擇一個站點。 在在“本地本地”視圖中，選擇要

17、檢查的文件或文件夾。視圖中，選擇要檢查的文件或文件夾。 選擇選擇“文件文件”“檢查頁檢查頁”“鏈接鏈接”命令，或右鍵單擊一個命令，或右鍵單擊一個選定的文件，然后從上下文菜單中選擇選定的文件，然后從上下文菜單中選擇“檢查鏈接檢查鏈接”“選定的文選定的文件件/ /文件夾文件夾”。“斷開的鏈接斷開的鏈接”報告出現在報告出現在“鏈接檢查器鏈接檢查器”面板中面板中. .在在“鏈接檢查器鏈接檢查器”面板中，從面板中，從“顯示顯示”彈出菜單中選擇彈出菜單中選擇“檢查站檢查站點中所選文件的鏈接點中所選文件的鏈接”以查看其結果報告以查看其結果報告. .4.3 4.3 管理超鏈接管理超鏈接 2) 2) 檢查檢查整

18、個站點整個站點中的鏈接中的鏈接 在在“文件文件”面板中，從面板中，從“當前站點當前站點”彈出菜單中選擇一個站點。彈出菜單中選擇一個站點。 選擇選擇“站點站點”|“|“檢查站點范圍的鏈接檢查站點范圍的鏈接”。 “ “斷開的鏈接斷開的鏈接”報告出現在報告出現在“鏈接檢查器鏈接檢查器”面板中。面板中。 在在“鏈接檢查器鏈接檢查器”面板中，從面板中，從“顯示顯示”彈出菜單中選擇彈出菜單中選擇“檢查整檢查整個站點中的鏈接個站點中的鏈接”，可查看其它報告。，可查看其它報告。 5 5 修復斷開的鏈接修復斷開的鏈接 1) 1) 在在鏈接檢查器面板鏈接檢查器面板中修復鏈接中修復鏈接 運行鏈接檢查報告。運行鏈接檢

19、查報告。 在在“鏈接檢查器鏈接檢查器”面板（在面板（在“結果結果”面板組中）中的面板組中）中的“斷開的鏈斷開的鏈接接”列（而不是列（而不是“文件文件”列），選擇該斷開的鏈接。列），選擇該斷開的鏈接。 單擊斷開的鏈接旁邊的單擊斷開的鏈接旁邊的文件夾文件夾圖標圖標 ，以瀏覽到正確文件，或者，以瀏覽到正確文件，或者鍵入正確的路徑和文件名。鍵入正確的路徑和文件名。 如果還有對同一文件的其它斷開引用，會提示修復其它文件中的如果還有對同一文件的其它斷開引用，會提示修復其它文件中的這些引用。單擊這些引用。單擊“是是”，Dreamweaver Dreamweaver 將更新列表中引用此文件的將更新列表中引用此文件的所有文檔。如果單擊所有文檔。如果單擊“否否”，Dr