第4章 建立網(wǎng)頁(yè)鏈接.ppt

1、網(wǎng)頁(yè)制作基礎(chǔ)教程（Dreamweaver CS4）電子教案,葛艷玲主編,ISBN978-7-121-15403-4,第四章建立網(wǎng)頁(yè)鏈接,本章重點(diǎn)：內(nèi)部鏈接、外部鏈接、錨點(diǎn)鏈接、E-mail鏈接的創(chuàng)建方法。,第四章建立網(wǎng)頁(yè)鏈接,4.1 編織網(wǎng)站鏈接足球新聞 4.2超鏈接概述 4.3 管理超鏈接,4.1 編織網(wǎng)站鏈接足球新聞,4.1.1 案例綜述 本例以編織網(wǎng)站中的各種超鏈接為主要目的，介紹創(chuàng)建超鏈接種種方法和技巧,4.1 編織網(wǎng)站鏈接足球新聞,4.1.2 案例分析 為實(shí)現(xiàn)網(wǎng)頁(yè)的跳轉(zhuǎn)，將創(chuàng)建： 到網(wǎng)站內(nèi)頁(yè)面的超鏈接內(nèi)部鏈接； 到網(wǎng)站外頁(yè)面的超鏈接外部鏈接； 電子郵件形式的超鏈接E-mail鏈接；

2、到網(wǎng)頁(yè)某一特定位置的超鏈接錨點(diǎn)鏈接； 以及其他一些鏈接。,4.1 編織網(wǎng)站鏈接足球新聞,4.1.3 實(shí)現(xiàn)步驟 一、準(zhǔn)備網(wǎng)頁(yè)內(nèi)容 步驟1選中站點(diǎn)； 步驟2將素材文件夾中的相關(guān)文檔復(fù)制到站點(diǎn)文件夾下。 二、創(chuàng)建超鏈接,1、創(chuàng)建內(nèi)部鏈接 網(wǎng)站內(nèi)部頁(yè)面之間創(chuàng)建相互鏈接關(guān)系 步驟1選中頁(yè)面中的文字或圖像，在屬性面板中單擊“鏈接”文本框右側(cè)的文件夾圖標(biāo)，以通過(guò)瀏覽選擇一個(gè)文件 步驟2從“目標(biāo)”下拉菜單中，選擇文檔的打開(kāi)位置。 _blank :新打開(kāi)的空窗口 _parent：如果是嵌套的框架，則在父框架中打開(kāi)。 _self：會(huì)在當(dāng)前網(wǎng)頁(yè)所在的窗口或框架中打開(kāi)。 _top：會(huì)在完整的瀏覽器窗口中打開(kāi)。,4.1

3、 編織網(wǎng)站鏈接足球新聞,2、創(chuàng)建外部鏈接 創(chuàng)建鏈接到絕對(duì)地址的外部鏈接 選中文字或圖像之后，直接在屬性面板的“鏈接”文本框中輸入外部的鏈接地址，如 然后在“目標(biāo)”下拉菜單中設(shè)置這個(gè)鏈接的目標(biāo)窗口。,4.1 編織網(wǎng)站鏈接足球新聞,3、創(chuàng)建Email鏈接 當(dāng)瀏覽者單擊電子郵件鏈接時(shí)，可即時(shí)打開(kāi)瀏覽器默認(rèn)的電子郵件程序處理程序。 方法： 選中文本和圖像 插入欄常用電子郵件鏈接輸入郵件地址 或在屬性面板的鏈接欄中直接輸入,4.1 編織網(wǎng)站鏈接足球新聞,mailto:郵件地址,4、錨點(diǎn)鏈接 是指同一個(gè)頁(yè)面中的不同位置鏈接。 分為兩步： 創(chuàng)建命名錨記，就是在文檔中設(shè)置位置標(biāo)記，并給該位置一個(gè)名稱，以便引用

4、。 創(chuàng)建到命名錨記的鏈接,4.1 編織網(wǎng)站鏈接足球新聞,創(chuàng)建命名錨記 將光標(biāo)定位在要設(shè)置標(biāo)記的位置， 插入欄命名錨記輸入錨記名稱（注意：區(qū)分大小寫(xiě)） 創(chuàng)建到命名錨記的鏈接 選擇要?jiǎng)?chuàng)建鏈接的文本或圖像 在屬性面板的鏈接文本框中，鍵入號(hào)和錨記名稱 或在瀏覽對(duì)話框中，選中要鏈接的文件后加和錨記名稱。,4.1 編織網(wǎng)站鏈接足球新聞,5、創(chuàng)建其他類型的鏈接 （1）創(chuàng)建下載鏈接 當(dāng)被鏈接的文件是exe文件或zip文件等瀏覽器不支持的類型時(shí)，這些文件會(huì)被下載，這就是網(wǎng)上下載的方法。 鏈接到下載文件的方法，和鏈接到網(wǎng)頁(yè)的方法完全一樣。,4.1 編織網(wǎng)站鏈接足球新聞,5、創(chuàng)建其他類型的鏈接 （2）、創(chuàng)建空鏈接

