網(wǎng)頁制作與開發(fā)教程_第4章建立超鏈接ppt課件

1、使用Dreamweaver 8設(shè)置超鏈接 4.2實踐與練習(xí)：鼠標經(jīng)過圖像 4.4實踐與練習(xí)：為文字添加超鏈接 4.3從HTML的角度理解超鏈接 4.1實踐與練習(xí)：導(dǎo)航條 4.5小結(jié) 超鏈接就是當用鼠標單擊一些文字、圖片或其他網(wǎng)頁元素時，瀏覽器就會根據(jù)其指示載入一個新的頁面或跳轉(zhuǎn)到頁面的其他位置。 與超鏈接相關(guān)的一個概念是定位點（也稱錨點），它指明了網(wǎng)頁中一個確定的位置，以便超鏈接跳轉(zhuǎn)時定位。4.1 從HTML的角度理解超鏈接 仍然根據(jù)本書的原則，先從HTML語言的角度，來介紹超鏈接。然后再使用Dreamweaver 8為網(wǎng)頁添加超鏈接。下面就來介紹各種超鏈接的制作方法。4.1.1 文字超鏈接圖

2、4-1 超鏈接的建立【例4-1】 文字超鏈接示例 超鏈接 單擊這里鏈接到一個圖片網(wǎng)頁圖4-1 超鏈接的建立 4.1.2 理解路徑的概念 路徑的作用就是定位一個文件的位置，使用過Windows的用戶都會了解文件夾和子文件夾，這本身就是路徑的概念。例如在上面的例子中，鏈接到的“1.html”就是一個路徑，直接使用文件名表示這個文件和原來的網(wǎng)頁文件在同一個文件夾中。如果鏈接到的網(wǎng)頁不和原網(wǎng)頁在同一個文件夾中，就不能這樣寫了。 例如如圖4-2所示的目錄結(jié)構(gòu)。圖4-2 調(diào)用下一級目錄中的文件 圖4-3 調(diào)用不同文件夾中的文件 【例4-2】 路徑示例 超鏈接 單擊這里鏈接到一個圖片網(wǎng)頁 圖4-4 “頁面載

3、入錯誤”對話框 4.1.3 設(shè)置文字鏈接的顏色 超鏈接可以通過設(shè)置鏈接的顏色來表示鏈接是否已經(jīng)被單擊，但這是在“”標簽中設(shè)置的，而不是在“”標簽中。下面來看一個具體的例子。 圖4-5 超鏈接文字的顏色設(shè)置 【例4-3】 超鏈接顏色設(shè)置示例 鏈接顏色的變化 注意顏色的變化 圖4-6 “Internet屬性”對話框4.1.4 特定目標的鏈接 在制作網(wǎng)頁時，可能會出現(xiàn)網(wǎng)頁內(nèi)容過長或者是網(wǎng)頁內(nèi)容繁雜混亂的情況，這樣當用戶瀏覽網(wǎng)頁時就會很不方便。要解決這個問題，可以使用超鏈接的手段在網(wǎng)頁開頭的地方制作一個向?qū)ф溄?，直接鏈接到特定的目標，這個目標成為“錨記”。 【例4-4】 錨記應(yīng)用示例 特定鏈接 古詩鑒

4、賞 單擊春宮怨 單擊登科居 單擊五十言懷詩 春宮怨 昨夜風開露井桃， 未央前殿月輪高。 平陽歌舞新承寵， 簾外春寒賜錦袍。 登科居 昔日齷齪不足夸， 今朝放蕩思無崖。 春風得意馬蹄疾， 一日看盡長安花。 五十言懷詩 笑舞狂歌五十年， 花中行樂月中眠。 漫勞海內(nèi)傳名字， 誰信腰間沒酒錢。 詩賦自慚稱作者， 眾人疑道是神仙。 些須做得工夫處， 莫損心頭一寸天。 圖4-7 特定鏈接 圖4-8 “五十言懷詩”的鏈接 4.1.5 以新窗口顯示鏈接頁面 相信大家已經(jīng)發(fā)現(xiàn)，當單擊鏈接時，所鏈接頁面還是在同一個窗口中顯示。如要在新窗口顯示，只需在“”標簽中加入“target”屬性就可以了。代碼如例4-5所示。

