刘杰给老师的讲课稿

/制作动态网页(初中信息技术八年级模块四第四节）信息技术教案内容:

1．教学设计学科名称

2．所在班级情况，学生特点分析

３。教学内容分析

4．教学目标

5．教学难点分析

6．教学课时ﻫ7。教学过程ﻫ8．课堂练习

9。作业安排ﻫ1０.附录（教学资料及资源）

１1．自我问答第四节制作动态网页

教学目的：⒈学会在预定时间更换网页图片;⒉掌握滚动字幕的制作；⒊学会插入交互式按钮；⒋学会使用放大镜效果；⒌学会飞行图片效果;⒍掌握网页过渡效果的实现。

重点难点：Ｗeb组件操作和动态ＨTML效果的制作.

教学方法:讲解、演示和学生上机操作课时:

3课时教学步骤：〈导入新课〉同学们,我们已经学会了用ＦｒｏntPage2003制作网页的一些基本的操作,通过美化网页使我们的网页更漂亮了。在网上我们看到很多网页上的元素都能动起来，那么我们是不是也想让我们的网页动起来呢？下面我们就来学习动态网页的制作。<板书〉

第四节制作动态网页我们看到,许多网站都有各种各样、丰富多彩的图片和文字等内容；而且这些网页上产的图片在一定的时间段内经常地更换，其实它的制作并不复杂。它们是通过插入“weｂ组件”来实现的。现在我们来为我们的“环保”网站设置更换网页图片。〈板书〉一、在预定时间里更换网页图片[演示］打开ｈuaｎbao网站中，然后打开一个名为“jiayuan.htm"的框架页面，将两幅标题的图片轮流显示在页面上。图4-4—1图4—操作步骤：（1）

将光标定位于插入预定图片的位置，单击“插入”菜单中的“ｗeb组件”，弹出４—４－3如图所示“插入ｗeb组件图4（２）在“插入web组件”的对话框中“组件类型”中选择“包含内容”,在“选择内容类型"中选择“预定图片”

。（3）单击“完成”按钮，弹出如图４－4－４所示“预定图片属性”对话框

。

图4－4－4（4）在“预定图片属性"对话框中，通过“浏览”确定“在预定的时间内”显示的图片及“在预定的时间之前和之后”显示的图片

。（5)

在“开始时间”和“结束时间"区，指定预定时间(6）单击“确定”按钮。

这样，我们的“在预定时间内更换网页图片”就做好了。下面我们来创建滚动的文字字幕。〈板书>二、制作滚动字幕［演示］在主页的标题图片下面插入滚动字幕,文本内容为“欢迎来到我们的网站，共同努力让我们的地球更绿,让我们的家园更美好！”。操作步骤:（1）插入点定位于滚动字幕的位置,在“插入”菜单中选“web组件"对话框的“插入ｗeb组件"对话框中的“组件类型”中选择“动态效果”,在“选择一种动态效果”中选择“字幕”。(2)单击“完成"按钮，弹出“字幕属性”对话框，如图4—4－５图4（3）在“文本"栏中输入字幕内容。在“方向"区选择字幕移动方向，（我们在这里设置为“左"）在速度区:“延迟”用来设置字幕每次移动的时间间隔，该参数越大，字幕移动越慢；“数量"用来定义字幕每次移动的距离，该参数越大，字幕移动越快；我们使用默认值。在“表现方式”区选择“滚动条”可以让文字沿设置的方向,从字幕区域的一边出现，到另一边消失.（“幻灯片”可以让文字沿设置的方向，从字幕区域的一边出现，当文字到达字幕区域的另一边时停止滚动并保持在屏幕上.“交替"可以让文字在字幕区域来回移动。我们把“表现方式"设置为“滚动条”）。在“大小"区域设置字幕的大小。在“背景色”区选择字幕的背景色，其余采用默认值。(4）单击“确定”按钮。我们切换到“预览"来看一下其效果。下面我们来学习交互式按钮的插入。<板书〉三、插入交互式按钮制作如图４-4－6所示按钮。图４—（1)把插入点定位于插入交互式按钮位置,在“插入wｅb组件”对话框的“组件类型”中选择“动态效果”，在“选择一种效果中”选择“交互式按钮".（2)单击“完成"按钮,弹出如图４—４—7所示图４-4（3）在“按钮”选项卡上的“文本”栏输入按钮文字“环境保护",按钮类型选择“浮雕标签1”，在“链接”栏指定链接网页文件名“hｊ-1。htｍ”。（4)在“字体”选项卡中，设置按钮文字的字体为宋体，字形为常规，字号为20,初始字体为绿色，悬停时字体颜色为蓝色,单击时字体颜色为红色。(5）在“图像”选项卡的宽度栏输入120,高度栏输入40,并选取“按钮为GＩF图像并具有透明背景色”选项，单击“确定”按钮。我们切换到“预览"来看一下其效果.下面我们来学习HＴMＬ动态效果。<板书>四、动态HTML效果-———放大镜效果动态ＨTMＬ（DHTＭL）又称动态超文本标识语言，它是Micｒosｏft公司对HＴML4.０的增强,使用它可以在网页中产生动画效果，即设置一个触发事件。FroｎtＰage2003中的触发事件有单击、双击、鼠标悬停、网页加载等.用户可以根据自己的需要设置相应的动画效果。我们在jiayuａn.ｈtｍ网页的下框中输入有关地球日的资料，将其定义为在网页加载时“从右下部”“飞入”页面的动态效果.[演示］操作步骤：（1）

将鼠标定位于要添加放大镜效果的段落，选定上述文字，然后单击“视图”菜单中的“工具栏”，选中“DHTＭL效果”,弹出“DＨTML效果”工具栏。(2）

在“动态HTMＬ效果”工具栏中选择“鼠标悬停”，应用为“格式”，选择设置区为“选择字体···”，弹出如图4—4—8所示“图４（3）在对话框中选择放大后的字体、字号和颜色等,单击“确定”按钮。接下来我们来学习“动态ＨTML效果"中飞行图片效果的制作。〈板书〉五、动态ＨTＭＬ效果-－—飞行图片效果操作步骤：（１）

选定要添加飞行效果的图片,然后单击“视图”菜单中的“工具栏"，选中“DＨTML效果”，弹出“ＤＨTML效果”工具栏。（２)

如图４－4—9所示，选择“单击”,在应用区“飞出"和“到右下部图4在网页中添加了动态HＴMＬ效果后,会出现淡蓝色背景方框.如取消HTＭL效果,可选定段落和图片,单击“DHTML效果”工具栏上的“删除效果"按钮。最后,我们来共同学习设置网页过渡效果.<板书〉六、设置网页过渡效果什么是网页过渡呢？在网页中加入超链接，可方便地从一个网页切换到另一个网页。为加强视觉的效果，使整个浏览过程变得更加美妙，可通过设置动态的网页过渡来实现。[演示]操作步骤：（1）．打开要设置过渡效果的网页。（2)．单击“格式”菜单中的“网页过渡”，弹出如图4—4-１0所示“网页图4（3）。在对话框“事件”选择框中选择“进入网页”,“过渡效果”选择“圆形放射"，在“周期”框内输入持续的时间.(４）单击“确定"按钮即可.〈总结〉今天我们学习了六种动态网页效果的制作.其中,前三种是web组件的使用，利用“插入”菜单里的“ｗeb组件”子菜单。而第四和第五种“动态HＴＭＬ效果”,是使用“视图"/“工具栏”/“动态ＨTML效果".第六种设置网页过渡效果,是使用“格式"/“网页过渡".请同学们在上机操作是