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

2、1 4.1 編織網(wǎng)站鏈接編織網(wǎng)站鏈接足球新聞足球新聞2 實(shí)現(xiàn)步驟實(shí)現(xiàn)步驟1 1）準(zhǔn)備網(wǎng)頁內(nèi)容）準(zhǔn)備網(wǎng)頁內(nèi)容 將素材文件夾中的相關(guān)文檔復(fù)制到站點(diǎn)文件夾下。將素材文件夾中的相關(guān)文檔復(fù)制到站點(diǎn)文件夾下。2 2） 創(chuàng)建超鏈接創(chuàng)建超鏈接 步驟步驟1 1選中頁面中的選中頁面中的文字文字或或圖像圖像， 步驟步驟2 2 在在屬性面板屬性面板中單擊中單擊“鏈接鏈接”文本框右側(cè)的文件夾圖標(biāo)，文本框右側(cè)的文件夾圖標(biāo)，以通過瀏覽方式選擇一個(gè)文件（以通過瀏覽方式選擇一個(gè)文件（內(nèi)部鏈接內(nèi)部鏈接）。）。 或者直接在或者直接在“鏈接鏈接”文本框輸入網(wǎng)址（文本框輸入網(wǎng)址（外部鏈接外部鏈接）。）。 步驟步驟3 3從從“目標(biāo)目標(biāo)”

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

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

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

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

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

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

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

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

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

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

13、，列出更改影響到的所有文件，以進(jìn)行進(jìn)一步選擇，系統(tǒng)默認(rèn)的選項(xiàng)是文件，以進(jìn)行進(jìn)一步選擇，系統(tǒng)默認(rèn)的選項(xiàng)是“提示提示”。 4.3 4.3 管理超鏈接管理超鏈接 4.3 4.3 管理超鏈接管理超鏈接 2 更改鏈接更改鏈接1） 移動(dòng)、更名文檔時(shí)更新鏈接移動(dòng)、更名文檔時(shí)更新鏈接如 果 對(duì) 站 點(diǎn) 中 的 文 檔 要 進(jìn) 行 移 動(dòng) 、 更 名 操 作 ，如 果 對(duì) 站 點(diǎn) 中 的 文 檔 要 進(jìn) 行 移 動(dòng) 、 更 名 操 作 ，Dreamweaver CS5Dreamweaver CS5會(huì)彈出會(huì)彈出“更新文件更新文件”對(duì)話框，點(diǎn)擊對(duì)話框，點(diǎn)擊“更新更新”按鈕，則會(huì)修改文本框中文件的鏈接；點(diǎn)擊按鈕，則會(huì)

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

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

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

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

18、個(gè)站點(diǎn)整個(gè)站點(diǎn)中的鏈接中的鏈接 在在“文件文件”面板中，從面板中，從“當(dāng)前站點(diǎn)當(dāng)前站點(diǎn)”彈出菜單中選擇一個(gè)站點(diǎn)。彈出菜單中選擇一個(gè)站點(diǎn)。 選擇選擇“站點(diǎn)站點(diǎn)”|“|“檢查站點(diǎn)范圍的鏈接檢查站點(diǎn)范圍的鏈接”。 “ “斷開的鏈接斷開的鏈接”報(bào)告出現(xiàn)在報(bào)告出現(xiàn)在“鏈接檢查器鏈接檢查器”面板中。面板中。 在在“鏈接檢查器鏈接檢查器”面板中，從面板中，從“顯示顯示”彈出菜單中選擇彈出菜單中選擇“檢查整檢查整個(gè)站點(diǎn)中的鏈接個(gè)站點(diǎn)中的鏈接”，可查看其它報(bào)告。，可查看其它報(bào)告。 5 5 修復(fù)斷開的鏈接修復(fù)斷開的鏈接 1) 1) 在在鏈接檢查器面板鏈接檢查器面板中修復(fù)鏈接中修復(fù)鏈接 運(yùn)行鏈接檢查報(bào)告。運(yùn)行鏈接檢

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