刘杰给老师的讲课稿

1、制作动态网页制作动态网页（初中信息技术八年级模块四第四节）信息技术教案内容： 1 1教学设计学科名称 2 2所在班级情况，学生特点分析 3 3教学内容分析 4 4教学目标 5 5教学难点分析 6 6教学课时 7 7教学过程 8 8课堂练习 9 9作业安排1010 附录（教学资料及资源）1111 自我问答第四节教学目的：1学会在预定时间更换网页图片;2掌握滚动字幕的制作；3.学会插入交互式按钮；4.学会使用放大镜效果；5学会飞行图片效果；6掌握网页过渡效果的实现。重点难点：WebWeb组件操作和动态 HTMLHTML效果的制作。教学方法：讲解、演示和学生上机操作课时:3 3课时教学步骤：导入新课

2、同学们，我们已经学会了用FrontPage2003FrontPage2003制作网页的一些基本的操作，通过美化网页使我们的网页更漂亮了。 在网上我们看到很多网页上的元素都能动起来，那么我们是不是也想让我们的网页动起来呢？下面我们就来学习动态网页的制作。板书第四节制作动态网页我们看到，许多网站都有各种各样、丰富多彩的图片和文字等内容；而且这些网页上 产的图片在一定的时间段内经常地更换，其实它的制作并不复杂。它们是通过插入“webweb组件”来实现的。现在我们来为我们的“环保”网站设置更换网页图片。板书一、在预定时间里更换网页图片演示打开huanbaohuanbao网站中，然后打开一个名为“ ji

3、ayuanjiayuan .htm.htm ”的框架页面，将两幅标题的 图片轮流显示在页面上。图4-4-14-4-1在预定时间内出现的画面图 4-4-24-4-2操作步骤：(1)(1)将光标定位于插入预定图片的位置,4-4-34-4-3如图所示插入 webweb组件”的对话框。单击“插入” 菜单中的“ webweb组件”，弹出图 4-4-34-4-3(2)(2)在“插入webweb组件”的对话框中“组件类型”中选择“包含内容”，在“选择内容 类型”中选择“预定图片”。在限定日期前后出现的画面图 4-4-44-4-4(4)(4)在“预定图片属性”对话框中，通过“浏览”确定“在预定的时间内”显示的

