1、創(chuàng)建超級鏈接第1頁，共47頁，2022年，5月20日，11點26分，星期一課堂講解 超級鏈接概念 超級鏈接分類 創(chuàng)建文本超級鏈接 創(chuàng)建錨鏈接 創(chuàng)建空鏈接 創(chuàng)建電子郵件超級鏈接 創(chuàng)建圖像超級鏈接 創(chuàng)建下載超鏈接創(chuàng)建導(dǎo)航條 第2頁，共47頁，2022年，5月20日，11點26分，星期一超級鏈接概念 超級鏈接是指頁面對象之間的鏈接關(guān)系，它網(wǎng)頁的靈魂，能合理、協(xié)調(diào)地把網(wǎng)站中的各個元素、頁面通過超級鏈接構(gòu)成了一個有機(jī)整體，使瀏覽者能快速地訪問到想要訪問的頁面。 第3頁，共47頁，2022年，5月20日，11點26分，星期一超級鏈接分類 絕對超級鏈接 文檔相對路徑 站點根目錄相對路徑 第4頁，共47頁，2

2、022年，5月20日，11點26分，星期一絕對超級鏈接 絕對超級鏈接就是形如“http:/www.china/zh_cn”的超級鏈接地址，它給出了超級鏈接目標(biāo)端點完整的URL地址，包括使用的協(xié)議“http:/”。一般用于創(chuàng)建站外具有固定地址的超級鏈接。第5頁，共47頁，2022年，5月20日，11點26分，星期一文檔相對路徑 使用文檔相對路徑不需要給出完整的URL地址，可省去URL地址的協(xié)議，只需保留不同的部分。如pic/logo.gif，這是本地站點超級鏈接中最常用的鏈接形式。由于相對超級鏈接的文件之間相互關(guān)系并沒有發(fā)生變化，因此使用文檔相對路徑創(chuàng)建的超級鏈接在上傳時可以不用更新各個超級鏈接

3、。 第6頁，共47頁，2022年，5月20日，11點26分，星期一站點根目錄相對路徑 站點根目錄相對路徑是形如“/help/help.html”的超級鏈接地址，它基于站點根目錄，在同一個站點中網(wǎng)頁的超級鏈接也可采用這種方法。 第7頁，共47頁，2022年，5月20日，11點26分，星期一創(chuàng)建文本超級鏈接 文本超級鏈接是最常見的超級鏈接，通過使用鼠標(biāo)點擊文本即可從一個網(wǎng)頁跳轉(zhuǎn)到另一個網(wǎng)頁。 第8頁，共47頁，2022年，5月20日，11點26分，星期一2、創(chuàng)建文字鏈接 （1）選中文本 （2）打開屬性面板，在【鏈接】文本框里輸入鏈接地址，或指向文件。 （3）保存后按F12預(yù)覽，當(dāng)鼠標(biāo)點擊文本時會直

4、接鏈接到剛才輸入的網(wǎng)站。第9頁，共47頁，2022年，5月20日，11點26分，星期一創(chuàng)建錨鏈接 創(chuàng)建命名錨記 鏈接命名錨記 第10頁，共47頁，2022年，5月20日，11點26分，星期一創(chuàng)建命名錨記 在制作網(wǎng)頁時，為了達(dá)到跳轉(zhuǎn)到網(wǎng)頁固定位置的目的，可以使用錨鏈接。通過對網(wǎng)頁中指定位置的命名，利用超級鏈接打開目標(biāo)網(wǎng)頁時可直接跳轉(zhuǎn)到相應(yīng)的命名位置上。 第11頁，共47頁，2022年，5月20日，11點26分，星期一鏈接命名錨記 創(chuàng)建好錨記之后，必須創(chuàng)建對應(yīng)的超級鏈接源端點。 第12頁，共47頁，2022年，5月20日，11點26分，星期一創(chuàng)建錨記鏈接：（1）復(fù)制一篇文章，在頂部將大綱列出1.

