網(wǎng)頁設計與制作Dreamweaver-CS6標準課件

第4章圖像與多媒體網(wǎng)頁設計與制作DreamweaverCS6標準教程1.圖像的插入2.調(diào)整圖像3.網(wǎng)頁中的多媒體本章學習的主要內(nèi)容：圖像是網(wǎng)頁設計中一個非常重要的元素，它使頁面更美觀，更具有吸引力。在網(wǎng)頁中插入圖像也是Dreamweaver網(wǎng)頁設計中必須掌握的技術。4.1圖像插入4.1.1課堂案例—茶葉網(wǎng)站4.1.2插入圖像4.1.3圖像源文件4.1.4替換文本4.1.5圖像占位符4.1圖像插入案例學習目標：學習使用多種方法在網(wǎng)頁中插入圖像。案例知識要點：使用【插入】面板、【插入】|【圖像】菜單和直接拖曳圖像等方法將圖像插入到網(wǎng)頁指定位置。素材所在位置：光盤/案例素材/ch04/課堂案例-茶葉網(wǎng)站。案例效果如圖4-1所示。4.1.1CSS樣式標準網(wǎng)站中的圖像必須放在站點文件夾內(nèi)才能在網(wǎng)頁中正確顯示，所以在建立網(wǎng)站時要在站點文件夾內(nèi)建立一個專門存放該站點圖像的文件夾，通常命名為“images”，然后將網(wǎng)站所需的圖像都放置其中。4.1.2插入圖像在Dreamweaver中，可以通過以下三種方法在網(wǎng)頁中插入圖像。（1）選擇菜單【插入】|【圖像】，在【選擇圖像源文件】對話框中找到并選擇所需的圖像，單擊【確定】按鈕完成圖像插入。（2）選擇【插入】面板中【常用】選項卡，單擊【圖像】按鈕上的黑色三角形，在下拉菜單中選擇“圖像”選項，在【選擇圖像源文件】對話框中找到并選擇所需的圖像，單擊【確定】按鈕完成圖像插入。（3）打開【文件】面板，展開顯示圖像文件夾中的所有文件，在需要插入的圖像名稱上按住鼠標左鍵拖曳到【文檔】窗口的相應位置，松開鼠標，完成圖像插入。4.1.2插入圖像圖像源文件是指插入的圖像文件所在的位置，可以是本地的圖像也可以是網(wǎng)絡上的圖像，如果插入的圖像位于站點文件夾內(nèi)，【屬性】面板中【源文件】文本框中會顯示相對路徑。如果要插入的圖像不在站點文件夾內(nèi)，那么會出現(xiàn)提示對話框，詢問是否將圖像復制到站點文件夾內(nèi)，選擇單擊【確定】按鈕即可。也可以直接在【屬性】面板【源文件】文本框中修改網(wǎng)頁中顯示的圖像的路徑和文件名。4.1.3圖像源文件如果網(wǎng)頁中有的圖像不能正常顯示（如圖像源文件路徑錯誤或瀏覽器圖像顯示被關閉等）就會導致瀏覽者看不到圖像。使用圖像【屬性】面板中的【替換】文本框，可以給看不到的圖像設置說明性文字。4.1.4替換文本圖像占位符是指在將最終圖像插入到網(wǎng)頁中之前所使用的替代圖像，以便在不確定圖像時對網(wǎng)頁進行布局。圖像占位符可以設置不同尺寸、顏色和文字來替代圖像。插入圖像占位符的步驟如下。將光標置于要插入圖像占位符的位置。單擊菜單【插入】|【圖像對象】|【圖像占位符】，打開【圖像占位符】對話框。輸入名稱、寬度、高度、顏色等屬性值，單擊【確定】按鈕，插入圖像占位符，通過適當調(diào)整，使其滿足設計需求。當需要插入真正的圖片時，只需雙擊該位置的圖形占位符，在【選擇圖像源文件】對話框中找到并選擇需要的圖像，單擊【確定】按鈕完成插入。4.1.5圖像占位符網(wǎng)頁中的圖像為了滿足布局要求，經(jīng)常需要進行調(diào)整，利用【編輯圖像設置】等功能可以對圖像尺寸、類型和色彩等進行調(diào)整。4.2調(diào)整圖像4.2.1課堂案例—墻體裝飾4.2.2圖像效果4.2CSS樣式控制面板案例學習目標：學習網(wǎng)頁中圖像調(diào)整的基本操作，包括裁剪、尺寸調(diào)整、亮度和對比度、銳化等效果調(diào)整。案例知識要點：在【屬性】面板中，選擇【編輯圖像設置】、【裁剪】、【亮度和對比度】、【銳化】等按鈕調(diào)整圖像效果。素材所在位置：光盤/案例素材/ch04/課堂案例-墻體裝飾。案例效果如圖4-15所示。4.2.1課堂案例—墻體裝飾1．圖像裁剪2．亮度和對比度3．圖像銳化4.2.2圖像效果網(wǎng)頁不僅由圖像和文字組成，而且音頻、視頻等多媒體也越來越廣泛地應用在網(wǎng)頁設計中，目前網(wǎng)頁中可以插入的多媒體包括動畫、視頻、JavaApplet對象和ActiveX控件等。雖然應用多媒體能豐富網(wǎng)頁內(nèi)容，但可能影響瀏覽速度，所以一般情況下網(wǎng)頁中不會大量使用多媒體元素。4.3網(wǎng)頁中的多媒體4.3.1課堂案例—度假村4.3.2插入Flash動畫4.3.3插入Flv影片4.3.4插入插件—瑜伽會所4.3.5插入Applet程序4.3CSS屬性案例學習目標：學習在網(wǎng)頁中插入動畫、FLV視頻等元素。案例知識要點：使用【插入】面板的【媒體】|【SWF】和【FLV】按鈕插入多媒體元素。素材所在位置：光盤/案例素材/ch04/課堂案例-度假村。案例效果如圖4-25、圖4-26所示。4.3.1課堂案例-度假村插入Flash動畫的步驟如下。在【文檔】窗口中單擊要插入Flash動畫的位置。單擊菜單【插入】|【媒體】|【SWF】，打開【選擇SWF】對話框中，查找并選擇需要插入的Flash動畫文件，再單擊【確定】按鈕。插入的Flash動畫顯示在設計窗口中顯示為占位符形式，單擊【屬性】面板的【播放】可以播放動畫。4.3.2插入Flash動畫在Dreamweaver中插入Flash視頻的操作步驟如下。在【文檔】窗口中單擊要插入Flash視頻的位置。單擊菜單【插入】|【媒體】|【FLV…】，打開【插入FLV】對話框，選擇【視頻類型】，在【URL】屬性單擊【瀏覽…】查找并選擇要插入的Flv影片文件，選擇【外觀】，再設置FLV視頻的【高度】和【寬度】，根據(jù)需要選擇勾選【自動播放】和【自動重新播放】復選框。單擊【確定】按鈕，完成FLV影片插入。4.3.3插入Flv影片案例學習目標：學習在網(wǎng)頁中使用插入插件方式插入視頻和背景音樂。案例知識要點：使用【插入】面板的【媒體】|【插件】按鈕插入多媒體元素。素材所在位置：光盤/案例素材/ch04/課堂案例-瑜伽會所。案例效果如圖4-36所示。4.3.4插入插件—瑜伽會所在網(wǎng)頁中插入Applet程序操作步驟如下。在【文檔】窗口中單擊要插入Applet程序的位置。選擇菜單【插入】|【媒體】|【Applet】，在【選擇文件】對話框中查找并選擇一個JavaApplet程序文件，單擊【確定】按鈕完成插入。4.3.5插入Applet程序4.4.1練習案例-五金機械4.4.2練習案例-心緣咖啡屋4.4練習案例案例練習目標：練習圖像的插入和圖像的調(diào)整。案例操作要點：1．在中間單元格中插入圖像，圖像1.jpg的尺寸調(diào)整為寬117高105，亮度值為14，圖像2.jpg尺寸為寬110高px，對比度值為26，圖像3.jpg尺寸為寬110高89，銳化值為2。2．右上角客服圖片裁剪后尺寸調(diào)整為寬110高147，并且在單元格中水平方向居中對齊。素材所在位置：光盤/案例素材/ch04/五金機械，效果如圖4-45所示。4.4.1練習案例-五金機械案例練習目標：練習FLV影片和多媒體插件的插入和調(diào)整。案例操作要點：1．在網(wǎng)頁文檔index.html中，插入1.FLV文件，尺寸調(diào)整為寬510高383，外觀選擇Cl