2024年网页美化与布局教程电子版5篇

【请您参阅】下面供您参考的“2024年网页美化与布局教程电子版5篇”是由阿拉网友精心整理分享的，供您阅读参考之用，希望此例范文对您有所帮助，喜欢就复制下载支持一下小编了！

网页美化与布局教程电子版篇1

第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，打开ｄ:情感小屋站点，打开“”网页，按照“本课任务”里面的具体要求，对照课本，合作学习，探究完成任务的方法。然后每个小组派代表为同学们做示范。

教师巡视，个别辅导。

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

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

3、练习提高，拓展延伸

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

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

4、巩固提高、归纳总结

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

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

七、教学反思

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

本文地址：http:///zuowen/

网页美化与布局教程电子版篇2

网页的美化

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

《网页的美化》是《初中信息技术》八年级上册第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动画，如何把它插入到我们的网页上呢？

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

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

网页美化与布局教程电子版篇3

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

教学目标：

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

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

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

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

课时安排：1课时

教学过程：

一、导入

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

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

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

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

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

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

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

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

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

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

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

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

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

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

挑战三：图片我会修

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

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

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

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

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

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

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

网页美化与布局教程电子版篇4

初中信息技术教学案例

————《美化网页》

一、课题

本课是《美化网页》课时的内容。学生已经学习了制作简单网页的基本方法，这部分的主要内容是，网页中共享边框、导航栏的设置和主题的应用。如果采用传统的教学模式（即教师示范──学生模仿操作）也能完成教学任务，但对学生而言，他们只学会了计算机的操作，而对信息素养并没有得到提高。因此，本着学生自主探究学习意示、创新能力的培养，以综合提高学生的信息素养为目的，笔者在教学时将本课中原来让“做中学”的方式改为了自主探究的学习方式，将课堂交给学生，让学生自主探究学习，教师在课堂中主要起到引导作用。

二、教学目标分析

1．认知目标：学会简单的对网页进行美化的方法。

2．技能目标：

（1）掌握美化网页的几种操作方法；（2）能够应用主题，来改变网页的整体布局；（3）能够灵活地对几种操作方法进行综合运用。

3．情感目标：（1）通过师生协作和学生互相配合，培养学生合作团结的精神；（2）培养学生热爱美的情感，激发学生表现美的欲望，使学生的审美能力得到提高。

三、学习者特征分析

从学生的认知特点来看，他们爱问好动、求知欲强、想象力丰富，对实际操作活动有着浓厚的兴趣，对直观事物感知较强，正处在形象思维向抽象思维逐步过渡的阶段。因此，在学习过程中，应鼓励学生自己观察，亲自动手操作，进行学生讨论和交流，师生共同归纳总结，体验学习。

在讲此内容之前，学生已经学过如何制作一个简单的网页，并且已对网页进行简单的修饰,这为学生进一步对美化网页作好了充分准备。

基于以上学生情况的分析，笔者对教学过程大胆采用让学生为主体，教师为主导为教学思路进行设计。

四、教学策略选择与设计

在讲此内容之前，学生已经学过如何制作一个简单的网页，并且已对网页进行简单的修饰,这为学生进一步对美化网页作好了充分准备。

基于以上学生情况的分析，笔者对教学过程大胆采用让学生为主体，教师为主导为教学思路进行设计。

五、教学资源与工具设计

本课中笔者利用多媒体网络教室系统展示学生制作的各式各样的网页，同时也用简单的幻灯片制作一些简单的页面，以此来出示本课的教学目标以及学习任务，以便学生有目标的去学习和练习。

六、教学过程

（一）组织教学

（二）学生讨论──导出教学目标

师：（利用科教2000多媒体网络教室系统选择几个观看）请同学们将你们所制作的网页打开，说说谁的网页最漂亮。漂亮在什么地方？

（学生讨论）有的说某个同学网页中的文字好看，也有的说某个同学的网页中的图片漂亮，还有的说某个同学的网页底色好看等等。

师：刚才同学们都说出某个网页的某一点好看，没有完全是自己认为最漂亮的一个，那么，今天，就让我们用计算机做出一个自己认为最漂亮一个网页好吗？

生：好！

师：利用多媒体电子教室分别展示已经进行美化了的《美丽家乡1》和当前还没有进行美化的《美丽家乡2》两个网页。谁说说这两个网页哪一个更漂亮，它们的区别在哪儿？

生：“美丽家乡2”更漂亮。

师：那么请同学们讨论一下，要想让网页最漂亮到底要对网页做那些修饰呢？（学生讨论）有的说要加链接栏，也有的说要添加共享边框，还有的说要对网页进行底色的设置。

师：（小结）利用幻灯片出示本节课的教学目标：（1）怎样给网页添加导航与共享边框，来使网页更美观、更具有个性化；（2）如何进行主题的应用来改变网页的整体布局。

（解析：通过学生讨论对老师所展示的学生网页，进而加深对网页的认识，也明白本课的教学目标。由于采用讨论这一形式也能更好地调动全班学生的学习积极性，更容易激发学生的学习兴趣。）

（三）新课讲授

教师利用多媒体电子教室演示

1、插入链接栏导航

教师演示：单击“插入”→“导航”→“插入web组件”→“选择相应设

置”→“下一步”→“选择相应设置” →“完成”（让学生知道插入链接栏导航的方法）

师：出示学习任务：（展示网页）请同学们插入如教师所示的链接栏。

生：学生自主探究练习。（学生通过自主学习，能初步掌握导航栏的添加，并为后面的共享边框的设置作准备）

师：教师巡视，了解学生操作的情况，进行个别学生指导。对做的好的给予肯定和赞扬。

生：请个别学生示范操作。

