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

1、第三章情景第三章情景3建立某公司網(wǎng)站超級鏈接建立某公司網(wǎng)站超級鏈接 本章主要介紹了在Dreamweaver CS5中如何創(chuàng)建、編輯超級鏈接。超級鏈接是網(wǎng)頁設(shè)計的重要元素之一，通過超級鏈接用戶可隨意訪問網(wǎng)站內(nèi)、外的網(wǎng)頁，也可以訪問Internet網(wǎng)絡(luò)上的各類信息。本章內(nèi)容通過完成某公司網(wǎng)站的超級鏈接任務(wù)來學(xué)習(xí)。具體涉及以下內(nèi)容：超級鏈接概念路徑和URL超級鏈接的創(chuàng)建和編輯各類鏈接的使用3.1 任務(wù)一：在網(wǎng)頁中使用超級鏈接任務(wù)一：在網(wǎng)頁中使用超級鏈接3.1.1 知識要點知識要點1. 超級鏈接概念超級鏈接概念 超級鏈接就是實現(xiàn)文件和文件之間的相互訪問，通過超級鏈接可以從一個網(wǎng)頁指向另一個目標(biāo)。超級鏈

2、接由兩部分組成：鏈接的載體和鏈接目標(biāo)，載體可以是文本或媒體，目標(biāo)可以是網(wǎng)頁、圖像、郵件地址、word文檔或程序。通過超級鏈接可以將網(wǎng)站內(nèi)、外的網(wǎng)頁鏈接在一起。2. 路徑和路徑和URL表示鏈接目標(biāo)的地址就是路徑，超級鏈接的路徑有三種： （1）絕對路徑：是鏈接目標(biāo)的完整路徑，包括使用的協(xié)議， 例如 http:/，絕對路徑通常用于站點外的文件鏈接。（2）相對路徑：是鏈接目標(biāo)與源的相對目錄關(guān)系路徑。常用于同一站點內(nèi)不同文件的鏈接，是Dreamweaver中默認(rèn)的鏈接路徑。 如圖所示，index.html和gsjj.html在同一級目錄內(nèi)，news.html是在下級目錄pages內(nèi)，則index.htm

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

4、 CS5中創(chuàng)建超級鏈接，先選擇網(wǎng)頁中的鏈接載體（文本或媒體），然后通過以下方法可以完成建立。方法一方法一：在“屬性檢查器”中點擊“鏈接”屬性右面的 “瀏覽文件”按鈕，如圖所示。在彈出的“選擇文件”對話框中選擇被鏈接的文檔，如圖所示。方法二方法二：在“屬性檢查器”中直接拖曳 “鏈接”右面的 “指向文件”按鈕到要鏈接的文件。如圖所示。方法三方法三：在“屬性檢查器”中的“鏈接”文本框中直接輸入要鏈接的URL。例如要連接到“百度”網(wǎng)站，則在鏈接欄中輸入：。方法四方法四：在“菜單欄”中選擇“插入”|“超級鏈接”，在彈出的“超級鏈接”對話框中的“文本”中輸入的是鏈接的文字，在“鏈接”中輸入或瀏覽鏈接的UR

5、L，如圖所示。4超級鏈接的修改和刪除超級鏈接的修改和刪除（1）超級鏈接目標(biāo)屬性鏈接的“屬性檢查器”中“目標(biāo)”設(shè)定超級鏈接打開目標(biāo)，下拉菜單中有五個選項表示文檔打開的位置，如圖所示。 _blank：表示每個鏈接都在新瀏覽器窗口打開。_new：表示在同一個新的瀏覽器窗口打開。_parent：表示如果有嵌套框架，則在父框架中打開。_self：表示在當(dāng)前網(wǎng)頁的瀏覽器窗口打開（默認(rèn)方式）。_top：表示在一個完整的瀏覽器窗口打開。（2）修改超級鏈接超級鏈接創(chuàng)建完成后，若需要修改鏈接，在“修改”菜單中，選擇“更改鏈接”命令，在彈出對話框中重新選擇鏈接對象的路徑(也可以在鏈接屬性檢查器中的“鏈接”欄中修改路

6、徑)?？梢赃x中超級鏈接，在“屬性檢查器”中重新設(shè)定超級鏈接。（3）刪除超級鏈接若要刪除鏈接，則在“修改”菜單中，選擇“刪除鏈接”命令，可直接將鏈接刪除，也可以在鏈接“屬性檢查器”中的“鏈接”屬性中把路徑刪除）。3.1.2 工作任務(wù)與設(shè)計效果工作任務(wù)與設(shè)計效果 依據(jù)教材提供素材，利用網(wǎng)絡(luò)資源制作所有“巨鑫房地產(chǎn)公司網(wǎng)站的頁面超級鏈接”。網(wǎng)站結(jié)構(gòu)如圖317所示，通過導(dǎo)航欄我們把站點內(nèi)的網(wǎng)頁鏈接起來。3.1.3 建立站內(nèi)鏈接建立站內(nèi)鏈接 先建立一個“巨鑫房產(chǎn)”站點，將教材中“素材3”文件夾中內(nèi)容復(fù)制到站點根目錄中。在Dreamweaver中打開網(wǎng)頁index.html，如圖所示。1設(shè)置首頁與站點內(nèi)其

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

