使用背景图片和音乐美化网页》教学设计

第一篇：使用背景图片和音乐美化网页》教学设计

使用背景图片和音乐美化网页》教学设

计

#TRS_AUToADD_1250564593313{mARGIN-ToP:0px;mARGIN-BoTTom:0px}#TRS_AUToADD_1250564593313P{mARGIN-ToP:0px;mARGIN-BoTTom:0px}#TRS_AUToADD_1250564593313TD{mARGIN-ToP:0px;mARGIN-BoTTom:0px}#TRS_AUToADD_1250564593313DIV{mARGIN-ToP:0px;mARGIN-BoTTom:0px}#TRS_AUToADD_1250564593313LI{mARGIN-ToP:0px;mARGIN-BoTTom:0px}/**---jSoN--{“":{”margin-top“:”0“,”margin-bottom“:”0“},”p“:{”margin-top“:”0“,”margin-bottom“:”0“},”td“:{”margin-top“:”0“,”margin-bottom“:”0“},”div“:{”margin-top“:”0“,”margin-bottom“:”0“},”li“:{”margin-top“:”0“,”margin-bottom“:”0“}}--**/DIV.myFav_1249633762080P.msoNormal{TEXT-jUSTIFy:inter-ideograph;FoNT-SIZE:10.5pt;mARGIN:0cm0cm0pt;FoNT-FAmILy:”TimesNewRoman“;TEXT-ALIGN:justify}DIV.myFav_1249633762080LI.msoNormal{TEXT-jUSTIFy:inter-ideograph;FoNT-SIZE:10.5pt;mARGIN:0cm0cm0pt;FoNT-FAmILy:”TimesNewRoman“;TEXT-ALIGN:justify}DIV.myFav_1249633762080DIV.msoNormal{TEXT-jUSTIFy:inter-ideograph;FoNT-SIZE:10.5pt;mARGIN:0cm0cm0pt;FoNT-FAmILy:”TimesNewRoman";TEXT-ALIGN:justify}DIV.myFav_1249633762080DIV.Section1{page:Section1}DIV.myFav_1249633762080oL{mARGIN-BoTTom:0cm}DIV.myFav_1249633762080UL{mARGIN-BoTTom:0cm} 【教材使用】宁教厅审定

山东教育出版社出版

软件FrontPageXX

【适用年级】8年级

【适用单元】网页制作第3大节

【教材分析】

教材中本节的内容分为三部分：一是使用导航栏和共享边框；二是添加网页背景与上节的背景音乐一块学习；三是添加网页水平线和滚动字幕。我将知识重新规划：先引导学生从已知入手，学习第二、三部分的知识，在学习第一部分知识时，由于学生对相关知识了解不多，是本节的难点，放在后面讲解。

本节是第二部分为网页添加背景图片和音乐。背景图片在上节插入图片的知识上过渡到背景图片，其中可以引导学生使用颜色、图片和主题三种不同方式改变网页的背景，可以扩展背景设置时的不同方法。有了背景图片还可以加入背景音乐，这都属于同一类的知识，可以放在一起让学生鉴别学习。

【学情分析】

学生在上节课已经学会了插入图片的方法，在学习文字处理软件时也学习到了相关知识，借助这个已知来学习本节课的内容应该比较容易些，因此本节课知识学生可以自主学习。

【教学目标】

1．知识目标

（1）掌握为网页中添加背景的不同方法。

（2）掌握为网页中添加背景音乐的方法。

2．技能目标

通过学生自主学习过程中，掌握为网页中添加背景音乐和不同背景的方法。

3．情感目标

通过为网页添加背景及音乐的学习，培养学生综合运用知识的能力和审美能力。

【教学重点与难点】

为网页中添加背景图片。

【课时安排】1课时

【教学方法】任务驱动法

【课前准备】软件FrontPageXX

多媒体广播系统

【教学设计】

第一课时

为网页添加文字信息

教学过程 教师活动 学生活动 教学意图

一、导入部分

