《网页的美化》教案.pdf

《《网页的美化》教案.pdf》由会员分享，可在线阅读，更多相关《《网页的美化》教案.pdf（5页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、网页的美化教学设计教学设计教材版本课题学校课型课程纲要依据教材分析青岛版网页的美化龙子心中学新授课授课班级初二（1）班授课教师课时杨斌1本节课的定位在于“熟练掌握”的程度上，旨在让学生通过对网页的美化的学习，了解掌握美化网页的方法、步骤，熟练掌握美化网页的操作，提高审美意识，激发学生对网页制作进行更深入的学习和研究的兴趣。结合本校学生和教学环境的特点，深入地领会由青岛出版社出版的初中 信息技术（八年级）教材的编写意图，设计了制作“情感小屋”网站的主题活动，制作“情感小屋”网站。初二学生已经学习了很多信息技术基础知识，并且具备了一定的操作计算机、上网搜索、编辑图象的能力。通过前几周的学习，学生对

2、网站制作有了初步的认识，并建立了站点，制作了首页，而且还通过表格归整了网页中的各元素，使网页趋于整洁。但是，由于制作的网页中还未有设置背景、背景音乐、Flash 动画、字幕等元素，还显得单调。他们希望能够通过学习新的知识，进一步美化他们制作的网页。了解美化网页的常用方法，理解美化网页对提高网站质量的作用。学会在网页中设置背景、音乐、Flash 动画和滚动字幕。提高审美意识，善于发现美，美化生活从自身做起。在网页中设置背景、音乐、Flash 动画和滚动字幕。在网页中设置音乐、Flash 动画。讲授法、自主学习法、任务驱动法、实验探究法等计算机及多媒体网络教室系统、FrontPage2003 软件

3、等学情分析教 学目 标教学重点教学难点教学方法教学资源网页的美化一、美化网页的作用二、美化网页的方法三、美化网页的流程四、具体操作：1.插入背景音乐2.设置网的背景3.设置表格的背景4.插入 Flash 动画5.插入滚动字幕板书设计-1-时间（分）（课前 2 分钟预备）教 学 内 容对比提问：（2 分钟）观看图片：未精心布置的房间与布置后的房间、丑女与美女教师活动组织展示提问导入新课板书讲授展示讲解展示讲解展示讲解展示讲解展示讲解展示讲解学生活动就坐安静观看思考回答听讲观察思考记忆观看记忆观看记忆观看记忆观看记忆观看记忆观看记忆设计意图组织课堂设置情景引起学生兴趣为引入新课做铺垫引出新课内容白

4、板文字显示教学整体结构演示直观体验演示直观体验演示直观体验演示直观体验演示直观体验演示直观体验2123提问：你更喜欢哪一个？为什么？（更喜欢后者，因为后者更赏心悦目，“养眼”，美）观看网页：未经美化的网页与美化后的网页（index.htm,school.htm,Domain.htm,Neighbor.htm）提问：你更喜欢哪一个？（更喜欢后者，因为前者相对比较单调，浏览后者使人“耳目一新”）引入新课：（1 分钟）我们这节课就来学习并自己动手操作一下如何从前者变成后者，如何使网页更加具有美感。使网页更加漂亮的过程就是“网页的美化”。讲授新课：（38 分钟）网页的美化一、美化网页的作用通过刚才的比

5、较，相信同学们已经对美化网页的作用有了一定的认识，现在我们再来看一些网站，加深了解。展示一些比较优秀的网站。（百度视频、新浪、网易、搜狐、秘密花园等）二、美化网页的方法一般都用哪些方法美化网页呢？插入背景音乐听到自己喜欢的音乐，可以让我们消除疲劳，在网页上设置背景音乐，也可以让浏览者心旷神怡。展示无背景音乐和有背景音乐的Index.htm 网页。设置网页背景在制作网页时，为网页加上背景颜色或背景图片，可以让网页更加美观、生动活泼、更能衬托网页的主题。展示无背景与有背景的 Index.htm 网页。设置表格的背景我们在设计网页的过程中有时也需要对网页中某一局部的背景颜色进行设置，以达到强化有关内

6、容的效果。对比无表格背景与有表格背景的Index.htm 网页。插入 Flash 动画我们浏览网页时，会看到很多广告形式的动画。在网站设计中，如果在我们自己的网页上也能插入几个Flash 动画，肯定会使网页增色不少。对比无 Flash 与有 Flash 动画的 Index.htm 网页。5.插入滚动字幕在网页设计中，我们也会采取各种方式让文字或图片动起来，以吸引浏览者的注意力。为了让一些纯文本的内容（如标题）更醒目，一般通过改变字体、字号、颜色或产生动态效果的方法来实现。其中效果最好的当属在网页中使用-2-时间（分）教 学 内 容滚动字幕。展示无滚动字幕与有滚动字幕的index 网页。教师活动