8、后將“屬性檢查器”中 “鏈接”屬性右面的 “指向文件”按鈕拖曳到“文件”面板中的index.html網(wǎng)頁如圖所示 ，這樣就將公司簡介與首頁鏈接起來了(也可用其他兩種方法鏈接) 。使用同樣地方式將每個頁面導(dǎo)航欄中的圖像都連接到相應(yīng)的網(wǎng)頁，這樣就可以從一個網(wǎng)頁方便的連接到站點內(nèi)的任何一個頁面。3.1.4 建立站外鏈接建立站外鏈接打開index.html頁面，在頁腳處設(shè)置相關(guān)鏈接：“搜狐”、“百度”、“網(wǎng)易”。（1）選中需要設(shè)置超級鏈接的文本“搜狐”。（2）打開“屬性檢查器”，在“鏈接”屬性中輸入前往的URL，http:/ （注意：書寫URL的時候，前邊一定要加上http等協(xié)議）。（3）如果需要將打

9、開的超級鏈接顯示到的新窗口中，在“屬性檢查器”中“目標(biāo)”屬性下，選擇“_blank”。如圖所示。 使用同樣地方法分別選中文本“百度”、“網(wǎng)易”，在鏈接屬性中輸入URL（http:/、http:/）就可以鏈接到百度和網(wǎng)易網(wǎng)站了。3.1.5 建立郵件鏈接建立郵件鏈接 首頁頁腳需要建立郵件鏈接，可以通過以下方法建立：方法方法1：將光標(biāo)定位到需要插入電子郵件的位置，在“菜單欄”中選擇“插入”|“電子郵件”，在打開的對話框中設(shè)置文本和Email屬性，單擊確定按鈕，如圖所示。方法方法2：在Dreamweaver中打開index.html頁面，選中鏈接載體（導(dǎo)航欄中的“聯(lián)系我們”），在屬性檢查器的“鏈接”屬

10、性中輸入“mailto:”。（注意：在郵件地址前加mailto:）如圖所示。建立郵件鏈接后，預(yù)覽index.html頁面，點擊導(dǎo)航欄中的“聯(lián)系我們”，彈出outlook“新郵件”對話框，可直接發(fā)郵件，如圖所示。3.1.6 建立錨鏈接建立錨鏈接 錨鏈接是在網(wǎng)頁內(nèi)部不同位置的跳轉(zhuǎn)，也可以鏈接到其他頁面的某個位置。 在Dreamweaver中打開news.html頁面，此頁面內(nèi)容較多，瀏覽時需要拖動滾動條，很不方便。我們可以在目錄和內(nèi)容之間建立錨鏈接，想瀏覽哪部分內(nèi)容只需在目錄上點擊就連接到要預(yù)覽的內(nèi)容了。以下是具體步驟：（1）在需要被鏈接的內(nèi)容標(biāo)題上插入錨點，具體操作在“菜單欄”中選擇“插入”|“

11、命名錨記（Ctrl+Alt+A）”或在“插入欄”中單擊 命名錨記按鈕，在彈出的“命名錨記”對話框中輸入錨的名稱，如圖所示。（2）選種目錄中標(biāo)題（鏈接載體），打開“屬性檢查器”，拖動指向文件按鈕，將箭頭指向被鏈接的錨圖標(biāo)。如圖3116所示同理可以將每個內(nèi)容標(biāo)題前面都命名一個錨，將他和目錄標(biāo)題都進行錨鏈接。這樣瀏覽起來很方便。3.1.7超接鏈接的管理超接鏈接的管理（1）鏈接內(nèi)容的修改：選中設(shè)置好的超級連接，打開“屬性檢查器”，在“鏈接”屬性的文本框中進行修改。（2）超接鏈接的刪除：選中設(shè)置好的超級連接，打開“屬性檢查器”，在“鏈接”屬性的文本框中刪除文本。 當(dāng)鏈接修改完之后，保存文件時，Dream