5、空鏈接用來(lái)激活頁(yè)面中的對(duì)象或文本。當(dāng)文本或?qū)ο蟊患せ詈?，可以為之添加行為?方法：選中要制作空鏈接的對(duì)象，在鏈接文本框中直接輸入。 在一般站點(diǎn)首頁(yè)的導(dǎo)航欄中的首頁(yè)鏈接，就可以是一個(gè)空鏈接,4.1 編織網(wǎng)站鏈接足球新聞,6、創(chuàng)建跳轉(zhuǎn)菜單 跳轉(zhuǎn)菜單是文檔中的彈出式菜單，可以創(chuàng)建到可在瀏覽器中打開(kāi)的任何文件類型的鏈接。 方法： 插入欄表單跳轉(zhuǎn)菜單 在“插入跳轉(zhuǎn)菜單”對(duì)話框中，單擊號(hào)添加菜單項(xiàng) 在“選擇時(shí)。轉(zhuǎn)到URL”文本框中，輸入該文件的路徑。,4.1 編織網(wǎng)站鏈接足球新聞,7、創(chuàng)建圖像地圖 圖像地圖指已被分為多個(gè)區(qū)域（熱點(diǎn)）的圖像。當(dāng)用戶單擊某個(gè)熱點(diǎn)時(shí)，會(huì)發(fā)生某種操作。 方法： 選中圖像 在圖像屬

6、性面板中，使用熱區(qū)工具（矩形、橢圓、多邊形），在圖像上劃分熱區(qū)。 為繪制的每一個(gè)熱區(qū)設(shè)置不同的鏈接地址和替代文字。,4.1 編織網(wǎng)站鏈接足球新聞,4.2 超鏈接概述,4.2.1 超鏈接的類型 內(nèi)部鏈接這種鏈接的目標(biāo)端點(diǎn)是本站中的其他文檔。利用這種鏈接，可以跳轉(zhuǎn)到本站點(diǎn)其他的頁(yè)面上。 外部鏈接這種鏈接的目標(biāo)端點(diǎn)是本站點(diǎn)之外的站點(diǎn)或文檔。利用這種鏈接，可以跳轉(zhuǎn)到其他的網(wǎng)站上。,4.2 超鏈接概述,4.2.1 超鏈接的類型 Email鏈接單擊這種鏈接，可以啟動(dòng)電子郵件程序書(shū)寫(xiě)郵件，并發(fā)送到指定的地址。 錨點(diǎn)鏈接這種鏈接的目標(biāo)端點(diǎn)是文檔中的命名錨記，利用這種鏈接，可以跳轉(zhuǎn)到當(dāng)前文檔中的某一指定位置上，

7、也可以跳轉(zhuǎn)到其他文檔中的某一指定位置上。,4.2 超鏈接概述,4.2.2 鏈接路徑 （1）絕對(duì)路徑：如果在鏈接中使用完整的URL地址，這種鏈接路徑就稱作絕對(duì)路徑。路徑同鏈接的源端點(diǎn)無(wú)關(guān)。 （2）相對(duì)路徑：相對(duì)路徑可以表述源端點(diǎn)同目標(biāo)端點(diǎn)之間的相互位置，它同源端點(diǎn)的位置密切相關(guān)。 （3）基于目錄的路徑：所有的路徑都是從站點(diǎn)的根目錄開(kāi)始的，它同源端點(diǎn)的位置無(wú)關(guān)。通常用一個(gè)斜線“/”表示根目錄。,4.2 超鏈接概述,4.2.3創(chuàng)建超鏈接 在文檔窗口中選中想作為鏈接的文本或圖片 在屬性面板鏈接一項(xiàng)的空白處填入鏈接的路徑，或者單擊瀏覽按鈕，在彈出的【選擇文件】對(duì)話框中，選定要鏈接的文檔及采用哪種方式表達(dá)

8、路徑。 鏈接的對(duì)象可以是多樣的，如圖片文件，電子表格，或者某個(gè)網(wǎng)站。,4.2.4 插入導(dǎo)航條 導(dǎo)航條中按鈕圖像的狀態(tài)根據(jù)瀏覽者的鼠標(biāo)動(dòng)作而改變。 方法： 1、將光標(biāo)放到要插入導(dǎo)航條的位置； 2、選擇插入|圖像對(duì)象|導(dǎo)航條命令 ； 3、或選擇插入|常用|圖像|導(dǎo)航條命令。,4.2 超鏈接概述,4.3.1 自動(dòng)更新鏈接 在首選參數(shù)對(duì)話框中設(shè)置自動(dòng)更新 選擇“編輯”|“首選參數(shù)”命令，打開(kāi)“首選參數(shù)”對(duì)話框，在“移動(dòng)文件時(shí)更新鏈接”選項(xiàng)的下拉列表中進(jìn)行選擇。 總是每當(dāng)移動(dòng)或重命名選定文檔時(shí)，Dreamweaver將自動(dòng)更新該文檔的所有鏈接。 提示將顯示一個(gè)提示對(duì)話框，列出更改影響到的所有文件，以進(jìn)行