5、【例4-5】 在新窗口中打開鏈接頁面示例 以新窗口方式打開 以新窗口方式打開一個網(wǎng)頁 4.2 使用Dreamweaver 8設(shè)置超鏈接4.2.1 文字超鏈接 使一些文字成為超鏈接的方法非常簡單。用鼠標選中要變成超鏈接的文字，再在“屬性”面板的“鏈接”輸入框中輸入要跳轉(zhuǎn)到的目標頁面，也可以按下輸入框旁邊的文件夾圖標，選擇要跳轉(zhuǎn)的文件。 圖4-9 設(shè)置超鏈接文字 圖4-10 “文件”面板 這里再復(fù)習(xí)一下，建立超鏈接時要注意URL的三種方式。（1）絕對地址。 例如“/page1.htm”。（2）相對于服務(wù)器根目錄。 例如“/page1.htm”，以一條斜線（/）開頭，說明文件page1.htm在服務(wù)

6、器的根目錄下。（3）相對于文檔。 例如“page1.htm”，說明頁面page1.htm在當前文檔所在的目錄下。在這種方式下，可以用兩個點號表示上一級目錄，例如“./page1.htm”表示頁面page1.htm在當前文檔的上一級目錄中。4.2.2 圖片超鏈接 與文字的超鏈接很相似，圖片也可以作為超鏈接。 在文檔窗口選中圖片，打開“屬性”面板，與建立文字超鏈接相同，可以建立圖片超鏈接。圖4-11 制作需要鏈接的頁面圖4-12 輸入正文圖4-13 插入圖片 圖4-14 啟用“矩形熱點工具” 圖4-15 繪制矩形熱點區(qū)域 圖4-16 完成矩形熱點區(qū)域的繪制圖4-17 指針熱點工具 圖4-18 設(shè)置

7、熱區(qū)的鏈接地址和彈出方式 圖4-19 選擇“橢圓形熱點工具” 圖4-20 繪制橢圓熱點區(qū)域 圖4-21 添加鏈接地址 圖4-22 繪制多邊形熱點區(qū)域 圖4-23 預(yù)覽頁面4.3 實踐與練習(xí)：為文字添加超鏈接 本例著重練習(xí)在Dreawmeaver 8中對文字創(chuàng)建鏈接，如在一段文本中對個別的詞語創(chuàng)建鏈接，在瀏覽該頁面時可以通過該鏈接去瀏覽與該詞語相關(guān)的頁面。本例最終效果如圖4-24所示。 圖4-24 文檔鏈接效果圖4-25 “新建文檔”對話框圖4-26 創(chuàng)建新文檔 圖4-27 保存新文檔 圖4-28 輸入文本 圖4-29 需要創(chuàng)建鏈接的文本 圖4-30 屬性面板圖4-31 “選擇文件”對話框 圖4

8、-32 選擇鏈接文件 圖4-33 “對數(shù)”鏈接屬性 圖4-34 “帕斯卡”鏈接屬性圖4-35 文檔鏈接效果4.4 實踐與練習(xí)：鼠標經(jīng)過圖像 在網(wǎng)頁上我們經(jīng)常遇到這樣的圖片，它本身是一個圖片鏈接，即單擊它可以鏈接到其他頁面，但它特殊的地方在于鼠標進入圖片區(qū)域以后，圖像會發(fā)生改變。這就稱為“鼠標經(jīng)過圖像”，又稱為“翻轉(zhuǎn)圖”。通過它可以制作出交互的按鈕效果，這是網(wǎng)頁中很重要的元素，能使網(wǎng)頁更具動感。 圖4-36 瀏覽效果 圖4-37 “an1”和“an2” 圖4-38 添加鼠標經(jīng)過圖像圖4-39 鼠標經(jīng)過效果 圖4-40 鼠標離開時的效果 4.5 實踐與練習(xí)：導(dǎo)航條 這里說的導(dǎo)航條，本質(zhì)上是由若干個上面介紹的“鼠標經(jīng)過圖像”構(gòu)成的。但是Dreameaver8提供了非常方便的方法來制作它。 圖4-41 預(yù)覽頁面 圖4-42 使用圖形軟件制作按鈕 圖4-43 選擇圖像源文件 圖4-44 插入原始圖像圖4-45 選擇導(dǎo)航條的方向圖4-46 添加項目圖4-47 添加第二個按鈕圖形圖4-48 完成所有項目的添加圖4-49 插入后的導(dǎo)航欄 圖4-50 預(yù)覽頁面 小 結(jié) 在本章中