Dreamweaver网页设计培训教程06.ppt

《Dreamweaver网页设计培训教程06.ppt》由会员分享，可在线阅读，更多相关《Dreamweaver网页设计培训教程06.ppt（36页珍藏版）》请在优知文库上搜索。

1、第第6课课 为网页加入动态元素为网页加入动态元素w 本课要点本课要点w 具体要求具体要求w 本课导读本课导读w 上机练习上机练习本课要点本课要点w 插入插入Flash媒体元素媒体元素w 插入其他媒体元素插入其他媒体元素 具体要求具体要求w 插入插入Flash动画动画w 插入插入Flash按钮按钮w 插入插入Flash文本文本w 插入插入FlashPaperw 插入插入Flash视频视频w 插入插入Shockwave影片影片w 插入背景音乐插入背景音乐 本课导读本课导读网页中只有图像和文本，表现力毕竟有限网页中只有图像和文本，表现力毕竟有限，如果在网页中加入一些动感十足的，如果在网页中加入一些动

2、感十足的Flash动画，可以吸引更多浏览者的注意动画，可以吸引更多浏览者的注意。如果再加上背景音乐，那就能创建图像。如果再加上背景音乐，那就能创建图像、文本、动画和音乐四位一体的多媒体效、文本、动画和音乐四位一体的多媒体效果了。果了。 6.1 插入插入Flash媒体元素媒体元素 在网页中添加动态元素可使网页看起来更在网页中添加动态元素可使网页看起来更吸引人。吸引人。Flash动画是网页中最常见的动动画是网页中最常见的动态元素。态元素。Flash动画是一种矢量动画，它具有生成动画是一种矢量动画，它具有生成的动画文件较小、效果好、并能够实现交的动画文件较小、效果好、并能够实现交互等优点。要制作互等

3、优点。要制作Flash动画，可以使用动画，可以使用Macromedia公司出品的公司出品的Flash软件。软件。 6.1 插入插入Flash媒体元素媒体元素 6.1.1 知识讲解知识讲解6.1.2 典型案例典型案例为网页添加为网页添加Flash元元素素 6.1.1 知识讲解知识讲解在在Dreamweaver 8中可以直接插入发布中可以直接插入发布后的后的Flash动画（动画（.swf文件），可插入的文件），可插入的Flash动画包括动画包括Flash动画文件、动画文件、Flash按按钮和钮和Flash文本等。文本等。 6.1.1 知识讲解知识讲解1.了解了解Flash文件格式文件格式 2.插入

4、插入Flash动画动画3.插入插入Flash按钮按钮 4.插入插入Flash文本文本 5.插入插入FlashPaper 6.插入插入Flash视频视频 7.设置设置Flash背景透明背景透明 1.了解了解Flash文件格式文件格式 Flash文件主要有以下三种文件类型。文件主要有以下三种文件类型。w .swf：该类文件是：该类文件是Flash电影文件，是运用于网络中的电影文件，是运用于网络中的最佳格式文件，是一种压缩最佳格式文件，是一种压缩格式的格式的Flash文件。文件。w fla：该类文件是：该类文件是Flash的源文件，在的源文件，在Flash应用程序中应用程序中创建并且只能在创建并且只

5、能在Flash应用程序中打开。应用程序中打开。w .swt：该类文件是：该类文件是Flash库文件，这种类型的文件允许库文件，这种类型的文件允许修改修改Flash动画文件中的信息，这类文件常用于动画文件中的信息，这类文件常用于Flash按按钮对象中。钮对象中。 2.插入插入Flash动画动画具体操作如下：具体操作如下：（1）将光标插入点定位到需插入）将光标插入点定位到需插入Flash动画文件动画文件的位置。的位置。（2）选择）选择【插入插入】【媒体媒体】【Flash】命令命令，打开，打开【选择文件选择文件】对话框。对话框。（3）在该对话框的）在该对话框的【查找范围查找范围】下拉列表框中选下拉列

