第7單元?jiǎng)?chuàng)建超級(jí)鏈接

1、 課堂講解 上機(jī)實(shí)戰(zhàn) 第7單元 創(chuàng)建超級(jí)鏈接 課堂講解 超級(jí)鏈接概念 超級(jí)鏈接分類 創(chuàng)建文本超級(jí)鏈接 創(chuàng)建錨鏈接 創(chuàng)建空鏈接 創(chuàng)建電子郵件超級(jí)鏈接 創(chuàng)建javascript腳本鏈接創(chuàng)建圖像超級(jí)鏈接 創(chuàng)建導(dǎo)航條 超級(jí)鏈接概念 超級(jí)鏈接是指頁(yè)面對(duì)象之間的鏈接關(guān)系，它網(wǎng)頁(yè)的靈魂，能合理、協(xié)調(diào)地把網(wǎng)站中的各個(gè)元素、頁(yè)面通過(guò)超級(jí)鏈接構(gòu)成了一個(gè)有機(jī)整體，使瀏覽者能快速地訪問(wèn)到想要訪問(wèn)的頁(yè)面。 鏈接有相對(duì)鏈接和絕對(duì)鏈接兩種，根據(jù)所鏈接對(duì)象的不同分為文本鏈接、圖像鏈接、錨鏈接、熱區(qū)鏈接、空鏈接腳本鏈接等。一般都采用相對(duì)鏈接，可使用基于文檔的路徑（如：contents.htm）或基于根目錄的路徑（如：/pic/

2、bg.gif）。超級(jí)鏈接分類 鏈接有相對(duì)超級(jí)鏈接和絕對(duì)超級(jí)鏈接兩種，根據(jù)所鏈接對(duì)象的不同分為文本鏈接、圖像鏈接、錨鏈接、熱區(qū)鏈接、空鏈接腳本鏈接等。一般都采用相對(duì)鏈接，可使用基于文檔的路徑（如：contents.htm）或基于根目錄的路徑（如：/pic/bg.gif）。絕對(duì)超級(jí)鏈接 絕對(duì)超級(jí)鏈接就是形如“http:/www.china/zh_cn”的超級(jí)鏈接地址，它給出了超級(jí)鏈接目標(biāo)端點(diǎn)完整的URL地址，包括使用的協(xié)議“http:/”。一般用于創(chuàng)建站外具有固定地址的超級(jí)鏈接。相對(duì)超級(jí)鏈接 使用相對(duì)超級(jí)鏈接不需要給出完整的URL地址，可省去URL地址的協(xié)議，只需保留不同的部分。如pic/logo

3、.gif，這是本地站點(diǎn)超級(jí)鏈接中最常用的鏈接形式。由于相對(duì)超級(jí)鏈接的文件之間相互關(guān)系并沒(méi)有發(fā)生變化，因此使用文檔相對(duì)路徑創(chuàng)建的超級(jí)鏈接在上傳時(shí)可以不用更新各個(gè)超級(jí)鏈接。 創(chuàng)建文本超級(jí)鏈接 文本超級(jí)鏈接是最常見(jiàn)的超級(jí)鏈接，通過(guò)使用鼠標(biāo)點(diǎn)擊文本即可從一個(gè)網(wǎng)頁(yè)跳轉(zhuǎn)到另一個(gè)網(wǎng)頁(yè)。 具體操作如下。 （1）選中要建立鏈接的文本。 （2）單擊“文本”屬性面板“鏈接”文本框后的 按鈕，在打開(kāi)的“選擇新文件”對(duì)話 框 中 選 擇 要 鏈 接 的 文 件 ， 這 里 選 擇“index.html”（即首頁(yè)），同時(shí)在“相對(duì)于”下拉列表框中選擇相應(yīng)的選項(xiàng)。 （3）單擊 按鈕返回到Dreamweaver編輯窗口，新建鏈

