第3章創(chuàng)建和編輯網(wǎng)頁(yè)文檔

1、$ 知識(shí)目標(biāo)知識(shí)目標(biāo) 掌握在網(wǎng)頁(yè)中的文本和段落的設(shè)置方法；掌握?qǐng)D像的插入及其屬性的設(shè)置的方法；熟悉頁(yè)面屬性的設(shè)置；熟悉各種超級(jí)鏈接及設(shè)置；掌握在Dreamweaver8中插入音頻文件的方法；掌握在Dreamweaver8中插入Flash文件的方法；掌握在Dreamweaver8中嵌入視頻文件的方法88 能力目標(biāo)能力目標(biāo)掌握文本和段落屬性設(shè)置的操作；掌握?qǐng)D像的插入及圖像屬性設(shè)置的操作；掌握頁(yè)面屬性的設(shè)置操作；掌握各種超級(jí)鏈接的設(shè)置及編輯操作；掌握在網(wǎng)頁(yè)中插入各種音頻文件的操作；掌握在網(wǎng)頁(yè)中插入Flash文件的操作；掌握在網(wǎng)頁(yè)插入視頻文件的操作3.1.1 創(chuàng)創(chuàng)建新的空白文檔建新的空白文檔3.1.2

2、 打打開(kāi)現(xiàn)有文檔開(kāi)現(xiàn)有文檔3.1.3 設(shè)置頁(yè)面屬性設(shè)置頁(yè)面屬性1執(zhí)行以下操作之一：執(zhí)行以下操作之一：?jiǎn)螕舨藛螜谥袉螕舨藛螜谥小拔募募眧“新建新建”命令。命令。單擊標(biāo)準(zhǔn)工具欄上的單擊標(biāo)準(zhǔn)工具欄上的 按鈕。按鈕。2打開(kāi)打開(kāi)“新建文檔新建文檔”對(duì)話框。對(duì)話框。3選擇選擇“基本頁(yè)基本頁(yè)”選項(xiàng)中的選項(xiàng)中的“HTML”，單擊，單擊“創(chuàng)創(chuàng)建建”按鈕，即可新建一個(gè)空白的文檔。按鈕，即可新建一個(gè)空白的文檔。 要在 Dreamweaver MX 2004 中創(chuàng)建新網(wǎng)頁(yè)，請(qǐng)使用起始頁(yè)和“文件”菜單起始頁(yè)“文件”菜單第二步第二步第一步第一步第三步第三步演示：使用“文件”菜單新建文檔的步驟“文檔文檔”工具欄工具欄“

3、文檔文檔”窗口窗口、通過(guò)文件菜單打開(kāi)己有的網(wǎng)頁(yè)：、通過(guò)文件菜單打開(kāi)己有的網(wǎng)頁(yè)：（1）執(zhí)行以下操作之一：）執(zhí)行以下操作之一：?jiǎn)螕舨藛螜谥械膯螕舨藛螜谥械摹拔募募眧“打開(kāi)打開(kāi)”命令。命令。或單擊標(biāo)準(zhǔn)工具欄上的或單擊標(biāo)準(zhǔn)工具欄上的 。（2）打開(kāi)）打開(kāi)“打開(kāi)打開(kāi)”對(duì)話框。對(duì)話框。（3）在查找范圍下拉列表中選擇網(wǎng)頁(yè)所在的文件夾）在查找范圍下拉列表中選擇網(wǎng)頁(yè)所在的文件夾,選選擇要打開(kāi)的文件擇要打開(kāi)的文件,單擊單擊“打開(kāi)打開(kāi)”按鈕按鈕,即可打開(kāi)了文件即可打開(kāi)了文件2、在、在“文件文件”面板中打開(kāi)網(wǎng)頁(yè)文件面板中打開(kāi)網(wǎng)頁(yè)文件在在“文件文件”面板中面板中,雙擊要打開(kāi)的文件雙擊要打開(kāi)的文件,即可打開(kāi)網(wǎng)頁(yè)即可打開(kāi)

4、網(wǎng)頁(yè)3、導(dǎo)入、導(dǎo)入WORD文檔（文件文檔（文件導(dǎo)入導(dǎo)入WORD文檔）文檔）4、在資源管理器中打開(kāi)網(wǎng)頁(yè)文件、在資源管理器中打開(kāi)網(wǎng)頁(yè)文件在資源管理器中，右擊要打開(kāi)的網(wǎng)頁(yè)文件，在彈出的快在資源管理器中，右擊要打開(kāi)的網(wǎng)頁(yè)文件，在彈出的快捷菜單中選擇捷菜單中選擇“在在Dreamweaver8”中編輯即可將文件在中編輯即可將文件在Dreamweaver8中打開(kāi)。中打開(kāi)。1要打開(kāi)頁(yè)面屬性對(duì)話框可以執(zhí)行以下操作之一：要打開(kāi)頁(yè)面屬性對(duì)話框可以執(zhí)行以下操作之一： 單擊菜單欄中單擊菜單欄中“修改修改”|“頁(yè)面屬性頁(yè)面屬性”命令。命令。 單擊文本單擊文本“屬性檢查器屬性檢查器”中的中的“頁(yè)面屬性頁(yè)面屬性”按鈕。按鈕。