上节课我们学习了给网页中添加文字和图片来丰富网站的内容。但是在我们浏览网页时发现网页中含有背景图片和背景音乐等等。这节课我们就来学习美化网页的一些方法。

（板书课题：美化网页）

学生观察后回答：修饰后的网页含有背景音乐和图片。

直接说出学生在浏览网页时的发现，引出本节课题。

二、新课部分

1．添加背景：

2．使用主题：

3．添加背景音乐：

在学习文字处理软件word时，我们学习了使用背景颜色来调整“纸张”的颜色，同样在FrontPage中也有此功能，可以给你的网页使用背景颜色。

（任务一：）大家结合课本的“做一做”，试着给你的网页变换背景颜色或使用图片作背景。

（板书：

一、添加背景）

教师辅导„„

（让学生上来广播展示„„）网页中添加背景图片和颜色。

同时教师指导学生阅读课本“金钥匙”和“小博士”。

（任务二：）大家结合课本中的“金钥匙”，将插入的图片去除底色。

（教师小结并操作展示：）1．网页中可以使用图片做背景，但图片一定要与插图以及文字的颜色相协调，才能达到美观的效果，如果色差太大时会使用你的网页失去美感。

2．方法：第一种方法是“格式”──“背景”；第二种方法是在网页的空白处单击鼠标的右键快捷菜单──“网页属性”命令。

（教师引导：）大家在给网页添加不同背景时，有的同学可能想了，网站中的网页如果是上千张时，每张都使用背景太麻烦了，能不能将所有的网页都使用一个背景并后一步到位解决呢？这样是可以的，使用主题就可以解决。

（任务三：）大家使用“格式”──“主题”变换你的网页背景。

（板书：

二、使用主题）

教师辅导„„

（提醒学生：图片与主题做背景时，它们之间的切换必须先将主题背景去掉才能设置图片背景）

（教师引导：）在我们搜索网页时，有时将网页打开后还伴随着音乐，大家浏览网页时心情也比较舒畅。

（板书：

三、背景音乐）

（任务四：）大家结合课本P72完成网页的背景音乐的设置。

教师进行辅导„„

（教师小结：）1．背景音乐与背景图片都使用同一个对话框“网页属性”。

2．背景音乐的格式是有所选择的，同时播放音乐的次数是可以控制的。

学生结合课本实践„„

学生展示„„

学生实践„„

学生实践„„

学生实践„„

从学生已有知识类比过渡到新知。

让学生先进行自学，尝试不同方法。

引导学生学习书本的知识。

引导学生学会欣赏美的网页，同时总结多种方法。

拓展学生知识视野

教会学生总结知识和方法，同时引导学生阅读课本P73“小博士”和“金钥匙”。

三、小结

通过这节课的学习，大家都学会了什么？ 学生自己总结„„

学生对自己所学知识进行汇总。

【教学反思】

调整知识：将第2节课的“背景音乐”和第3节中的“背景图片”调整在一起形成一节“网页背景”课。

本节课的知识是将两节课的内容归类总结形成一节关于“网页背景”的内容。学生通过这节课的内容学会比较和归纳知识方法以及总结归纳知识的能力，同时培养学生审美意识和知识综合运用能力。

第二篇：]《网页的美化》教学设计

网页的美化

教学内容及设计理念分析：

《网页的美化》是《初中信息技术》八年级上册第1单元第4课的重要内容，本节课主要引导学生学习了解美化网页的常用的方法。“画面的丰富性和多样性，能给学生以有力的视觉冲击”，因此，设计本课时，我通过两种画面的对比，激发学生兴趣，并通过分解任务，让学生在设置背景、音乐、Flash动画和滚动字幕等方面，获得美化网页的基本知识和技能，体验学习的快乐。【学习目标】

1、知识目标：

掌握美化网页的常用方法，理解美化网页对提高网站质量的作用。

2、技能目标：

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

3、情感、态度和价值观目标：