6、表框中选择文件所在的位置，然后在文件列表框中选中择文件所在的位置，然后在文件列表框中选中要插入的要插入的Flash文件。文件。（4）单击）单击【确定确定】按钮，完成按钮，完成Flash动画文件的动画文件的插入。插入。 3.插入插入Flash按钮按钮 在在Dreamweaver 8中集成了许多精美的中集成了许多精美的Flash按钮，这为增加网页动态效果提供按钮，这为增加网页动态效果提供了方便。在制作网页时可以将自己制作的了方便。在制作网页时可以将自己制作的Flash按钮插入到网页中，也可插入按钮插入到网页中，也可插入Dreamweaver 8集成的按钮。集成的按钮。具体操作步骤请教师参照书中步骤

7、进行讲具体操作步骤请教师参照书中步骤进行讲解。解。 4.插入插入Flash文本文本 在网页中还可以插入在网页中还可以插入Flash文本，文本，Flash文本是文本是Dreamweaver 8中集成的文本动中集成的文本动画，通过画，通过【插入插入Flash文本文本】对话框创建对话框创建。具体操作步骤请教师参照书中步骤进行讲具体操作步骤请教师参照书中步骤进行讲解。解。 5.插入插入FlashPaper FlashPaper是一种特殊的是一种特殊的Flash动画文件，可动画文件，可以通过以通过FlashPaper软件制作。软件制作。制作网页时制作网页时，可，可以以利用插入利用插入FlashPaper

8、功能在网页中插入功能在网页中插入Macromedia FlashPaper文档。这样在浏览器文档。这样在浏览器中打开包含中打开包含FlashPaper文档的网页时文档的网页时，用户就用户就可浏览可浏览FlashPaper文档中的所有页面文档中的所有页面，而无须而无须加载新的网页。用户也可以搜索、打印和缩放加载新的网页。用户也可以搜索、打印和缩放该文档。该文档。 具体操作步骤请教师参照书中步骤进行讲解。具体操作步骤请教师参照书中步骤进行讲解。 6.插入插入Flash视频视频 插入插入Flash视频也是目前网页制作中常用视频也是目前网页制作中常用的方法。用的方法。用Dreamweaver 8可以轻

9、松地可以轻松地在网页中在网页中插入插入Flash视频视频内容，内容，这是这是Dreamweaver 8新增的功能。新增的功能。 具体操作步骤请教师参照书中步骤进行讲具体操作步骤请教师参照书中步骤进行讲解。解。 7.设置设置Flash背景透明背景透明 有时为了提高网页视觉效果，可在表格的有时为了提高网页视觉效果，可在表格的单元格中插入背景图像，然后再在该单元单元格中插入背景图像，然后再在该单元格中插入格中插入Flash影片，这时需要将影片，这时需要将Flash影影片设置为背景透明，否则就看不见下面的片设置为背景透明，否则就看不见下面的背景图像。背景图像。 具体操作步骤请教师参照书中步骤进行讲具体

10、操作步骤请教师参照书中步骤进行讲解。解。 6.1.2 典型案例典型案例为网页添加为网页添加 Flash元素元素 w案例目标案例目标本案例将在本案例将在“天府美食天府美食”网页中插入一些网页中插入一些Flash动画，主要练习插入动画，主要练习插入Flash动画、动画、Flash按钮和按钮和Flash文本的操作，最终效果文本的操作，最终效果如图如图6.17所示。所示。素材位置：素材位置：【第第6课课素材素材6.1.2】效果图位置：效果图位置：【第第6课课源文件源文件6.1.2index1.html】 6.1.2 典型案例典型案例为网页添加为网页添加 Flash元素元素 w操作思路操作思路（1）插入

11、）插入Flash文本。文本。（2）插入）插入4个个Flash按钮用来制作导航条。按钮用来制作导航条。（3）插入一个）插入一个Flash动画文件。动画文件。 6.1.2 典型案例典型案例为网页添加为网页添加 Flash元素元素 w操作步骤操作步骤具体操作步骤请教师参照软件和书中具体操作步骤请教师参照软件和书中内容进行讲解。内容进行讲解。 6.1.2 典型案例典型案例为网页添加为网页添加 Flash元素元素 w案例小结案例小结本案例是在一个已有的框架网页中插入本案例是在一个已有的框架网页中插入Flash媒体文件，在制作时主要是为这个媒体文件，在制作时主要是为这个网页添加网页添加Flash文本、文本

