教案5素材精品屋”之二.docVIP

网页基础 第 9 课时教案 月 日 第 周 星期 课 题 制作用表格布局的网页“素材精品屋”之二 课型 新授 教时 2节 教学目的 学习制作DHTML效果、缩略图技术、折叠式列表 教学重点 DHTML效果、缩略图技术 课 前 准 备 图片 准备 教学难点 理解制作折叠式列表 教学环节 教学过程 教师 活动 学生 活动 复 习 引 入 1、检查上节课中学生对“素材精品屋”之一应完成的任务。 2、请学生说出上节课制作中遇到的问题。 3、指出部分学生作品的缺陷并纠正。 检查 提问 回答 纠错 教学环节 教学过程 教师 活动 学生 活动 授 课 学习制作DHTML效果（此处制作交换图片效果）：将每个按钮的“UP”图片先插入单元格--选定图片--选“DHTML效果”中的“鼠标悬停”—交换图片—选择图片—选择“OVER”按钮图片。其他按钮依次制作动态效果。 **注意：此效果必须到真实浏览器中才显示。 二、水波背景及滚动字幕。 **此处必须将水波背景设为单元格背景图，才能在此背景前制作字幕。 **制作字幕用“插入—组件—字幕”。 用拷贝屏幕制作大缩略图： 拷贝屏幕技巧：选定显示对象（以小图方式浏览“大图片”中的所有图片）-按PRINTSCREEN键-打开“画笔”-编辑-粘贴-是-按工具栏上“五星”，再按“长方框选定区域”—框选所需区域-复制-新建-否-粘贴-是-保存文件为BMP或JPG类型—文件名为“SUOLUETU.JPG”。保存到IMAGES里。 注意：文件类型选择JPG是为了适应网页的需要，提高网页显示速度。 操作：在本设计中需要找到图片所在的文件夹，然后将这些图片用小图方式浏览，并拷贝屏幕，生成图片。 操作 演示 指导 学生 操作 应仔细理解制作指定的缩略图所需做的准备工作，即通过挤压发使图片排到位。 观察 记录 故意插入水波图片，验证图片上不可做字幕的注意点。 理解图片在看图软件中的排列方式 教学环节 教学过程 教师 活动 学生 活动 授 课 四、制作“可折叠式列表”，形式如下： 图片操作——插入图片 淡化图片 翻转图片 表格操作——插入表格 拆分表格 合并单元格 动态效果——横幅广告 悬停按钮 滚动字幕 制作方法： (1、将“符号1—星号.gif、符号2—心.GIF”2个GIF动画改为英文文件名放入IMAGES。 (2、输入父项和子项内容，删除所有的硬回车并改为软按回车，把它们都定义成列表，指定父项前的图片；再选定父项，或在父项中单击，然后右击选“列表属性”，在“启用可折叠大纲”、“开始时折叠”上复选；选取多个子项，按“增加缩进”按钮2次，右击多个子项选择“列表属性”，设定子项前的图片。 五、将网页右上的表格加上标题“本站附加内容”，颜色为深蓝。 六、在缩略图下方添加水平线，其属性为“高度4像素”、“颜色绿色”。 七、最后将“网站链接”下的表格的边框线设置为粗细为2的红色，去掉其它所有表格的边框线。 演示 制作 解释： 要注意所有步骤不能有1步出错，否则影响全局 实践 制作 对比效果图 总结 1、本实践主要学习DHTML效果、缩略图技术、折叠式列表等多个重要辅助技巧。 应根据需要定义折叠式列表的各参数。 总结 强调 理解 记忆 课后作业 抄写制作按钮、缩略图、折叠式列表的操作过程1遍。 教后札记 部分学生忽视老师提出的一些制作注意点，因此在折叠式列表等步骤多的操作中产生大的失误，影响了制作进度。 学生管理网站素材及利用素材的技巧较差，网站文件结构混乱，引用素材经常张冠李戴。 2