4、图片及“在预定的时间之前和之后”显示的图片。(5)(5)在“开始时间”和“结束时间”区，指定预定时间(6)(6) 单击“确定”按钮。这样，我们的“在预定时间内更换网页图片”就做好了。下面我们来创建滚动的文字字幕。板书 二、制作滚动字幕演示在主页的标题图片下面插入滚动字幕，文本内容为“欢迎来到我们的网站，共同努力 让我们的地球更绿，让我们的家园更美好！ ”。操作步骤:(1(1 )插入点定位于滚动字幕的位置，在“插入”菜单中选“webweb组件”对话框的“插入webweb组件”对话框中的“组件类型”中选择“动态效果”，在“选择一种动态效果”中选择 “字幕”。4-4-54-4-5所示。(2)单击“完

5、成”按钮，弹出“字幕属性”对话框，如图图 4-4-54-4-5(3)在“文本”栏中输入字幕内容。在“方向”区选择字幕移动方向，(我们在这里设置为“左”)在速度区：“延迟”用来设置字幕每次移动的时间间隔，该参数越大，字幕移动越慢；“数量”用来定义字幕每次移动的距离，该参数越大，字幕移动越快；我们使用默认值。在“表现方式”区选择“滚动条”可以让文字沿设置的方向，从字幕区域的一边出现，到另一边消失。(“幻灯片”可以让文字沿设置的方向，从字幕区域的一边出现，当文字至U U达字幕区域的另一边时停止滚动并保持在屏幕上。 动。我们把“表现方式”设置为“滚动条”)。 景色”区选择字幕的背景色，其余采用默认值。

6、(4)单击“确定”按钮。我们切换到“预览”来看一下其效果。下面我们来学习交互式按钮的插入。板书 三、插入交互式按钮“交替”可以让文字在字幕区域来回移在“大小”区域设置字幕的大小。在“背环境臧制作如图4-4-64-4-6所示按钮。图4-4-64-4-6交互式按钮(1(1 )把插入点定位于插入交互式按钮位置，在“插入webweb组件”对话框的“组件类型” 中选择“动态效果”，在“选择一种效果中”选择“交互式按钮”。(2)单击“完成”按钮，弹出如图4-4-74-4-7所示“交互式按钮”对话框。图 4-4-74-4-7(3)在“按钮”选项卡上的“文本”栏输入按钮文字“环境保护”，按钮类型选择“浮雕标签

7、1 1 ”，在“链接”栏指定链接网页文件名“hj-1.htmhj-1.htm ”。(4) 在“字体”选项卡中，设置按钮文字的字体为宋体，字形为常规，字号为2020，初 始字体为绿色，悬停时字体颜色为蓝色，单击时字体颜色为红色。(5) 在“图像”选项卡的宽度栏输入120120，高度栏输入4040，并选取“按钮为 GIFGIF图像并 具有透明背景色”选项，单击“确定”按钮。我们切换到“预览”来看一下其效果。下面我们来学习HTMLHTML动态效果。板书四、动态 HTMLHTML效果-放大镜效果动态HTMHTM( DHTMLDHTML又称动态超文本标识语言，它是MicrosoftMicrosoft 公

8、司对HTML4.0HTML4.0的增强，使用它可以在网页中产生动画效果，即设置一个触发事件。FronFron tPagetPage 20032003中的触发事件有单击、双击、鼠标悬停、网页加载等。用户可以根据自己的需要设置相应的动画效果。我们在jiayuan.htmjiayuan.htm网页的下框中输入有关地球日的资料，将其定义为在网页加载时“ 从右下部” “飞入”页面的动态效果。演示操作步骤:(1)将鼠标定位于要添加放大镜效果的段落，选定上述文字，然后单击“视图”菜单 中的“工具栏”，选中“ DHTMDHTM效果”，弹出“ DHTMLDHTML效果”工具栏。(2)在“动态HTMLHTML效果

9、”工具栏中选择“鼠标悬停”，应用为“格式”，选择设置区为“选择字体”，弹出如图4-4-84-4-8所示“字体”对话框。图 4-4-84-4-8(3)在对话框中选择放大后的字体、字号和颜色等，单击“确定”按钮。接下来我们来学习“动态HTMIHTMI效果”中飞行图片效果的制作。板书五、动态HTMLHTML效果-飞行图片效果操作步骤：(1)(1)选定要添加飞行效果的图片，然后单击“视图”菜单中的“工具栏”，选中DHTMLDHTML效果”，弹出“ DHTMIDHTMI效果”工具栏。图 4-4-94-4-9在网页中添加了动态 HTMLHTML效果后，会出现淡蓝色背景方框。如取消HTMLHTML效果，可选

10、定 段落和图片，单击“ DHTMLDHTML效果”工具栏上的“删除效果”按钮。最后，我们来共同学习设置网页过渡效果板书 六、设置网页过渡效果什么是网页过渡呢？在网页中加入超链接，可方便地从一个网页切换到另一个网页。 为加强视觉的效果，使整个浏览过程变得更加美妙，可通过设置动态的网页过渡来实现。演示操作步骤：（1 1）. .打开要设置过渡效果的网页。（2 2） . .单击“格式” 菜单中的“网页过渡”，弹出如图4-4-104-4-10所示“网页过渡”对话 框。图 4-4-104-4-10（3 3）. .在对话框“事件”选择框中选择“进入网页”，“过渡效果”选择“圆形放射”， 在“周期”框内输入持续的时间。（4 4）单击“确定”按钮即可。总结今天我们学习了六种动态网页效果的制作。其中，前三种是 webweb 组件的使用，利用“插 入”菜单里的“ webweb组件”子菜单。而第四和第五种“动态HTMLHTML效果”，是使用“视图” /“工具栏” / “动态HTMLHTML效果”。第六种设置网页过渡效果，是使用“格式”/ / “网页过渡”。请同学们在