善于发现美，提高审美意识，从自身做起美化生活。【课时安排】 建议1课时 【重难点】

重点：在网页中设置背景、音乐、Flash动画和滚动字幕。难点：在网页中设置音乐、Flash动画。【教学准备】

自制课件、教学软件

教学过程：

一、创设情境，激趣导入

师：（出示两张网页，一张很单调，另外一张是经过美化的网页。）同学们，这是两张不一样的网页，你们认为哪一张好看？注意要说说自己的理由。

学生观察网页，然后发表见解。

生一：第二张好，因为简明扼要，效果直观。

师：（及时评价）这个学生很有审美观点，说出了自己的看法。

生二：第二张好看，因为色彩好，有音乐，有动画„„ 生三：„„ 生四：„„ 师：大家想学习美化网页的方法吗？

生：（学生的兴趣被调动起来，课堂教学就成功了一半。）想。

师：今天我们就来学习一些美化网页的方法，主要有在网页中设置背景、音乐、Flash动画和滚动字幕等。

设计意图：好的开始等于成功了一半。这一部分主要通过创设美感情境，提高学生审美意识，激发学生美化网页的热情。

二、自主探究，交流分享

（一）自主探究：

1、明确探究任务：（1）认识网页美化的优点。（2）自主探究，掌握一定的方法。

2、教师引导，让学生认识网页的美化的优点。

师：首先，我们来看一下本节课的小标题，都对网页进行了哪些美化？ 生：快速浏览，并说出内容：

设置网页的背景，设置表格的背景，插入背景音乐，插入Flash动画，插入滚动字幕等。

师：那么，我们就亲自来探究一番吧。

3、学生根据不同的喜好，分小组进行研究。（自主探究）

（1）同学们，你们想对网页的哪一块进行美化呢？（给定不同的任务）任务一：设置网页背景

任务二：设置表格的背景 任务三：插入背景音乐 任务四：插入Flash动画 任务五：制作滚动字幕

（2）生找到自己喜欢的操作并进行小组探究学习。

设计意图：让学生在明确学习目标和学习任务后，进行自主学习。在整个学习过程中充分发挥学生的主动性，培养学生独立分析、解决问题的能力，使学生能够循序渐进地学习信息技术的知识和技能。

师：如果在研究的过程中我们遇到了困难，应怎样解决呢？ 生：靠老师，更靠自己。

4、小组内部交流疑难问题。和其他同学商量、看课本、查资料。

5、老师穿插其中，给学生适时个别指导。

设计意图：让学生明确学习目标和学习任务后，对自己喜欢探索的内容进行有选择性地自主学习。充分发挥学生的主动性，培养学生独立分析、解决问题的能力。

（二）交流分享：

1、小组内交流汇报，推选代表发言。

师：我看同学们通过自己的探究，已经小有收获了。下面，各小组成员就把自己的收获和小组内的同学交流交流，然后每个小组推选一名代表来发言，说说你们小组共同努力的结果。咱们看看哪个小组的同学收获的最多，汇报的最精彩。好，开始。

生：内部交流，推选代表发言。

师穿插在小组当中，了解交流汇报的情况，为下一步的合作交流奠定基础。

设计意图：学生以小组为单位，自主交流，并推选代表发言，以期养成良好的学习习惯。

2、各小组代表在班级内汇报研究结果。

师：同学们讨论的这么热烈，看来收获还真的是不少。下面，我们各小组派代表来汇报研究成果，注意尽量地边操作，边说说小组的研究成果。

3、在交流分享过程中，老师穿插在小组中，并进行适当调控、点评、指导。

4、在此基础上，鼓励学生进行设置网页背景和设置表格背景的方法尝试。设计意图：学生将自主探究的结果进行分享交流，使得学生的思维进行充分的激活，获得解决问题的最佳途径，并使学生在独立探索过程中不断获得成就感。

三、合作学习，释疑解难

师：刚才，我们分别听取了四个学习小组的汇报，我发现同学们的收获还真不少。对于网页美化知识，哪些同学还有不是很明白的地方，可以提出来，我们大家一起来共同探讨一下？

