網頁制作與網站設計-05DreamweaverCS3創(chuàng)建超級鏈接

項目五DreamweaverCS3創(chuàng)建超級鏈接

網頁制作技能訓練項目五

任務一創(chuàng)建超級鏈接的方法

任務二

文字超級鏈接任務三任務四任務五

圖片超級鏈接

創(chuàng)建E-mail鏈接創(chuàng)建錨點鏈接網頁網頁制作技能訓練項目五

任務一創(chuàng)建超級鏈接的方法

課程導航任務一

任務描述任務說明操作步驟任務一小張要建立一個美觀的網頁需要加入許多圖片、文字資料、影像、音樂等，下面我們就學習有關創(chuàng)建超級鏈接的操作界面。任務描述課程導航任務一

任務描述

任務說明實現過程任務一通過使用使用菜單創(chuàng)建鏈接。任務說明課程導航任務一

任務描述任務說明

操作步驟任務一1）在菜單欄中選擇“插入記錄”“超級鏈接”，彈出“超級鏈接”對話框，在對話柜中輸入相應的鏈接文件，或者單擊“常用”插入欄中的“超級鏈接”按鈕，也會打開“超級鏈接”對話框，如圖5-1所示。操作步驟課程導航任務一

任務描述任務說明

操作步驟

任務一操作步驟圖5-1超級鏈接對話框課程導航任務一

任務描述任務說明

操作步驟

任務一在“超級鏈接”對話框中可以設置的參數如下：①“文本”:設置超級鏈接顯示的文本。②“鏈接”:設置超級鏈接鏈接到的路徑，最好輸入相對路徑而不是絕對路徑。③“目標”:設置在何處打開網頁，包括4個選項，這四個選項是“_blank”；“_parent”；“_self”；“_top”,如圖5-2所示,具體的功能如下。操作步驟課程導航任務一

任務描述任務說明

操作步驟任務一“_blank”:在彈出的新窗口中打開所鏈接的目標?！癬parent”:如果是嵌套的框架，表示在父框架“_self”:瀏覽器默認的設置，在當前網頁所在的窗口中打開鏈接的網頁?！癬top”:在完整的瀏覽器窗口的頂層打開鏈接目標。課程導航任務一

任務描述任務說明

操作步驟任務一圖5-2目標選項操作步驟課程導航任務一

任務描述任務說明

操作步驟任務一④“標題”:設置超鏈接的標題。當鼠標懸停在超級鏈接上時出現的說明文字。⑤“訪問鍵”:設置鍵盤快捷鍵，設置好后，如果按鍵盤上的快捷鍵將選中這個超級鏈接。⑥“Tab鍵索引”:設置在網頁中用Tab鍵選中這個超鏈接的順序。2）完成參數設置后，單擊“確定”按鈕，即可完成鏈接。操作步驟課程導航任務一

任務描述任務說明

操作步驟任務一①使用“屬性”面板創(chuàng)建鏈接。

“屬性”面板面板中的“鏈接”文本框可用于創(chuàng)建鏈接，在【文檔】中選擇圖像或文本，打開“屬性”面板，在“鏈接”文本框中輸入鏈接的文件，從“目標”下拉列表框中選擇文檔位置，如圖5-3所示。課程導航任務一

任務描述任務說明

操作步驟任務一圖5-3屬性面板課程導航任務一

任務描述任務說明

操作步驟任務一②使用指向文件圖標創(chuàng)建鏈接在“屬性”面板中，單擊“鏈接”文本框右側的指向文件圖標，拖動鼠標時會出現一條帶箭頭的細線，指示到鏈接的文件后，釋放鼠標，可以鏈接該文件⑻如圖5-4所示。課程導航任務一

任務描述任務說明

操作步驟任務一圖5-4創(chuàng)建指向文件圖標鏈接課程導航任務二

任務描述任務說明操作步奏

任務二小張在瀏覽網頁時，看見鼠標經過某些文本時，會出現一個小手，點擊后會出現新的窗口，自己也想試一試。任務描述課程導航任務二

任務描述

任務說明操作步驟任務二任務說明當瀏覽網頁時，鼠標經過某些文本時，會出現一個小手，提示瀏覽者這是帶鏈接的文本。此時單擊鼠標左鍵，會打開所鏈接的網頁。這就是文本超級鏈接。課程導航任務二

任務描述任務說明

操作步驟任務二操作步驟

1）打開網頁文檔，選中要創(chuàng)建鏈接的文本，如圖5-5所示。圖5-5打開網頁文檔選中文本課程導航任務二

任務描述任務說明

操作步驟任務二操作步驟：

2）打開“屬性”面板，在面板中單擊“鏈接”文本框右邊的文件夾圖標，在彈出的對話框中選擇鏈接的文件，將文件添加到“鏈接”文本框中，如圖5-6所示。圖5-6創(chuàng)建鏈接課程導航任務二

任務描述任務說明

操作步驟任務二操作步驟：（3)按F12鍵，保存網頁文檔并在瀏覽器中檢驗該文檔，如圖5-7所示。圖5-7瀏覽效果課程導航任務三