4、接地址出現(xiàn)在“鏈接”后的文本框中，同時(shí)，編輯窗口中的文本顯示為藍(lán)色，且加上了下劃線。 （4）按【F12】鍵在IE瀏覽器中瀏覽，當(dāng)鼠標(biāo)移動(dòng)到該鏈接上面時(shí)，會(huì)變成手形（如圖5-23所示），單擊它則可以在當(dāng)前窗口中打開(kāi)該文本所鏈接的頁(yè)面。 圖5-24創(chuàng)建錨鏈接 使用錨鏈接可以跳轉(zhuǎn)至文檔內(nèi)的特定位置。建立錨鏈接分為創(chuàng)建命名錨記和創(chuàng)建到該命名錨記的鏈接兩部分。創(chuàng)建命名錨記 鏈接命名錨記 創(chuàng)建命名錨記 創(chuàng)建命名錨記的具體操作如下。 （1）在“文檔”窗口的“設(shè)計(jì)”視圖中，將插入點(diǎn)放在需要命名錨記的地方。 （2）執(zhí)行下列操作之一。選擇插入命名錨記菜單命令；按下【Ctrl+Alt+A】鍵；在“插入”欄的“常用”

5、選項(xiàng)中，單擊“命名錨記”按鈕 。 （3）在打開(kāi)的“命名錨記”對(duì)話框的“錨記名稱”文本框中，輸入錨記名稱，如圖所示，并單擊 按鈕，錨記標(biāo)記出現(xiàn)在插入點(diǎn)處。 圖5-26鏈接命名錨記的創(chuàng)建 創(chuàng)建好錨記之后，就可以創(chuàng)建到該命名錨記的鏈接。具體操作如下。（1）選擇要?jiǎng)?chuàng)建命名錨記的文本或圖像。（2）在屬性面板的“鏈接”文本框中，輸入一個(gè)數(shù)字符號(hào)“#”和錨記名稱。 若要鏈接到當(dāng)前文檔中名為“top”的錨記，則輸入“#top”，如圖5-27所示。 若要鏈接到同一文件夾內(nèi)其他文檔中的名為“top”的錨記，則輸入“index.html#top”形式的錨記引用。 （3）按【F12】鍵，在IE瀏覽器中單擊“返回頂部”

6、鏈接，則返回到頁(yè)面頂部（命名錨記處），如圖5-28所示。 若要使用指向文件的方法鏈接到命名錨記，具體操作如下。 （1）打開(kāi)含有所需命名錨記的文檔。 （2）在“文檔”窗口的“設(shè)計(jì)”視圖中，選擇要從其創(chuàng)建鏈接的文本或圖像（如果這是其他打開(kāi)文檔，則必須切換到該文檔）。 （3）執(zhí)行下列操作之一。 單擊屬性面板“鏈接”文本框右側(cè)的“指向文件”按鈕， 然后將其拖到要鏈接到的錨記上（可以是同一文檔中的錨記，也可以是其他打開(kāi)文檔中的錨記）； 在“文檔”窗口中，按住【Shift】鍵進(jìn)行拖動(dòng)，將所選文本或圖像拖動(dòng)到要鏈接到的錨記（可以是同一文檔中的錨記，也可以是其他打開(kāi)文檔中的錨記）。 圖5-27 圖5-28創(chuàng)建

7、電子郵件超級(jí)鏈接 電子郵件在網(wǎng)絡(luò)應(yīng)用中十分廣泛，在網(wǎng)頁(yè)中建立電子郵件超級(jí)鏈接可打開(kāi)一個(gè)新的空白郵件窗口（使用的郵件程序跟瀏覽者的計(jì)算機(jī)環(huán)境有關(guān)）。在電子郵件消息窗口中，“收件人”文本框會(huì)自動(dòng)更新為顯示電子郵件鏈接中指定的地址。 具體操作如下。 （1）在“文檔”窗口的“設(shè)計(jì)”視圖中，將插入點(diǎn)置于希望出現(xiàn)電子郵件鏈接的位置，或者選擇要作為電子郵件鏈接的文本或圖像。 （2）執(zhí)行下列操作之一插入該鏈接： 選擇插入電子郵件鏈接菜單命令； 在“插入”欄的“常用”選項(xiàng)中，單擊“插入電子郵件鏈接”按鈕 。 （3）打開(kāi)“電子郵件鏈接”對(duì)話框，如圖所示。（4）在“文本”文本框中輸入顯示在Web頁(yè)面中的鏈接文本，如