9、進(jìn)一步選擇，系統(tǒng)默認(rèn)的選項(xiàng)是“提示”。,4.3 管理超鏈接,4.3.1 自動(dòng)更新鏈接 在“站點(diǎn)定義”對(duì)話框中設(shè)置緩存 Dreamweaver創(chuàng)建緩存文件，主要用以存儲(chǔ)有關(guān)本地文件夾中所有鏈接的信息，可以加快更新過(guò)程。 選擇“站點(diǎn)”|“管理站點(diǎn)”命令，出現(xiàn)“編輯站點(diǎn)”對(duì)話框。選擇一個(gè)站點(diǎn)，然后單擊“編輯”按鈕，出現(xiàn)“站點(diǎn)定義”對(duì)話框。 “高級(jí)”|“本地信息”。 在“本地信息”選項(xiàng)組中，選擇“啟用緩存”復(fù)選框。 注意：?jiǎn)?dòng)Dreamweaver之后，第一次更改或刪除指向本地文件夾中文件的鏈接時(shí)，Dreamweaver會(huì)提示載入緩存。,4.3 管理超鏈接,4.3.2 在整個(gè)站點(diǎn)范圍內(nèi)更改鏈接 在“文

10、件”面板中選擇一個(gè)文件，如果更改電子郵件鏈接、FTP鏈接、空鏈接則不需要選擇文件。 選擇“站點(diǎn)”|“改變站點(diǎn)范圍內(nèi)鏈接”命令，出現(xiàn)“更改整個(gè)站點(diǎn)鏈接”對(duì)話框， 單擊“確定”按鈕，會(huì)出現(xiàn)“更新文件”對(duì)話框，其中列出了需要更新的鏈接文件，單擊“更新”按鈕。,4.3 管理超鏈接,4.3.3 查找斷開(kāi)的、外部的和孤立的鏈接 檢查當(dāng)前文檔中的鏈接 將此文件保存在本地站點(diǎn)中的某個(gè)位置。 選擇“文件”“檢查頁(yè)”“鏈接”命令。 在“鏈接檢查器”面板中，從“顯示”彈出菜單中選擇“檢查當(dāng)前文檔中的鏈接”以查看其結(jié)果報(bào)告?！爱?dāng)前文檔中斷開(kāi)的鏈接”報(bào)告出現(xiàn)在“鏈接檢查器”面板中。,4.3 管理超鏈接,4.3.3 查找

11、斷開(kāi)的、外部的和孤立的鏈接 檢查本地站點(diǎn)某一部分中的鏈接 在“文件”面板中，從“當(dāng)前站點(diǎn)”彈出菜單中選擇一個(gè)站點(diǎn)。 在“本地”視圖中，選擇要檢查的文件或文件夾。 選擇“文件”“檢查頁(yè)”“鏈接”命令，或右鍵單擊一個(gè)選定的文件，然后從上下文菜單中選擇“檢查鏈接”“選定的文件/文件夾”。 “斷開(kāi)的鏈接”報(bào)告出現(xiàn)在“鏈接檢查器”面板中. 在“鏈接檢查器”面板中，從“顯示”彈出菜單中選擇“檢查站點(diǎn)中所選文件的鏈接”以查看其結(jié)果報(bào)告.,4.3 管理超鏈接,4.3.3 查找斷開(kāi)的、外部的和孤立的鏈接 檢查整個(gè)站點(diǎn)中的鏈接 在“文件”面板中，從“當(dāng)前站點(diǎn)”彈出菜單中選擇一個(gè)站點(diǎn)。 選擇“站點(diǎn)”|“檢查站點(diǎn)范圍

12、的鏈接”。 “斷開(kāi)的鏈接”報(bào)告出現(xiàn)在“鏈接檢查器”面板中。 在“鏈接檢查器”面板中，從“顯示”彈出菜單中選擇“檢查整個(gè)站點(diǎn)中的鏈接”，可查看其它報(bào)告。,4.3 管理超鏈接,4.3.4 修復(fù)斷開(kāi)的鏈接 在鏈接檢查器面板中修復(fù)鏈接 運(yùn)行鏈接檢查報(bào)告。 在“鏈接檢查器”面板（在“結(jié)果”面板組中）中的“斷開(kāi)的鏈接”列（而不是“文件”列），選擇該斷開(kāi)的鏈接。 單擊斷開(kāi)的鏈接旁邊的文件夾圖標(biāo) ，以瀏覽到正確文件，或者鍵入正確的路徑和文件名。 如果還有對(duì)同一文件的其它斷開(kāi)引用，會(huì)提示修復(fù)其它文件中的這些引用。單擊“是”，Dreamweaver 將更新列表中引用此文件的所有文檔。如果單擊“否”，Dreamweaver 將只更新當(dāng)前引用。,4.3 管理超