12、、Flash按钮和按钮和Flash动画文件，使整个页面看起更加生动、协动画文件，使整个页面看起更加生动、协调。调。6.2 插入其他媒体元素插入其他媒体元素 在在Dreamweaver 8中除了可以插入中除了可以插入Flash媒体元素外还可添加其他媒体元素，如媒体元素外还可添加其他媒体元素，如Shockwave影片、影片、Java Applet及背景音及背景音乐等。乐等。 6.2 插入其他媒体元素插入其他媒体元素 6.2.1 知识讲解知识讲解6.2.2 典型案例典型案例在在“天府美食天府美食”网页插入插件网页插入插件 6.2.1 知识讲解知识讲解下面讲解在下面讲解在Dreamweaver 8中插

13、入中插入Shockwave影片、影片、Java Applet以及背景以及背景音乐的方法。音乐的方法。 6.2.1 知识讲解知识讲解1.插入插入Shockwave影片影片 2.插入插入Java Applet 3.插入背景音乐插入背景音乐4.插入插件插入插件 1.插入插入Shockwave影片影片 Shockwave影片具有文件小、下载影片具有文件小、下载速度快、被目前主流的浏览器所支持速度快、被目前主流的浏览器所支持等优点，所以被广泛应用于网页制作等优点，所以被广泛应用于网页制作中，它是使用中，它是使用Macromedia Director制作的多媒体影片文件。具体操作请制作的多媒体影片文件。具

14、体操作请教师参照软件和书中内容进行讲解教师参照软件和书中内容进行讲解 。2.插入插入Java Applet Java Applet是是Java的应用程序，是一种的应用程序，是一种动态、安全、跨平台的网络应用程序。它动态、安全、跨平台的网络应用程序。它能在网页中实现一些特殊效果，如下雪、能在网页中实现一些特殊效果，如下雪、水纹、下雨等。水纹、下雨等。Java Applet常被嵌入到常被嵌入到HTML语言中，可以实现较为复杂的控制语言中，可以实现较为复杂的控制和各种动态效果。具体操作请教师参照软和各种动态效果。具体操作请教师参照软件和书中内容进行讲解件和书中内容进行讲解 。3.插入背景音乐插入背景

15、音乐在在Dreamweaver 8中，可以为网页添加中，可以为网页添加背景音乐，背景音乐是在网页后台播放的背景音乐，背景音乐是在网页后台播放的音乐，在制作时可以采用在源代码中添加音乐，在制作时可以采用在源代码中添加代码的方法来添加背景音乐代码的方法来添加背景音乐 。具体操作。具体操作请教师参照软件和书中内容进行讲解请教师参照软件和书中内容进行讲解 。4.插入插件插入插件 如果想在浏览器中访问更多类型的媒体对如果想在浏览器中访问更多类型的媒体对象，就必须借助插件。利用插件功能可以象，就必须借助插件。利用插件功能可以在网页中插入各种类型的媒体元素，插件在网页中插入各种类型的媒体元素，插件包括的范围

16、很广，如视频文件、音乐文件包括的范围很广，如视频文件、音乐文件、动画文件等。前面介绍的、动画文件等。前面介绍的Shockwave影片就是插件中的一员。影片就是插件中的一员。 具体操作请教具体操作请教师参照软件和书中内容进行讲解师参照软件和书中内容进行讲解 。 6.2.2 典型案例典型案例在在“天府美天府美食食”网页插入插件网页插入插件 w案例目标案例目标本案例将在本案例将在“天府美食天府美食”网页插入一个插网页插入一个插件，使网页内容更加丰富，主要练习插入件，使网页内容更加丰富，主要练习插入插件的操作，其效果如图插件的操作，其效果如图6.28所示的右下所示的右下角部分内容。角部分内容。素材位置：素材位置：【第第6课课素材素材6.1.2】效果图位置：效果图位置：【第第6课课源文件源文件6.1.2index2.html】 6.2.2 典型案例典型案例在在“天府美天府美食食”网页插入插件网页插入插件 w操作思路操作思路（1）插入插件。）插入插件。（2）设置插件属性。）设置插件属性。 6.2.2 典型案例典型案例在在“天府美天府美食食”网页插入插件网页插入插件 w操作步骤操作步骤 具体操作步骤