網(wǎng)頁中的圖像和動畫元素

第5章

網(wǎng)頁中的圖像和動畫元素

（3課時）掌握圖像映射掌握FW編輯圖像并共享文件掌握FW與DW結(jié)合使用掌握網(wǎng)頁中插入FLASH及參數(shù)設置了解網(wǎng)頁圖像類型、圖像插入及屬性設置了解在網(wǎng)頁中應用多媒體掌握DreamweaverMX中圖像的插入掌握DreamweaverMX中熱區(qū)圖和輪替圖的應用教學目標：教學重難點：一、DW中的圖象處理實例*.GIF（圖形交換格式）*.JPG（聯(lián)合專家組格式）*.PNG（可移植網(wǎng)絡圖形）1、網(wǎng)頁插入圖片：?

執(zhí)行菜單Insert→image命令

?

在Object面板上選

?

按快捷鍵Ctrl+Alt+I

?

從其他地方（如桌面、資源管理器或站點窗口）中直接將圖像文件的圖標拖入到文檔頁面中。A、圖片格式B、插入圖片：4、創(chuàng)建圖像映射：2、設置圖像的對齊方式：3、調(diào)整圖像的大小：5、設定圖像外部編輯器（CTRL+U）二、使用FW編輯圖像并共享文件1、使用FW編輯DW中的圖像2、使用DW和FW結(jié)合創(chuàng)建網(wǎng)絡相冊執(zhí)行“命令”-----“創(chuàng)建網(wǎng)站相冊”三、插入圖象占位符：執(zhí)行菜單“插入”—“圖象”—“圖象占位符”通過在“常用面板”上選擇四、插入鼠標經(jīng)過圖象執(zhí)行菜單“插入”—“圖象”—“鼠標經(jīng)過圖象”通過在“常用面板”上選擇五、插入導航條圖象：執(zhí)行菜單“插入”—“圖象”—“導航條圖象”通過在“常用面板”上選擇注：導航條圖象又分為：狀態(tài)圖象、鼠標經(jīng)過、鼠標按下、按下時經(jīng)過；四個狀態(tài)六、插入FireworksHTML圖象執(zhí)行菜單“插入”—“圖象”—“FireworksHTML圖象”通過在“常用面板”上選擇七、在網(wǎng)頁中插入FLASH動畫

1、插入flash:

方法：“插入”----“媒體”----“flash”2、設置FLASH動畫的播放屬性參數(shù)設置：wmode=transparent3、插入flash文本：“插入”-----“媒體”-----“flash文本”4、插入flash按鈕：“插入”-----“媒體”-----“flash按鈕”注：插入“flash文本”與“flash按鈕”注意事項；八、控制頁面中的flash動畫:

在頁面中插入flash動畫，利用按鈕的來控制動畫播放、停止或跳轉(zhuǎn)。1、在頁面中插入flash動畫，并在屬性面板中將其名；2、輸入相關文字，創(chuàng)建空鏈接；3、在行為面板中選擇“控制Shockwave或Flash”九、flash元素——圖象查看器:圖像查看器的功能像播放幻燈片一樣的效果來播放圖片。1、插入Flash元素---圖象查看器，保存影片2、打開標簽檢查器F9，進行相關設置。bgColor指定影片的背景色captionColor指定影片的各圖像Slide的標題文本顏色captionFont指定影片的各圖像Slide的標題文本字體captionSize指定影片的各圖像Slide的標題文本字號frameColor當frameShow為“是”，指定影片邊框的顏色frameShow指定“否”，指不顯示影片邊框frameThickness指定“是”，指定影片邊框的寬度frameCaptions指定顯示在影片各圖像Slide下面的標題文本imageLinks指定顯示在影片的各圖像Slide時移動的超級鏈接地址imageLinkTarget指定在imageLinks中設置的超鏈接的目標imageURLs指定顯示在影片的各圖象Slide中的圖像文件路徑showControls指定為“是”時，隱藏控制按鈕showAutoPlay指定為“是”時，自動運行SlideShow動畫showDelay指定運行SlideShow動畫時各圖像Slide的延遲時間slideLoop指定為“是”，循環(huán)進行SlideShow動畫Title輸入顯示在控制銨鈕左側(cè)的影片標題titleColor指定影片標題的文字顏色titleFont指定影片標題的字體titleSize指定影片的字號None不應用圖像切換特效，直接顯示圖像Blind圖像以矩形百葉窗形式進行切換的特效Fade逐漸顯示其他圖像的切換特效Fly圖像從左側(cè)飛來Iris從中央逐漸顯示為矩形Photo與其他圖像重疊，同時表現(xiàn)一次閃爍效果的切換特效PixelDissolve圖像顯示為多個正方形形態(tài)圖像變換時通過TranstionsType參數(shù)Rotate圖像從右上角向?qū)蔷€方向顯示Squeeze圖像從左側(cè)向右側(cè)逐漸放大顯示W(wǎng)ipe從左側(cè)開始顯示為矩形形態(tài)Zoom從左上角開始向?qū)蔷€方向逐漸放大顯示Random圖像隨意變形顯示插入Shockwave動畫，需要插件支持。十、插入Shockwave動畫總結(jié)：

一個優(yōu)秀的網(wǎng)站應該不只是由文本和圖像組成的，而是動態(tài)的、多媒體的，因此用戶可以插入Flash動畫等。課堂作業(yè)：插入一幅圖片，請問如何在FW編輯圖像；插入flash______________________，參數(shù)設置為：______________