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