第3章 情景—— 建立某公司網(wǎng)站超級鏈接

1、第三章情景三—— 建立某公司網(wǎng)站超級鏈接,本章主要介紹了在Dreamweaver CS5中如何創(chuàng)建、編輯超級鏈接。超級鏈接是網(wǎng)頁設計的重要元素之一，通過超級鏈接用戶可隨意訪問網(wǎng)站內(nèi)、外的網(wǎng)頁，也可以訪問Internet網(wǎng)絡上的各類信息。本章內(nèi)容通過完成某公司網(wǎng)站的超級鏈接任務來學習。具體涉及以下內(nèi)容：超級鏈接概念路徑和URL超級鏈接的創(chuàng)建和編輯各類鏈接的使用,3.1 任務一：在網(wǎng)頁中使用超級鏈接,3.1.1 知識要點1. 超

2、級鏈接概念 超級鏈接就是實現(xiàn)文件和文件之間的相互訪問，通過超級鏈接可以從一個網(wǎng)頁指向另一個目標。超級鏈接由兩部分組成：鏈接的載體和鏈接目標，載體可以是文本或媒體，目標可以是網(wǎng)頁、圖像、郵件地址、word文檔或程序。通過超級鏈接可以將網(wǎng)站內(nèi)、外的網(wǎng)頁鏈接在一起。,2. 路徑和URL表示鏈接目標的地址就是路徑，超級鏈接的路徑有三種： （1）絕對路徑：是鏈接目標的完整路徑，包括使用的協(xié)議， 例如 htt

3、p://www.imvcc.com，絕對路徑通常用于站點外的文件鏈接。（2）相對路徑：是鏈接目標與源的相對目錄關(guān)系路徑。常用于同一站點內(nèi)不同文件的鏈接，是Dreamweaver中默認的鏈接路徑。,如圖所示，index.html和gsjj.html在同一級目錄內(nèi)，news.html是在下級目錄pages內(nèi)，則index.html連接到gsjj.html的相對路徑就是gsjj.html；而index.html連接到news.html的相對

4、路徑就是pages/news.html, news.html連接到index.html的相對路徑就是../ index.htm。,（3）站點根目錄相對路徑：是從站點根目錄開始的路徑，與鏈接的源端位置無關(guān)。需要先配置站點的HTTP地址（用“/”表示站點根文件夾）。URL（Uniform Resource Locator）：統(tǒng)一資源定位符，是超級鏈接相互訪問時標準的文件定位標示，其概念類似路徑，但是它應用于網(wǎng)頁的超級鏈接上，所以其寫法有

5、自己的規(guī)則。例如“http://news.163.com/11/1203/20/7KCHJ19C0001124J.html”是一個完整的URL，其完整的構(gòu)成是協(xié)議://用戶名@密碼:子域名.域名.頂級域名:端口號/目錄/文件名.文件后綴?參數(shù)=值#標志”協(xié)議根據(jù)網(wǎng)絡服務不同而不同，比較常用的有“HTTP（超級文本傳輸協(xié)議）”、“FTP（文件傳輸協(xié)議）”、“Telnet（遠程登錄）”等。頂級域名標示不同的網(wǎng)站類型，例如“edu”表

6、示教育類網(wǎng)站、“com”表示商業(yè)機構(gòu)、“org”表示非盈利組織、“gov”表示政府等。端口可以控制訪問服務器的服務，通常HTTP默認端口是80，F(xiàn)TP默認端口是21等。,3．創(chuàng)建超級鏈接鏈接的形式：鏈接有多種，按照功能可分為站點內(nèi)鏈接、站點外鏈接、郵件鏈接、錨鏈接、熱點鏈接、空鏈接和腳本鏈接等。 在Dreamweaver CS5中創(chuàng)建超級鏈接，先選擇網(wǎng)頁中的鏈接載體（文本或媒體），然后通過以下方法可以完成建立。,方法一：

7、在“屬性檢查器”中點擊“鏈接”屬性右面的 “瀏覽文件”按鈕，如圖所示。在彈出的“選擇文件”對話框中選擇被鏈接的文檔，如圖所示。,方法二：在“屬性檢查器”中直接拖曳 “鏈接”右面的 “指向文件”按鈕到要鏈接的文件。如圖所示。,方法三：在“屬性檢查器”中的“鏈接”文本框中直接輸入要鏈接的URL。例如要連接到“百度”網(wǎng)站，則在鏈接欄中輸入：www.baidu.com。方法四：在“菜單欄”中選擇“插入”|“超級鏈接”，在

