《在网页中插入图片》教案

web中图片的插入设计第一篇：web中图片的插入设计body{background-image:url(“pic.jpg”);background-repeat:no-repeat;background-color:#a8d8ec;background-position:100px 50px;}h2{text-align:center;color:blue;font-family:“微软雅黑”;}背景CSS练习第二篇：插入图片教学设计《当个电脑小编辑—插入图片》教学设计天门市渔薪小学王磊【教学目标】（一）知识与能力：1、掌握在文档中插入图片的方法并会编辑图片。

2、了解图片工具的使用方法，理解“文字环绕”的设置。

3、掌握图文混排的方法。

（二）过程与方法：1、采用自主学习、合作探究学习方式来学习知识。

2、小组合作，体验合作的乐趣，感受成功的快乐。

（三）情感态度、价值观：1、激发学生勇于合作交流、勇于实践、勇于创新的思想。

2、培养学生创造美、欣赏美的能力。

【教学重点难点】1、使学生掌握在文档中插入图片的方法2、掌握图文混排的方法【教学时间】 1课时【教学过程】一、情境激趣，引出课题：1、同学们在这节课的开始，王老师带大家去羊羊学校看一看，它们在干什么呢？（文档的对比得出：文字如果配上图片，会显得更加生动、形象。

）2、揭题：我们就一起来学习如何在文档中插入图片（出示课题）二、任务驱动，自主探究1、首先让我们来解决第一个问题：为古诗《黄鹤楼送孟浩然之广陵》插入一张图片。

（学习模块一）2、小组探究汇报，学生演示。

3、教师归纳插入图片的方法：。

插入—>图片—>来自文件—>图片文件—>确定4一张图片插入到文档中了。

你们想试试吗？布置任务（试一试）5、观察插入到古诗中的图片，你发现了什么？6、学生讨论：图片太大，占据了文档的一大块，不美观。

7、是的，我们需要调整图片的大小。

怎样才能改变图片的大小呢？8、师讲解，生操作：首先要在图片上单击选中图片，选中后的图片四周会出现八个小方块，它叫做图片控制点。

第4课在网页中插入图片教课目标：
1、使学生掌握在网页中插入图片、视频
2、使学生懂得设置网页的背景音乐
教课要点：会在网页中插入flash动画、插入背景音乐教课难点：会在网页
中插入视频
教课准备：1、七巧板网页
2、忆江南音乐、“嫦娥一号概略”视频教课过程：
一、导入
师：同学们，你们在阅读网站的时候，看到的网页除了图片和文字之外，还
有没
有看到什么、听到什么呢？
师：同学们说得都很对。

这节课就让我们来学习怎样给网页增添动画与音乐，插入动画、音乐此后，我们创立的网页就更为丰富多彩了。

二、新授
活动一：在网页中增添flash 动画
让学生认识FrontPage中不支持直接插入.swf格式的Flash动画文件，但能够依据以下方法
间接插入。

做一做：给“七巧板”网页增添Flash小游戏。

教师演示操作，学生察看步骤。

学生上机操作，依据书上P19-20页中的步骤，插入小游戏到网页中。

教师巡视指导
活动二：给“七巧板”网页增添背景音乐
同学们已经会给网页增添动画了，假如再配上音乐这个网页就更丰富了。

我们此刻就来学怎么
设置网页的背景音乐，操作步骤与设置网页背景是近似的。

学生上机操作，依据书上P21-22页中的步骤自学。

教师巡视指导
第1 页
活动三：在网页中插入视频
同学们学会了插入动画与背景音乐，此刻再来学怎样给网页插入视频就更简单了。

教师演示操作，解说，学生察看步骤。

生按P23上机操作。

教师巡视指导。

三、试一试：
达成书上第P24页试一试中的题目。

第2 页。

《在网页中插入图片》教案教学目标：知识与技能：1、会打开上次的网页；2、了解图片在网页中的作用；3、学会在网页中插入图片的方法。

过程与方法：通过独立探究和小组探究的方法基本掌握在网页中插入图片。

情感态度与价值观：培养学生的审美能力，形成与同学和谐相处、共同进步的精神。

明白帮助他人的目的就是美化我们的心灵。

教学重难点：重点：了解图片在网页中的作用难点：能在网页中插入图片教学时间：一课时教学过程：一、导入出示往届学生的网页作品（包含有文字、图片）的网页。

同学们请看大屏幕，这个网页里面都有些什么？学生回答：文字、图画等文字部分同学们已经学会了，今天我们就一起来探讨一下在网页中插入图片，我相信我们班的同学一定能做出漂亮的网页。

二、探究新知1、了解图片在网页中的作用出示只有文字和带有图片的两个网页提问：这两个网页哪一个好看呢？（有图片的那一个）为什么？指名同学回答。

（因为第二个网页比第一个多了很多漂亮的图片！）那同学们说说图片在网页中有什么作用呢？（可以使网页更加美观漂亮）2、插入图片，美化（1）打开上次制作的网页请同学们回答老师一个问题：上次我们做的网页怎么打开继续完善它呢？学生回答：启动frontPage网页制作软件——单击文件——打开文件——我的文档，找到主页文件index.htm再打开。

好，请同学们打开上节课我们制作的文字网页，我们将对这个网页插入图片进行美化。

教师巡视，指导（2）介绍寻找图片的方法同学们，在网页中插入图片时，我们需要知道图片的位置，现在，我告诉你们，本课的图片素材存放的位置在：我的电脑\D盘\图片素材文件夹。

你们打开就可以找到自己需要的图片了。

下面，请同学们尝试找出想要的图片。

学生尝试去找，老师巡视指导。

（3）在网页中插入图片。

好，准备工作我们已经完成，下面我们一起来复习一下以前我们在word中插入图片的方法（学生有的可能运用复制——粘贴的方法插入图片，也可能运用菜单插入的方法。

第四课在网页中插入表格与图片一、教学目标分析课堂标准让学生掌握利用表格来布局网页信息的方法。

掌握在网页中插入图形图像。

知识与技能●学会插入表格●学会调整表格●学会插入图片●学会调整图片●学会插入水平线及使用列表。

过程与方法采用任务驱动的方法，自主学习，再通过分组探究，技能竞赛，协作学习，让学生在轻松的氛围下学习，具有使用搜索引擎技巧的能力。

情感态度与价值观1、培养学生协作学习、互相帮助的精神2、培养学生的探索精神和主动学习的习惯。

四、教学重点、难点与解决措施重点：插入与调整表格技巧，插入图片的技巧难点：插入与调整表格的技巧解决措施：让学生通过浏览网页，并下载网上利用表格定位的网页，通过网页制作工具，打开所下载的网页，并将其中的图片删除来达到认识表格的目的，然后利用竞赛的活动，让学生们参与其中，由此来引导学生对网页设计问题的思考，并逐步掌握网页表格布局设计的技巧，也就是掌握网页设计的技巧。

五、教学设计思路：本课以学生为主体，老师为主导的教学模式开展的，以学生的积极探索，小组协作学习、自主学习等学习模式通过反复练习总结，知识水平实现螺旋式上升，最终实现知识的意义建构，并考虑到学生的知识层次有所不同，在拓展学习方面特意设置不同程度的学习内容，满足各层次学生的需要。

六、依据的理论在做中学、引导发现式教学七、教学策略及选用媒体基于教学内容的要求以及学生的特征，本教学设计的教学以学生自主学习为主，老师在课堂中起到主导作用的教学模式开展，通过探究学习寻找解决问题的方法，并以竞赛的形式，让学生在反复的操作中得到搜索的经验，老师引导学生总结经验，把感性认识上升到理发认识。

在拓展知识部分，学生能根据自己的水平选择学习知识的分量，让不同层次的学生都可以在课堂中尽量掌握自己要学的知识，而且以小组的形式开展，有助于同学间互相协作，共同达到知识的意义建构。

使用网络教室平台进行屏幕控制及转播，学生机能接入互联网。

八、教学过程第1课时表格可以很好地起到定位作用，这节课里我们将学习在网页中插入表格与图片。

《在网页中插入图片》教学设计作者：朱琳琳来源：《小学科学·教师版》2011年第11期【设计理念】学习总是与一定的情境相联系的，切合教学内容的情景创设，可以为学生的自主探究提供一个良好的空间，又可以激发学生自主探究的动力。

本课主要采用“任务驱动”教学法来实施教学。

【学情分析】学生已经学会了新建网页，在网页中输入文字。

学生就有“为网页添加图片信息”的欲望，结合因特网知识让学生为自己创建的网页添加图片的信息，添加图片的技能学生已经在word文字处理软件中学习过，因此本节课知识，学生可以自主学习。

【教学目标】1、知识目标在网页中插入图片。

对图片进行编辑。

设置网页背景图片。

2、能力目标：利用插入图片知识，培养学生的图文并茂整体布局网页的综合信息素养能力。

3、情感目标：通过作品展示和评价是让学生体验成功的喜悦，激发学生的创造热情。

【教学重点】在网页中插入图片。

【教学难点】设置网页的背景图片。

【教学方法】情景导入法、任务驱动法【课前准备】FrotntPage2000软件多媒体教学网络系统【教学过程】一、创设情景激发兴趣【教师活动]利用多媒体教学广播系统展示两组图片(“自然美图片”和“灾难图片”)。