任務描述解決方案操作步驟任務三任務描述：

小張在瀏覽網頁時，單擊網頁中的某個小圖片時，會在新窗口中打開一幅大圖片，自己也想試一試。課程導航任務三

任務描述

任務說明操作步驟任務三制作一個瀏覽網頁時，經常會用到圖片鏈接，單擊網頁中的某個小圖片時，會在新窗口中打開一幅大圖片，這就是圖片鏈接。任務說明：課程導航任務三

任務描述任務說明

操作步驟任務三操作步驟：

1）打開網頁文檔，選中要創(chuàng)建鏈接的圖片，在“源文件”文本框中顯示文件名，如圖5-8所示。圖5-8選中創(chuàng)建鏈接的圖片課程導航任務三操作步驟：

2）在“屬性”面板上的“鏈接”文本框中將鏈接目標設置為圖像文件或其他文件就可以了，如圖5-9所示。任務三

任務描述任務說明

操作步驟圖5-9設置鏈接目標課程導航任務三操作步驟：

3)按F12鍵，保存網頁文檔并在瀏覽器中檢驗該文檔。任務三

任務描述任務說明

操作步驟課程導航任務四任務描述：

小張想自己設立了一個網頁，在運行過程中可能會出現問題，通過瀏覽者能反饋的信息，及時改進，提高網頁的制作水平。任務四

任務描述任務說明操作步驟課程導航任務四

在網頁上創(chuàng)建E-mail鏈接，可以使瀏覽者快速反饋自己的意見，當瀏覽者單擊電子郵件鏈接時，系統(tǒng)會自動啟動默認的電子郵件收發(fā)軟件（如Outlook、OutlookExpress等），收件人郵件地址被電子郵件超級鏈接中指定的地址自動更新。任務四

任務描述

任務說明操作步驟任務說明：課程導航任務四操作步驟：

1）新建一個HTML文件，輸入一段文字，如圖5-10所示。任務四

任務描述任務說明

操作步驟圖5-10建立HTML文件課程導航任務四操作步驟：

2）在菜單欄中選擇“插入記錄”|“電子郵件鏈接”命令或點擊插入面板中“常用”標簽下的“電子郵件鏈接”按鈕，出現“電子郵件鏈接”對話框，在“E-mail”文本框中輸入郵箱地址，如圖5-11所示。任務四

任務描述任務說明

操作步驟圖5-11在“E-mail”文本框中輸入郵箱地址課程導航任務四操作步驟：

3）單擊“確定”按鈕，即可插入電子郵件鏈接。4）按F12鍵，保存文檔并預覽網頁，點擊E-mail的鏈接文字，網頁就會自動打開郵件處理程序，并在收件人欄中填寫好所設置的郵箱地址，如圖5-12所示。任務四

任務描述任務說明

操作步驟圖5-12E-mail鏈接效果課程導航任務五小張想自己設立了一個網頁，在運行過程中發(fā)現當文本內容分成多頁時，不能快速找到需要內容，有什么方法可以快速定位，方便查找需要的內容嗎？任務五

任務描述任務說明操作步驟任務描述：課程導航任務五任務說明：錨點鏈接通常用于大量文本的網頁，由于網頁內容非常多，瀏覽器的滾動條變得很長，而使瀏覽者無法快速找到所以內容。使用錨點鏈接可以給文本分段，來為網頁添加內部鏈接。單擊該鏈接，就可以跳到網頁中指定位置。任務五

任務描述

任務說明操作步驟課程導航任務五操作步驟：

1）打開一個長網頁文檔，如圖5-13所示

任務五

任務描述任務說明

操作步驟圖5-13打開網頁文檔課程導航任務五操作步驟：

2）將光標定位于第一首前，選擇菜單中的“插入記錄”“命名錨記”命令，或點擊插入面板中“常用”標簽下的“命名錨記”按鈕，彈出“命名錨記”對話框，在對話框中輸入“1”，如圖5-14所示。任務五

任務描述任務說明

操作步驟圖5-14命名錨記課程導航任務五操作步驟：

3）單擊“確定”按鈕，插入“錨記名稱1”，如圖5-15所示。任務五

任務描述任務說明

操作步驟圖5-15插入命名錨記1課程導航任務五操作步驟：

4）選擇文字1.長歌行(漢)漢樂府，在“屬性”面板的“鏈接”文本框中輸入錨記“#1”(英文輸入法下)，如圖5-16所示。任務五

任務描述任務說明

操作步驟圖5-16輸入鏈接課程導航任務五

5）將光標定位于第二首前，選擇菜單中的“插入記錄”“命名錨記”命令，或點擊插入面板中“常用”標簽下的“命名錨記”按鈕，彈出“命名錨記”對話框，在對話框中輸入“2”，如圖5-17所示任務五

任務描述任務說明

操作步驟操作步驟：圖5-17命名錨記課程導航任務五操作步驟：

6）單擊“確定”按鈕，插入“錨記名稱2”，如圖5-18所示。任務五

任務描述任務說明

操作步驟圖5-18插入命名錨記2課程導航任務五操作步驟：

7）選擇文字2.詠鵝(唐)駱賓王，在