教师提出问题：请同学们对“导航栏”属性通话框中的各个“选项”逐个进行研究、总结、掌握。（培养学生的自学能力）

（解析：“插入链接栏导航”是本节教学重难点，通过老师的演示讲解，让学生带着问题去操作，进行自主探究，最终解决实际问题。这样既完成了教学目标，也更好地提高了学生探究意识和创新能力。所以，让学生带着任务直接去学习，这样使学生自主学习得到的体现，也有利于教师对个别学生加以指导，充分体现了学生为主体，教师为主导的思想。）

2．共享边框

教师提示：“共享边框”是在网站的每个网页中，在共同的框架位置上显示相同的内容，我们可以通过“格式”菜单的“共享边框”命令来为网页进行共享边框的设置（让学生知道设置共享边框的概念及设置的基本方法）

师：出示学习任务：（展示网页）请同学们设置如教师所示的共享边框。

生：学生自主探究练习。（学生通过自主学习，能初步掌握共享边框的设置）师：教师巡视，了解学生操作的情况，进行个别学生指导。对做的好的给予肯定和赞扬。

生：请个别学生示范操作。

（解析：本部分教学也应是本节教学重难点，教师并没有完全示范操作，而是稍加提醒，让学生带着问题去操作，最终解决实际问题。这样既完成了教学目标，也更好地提高了学生探究意识。）

3．知识拓展──主题的应用

师：刚才都是我们手工对网页进行的美化，有没有一种更快捷的办法让电脑自动对网页进行美化呢？

生：（学生陷入深思之中）

师：请同学们仔细观察一下“格式”菜单中还有什么命令？（教师适时的加以提醒）生：（此时多数都积极动手操作实践了）

师：那就请同学们各显神通吧！看谁做得又快又好！

生：（此时学生都积极参与操作，都想拿到第一名）

师：（教师巡视，注意观察及个别指导）

师：（过一段时间，当发现有第一位学生运用“主题”做好时）好，我班王伟同学已经做好了，就请他为我们示范讲解一下吧。

师：（结合学生操作和讲解情况加以总结）

（解析：利用知识拓展形式来补充课堂知识，让那些学有余力的学生表现得更出色，同时，也更加激励全班学生向更高层次发展，提高学生对信息技术的兴趣。也要充分注重学生的个体差异性。）

4．放开手脚──充分展显学生个性

师：刚才同学们都掌握了对网页的基本美化方法了，现在老师这还有一个很粗糙的网页想请同学们把它美化的更漂亮些，好吗？

生：好！

师：那就请各位同学大显身手吧，看看谁的网页最漂亮！

生：积极主动地进行练习

师：注意对个别学生进行相关指导。

（解析：通过让学生帮老师解决问题的形式，将问题抛给学生，学生的积极性更高，同时也采用竞赛的形式，比一比谁的最漂亮，这就更好的提高了学生的兴趣。更重要的是能够让学生充分展现个性，放开学生的手脚，让学生大胆发挥想象，尊重了学生的个性发展，大大提高了学生的自主创新能力。）

5．作品分析──填写报告

师：现在同学们都已经美化好了网页，请同学们填写网页上的一份表格。

生：学生认真填写表格内容。

（解析：通过分析自己的作品，让学生在脑海里充分回忆所学过的知识点，加深对操作过程的印象，进而培养学生良好的学习意识和学习习惯。）

作品分析表（略）

6．本课总结

师：（结合某个同学的作品进行总结）这节课我们学习了对网页的一些简单的美化，同学们表现得都很好，希望同学们能将此运用到今后的学习生活中去。

（解析：对全课的总结，首先是进一步理顺了本节的教学重难点，也充分肯定了学生学习成果，为以后的学习奠定了坚实的基础。）

七、教学评价设计

首先，在这节课的教学中，采用了任务驱动的教学方法，注重学生的自主探究意示和创新能力的培养，这种教学方法既培养了学生自主学习的能力，也更好地提高了学生的创新能力，使学生成为真正的学习主体。通过学生自学、实践、质疑、探索的过程，自主完成指定任务来达到教学的目的。在教学过程中多启发、少教授，充分发挥学生的自学能力、独立分析问题和解决问题的能力、创新的能力。

其次，在教学评价上，也让学生进行了自评、互评，提高了学生自我评价的能力，同时也培养了学生良好的学习习惯。

最后，教师从原来的知识的传授者转变为教学的组织者、管理者，教师的主导地位得以充分的体现。

八、帮助和总结

本课教学以“情景导入→知识建构→综合应用→自主创新”为主线，提高了学生学习的主动性。通过本节课的学习使学生们的创新能力增强了许多，制作出了好多漂亮的网页。教师要营造交互式的学习环境，给学生更大的主动权，满足学生个性化的学习需求。教师的引导与学生的思考融为一体，符合学生的认知规律，有助于学生全身心地参与到学习中去。要让学生在课堂上真正“动”起来，教师在课堂预设与生成的诸多环节都要精心设计，科学处理，以理性的思维去点燃学生求知的火焰。

网页美化与布局教程电子版篇5

计

#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_1250564593313span{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“},”span“:{”margin-top“:”0“,”margin-bottom“:”0“},”li“:{”margin-top“:”0“,”margin-bottom“:”0“}}--**/_{text-justify:inter-ideograph;font-size:;margin:0cm0cm0pt;font-family:”timesnewroman“;text-align:justify}mal{text-justify:inter-ideograph;font-size:;margin:0cm0cm0pt;font-family:”timesnewroman“;text-align:justify}mal{text-justify:inter-ideograph;font-size:;margin:0cm0cm0pt;font-family:”timesnewroman";text-align:justify}_{page:section1}_1249633762080ol{margin-bottom:0cm}_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节中的“背景图片”调整在一起形成一节“网页背景”课。

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