1、学生提出疑难问题，如插入背景音乐、插入Flash动画、制作滚动字幕等。

2、学生互帮互助，解决一些疑难问题。

3、教师集中讲解比较有共性的问题。（包括实践和理论的问题。）设计意图：将学生在自主探究中出现的没有解决的重难点问题，再次交给学生，通过小组内分析讨论，找出方法，使问题得以解决，达到开阔学生思路、进一步理解知识的目的，并使学生的团结协作能力得到培养。最终学生有解决不了的问题，老师可以有针对性的进行点拨提示。

四、实践创作，展示评价

师：大家都没有问题了，看来同学们对刚才所研究的内容已经掌握的不错了，根据刚才我们研究的内容，运用今天所学的知识，完成课本28页实践与创新，过一会儿，我们一起来展示展示，看谁美化的最好、做的又快？

生：实践创作。

师：发现有新意的作品，予以展示。师生：根据自己的观点来进行评价。生：吸收同学们的建议进行二度创作。

在此基础上，每个小组评选出优秀作品，最优秀者颁发“最佳美工奖”。师：这节课，我们每个小组都制作出了非常棒的作品，相信以后的练习，大家的作品会更优秀的。

设计意图：采用多种形式对学生的作品进行展示、交流、评价，增强学生的自信心和自我成就感，同时达到交流思想、取长补短的目的。

五、梳理总结，拓展延伸

生：回顾本节课内容。

师：根据生回顾情况，再由教师作适当补充。

师：这一节课我们学习了网页的美化，还创作出了许多优秀的作品，希望同学们能将今天所学的内容运用到我们的实际生活当中去，由美化你的网页进而美化自己的生活，如卧室的布局、客厅的装饰等等。

师：提出的拓展问题。在因特网上，有许多的好看的gif动画，如何把它插入到我们的网页上呢？

生：利用余下的时间或课下查阅完成。

设计意图：通过对本节课所感兴趣内容的梳理、总结，并在此基础上进行拓展延伸，培养学生动手实践能力和创新能力。

第三篇：第八课《美化网页》教学设计

第八课《美化网页》教学设计

【教学目标】：

1.知识与技能：能在网页中插入图片，设置图片属性，对图片进行简单编辑； 能通过网页属性设置网页的背景。

2.过程与方法：通过自主探究，小组合作，培养学生的动手实践能力和合作交流能力。

3.情感态度价值观：通过网页制作，培养学生对美的感受及创造美的能力，提高自身的艺术修养。【教学重点、难点】： 1.插入图片，设置图片属性，对图片进行简单编辑.2.了解网页的整体风格、能有意识地将图片放在“images”文件夹下

【教学具准备】：多媒体课件、广播教学系统

【课时安排】：1课时

【教学过程】：

一、导入

师：最近，海西教育网在招聘微博小编辑，同学们想不想去试一试呢？要成为小编辑可不是一件简单的事，它必须要下苦工，要知道优秀的网站应该具备的条件。让我们先来看一下下面几个网站实例。

展示三坊七巷、海西教育网站实例，引导学生四人一组进行观察，交流，提出引导性的问题：优秀的网站应该具备哪些条件呢？

请个别小组的代表汇报自己的想法，并用实例验证。

师小结：色彩合理；主题鲜明；版面协调„„

师：要想成为小编辑需要完成很多挑战，首先必须上交一个具有个性特性的自我介绍。

接着展示两个自我介绍网站页面，一张是没有美化的，一张是经过美化的，引导学生进行比较，明确学习任务.二、新课

挑战一：为网页“梳妆打扮”

课件出示任务：网页中文字的字体太单调，不好看，请同学们将文字设置成自己喜欢的格式。

引导学生自主操作，教师巡视。

请学生口述操作过程，教师操作并小结。教 与 学 的 双 边 活 动