7、播放讲解布置任务巡视指导组织演示总结提醒布置任务巡视指导学生活动思考互动回答接受任务学习动手操作演示操作整改网页接受任务学习动手操作设计意图了解美化网页的流程培养自主学习能力培养表达能力培养反思意识培养自主学习能力3三、美化网页的流程 确定主题（基调）思考：网站“情感小屋”的基调，是凝重的，还是轻松的？搜集素材（音乐、图片、Flash 动画）加工素材（剪裁音乐，修改图片、动画，制作图形、动画）选择美化网页工具FrontPage2003软件 美化网页（插入所需元素）四、美化网页将全班分成两组，一组同学完成任务一，二组同学完成任务二。任务一：设置网页背景、表格背景任务一：设置网页背景、表格背景自主

8、学习：自主学习：浏览教学网站（1）设置网页背景；（2）设置表格背景。设置 D:情感小屋School.htm 的网页背景为 D:素材背景 9.jpg，表格背景设置为颜色 RGB(cc,99,ff)。并保存，预览。完成了任务一的同学完成任务二。任务二：设置单元格背景、设置背景音乐任务二：设置单元格背景、设置背景音乐自主学习：自主学习：浏览教学网站（1）设置表格背景；（2）插入背景音乐。设置 D:情感小屋Neighbor.htm 的单元格背景如图所示，背景音乐为 D:素材友谊地久天长.mid。并保存，预览。完成了任务二的同学完成任务一。学生演示操作：学生演示操作：任务一或任务二。总结：总结：提醒同学

9、们在操作时要注意：1.先打开要编辑的网页；2.设置表格背景必须确保光标在该表格中；3.设置单元格背景必须确保光标在该单元格中；4.看清是编辑状态还是预览状态；5.保存时注意图片、音乐的存放位置。（挑选该班学生易出错的方面提醒）让学生再整改。任务三：添加滚动字幕、任务三：添加滚动字幕、FlashFlash 动画、设置单元格背景动画、设置单元格背景自主学习：自主学习：浏览教学网站（1）设置表格的背景；（2）插入滚动字幕；（3）插入 Flash 动画。为 D:情感小屋Domain.htm 添加滚动字幕“海内存知已，天涯若比邻”；插入 Flash 动画 D:素材月亮之上.swf；设置纯文字单元格的背景

10、色如下图所示。83136-3-时间（分）教 学 内 容教师活动组织演示总结提醒提出问题布置任务播放总结归纳学生活动演示操作接受任务学习动手操作讨论探究改名复制观看回忆听讲梳理听讲记录设计意图培养表达能力探究学习巩固记忆探究学习复制到自己网盘中以备以后继续制作对知识点进行梳理3学生演示操作：学生演示操作：任务三。总结：总结：提醒同学们在操作时要注意：1.准备素材时要分文件夹放置（imamges,sound,swf）；2.Flash 影片属性的“透明”属性；3.字幕的表现方式、连续次数。拓展探究：拓展探究：根据我们所学到的知识，看看能否将主页中的 Banner 加动画效果，结果如下图。素材：（）D

11、:素材rain.swf；（）D:素材banner3.png。1611（注意空中雨滴，水上波纹rain.swf 动画）提示：可以浏览学习网站拓展探究五、改名，复制：将“D:情感小屋”文件夹改名为“情感小屋网页的美化”，并将该文件夹复制到自己的网盘中。（因为学生机都安装了还原卡，所以必须保存在网盘中，以后才可以继续制作。）总结归纳：（1 分钟）网页的美化一、美化网页的作用二、美化网页的方法三、美化网页的流程四、具体操作：1.插入背景音乐-4-时间（分）教 学 内 容教师活动布置作业学生活动设计意图继续完成主题2.设置网的背景3.设置表格的背景4.插入 Flash 动画5.插入滚动字幕1课后作业：（

12、1 分钟）美化“情感小屋”其他网页的 Banner 及导般栏，如 index.htm 中样式。1.1.设计理念：设计理念：使用任务驱动法，让学生完成任务。使用任务驱动法，让学生完成任务。分组合作探究法，让学生分组操作，并演示。分组合作探究法，让学生分组操作，并演示。2.2.教学亮点：教学亮点：引导学生用教学网站自学，并分组合作探究。培养学生自学及合作能力。引导学生用教学网站自学，并分组合作探究。培养学生自学及合作能力。教后反思3.3.待改进地方：待改进地方：本课内容较多，学生学习时稍嫌紧张，可以设计为两课。拓展探究中的Banner3.png 文件，可以试学生自己通过Banner1.jpg 修改做出来。-5-