5、2打開(kāi)頁(yè)面屬性對(duì)話框，如圖所示。打開(kāi)頁(yè)面屬性對(duì)話框，如圖所示。1在頁(yè)面屬性對(duì)話框中，選擇在頁(yè)面屬性對(duì)話框中，選擇“標(biāo)題標(biāo)題/編碼編碼”分類，如圖所示。分類，如圖所示。2在在“標(biāo)題標(biāo)題”文本框內(nèi)輸入網(wǎng)頁(yè)的標(biāo)題內(nèi)容，如文本框內(nèi)輸入網(wǎng)頁(yè)的標(biāo)題內(nèi)容，如“長(zhǎng)春游游長(zhǎng)春游游網(wǎng)網(wǎng)”。3點(diǎn)擊點(diǎn)擊“確定確定”退出頁(yè)面屬性對(duì)話框。退出頁(yè)面屬性對(duì)話框。4保存并在瀏覽器中預(yù)覽網(wǎng)頁(yè)保存并在瀏覽器中預(yù)覽網(wǎng)頁(yè),則標(biāo)題出現(xiàn)在瀏覽器的左上角則標(biāo)題出現(xiàn)在瀏覽器的左上角（一）設(shè)置網(wǎng)頁(yè)的外觀（一）設(shè)置網(wǎng)頁(yè)的外觀之一之一背景顏色背景顏色1在頁(yè)面屬性對(duì)話框中，選擇在頁(yè)面屬性對(duì)話框中，選擇“外觀外觀”分類。分類。2執(zhí)行以下操作之一：執(zhí)行以

6、下操作之一： 在在“背景顏色背景顏色”對(duì)話框中輸入顏色的十六進(jìn)制代碼如對(duì)話框中輸入顏色的十六進(jìn)制代碼如“#66CCFF” 點(diǎn)背景顏色后的按鈕點(diǎn)背景顏色后的按鈕 ，打開(kāi)調(diào)色板選擇顏色。，打開(kāi)調(diào)色板選擇顏色。3點(diǎn)擊點(diǎn)擊“確定確定”退出頁(yè)面屬性對(duì)話框。退出頁(yè)面屬性對(duì)話框。4保存并在瀏覽器中預(yù)覽網(wǎng)頁(yè)。保存并在瀏覽器中預(yù)覽網(wǎng)頁(yè)。（一）設(shè)置網(wǎng)頁(yè)的外觀（一）設(shè)置網(wǎng)頁(yè)的外觀之二之二背景圖像背景圖像1在頁(yè)面屬性對(duì)話中，選擇在頁(yè)面屬性對(duì)話中，選擇“外觀外觀”分類。分類。2點(diǎn)擊點(diǎn)擊“背景圖像背景圖像”后的后的“瀏覽瀏覽”按鈕，打開(kāi)選擇圖像源對(duì)按鈕，打開(kāi)選擇圖像源對(duì)話框。話框。3查找并選擇作為網(wǎng)頁(yè)背景的圖像，單擊查找

7、并選擇作為網(wǎng)頁(yè)背景的圖像，單擊“確定確定”退出頁(yè)面退出頁(yè)面屬性對(duì)話框。屬性對(duì)話框。4保存并在瀏覽器中預(yù)覽網(wǎng)頁(yè)。保存并在瀏覽器中預(yù)覽網(wǎng)頁(yè)。5.重復(fù)選項(xiàng)：確定是否以及如何重復(fù)背景圖像。有四個(gè)選項(xiàng)：重復(fù)選項(xiàng)：確定是否以及如何重復(fù)背景圖像。有四個(gè)選項(xiàng)：“不重復(fù)不重復(fù)”只在開(kāi)始處顯示一次圖像。只在開(kāi)始處顯示一次圖像?！爸貜?fù)重復(fù)”在水平和垂直方向在水平和垂直方向平鋪圖像。平鋪圖像。“橫向重復(fù)橫向重復(fù)”和和“縱向重復(fù)縱向重復(fù)”，分別在水平和垂直方向，分別在水平和垂直方向重復(fù)排列背景圖像。重復(fù)排列背景圖像。 頁(yè)面屬性中“左邊距”、“右邊距”、“上邊距”和“下邊距”四個(gè)選項(xiàng)，用于設(shè)置網(wǎng)頁(yè)頁(yè)面元素與頁(yè)面邊界的寬度

