《DreamweaverCS3网页设计培训教程电子教案074059.pptx》由会员分享，可在线阅读，更多相关《DreamweaverCS3网页设计培训教程电子教案074059.pptx（36页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、Dreamweaver CS3网页设计培训教程第第7课课 通过多媒体元素丰富网页通过多媒体元素丰富网页 w本课要点本课要点w具体要求具体要求w本课导读本课导读w上机练习上机练习Dreamweaver CS3网页设计培训教程本课要点本课要点w插入插入Flash媒体元素媒体元素w插入其他媒体元素插入其他媒体元素 Dreamweaver CS3网页设计培训教程具体要求具体要求w掌握插入掌握插入Flash动画、按钮和文本的方法动画、按钮和文本的方法w掌握插入掌握插入FlashPaper的方法的方法w掌握插入掌握插入Flash视频的方法视频的方法w掌握设置掌握设置Flash背景透明的方法背景透明的方法w
2、了解插入了解插入Shockwave影片的方法影片的方法w了解插入了解插入Java Applet的方法的方法w熟悉插入背景音乐的方法熟悉插入背景音乐的方法w熟悉插入插件的方法熟悉插入插件的方法 Dreamweaver CS3网页设计培训教程本课导读本课导读网页中如果只有图像和文本，那么表现力网页中如果只有图像和文本，那么表现力毕竟有限。如果在网页中加入一些动感十毕竟有限。如果在网页中加入一些动感十足的足的Flash动画，则可以吸引更多浏览者动画，则可以吸引更多浏览者的注意。如果再加上背景音乐，那么就更的注意。如果再加上背景音乐，那么就更能创建图像、文本、动画和音乐四位一体能创建图像、文本、动画和
3、音乐四位一体的多媒体效果了。的多媒体效果了。Dreamweaver CS3网页设计培训教程7.1 插入插入Flash媒体元素媒体元素 在网页中添加动态元素可使网页更具动感、在网页中添加动态元素可使网页更具动感、更吸引人。更吸引人。Flash动画是网页中最常见的动画是网页中最常见的动态元素。动态元素。Flash动画是一种矢量动画，它具有动画动画是一种矢量动画，它具有动画文件小、效果好并能够实现交互等优点。文件小、效果好并能够实现交互等优点。要制作要制作Flash动画，可以使用动画，可以使用Adobe公司公司最新推出的最新推出的Flash CS3软件。软件。Dreamweaver CS3网页设计培
4、训教程7.1 插入插入Flash媒体元素媒体元素7.1.1 知识讲解知识讲解7.1.2 典型案例典型案例制作制作“江南旅游江南旅游”网首页网首页 Dreamweaver CS3网页设计培训教程7.1.1 知识讲解知识讲解在在Dreamweaver CS3中，可以直接插入中，可以直接插入发布后的发布后的Flash动画文件（动画文件（.swf文件）。文件）。可插入的可插入的Flash媒体元素包括媒体元素包括Flash动画、动画、Flash按钮和按钮和Flash文本等。文本等。Dreamweaver CS3网页设计培训教程7.1.1 知识讲解知识讲解1.了解了解Flash文件格式文件格式 2.插入插
5、入Flash动画动画 3.插入插入Flash按钮按钮 4.插入插入Flash文本文本 5.插入插入FlashPaper 6.插入插入Flash视频视频 7.设置设置Flash动画背景透明动画背景透明 Dreamweaver CS3网页设计培训教程1.了解了解Flash文件格式文件格式 要想在网页中插入合适的要想在网页中插入合适的Flash媒体元素，媒体元素，首先得了解其文件格式。首先得了解其文件格式。Flash文件主要有文件主要有以下以下3种文件类型：种文件类型：w.swf w.fla w.swt Dreamweaver CS3网页设计培训教程2.插入插入Flash动画动画 制作网页时必须考虑
6、到网络的下载速度，制作网页时必须考虑到网络的下载速度，所以在插入所以在插入Flash动画文件之前最好将其动画文件之前最好将其压缩为压缩为.swf格式。在网页中插入格式。在网页中插入Flash动动画后，可在画后，可在【属性属性】面板中对其进行大小面板中对其进行大小调整和预览等操作。插入调整和预览等操作。插入Flash动画的具动画的具体操作请教师参照软件和书中内容进行讲体操作请教师参照软件和书中内容进行讲解。解。Dreamweaver CS3网页设计培训教程3.插入插入Flash按钮按钮 Dreamweaver CS3中集成了许多精美的中集成了许多精美的Flash按钮，这为增加网页动态效果提供按钮
7、，这为增加网页动态效果提供了方便。在制作网页时，也可以将自己制了方便。在制作网页时，也可以将自己制作的作的Flash按钮插入到网页中。插入按钮插入到网页中。插入Flash按钮的方法与插入按钮的方法与插入Flash动画类似，这里动画类似，这里主要讲解插入主要讲解插入Dreamweaver CS3中集成中集成按钮的方法。具体操作请教师参照教材进按钮的方法。具体操作请教师参照教材进行讲解。行讲解。Dreamweaver CS3网页设计培训教程4.插入插入Flash文本文本 在网页中还可以插入在网页中还可以插入Flash文本，插文本，插入入Flash文本的方法与插入文本的方法与插入Flash按钮按钮的
8、方法类似。的方法类似。Flash文本是文本是Dreamweaver CS3中集成的文本动中集成的文本动画，可以通过画，可以通过【插入插入Flash文本文本】对对话框插入。在网页中插入话框插入。在网页中插入Flash文本文本的具体操作请教师参照软件和书中内的具体操作请教师参照软件和书中内容进行讲解。容进行讲解。Dreamweaver CS3网页设计培训教程5.插入插入FlashPaperFlashPaper是一种特殊的是一种特殊的Flash动画文件，动画文件，可以通过可以通过FlashPaper软件制作。制作网软件制作。制作网页时，可以利用插入页时，可以利用插入FlashPaper功能在功能在网
9、页中插入网页中插入FlashPaper文档。这样，在文档。这样，在浏览器中打开包含浏览器中打开包含FlashPaper文档的网文档的网页时，用户就可以浏览页时，用户就可以浏览FlashPaper文档文档中的所有页面，而无须加载新的网页；用中的所有页面，而无须加载新的网页；用户也可以搜索、打印和缩放该文档。在网户也可以搜索、打印和缩放该文档。在网页中插入页中插入FlashPaper的具体操作请教师的具体操作请教师参照软件和书中内容进行讲解。参照软件和书中内容进行讲解。Dreamweaver CS3网页设计培训教程6.插入插入Flash视频视频 插入插入Flash视频也是目前网页制作中常用视频也是
10、目前网页制作中常用的方法。在的方法。在Dreamweaver CS3中，可以中，可以轻松地在网页中插入轻松地在网页中插入Flash视频。插入视频。插入Flash视频的具体操作请教师参照软件和视频的具体操作请教师参照软件和书中内容进行讲解。书中内容进行讲解。Dreamweaver CS3网页设计培训教程7.设置设置Flash动画背景透明动画背景透明 有时，为了优化网页视觉效果，可在表格有时，为了优化网页视觉效果，可在表格的单元格中插入背景图像，然后再在该单的单元格中插入背景图像，然后再在该单元格中插入元格中插入Flash动画，这时需要将动画，这时需要将Flash动画设置为背景透明，否则就看不见下
11、面动画设置为背景透明，否则就看不见下面的背景图像了。设置的背景图像了。设置Flash动画背景透明动画背景透明的具体操作请教师参照软件和书中内容进的具体操作请教师参照软件和书中内容进行讲解。行讲解。Dreamweaver CS3网页设计培训教程7.1.2 典型案例典型案例制作制作“江南旅江南旅游游”网首页网首页 w案例目标案例目标本案例将制作一个网站的首页，主要本案例将制作一个网站的首页，主要练习插入练习插入Flash动画、动画、Flash文本和文本和Flash按钮按钮。Dreamweaver CS3网页设计培训教程7.1.2 典型案例典型案例制作制作“江南旅江南旅游游”网首页网首页 w操作思路
12、操作思路（1）设置页面属性，并插入图像。）设置页面属性，并插入图像。（2）插入）插入Flash动画。动画。（3）设置）设置Flash动画背景透明。动画背景透明。（4）插入）插入Flash文本。文本。（5）插入）插入Flash按钮。按钮。Dreamweaver CS3网页设计培训教程7.1.2 典型案例典型案例制作制作“江南旅江南旅游游”网首页网首页w操作步骤操作步骤具体操作步骤请教师参照软件和书中内具体操作步骤请教师参照软件和书中内容进行讲解。容进行讲解。Dreamweaver CS3网页设计培训教程7.1.2 典型案例典型案例制作制作“江南旅江南旅游游”网首页网首页w案例小结案例小结本案例练
13、习了添加本案例练习了添加Flash动画、动画、Flash文本、文本、Flash按钮按钮和设置和设置Flash动画背景透明等。为了使动画背景透明等。为了使Dreamweaver能能正常插入正常插入Flash文本和文本和Flash按钮，网页的保存路径中不按钮，网页的保存路径中不能包含中文，而且能包含中文，而且Flash文本和文本和Flash按钮的保存路径中按钮的保存路径中也不能包含中文；如果网站文件夹名称中由于某些因素也不能包含中文；如果网站文件夹名称中由于某些因素一定要包含中文，则可在不包含中文的路径下创建新页一定要包含中文，则可在不包含中文的路径下创建新页面，在此页面中插入面，在此页面中插入F
14、lash文本或文本或Flash按钮，此时，按钮，此时，Dreamweaver能正常创建所需的能正常创建所需的Flash文本或文本或Flash按按钮，并生成钮，并生成.swf文件，然后将生成的文件，然后将生成的.swf文件复制到网文件复制到网站所需目录中，使用插入站所需目录中，使用插入Flash的方法插入该文件，便的方法插入该文件，便可实现相对应的同种功能。可实现相对应的同种功能。Dreamweaver CS3网页设计培训教程7.2 插入其他媒体元素插入其他媒体元素 在在Dreamweaver CS3中，除了可以插入中，除了可以插入Flash媒体元素外，还可添加其他媒体元媒体元素外，还可添加其他
15、媒体元素，如素，如Shockwave影片、影片、Java Applet及及背景音乐等。背景音乐等。Dreamweaver CS3网页设计培训教程7.2 插入其他媒体元素插入其他媒体元素7.2.1 知识讲解知识讲解7.2.2 典型案例典型案例在线影院在线影院 Dreamweaver CS3网页设计培训教程7.2.1 知识讲解知识讲解下面讲解在下面讲解在Dreamweaver CS3 中插入中插入Shockwave影片、影片、Java Applet及背景音及背景音乐等的方法。乐等的方法。Dreamweaver CS3网页设计培训教程7.2.1 知识讲解知识讲解1.插入插入Shockwave影片影片
16、 2.插入插入Java Applet 3.插入背景音乐插入背景音乐 4.插入插件插入插件 Dreamweaver CS3网页设计培训教程1.插入插入Shockwave影片影片 Shockwave影片具有文件小、下载速度影片具有文件小、下载速度快、被目前主流的浏览器所支持等优点，快、被目前主流的浏览器所支持等优点，广泛应用于网页制作中。它是使用广泛应用于网页制作中。它是使用Director制作的多媒体影片文件。制作的多媒体影片文件。在在Dreamweaver CS3中插入中插入Shockwave影片的具体操作请教师参照软件和书中内影片的具体操作请教师参照软件和书中内容进行讲解。容进行讲解。Dre
17、amweaver CS3网页设计培训教程2.插入插入Java Applet Dreamweaver CS3网页设计培训教程3.插入背景音乐插入背景音乐 在在Dreamweaver CS3中，可以为网页添中，可以为网页添加背景音乐。背景音乐是在网页后台播放加背景音乐。背景音乐是在网页后台播放的音乐，在制作时可以采用在源代码中添的音乐，在制作时可以采用在源代码中添加代码的方法来添加背景音乐，具体操作加代码的方法来添加背景音乐，具体操作请教师参照软件和书中内容进行讲解。请教师参照软件和书中内容进行讲解。Dreamweaver CS3网页设计培训教程4.插入插件插入插件 如果想在浏览器中访问更多类型的
18、媒体对如果想在浏览器中访问更多类型的媒体对象，就必须借助插件。利用插件可以在网象，就必须借助插件。利用插件可以在网页中插入各种类型的媒体元素。插件包括页中插入各种类型的媒体元素。插件包括的范围很广，如视频文件、音乐文件和动的范围很广，如视频文件、音乐文件和动画文件等。前面介绍的画文件等。前面介绍的Shockwave影片影片就是插件中的一员。就是插件中的一员。插入插件的具体操作请教师参照软件和书插入插件的具体操作请教师参照软件和书中内容进行讲解。中内容进行讲解。Dreamweaver CS3网页设计培训教程7.2.2 典型案例典型案例在线影院在线影院 w案例目标案例目标本案例将在网页中插入一个插
19、件，以丰富本案例将在网页中插入一个插件，以丰富网页内容，主要练习插入插件的操作。网页内容，主要练习插入插件的操作。Dreamweaver CS3网页设计培训教程7.2.2 典型案例典型案例在线影院在线影院w操作思路操作思路（1）插入插件。）插入插件。（2）设置插件属性。）设置插件属性。Dreamweaver CS3网页设计培训教程7.2.2 典型案例典型案例在线影院在线影院w操作步骤操作步骤具体操作步骤请教师参照软件和书中具体操作步骤请教师参照软件和书中内容进行讲解。内容进行讲解。Dreamweaver CS3网页设计培训教程7.2.2 典型案例典型案例在线影院在线影院w案例小结案例小结本案例
20、在本案例在“在线影院在线影院”网页中插入了一个网页中插入了一个插件，在制作过程中主要练习了插入插件插件，在制作过程中主要练习了插入插件以及设置插件属性等操作。制作本案例主以及设置插件属性等操作。制作本案例主要是为了让读者灵活掌握插入插件的方法，要是为了让读者灵活掌握插入插件的方法，从而学会在网页制作过程中插入其他媒体从而学会在网页制作过程中插入其他媒体元素。元素。Dreamweaver CS3网页设计培训教程7.3 上机练习上机练习7.3.1 个人主页个人主页 7.3.2 MTV欣赏欣赏 Dreamweaver CS3网页设计培训教程7.3.1 个人主页个人主页本练习将制作一个个人主页，主要练
21、习插本练习将制作一个个人主页，主要练习插入入Flash动画、设置动画、设置Flash动画背景透明以动画背景透明以及添加背景音乐。及添加背景音乐。Dreamweaver CS3网页设计培训教程7.3.1 个人主页个人主页操作思路：操作思路：w设置页面属性，并添加背景音乐。设置页面属性，并添加背景音乐。w插入背景图像，添加背景透明的插入背景图像，添加背景透明的Flash动画。动画。w插入插入Flash动画。动画。Dreamweaver CS3网页设计培训教程7.3.2 MTV欣赏欣赏本练习将在本练习将在“MTV欣赏欣赏”页面中插入一个插页面中插入一个插件，主要练习插入插件。件，主要练习插入插件。Dreamweaver CS3网页设计培训教程7.3.2 MTV欣赏欣赏操作思路：操作思路：w在网页中插入在网页中插入“电影神话主题曲电影神话主题曲.wmv”文文件。件。w在在【属性属性】面板中设置其宽度为面板中设置其宽度为“640像素像素”、高度为、高度为“480像素像素”。