5、2 3（2）將光標(biāo)放到每一段前依次添加錨記點，英文命名（3）選中大綱1.，在屬性面板下【鏈接】中輸入“#英文名”（5）重復(fù)操作，保存F12瀏覽第13頁，共47頁，2022年，5月20日，11點26分，星期一創(chuàng)建空鏈接 要想對文本設(shè)置行為，首先必須為文本建立空超級鏈接（空超級鏈接是一個未指派目標(biāo)的超級鏈接），這樣行為才會有效。 為文本建立空超級鏈接時，只要先在文檔窗口中選中需要建立空超級鏈接的文本，然后在屬性面板的“鏈接”文本框中輸入一個“#”符號即可。建立空超級鏈接的目的只是為了應(yīng)用行為，其他情況下不必建立。 第14頁，共47頁，2022年，5月20日，11點26分，星期一1、創(chuàng)建空鏈接 有時

6、制作網(wǎng)頁只是為了測試一下頁面，這時我們就需要使用空鏈接。 （1）選中要創(chuàng)建空鏈接的對象，打開屬性面板 （2）在【鏈接】文本框里輸入“#”號 （3）保存，F(xiàn)12鍵瀏覽，當(dāng)光標(biāo)指向鏈接對象時，光標(biāo)會 變?yōu)樾∈值男螤?，這就創(chuàng)建了空鏈接二、鏈接分類第15頁，共47頁，2022年，5月20日，11點26分，星期一創(chuàng)建電子郵件超級鏈接 電子郵件在網(wǎng)絡(luò)應(yīng)用中十分廣泛，在網(wǎng)頁中建立電子郵件超級鏈接可方便網(wǎng)頁瀏覽者與設(shè)計者之間的聯(lián)系。 第16頁，共47頁，2022年，5月20日，11點26分，星期一創(chuàng)建電子郵件鏈接 與其他鏈接的區(qū)別是，電子郵件鏈接并不是移動到特定的站點或網(wǎng)頁文檔，而是直接調(diào)用了可發(fā)送郵件的程序

7、 第17頁，共47頁，2022年，5月20日，11點26分，星期一創(chuàng)建電子郵件鏈接（1）將光標(biāo)放在需要插入郵件地址的位置 （2）執(zhí)行【插入】-【電子郵件鏈接】，打開對話框 （3）在【文本】中輸入電子郵件鏈接要顯示在頁面上的文本，在【E-mail】中輸入要鏈接的郵箱地址第18頁，共47頁，2022年，5月20日，11點26分，星期一創(chuàng)建圖像超級鏈接 為一般圖像創(chuàng)建超級鏈接 創(chuàng)建圖像熱點超級鏈接 第19頁，共47頁，2022年，5月20日，11點26分，星期一為一般圖像創(chuàng)建超級鏈接 第20頁，共47頁，2022年，5月20日，11點26分，星期一3、創(chuàng)建圖像鏈接 創(chuàng)建圖像鏈接可以單擊圖像跳轉(zhuǎn)到相關(guān)

8、的瀏覽頁面，是網(wǎng)頁設(shè)計者常用的一種鏈接方式。 （1）在文檔中插入一幅圖像 （2）選擇該圖像，打開屬性面板 （3）在【鏈接】文本框中輸入鏈接地址或指向文件。 （4）保存并瀏覽第21頁，共47頁，2022年，5月20日，11點26分，星期一創(chuàng)建圖像熱點超級鏈接 要在一幅比較大的圖片中添加許多超級鏈接時，應(yīng)該將圖片化整為零，分割成較小的圖片，然后分別為這些小圖像上建立超級鏈接來達(dá)到目的，但這時整幅圖片就不能對齊，利用Dreamweaver 8的圖像熱點超級鏈接功能就能避免這個問題。 第22頁，共47頁，2022年，5月20日，11點26分，星期一創(chuàng)建熱點鏈接注意：熱點鏈接只針對圖像 熱點工具：矩形熱