8、“與我聯(lián)系”，如圖所示。 （5）在“E-Mail”文本框中輸入要鏈接到的電子郵箱地址，如“”，如圖所示。 （6）單擊 按鈕，其效果如圖所示。 也可以使用“文本”屬性面板創(chuàng)建電子郵件鏈接，具體操作如下。 （1）在“文檔”窗口的“設(shè)計(jì)”視圖中選擇要建立電子郵件鏈接的文本或圖像，如“與我聯(lián)系”。 （2）在屬性面板的“鏈接”文本框中，輸入“mailto:”，然后在它后面輸入電子郵件地址，如“mailto:”，如圖所示，在IE瀏覽器中單擊該鏈接的顯示效果如圖所示。 圖5-32創(chuàng)建空鏈接 要想對(duì)文本設(shè)置行為，首先必須為文本建立空超級(jí)鏈接（空超級(jí)鏈接是一個(gè)未指派目標(biāo)的超級(jí)鏈接），這樣行為才會(huì)有效。 為文本建

9、立空超級(jí)鏈接時(shí)，只要先在文檔窗口中選中需要建立空超級(jí)鏈接的文本，然后在屬性面板的“鏈接”文本框中輸入一個(gè)“#”符號(hào)即可。建立空超級(jí)鏈接的目的只是為了應(yīng)用行為，其他情況下不必建立。 （4） javascript腳本鏈接：腳本鏈接可以用于執(zhí)行計(jì)算，表單確認(rèn)和其他一些處理任務(wù)。創(chuàng)建步驟：在文檔窗口中選取文本，圖象或?qū)ο螅凇皩傩浴睓z查器的“鏈接”欄中鍵入javascript:，其后緊接javascript代碼或函數(shù)調(diào)用。例如在鏈接欄中鍵入javascript:alert(哈哈你上當(dāng)了)創(chuàng)建一個(gè)鏈接，點(diǎn)擊鏈接后就會(huì)出現(xiàn)一個(gè)警告框。創(chuàng)建javascript腳本鏈接 javascript腳本鏈接可以用于執(zhí)

10、行計(jì)算，表單確認(rèn)和其他一些處理任務(wù)。 創(chuàng)建步驟如下：在文檔窗口中選取文本，圖象或其他對(duì)象，在“屬性”面板窗口的“鏈接”欄中鍵入javascript:，其后緊接javascript代碼或函數(shù)調(diào)用。例如在鏈接欄中鍵入javascript:alert(哈哈你上當(dāng)了)創(chuàng)建一個(gè)鏈接，點(diǎn)擊鏈接后就會(huì)出現(xiàn)一個(gè)警告框。創(chuàng)建圖像超級(jí)鏈接 為一般圖像創(chuàng)建超級(jí)鏈接 創(chuàng)建圖像熱點(diǎn)超級(jí)鏈接 為一般圖像創(chuàng)建超級(jí)鏈接 圖像加入鏈接的具體操作如下。 （1）選中要建立鏈接的圖像。 （2）單擊“圖像”屬性面板“鏈接”項(xiàng)后的 按鈕，在打開(kāi)的“選擇文件”對(duì)話框中選擇要鏈接的文件，如選擇“index.html”（即首頁(yè)）。 （3）單擊