两组截然不同的图片，看过后，有什么感受呢?学生：学生欣赏两组图片并谈感受。

教师：同学们都知道，地球是我们的“生命之舟”。

可是我们人类却因为个人的利益，人为的破坏她，导致了各种灾难的发生。

环境污染是我们人类面临的一个严峻问题。

所以同学们我们应该带头保护环境，来宣传爱护环境的重要性。

学生倾听受教育。

教学意图：通过欣赏两组对比图片，宣传环境保护的重要性，对学生进行情感教育，来激发学生学习的兴趣。

二、导入主题欣赏范作教师：同学们想一想，我们可以通过什么途径来宣传爱护环境呢?学生：写作文、画画、制作手抄报、做一个网页……教师：同学们的办法可真多啊!我们可以用这个学期所学的电脑知道来制作网页，宣传“爱护环境”。

教师：回忆：组成网页的两大主要元素是什么?学生：文字和图片。

第4课在网页中插入图片教学目标：1学会在网页中插入艺术字；学会插入图片；学会保存嵌入式文件。

2培养学生独立探索的精神，以及发现问题解决问题的能力。

3了解网站中插入图片的方法，激发学习网页设计的兴趣。

教学重难点：重点：会在网页中插入图片、艺术字，保存嵌入式文件。

难点：会设置图片在网页中的属性，通过图片工具栏将图片无用纯色区域设置为透明色。