挑战二：使网页“图文并茂” 课件出示任务：给网页加上图片，让网页更加丰富。

1.引导学生回顾word中插入图片的方法，然后引导学生根据教材44页步骤自主尝试。

2.学生口述，教师操作。

引导学生观察，让学生发现插入图片后出现问题“图片太大，位置不好”引出：

挑战三：图片我会修

1.引导学生回顾word中修饰图片的步骤；

2.然后让学生引导学生，根据教材45~46页的内容对图片进行修剪； 3.请小组代表上台操作；

4.教师进行小结；此过程中故意使用站点外的图片作为插入对象，保存网页时，引导学生观察并思考出现问题的原因。

5.对还没完成任务的同学接着操作完成任务，并对图片进行简单的编辑操作。

挑战四：觉得白色的网页太单调，请你给网页穿上‘花衣服’，让它看起来更漂亮。

1.引导学生，可以给网页的背景加颜色或图片。

让学生让小组进行讨论，后操作；教师巡视，并对个别学生进行指导。2.派代表上台操作，教师再对学生的回答进行简单的点评和评价。1.学生自己谈谈：这节课你学到了什么？有什么收获等等。2.评选出今天的最佳小编辑，并让学生填写评价表并上交。

第四篇：第4课网页的美化教学设计

第4课 网页的美化

一、教材分析

1、本课的作用和地位

本课是青岛版《初中信息技术》八年级上册第1单元网站设计与制作的第4课。

2、本课主要内容

本课主要是内容是介绍了美化网页的常用方法，以及如何设置网页的背景、音乐、如何插入Flash动画和滚动字幕。

3、教学目标 知识目标：

了解美化网页的常用方法，理解美化网页对提高网站质量的作用。技能目标：

学会在网页中设置背景、音乐、Flash动画和滚动字幕。情感、态度与价值观目标：

提高审美意识，善于发现美，美化生活从自身做起。重点、难点：

重点：设置背景、音乐、Flash动画和滚动字幕

难点：网页和表格的背景设置、Flash动画的插入及保存

二、学情分析

本课内容为八年级上册，在此之前学生已学过有关Windows、Word等软件的操作，学生对计算机的基本操作有了一定的感性认识，对进一步学习FrontPage有一定的操作基础。再加上FrontPage2000采用了与Word等其他Office软件相类似的界面，因此对FrontPage2000的操作会有一种似曾相识的感觉，这种知识迁移对后续的学习非常有利。

三、教学策略

通过恰当的情境导入新课，将本课内容分解成若干个任务，通过学生分组合作、自主探究，来掌握网页美化的方法、学会如何在网页中设置背景、音乐、Flash动画和滚动字幕，并通过对优秀学生作品的展示、点评来增强学生的成功意识，调动学生的学习积极性。

四、学时安排 本节课用1课时

五、教学准备

多媒体教学课件、投影机、网络课室

六、教学过程

１、情景导入，激发兴趣

前面我们学习了制作网页的一些基本方法，请同学们仔细观察下面这两个页面哪一个更漂亮呢？„„。

展示两个网页，让学生观察第二个网页同第一个网页相比有哪些不同？ 生回答。

教师小结引出新课内容：这第一个网页是我们上一节课同学们提交的作业，第二个网页是经过修饰过的网页，刚才同学们都把这些修饰过的地方找了出来，并且也看到了它们的效果，那同学们想不想知道这些修饰是如何来实现的吗？

生答（想）

那好，今天我们就来学习第4课网页的美化。

[设计意图：通过展示、对比这两个网页，让学生感到原来网页还可以做的更好！不仅可以吸引学生的注意力，激发学生的学习兴趣,而且更能使学生看后跃跃欲试，期待能创作出更好的网页来展示自己的才华。] ２、摄入新知，培养能力 这一课的教学内容和操作与我们以前学过的word、excel的相关内容基本相同，因此，我们采用由同学们自主探究来完成任务的方法来学习。我们把全班同学按座次分为五个学习小组，A、B、C、D、E组，每个小组探讨一个任务，看哪个小组的任务完成的又快又好。