12、weaver中彈出更新鏈接的對話框以確保修改后鏈接的正確性，通常會單擊“更新”，如圖所示 。（4）超接鏈接的檢查：當(dāng)鏈接的文件路徑錯誤或文件丟失時，鏈接就會斷開，Dreamweaver可以檢查網(wǎng)頁斷開的鏈接并修復(fù)。打開“鏈接檢查器”，如圖所示，點擊斷開鏈接文件右面的瀏覽文件按鈕在彈出的對話框中重新選擇鏈接目標(biāo)。3.1.8 工作任務(wù)總結(jié)工作任務(wù)總結(jié) 在這個任務(wù)中利用Dreamweaver CS5將已經(jīng)編輯好的公司網(wǎng)站內(nèi)的各網(wǎng)頁之間鏈接起來，這個工作是網(wǎng)站編輯制作中最重要的任務(wù)之一。通過這個任務(wù)能夠很好的訓(xùn)練各種超級鏈接的創(chuàng)建、修改等。3.2 任務(wù)二：設(shè)置超級鏈接樣式任務(wù)二：設(shè)置超級鏈接樣式3.2

13、.1 知識要點知識要點 當(dāng)網(wǎng)頁中的內(nèi)容設(shè)置了超級鏈接后會和普通文本的樣式有很大差別，光標(biāo)移到鏈接載體上時會變成“手”型，文本默認(rèn)的超級鏈接樣式是藍色文字帶下劃線，拜訪過的超級鏈接變?yōu)樯钭仙淖?。這些樣式都是可以根據(jù)自己的喜好在“頁面屬性”對話框中修改的。1鏈接的四個狀態(tài)鏈接的四個狀態(tài)鏈接顏色：沒有被訪問過的超級鏈接的色彩，也沒有鼠標(biāo)對其進行任何操做。變換圖像顏色：鼠標(biāo)放置到超級鏈接之上顯示的色彩。已訪問過鏈接：超級鏈接被訪問過以后顯示的色彩?；顒渔溄樱涸诔夋溄由蠁螕羰髽?biāo)顯示的色彩。2下劃線樣式下劃線樣式始終有下劃線。始終無下劃線。 僅在變換圖像時顯示下劃線：鼠標(biāo)懸停在超級鏈接之上時顯示下劃線

14、。在變換圖像時隱藏下劃線：鼠標(biāo)懸停在超級鏈接之上時不顯示下劃線。3.2.2 工作任務(wù)和設(shè)計效果工作任務(wù)和設(shè)計效果 本節(jié)工作任務(wù)是為上一節(jié)已經(jīng)創(chuàng)建好超級鏈接的頁面進行超級鏈接的樣式設(shè)定，從而給超級鏈接個性化顯示。其效果如圖所示。3.2.3 設(shè)置超級鏈接樣式設(shè)置超級鏈接樣式單擊index.html頁面空白處，在“屬性檢查器”中單擊“頁面屬性”按鈕，在彈出的對話框中中進行設(shè)置：鏈接顏色為#666666(灰色)。鼠標(biāo)放到超級鏈接之上，顏色變?yōu)?ff0000?；顒渔溄拥念伾褪髽?biāo)經(jīng)過相同。訪問過的顏色為#666666。僅在變換圖像時顯示下劃線樣（可分別比對以下其他幾種效果）。 設(shè)置完成后在瀏覽器中我們看

15、到的文本是灰色的，鼠標(biāo)移動到鏈接字體上就變成紅色的，鼠標(biāo)也變成“手”型。注意：上面只能設(shè)置“文本”的鏈接樣式，若鏈接載體是圖像，可以利用“鼠標(biāo)經(jīng)過圖像”特效制作導(dǎo)航條（見第二章的插入圖像對象內(nèi)容）。更多的鏈接樣式設(shè)置在可以使用后續(xù)章節(jié)中介紹的CSS技術(shù)進行設(shè)置。3.2.4 工作任務(wù)總結(jié)工作任務(wù)總結(jié) 本節(jié)的任務(wù)主要訓(xùn)練如何設(shè)定網(wǎng)頁中超級鏈接的樣式，在網(wǎng)頁中有四種狀態(tài)：鏈接（link）、變換圖像（hover）、活動（active） 訪問過（visited）。一般設(shè)置link狀態(tài)樣式要與hover狀態(tài)樣式有明顯區(qū)別，才會是瀏覽器中的鏈接時具有動態(tài)效果。設(shè)置好的鏈接樣式可以使導(dǎo)航一目了然，方便用戶的使

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

17、：javascript:window.external.addFavorite(收藏網(wǎng)頁的URL )。（4）設(shè)置為默認(rèn)主頁: 通過空鏈接，觸發(fā)onclick事件，onclick=”this.style.behavior=url(#default#homepage);this.sethomepage(網(wǎng)頁的URL )”。3熱點鏈接熱點鏈接：在圖像的“屬性檢查器”中有矩形、圓形和多邊形的熱點工具 ，可以在一張圖像上繪制出不同的熱點區(qū)域，設(shè)置多個超級鏈接。 具體設(shè)置鏈接的步驟：（1）在”屬性檢查器”中選擇矩形熱點工具，在圖像上拖曳繪制出熱點區(qū)域。如圖所示。（2）選中熱點區(qū)，在“屬性檢查器”的“鏈接”屬性中設(shè)置“超級鏈接”路徑。如圖所示。（3）若熱點區(qū)域大