第4课星光闪烁——用Flash动画完善首页教案

1 库尔勒市第二中学内初八年级 信息技术备课教案

主备人： 许媛 教研组长：朱遇青备课组长： 许媛 备课组成员： 王媛

课题（或章节） 星光闪烁——用Flash动画完善首页

授课时间 2015年2月14日——18日

课时分配 1课时

教学

三维

目标 知识与技能 1.巩固选择表格对象的方法。

2.进一步学习设置表格对象的属性。

3.掌握在网页中插入Flash动画文件，并学会设置Flash动画的参数的方法，以控制动画的播放效果。

4.能够灵活地在网页中使用文本。

5.初步认识并尝试使用辅助设计工具定位网页元素。

过程与方法 学生已经掌握基本的动画制作方法，通过本课完成对原有知识的巩固与积累，将所学知识点进行相互区分和相互关联，促进知识间的横纵联系，便于知识的灵活运用。

情感、态度与价值观 掌握在网页中插入Flash动画，并设置其属性和参数。

德育目标 培养学生经验的积累，

教学重点 1. 调整表格

2.设置网页标题

3.设置网页背景

4.使用表格对页面布局

教学难点 1..对逐帧动画的理解以及制作。

2.对图层的理解与应用。

3.位图与矢量图的理解。

4.形状渐变动画的原理及方法。

5.正确保存Flash动画的源文件与播放文件。

授课类型 新课型 教学用具 电子教室软件、单元测试题

教学过程： 二次备课及反思

第一课时

一、 复习巩固

【教师】1.站点的创建？

2.属性检查器的设置？

3.使用表格布局网页。

【教师】：本课站点已经创建成功，网站的首页也设计完毕，一个优秀的网站应该综合运用多种元素来增强网页的表现力，丰富文档

2 的效果，本课我们对表格进行调整，然后用“星光闪烁”的Flash动画装饰首页。

二、新课讲授

【教师】演示操作

(一)、调整表格

1、打开Dreamweaver8，导入站点打开自己做的首页index.html。

上节课我们为首页插入一个2行1列的表格，把标签选择器

标签的属性值分别设置为宽：600，高：450，边框为：0，对齐方式为：居中对齐。并为表格添加了背景图像。接下来我们将调整表格的高度。

2、选择整个表格：

方法一、在表格内任意位置单击，然后在“标签选择器”中单击

标签；也可以在单元格任意位置右击，在弹出的快捷菜单中执行“表格”→“选择表格”命令。

方法二、选择某一单元格：按住Ctrl键的同时单击需要选中的单元格；或者选中“标签选择器”中的

标签。

方法三、选择某一行或某一列：将光标移动到行左侧或列上方，当鼠标指针变为向右或向下的箭头图标时，单击即可。

3、设置第一行属性

选中第一行，然后在“属性检查器”中设置第一行的高为420，使之与插入的动画大小一致。

表格通常有两种用途：一种是用于网页元素的精确定位，通过对于表格的高度、宽度、比例等属性的调整控制来定位页面元素，达到精确布局的目的；另一种是可以在网页中直接显示表格数据，当遇到网页中有大量数据需要显示的时候，就可以使用表格数据来显示。

表格的高度和宽度还可以使用百分比的形式表达。此时表格的高度和宽度是相对于页面的宽度和高度的比值。

(二)、在首页插入Flash动画

步骤1.将光标放置在表格第一行中，执行“插入”→“媒体” →Flash命令，或者按快捷键Ctrl+Alt+F,在弹出来的“选择文件”对话框中，选择other文件夹中具有星光闪烁动画效果index.swf文件。单击“确定”按钮后，插入的Flash动画并不会在文档窗口中显示内容，而是以一个带有字母的F的灰色框来表示的。

步骤2.在文档窗口单击这个文件Flash文件，在“属性检查器”中设置它的属性。勾选“循环”复选框和“自动播放”复选框，使在页面加载时就开始连续播放。

步骤3.设置Flash动画的参数。插入Flash动画后，表格的背景图片被遮住了，无法透过星光显示出来。我们需要把Flash的背景变为透明。单击“属性检查器”中的“参数”按钮，在弹出“参数”对话框中进行设置。

3

(三)、在网页中插入文本

1、插入普通文本

将光标放置在第2行作为输入文本的位置，直接输入Enter。

2、插入特殊字符

执行→“插入” →“HTML” →“特殊字符” →“版权”命令，即可插入版权字符。此时对首页进行预览时才能看到真正的版权符号效果。

3、设置文本属性

在网页中创建了文本后，还需要对文本的属性进行设置，调整文本的样式、字体、大小、颜色登属性。选中Enter，使其成高亮状态，在“属性检查器”中进行设置。

(四)、测试网页

保存网页文件，按F12键在浏览器中预览效果。

知识着陆;

调整表格之前，需要先选择表格对象，一般使用“标签选择器”进行选择，然后在“属性检查器”中设置具体的属性。

三、学生上机操作，自主探究完成效果图

四、展示作品，评价交流

通过教师控屏软件随机选取学生机号，由学生自己点评作品，指出缺点和优点。

4 五、课堂小结

1.熟练对表格的操作，能选择表格的行、列、单元格等。 2.在网页中插入flash可以很好的表现动感。设置flash的相关属性。 3.在网页中插入文本，并设置文本的属性。

第二课时

一、复习巩固

1.开发个人网站的步骤？

2.如何为网页进行布局？

3.插入表格及设置表格属性的方法?

二、案例展示及分析

【教师】展示本课案例，请学生讨论分析。

【学生】讨论分析

（1）首先新建HTML页面；

（2）在页面属性中设置网页的背景图像；

（3）插入11行3列的表格；

（4）标题行要设置为合并单元格，添加标题字并居中

（5）设置

标签属性

（6）为网页添加内容

（7）保存并测试网页。

三、巩固练习，实践操作

同学们在业余生活中一定很喜欢看书吧。读书可以陶冶情操，开阔视野，增长见识，正所谓“读万卷书，行万里路”，“腹有诗书气自华”！

我们为网站添加一个介绍中国古典名著的网页，命名为ex11.html,保存到d;//八年级（）班/姓名/safe/other 文件夹中。

提示：

1.制作网页需要的素材在教师发送的桌面文件接受柜中，标题文字由自己输入。

2.设置表格对象属性时，要考虑到页面大小及表格中文字的间。效果图如下图所示：

5 板书

设计

星光闪烁——用Flash完善首页

一、 调整表格

二、 在首页插入Flash动画

三、 在网页中使用文本

四、 测试网页，按F12键

教学

反思