刘杰讲第四制作动态网页.docVIP

制作动态网页（初中信息技术八年级） 必修作业模版内容1．教学设计学科名称2．所在班级情况，学生特点分析3．教学内容分析4．教学目标5．教学难点分析6．教学课时7．教学过程8．课堂练习9．作业安排10． 附录（教学资料及资源）11． 自我问答 第八节 制作动态网页 ? 教学目的： ⒈学会在预定时间更换网页图片； ⒉掌握滚动字幕的制作； ⒊掌握插入交互式按钮； ⒋掌握使用放大镜效果； ⒌学会飞行图片效果； ⒍学会网页过渡的实现。 ? 重点难点： Web组件操作和动态HTML效果的制作。 ? 教学方法： 讲解、演示和学生上机操作 课时： ??? 3课时 教学步骤： 〈导入新课〉 同学们，我们已经学会了用FrontPage2003制作网页的一些基本的操作，通过美化网页使我们的网页更漂亮了。在网上我们看到很多网页上的元素都能动起来（那下面请同学们回答一下网页上有哪些动态的内容呢？请同学来回答，李朝阳同学说打开网页有字符飞快地出现了，刘丽丽同学说打开网页有图片跳动），那么我们是不是也想让我们的网页动起来呢？（同学们说想不想？想，很好，这就是我们这节课所要学习的内容） 下面我们就来学习动态网页的制作。 〈板书〉????????????????? 第八节 制作动态网页 我们看到，许多网站都有各种各样、丰富多彩的图片和文字等内容；而且这些网页上产的图片在一定的时间段内经常地更换，其实它的制作并不复杂。它们是通过插入“web组件”来实现的。现在我们来为我们的“环保”网站。 〈板书〉一、web组件 [演示] 打开huanbao网站中，在“century.htm”的框架页面，将两幅标题的图片轮流显示在页面上。 操作步骤： (1)?将光标定位于插入预定图片的位置，依次单击“插入” 菜单中的“web组件”，弹出 4-4-3如图所示“插入web组件”的对话框。 (2)在“插入web组件”的对话框中“组件类型”中选择“包含内容”，在“选择内容类型”中选择“预定图片”?。 (3)单击“完成”按钮，弹出如图4-4-4所示“预定图片属性”对话框?。 ??图4-4-4 (4) 在“预定图片属性”对话框中，通过“浏览”确定“在预定的时间内”显示的图片及“在预定的时间之前和之后”显示的图片?。 (5)?在“开始时间”和“结束时间”区，指定预定时间 (6)单击“确定”按钮。? 这样，我们的“在预定时间内更换网页图片”就做好了。 下面我们来创建滚动的文字字幕。 〈板书〉 二、制作滚动字幕 [演示] 在主页的标题图片下面插入滚动字幕，文本内容为“让地球更绿，让我们的家园更美好”。 操作步骤： ?（1）插入点定位到滚动字幕的位置，在“插入web组件” 菜单中的“web组件”对话框中的“组件类型”中选择“动态效果”，在“选择一种动态效果”中选择“字幕” （2）单击“完成”按钮，弹出“字幕属性”对话框，如图4-4-5所示。 （3）在“文本（T）：”栏中输入字幕内容。在“方向”区选择字幕移动方向，（我们在这里设置为“左”）在速度区：“延迟”用来设置字幕每次移动的时间间隔，该参数越大，字幕移动越慢；“数量”用来定义字幕每次移动的距离，该参数越大，字幕移动越快；我们使用默认值。在“表现方式”区选择“滚动条”可以让文字沿设置的方向，从字幕区域的一边出现，到另一边消失。（“幻灯片”可以让文字沿设置的方向，从字幕区域的一边出现，当文字到达字幕区域的另一边时停止滚动并保持在屏幕上。“交替（A）” 可以让文字在字幕区域来回移动。我们把“表现方式”设置为“滚动条”）。 在“大小”区域设置字幕的大小。在“背景色”区选择字幕的背景色，其余采用默认值。 （4），单击“确定”按钮。 我们切换到“预览”来看一下其效果。（用手指着课件或者模拟屏幕） 下面我们来学习交互式按钮的插入。 〈板书〉 三、插入交互式按钮 制作如图4-4-6所示按钮。 (1)把插入点定位于插入交互式按钮位置，在“插入web组件”对话框中的“组件类型”中选择“动态效果”，在“选择一种效果中”选择“交互式按钮”。 (2)单击“完成”按钮，弹出如图4-4-7所示“交互式按钮”对话框。在“按钮”选项卡上的“文本”栏输入按钮文字“环境保护”，按钮类型选择“浮雕标签1”，在“链接”栏指定链接网页文件名“hj-1.htm”。 (3)在“字体”选项卡中，设置按钮文字的字体为宋体，字形为常规，字号为20，初始字体为绿色，悬停时字体颜色为蓝色，单击时字体颜色为红色。 (4)在“图像”选项卡的宽度栏输入120，高度栏输入40，并选取“按钮为GIF图像并具有透明背景色”选项，单击“确定”按钮。 我们切换到“预览”来看一下其效果。（用手指着课件或者模拟屏幕） 下面我们来学习HTML动态效果。 〈板书〉四、动态HTML效果放大镜效果