网页设计与制作案例教程电子教案第单元

《网页设计与制作案例教程电子教案第单元》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第8章　网页中的动感元素在网页中除了可以使用文本和图像元素表达信息外，还可以向其中插入Flash动画、JavaApplet小程序、ActiveX控件等多媒体元素，以丰富网页的效果，使网页更加生动。课程引导知识技能目标（1）了解flash文件的类型。（2）掌握在网页中插入flash动画和设置其属性的操作方法。（3）掌握在网页中插入flash按钮和设置其属性的操作方法。（4）掌握在网页中插入flash文本和设置其属性的操作方法。网页浏览效果展示插入了flash动画的网页浏览效果如图所示，插入了flash按钮和flash文本的网页浏览效果如图8-2所示。

2、图8-1插入多媒体对象的网页预览效果图8-2插入flash按钮本章操作任务（1）在“长沙世界之窗”站点下创建文件夹“09动感网页”，在“09动感网页”文件夹中创建网页文档09.html，该网页中插入多个Flash动画。（2）对第7章的“框架网页”一节所创建的网页“navi.html”进行修改，插入Flash按钮和插入Flash文本。8.1Flash文件类型8.2插入Flash8.3插入Flash按钮和插入Flash文本8.1Flash文件类型Flash软件由Macromedia公司推出，利用它可以制作文件体积小、效果华丽的矢量动画。目前Flash动

3、画是网上最流行的动画格式，被大量用于网页页面。Flash技术是实现和传递基于矢量的图形和动画的首选方案。插入到网页中的Flash文件有多种类型：Flash动画、Flash按钮、Flash文本、Flash视频、Flash元素、FlashPaper等。8.2　插入Flash在网页文档09.html中插入多个Flash动画。具体操作要求如下：（1）创建一个名为“09.html”的网页，该网页运用2个表格进行布局定位。（2）两个表格中各插入一个flash动画。（3）在第二个表格之后插入“Library”子文件夹中的库文件“copyright.lbi”。（4

4、）在插入库文件的位置插入一个层，在层中插入一个flash动画。网页文档09.html的创建过程如下：（1）在站点“长沙世界之窗”下创建文件夹“09动感网页”，在“09动感网页”文件夹中创建子文件夹“image”，并将所需图像复制到该文件夹下；在同一文件夹中创建子文件夹“flash”，并将所需flash动画文件复制到该文件夹下。1．新建网页（2）在Dreamweaver8主窗口中，单击菜单【文件】→【新建】，打开“新建文档”对话框，在“常规”选项卡的“类别”列表框中选择“基本页”，“基本页”列表框中选择“HTML”，单击【创建】按钮，该站点下一个名为

5、“Untitled-1”文档便创建。单击标准工具栏上的【保存】按钮，打开“另存为”对话框，保存位置为“09动感网页”，文件名为“09.html”，单击【保存】按钮，保存该网页文档。（1）插入定位表格如果“09.html”网页处于关闭状态，将该网页打开。在网页中分别插入一个1行1列的表格、一个2行1列，结果如图8-3所示。2．插入Flash动画（2）设置表格属性将表格1的宽度设置为“780px”，对齐方式为“居中对齐”；将表格2的宽度设置为“780”，高度设置为“262”，对齐方式为“居中对齐”。（3）将光标置于表格1中，在Dreamweaver8主

6、窗口中，单击菜单【插入】→【媒体】→【flash】。或者在“常用”插入工具栏中，单击【媒体】按钮右侧的箭头按钮，然后在弹出的菜单中单击【flash】按钮。（4）打开“选择文件”对话框，在该对话框中选择要插入的Flash动画文件“01.swf”。然后单击该对话框中的【确定】按钮。（5）在“选择文件”对话框中单击【确定】按钮后，会弹出如图8-5所示的“对象标签辅助功能属性”对话框，在该对话框中输入“标题”、“访问键”等辅助功能信息，然后单击【确定】按钮，也可以不输入任何信息直接单击【确定】按钮。（6）插入的Flash动画并不会在设计视图中显示其内容，而

7、是以一个带有字母F的灰色框来表示，如图8-6所示。（7）设置Flash动画的属性在页面表格中单击选中一个Flash文件，然后在“Flash”的属性面板中设置Flash的属性。（8）在表格2的第一行用同样的方式插入另一人Flash动画文件“02.swf”，设置其属性，在“比例”下拉列表框中选择“无边框”。3．在表格2的第二行输入多个连续的“－”，且颜色设置为“#FF6600”。4．在表格2的后面插入“Library”子文件夹中的库文件“copyright.lbi”。5．在库文件位置插入一层，然后在该层插入flash动画。插入flash动画后，必须将f

8、lash动画的背景颜色设置为透明。8.3　插入Flash按钮和插入Flash文本对第7章的“框架网页”一节所创建的网页“n