教学环境：多媒体机房，计算机网络教学软件。

教学过程：一、导入展示网页中的图片和艺术字等。

引言：在网页中插入艺术字和图片，能让网页图文并茂，生动美观。

我们之前学习过在Word和age文件夹下，插入后，还要设置图片的大小、位置、效果等属性。

教师演示操作，学生观察步骤。

步骤：1翻开主页文件，移动插入光标点到第三行第一个单元格中间。

2单击插入菜单，移动光标到图片，然后单击“来自文件〞。

3翻开图片所在的文件夹，单击文件名，最后单击插入按钮。

4在图片上右击，在弹出菜单中单击“图片属性〞。

5选定“指定大小〞、“保持纵横比〞，输入适宜的宽度或高度的像素数，单击确定按钮。

6单击视图，移动光标到工具栏，单击图片。

7单击“设置透明色〞按钮。

8单击白色区域，使它变成透明。

学生上机操作，根据书上age文件夹，再单击去顶，可以看到更改后的文件夹；4最后单击确定。

学生操作任务：保存嵌入式文件。

提示：目前，大多数网页浏览器只能支持显示Gif和J格式图片。

将三角形和梯形图片插入主页的表格中，并调整大小，然后设置图片的背景色为透明。

加强任务：在画图中绘制带底和高的钝角三角形和锐角三角形、直角三角形，分别保存为画图文件，制作完成“三角形图例〞的网页。

提高任务：按照上一个任务的方法，绘制平行四边形和梯形。

制作“平行四边形图例〞和“梯形图例〞的网页，文件名分别为：和。

学生根据自身水平和完成任务情况自行选择任务来做。

教师巡视指导，及时评价。

四、评价与总结展示学生成果，引导学生说一说本节课的收获。

教师补充、评价。

Experiment Primary School Loufeng Town Suzhou Industrial Park校风：至真 崇善 向美 教风： 精心 精细 精致 学风：会学 善思 致用1 教案背景：《在网页中插入图片》是配合我区信息技术课题《学案引导下信息技术高效互动课堂的构建》开的一堂研讨课。

本课以学案引导为教学手段，引导学生自主学习在网页中插入图片的方法。

本课在调查了解学生现有能力的基础上，充分尊重学生个体差异、以学定教，采用任务驱动、自主探究，同伴互助的学习方式打造有效的课堂教学氛围。

教学课题：《在网页中插入图片》 教材分析：网页制作是《小学生学电脑》（凤凰出版传媒集团江苏科学技术出版社）第十一册的内容，是在学生学习了网络基本知识、WORD 之后的一个内容。

本课是学生在初步学习FrontPage 软件，会制作文字个人主页的基础上，学习用插入图片的方法来美化网页，培养学生的美感和团结互助，共同进步的人文精神。

教学方法：学案引导，学生自主学习Experiment Primary School Loufeng Town Suzhou Industrial Park2校风：至真崇善向美教风：精心精细精致学风：会学善思致用Experiment Primary School Loufeng Town Suzhou Industrial Park校风：至真 崇善 向美 教风： 精心 精细 精致 学风：会学 善思 致用3 把WORD 软件的相关操作与FRONTPAGE 联系起来，通过学生熟悉的WORD 学习FRONTPAGE ，达到的学习效果还不错。

为了激发学生对网页制作的兴趣，这节课由两张的视觉对比引入，让学生知道我们每个人都可以做出这样精美的网页。

课堂上我们所归纳出的网页中插入图片的方法是来自于学生的探索。

这节课中在学生掌握了一些网页制作的方法后，我占用大量的时间给学生打造了一个自由创作Experiment Primary School Loufeng Town Suzhou Industrial Park校风：至真 崇善 向美 教风： 精心 精细 精致 学风：会学 善思 致用4 的空间，在我准备的资源中除了有给学生自主学习的学习助手外，还有针对“苏州园林”的素材，每个园林的介绍对应着图片和文字内容，以帮助孩子利用学案和准备好的素材进行自主学习。