Dreamweaver网页设计培训教程06

Dreamweaver8网页设计培训教程第6课为网页加入动态元素本课要点具体要求本课导读上机练习Dreamweaver8网页设计培训教程本课要点插入Flash媒体元素插入其他媒体元素Dreamweaver8网页设计培训教程具体要求插入Flash动画插入Flash按钮插入Flash文本插入FlashPaper插入Flash视频插入Shockwave影片插入背景音乐Dreamweaver8网页设计培训教程本课导读网页中只有图像和文本，表现力毕竟有限，如果在网页中加入一些动感十足的Flash动画，可以吸引更多浏览者的注意。如果再加上背景音乐，那就能创建图像、文本、动画和音乐四位一体的多媒体效果了。Dreamweaver8网页设计培训教程6.1插入Flash媒体元素在网页中添加动态元素可使网页看起来更吸引人。Flash动画是网页中最常见的动态元素。Flash动画是一种矢量动画，它具有生成的动画文件较小、效果好、并能够实现交互等优点。要制作Flash动画，可以使用Macromedia公司出品的Flash软件。Dreamweaver8网页设计培训教程6.1插入Flash媒体元素6.1.1知识讲解6.1.2典型案例——为网页添加Flash元素Dreamweaver8网页设计培训教程6.1.1知识讲解在Dreamweaver8中可以直接插入发布后的Flash动画（.swf文件），可插入的Flash动画包括Flash动画文件、Flash按钮和Flash文本等。Dreamweaver8网页设计培训教程6.1.1知识讲解1.了解Flash文件格式2.插入Flash动画3.插入Flash按钮4.插入Flash文本5.插入FlashPaper6.插入Flash视频7.设置Flash背景透明Dreamweaver8网页设计培训教程1.了解Flash文件格式Flash文件主要有以下三种文件类型。.swf：该类文件是Flash电影文件，是运用于网络中的最佳格式文件，是一种压缩格式的Flash文件。fla：该类文件是Flash的源文件，在Flash应用程序中创建并且只能在Flash应用程序中打开。.swt：该类文件是Flash库文件，这种类型的文件允许修改Flash动画文件中的信息，这类文件常用于Flash按钮对象中。Dreamweaver8网页设计培训教程2.插入Flash动画具体操作如下：（1）将光标插入点定位到需插入Flash动画文件的位置。（2）选择【插入】→【媒体】→【Flash】命令，打开【选择文件】对话框。（3）在该对话框的【查找范围】下拉列表框中选择文件所在的位置，然后在文件列表框中选中要插入的Flash文件。（4）单击【确定】按钮，完成Flash动画文件的插入。Dreamweaver8网页设计培训教程3.插入Flash按钮在Dreamweaver8中集成了许多精美的Flash按钮，这为增加网页动态效果提供了方便。在制作网页时可以将自己制作的Flash按钮插入到网页中，也可插入Dreamweaver8集成的按钮。具体操作步骤请教师参照书中步骤进行讲解。Dreamweaver8网页设计培训教程4.插入Flash文本在网页中还可以插入Flash文本，Flash文本是Dreamweaver8中集成的文本动画，通过【插入Flash文本】对话框创建。具体操作步骤请教师参照书中步骤进行讲解。Dreamweaver8网页设计培训教程5.插入FlashPaperFlashPaper是一种特殊的Flash动画文件，可以通过FlashPaper软件制作。制作网页时，可以利用插入FlashPaper功能在网页中插入MacromediaFlashPaper文档。这样在浏览器中打开包含FlashPaper文档的网页时，用户就可浏览FlashPaper文档中的所有页面，而无须加载新的网页。用户也可以搜索、打印和缩放该文档。具体操作步骤请教师参照书中步骤进行讲解。Dreamweaver8网页设计培训教程6.插入Flash视频插入Flash视频也是目前网页制作中常用的方法。用Dreamweaver8可以轻松地在网页中插入Flash视频内容，这是Dreamweaver8新增的功能。具体操作步骤请教师参照书中步骤进行讲解。Dreamweaver8网页设计培训教程7.设置Flash背景透明有时为了提高网页视觉效果，可在表格的单元格中插入背景图像，然后再在该单元格中插入Flash影片，这时需要将Flash影片设置为背景透明，否则就看不见下面的背景图像。具体操作步骤请教师参照书中步骤进行讲解。Dreamweaver8网页设计培训教程6.1.2典型案例——为网页添加Flash元素案例目标本案例将在“天府美食”网页中插入一些Flash动画，主要练习插入Flash动画、Flash按钮和Flash文本的操作，最终效果如图6.17所示。素材位置：【\第6课\素材\6.1.2\】效果图位置：【\第6课\源文件\6.1.2\index1.html】Dreamweaver8网页设计培训教程6.1.2典型案例——为网页添加Flash元素操作思路（1）插入Flash文本。（2）插入4个Flash按钮用来制作导航条。（3）插入一个Flash动画文件。Dreamweaver8网页设计培训教程6.1.2典型案例——为网页添加Flash元素操作步骤具体操作步骤请教师参照软件和书中内容进行讲解。Dreamweaver8网页设计培训教程6.1.2典型案例——为网页添加Flash元素案例小结本案例是在一个已有的框架网页中插入Flash媒体文件，在制作时主要是为这个网页添加Flash文本、Flash按钮和Flash动画文件，使整个页面看起更加生动、协调。Dreamweaver8网页设计培训教程6.2插入其他媒体元素在Dreamweaver8中除了可以插入Flash媒体元素外还可添加其他媒体元素，如Shockwave影片、JavaApplet及背景音乐等。Dreamweaver8网页设计培训教程6.2插入其他媒体元素6.2.1知识讲解6.2.2典型案例——在“天府美食”网页插入插件Dreamweaver8网页设计培训教程6.2.1知识讲解下面讲解在Dreamweaver8中插入Shockwave影片、JavaApplet以及背景音乐的方法。Dreamweaver8网页设计培训教程6.2.1知识讲解1.插入Shockwave影片2.插入JavaApplet3.插入背景音乐4.插入插件Dreamweaver8网页设计培训教程1.插入Shockwave影片Shockwave影片具有文件小、下载速度快、被目前主流的浏览器所支持等优点，所以被广泛应用于网页制作中，它是使用MacromediaDirector制作的多媒体影片文件。具体操作请教师参照软件和书中内容进行讲解。Dreamweaver8网页设计培训教程2.插入JavaAppletJavaApplet是Java的应用程序，是一种动态、安全、跨平台的网络应用程序。它能在网页中实现一些特殊效果，如下雪、水纹、下雨等。JavaApplet常被嵌入到HTML语言中，可以实现较为复杂的控制和各种动态效果。具体操作请教师参照软件和书中内容进行讲解。Dreamweaver8网页设计培训教程3.插入背景音乐在Dreamweaver8中，可以为网页添加背景音乐，背景音乐是在网页后台播放的音乐，在制作时可以采用在源代码中添加代码的方法来添加背景音乐。具体操作请教师参照软件和书中内容进行讲解。Dreamweaver8网页设计培训教程4.插入插件如果想在浏览器中访问更多类型的媒体对象，就必须借助插件。利用插件功能可以在网页中插入各种类型的媒体元素，插件包括的范围很广，如视频文件、音乐文件、动画文件等。前面介绍的Shockwave影片就是插件中的一员。具体操作请教师参照软件和书中内容进行讲解。Dreamweaver8网页设计培训教程6.2.2典型案例——在“天府美食”网页插入插件案例目标本案例将在“天府美食”网页插入一个插件，使网页内容更加丰富，主要练习插入插件的操作，其效果如图6.28所示的右下角部分内容。素材位置：【\第6课\素材\6.1.2\】效果图位置：【\第6课\源文件\6.1.2\index2.html】Dreamweaver8网页设计培训教程6.2.2典型案例——在“天府美食”网页插入插件操作思路（1）插入插件。（2）设置插件属性。Dreamweaver8网页设计培训教程6.2.2典型案例——在“天府美食”网页插入插件操作步骤具体操作步骤请教参照软件和书中内容进行讲解。Dreamweaver8网页设计培训教程6.2.2典型案例——在“天府美食”网页插入插件案例小结本案例在“天府美食”网页中插入一个插件，使网页的内容更具观赏性，在制作过程中主要练习了插入插件以及设置插件的属性等操作。制作本案例主要是为了让读者灵活掌握插入插件的方法，从而巩固在网页制作过程中插入其他媒体元素的方法。Dreamweaver8网页设计培训教程6.3上机练习6.3.1网上购物页面的制作6.3.2在网页中插入Shockwave影片Dreamweaver8网页设计培训教程6.3.1网上购物页面的制作本次练习将制作一个网上购物的网页，主要练习插入Flash动画和Flash按钮。制作出的效果如图6.31所示。素材位置：【\第6课\素材\6.3.1\】效果图位置：【\第6课\源文件\6.3.1\shipinwangye1.html】Dreamweaver8网页设计培训教程6.3.1网上购物页面的制作操作思路在网页的顶部插入“音符.swf”。插入“音符.swf”插入Flash按钮在左侧插入5个Flash按钮。Dreamweaver8网页设计培训教程6.3.2在网页中插入Shockwave影片本次练习将在网上购物页面中插入一个图片欣赏效果，主要练习插入Shockwave影片的方法，其效果如图6.32所示。素材位置：【\第6课\素材\6.3.1\】效果图位置：【\第6课\源文件\6.3.1\shipinwangye2.html】Dreamweaver8网页设计培训教程6.3.2在网页中插入Shockwave影片操作思路在网页左下角单元格中插入“图片.dcr”。在【属性】面板中设置其宽度为400像素，高度为300像素。