9、點、橢圓形熱點、多邊形熱點 如果一個文檔中只有一幅圖像，而又想在這幅圖像的不同位置創(chuàng)建多個鏈接，這時用圖像鏈接的方法是行不通的。只能將圖像劃分為多個區(qū)域作為鏈接的熱點。第23頁，共47頁，2022年，5月20日，11點26分，星期一創(chuàng)建熱點鏈接（1）選擇熱點繪制工具，繪制熱點 （2）打開屬性面板在【鏈接】輸入鏈接方向，確定目標(biāo)第24頁，共47頁，2022年，5月20日，11點26分，星期一創(chuàng)建下載鏈接常用對象為：.doc、.ppt、.exe、.rar、.zip （1）選中文本 （2）單擊【鏈接】文本框右側(cè)的“瀏覽文件”按鈕，選擇文件 （3）將文件保存在站點下 （4）單擊【確定】按鈕，保存并瀏覽

10、第25頁，共47頁，2022年，5月20日，11點26分，星期一創(chuàng)建導(dǎo)航條 插入導(dǎo)航條 編輯導(dǎo)航條 第26頁，共47頁，2022年，5月20日，11點26分，星期一插入導(dǎo)航條 導(dǎo)航條一般由圖像或圖像組組成，這些圖像的顯示內(nèi)容隨用戶的操作不同而進(jìn)行相應(yīng)的變化。導(dǎo)航條為訪問者瀏覽不同網(wǎng)頁提供了一條捷徑。 第27頁，共47頁，2022年，5月20日，11點26分，星期一編輯導(dǎo)航條 第28頁，共47頁，2022年，5月20日，11點26分，星期一二、導(dǎo)航條導(dǎo)航條由圖像或圖像組組成，圖像顯示內(nèi)容會隨用戶不同操作而變化。導(dǎo)航條主要是為在站點上的頁面和文件之間移動提供一條簡捷的途徑。導(dǎo)航條項目共包含有4種狀

11、態(tài)。一般：指用戶尚未單擊或尚未與此項目交互時所顯示的圖像。例如，此種狀態(tài)的項目看起來未被單擊過?；^：指鼠標(biāo)指針滑過“一般”圖像時所顯示的圖像。項目的外觀發(fā)生變化（例如變得更亮），以便讓用戶知道可與這個項目進(jìn)行交互。第29頁，共47頁，2022年，5月20日，11點26分，星期一二、導(dǎo)航條按下：指項目被單擊后所顯示的圖像。例如，用戶單擊某項目后，載入一個新的頁面，而導(dǎo)航條仍然顯示，只是被單擊的項目變暗，表示它曾被選擇過。按下時鼠標(biāo)經(jīng)過：指在項目被單擊后，鼠標(biāo)指針滑過“按下”圖像時，所顯示的圖像。此狀態(tài)可作為一個給用戶的可視提示，告訴他們在站點的這一部分，此項目不能再被單擊，例如，項目變淡或變灰

12、。第30頁，共47頁，2022年，5月20日，11點26分，星期一二、導(dǎo)航條下圖所示的4個圖片即為用戶自定義導(dǎo)航條4種不同狀態(tài)下圖片效果。1. 插入導(dǎo)航條使用【插入導(dǎo)航條】命令之前，須先為各個導(dǎo)航項目的顯示狀態(tài)創(chuàng)建一組圖像，并將該組圖像拷貝到站點內(nèi)。用戶可將導(dǎo)航條項目視為按鈕，因為單擊它時，導(dǎo)航條項目將鏈接到其他網(wǎng)頁。打開如下圖所示的【插入導(dǎo)航條】對話框，設(shè)置完畢后單擊【確定】按鈕即可。【插入導(dǎo)航條】對話框中各選項功能。添加項目 ：向【導(dǎo)航條元件】列表框中添加項目。第31頁，共47頁，2022年，5月20日，11點26分，星期一二、導(dǎo)航條刪除項目 ：刪除【導(dǎo)航條元件】列表框中項目。向上移動項目