8、彈出的“超級鏈接”對話框中的“文本”中輸入的是鏈接的文字，在“鏈接”中輸入或瀏覽鏈接的URL，如圖所示。,4．超級鏈接的修改和刪除（1）超級鏈接目標屬性鏈接的“屬性檢查器”中“目標”設定超級鏈接打開目標，下拉菜單中有五個選項表示文檔打開的位置，如圖所示。 _blank­­­：表示每個鏈接都在新瀏覽器窗口打開。_new：表示在同一個新的瀏覽器窗口打開。_parent：表示如果有嵌套框架，則在父框架中

9、打開。_self：表示在當前網(wǎng)頁的瀏覽器窗口打開（默認方式）。_top：表示在一個完整的瀏覽器窗口打開。,（2）修改超級鏈接超級鏈接創(chuàng)建完成后，若需要修改鏈接，在“修改”菜單中，選擇“更改鏈接”命令，在彈出對話框中重新選擇鏈接對象的路徑(也可以在鏈接屬性檢查器中的“鏈接”欄中修改路徑)。可以選中超級鏈接，在“屬性檢查器”中重新設定超級鏈接。（3）刪除超級鏈接若要刪除鏈接，則在“修改”菜單中，選擇“刪除鏈接”命令，可直接將鏈接刪

10、除，也可以在鏈接“屬性檢查器”中的“鏈接”屬性中把路徑刪除）。,3.1.2 工作任務與設計效果 依據(jù)教材提供素材，利用網(wǎng)絡資源制作所有“巨鑫房地產(chǎn)公司網(wǎng)站的頁面超級鏈接”。網(wǎng)站結(jié)構(gòu)如圖3-1-7所示，通過導航欄我們把站點內(nèi)的網(wǎng)頁鏈接起來。,3.1.3 建立站內(nèi)鏈接 先建立一個“巨鑫房產(chǎn)”站點，將教材中“素材3”文件夾中內(nèi)容復制到站點根目錄中。在Dreamweaver中打開網(wǎng)頁index.html，如圖所示。

11、,1．設置首頁與站點內(nèi)其他頁面的鏈接 在index.html頁面的導航欄上選中“公司簡介”圖像，然后在“屬性檢查器”中拖曳 “鏈接”屬性右面的按鈕到“文件”面板中的gsjj.html網(wǎng)頁，如圖所示。這樣就將公司首頁和公司簡介兩網(wǎng)頁鏈接起來了，按快捷鍵F12，可以在瀏覽器中預覽鏈接的效果。,用同樣的方法可以將網(wǎng)站首頁與其他的頁面（公司規(guī)劃（gsgh.html）、開發(fā)項目(kfxm.html)、企業(yè)合作(qyhz.htm

12、l)）鏈接起來。,2．設置站點內(nèi)其他頁面與首頁的鏈接 在Dreameaver 中打開gsjj.html（公司簡介）頁面，選擇導航欄中“首頁”圖像，然后將“屬性檢查器”中 “鏈接”屬性右面的 “指向文件”按鈕拖曳到“文件”面板中的index.html網(wǎng)頁如圖所示 ，這樣就將公司簡介與首頁鏈接起來了(也可用其他兩種方法鏈接) 。,使用同樣地方式將每個頁面導航欄中的圖像都連接到相應的網(wǎng)頁，這樣就可以從一個網(wǎng)頁方便的連接到站

13、點內(nèi)的任何一個頁面。,3.1.4 建立站外鏈接打開index.html頁面，在頁腳處設置相關(guān)鏈接：“搜狐”、“百度”、“網(wǎng)易”。（1）選中需要設置超級鏈接的文本“搜狐”。（2）打開“屬性檢查器”，在“鏈接”屬性中輸入前往的URL，http://www.sohu.com （注意：書寫URL的時候，前邊一定要加上http等協(xié)議）。（3）如果需要將打開的超級鏈接顯示到的新窗口中，在“屬性檢查器”中“目標”屬性下，選擇“_blank

