《网页的美化》教学设计教材版本青岛版课题《网页的美化》学校龙子心中学授课教师杨斌课型新授课授课班级初二（1）班课时 1课程纲要依据本节课的定位在于“熟练掌握”的程度上，旨在让学生通过对《网页的美化》的学习，了解掌握美化网页的方法、步骤，熟练掌握美化网页的操作，提高审美意识，激发学生对网页制作进行更深入的学习和研究的兴趣。

教材分析结合本校学生和教学环境的特点，深入地领会由青岛出版社出版的初中《信息技术》（八年级）教材的编写意图，设计了制作“情感小屋”网站的主题活动，制作“情感小屋”网站。

学情分析初二学生已经学习了很多信息技术基础知识，并且具备了一定的操作计算机、上网搜索、编辑图象的能力。

通过前几周的学习，学生对网站制作有了初步的认识，并建立了站点，制作了首页，而且还通过表格归整了网页中的各元素，使网页趋于整洁。

但是，由于制作的网页中还未有设置背景、背景音乐、Flash动画、字幕等元素，还显得单调。

他们希望能够通过学习新的知识，进一步美化他们制作的网页。

教学目标①了解美化网页的常用方法，理解美化网页对提高网站质量的作用。

②学会在网页中设置背景、音乐、Flash动画和滚动字幕。

③提高审美意识，善于发现美，美化生活从自身做起。

教学重点在网页中设置背景、音乐、Flash动画和滚动字幕。

教学难点在网页中设置音乐、Flash动画。

教学方法讲授法、自主学习法、任务驱动法、实验探究法等教学资源计算机及多媒体网络教室系统、FrontPage2003软件等板书设计网页的美化一、美化网页的作用二、美化网页的方法三、美化网页的流程四、具体操作：1. 插入背景音乐2. 设置网的背景3. 设置表格的背景4. 插入Flash动画5. 插入滚动字幕时间（分）教学内容教师活动学生活动设计意图212 3 （课前2分钟预备）对比提问：（2分钟）观看图片：未精心布置的房间与布置后的房间、丑女与美女提问：你更喜欢哪一个？为什么？（更喜欢后者，因为后者更赏心悦目，“养眼”，美）观看网页：未经美化的网页与美化后的网页（index.htm , school.htm , Domain.htm , Neighbor.htm）提问：你更喜欢哪一个？（更喜欢后者，因为前者相对比较单调，浏览后者使人“耳目一新”）引入新课：（1分钟）我们这节课就来学习并自己动手操作一下如何从前者变成后者，如何使网页更加具有美感。

使网页更加漂亮的过程就是“网页的美化”。

讲授新课：（38分钟）网页的美化一、美化网页的作用通过刚才的比较，相信同学们已经对美化网页的作用有了一定的认识，现在我们再来看一些网站，加深了解。

展示一些比较优秀的网站。

（百度视频、新浪、网易、搜狐、秘密花园等）二、美化网页的方法一般都用哪些方法美化网页呢？⒈插入背景音乐听到自己喜欢的音乐，可以让我们消除疲劳，在网页上设置背景音乐，也可以让浏览者心旷神怡。

展示无背景音乐和有背景音乐的Index.htm网页。

⒉设置网页背景在制作网页时，为网页加上背景颜色或背景图片，可以让网页更加美观、生动活泼、更能衬托网页的主题。

展示无背景与有背景的Index.htm网页。

⒊设置表格的背景我们在设计网页的过程中有时也需要对网页中某一局部的背景颜色进行设置，以达到强化有关内容的效果。

对比无表格背景与有表格背景的Index.htm网页。

⒋插入Flash动画我们浏览网页时，会看到很多广告形式的动画。

在网站设计中，如果在我们自己的网页上也能插入几个Flash动画，肯定会使网页增色不少。

对比无Flash与有Flash动画的Index.htm网页。

5. 插入滚动字幕在网页设计中，我们也会采取各种方式让文字或图片动起来，以吸引浏览组织展示提问导入新课板书讲授展示讲解展示讲解展示讲解展示讲解展示讲解展示讲解就坐安静观看思考回答听讲观察思考记忆观看记忆观看记忆观看记忆观看记忆观看记忆观看记忆组织课堂设置情景引起学生兴趣为引入新课做铺垫引出新课内容白板文字显示教学整体结构演示直观体验演示直观体验演示直观体验演示直观体验演示直观体验演示直观体验间（分）教学内容师活动生活动计意图3 83 13 6 者的注意力。