13、 ：向上移動【導(dǎo)航條元件】列表框中的項目。向下移動項目 ：向下移動【導(dǎo)航條元件】列表框中的項目。導(dǎo)航條元件：顯示所有項目。項目名稱：為導(dǎo)航條項目命名，例如Home。狀態(tài)圖像：單擊【瀏覽】按鈕可從打開的對話框中自由選擇最初顯示的圖像。值得注意的是，此項為必添項，其他圖像狀態(tài)選項為可選項。鼠標(biāo)經(jīng)過圖像：單擊Browse按鈕可從打開的對話框中自由選擇當(dāng)用戶鼠標(biāo)指針滑過項目所顯示的圖像。按下圖像：單擊Browse按鈕可從打開的對話框中自由選擇用戶單擊項目后顯示的圖像。按下時鼠標(biāo)經(jīng)過圖像：單擊rowse按鈕可從打開的對話框中自由選擇當(dāng)用戶將鼠 標(biāo)指針滑過按下圖像時所顯示的圖像。第32頁，共47頁，202

14、2年，5月20日，11點26分，星期一二、導(dǎo)航條替換文本：輸入項目的描述性名稱。按下時，前往的URL：單擊Browse按鈕，以選擇要打開的鏈接文件。該選項后包含一個下拉列表框：選擇Main window(主窗口)選項可在同一窗口中打開文件。如果導(dǎo)航條位于框架集中，則應(yīng)選擇要在其中打開文件的框架。預(yù)先載入圖像：可在載入頁面時下載圖像。如果未選擇此選項，在用戶鼠標(biāo)指針滑過鼠標(biāo)經(jīng)過圖像時可能會出現(xiàn)延遲。頁面載入時就顯示“鼠標(biāo)按下圖像”：可在顯示頁面時，以按下狀態(tài)顯示所選項目。選擇此選項時，在【導(dǎo)航條元件】列表框中該項目后面出現(xiàn)一個星號。插入：可選擇在文檔中是設(shè)置導(dǎo)航條項目插入方式是垂直Vertica

15、lly插入還是Horizontally水平插入。使用表格：以表格的形式插入導(dǎo)航條項目。第33頁，共47頁，2022年，5月20日，11點26分，星期一二、導(dǎo)航條打開【插入導(dǎo)航條】對話框的方法有兩種。選擇【插入】|【圖像對象】|【導(dǎo)航條】命令。單擊【插入】工具欄左側(cè)的下拉三角按鈕，從彈出的快捷菜單中選擇【常規(guī)】選項，然后單擊其右側(cè)的【圖像】按鈕，從彈出的菜單中選擇選擇【導(dǎo)航條】選項，如圖8-17所示。新創(chuàng)建一個網(wǎng)頁，向其中添加一個“首頁”導(dǎo)航按鈕，其4種狀態(tài)使用的圖片分別為PIC01.jpg、PIC02.jpg、PIC03.jpg、PIC04.jpg，替換文本為“鏈接至首頁”，鏈接目標(biāo)為defa

