网页中的动感元素主要教学环节.PPT

《网页设计与制作》教学课件 第8章：网页中的动感元素 主要教学环节 五、知识讲解与操作示范 一、课程引导 二、明确知识技能目标 三、展示网页浏览效果 四、分析操作任务 六、课堂模仿实践 七、疑难解析 八、归纳总结 九、布置习题 （一）课程引导 在网页中除了可以使用文本和图像元素表达信息外，还可以向其中插入Flash动画、Java Applet小程序、ActiveX控件等多媒体元素，以丰富网页的效果，使网页更加生动。 （二）明确知识技能目标 （1）了解flash文件的类型。 （2）掌握在网页中插入flash动画和设置其属性的操作方法。 （3）掌握在网页中插入flash按钮和设置其属性的操作方法。 （4）掌握在网页中插入flash文本和设置其属性的操作方法。 （三）展示网页浏览效果 插入了flash动画的网页浏览效果如图所示，插入了flash按钮和flash文本的网页浏览效果如图8-2所示。 图8-1　　 插入多媒体对象的网页预览效果 图8-2　　 插入flash按钮 （四）分析操作任务 （1）在“长沙世界之窗”站点下创建文件夹“09动感网页”，在“09动感网页”文件夹中创建网页文档09.html，该网页中插入多个Flash动画。 （2）对第7章的“框架网页”一节所创建的网页“navi.html”进行修改，插入Flash按钮和插入Flash文本。 （五）知识讲解与操作示范（1） 8.1　Flash文件类型 Flash软件由Macromedia公司推出，利用它可以制作文件体积小、效果华丽的矢量动画。目前Flash动画是网上最流行的动画格式，被大量用于网页页面。Flash技术是实现和传递基于矢量的图形和动画的首选方案。插入到网页中的Flash文件有多种类型：Flash动画、Flash按钮、Flash文本、Flash视频等。 （五）知识讲解与操作示范（2） 8.2　插入Flash 在网页文档09.html中插入多个Flash动画。具体操作要求如下： （1）创建一个名为“09.html”的网页，该网页运用2个表格进行布局定位。 （2）两个表格中各插入一个flash动画。 （3）在第二个表格之后插入“Library”子文件夹中的库文件“copyright.lbi”。 （4）在插入库文件的位置插入一个层，在层中插入一个flash动画。 （五）知识讲解与操作示范（3） 网页文档09.html的创建过程如下： 1．新建网页 （1）在站点“长沙世界之窗”下创建文件夹“09动感网页”，在“09动感网页”文件夹中创建子文件夹“image”，并将所需图像复制到该文件夹下；在同一文件夹中创建子文件夹“flash”，并将所需flash动画文件复制到该文件夹下。 （五）知识讲解与操作示范（4） （2）在Dreamweaver 8 主窗口中，单击菜单【文件】→【新建】，打开“新建文档”对话框，在“常规”选项卡的“类别”列表框中选择“基本页”，在“基本页”列表框中选择“HTML”，单击【创建】按钮，该站点下一个名为“Untitled-1”文档便创建。单击标准工具栏上的【保存】按钮，打开“另存为”对话框，保存位置为“09动感网页”，文件名为“09.html”，单击【保存】按钮，保存该网页文档。 （五）知识讲解与操作示范（5） 2．插入Flash动画 （1）插入定位表格 如果“09.html”网页处于关闭状态，将该网页打开。在网页中分别插入一个1行1列的表格、一个2行1列，结果如图8-3所示。 （2）设置表格属性 将表格1的宽度设置为“780px”，对齐方式为“居中对齐”；将表格2的宽度设置为“780”，高度设置为“262”，对齐方式为“居中对齐”。 （五）知识讲解与操作示范（6） （3）将光标置于表格1中，在Dreamweaver 8主窗口中，单击菜单【插入】→【媒体】→【flash】。或者在“常用”插入工具栏中，单击【媒体】按钮右侧的箭头按钮，然后在弹出的菜单中单击【flash】按钮。 （4）打开“选择文件”对话框，在该对话框中选择要插入的Flash动画文件“01.swf”。然后单击该对话框中的【确定】按钮。 （五）知识讲解与操作示范（7） （5）在“选择文件”对话框中单击【确定】按钮后，会弹出如图8-5所示的“对象标签辅助功能属性”对话框，在该对话框中输入“标题”、“访问键”等辅助功能信息，然后单击【确定】按钮，也可以不输入任何信息直接单击【确定】按钮。 （6）插入的Flash动画并不会在设计视图中显示其内容，而是以一个带有字母 F的灰色框来表示，如图8-6所示。 （7）设置Flash动画的