【文章內(nèi)容簡介】 【替換】：用于輸入圖像的說明性文字。瀏覽網(wǎng)頁時，當(dāng)光標(biāo)指向圖像上時將出現(xiàn)該文字。 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 ●【編輯】：這里提供了編輯圖像的功能，既可以在源程序中編輯圖像，也可以在圖像瀏覽器中優(yōu)化圖像。 ● 【垂直邊距】：用于設(shè)置圖像與其周圍對象在垂直方向的空白距離。 ● 【水平邊距】：用于設(shè)置圖像與其周圍對象在水平方向的空白距離。 ● 【目標(biāo)】：用于設(shè)置打開目標(biāo)文檔的目標(biāo)窗口，該選項(xiàng)只有在圖像建立了超鏈接時才可用。 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 ●【原始】：用于顯示圖像被載入之前預(yù)先載入的低品質(zhì)圖像的 URL地址，以便縮短用戶的等待時間。 ● 【邊框】：在其后面的文本框中輸入數(shù)值，可以為圖像添加相應(yīng)寬度的邊框。取值為 0時圖像沒有邊框。另外，其右側(cè)的按鈕可以對圖像裁剪、重新取樣、調(diào)整亮度 /對比度、銳化等。 ● 【對齊】：用于設(shè)置圖像與其周圍對象之間的對齊方式。 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 3．為圖像建立超鏈接 在 Dreamweaver CS4中，用戶可以為圖像建立超鏈接，瀏覽網(wǎng)頁時單擊圖像可以打開鏈接的目標(biāo)文檔。為整個圖像建立鏈接的方法比較簡單，只需選擇要建立超鏈接的圖像，在【屬性】面板的【鏈接】文本框中輸入要鏈接的目標(biāo)文檔的 URL地址，或者利用 和 圖標(biāo)選擇要鏈接的目標(biāo)文檔即可。 〖例 55〗 為圖像建立鏈接。 1) 在【文件】面板中雙擊“ ”網(wǎng)頁文件將其打開，然后插入三幅圖像，作為導(dǎo)航按鈕，如圖 535所示。 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 圖 535 插入的圖像 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 2) 選擇“語文天地”圖像，在【屬性】面板中單擊【鏈接】右側(cè)的 按鈕，在彈出的【選擇文件】對話框中選擇本站點(diǎn)內(nèi)的“ ”文件，如圖 536所示。 3) 單擊 按鈕，則為“語文天地”圖像建立了鏈接。 4) 選擇“英語之家”圖像，在【屬性】面板中按住【鏈接】右側(cè)的 按鈕，將其拖動到【文件】面板中的“ ”文件上，則為圖像建立了鏈接，如圖 537所示。 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 圖 536 【選擇文件】對話框 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 圖 537 為圖像建立鏈接 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 除此之外，在 Dreamweaver中也可以為圖像的某一部分建立超鏈接，瀏覽網(wǎng)頁時單擊該部分圖像可以打開鏈接的目標(biāo)文檔。如果要為圖像的某一部分建立超鏈接，需要先在圖像上建立熱點(diǎn)，然后再為熱點(diǎn)建立超鏈接。具體操作步驟如下： 1) 選擇網(wǎng)頁中要建立熱點(diǎn)超鏈接的圖像。 2) 在【屬性】面板中選擇建立熱點(diǎn)的工具，在圖像上建立熱點(diǎn)，如圖 538所示。 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 圖 538 建立的熱區(qū) 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 ■ 選擇工具 后在圖像上拖曳鼠標(biāo)，可以建立矩形熱點(diǎn)。按住 Shift鍵的同時拖曳鼠標(biāo)，可以建立正方形熱點(diǎn)。 ■ 選擇工具 后在圖像上拖曳鼠標(biāo)，可以建立圓形熱點(diǎn)。 ■ 選擇工具 后在圖像上移動并單擊鼠標(biāo)，可以建立多邊形熱點(diǎn)。 ■ 選擇工具 ，可以選擇并移動建立的熱點(diǎn)。 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 3) 使用工具 選擇建立的熱點(diǎn)，在【屬性】面板中為其建立超鏈接，如圖 539所示。 ■ 在【鏈接】文本框中輸入要鏈接的目標(biāo)文檔的 URL地址。 ■ 在【目標(biāo)】下拉列表中選擇打開鏈接文檔的目標(biāo)窗口。 ■ 在【替換】文本框中輸入熱點(diǎn)的說明性文字。 4．插入鼠標(biāo)經(jīng)過圖像 所謂鼠標(biāo)經(jīng)過圖像，是指瀏覽網(wǎng)頁時當(dāng)光標(biāo)指向圖像上時該圖像將被其它圖像替代，從而產(chǎn)生動態(tài)效果。下面以實(shí)例的形式介紹如何在網(wǎng)頁中插入鼠標(biāo)經(jīng)過圖像。 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 圖 539 【屬性】面板 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 〖例 56〗 制作動態(tài)按鈕。 1) 在【文件】面板中雙擊要編輯的網(wǎng)頁將其打開。 2) 在網(wǎng)頁中要插入鼠標(biāo)經(jīng)過圖像的位置處定位光標(biāo)。 3) 在【插入】工具欄中選擇【常用】標(biāo)簽，單擊 右側(cè)的小箭頭，在打開的菜單中選擇【鼠標(biāo)經(jīng)過圖像】命令，則彈出【插入鼠標(biāo)經(jīng)過圖像】對話框，如圖 540所示。 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 圖 540 【插入鼠標(biāo)經(jīng)過圖像】對話框 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 4) 在對話框中選擇原始圖像和鼠標(biāo)經(jīng)過圖像，并可為鼠標(biāo)經(jīng)過圖像建立超鏈接。 【圖像名稱】：用于輸入圖像名稱。 【原始圖像】：用于選擇原始顯示的圖像。 【鼠標(biāo)經(jīng)過圖像】：用于選擇替代原始圖像的圖像。 【替換文本】：用于輸入鼠標(biāo)經(jīng)過圖像時的替代文本。 【按下時，前往的 URL】：用于為鼠標(biāo)經(jīng)過圖像建立超鏈接。 5) 單擊 按鈕，即可插入鼠標(biāo)經(jīng)過圖像，如圖 541所示為鼠標(biāo)經(jīng)過圖像的瀏覽效果。 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 圖 541 鼠標(biāo)經(jīng)過圖像的瀏覽效果 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 5．創(chuàng)建導(dǎo)航條 在網(wǎng)頁中，導(dǎo)航條的作用不可忽視，使用它可以在站點(diǎn)的網(wǎng)頁之間自由跳轉(zhuǎn)。正如它的名稱一樣，導(dǎo)航條為瀏覽者提供了導(dǎo)航作用。制作導(dǎo)航條之前，必須先制作每一個導(dǎo)航按鈕的四種狀態(tài)，準(zhǔn)備好了四種狀態(tài)的圖片以后，就可以向網(wǎng)頁中插入導(dǎo)航條了。 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 在網(wǎng)頁中創(chuàng)建導(dǎo)航條的基本操作步驟如下： 1) 在網(wǎng)頁中要創(chuàng)建導(dǎo)航條的位置處定位光標(biāo)。 2) 在【插入】工具欄中選擇【常用】標(biāo)簽，單擊其中的、 按鈕，在打開的菜單中選擇【導(dǎo)航條】命令，則彈出【插入導(dǎo)航條】對話框，如圖 542所示。 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 圖 542 【插入導(dǎo)航條】對話框 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 3) 在對話框中進(jìn)行選項(xiàng)設(shè)置。 ■ 【導(dǎo)航條元件】：用于顯示所有的導(dǎo)航元件。單擊其上方的按鈕或按鈕，可以增加或減少列表中的導(dǎo)航元件。單擊其右上角的按鈕或按鈕，可以調(diào)整導(dǎo)航元件的排列順序。 ■ 【項(xiàng)目名稱】：用于輸入導(dǎo)航元件的名稱，所輸入的名稱將在上面的【導(dǎo)航條元件】中顯示出來。 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 ■ 【狀態(tài)圖像】：用于輸入一般狀態(tài)下要顯示的圖像的路徑和文件名。 ■ 【鼠標(biāo)經(jīng)過圖像】：用于輸入鼠標(biāo)經(jīng)過時要顯示的圖像的路徑和文件名。 ■ 【按下圖像】：用于輸入按下鼠標(biāo)時要顯示的圖像的路徑和文件名。 ■ 【按下時鼠標(biāo)經(jīng)過圖像】：用于輸入單擊一般狀態(tài)圖像后將光標(biāo)移過時所顯示的圖像的路徑和文件名。 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 ■ 【替換文本】：用于輸入鼠標(biāo)經(jīng)過圖像時的替代文本。 ■ 【按下時，前往的 URL】：用于輸入單擊圖像時要鏈接的目標(biāo)文檔的 URL地址。在其后面的下拉列表中可以選擇顯示目標(biāo)文檔的窗口。 ■ 【選項(xiàng)】：用于設(shè)置圖像的載入方式。 ■ 【插入】：用于選擇要插入的導(dǎo)航條的方式，可以選擇“水平”或“垂直”方式。 4) 單擊 按鈕，即可創(chuàng)建導(dǎo)航條，如圖 543所示。 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 圖 543 創(chuàng)建的導(dǎo)航條 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 插入 Flash動畫 在網(wǎng)頁中使用 Flash動畫，可以使頁面的內(nèi)容豐富多彩，引人入勝，使網(wǎng)頁增強(qiáng)活力與感染力。插入 Flash動畫的操作步驟如下： 1) 在網(wǎng)頁中要插入 Flash動畫的位置處定位光標(biāo)。 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 2) 在【插入】工具欄中選擇【常用】標(biāo)簽，單擊其中的 按鈕，在打開的菜單中選擇【 SWF】命令，則彈出【選擇文件】對話框。 3) 在對話框中選擇要插入的 Flash動畫。 4) 單擊 按鈕，將位于站點(diǎn)文件夾之外的動畫復(fù)制到站點(diǎn)文件夾中后，則在網(wǎng)頁中插入了 Flash動畫，如圖 544所示。 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 圖 544 插入 Flash動畫 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 5) 在【屬性】面板中設(shè)置 Flash動畫的屬性。 ■ 【寬】和【高】：用于設(shè)置 Flash動畫對象的寬度和高度，單位為像素。 ■ 【文件】：用于設(shè)置 Flash動畫對象的文件路徑。 ■ 【源文件】：用于指定源文檔 (FLA文件 )的路徑。 ■ 【背景顏色】：用于設(shè)置 Flash動畫的背景顏色。 ■ 【循環(huán)】：選擇該復(fù)選框，可以在瀏覽器中循環(huán)播放 Flash動畫。 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 ■ 【自動播放】：選擇該復(fù)選框，則打開瀏覽器后可以自動播放 Flash動畫。 ■ 【垂直邊距】：用于設(shè)置 Flash動畫對象與周圍元素上下邊界的距離。 ■ 【水平邊距】：用于設(shè)置 Flash動畫對象與周圍元素左右邊界的距離。 ■ 【品質(zhì)】：用于設(shè)置 Flash動畫對象的播放質(zhì)量。質(zhì)量越高，動畫的下載速度就越慢；質(zhì)量越低，動畫的下載速度就越快。 ■ 【比例】：用于設(shè)置 Flash動畫播放時的縮放比例。 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 ■ 【對齊】：設(shè)置 Flash動畫對象與周圍元素的對齊方式，其與圖像的對齊方式相同。 ■ 【 Wmode(窗口模式 )】：為 SWF文件設(shè)置窗口模式的參數(shù)，以避免與 DHTML元素沖突，默認(rèn)值是不透明。 ■ 單擊 按鈕，可以打開默認(rèn)的 Flash動畫編輯軟件更新“ .fla”文件。 ■ 單擊 按鈕，可以在編輯的頁面中播放 Flash動畫。 ■ 單擊 按鈕，則彈出【參數(shù)】對話框，在該對話框中可以輸入傳遞給影片的附加參數(shù)。 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 使用表格 在 Dreamweaver CS4中，表格除了可以使大量的信息資料有組織地排列起來以便管理外，還可以用于網(wǎng)頁布局，即將網(wǎng)頁中的元素放到表格的單元格中進(jìn)行網(wǎng)頁排版，因此它是控制頁面整體布局的重要工具。 網(wǎng)頁的布局方法 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 1．插入表格 在網(wǎng)頁中插入表格的操作步驟如下： 1) 在網(wǎng)頁中要插入表格的位置處定位光標(biāo)。 2) 在【插入】工具欄中選擇【常用】標(biāo)簽，單擊其中的 按鈕，則彈出【表格】對話框，如圖 545所示。 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 圖 545 【表格】對話框 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 3) 在對話框中進(jìn)行選項(xiàng)設(shè)置。 ■ 【行數(shù)】和【列】：用于設(shè)置插入表格的行數(shù)和列數(shù)。 ■ 【表格寬度】：用于設(shè)置表格的寬度，選擇“像素”為單位時，表格的寬度為固定像素的寬度；選擇“百分比”為單位時，表格的寬度與瀏覽器窗口的寬度將保持相同的百分比。 ■ 【 邊框粗細(xì) 】 ：用于設(shè)置表格的邊框?qū)挾取? 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 ■ 【單元格邊距】：用于設(shè)置表格中單元格內(nèi)的元素距離單元格邊框的距離。 ■ 【單元格間距】：用于設(shè)置表格中單元格之間的間距。 ■ 【標(biāo)題】：用于設(shè)置表頭的位置，分別為無、左、頂部、兩者。 ■ 輔助功能中的【標(biāo)題】：用于設(shè)置表格標(biāo)題，該標(biāo)題在表格的外側(cè)。 ■ 【摘要】：用于描述表格的相關(guān)信息。 4) 單擊 按鈕，即可在網(wǎng)頁中插入表格，如圖 546所示。 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 圖 546 插入的表格 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 在網(wǎng)頁中插入表格后，可以向單元格中直接輸入文本或插入其它的對象，如圖像、動畫等，還可以向表格中插入嵌套表格。當(dāng)然，用戶也可以從外部導(dǎo)入其它軟件編輯的表格，如 Excel電子表格等。 第 5章 Dreamweaver與網(wǎng)絡(luò)課件 2．表格