8、或高度。其右側(cè)下拉列表為寬度或高度的單位，默認(rèn)為“像素”。設(shè)置網(wǎng)頁(yè)的外觀設(shè)置網(wǎng)頁(yè)的外觀之三之三 在連接屬性對(duì)話框架可以對(duì)網(wǎng)頁(yè)的連接文本進(jìn)行統(tǒng)一的字體、字號(hào)及文本顏色的設(shè)置1在頁(yè)面屬性對(duì)話框中，選擇“連接”分類。2在“連接字體”的下拉菜單中，選擇字體。3在“大小”下拉菜單中，選擇字號(hào)。4單擊“連接顏色”右側(cè)的調(diào)色板，可以設(shè)置文本的顏色。1執(zhí)行以下操作之一：執(zhí)行以下操作之一：?jiǎn)螕舨藛螜谥袉螕舨藛螜谥小拔募募眧“保存保存”命令命令單擊標(biāo)準(zhǔn)工具欄上的單擊標(biāo)準(zhǔn)工具欄上的 按鈕。按鈕。2打開(kāi)打開(kāi)“另存為另存為”對(duì)話框。對(duì)話框。 3在在“保存在保存在”選項(xiàng)中選擇網(wǎng)頁(yè)的保存位置。在選項(xiàng)中選擇網(wǎng)頁(yè)的保存位置

9、。在“文件名文件名”文本框中的輸入文件名。文本框中的輸入文件名。4單擊單擊“保存保存”按鈕，文件就保存到指定位置。按鈕，文件就保存到指定位置。單擊菜單欄中單擊菜單欄中“文件文件”|“關(guān)閉關(guān)閉”或單擊文檔的窗口或單擊文檔的窗口右上角的右上角的“關(guān)閉關(guān)閉”即可。即可。以在以在Iexplore中預(yù)覽為例，執(zhí)行以下操作之一：中預(yù)覽為例，執(zhí)行以下操作之一：?jiǎn)螕舨藛螜谥袉螕舨藛螜谥小拔募募眧“在瀏覽器中預(yù)在瀏覽器中預(yù)覽覽”|“Iexplore 6.0”命令。命令。使用快捷鍵為使用快捷鍵為F12。在文檔工具欄中單擊，選擇在瀏覽器中預(yù)覽，如在文檔工具欄中單擊，選擇在瀏覽器中預(yù)覽，如圖所示。圖所示。3.2.

10、1 輸入文字輸入文字（一）插入普通文本（一）插入普通文本:添加文本有以下三種方法：添加文本有以下三種方法：1直接在文檔窗口中輸入文本。直接在文檔窗口中輸入文本。2拷貝文本?？截愇谋尽?從其他文檔導(dǎo)入文本。從其他文檔導(dǎo)入文本。（二）插入空格字符（二）插入空格字符 1. 編輯首選參數(shù)法編輯首選參數(shù)法 2. 代碼代碼  3. 中文全角中文全角 （三）插入特殊字符（三）插入特殊字符1將光標(biāo)定位在要插入特殊字符的位置。將光標(biāo)定位在要插入特殊字符的位置。2在在“插入插入”欄的欄的“文本文本”類別中，選擇要插入類別中，選擇要插入的符號(hào)，如圖。的符號(hào)，如圖。（一）（一） 設(shè)置文字標(biāo)題與段落設(shè)置文字標(biāo)題

11、與段落 1選擇要設(shè)置的文本。選擇要設(shè)置的文本。2在在“屬性檢查器屬性檢查器” ，設(shè)置文本格式。，設(shè)置文本格式。（二）（二） 設(shè)置字體與大小設(shè)置字體與大?。ㄈ┰O(shè)置文本顏色（三）設(shè)置文本顏色（四）設(shè)置文本對(duì)齊方式（四）設(shè)置文本對(duì)齊方式 使用屬性檢查器中的字體類型、字體大小、字體顏色等設(shè)置可以格式化文本字體字體演示：格式化文本的步驟（一）插入水平線（一）插入水平線 在網(wǎng)頁(yè)中插入水平線的操作為：在網(wǎng)頁(yè)中插入水平線的操作為：1在在“文檔文檔”窗口中，將光標(biāo)定位在要插入水平線的位置。窗口中，將光標(biāo)定位在要插入水平線的位置。2執(zhí)行下列操作之一：執(zhí)行下列操作之一： 單擊菜單欄中單擊菜單欄中 “插入插入”|“

12、HTML”|“水平線水平線”命令。命令。 在在“插入插入”欄的欄的“HTML”類別中，單擊類別中，單擊“水平線水平線”按鈕，如按鈕，如圖。圖。 3水平線插入在網(wǎng)頁(yè)中如圖水平線插入在網(wǎng)頁(yè)中如圖（二）修改水平線屬性：（二）修改水平線屬性：1選擇水平線選擇水平線2打開(kāi)打開(kāi)“水平線屬性水平線屬性”，如圖所示。，如圖所示。 “寬寬”：用于設(shè)置水平線的寬度。：用于設(shè)置水平線的寬度。 “高高”：以像素為單位，設(shè)置水平線的高度。：以像素為單位，設(shè)置水平線的高度。 “對(duì)齊對(duì)齊”：設(shè)置水平線的對(duì)齊方式（：設(shè)置水平線的對(duì)齊方式（“默認(rèn)默認(rèn)”、“左對(duì)齊左對(duì)齊”、“居中對(duì)齊居中對(duì)齊”或或“右對(duì)齊右對(duì)齊”）。）。 “陰影

