第五章 让网页动起来.docVIP

第5章 让网页动起来 通过前面的学习，相信大家已经能够制作出简单的网页；不过，细心的人可能已经发现，前面所讲的网页中只有一些静止的图片和文字，显得过于单调。本章主要讲解如何为网页添加动画和多媒体元素，以使我们的网页更加丰富多彩。 5.1应用Flash动画： Flash动画是目前最流行的矢量动画，它具有文件尺寸小和变化丰富的优点，因而很多网页中都用到了它。利用Dreamweaver，可以方便地在网页文档中插入Flash动画。 5.1.1 Flash文件格式： Flash文件有3种格式，下面我们就来简单了解一下这3种格式。 Flash源文件（.fla）：它是所有Flash动画的源文件，此类型的文件只能在Flash中创建、打开并编辑，不能插入网页文档中。 Flash动画文件（.swf）：它是fla文件的压缩版本，已经进行了优化处理。我们可以在Flash中创建fla文件，然后将它导出或发布为swf文件，以便在网页中使用它们。此种类型的文件是在网页中最常使用的动画文件，但不能在Dreamweaver中进行编辑。 Flash模板文件（.swt）：可以直接在Dreamweaver中编辑这类文件，它包括Flash按钮和Flash文本两种对象。 5.1.2 插入Flash动画： Step01 在Dreamweaver中定义“shop”站点，打开“shop”站点中的文档“index.html”。 Step02 在“最新商品”下方的单元格中单击定位插入点，然后单击“常用”插入栏中的“媒体：Flash”按钮 ，如图5-1-1所示。 图5-1-1 单击“媒体：Flash”按钮 Step03 在“插入Flash按钮”对话框中的“链接：”栏右侧，单击“浏览”按钮，打开“选择文件”对话框，在“查找范围”下拉列表中选择动画所在文件夹（此处为shop文件夹中的“images”文件夹），在文件列表中选择一个扩展名为“.swf”的Flash动画（此处为banner1.swf），如图5-1-2所示。 图5-1-2 “选择文件”对话框 Step04 单击“确定”按钮，弹出“对象标签辅助功能属性”对话框，再次单击“确定”按钮，Flash动画就被插入到了网页中，如图5-1-3所示。 图5-1-3 插入Flash动画 知识库：默认情况下，在设计视图中只能看到Flash动画的占位符（占位符的大小代表了Flash动画的实际大小）。如果观看播放效果，可在选中占位符后，单击“属性”面板上的“播放”按钮。 Step05 在单击选中网页中的Flash动画后，可以在“属性”面板中对该动画的各项属性进行修改，如图5-1-4所示。 图5-1-4 Flash动画“属性”面板 5.1.3将Flash动画背景设置为透明： 默认情况下，网页中文本的字体、字号等，与该网页“页面属性”中设置的相同。另外，用户也可利用“属性”面板上的“格式”下拉列表为文本设置系统提供的格式化样式（段落、标题1、标题2等），或直接设置所选文本的字体、大小、颜色、粗体、斜体、对齐方式和列表方式等。 Step01 接着在前面的文档中操作，在网站标志所在单元格右侧的单元格中插入“\shop\images”文件夹中“nihong.swf”，如图5-1-5所示。 图5-1-5 插入动画文件 Step02 在保存文档并在IE浏览器中预览效果，可以看到Flash动画遮盖了报告的背景图像，如图5-1-6所示。 图5-1-6 预览网页 Step03 回到Dreamweaver操作界面。选中Flash动画，单击“属性”面板中的“参数”按钮，打开“参数”对话框。在“参数”列第一行单击，输入“wmode”，在对应的“值”列输入“transparent”。单击“确定”按钮，关闭“参数”对话框，如图5-1-7所示。 图5-1-7 “参数”对话框 Step04 体再次保存文档，并在浏览器中预览，可以看到动画后面的背景图像出现了，如图5-1-8所示。 图5-1-8 预览透明背景动画效果 5.1.4插入Flash按钮： Flash按钮包括两类，一类是利用Flash软件制作的按钮；另一类是Dreamweaver中集成的Flash按钮。前者的插入方法与Flash动画类似，此处主要讲解后者的插入。 Step01 将插入点置于要插入Flash按钮的位置，选择“插入”→“媒体”→“Flash按钮”菜单，打开“插入Flash按钮”对话框。 Step02 在“样式”列表框中选择一种样式（此处选择“Translucent Tab down ”），其效果将显示在“范例”栏中；在“按钮文本”编辑框中输入要在按钮上显示的文本内容（此处为“Company”）；在“字体”下拉列表中选择一种字体（此处为“Times New Roman”），作为按钮