16、ult.html。(1) 選擇【文件】|【新建】命令，創(chuàng)建一個HTML基本頁。(2) 將光標(biāo)置于文件的頂部，然后單擊【常規(guī)】工具欄中的【導(dǎo)航條】按鈕，打開【插入導(dǎo)航條】對話框。(3) 單擊【狀態(tài)圖像】文本框右側(cè)的【瀏覽】按鈕，選擇PIC01.jpg。(4) 單擊【鼠標(biāo)經(jīng)過圖像】文本框右側(cè)的【瀏覽】按鈕，選擇PIC02.jpg。 (5) 單擊【按下圖像】文本框右側(cè)的【瀏覽】按鈕，選擇PIC03.jpg。第34頁，共47頁，2022年，5月20日，11點26分，星期一二、導(dǎo)航條(6) 單擊【按下時鼠標(biāo)經(jīng)過圖像】文本框右側(cè)的【瀏覽】按鈕，選擇PIC04.jpg。(7 在【替換文本】文本框中輸入項目的

17、描述性名稱“鏈接至首頁”。(8) 單擊【按下時，前往的】右側(cè)的【瀏覽】按鈕，選擇站點中的default.html文件。(10) 設(shè)置完畢后單擊【確定】按鈕即可完成導(dǎo)航條的設(shè)置。2. 編輯導(dǎo)航條為文檔創(chuàng)建導(dǎo)航條后，可使用【修改導(dǎo)航條】命令向?qū)Ш綏l添加圖像，或從導(dǎo)航條中刪除圖像。此命令可用于更改圖像或圖像組、更改單擊項目時所打開的文件、選擇在不同的窗口或框架中打開文件以及重新排序圖像。若要修改導(dǎo)航條，選擇【修改】|【導(dǎo)航條】命令，打開【修改導(dǎo)航條】對話框，從【導(dǎo)航條元件】列表框中選擇要編輯的項目，再根據(jù) 實際需要進(jìn)行設(shè)置，設(shè)置完畢后單擊【確定】按鈕即可。第35頁，共47頁，2022年，5月20日，

18、11點26分，星期一三、動手實踐為“卡通動漫”網(wǎng)站index.asp網(wǎng)頁中左框架中的4張圖片添加超級鏈接，為上框架中的“設(shè)為首頁”、“加入收藏”、“聯(lián)系站長”添加超級鏈接；打開dmjs.asp網(wǎng)頁，添加“返回主頁”、“動漫介紹”、“動漫圖庫”和“留言薄”導(dǎo)航條；并設(shè)置“鼠標(biāo)未經(jīng)過”時文字超級鏈接樣式為去除下劃線。步驟1 設(shè)置圖像鏈接(1) 進(jìn)入ktzj站點，雙擊【文件】面板中的index.asp網(wǎng)頁。(2) 選擇“返回主頁”圖片，拖動【屬性】面板中的【指向文件】按鈕，指向【文件】面板中的index.asp網(wǎng)頁，打開【目標(biāo)】下拉列表框，選擇【_parent】選項。(3) 選擇“動漫介紹”圖片，拖

19、動【屬性】面板中的【指向文件】按鈕，指向【文件】面板中的dmjs.asp網(wǎng)頁，打開【目標(biāo)】下拉列表框，選擇【_parent】選項。(4) 選擇“動漫圖庫”圖片，拖動【屬性】面板中的【指向文件】按鈕，指向【文件】面板中的pic.asp網(wǎng)頁，打開【目標(biāo)】下拉列表框，選擇【_parent】選項。(5) 選擇“留言薄”圖片，拖動【屬性】面板中的【指向文件】按鈕，指向【文件】 面板中的liuyan.asp網(wǎng)頁，打開【目標(biāo)】下拉列表框，選擇 【_parent】選項。第36頁，共47頁，2022年，5月20日，11點26分，星期一三、動手實踐步驟2 設(shè)置“設(shè)為首頁”鏈接將光標(biāo)置于“設(shè)為首頁”字樣前，然后單擊

20、【文檔】工具欄中的【拆分】按鈕，在“設(shè)為首頁”前添加一段代碼：如右圖所示：第37頁，共47頁，2022年，5月20日，11點26分，星期一三、動手實踐步驟3 設(shè)置“加入收藏”鏈接在“加入收藏”前找到標(biāo)簽，加入如下代碼：如右圖所示：第38頁，共47頁，2022年，5月20日，11點26分，星期一三、動手實踐步驟4 設(shè)置E-Mail鏈接選擇設(shè)計區(qū)域中的“聯(lián)系站長”文本，單擊【常規(guī)】工具欄中的【電子郵件鏈接】按鈕，打開【電子郵件鏈接】對話框，確定【文本】文本框輸入的文字為“聯(lián)系站長”，在【E-Mail】文本輸入中輸入，然后單擊【確定】按鈕，完成E-Mail鏈接設(shè)置。步驟5 設(shè)置導(dǎo)航條(1) 選擇【插

