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