14、”。如圖所示。,使用同樣地方法分別選中文本“百度”、“網(wǎng)易”，在鏈接屬性中輸入URL（http://www.baidu.com、http://www.163.com）就可以鏈接到百度和網(wǎng)易網(wǎng)站了。,3.1.5 建立郵件鏈接 首頁頁腳需要建立郵件鏈接，可以通過以下方法建立：方法1：將光標定位到需要插入電子郵件的位置，在“菜單欄”中選擇“插入”|“電子郵件”，在打開的對話框中設置文本和Email屬性，單擊確定按鈕，如圖所示。

15、,方法2：在Dreamweaver中打開index.html頁面，選中鏈接載體（導航欄中的“聯(lián)系我們”），在屬性檢查器的“鏈接”屬性中輸入“mailto:nmgsm@163.com”。（注意：在郵件地址前加mailto:）如圖所示。,建立郵件鏈接后，預覽index.html頁面，點擊導航欄中的“聯(lián)系我們”，彈出outlook“新郵件”對話框，可直接發(fā)郵件，如圖所示。,3.1.6 建立錨鏈接 錨鏈接是在網(wǎng)頁內(nèi)部不同位置的跳轉(zhuǎn)

16、，也可以鏈接到其他頁面的某個位置。 在Dreamweaver中打開news.html頁面，此頁面內(nèi)容較多，瀏覽時需要拖動滾動條，很不方便。我們可以在目錄和內(nèi)容之間建立錨鏈接，想瀏覽哪部分內(nèi)容只需在目錄上點擊就連接到要預覽的內(nèi)容了。以下是具體步驟：（1）在需要被鏈接的內(nèi)容標題上插入錨點，具體操作在“菜單欄”中選擇“插入”|“命名錨記（Ctrl+Alt+A）”或在“插入欄”中單擊 命名錨記按鈕，在彈出的“命名錨記”對話

17、框中輸入錨的名稱，如圖所示。,（2）選種目錄中標題（鏈接載體），打開“屬性檢查器”，拖動指向文件按鈕，將箭頭指向被鏈接的錨圖標。如圖3-1-16所示,同理可以將每個內(nèi)容標題前面都命名一個錨，將他和目錄標題都進行錨鏈接。這樣瀏覽起來很方便。,3.1.7超接鏈接的管理（1）鏈接內(nèi)容的修改：選中設置好的超級連接，打開“屬性檢查器”，在“鏈接”屬性的文本框中進行修改。（2）超接鏈接的刪除：選中設置好的超級連接，打開“屬性檢查器”，在“鏈接”

18、屬性的文本框中刪除文本。 當鏈接修改完之后，保存文件時，Dreamweaver中彈出更新鏈接的對話框以確保修改后鏈接的正確性，通常會單擊“更新”，如圖所示 。,（4）超接鏈接的檢查：當鏈接的文件路徑錯誤或文件丟失時，鏈接就會斷開，Dreamweaver可以檢查網(wǎng)頁斷開的鏈接并修復。打開“鏈接檢查器”，如圖所示，點擊斷開鏈接文件右面的瀏覽文件按鈕在彈出的對話框中重新選擇鏈接目標。,3.1.8 工作任務總結(jié) 在

19、這個任務中利用Dreamweaver CS5將已經(jīng)編輯好的公司網(wǎng)站內(nèi)的各網(wǎng)頁之間鏈接起來，這個工作是網(wǎng)站編輯制作中最重要的任務之一。通過這個任務能夠很好的訓練各種超級鏈接的創(chuàng)建、修改等。,3.2 任務二：設置超級鏈接樣式,3.2.1 知識要點 當網(wǎng)頁中的內(nèi)容設置了超級鏈接后會和普通文本的樣式有很大差別，光標移到鏈接載體上時會變成“手”型，文本默認的超級鏈接樣式是藍色文字帶下劃線，拜訪過的超級鏈接變?yōu)樯钭仙淖?。這些樣式都是可