为了让一些纯文本的内容（如标题）更醒目，一般通过改变字体、字号、颜色或产生动态效果的方法来实现。

其中效果最好的当属在网页中使用滚动字幕。

展示无滚动字幕与有滚动字幕的index网页。

三、美化网页的流程⒈确定主题（基调）思考：网站“情感小屋”的基调，是凝重的，还是轻松的？⒉搜集素材（音乐、图片、Flash动画）⒊加工素材（剪裁音乐，修改图片、动画，制作图形、动画）⒋选择美化网页工具——FrontPage2003软件⒌美化网页（插入所需元素）四、美化网页将全班分成两组，一组同学完成任务一，二组同学完成任务二。

任务一：设置网页背景、表格背景自主学习：浏览教学网站——（1）设置网页背景；（2）设置表格背景。

设置D:\情感小屋\School.htm的网页背景为D:\素材\背景9.jpg，表格背景设置为颜色RGB(cc,99,ff)。

并保存，预览。

完成了任务一的同学完成任务二。

任务二：设置单元格背景、设置背景音乐自主学习：浏览教学网站——（1）设置表格背景；（2）插入背景音乐。

设置D:\情感小屋\Neighbor.htm的单元格背景如图所示，背景音乐为D:\素材\友谊地久天长.mid。

并保存，预览。

完成了任务二的同学完成任务一。

学生演示操作：任务一或任务二。

总结：提醒同学们在操作时要注意：1. 先打开要编辑的网页；2. 设置表格背景必须确保光标在该表格中；3. 设置单元格背景必须确保光标在该单元格中；4. 看清是编辑状态还是预览状态；5. 保存时注意图片、音乐的存放位置。

（挑选该班学生易出错的方面提醒）让学生再整改。

任务三：添加滚动字幕、Flash动画、设置单元格背景自主学习：浏览教学网站——（1）设置表格的背景；（2）插入滚动字幕；（3）插入Flash动画。

为D:\情感小屋\Domain.htm添加滚动字幕“海内存知已，天涯若比邻”；插入Flash动画D:\素材\月亮之上.swf；设置纯文字单元格的背景色如下图所示。

播放讲解布置任务巡视指导组织演示总结提醒布置任务巡视指导思考互动回答接受任务学习动手操作演示操作整改网页接受任务学习动手操作了解美化网页的流程培养自主学习能力培养表达能力培养反思意识培养自主学习能力间（分）教学内容师活动生活动计意图3 161 1学生演示操作：任务三。

总结：提醒同学们在操作时要注意：1. 准备素材时要分文件夹放置（imamges , sound , swf）；2. Flash影片属性的“透明”属性；3. 字幕的表现方式、连续次数。

拓展探究：根据我们所学到的知识，看看能否将主页中的Banner加动画效果，结果如下图。

素材：（１）D:\素材\rain.swf；（２）D:\素材\banner3.png。

（注意空中雨滴，水上波纹 rain.swf动画）提示：可以浏览学习网站——拓展探究五、改名，复制：将“D:\情感小屋”文件夹改名为“情感小屋—网页的美化”，并将该文件夹复制到自己的网盘中。

（因为学生机都安装了还原卡，所以必须保存在网盘中，以后才可以继续制作。

）总结归纳：（1分钟）网页的美化一、美化网页的作用二、美化网页的方法三、美化网页的流程四、具体操作：1. 插入背景音乐组织演示总结提醒提出问题布置任务播放总结归纳演示操作接受任务学习动手操作讨论探究改名复制观看回忆听讲梳理听讲培养表达能力探究学习巩固记忆探究学习复制到自己网盘中以备以后继续制作对知识点进行梳理间（分）教学内容师活动生活动计意图12. 设置网的背景3. 设置表格的背景4. 插入Flash动画5. 插入滚动字幕课后作业：（1分钟）美化“情感小屋”其他网页的Banner及导般栏，如index.htm中样式。

布置作业记录继续完成主题教后反思1.设计理念：使用任务驱动法，让学生完成任务。

分组合作探究法，让学生分组操作，并演示。

2.教学亮点：引导学生用教学网站自学，并分组合作探究。

培养学生自学及合作能力。

3.待改进地方：本课内容较多，学生学习时稍嫌紧张，可以设计为两课。

拓展探究中的Banner3.png文件，可以试学生自己通过Banner1.jpg修改做出来。