13、陰影”：指定繪制水平線時(shí)是否帶陰影。取消選擇此選項(xiàng)將：指定繪制水平線時(shí)是否帶陰影。取消選擇此選項(xiàng)將使用純色繪制水平線。使用純色繪制水平線。（三）（三）.增添顏色增添顏色1選擇水平線選擇水平線2在在“屬性檢查器屬性檢查器”上，單擊上，單擊 打開(kāi)快速標(biāo)簽編輯器如圖。打開(kāi)快速標(biāo)簽編輯器如圖。 3插入插入color=？，顏色取值可以是英語(yǔ)（如，顏色取值可以是英語(yǔ)（如yellow）也可）也可用十六進(jìn)制代碼（如用十六進(jìn)制代碼（如#FFFF00）.（一）將當(dāng)前日期插入到文檔中（一）將當(dāng)前日期插入到文檔中1 在在“文檔文檔”窗口中，定位光標(biāo)在要插入日期的位置。窗口中，定位光標(biāo)在要插入日期的位置。2 執(zhí)行下列操

14、作之一：執(zhí)行下列操作之一： 單擊菜單欄中單擊菜單欄中“插入插入”|“日期日期”命令。命令。 在在“插入插入”欄的欄的“常用常用”類別中，單擊類別中，單擊“日期日期”按鈕按鈕3打開(kāi)打開(kāi)“插入日期插入日期”對(duì)話框如圖。對(duì)話框如圖。4在對(duì)話框中，選擇星期格式、日期格式和時(shí)間格式。在對(duì)話框中，選擇星期格式、日期格式和時(shí)間格式。5如選擇如選擇“儲(chǔ)存時(shí)自動(dòng)更新儲(chǔ)存時(shí)自動(dòng)更新”，在每次保存文檔時(shí)都會(huì)更新，在每次保存文檔時(shí)都會(huì)更新插入的日期。取消選擇，日期在插入后變成純文本并永遠(yuǎn)不自動(dòng)更插入的日期。取消選擇，日期在插入后變成純文本并永遠(yuǎn)不自動(dòng)更新。新。6單擊單擊“確定確定”插入日期，效果如圖所示。插入日期，效

15、果如圖所示。在網(wǎng)頁(yè)中插入圖像的操作為：在網(wǎng)頁(yè)中插入圖像的操作為：1.將光標(biāo)定位在要插入圖像的位置。將光標(biāo)定位在要插入圖像的位置。2.執(zhí)行以下操作之一：執(zhí)行以下操作之一：?jiǎn)螕舨藛螜谥械膯螕舨藛螜谥械摹安迦氩迦搿眧“圖像圖像”命令。命令。在在“插入插入”欄的欄的“常用常用”類別中，單擊類別中，單擊“圖像圖像”按鈕按鈕3打開(kāi)打開(kāi)“選擇圖像源文件選擇圖像源文件”對(duì)話框，選擇需要的對(duì)話框，選擇需要的文件名稱。文件名稱。4在在“相對(duì)于相對(duì)于”下拉列表中選擇下拉列表中選擇“站點(diǎn)站點(diǎn)”。5單擊單擊“確定確定”按鈕，圖像則插入到網(wǎng)頁(yè)中。按鈕，圖像則插入到網(wǎng)頁(yè)中。在文檔窗口選中圖像時(shí)，在在文檔窗口選中圖像時(shí)，在“

16、屬性檢查器中就可以顯示該圖像屬性檢查器中就可以顯示該圖像的屬性，并可對(duì)其進(jìn)行修改。的屬性，并可對(duì)其進(jìn)行修改。1圖像名稱及大小圖像名稱及大小2設(shè)置圖像大小：可以直接在設(shè)置圖像大?。嚎梢灾苯釉凇皩拰挕焙秃汀案吒摺眱蓚€(gè)文本框內(nèi)輸入兩個(gè)文本框內(nèi)輸入新的數(shù)值即可。還可以直接用鼠標(biāo)拖動(dòng)來(lái)改變圖像的大小。具體操新的數(shù)值即可。還可以直接用鼠標(biāo)拖動(dòng)來(lái)改變圖像的大小。具體操作為：作為：（1）選中要改變的圖像，圖像四周出現(xiàn)控制點(diǎn)。）選中要改變的圖像，圖像四周出現(xiàn)控制點(diǎn)。（2）拖動(dòng)任一個(gè)控制點(diǎn)則可改變圖像大?。┩蟿?dòng)任一個(gè)控制點(diǎn)則可改變圖像大小 3設(shè)置圖像對(duì)齊方式設(shè)置圖像對(duì)齊方式4其他圖像屬性其他圖像屬性“源文件源文件

17、”：指定圖像的源文件。單擊：指定圖像的源文件。單擊“瀏覽瀏覽”按鈕按鈕 或者或者直接鍵入文件的路徑，可以重新定義源文件。直接鍵入文件的路徑，可以重新定義源文件?！疤娲娲保河糜谥付ㄔ趫D像不能正常顯示時(shí)，顯示的關(guān)于圖：用于指定在圖像不能正常顯示時(shí)，顯示的關(guān)于圖像的文本提示信息。在某些瀏覽器中，當(dāng)鼠標(biāo)指針滑過(guò)圖像時(shí)也會(huì)像的文本提示信息。在某些瀏覽器中，當(dāng)鼠標(biāo)指針滑過(guò)圖像時(shí)也會(huì)顯示該文本。顯示該文本?！按怪边吘嗪退竭吘啻怪边吘嗪退竭吘唷保阂韵袼貫閱挝辉O(shè)定圖像與周圍的：以像素為單位設(shè)定圖像與周圍的網(wǎng)頁(yè)元素間的距離。網(wǎng)頁(yè)元素間的距離?！斑吙蜻吙颉保菏且韵袼貫閱挝坏膱D像邊框的寬度。默認(rèn)為無(wú)邊：是以像

