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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

20、以根據(jù)自己的喜好在“頁(yè)面屬性”對(duì)話框中修改的。,1．鏈接的四個(gè)狀態(tài)鏈接顏色：沒(méi)有被訪問(wèn)過(guò)的超級(jí)鏈接的色彩，也沒(méi)有鼠標(biāo)對(duì)其進(jìn)行任何操做。變換圖像顏色：鼠標(biāo)放置到超級(jí)鏈接之上顯示的色彩。已訪問(wèn)過(guò)鏈接：超級(jí)鏈接被訪問(wèn)過(guò)以后顯示的色彩?；顒?dòng)鏈接：在超級(jí)鏈接上單擊鼠標(biāo)顯示的色彩。2．下劃線樣式始終有下劃線。始終無(wú)下劃線。 僅在變換圖像時(shí)顯示下劃線：鼠標(biāo)懸停在超級(jí)鏈接之上時(shí)顯示下劃線。在變換圖像時(shí)隱藏下劃線：鼠標(biāo)懸停在超級(jí)鏈接之

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

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

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

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

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

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