11、 按鈕返回到Dreamweaver編輯窗口，新建鏈接地址將出現(xiàn)在“鏈接”文本框中，如圖所示。 （4）在“替代”下拉列表中輸入注釋文本。在瀏覽器中瀏覽時(shí)，當(dāng)鼠標(biāo)移到圖像上面停留一會(huì)后會(huì)顯示該文本。 （5）按【F12】鍵在IE瀏覽器中瀏覽，當(dāng)鼠標(biāo)移動(dòng)到該鏈接上面時(shí)，會(huì)變成手形（如圖所示），單擊它則可以在當(dāng)前窗口中打開(kāi)該文本所鏈接的頁(yè)面，如圖所示。 圖6-20圖6-21圖6-22圖6-23創(chuàng)建圖像熱點(diǎn)超級(jí)鏈接 在前面所講的鏈接中，一個(gè)對(duì)象只能創(chuàng)建一個(gè)鏈接，但在網(wǎng)頁(yè)設(shè)計(jì)時(shí)有可能要在一個(gè)圖像上添加多個(gè)鏈接，若使用前面所講的鏈接方法則只能鏈接到一個(gè)目標(biāo)。為了解決這一矛盾，在Dreamweaver中巧妙地使

12、用了熱點(diǎn)進(jìn)行鏈接。利用熱點(diǎn)工具可以將一個(gè)圖像劃分為多個(gè)熱區(qū)作為鏈接點(diǎn)，再單獨(dú)對(duì)每個(gè)熱區(qū)添加相應(yīng)的鏈接圖像熱點(diǎn)鏈接。具體操作如下。 （1）選取要添加熱區(qū)的圖片，此時(shí)屬性面板中出現(xiàn)4個(gè)熱點(diǎn)工具。 4個(gè)熱點(diǎn)工具的作用如下。 ：指針熱點(diǎn)工具，用于移動(dòng)、放大或縮小熱區(qū)。 ：矩形熱點(diǎn)工具，用于繪制矩形熱區(qū)。 ：橢圓形熱點(diǎn)工具，用于繪制圓形熱區(qū)。 ：多邊形熱點(diǎn)工具，用于繪制多邊形熱區(qū)。 （2）選擇一個(gè)熱點(diǎn)繪制工具，在圖像上繪制熱區(qū)后，自動(dòng)打開(kāi)“熱區(qū)”屬性面板。 （3）在屬性面板中進(jìn)行具體的設(shè)置。 在“鏈接”文本框中輸入要鏈接的文件名稱或相應(yīng)的錨點(diǎn)名稱。 在“目標(biāo)”下拉列表框中選擇打開(kāi)鏈接頁(yè)的方式。在“替代”

13、文本框中輸入鼠標(biāo)移動(dòng)到鏈接熱點(diǎn)上時(shí)顯示的別名。 （4）用同樣的方法繪制其他熱點(diǎn)，并設(shè)置相應(yīng)的鏈接。 （5）在圖片中繪制完成所有的熱點(diǎn)后在文檔的空白區(qū)域單擊，以便應(yīng)用屬性的設(shè)置。 （6）熱點(diǎn)鏈接完成后按【F12】鍵預(yù)覽頁(yè)面，當(dāng)鼠標(biāo)移至熱區(qū)上時(shí)即可看到手形圖標(biāo)下面有一個(gè)提示文本。單擊該鏈接就會(huì)打開(kāi)對(duì)應(yīng)的頁(yè)面。導(dǎo)航條的創(chuàng)建 導(dǎo)航條由圖像或圖像組組成，這些圖像的顯示內(nèi)容隨操作不同而不同。導(dǎo)航條通常為在站點(diǎn)上的頁(yè)面和文件之間移動(dòng)提供一條簡(jiǎn)捷的途徑。導(dǎo)航條可以進(jìn)行復(fù)制，可以對(duì)導(dǎo)航條附加行為以應(yīng)用于不同的網(wǎng)頁(yè)。一個(gè)網(wǎng)頁(yè)中只允許有一個(gè)導(dǎo)航條。導(dǎo)航條項(xiàng)目有如下4種狀態(tài)。一般：尚未單擊或尚未與此項(xiàng)目交互時(shí)所顯示的