18、素為單位的圖像邊框的寬度。默認(rèn)為無(wú)邊框?？?。在在Dreamweaver8中提供了基本圖像編輯功能，各編輯按鈕如中提供了基本圖像編輯功能，各編輯按鈕如下：下：優(yōu)化。單擊此按鈕可以打開(kāi)優(yōu)化。單擊此按鈕可以打開(kāi)“Fireworks”程序?qū)D像進(jìn)行程序?qū)D像進(jìn)行優(yōu)化。優(yōu)化。 裁剪。可讓修剪圖像的大小，從所選圖像中刪除不需要裁剪?？勺屝藜魣D像的大小，從所選圖像中刪除不需要的區(qū)域。的區(qū)域。 重新取樣。可對(duì)已調(diào)整大小的圖像進(jìn)行重新取樣，提高重新取樣?？蓪?duì)已調(diào)整大小的圖像進(jìn)行重新取樣，提高圖片在新尺寸和形狀下的品質(zhì)。圖片在新尺寸和形狀下的品質(zhì)。 亮度和對(duì)比度。可讓調(diào)整圖像的亮度和對(duì)比度設(shè)置。亮度和對(duì)比度。可讓

19、調(diào)整圖像的亮度和對(duì)比度設(shè)置。 銳化可調(diào)整圖像的清晰度。銳化可調(diào)整圖像的清晰度。設(shè)置設(shè)置插入圖像占位符插入圖像占位符的操作為：的操作為：1在在“文檔文檔”窗口中窗口中,將光標(biāo)定位在要顯示將光標(biāo)定位在要顯示插入圖像占位插入圖像占位符符的位置。的位置。 2執(zhí)行以下操作之一，打開(kāi)插入執(zhí)行以下操作之一，打開(kāi)插入圖像占位符圖像占位符對(duì)話框：對(duì)話框： 單擊菜單欄中單擊菜單欄中“插入插入|圖像對(duì)象圖像對(duì)象|插入圖像占位符插入圖像占位符”命令。命令。 在在“插入插入”欄的欄的“常用常用”類別中，單擊類別中，單擊“圖像圖像”按鈕按鈕右側(cè)的箭頭，在彈出的菜單中，選擇右側(cè)的箭頭，在彈出的菜單中，選擇“插入圖像占位符插

20、入圖像占位符”，如，如圖圖所示。所示。設(shè)置鼠標(biāo)經(jīng)過(guò)圖像的操作為：設(shè)置鼠標(biāo)經(jīng)過(guò)圖像的操作為：1在在“文檔文檔”窗口中窗口中,將光標(biāo)定位在要顯示鼠標(biāo)經(jīng)過(guò)圖將光標(biāo)定位在要顯示鼠標(biāo)經(jīng)過(guò)圖像的位置。像的位置。 2執(zhí)行以下操作之一，打開(kāi)插入鼠標(biāo)經(jīng)過(guò)圖像對(duì)話框：執(zhí)行以下操作之一，打開(kāi)插入鼠標(biāo)經(jīng)過(guò)圖像對(duì)話框： 單擊菜單欄中單擊菜單欄中“插入插入|圖像對(duì)象圖像對(duì)象|鼠標(biāo)經(jīng)過(guò)圖像鼠標(biāo)經(jīng)過(guò)圖像”命令。命令。 在在“插入插入”欄的欄的“常用常用”類別中，單擊類別中，單擊“圖像圖像”按鈕按鈕右側(cè)的箭頭，在彈出的菜右側(cè)的箭頭，在彈出的菜單中，選擇單中，選擇“鼠標(biāo)鼠標(biāo)經(jīng)過(guò)圖像經(jīng)過(guò)圖像”，如圖，如圖所示。所示。3打開(kāi)打開(kāi)“鼠

21、標(biāo)經(jīng)過(guò)圖像鼠標(biāo)經(jīng)過(guò)圖像”對(duì)話框。對(duì)話框。4單擊單擊“確定確定”，在網(wǎng)頁(yè)中插入了鼠標(biāo)經(jīng)過(guò)圖像。，在網(wǎng)頁(yè)中插入了鼠標(biāo)經(jīng)過(guò)圖像。 5保存并在瀏覽器中預(yù)覽網(wǎng)頁(yè)。保存并在瀏覽器中預(yù)覽網(wǎng)頁(yè)。3.4.1 超鏈接的概超鏈接的概念念3.4.2 創(chuàng)建超級(jí)鏈接創(chuàng)建超級(jí)鏈接3.4.3 管理超級(jí)鏈接管理超級(jí)鏈接3.4.4 圖圖像映射像映射3.4.5 導(dǎo)導(dǎo)航條航條 Dreamweaver 幫助您將頁(yè)面元素（如文本、圖像和按鈕等）鏈接到其他文檔（如 HTML 文件、圖像和視頻等） 鏈接可以建立在同一站點(diǎn)的各文檔中，也可以建立在站點(diǎn)外的文檔中 .超級(jí)鏈接：（超鏈接、鏈接）：從一個(gè)網(wǎng)頁(yè)超級(jí)鏈接：（超鏈接、鏈接）：從一個(gè)網(wǎng)頁(yè)指向

