創(chuàng)建錨記超級鏈接的方法課件

創(chuàng)建錨記超級鏈接的方法課件1在因特網(wǎng)中，超級鏈接就好比橋梁，瀏覽者每單擊一次鼠標就好比是從橋的這一端走到了橋的那一端。超級鏈接將整個因特網(wǎng)關(guān)聯(lián)了起來，構(gòu)成了紛繁復(fù)雜的Web世界。本章將介紹超級鏈接的基本知識以及創(chuàng)建超級鏈接的基本方法。第6章創(chuàng)建超級鏈接在因特網(wǎng)中，超級鏈接就好比橋梁，瀏覽者每單擊一次鼠標就好比是2學習目標了解超級鏈接的概念。掌握設(shè)置文本和圖像超級鏈接的方法。掌握設(shè)置圖像熱點超級鏈接的方法。掌握設(shè)置電子郵件超級鏈接的方法。掌握設(shè)置下載超級鏈接和空鏈接的方法。掌握設(shè)置錨記超級鏈接的方法。掌握設(shè)置鼠標經(jīng)過圖像和導(dǎo)航條的方法。掌握設(shè)置Flash文本和Flash按鈕的方法。掌握設(shè)置跳轉(zhuǎn)菜單和腳本鏈接的方法。學習目標了解超級鏈接的概念。36.1超級鏈接的概念URL的概念和格式 URL地址的類型超級鏈接的分類6.1超級鏈接的概念URL的概念和格式 46.1.1URL的概念和格式

URL，英文全稱為“UniformResoureLocator”，即統(tǒng)一資源定位器，是因特網(wǎng)中網(wǎng)頁的地址。URL的地址格式為：scheme://host:port/path/file。scheme：Internet資源類型，又稱通信協(xié)議，如http、ftp、telnet等，分別表示W(wǎng)WW服務(wù)器、FTP服務(wù)器、TELNET服務(wù)器。host：服務(wù)器主機，指出服務(wù)器在網(wǎng)絡(luò)中的IP地址（如“18”）或域名（如“”）。port：端口，對某些資源的訪問需要給出服務(wù)器相應(yīng)的端口號，但許多時候不需要。path：路徑，指明服務(wù)器上資源的位置，有時不需要。file：文件，指明服務(wù)器上資源的文件名稱，有時不需要。6.1.1URL的概念和格式URL，英文全稱為“Uni56.1.2URL地址的類型在超級鏈接中，URL地址有絕對地址和相對地址之分。一、絕對地址絕對地址就是某個文件在網(wǎng)絡(luò)上的完整地址，包括所使用的傳輸協(xié)議、服務(wù)器名、路徑和文件名等。當創(chuàng)建的超級鏈接要連接到網(wǎng)站以外的其他網(wǎng)站的某個文件時，必須使用絕對地址，例如“/special/00052FJJ/rocketteam.html”。二、相對地址相對地址又可分為文檔相對地址和站點根目錄相對地址兩種。(1) 文檔相對地址文檔相對地址就是指以當前文檔所在位置為起點到被鏈接文檔經(jīng)由的路徑。當創(chuàng)建的鏈接要連接到網(wǎng)站內(nèi)部文件時通常使用文檔相對路徑。6.1.2URL地址的類型在超級鏈接中，URL地址有絕對66.1.2URL地址的類型