21、入】|【圖像對象】|【導(dǎo)航條】命令，打開【插入導(dǎo)航條】對話框。(2) 在【項目名稱】文本框中輸入zhuye，單擊【狀態(tài)圖像】右側(cè)的【瀏覽】按鈕，從站點的dmjs文件夾中選擇zhuye.jpg；單擊【鼠標(biāo)經(jīng)過圖像】右側(cè)的【瀏覽】按鈕，從站點的dmjs文件夾中選擇zhuye01.jpg；在【替換文本】文本框中輸入“返回主頁”；單擊【按下時，前往的URL】右側(cè)的【瀏覽】按鈕，從站點中選擇index.asp。(3) 單擊【添加元件】按鈕，設(shè)置【項目名稱】為jieshao，【狀態(tài)圖像】為 jieshao.jpg，【鼠標(biāo)經(jīng)過圖像】為jieshao01.jpg，【替換文本】為“動 漫介紹”，【按下時，前往的

22、URL】為dmjs.asp。第39頁，共47頁，2022年，5月20日，11點26分，星期一三、動手實踐(4) 單擊【添加元件】按鈕，設(shè)置【項目名稱】為tuku，【狀態(tài)圖像】為tuku.jpg，【鼠標(biāo)經(jīng)過圖像】為tuku01.jpg，【替換文本】為“動漫圖庫”，【按下時，前往的URL】為pic.asp。(5) 單擊【添加元件】按鈕，設(shè)置【項目名稱】為liuyan，【狀態(tài)圖像】為liuyan.jpg，【鼠標(biāo)經(jīng)過圖像】為liuyan01.jpg，【替換文本】為“留言薄”，【按下時，前往的URL】為all.asp，如右圖所示。(6) 設(shè)置完畢后單擊【確定】按鈕。(7) 選擇整個導(dǎo)航條布局表格，在【屬

23、性】面板中的【寬】文本框中輸入812，單位選擇【像素】。(8) 選擇導(dǎo)航條布局單元格，在【屬性】面板中的【寬】文本框中輸入203，單位選擇【像素】，如下圖所示。第40頁，共47頁，2022年，5月20日，11點26分，星期一三、動手實踐(9) 設(shè)置完畢后保存文件，按F12鍵進(jìn)行預(yù)覽，將指針移至“動漫介紹”導(dǎo)航按鈕上時，得到如右圖所示的效果。步驟6 改變超級鏈接樣式在index.asp網(wǎng)頁中“設(shè)為首頁”、“加入收藏”和“聯(lián)系站長”中前兩個字樣都不帶下劃線，而第三個電子郵件聯(lián)接卻帶有下劃線，看上去很不美觀。下面介紹在鼠標(biāo)未經(jīng)過時超級鏈接樣式的改變方法。（1）選擇【文本】|【CSS樣式】|【新建】命令，打開【新建CSS樣式】對話框，。（2）從【選擇器類型】列表框中選擇【高級（ID、上下文選擇器等）】單選按鈕。（3）從【選擇器】下拉列表框中選擇【a:link】選項。第41頁，共47頁，2022年，5月20日，11點26分，星期一三、動手實踐（4）選擇【定義在】選項組中的【新建樣式表文件】單選按鈕，如左1圖所示。（5）設(shè)置完畢后，單擊【確定】按鈕，打開【保存樣式表文件為】對話框，在【文件名】文本框中輸入ljcs，如左圖2所示，單擊【保存】按鈕。（6）打開【a:link的CSS樣式定義】對話框，設(shè)置【字體】為【華文新魏】，