22、一個(gè)目標(biāo)的鏈接關(guān)系。指向一個(gè)目標(biāo)的鏈接關(guān)系。1、超級(jí)鏈接的分類超級(jí)鏈接的分類按鏈接目標(biāo)文件的不同：頁(yè)面超鏈接、錨點(diǎn)超按鏈接目標(biāo)文件的不同：頁(yè)面超鏈接、錨點(diǎn)超鏈接、電子郵件超鏈接鏈接、電子郵件超鏈接按單擊對(duì)象的不同：文字超鏈接、圖像超鏈接、按單擊對(duì)象的不同：文字超鏈接、圖像超鏈接、圖像映射圖像映射 絕對(duì)路徑。是提供所鏈接文檔的完整路徑，且包含其應(yīng)用絕對(duì)路徑。是提供所鏈接文檔的完整路徑，且包含其應(yīng)用協(xié)議（如協(xié)議（如http:/）。主要用于創(chuàng)建站外具有固定地址的鏈接，如要）。主要用于創(chuàng)建站外具有固定地址的鏈接，如要建立到中央電視臺(tái)的鏈接就可以使用建立到中央電視臺(tái)的鏈接就可以使用http:/。文檔相對(duì)

23、路徑。是以當(dāng)前文檔所在位置為起點(diǎn)到被鏈接文檔文檔相對(duì)路徑。是以當(dāng)前文檔所在位置為起點(diǎn)到被鏈接文檔經(jīng)由的路徑，省略對(duì)于當(dāng)前文檔和所鏈接的文檔都相同的絕對(duì)路徑經(jīng)由的路徑，省略對(duì)于當(dāng)前文檔和所鏈接的文檔都相同的絕對(duì)路徑部分，而只提供不同的路徑部分，如：部分，而只提供不同的路徑部分，如：gerenwenjian/jiangli.html。具有可移植性，是網(wǎng)頁(yè)制作的首選。具有可移植性，是網(wǎng)頁(yè)制作的首選。根目錄相對(duì)路徑（又稱服務(wù)器路徑）：使用多個(gè)服務(wù)器的大根目錄相對(duì)路徑（又稱服務(wù)器路徑）：使用多個(gè)服務(wù)器的大型站點(diǎn)會(huì)要用到這種文檔路徑。如：型站點(diǎn)會(huì)要用到這種文檔路徑。如：/image/button.gif”

24、即是連接即是連接網(wǎng)絡(luò)服務(wù)器根目錄下的網(wǎng)絡(luò)服務(wù)器根目錄下的image文件夾中的文件夾中的button.gif文件，必須在文件，必須在網(wǎng)絡(luò)環(huán)境之下才能使用這種路徑。網(wǎng)絡(luò)環(huán)境之下才能使用這種路徑。1、在網(wǎng)頁(yè)中，選擇要超鏈接的載體（文字或者圖）像，選擇、在網(wǎng)頁(yè)中，選擇要超鏈接的載體（文字或者圖）像，選擇“凈月潭國(guó)家森林公園凈月潭國(guó)家森林公園”。2在屬性檢查器中，單擊在屬性檢查器中，單擊“鏈接鏈接”后的后的“瀏覽瀏覽” 按鈕，打按鈕，打開(kāi)開(kāi)“選擇文件選擇文件”對(duì)話框。對(duì)話框。3選擇鏈接的目標(biāo)文件，單擊選擇鏈接的目標(biāo)文件，單擊“確認(rèn)確認(rèn)”按鈕。按鈕。4在在“屬性檢查器屬性檢查器”中的中的“目標(biāo)目標(biāo)”下拉菜