通過文檔相對路徑構(gòu)建超級鏈接的兩個文件之間的相對關(guān)系，不會受到站點文件夾所處的服務(wù)器位置的影響，可以省略絕對地址中的相同部分。這種方式可以確保在站點文件夾所在的服務(wù)器地址發(fā)生改變的情況下，文件夾的所有內(nèi)部鏈接都不會出現(xiàn)錯誤。而且，在Dreamweaver的站點管理器內(nèi)進行文件和文件夾的重命名、文件和文件夾的移動等操作時，使用文檔相對地址創(chuàng)建的超級鏈接都會動態(tài)地自動進行更新，這對站點管理帶來了方便。與同一文件夾內(nèi)的文件建立鏈接只寫文件名即可，例如“rocketteam.html”。與下一層文件夾內(nèi)的文件建立鏈接，只寫文件夾名稱和文件名即可，例如“00052FJJ/rocketteam.html”。與上一層文件夾內(nèi)的文件建立鏈接，只需在文件名前加上“../”即可，例如“../rocketteam.html”。如果與上一層文件夾的再上一層文件夾內(nèi)的文件建立鏈接，需要在上一層文件夾名前加上“../”，例如“../00052FJJ/rocketteam.html”?！?./”表示在文件夾層次結(jié)構(gòu)中上移一層。6.1.2URL地址的類型通過文檔相對路徑構(gòu)建超級鏈接76.1.2URL地址的類型(2) 站點根目錄相對地址站點根目錄相對地址就是指所有路徑都開始于當前站點的根目錄，以“/”開始，“/”表示站點根目錄，如“/special/00052FJJ/rocketteam.html”。通常只有在站點的規(guī)模非常大、文件需要放置在幾個服務(wù)器上，或者是在一個服務(wù)器上放置多個站點時才使用站點根目錄相對地址。移動包含站點根目錄相對地址鏈接的文檔時，不需要更改這些鏈接。另外，站點根目錄相對地址只能由站點服務(wù)器軟件（例如IIS）來解釋，因此在硬盤上打開一個帶有根目錄相對地址鏈接的網(wǎng)頁時，上面所有的鏈接都是失效的。這是因為在硬盤目錄中不存在站點根目錄，而只有文件夾。6.1.2URL地址的類型(2) 站點根目錄相對地址86.1.3超級鏈接的分類超級鏈接通常由源端點和目標端點兩部分組成。根據(jù)源端點的不同，超級鏈接可分為文本超級鏈接、圖像超級鏈接和表單超級鏈接。文本超級鏈接以文本作為超級鏈接源端點，圖像超級鏈接以圖像作為超級鏈接源端點，表單超級鏈接比較特殊，選擇某個選項后會自動跳轉(zhuǎn)到目標端點，或需要單擊相應(yīng)按鈕會自動跳轉(zhuǎn)到目標端點。根據(jù)目標端點的不同，超級鏈接可分為內(nèi)部超級鏈接、外部超級鏈接、電子郵件超級鏈接和錨記超級鏈接等。內(nèi)部超級鏈接是使多個網(wǎng)頁組成為一個網(wǎng)站的一種鏈接形式，目標端點和源端點是同一網(wǎng)站內(nèi)的網(wǎng)頁文檔。外部超級鏈接指的是目標端點與源端點不在同一個網(wǎng)站內(nèi)，外部超級鏈接可以實現(xiàn)網(wǎng)站之間的跳轉(zhuǎn)，從而將瀏覽范圍擴大到整個網(wǎng)絡(luò)。電子郵件超級鏈接將會啟動郵件客戶端程序，可以寫郵件并發(fā)送到鏈接的郵箱中。利用錨記超級鏈接，在瀏覽時網(wǎng)頁時可以跳轉(zhuǎn)到當前網(wǎng)頁或其他網(wǎng)頁中的某一指定位置。6.1.3超級鏈接的分類超級鏈接通常由源端點和目標端點兩96.2普通超級鏈接文本和圖像超級鏈接圖像熱點超級鏈接下載超級鏈接和空鏈接電子郵件超級鏈接錨記超級鏈接6.2普通超級鏈接文本和圖像超級鏈接106.2.1文本和圖像超級鏈接一、文本超級鏈接用文本做鏈接載體就是文本超級鏈接，它是最常見的超級鏈接類型。創(chuàng)建文本超級鏈接比較常用的方式主要有兩種：一種是在【屬性】面板中創(chuàng)建超級鏈接，另一種是在【超級鏈接】對話框中設(shè)置超級鏈接。對于文本超級鏈接，還可以通過【頁面屬性】對話框設(shè)置文本的顏色、下劃線等樣式。1、通過【屬性】面板創(chuàng)建超級鏈接。6.2.1文本和圖像超級鏈接一、文本超級鏈接116.2.1文本和圖像超級鏈接2、通過【超級鏈接】對話框設(shè)置超級鏈接。選擇【插入記錄】／【超級鏈接】命令，打開【超級鏈接】對話框進行設(shè)置。[目標]：_blank:將鏈接的文檔載入一個新的瀏覽器窗口_parent：載入父框架或窗口_self：載入同一框架或窗口，是默認的。_top：載入整個瀏覽器窗口。6.2.1文本和圖像超級鏈接2、通過【超級鏈接】對話框設(shè)置126.2.1文本和圖像超級鏈接3、通過【頁面屬性】對話框設(shè)置文本超級鏈接的狀態(tài)。6.2.1文本和圖像超級鏈接3、通過【頁面屬性】對話框設(shè)置136.2.1文本和圖像超級鏈接二、圖像超級鏈接用圖像作為鏈接載體就是圖像超級鏈接。了解了通過【屬性】面板創(chuàng)建文本超級鏈接的方法，也就等于掌握了創(chuàng)建圖像超級鏈接的方法，因為操作方法都是一樣，只是鏈接載體由文本變成了圖像。圖像超級鏈接不像文本超級鏈接那樣會發(fā)生許多提示性的變化，圖像本身不會發(fā)生改變，只是鼠標在指向圖像超級鏈接時會變成手形（默認狀態(tài)）。6.2.1文本和圖像超級鏈接二、圖像超級鏈接146.2.2圖像熱點超級鏈接圖像熱點，又稱圖像地圖、圖像熱區(qū)，實際上就是為圖像繪制一個或幾個特殊區(qū)域，并為這些區(qū)域添加超級鏈接。創(chuàng)建圖像熱點超級鏈接必須使用圖像熱點工具，它位于圖像【屬性】面板的左下方，包括（矩形熱點工具）、（橢圓形熱點工具）和（多邊形熱點工具）3種形式。創(chuàng)建圖像熱點超級鏈接的方法是：（1）使用圖像熱點工具繪制熱點區(qū)域（2）接著在【屬性】面板中設(shè)置鏈接地址、目標窗口等6.2.2圖像熱點超級鏈接圖像熱點，又稱圖像地圖、圖像熱156.2.3下載超級鏈接和空鏈接在實際應(yīng)用中，鏈接目標也可以是其他類型的文件，如壓縮文件、Word文件等。如果要在網(wǎng)站中提供資料下載，就需要為文件提供下載超級鏈接。下載超級鏈接并不是一種特殊的鏈接，只是下載超級鏈接所指向的文件是特殊的?？真溄邮且粋€未指派目標的鏈接。建立空鏈接的目的通常是激活頁面上的對象或文本，使其可以應(yīng)用行為。給頁面對象添加空鏈接很簡單，在【屬性】面板的【鏈接】文本框中輸入“#”即可。6.2.3下載超級鏈接和空鏈接在實際應(yīng)用中，鏈接目標也可以166.2.4電子郵件超級鏈接電子郵件超級鏈接與一般的文本和圖像鏈接不同，因為電子郵件鏈接要將瀏覽者的本地電子郵件管理軟件（如OutlookExpress、Foxmail等）打開，而不是向服務(wù)器發(fā)出請求，因此它的添加步驟也與普通鏈接有所不同。使用以下兩種方法打開【電子郵件鏈接】對話框進行設(shè)置。選擇【插入記錄】/【電子郵件】命令在【插入】/【常用】面板中單擊（電子郵件鏈接）按鈕6.2.4電子郵件超級鏈接電子郵件超級鏈接與一般的文本和176.2.5錨記超級鏈接一般超級鏈接只能從一個網(wǎng)頁文檔跳轉(zhuǎn)到另一個網(wǎng)頁文檔，使用錨記超級鏈接不僅可以跳轉(zhuǎn)到同一網(wǎng)頁中的指定位置，還可以跳轉(zhuǎn)到其他網(wǎng)頁中指定的位置，包括同一站點內(nèi)的和不同站點內(nèi)的。創(chuàng)建錨記超級鏈接，需要經(jīng)過兩步：首先需要命名錨記，即在文檔中設(shè)置標記，這些標記通常放在文檔的特定主題處或頂部，然后在【屬性】面板中設(shè)置指向這些錨記的超級鏈接。創(chuàng)建錨記超級鏈接的方法：（1）使用以下兩種方式之一打開【命名錨記】對話框來插入錨記。選擇【插入記錄】/【命名錨記】命令在【插入】/【常用】面板中單擊（命名錨記）按鈕（2）選中鏈接文本，在【屬性】面板的【鏈接】下拉列表中輸入錨記名稱，或者選擇【插入記錄】/【超級鏈接】命令，打開【超級鏈接】對話框進行設(shè)置。6.2.5錨記超級鏈接一般超級鏈接只能從一個網(wǎng)頁文檔跳轉(zhuǎn)186.2.5錨記超級鏈接6.2.5錨記超級鏈接196.2.5錨記超級鏈接關(guān)于錨記超級鏈接目標地址的寫法應(yīng)該注意以下幾點。? 如果鏈接的目標錨記位于同一文檔中，只需在【屬性】面板的【鏈接】文本框中輸入一個“#”符號，然后輸入鏈接的錨記名稱，如“#a”。? 如果鏈接的目標錨記位于同一站點的其他網(wǎng)頁中，則需要先輸入該網(wǎng)頁的路徑和名稱，然后再輸入“#”符號和錨記名稱，如“index.htm#a”、“bbs/index.htm#a”。? 如果鏈接的目標錨記位于因特網(wǎng)上某一站點的網(wǎng)頁中，則需要先輸入該網(wǎng)頁的完整地址，然后再輸入“#”符號和錨記名稱，如“/yx/20080326.htm#b”等。6.2.5錨記超級鏈接關(guān)于錨記超級鏈接目標地址的寫法應(yīng)該206.3特殊超級鏈接鼠標經(jīng)過圖像和導(dǎo)航條Flash文本和Flash按鈕跳轉(zhuǎn)菜單和腳本鏈接6.3特殊超級鏈接鼠標經(jīng)過圖像和導(dǎo)航條216.3.1鼠標經(jīng)過圖像和導(dǎo)航條鼠標經(jīng)過圖像是指在網(wǎng)頁中，當鼠標經(jīng)過或者單擊圖像時，圖像的形狀、顏色等屬性會隨之發(fā)生變化，如發(fā)光、變形或者出現(xiàn)陰影，使網(wǎng)頁變得生動有趣。鼠標經(jīng)過圖像是基于圖像的比較特殊的鏈接形式，屬于圖像對象的范疇。鼠標經(jīng)過圖像有以下兩種狀態(tài)。? 原始狀態(tài)：在網(wǎng)頁中的正常顯示狀態(tài)。? 變換圖像狀態(tài)：當鼠標經(jīng)過或者單擊圖像時顯示變化圖像。在設(shè)置鼠標經(jīng)過圖像時，兩幅圖像的尺寸大小必須是一樣的。Dreamweaver將以第1幅圖像的尺寸大小作為標準，在顯示第2幅圖像時，將按照第1幅的尺寸大小來顯示。如果第2幅圖像比第1幅圖像大，那么將縮小顯示；反之，則放大顯示。為避免第2幅圖像可能出現(xiàn)的失真現(xiàn)象，因此，在制作和選擇兩幅圖像時，尺寸應(yīng)保持一致。6.3.1鼠標經(jīng)過圖像和導(dǎo)航條鼠標經(jīng)過圖像是指在網(wǎng)頁中，當226.3.1鼠標經(jīng)過圖像和導(dǎo)航條導(dǎo)航條是由一組按鈕或者圖像組成的，這些按鈕或者圖像鏈接各分支頁面，起到導(dǎo)航的作用。導(dǎo)航條也是基于圖像的比較特殊的鏈接形式，屬于圖像對象的范疇。導(dǎo)航條通常包括以下4種狀態(tài)。? 【狀態(tài)圖像】：用戶還未單擊圖像或圖像未交互時顯現(xiàn)的狀態(tài)。? 【鼠標經(jīng)過圖像】：當光標移動到圖像上時，元素發(fā)生變換而顯現(xiàn)的狀態(tài)。例如，圖像可能變亮、變色、變形，從而讓用戶知道可以與之交互。? 【按下圖像】：單擊 圖像后顯現(xiàn)的狀態(tài)。例如，當用戶單擊按鈕時，新頁面被載入且導(dǎo)航條仍是顯示的；但被單擊過的按鈕會變暗或者凹陷，表明此按鈕已被按下。? 【按下時鼠標經(jīng)過圖像】：單擊按鈕后，光標移動到被按下元素上時顯現(xiàn)的圖像。例如，按鈕可能變暗或變灰，可以用這個狀態(tài)暗示用戶：在站點的這個部分該按鈕已不能被再次單擊。6.3.1鼠標經(jīng)過圖像和導(dǎo)航條導(dǎo)航條是由一組按鈕或者圖像組236.3.1鼠標經(jīng)過圖像和導(dǎo)航條6.3.1鼠標經(jīng)過圖像和導(dǎo)航條246.3.2Flash文本和Flash按鈕將鼠標光標置于文檔中，然后選擇【插入記錄】/【媒體】/【Flash文本】命令，打開【插入Flash文本】對話框進行參數(shù)設(shè)置即可。在保存路徑中不能出現(xiàn)中文字符，保存的Flash動畫文件如果使用的是相對路徑，應(yīng)該和網(wǎng)頁文檔放在同一目錄下。6.3.2Flash文本和Flash按鈕將鼠標光標置于文檔256.3.2Flash文本和Flash按鈕

