第7單元創(chuàng)建超級鏈接

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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