25、單中下拉菜單中,選擇目標(biāo)文件選擇目標(biāo)文件打開(kāi)的位置打開(kāi)的位置,如圖。如圖。5保存并在瀏覽器中預(yù)覽網(wǎng)頁(yè)，建立了超鏈接的文字變?yōu)樗{(lán)保存并在瀏覽器中預(yù)覽網(wǎng)頁(yè)，建立了超鏈接的文字變?yōu)樗{(lán)色并帶有下劃線。色并帶有下劃線。6單擊創(chuàng)建超鏈接的文字，測(cè)試鏈接的完好性。單擊創(chuàng)建超鏈接的文字，測(cè)試鏈接的完好性。 當(dāng)一個(gè)網(wǎng)頁(yè)的主題較多或內(nèi)容較長(zhǎng)時(shí)，可以在網(wǎng)頁(yè)內(nèi)建立多個(gè)標(biāo)記點(diǎn)，將超鏈接指向這些標(biāo)記點(diǎn)，使瀏覽者能快速找到要閱讀的內(nèi)容 這些標(biāo)記點(diǎn)也就是命名錨記命名錨記，簡(jiǎn)稱錨錨 .比爾.蓋茨簡(jiǎn)介.比爾-蓋茨是微軟公司主席和首席軟件設(shè)計(jì)師。微軟公司件、服務(wù)和互聯(lián)網(wǎng)技術(shù)方面都是全球范圍內(nèi)的領(lǐng)導(dǎo)者.三、創(chuàng)建到文檔內(nèi)特定位置的超鏈

26、接三、創(chuàng)建到文檔內(nèi)特定位置的超鏈接1）創(chuàng)建命名錨記）創(chuàng)建命名錨記（1）光標(biāo)定位在要?jiǎng)?chuàng)建命名錨記的位置。）光標(biāo)定位在要?jiǎng)?chuàng)建命名錨記的位置。（2）執(zhí)行以下操作之一：）執(zhí)行以下操作之一：?jiǎn)螕舨藛螜谥械膯螕舨藛螜谥械摹安迦氩迦搿眧“命名錨記命名錨記”命令命令在在“插入插入”欄中的欄中的“常用常用”類別中，單擊類別中，單擊“命名錨記命名錨記” 。 （3）打開(kāi)）打開(kāi)“命名錨記命名錨記”對(duì)話框，如圖。對(duì)話框，如圖。 （4）在）在“錨記名稱錨記名稱”文本框中輸入錨記名稱，如文本框中輸入錨記名稱，如“top”。（5）單擊）單擊“確定確定”按鈕退出，則在文檔的相應(yīng)位置出現(xiàn)一個(gè)按鈕退出，則在文檔的相應(yīng)位置出現(xiàn)一個(gè)

27、圖標(biāo)這就是命名錨記的符號(hào)。圖標(biāo)這就是命名錨記的符號(hào)。1在文檔窗口中，選擇鏈接載體，如選擇在文檔窗口中，選擇鏈接載體，如選擇“站長(zhǎng)信箱站長(zhǎng)信箱”文本。文本。2執(zhí)行以下操作之一：執(zhí)行以下操作之一：?jiǎn)螕舨藛螜趩螕舨藛螜凇安迦氩迦搿眧“電子郵件鏈接電子郵件鏈接”命令。命令。在在“插入插入”欄的欄的“常用常用”類別中，單擊類別中，單擊“電子郵件鏈接電子郵件鏈接”按按鈕鈕 。3打開(kāi)打開(kāi)“電子郵件鏈接電子郵件鏈接”對(duì)話框?qū)υ捒? 4“文本文本”：顯示己選中的文本，如沒(méi)有選擇文本，可在此：顯示己選中的文本，如沒(méi)有選擇文本，可在此直接輸入作為鏈接的文本載體。直接輸入作為鏈接的文本載體。5“EMail”：輸入電子

28、郵件地址。：輸入電子郵件地址。6保存并在瀏覽器中預(yù)覽網(wǎng)頁(yè)測(cè)試電子郵件鏈接。保存并在瀏覽器中預(yù)覽網(wǎng)頁(yè)測(cè)試電子郵件鏈接。電子郵件鏈接電子郵件鏈接1、自動(dòng)更新鏈接、自動(dòng)更新鏈接2在站點(diǎn)地圖中修改鏈接在站點(diǎn)地圖中修改鏈接3在整個(gè)站點(diǎn)范圍內(nèi)更改鏈接在整個(gè)站點(diǎn)范圍內(nèi)更改鏈接演示：制作圖像熱點(diǎn)的步驟1、在網(wǎng)頁(yè)中插入圖片。、在網(wǎng)頁(yè)中插入圖片。2單擊選中圖片，單擊選中圖片，“屬性檢查器屬性檢查器”出現(xiàn)熱區(qū)工具按鈕。出現(xiàn)熱區(qū)工具按鈕。3單擊單擊“矩形矩形”熱區(qū)按鈕熱區(qū)按鈕 ，將光標(biāo)移到圖像上按下并拖動(dòng)鼠，將光標(biāo)移到圖像上按下并拖動(dòng)鼠標(biāo)，繪制出一個(gè)淺藍(lán)色帶有黑色的邊框的矩形區(qū)域。標(biāo)，繪制出一個(gè)淺藍(lán)色帶有黑色的邊框的