將鼠標光標置于文檔中，然后選擇【插入記錄】/【媒體】/【Flash按鈕】命令，打開【插入Flash按鈕】對話框并進行參數(shù)設(shè)置即可。在保存的路徑和文件名中也不能含有中文字符。保存的Flash動畫文件如果使用的是相對路徑，應(yīng)該和網(wǎng)頁文檔放在同一目錄下。6.3.2Flash文本和Flash按鈕將鼠標266.3.3跳轉(zhuǎn)菜單和腳本鏈接跳轉(zhuǎn)菜單是利用表單元素形成各種選項的列表。當選擇列表中的某個選項時，瀏覽器會立即跳轉(zhuǎn)到一個新網(wǎng)頁。選擇【插入記錄】/【表單】/【跳轉(zhuǎn)菜單】命令，或在【插入】/【表單】工具欄中單擊（列表/菜單）按鈕，打開【插入跳轉(zhuǎn)菜單】對話框進行參數(shù)設(shè)置即可。6.3.3跳轉(zhuǎn)菜單和腳本鏈接跳轉(zhuǎn)菜單是利用表單元素形成各種276.3.3跳轉(zhuǎn)菜單和腳本鏈接超級鏈接不僅可以用來實現(xiàn)頁面之間的跳轉(zhuǎn)，也可以用來直接調(diào)用JavaScript語句。這種單擊鏈接便執(zhí)行JavaScript語句的超級鏈接通常稱為JavaScript鏈接。創(chuàng)建JavaScript鏈接的方法是，首先選定文本或圖像，然后在【屬性】面板的【鏈接】文本框中輸入“JavaScript:”，后面跟一些JavaScript代碼或函數(shù)調(diào)用即可。6.3.3跳轉(zhuǎn)菜單和腳本鏈接超級鏈接不僅可以用來實現(xiàn)頁面之286.3.3跳轉(zhuǎn)菜單和腳本鏈接經(jīng)常用到的腳本鏈接JavaScript代碼。?JavaScript:alert('字符串')?JavaScript:history.go(1)：前進?JavaScript:history.go(-1)：后退?JavaScript:history.forward(1)：前進?JavaScript:history.back(1)：后退?JavaScript:history.print()：打印?JavaScript:window.external.AddFavorite(‘’,‘老虎工作室’)：收藏指定的網(wǎng)頁?JavaScript:window.close()：關(guān)閉窗口6.3.3跳轉(zhuǎn)菜單和腳本鏈接經(jīng)常用到的腳本鏈接JavaSc296.4 綜合小實例━━設(shè)置“宇宙速度”網(wǎng)頁超級鏈接設(shè)置“宇宙速度”網(wǎng)頁中的超級鏈接，具體要求如下。(1)設(shè)置文本和圖像超級鏈接：設(shè)置文本“直接閱讀英文全文”的鏈接目標文件為“English.htm”，設(shè)置網(wǎng)頁中圖像“images/sudus.jpg”的鏈接目標文件為“picture.htm”，打開目標窗口的方式均為在新窗口中打開。(2)設(shè)置電子郵件超級鏈接：給文本“聯(lián)系我們”添加電子郵件超級鏈接，鏈接地址為“yx2008@”。(3)設(shè)置腳本鏈接：給文本“前進”、“后退”、“打印本頁”和“關(guān)閉窗口”依次添加相應(yīng)的腳本鏈接。(4)創(chuàng)建錨記超級鏈接：在文檔“cosmicspeed”（即文件English.htm）中每段的開頭依次添加錨記“a”、“b”、“c”、“d”、“e”、“f”、“g”、“h”，