（课件展示）

任务1：如何设置网页的背景？ 任务2：如何设置表格的背景？ 任务3：如何插入背景音乐？ 任务4：如何插入Flash动画？ 任务5：如何插入滚动字幕？

请同学们启动FrontPage2000，打开Ｄ:情感小屋站点，打开“我就是我.htm”网页，按照“本课任务”里面的具体要求，对照课本，合作学习，探究完成任务的方法。然后每个小组派代表为同学们做示范。

教师巡视，个别辅导。

每小组的学生代表为同学作示范。教师讲评，学生评价。学生自主操作完成任务。

[设计意图：通过“提出任务——合作探究——完成任务——学生示范——老师指导——学生练习——展示作品——学生评价”的学习方法，强调自主探索与合作学习，调动学生的学习积极性，增强学生的成功意识，并让学生学会评价作品。]

3、练习提高，拓展延伸

拓展任务：发挥你的想象力，进一步对“我就是我.htm”网页进行美化，完成后提交作业。

[设计意图：通过拓展任务，可以使学生运用所学的知识，充分发挥自己的想像力，创作出更多、更好的作品。]

4、巩固提高、归纳总结

通过课件一起回顾本节课学到的知识点。

通过今天的学习，我们学会了FrontPage美化网页的基本方法，但网页美化的过程远远没有结束，要想做出精美的网页我们还需要认真的学习和加倍的努力。我相信只要大家用心去学、去做，一定能做出有个性的网站的！

七、教学反思

本课的教学内容和操作与我们以前学过的word、excel的相关内容基本相同，因此，我们采用了自主探究和任务驱动的方法来进行教学。老师提供“半成品”（一个还未完成的网页），分组让学生设置网页背景、表格背景，插入背景音乐、FLASH动画、滚动字幕。在学习操作技术的同时，要让学生明白网页背景、表格背景的设置区别，注意设置的背景、插入的音乐、滚动字幕要与整个网页的主题、布局和谐统一。

第五篇：音乐明星网页设计

论文题目

个人网站设计-音乐明星网

前言 随着社会的发展时代的前进,IT行业的发展也是日新月异,对人类的生产和生活方式产生了很大影响｡网络传播以其特有的快速､高效､便捷的传输方式被人们所接受,越来越多的走进了千家万户｡并且在当今音乐浪潮的影响下,随着音乐事业逐渐走向高峰,音乐已无处不在,音乐已与我们密不可分｡

本文阐述了音乐网站的设计与实现,本系统采用ASP+SQL Sever 2005作为开发工具｡前台主要实现歌曲的分类显示及分类查询､歌曲的在线试听及下载､会员注册､登录以及最新音乐的新闻介绍,并且还为用户提供了在线交流的平台等功能;后台主要用于数据库的管理,管理员对影视歌曲的添加､删除､更新及对注册会员和音乐新闻的管理､系统的维护等功能｡本系统操作简单,界面友好｡通过对音乐网站设计的分析，阐明了当前网络音乐发展的形势，简单介绍了音乐网站设计的内容、结构、规划、功能、发展前景等。提出音乐网站设计实际上是一个发展性问题。在网站的整体设计过程中大致可分为前期准备、策划、设计、制作、运行维护五个阶段，其中采用多种新型技术，并重点介绍了ASP技术在过程中的运用。ASP是一个Web服务器端的开发环境，利用它可以产生和运行动态的、交互的、高性能的Web服务应用程序，能够为程序开发人员提供实现应用程序的编制与自带组件设计网页从逻辑上分离的技术，特别适合建立Web站点、网上访问数据的开发工具，使网站建设与发展变的较为简单与快捷。为音乐网站的规划和建设，提出一些建议性的意见。可以使设计过程尽可能满足音乐爱好者的需求。

第一章 需求分析

第二章 网站的总体结构设计

第三章 音乐明星网的实现

第四章 系统的测试和展望