29、矩形區(qū)域。4松開(kāi)鼠標(biāo)，松開(kāi)鼠標(biāo)，“屬性檢查器屬性檢查器”變?yōu)樽優(yōu)椤盁狳c(diǎn)屬性熱點(diǎn)屬性”，如圖所示。，如圖所示。 設(shè)置鏈接。與文本或圖像的超鏈接設(shè)置相同。設(shè)置鏈接。與文本或圖像的超鏈接設(shè)置相同。保存并在瀏覽器中預(yù)覽網(wǎng)頁(yè)，將光標(biāo)指向熱區(qū)位置時(shí)，出保存并在瀏覽器中預(yù)覽網(wǎng)頁(yè)，將光標(biāo)指向熱區(qū)位置時(shí)，出現(xiàn)手形圖標(biāo)，如圖所示?，F(xiàn)手形圖標(biāo)，如圖所示。1準(zhǔn)備好用于制作導(dǎo)航條的圖像準(zhǔn)備好用于制作導(dǎo)航條的圖像,這些圖像最好大這些圖像最好大小尺寸一樣。小尺寸一樣。2在文檔窗口中，將光標(biāo)定位在要顯示導(dǎo)航條的在文檔窗口中，將光標(biāo)定位在要顯示導(dǎo)航條的位置。一般導(dǎo)航條位網(wǎng)頁(yè)的頂部或兩側(cè)。位置。一般導(dǎo)航條位網(wǎng)頁(yè)的頂部或兩側(cè)。3單

30、擊菜單欄中單擊菜單欄中“插入插入”|“圖像對(duì)象圖像對(duì)象”|“導(dǎo)航條導(dǎo)航條”。 4打開(kāi)對(duì)話框，在對(duì)話框中設(shè)置。打開(kāi)對(duì)話框，在對(duì)話框中設(shè)置。在導(dǎo)航條中，每一個(gè)項(xiàng)目都對(duì)應(yīng)一個(gè)按鈕，該按鈕在導(dǎo)航條中，每一個(gè)項(xiàng)目都對(duì)應(yīng)一個(gè)按鈕，該按鈕具有一組狀態(tài)圖像，最多可達(dá)四個(gè)。項(xiàng)目名稱在具有一組狀態(tài)圖像，最多可達(dá)四個(gè)。項(xiàng)目名稱在“導(dǎo)航導(dǎo)航條項(xiàng)目條項(xiàng)目”列表中顯示。用箭頭按鈕排列項(xiàng)目在導(dǎo)航條中列表中顯示。用箭頭按鈕排列項(xiàng)目在導(dǎo)航條中的位置。單擊的位置。單擊“+”按鈕，添加另一個(gè)項(xiàng)目，單擊按鈕，添加另一個(gè)項(xiàng)目，單擊“-”可可以刪除選中的項(xiàng)目。向上和向下的箭頭按鈕，用于調(diào)整以刪除選中的項(xiàng)目。向上和向下的箭頭按鈕，用于調(diào)整

31、項(xiàng)目在導(dǎo)航條中排序。項(xiàng)目在導(dǎo)航條中排序。5設(shè)置完成一個(gè)項(xiàng)目后，單擊加號(hào)設(shè)置完成一個(gè)項(xiàng)目后，單擊加號(hào)“+”按鈕向?qū)Ш綏l添加另按鈕向?qū)Ш綏l添加另一個(gè)項(xiàng)目，然后重復(fù)上述步驟定義該項(xiàng)目。一個(gè)項(xiàng)目，然后重復(fù)上述步驟定義該項(xiàng)目。6完成設(shè)置后，單擊完成設(shè)置后，單擊“確定確定”按鈕，在網(wǎng)頁(yè)中插入了導(dǎo)航條。按鈕，在網(wǎng)頁(yè)中插入了導(dǎo)航條。二、測(cè)試和修改導(dǎo)航條二、測(cè)試和修改導(dǎo)航條3.5.1 插入和編輯多媒體對(duì)象插入和編輯多媒體對(duì)象1打開(kāi)要嵌入文件的網(wǎng)頁(yè)，定位光標(biāo)在要插入的打開(kāi)要嵌入文件的網(wǎng)頁(yè)，定位光標(biāo)在要插入的位置。位置。2單擊菜單欄中單擊菜單欄中“插入插入”|“媒體媒體”|“插件插件”命令，命令，打開(kāi)選擇文件對(duì)話框

32、，選擇要插入的文件，單擊打開(kāi)選擇文件對(duì)話框，選擇要插入的文件，單擊確定按鈕確定按鈕 嵌入視頻是將視頻直接插入到頁(yè)面中，頁(yè)面帶有播放嵌入視頻是將視頻直接插入到頁(yè)面中，頁(yè)面帶有播放器，瀏覽者可以控制播放。但只有在訪問(wèn)者具有所嵌入視器，瀏覽者可以控制播放。但只有在訪問(wèn)者具有所嵌入視頻文件的播放器時(shí)，才可以播放。嵌入音頻文件的操作與頻文件的播放器時(shí)，才可以播放。嵌入音頻文件的操作與嵌入音頻文件的操作相同，在嵌入音頻文件的操作相同，在“選擇文件選擇文件”對(duì)話框，選擇對(duì)話框，選擇要嵌入的視頻文件就可以了。要嵌入的視頻文件就可以了。 1、將剪輯放入站點(diǎn)文件夾，這些剪輯通常采用采、將剪輯放入站點(diǎn)文件夾，這些剪輯通常采用采用用AVI或或MPEG文件格式文件格式2、鏈接到剪輯，或?qū)⑵淝度氲巾?yè)面當(dāng)中、鏈接到剪輯，或?qū)⑵淝度氲巾?yè)面當(dāng)中。1)打開(kāi)網(wǎng)頁(yè)文檔，選擇鏈接到音頻文件的鏈接載