網(wǎng)頁制作與網(wǎng)站設(shè)計(jì)-05DreamweaverCS3創(chuàng)建超級(jí)鏈接

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

網(wǎng)頁制作技能訓(xùn)練項(xiàng)目五

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

任務(wù)二

文字超級(jí)鏈接任務(wù)三任務(wù)四任務(wù)五

圖片超級(jí)鏈接

創(chuàng)建E-mail鏈接創(chuàng)建錨點(diǎn)鏈接網(wǎng)頁網(wǎng)頁制作技能訓(xùn)練項(xiàng)目五

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

課程導(dǎo)航任務(wù)一

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

任務(wù)描述

任務(wù)說明實(shí)現(xiàn)過程任務(wù)一通過使用使用菜單創(chuàng)建鏈接。任務(wù)說明課程導(dǎo)航任務(wù)一

任務(wù)描述任務(wù)說明

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

任務(wù)描述任務(wù)說明

操作步驟

任務(wù)一操作步驟圖5-1超級(jí)鏈接對(duì)話框課程導(dǎo)航任務(wù)一

任務(wù)描述任務(wù)說明

操作步驟

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

任務(wù)描述任務(wù)說明

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

任務(wù)描述任務(wù)說明

操作步驟任務(wù)一圖5-2目標(biāo)選項(xiàng)操作步驟課程導(dǎo)航任務(wù)一

任務(wù)描述任務(wù)說明

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

任務(wù)描述任務(wù)說明

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

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

任務(wù)描述任務(wù)說明

操作步驟任務(wù)一圖5-3屬性面板課程導(dǎo)航任務(wù)一

任務(wù)描述任務(wù)說明

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

任務(wù)描述任務(wù)說明

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

任務(wù)描述任務(wù)說明操作步奏

任務(wù)二小張?jiān)跒g覽網(wǎng)頁時(shí)，看見鼠標(biāo)經(jīng)過某些文本時(shí)，會(huì)出現(xiàn)一個(gè)小手，點(diǎn)擊后會(huì)出現(xiàn)新的窗口，自己也想試一試。任務(wù)描述課程導(dǎo)航任務(wù)二

任務(wù)描述

任務(wù)說明操作步驟任務(wù)二任務(wù)說明當(dāng)瀏覽網(wǎng)頁時(shí)，鼠標(biāo)經(jīng)過某些文本時(shí)，會(huì)出現(xiàn)一個(gè)小手，提示瀏覽者這是帶鏈接的文本。此時(shí)單擊鼠標(biāo)左鍵，會(huì)打開所鏈接的網(wǎng)頁。這就是文本超級(jí)鏈接。課程導(dǎo)航任務(wù)二

任務(wù)描述任務(wù)說明

操作步驟任務(wù)二操作步驟

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

任務(wù)描述任務(wù)說明

操作步驟任務(wù)二操作步驟：

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

任務(wù)描述任務(wù)說明

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

任務(wù)描述解決方案操作步驟任務(wù)三任務(wù)描述：

小張?jiān)跒g覽網(wǎng)頁時(shí)，單擊網(wǎng)頁中的某個(gè)小圖片時(shí)，會(huì)在新窗口中打開一幅大圖片，自己也想試一試。課程導(dǎo)航任務(wù)三

任務(wù)描述

任務(wù)說明操作步驟任務(wù)三制作一個(gè)瀏覽網(wǎng)頁時(shí)，經(jīng)常會(huì)用到圖片鏈接，單擊網(wǎng)頁中的某個(gè)小圖片時(shí)，會(huì)在新窗口中打開一幅大圖片，這就是圖片鏈接。任務(wù)說明：課程導(dǎo)航任務(wù)三

任務(wù)描述任務(wù)說明

操作步驟任務(wù)三操作步驟：

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

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

任務(wù)描述任務(wù)說明

操作步驟圖5-9設(shè)置鏈接目標(biāo)課程導(dǎo)航任務(wù)三操作步驟：

3)按F12鍵，保存網(wǎng)頁文檔并在瀏覽器中檢驗(yàn)該文檔。任務(wù)三

任務(wù)描述任務(wù)說明

操作步驟課程導(dǎo)航任務(wù)四任務(wù)描述：

小張想自己設(shè)立了一個(gè)網(wǎng)頁，在運(yùn)行過程中可能會(huì)出現(xiàn)問題，通過瀏覽者能反饋的信息，及時(shí)改進(jìn)，提高網(wǎng)頁的制作水平。任務(wù)四

任務(wù)描述任務(wù)說明操作步驟課程導(dǎo)航任務(wù)四

在網(wǎng)頁上創(chuàng)建E-mail鏈接，可以使瀏覽者快速反饋?zhàn)约旱囊庖?，?dāng)瀏覽者單擊電子郵件鏈接時(shí)，系統(tǒng)會(huì)自動(dòng)啟動(dòng)默認(rèn)的電子郵件收發(fā)軟件（如Outlook、OutlookExpress等），收件人郵件地址被電子郵件超級(jí)鏈接中指定的地址自動(dòng)更新。任務(wù)四

任務(wù)描述

任務(wù)說明操作步驟任務(wù)說明：課程導(dǎo)航任務(wù)四操作步驟：

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

任務(wù)描述任務(wù)說明

操作步驟圖5-10建立HTML文件課程導(dǎo)航任務(wù)四操作步驟：

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

任務(wù)描述任務(wù)說明

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

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

任務(wù)描述任務(wù)說明

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

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

任務(wù)描述

任務(wù)說明操作步驟課程導(dǎo)航任務(wù)五操作步驟：

1）打開一個(gè)長網(wǎng)頁文檔，如圖5-13所示

任務(wù)五

任務(wù)描述任務(wù)說明

操作步驟圖5-13打開網(wǎng)頁文檔課程導(dǎo)航任務(wù)五操作步驟：

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

任務(wù)描述任務(wù)說明

操作步驟圖5-14命名錨記課程導(dǎo)航任務(wù)五操作步驟：

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

任務(wù)描述任務(wù)說明

操作步驟圖5-15插入命名錨記1課程導(dǎo)航任務(wù)五操作步驟：

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

任務(wù)描述任務(wù)說明

操作步驟圖5-16輸入鏈接課程導(dǎo)航任務(wù)五

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

任務(wù)描述任務(wù)說明

操作步驟操作步驟：圖5-17命名錨記課程導(dǎo)航任務(wù)五操作步驟：

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

任務(wù)描述任務(wù)說明

操作步驟圖5-18插入命名錨記2課程導(dǎo)航任務(wù)五操作步驟：

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