20、以根據(jù)自己的喜好在“頁面屬性”對話框中修改的。,1．鏈接的四個狀態(tài)鏈接顏色：沒有被訪問過的超級鏈接的色彩，也沒有鼠標對其進行任何操做。變換圖像顏色：鼠標放置到超級鏈接之上顯示的色彩。已訪問過鏈接：超級鏈接被訪問過以后顯示的色彩。活動鏈接：在超級鏈接上單擊鼠標顯示的色彩。2．下劃線樣式始終有下劃線。始終無下劃線。 僅在變換圖像時顯示下劃線：鼠標懸停在超級鏈接之上時顯示下劃線。在變換圖像時隱藏下劃線：鼠標懸停在超級鏈接之

21、上時不顯示下劃線。,3.2.2 工作任務和設計效果 本節(jié)工作任務是為上一節(jié)已經(jīng)創(chuàng)建好超級鏈接的頁面進行超級鏈接的樣式設定，從而給超級鏈接個性化顯示。其效果如圖所示。,3.2.3 設置超級鏈接樣式單擊index.html頁面空白處，在“屬性檢查器”中單擊“頁面屬性”按鈕，在彈出的對話框中中進行設置：鏈接顏色為#666666(灰色)。鼠標放到超級鏈接之上，顏色變?yōu)?ff0000?；顒渔溄拥念伾褪髽私?jīng)過相同。訪問

22、過的顏色為#666666。僅在變換圖像時顯示下劃線樣（可分別比對以下其他幾種效果）。 設置完成后在瀏覽器中我們看到的文本是灰色的，鼠標移動到鏈接字體上就變成紅色的，鼠標也變成“手”型。注意：上面只能設置“文本”的鏈接樣式，若鏈接載體是圖像，可以利用“鼠標經(jīng)過圖像”特效制作導航條（見第二章的插入圖像對象內(nèi)容）。更多的鏈接樣式設置在可以使用后續(xù)章節(jié)中介紹的CSS技術(shù)進行設置。,3.2.4 工作任務總結(jié)

23、本節(jié)的任務主要訓練如何設定網(wǎng)頁中超級鏈接的樣式，在網(wǎng)頁中有四種狀態(tài)：鏈接（link）、變換圖像（hover）、活動（active） 訪問過（visited）。一般設置link狀態(tài)樣式要與hover狀態(tài)樣式有明顯區(qū)別，才會是瀏覽器中的鏈接時具有動態(tài)效果。設置好的鏈接樣式可以使導航一目了然，方便用戶的使用。,3.3其他超接鏈接1．空鏈接 在“屬性檢查器”的“鏈接”屬性中輸入“#”，空鏈接是激活網(wǎng)頁某對象的，可以為他添加一個

24、鏈接的動作，在瀏覽器中點擊鏈接時并不鏈接到新的網(wǎng)頁。一般網(wǎng)站首頁導航欄的首頁鏈接就可是空鏈接。很多情況下不明確的鏈接目標可以使用空連接臨時代替。,2．腳本鏈接在“鏈接”屬性中輸入“Javascript:腳本命令”，可通過鏈接觸發(fā)腳本命令。以下給出了幾個常見的腳本鏈接命令：（1）關(guān)閉窗口：javascript:window.close( )，效果如圖所示。,（2）彈出提示對話框： javascript:alert(‘歡迎光臨！‘)，效

25、果如圖所示。,（3）添加到收藏夾：javascript:window.external.addFavorite(‘收藏網(wǎng)頁的URL ‘)。（4）設置為默認主頁: 通過空鏈接，觸發(fā)onclick事件，onclick=”this.style.behavior=’url(#default#homepage)’;this.sethomepage(‘網(wǎng)頁的URL ‘)”。,3．熱點鏈接：在圖像的“屬性檢查器”中有矩形、圓形和多邊形的熱點工具

26、 ，可以在一張圖像上繪制出不同的熱點區(qū)域，設置多個超級鏈接。 具體設置鏈接的步驟：（1）在”屬性檢查器”中選擇矩形熱點工具，在圖像上拖曳繪制出熱點區(qū)域。如圖所示。,（2）選中熱點區(qū)，在“屬性檢查器”的“鏈接”屬性中設置“超級鏈接”路徑。如圖所示。（3）若熱點區(qū)域大小、位置不合適，可使用選擇工具，調(diào)整熱點的大小和位置。,3.4 本章小結(jié) 本章主要介紹了路徑、URL、超級鏈接的概念和幾