14、圖像。 滑過(guò)：指鼠標(biāo)指針滑過(guò)“一般”圖像時(shí)所顯示的圖像。項(xiàng)目的外觀發(fā)生變化（例如變得更亮），以便讓知道可與這個(gè)項(xiàng)目進(jìn)行交互。 按下：指項(xiàng)目被單擊后所顯示的圖像。 按下時(shí)鼠標(biāo)經(jīng)過(guò)：指在項(xiàng)目被單擊后，鼠標(biāo)指針滑過(guò)“按下”圖像時(shí)，所顯示的圖像。 在創(chuàng)建導(dǎo)航條時(shí)，不必包含所有這4種狀態(tài)的導(dǎo)航條圖像，可以只選用“一般”和“按下”這兩種狀態(tài)。插入導(dǎo)航條 編輯導(dǎo)航條 插入導(dǎo)航條 插入導(dǎo)航條的具體操作如下。 （1）將光標(biāo)定位到要插入導(dǎo)航條的位置。 （2）執(zhí)行下列操作之一打開(kāi)“插入導(dǎo)航條”對(duì)話框：?jiǎn)螕簟安迦霗凇钡摹俺Ｓ谩边x項(xiàng)卡，并單擊“插入導(dǎo)航條”按鈕 ，彈出“插入導(dǎo)航條”對(duì)話框；選擇插入圖像對(duì)象導(dǎo)航條菜單命令

15、。 （3）在“插入導(dǎo)航條”對(duì)話框中進(jìn)行具體的設(shè)置。設(shè)置的具體方法如下。在“項(xiàng)目名稱”文本框中，輸入導(dǎo)航條項(xiàng)目的名稱（如index）。該名稱只能包含字母和數(shù)字且不能以數(shù)字開(kāi)頭。在“狀態(tài)圖像”（必需）文本框后，單擊 按鈕選擇最初將顯示的圖像。在“鼠標(biāo)經(jīng)過(guò)圖像”文本框后，單擊 按鈕選擇當(dāng)一般圖像顯示時(shí)如果鼠標(biāo)指針滑過(guò)項(xiàng)目所顯示的圖像。 在“按下圖像”文本框中，單擊 按鈕選擇單擊項(xiàng)目后顯示的圖像。在“按下時(shí)鼠標(biāo)經(jīng)過(guò)圖像”文本框后，單擊 按鈕選擇當(dāng)鼠標(biāo)指針滑過(guò)按下圖像時(shí)所顯示的圖像。在“替換文本”文本框中，輸入項(xiàng)目的描述性名稱。在“按下時(shí)，前往的 URL”文本框中，單擊 按鈕選擇要打開(kāi)的鏈接文件，然后從右側(cè)的下拉列表中選擇打開(kāi)文件的位置。選中 復(fù)選框，可在載入頁(yè)面時(shí)下載圖像。如果未選擇此選項(xiàng)，在鼠標(biāo)指針滑過(guò)鼠標(biāo)經(jīng)過(guò)圖像時(shí)可能會(huì)出現(xiàn)延遲。選中 復(fù)選框，可在顯示頁(yè)面時(shí)，以“按下”狀態(tài)顯示所選項(xiàng)目，而不是以默認(rèn)的“一般”狀態(tài)顯示。選擇此選項(xiàng)時(shí)，在“導(dǎo)航條項(xiàng)目”列表中該項(xiàng)目后面出現(xiàn)一個(gè)星號(hào)。單擊 按鈕可向?qū)Ш綏l添加另一個(gè)項(xiàng)目，然后重復(fù)上述步驟定義該新項(xiàng)目。若要減少導(dǎo)航元件，可先在導(dǎo)航元件列表中選擇要?jiǎng)h除的項(xiàng)，再單擊 按鈕刪除即可。單擊 按鈕或 按鈕，可以改變導(dǎo)航條元件的出現(xiàn)順序。 （4）完成導(dǎo)航條項(xiàng)目的添加