网页中的图像和动画元素教案.ppt

第5章　网页中的图像和动画元素（3课时） * 掌握图像映射 掌握FW编辑图像并共享文件 掌握FW与DW结合使用 掌握网页中插入FLASH及参数设置 了解网页图像类型、图像插入及属性设置 了解在网页中应用多媒体 掌握Dreamweaver MX中图像的插入 掌握Dreamweaver MX中热区图和轮替图的应用 教学目标： 教学重难点： 一、DW中的图象处理实例 *.GIF（图形交换格式） *.JPG（联合专家组格式） *.PNG（可移植网络图形） 1、网页插入图片： ?? 执行菜单 Insert → image 命令?? 在 Object 面板上选 ?? 按快捷键 Ctrl + Alt +I?? 从其他地方（如桌面、资源管理器或站点窗口）中直接将图像文件的图标拖入到文档页面中 。 A、图片格式 B、插入图片： 4、创建图像映射： 2、设置图像的对齐方式： 3、调整图像的大小： 5、设定图像外部编辑器 （CTRL+U） 二、使用FW编辑图像并共享文件 1、使用FW编辑DW中的图像 2、使用DW和FW结合创建网络相册 执行“命令”-----“创建网站相册” 三、插入图象占位符： 执行菜单“插入”—“图象”—“图象占位符” 通过在“常用面板”上选择 四、插入鼠标经过图象 执行菜单“插入”—“图象”—“鼠标经过图象” 通过在“常用面板”上选择 五、插入导航条图象： 执行菜单“插入”—“图象”—“导航条图象” 通过在“常用面板”上选择 注：导航条图象又分为： 状态图象、鼠标经过、鼠标按下、按下时经过；四个状态 六、插入Fireworks HTML图象 执行菜单“插入”—“图象”—“Fireworks HTML图象” 通过在“常用面板”上选择 七、在网页中插入FLASH动画 1、插入flash: 方法： “插入”----“媒体”----“flash” 2、设置FLASH动画的播放属性参数设置： wmode=transparent 3、插入flash文本：“插入”-----“媒体”-----“flash文本” 4、插入flash按钮：“插入”-----“媒体”-----“flash按钮” 注：插入“flash文本”与“flash按钮”注意事项； 八、控制页面中的flash动画: 在页面中插入flash动画，利用按钮的来控制动画播放、停止或跳转。 1、在页面中插入flash动画，并在属性面板中将其名； 2、输入相关文字，创建空链接； 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指定为“是”时，自动运行Slide Show动画 showDelay指定运行Slide Show动画时各图像Slide的延迟时间 slideLoop指定为“是”，循环进行Slide Show动画 Title输入显示在控制铵钮左侧的影片标题 titleColor指定影片标题的文字颜色 titleFont指定影片标题的字体 titleSize指定影片的字号 None不应用图像切换特效，直接显示图像 Blind图像以矩形百叶窗形式进行切换的特效 Fade逐渐显示其他图像的切换特效 Fly图像从左侧飞来 Iris从中央逐渐显示为矩形 Photo与其他图像重叠，同时表现一次闪烁效果的切换特效 PixelDissolve图像显示为多个正方形形态 图像变换时通过Transtions Type参数 Rotate图像从右上角向对角线方向显示 Squeeze图像从左侧向右侧逐渐放大显示 Wipe从左侧开始显示为矩形形态 Zoom从左上角开始向对角线方向逐渐放大显示 Random图像