Dreamweaver CS3网页设计培训教程电子教案07.ppt

第7课通过多媒体元素丰富网页 本课要点具体要求本课导读 本课要点 插入Flash媒体元素插入其他媒体元素 具体要求 掌握插入Flash动画 按钮和文本的方法掌握插入FlashPaper的方法掌握插入Flash视频的方法掌握设置Flash背景透明的方法了解插入Shockwave影片的方法了解插入JavaApplet的方法熟悉插入背景音乐的方法熟悉插入插件的方法 本课导读 网页中如果只有图像和文本 那么表现力毕竟有限 如果在网页中加入一些动感十足的Flash动画 则可以吸引更多浏览者的注意 如果再加上背景音乐 那么就更能创建图像 文本 动画和音乐四位一体的多媒体效果了 7 1插入Flash媒体元素 在网页中添加动态元素可使网页更具动感 更吸引人 Flash动画是网页中最常见的动态元素 Flash动画是一种矢量动画 它具有动画文件小 效果好并能够实现交互等优点 要制作Flash动画 可以使用Adobe公司最新推出的FlashCS3软件 7 1插入Flash媒体元素 7 1 1知识讲解7 1 2典型案例 制作 江南旅游 网首页 7 1 1知识讲解 在DreamweaverCS3中 可以直接插入发布后的Flash动画文件 swf文件 可插入的Flash媒体元素包括Flash动画 Flash按钮和Flash文本等 7 1 1知识讲解 1 了解Flash文件格式2 插入Flash动画3 插入Flash按钮4 插入Flash文本5 插入FlashPaper6 插入Flash视频7 设置Flash动画背景透明 1 了解Flash文件格式 要想在网页中插入合适的Flash媒体元素 首先得了解其文件格式 Flash文件主要有以下3种文件类型 swf fla swt 2 插入Flash动画 制作网页时必须考虑到网络的下载速度 所以在插入Flash动画文件之前最好将其压缩为 swf格式 在网页中插入Flash动画后 可在 属性 面板中对其进行大小调整和预览等操作 插入Flash动画的具体操作请教师参照软件和书中内容进行讲解 3 插入Flash按钮 DreamweaverCS3中集成了许多精美的Flash按钮 这为增加网页动态效果提供了方便 在制作网页时 也可以将自己制作的Flash按钮插入到网页中 插入Flash按钮的方法与插入Flash动画类似 这里主要讲解插入DreamweaverCS3中集成按钮的方法 具体操作请教师参照教材进行讲解 4 插入Flash文本 在网页中还可以插入Flash文本 插入Flash文本的方法与插入Flash按钮的方法类似 Flash文本是DreamweaverCS3中集成的文本动画 可以通过 插入Flash文本 对话框插入 在网页中插入Flash文本的具体操作请教师参照软件和书中内容进行讲解 5 插入FlashPaper FlashPaper是一种特殊的Flash动画文件 可以通过FlashPaper软件制作 制作网页时 可以利用插入FlashPaper功能在网页中插入FlashPaper文档 这样 在浏览器中打开包含FlashPaper文档的网页时 用户就可以浏览FlashPaper文档中的所有页面 而无须加载新的网页 用户也可以搜索 打印和缩放该文档 在网页中插入FlashPaper的具体操作请教师参照软件和书中内容进行讲解 6 插入Flash视频 插入Flash视频也是目前网页制作中常用的方法 在DreamweaverCS3中 可以轻松地在网页中插入Flash视频 插入Flash视频的具体操作请教师参照软件和书中内容进行讲解 7 设置Flash动画背景透明 有时 为了优化网页视觉效果 可在表格的单元格中插入背景图像 然后再在该单元格中插入Flash动画 这时需要将Flash动画设置为背景透明 否则就看不见下面的背景图像了 设置Flash动画背景透明的具体操作请教师参照软件和书中内容进行讲解 7 1 2典型案例 制作 江南旅游 网首页 案例目标本案例将制作一个网站的首页 主要练习插入Flash动画 Flash文本和Flash按钮 7 1 2典型案例 制作 江南旅游 网首页 操作思路 1 设置页面属性 并插入图像 2 插入Flash动画 3 设置Flash动画背景透明 4 插入Flash文本 5 插入Flash按钮 7 1 2典型案例 制作 江南旅游 网首页 操作步骤具体操作步骤请教师参照软件和书中内容进行讲解 7 1 2典型案例 制作 江南旅游 网首页 案例小结本案例练习了添加Flash动画 Flash文本 Flash按钮和设置Flash动画背景透明等 为了使Dreamweaver能正常插入Flash文本和Flash按钮 网页的保存路径中不能包含中文 而且Flash文本和Flash按钮的保存路径中也不能包含中文 如果网站文件夹名称中由于某些因素一定要包含中文 则可在不包含中文的路径下创建新页面 在此页面中插入Flash文本或Flash按钮 此时 Dreamweaver能正常创建所需的Flash文本或Flash按钮 并生成 swf文件 然后将生成的 swf文件复制到网站所需目录中 使用插入Flash的方法插入该文件 便可实现相对应的同种功能 7 2插入其他媒体元素 在DreamweaverCS3中 除了可以插入Flash媒体元素外 还可添加其他媒体元素 如Shockwave影片 JavaApplet及背景音乐等 7 2插入其他媒体元素 7 2 1知识讲解7 2 2典型案例 在线影院 7 2 1知识讲解 下面讲解在DreamweaverCS3中插入Shockwave影片 JavaApplet及背景音乐等的方法 7 2 1知识讲解 1 插入Shockwave影片2 插入JavaApplet3 插入背景音乐4 插入插件 1 插入Shockwave影片 Shockwave影片具有文件小 下载速度快 被目前主流的浏览器所支持等优点 广泛应用于网页制作中 它是使用Director制作的多媒体影片文件 在DreamweaverCS3中插入Shockwave影片的具体操作请教师参照软件和书中内容进行讲解 2 插入JavaApplet JavaApplet是Java的应用程序 是一种动态 安全和跨平台的网络应用程序 它能在网页中实现一些特殊效果 如下雪 水纹和下雨等 JavaApplet常被嵌入到HTML语言中 可以实现较为复杂的控制和动态效果 可以从网站上下载JavaApplet 如 3 插入背景音乐 在DreamweaverCS3中 可以为网页添加背景音乐 背景音乐是在网页后台播放的音乐 在制作时可以采用在源代码中添加代码的方法来添加背景音乐 具体操作请教师参照软件和书中内容进行讲解 4 插入插件 如果想在浏览器中访问更多类型的媒体对象 就必须借助插件 利用插件可以在网页中插入各种类型的媒体元素 插件包括的范围很广 如视频文件 音乐文件和动画文件等 前面介绍的Shockwave影片就是插件中的一员 插入插件的具体操作请教师参照软件和书中内容进行讲解 7 2 2典型案例 在线影院 案例目标本案例将在网页中插入一个插件 以丰富网页内容 主要练习插入插件的操作 7 2 2典型案例 在线影院 操作思路 1 插入插件 2 设置插件属性 7 2 2典型案例 在线影院 操作步骤具体操作步骤请教师参照软件和书中内容进行讲解 7 2 2典型案例 在线影院 案例小结本案例在 在线影院 网页中插入了一个插件 在制作过程中主要练习了插入插件以及设置插件属性等操作 制作本案例主要是为了让读者灵活掌握插入插件的方法 从而学会在网页制作过程中插入其他媒体元素 7 3上机练习 7 3 1个人主页7 3 2MTV欣赏 7 3 1个人主页 本练习将制作一个个人主页 主要练习插入Flash动画 设置Flash动画背景透明以及添加背景音乐 7