青少年如何预防近视-我懂得了珍惜时间

学习好资料 欢迎下载
《网页中图片的使用》教案
上海市风华初级中学 顾坚
教学目标：
知识与技能目标：了解图片在网页中的作 用；掌握网页中图片的插入与保存；初步学会在网页中合理布局
图片。
过程与方法目标：通过观察，尝试，检验的过程，知道举一反三，归纳总结的学习方法。
情感 态度价值观目标：体验与同学分享学习方法经验的乐趣；养成合理分类存放文件的学习习惯；初步形
成对 网页版面“形”的美学追求。
教学重点：网页中图片的插入的方法和必须注意的一些问题。
教学难点：理解网站中文件管理的思想和在网页中图片合理布局的认识。
教学方法：问题迁移，自主探究，评价小结。
现状分析：
这节课是华师大 教材第五章学建网站的第四课时。学生已在前几课中学习了网站设计思路，网站结构
规划和网站构建，在 后序课中还将按小组设定的网站主题，搜索整理和网站主题相关的素材，常用素材和
组件的插入，超链接 设置，并分工完成主题网站的制作，最后在校园网发布主题网站。
预备班的学生在小学时大多都制作过 版报，所以对图片插入到Word文档中的操作比较熟悉，而
FrontPage插入图片的方法有相似 之处，可以利用这一点完成知识与技能的迁移。有些同学还没养成做完作
品及时保存的习惯在文件保存过 程，两种软件有较大的不同。第一，网页中图片的保存对学生来说在理解
上有一定的难度；第二，大多数 同学没有形成分类存放文件的意识和习惯。在图片的布局时大多数同学由
于年龄特点，往往把关注点放在 图片的内容中，而忽视了图片与网页主题的关系，对图片在网页中的作用
考虑较少。
教学过程：
一、新课引入
1、观察下面三个网站的截图，能知道分别是什么网站吗？说说理由。
分别是汽车，卡通动画，苹果网站。从文字和图片中看出来。
俗话说，“一幅图画胜过千言万 语”。如果希望向网站访问者快速传达信息，或者只是希望网站更具吸
引力，使用图形是一种很好的方法 。
2、图片格式有几种？
可以有BMP，GIF，JPG，PSD等。
图片可具有多种不同的文件格式。但GIF、JPG 和 PNG三种格式的图片文件，文件较小，从而最适
合在网络上进行快速传递。怎样将它们放到网页中呢？
二、网页中图片的插入
试一试：以小组为单位，尝试在网站主页插入图片的方法。（小组汇总）
1、找找图片在网站文件夹中的位置。
2、根据Word中插入图片的方法，在主页插入图片。
在网页中插入图片的方法
方法一
方法二
方法三
方法四
……
我组觉得最好
的方法






组员

组员

组员

组员

组员

理由

表一
板书：网页中图片插入的方法：1、“插入”→“图片”→“来自文件……”

学习好资料 欢迎下载
2、常用工具栏→“插入文件中的图片”按钮
3、图片工具栏→“插入文件中的图片”按钮
4、直接从文件夹列表拖曳图片文件
（课堂预见：由于在小学制作版报时，插入图片用的是 复制粘帖的方法，在这儿可能也用这种方法。
如果出现这种情况，教师应先鼓励学生，同时可有针对地提 出：不是所有版本的网页编辑器都支持这
种插入图片的方法；不是所有媒体都能用这种方法插入；如果复 制下来的图片只是引用了网上的地址，
会出现什么情况。）
想一想：利用网页编辑器，同学们 已经在网页中插入了图片，在预览窗口也能正常显示。为什么在浏
览器窗口中网页中的图片不见了？
（课堂预见：网页制作中，如果不对修改的网页进行保存的话，是无法在浏览器窗口看到修改结果的。< br>有些学生可能在平时操作时没有养成及时对修改的作品进行存盘操作的习惯，也就无法看到修改的结
果。教师在此让学生操作后，发现问题引起思考，发现及时保存文件的重要性，使学生养成及时存盘
的 好习惯。同时也指出预览和浏览器窗口所看到的，有时不一定一致。）
板书：网页修改后要保存
网页和图片的保存
三、网页和图片的保存
试一试：当图片来源在站点文件夹内和不在站点文件夹内，保存网页时有什么不同？
要求：
1、以个人为单位，尝试在web站点文件夹的中合适位置，插入恰当的图片，并保存。（图片在
E盘的pic文件夹中）
2、请根据第二步观察到的现象，完成网页和图片的保存在线反馈练习。
出现情况
图片在网站文件夹内
图片不在网站文件夹内
图片不在网站文件夹内
时，我选择

A、取消图片文件的保存

现象
直接保存网页，不询问是否要保存图片。
B、
保存图片文件，但不更改文件夹

C、保存图片文件时，更改其所在文件夹

结论：1、网页和图片（一定，不一定）要保存在网站
文件夹
内。
2、图片应该保存在 文件夹中。
表二
想一想：上传网页和上传网站至个人档案袋，在浏览器中浏览网页的结果一样吗？为什么？
（ 课堂预见：学生在保存时会发现与其他office软件的保存过程有不同的地方，有些同学不知所措，
有些同学知道要将图片保存到站点中，但很少有同学会将图片保存在网站的images分类文件夹中。让
学生自主探究看看不同的处理方法得到的结果会是一样的吗？让学生悟出“图片”和“网页”跟着一
起 走的道理。）
板书：1、网页和图片都要保存在网站文件夹内
2、图片保存在images文件夹中
3、“图片”和“网页”跟着一起走
四、网页中图片的应用
展示学生的作品，让学生互相评论，发现问题，讨论得出正确决定。
（课前预见：学生由于心理年龄特征，可能对图片的插入非常感兴趣，往往在一个网页中大量地放入了各种图片，有与主题相关的，也有无关主题的。这时需要教师指出需要他们在插入图片时要考虑的问题：< br>①图片不能太大，网络这种特殊状态下，受带宽的限制，人们是很难忍受等待之苦的，这就要求把图片的< br>体积缩小，同时又要使图片尽量清楚，直观，最大限度的发挥它的作用，把握这个度是很关键的。②另外< br>图片的排布也很讲究，特别是多图的情况，就要是图片与图片之间的联系凸现，同时又要融为一个整体，< br>使看起来有条理。③图片的插入应与网页主题呼应。）

学习好资料 欢迎下载
板书：网页中图片的应用
图片大小适当，图片布局合理，图文环绕，烘托主题，……
五、小结
网页制作中要注意的问题
学到的技术及所解决的问题
学习过程中，所采取解决问题的方法
解决问题过程中获得体会




表三
六、拓展练习
练一练：（图片在pic文件夹中选择）
1、在web站点文件夹的中，选择图片插入。
2、调整网页中的图片，并合理布局。
3、给网页加上适当的网页背景图片或表格背景图片。（选做）
4、保存好文件，将web站点上传至过程性评价平台的个人档案袋中。

学习好资料 欢迎下载

预期效果
落实的知识技能：一是通过让学生观察截图，了解图片在网页中的作用。二是利用迁移教学法，让学
生找 到网页中插入图片的方法。通过学生的观察和检验，让学生知道浏览器窗口和网页编辑器软件中的预
览效 果在没保存之前是不一样的。三是要学生掌握网页和图片的保存。在学业水平考试中发现有很多学生
在上 传了网页后，图片无法显示。后来发现是学生不能理解网页和图片要跟着一起走的道理。所以设想在
课中 先让学生自己去体验二种情况：1、图片不在站点文件夹内的话，是否要把图片保存到站点文件夹中。
2 、如果把图片保存到网站里了，让学生尝试不同的上传方法，得到的结果是不同的。从而感悟到图片与
网 页一起走。四是要学生初步学会在网页中合理布局图片。初预的学生掌握插入图片的技能没多大的问题，
但是他们的关注点放在图片插入上，而忽视图片大小，图片内容，图片布局和图文环绕对网页整体效果的
作用。
培养的能力素养：通过观察，尝试，检验的过程，知道举一反三，归纳总结的学习方法。 养成的意识习惯：一是培养学生及时存盘的习惯。有些学生可能在平时操作时没有养成及时对修改
的 作品进行存盘操作的习惯，就无法看到修改的结果。我设想让学生操作后，发现问题引起思考，发现及
时 保存文件的重要性，使学生养成及时存盘的好习惯。二是养成合理分类存放文件的学习习惯。发现大多
数 同学在将图片保存到站点的时候，直接就保存在站点文件夹根目录，而不会保存到站点的分类文件夹中。
如果网站比较大型的话，文件不分类管理的话，就会显得杂乱无章。设想引导学生观察网页和图片的保存
时的对话框，让学生知道网站中文件管理的思想，从而养成合理分类存放文件的学习习惯。
提高的教师能力：

学习好资料 欢迎下载
《网页中图片的使用》教案
上海市风华初级中学 顾坚
教学目标：
知 识与技能目标：了解图片在网页中的作用；掌握网页中图片的插入与保存；初步学会在网页中合理布局
图 片。
过程与方法目标：通过观察，尝试，检验的过程，知道举一反三，归纳总结的学习方法。
情感态度价值观目标：体验与同学分享学习方法经验的乐趣；养成合理分类存放文件的学习习惯；初步形
成对网页版面“形”的美学追求。
教学重点：网页中图片的插入的方法和必须注意的一些问题。
教学难点：理解网站中文件管理的思想和在网页中图片合理布局的认识。
教学方法：问题迁移，自主探究，评价小结。
现状分析：
这节课是华师大 教材第五章学建网站的第四课时。学生已在前几课中学习了网站设计思路，网站结构
规划和网站构建，在 后序课中还将按小组设定的网站主题，搜索整理和网站主题相关的素材，常用素材和
组件的插入，超链接 设置，并分工完成主题网站的制作，最后在校园网发布主题网站。
预备班的学生在小学时大多都制作过 版报，所以对图片插入到Word文档中的操作比较熟悉，而
FrontPage插入图片的方法有相似 之处，可以利用这一点完成知识与技能的迁移。有些同学还没养成做完作
品及时保存的习惯在文件保存过 程，两种软件有较大的不同。第一，网页中图片的保存对学生来说在理解
上有一定的难度；第二，大多数 同学没有形成分类存放文件的意识和习惯。在图片的布局时大多数同学由
于年龄特点，往往把关注点放在 图片的内容中，而忽视了图片与网页主题的关系，对图片在网页中的作用
考虑较少。
教学过程：
一、新课引入
1、观察下面三个网站的截图，能知道分别是什么网站吗？说说理由。
分别是汽车，卡通动画，苹果网站。从文字和图片中看出来。
俗话说，“一幅图画胜过千言万 语”。如果希望向网站访问者快速传达信息，或者只是希望网站更具吸
引力，使用图形是一种很好的方法 。
2、图片格式有几种？
可以有BMP，GIF，JPG，PSD等。
图片可具有多种不同的文件格式。但GIF、JPG 和 PNG三种格式的图片文件，文件较小，从而最适
合在网络上进行快速传递。怎样将它们放到网页中呢？
二、网页中图片的插入
试一试：以小组为单位，尝试在网站主页插入图片的方法。（小组汇总）
1、找找图片在网站文件夹中的位置。
2、根据Word中插入图片的方法，在主页插入图片。
在网页中插入图片的方法
方法一
方法二
方法三
方法四
……
我组觉得最好
的方法






组员

组员

组员

组员

组员

理由

表一
板书：网页中图片插入的方法：1、“插入”→“图片”→“来自文件……”

学习好资料 欢迎下载
2、常用工具栏→“插入文件中的图片”按钮
3、图片工具栏→“插入文件中的图片”按钮
4、直接从文件夹列表拖曳图片文件
（课堂预见：由于在小学制作版报时，插入图片用的是 复制粘帖的方法，在这儿可能也用这种方法。
如果出现这种情况，教师应先鼓励学生，同时可有针对地提 出：不是所有版本的网页编辑器都支持这
种插入图片的方法；不是所有媒体都能用这种方法插入；如果复 制下来的图片只是引用了网上的地址，
会出现什么情况。）
想一想：利用网页编辑器，同学们 已经在网页中插入了图片，在预览窗口也能正常显示。为什么在浏
览器窗口中网页中的图片不见了？
（课堂预见：网页制作中，如果不对修改的网页进行保存的话，是无法在浏览器窗口看到修改结果的。< br>有些学生可能在平时操作时没有养成及时对修改的作品进行存盘操作的习惯，也就无法看到修改的结
果。教师在此让学生操作后，发现问题引起思考，发现及时保存文件的重要性，使学生养成及时存盘
的 好习惯。同时也指出预览和浏览器窗口所看到的，有时不一定一致。）
板书：网页修改后要保存
网页和图片的保存
三、网页和图片的保存
试一试：当图片来源在站点文件夹内和不在站点文件夹内，保存网页时有什么不同？
要求：
1、以个人为单位，尝试在web站点文件夹的中合适位置，插入恰当的图片，并保存。（图片在
E盘的pic文件夹中）
2、请根据第二步观察到的现象，完成网页和图片的保存在线反馈练习。
出现情况
图片在网站文件夹内
图片不在网站文件夹内
图片不在网站文件夹内
时，我选择

A、取消图片文件的保存

现象
直接保存网页，不询问是否要保存图片。
B、
保存图片文件，但不更改文件夹

C、保存图片文件时，更改其所在文件夹

结论：1、网页和图片（一定，不一定）要保存在网站
文件夹
内。
2、图片应该保存在 文件夹中。
表二
想一想：上传网页和上传网站至个人档案袋，在浏览器中浏览网页的结果一样吗？为什么？
（ 课堂预见：学生在保存时会发现与其他office软件的保存过程有不同的地方，有些同学不知所措，
有些同学知道要将图片保存到站点中，但很少有同学会将图片保存在网站的images分类文件夹中。让
学生自主探究看看不同的处理方法得到的结果会是一样的吗？让学生悟出“图片”和“网页”跟着一
起 走的道理。）
板书：1、网页和图片都要保存在网站文件夹内
2、图片保存在images文件夹中
3、“图片”和“网页”跟着一起走
四、网页中图片的应用
展示学生的作品，让学生互相评论，发现问题，讨论得出正确决定。
（课前预见：学生由于心理年龄特征，可能对图片的插入非常感兴趣，往往在一个网页中大量地放入了各种图片，有与主题相关的，也有无关主题的。这时需要教师指出需要他们在插入图片时要考虑的问题：< br>①图片不能太大，网络这种特殊状态下，受带宽的限制，人们是很难忍受等待之苦的，这就要求把图片的< br>体积缩小，同时又要使图片尽量清楚，直观，最大限度的发挥它的作用，把握这个度是很关键的。②另外< br>图片的排布也很讲究，特别是多图的情况，就要是图片与图片之间的联系凸现，同时又要融为一个整体，< br>使看起来有条理。③图片的插入应与网页主题呼应。）

学习好资料 欢迎下载
板书：网页中图片的应用
图片大小适当，图片布局合理，图文环绕，烘托主题，……
五、小结
网页制作中要注意的问题
学到的技术及所解决的问题
学习过程中，所采取解决问题的方法
解决问题过程中获得体会




表三
六、拓展练习
练一练：（图片在pic文件夹中选择）
1、在web站点文件夹的中，选择图片插入。
2、调整网页中的图片，并合理布局。
3、给网页加上适当的网页背景图片或表格背景图片。（选做）
4、保存好文件，将web站点上传至过程性评价平台的个人档案袋中。

学习好资料 欢迎下载

预期效果
落实的知识技能：一是通过让学生观察截图，了解图片在网页中的作用。二是利用迁移教学法，让学
生找 到网页中插入图片的方法。通过学生的观察和检验，让学生知道浏览器窗口和网页编辑器软件中的预
览效 果在没保存之前是不一样的。三是要学生掌握网页和图片的保存。在学业水平考试中发现有很多学生
在上 传了网页后，图片无法显示。后来发现是学生不能理解网页和图片要跟着一起走的道理。所以设想在
课中 先让学生自己去体验二种情况：1、图片不在站点文件夹内的话，是否要把图片保存到站点文件夹中。
2 、如果把图片保存到网站里了，让学生尝试不同的上传方法，得到的结果是不同的。从而感悟到图片与
网 页一起走。四是要学生初步学会在网页中合理布局图片。初预的学生掌握插入图片的技能没多大的问题，
但是他们的关注点放在图片插入上，而忽视图片大小，图片内容，图片布局和图文环绕对网页整体效果的
作用。
培养的能力素养：通过观察，尝试，检验的过程，知道举一反三，归纳总结的学习方法。 养成的意识习惯：一是培养学生及时存盘的习惯。有些学生可能在平时操作时没有养成及时对修改
的 作品进行存盘操作的习惯，就无法看到修改的结果。我设想让学生操作后，发现问题引起思考，发现及
时 保存文件的重要性，使学生养成及时存盘的好习惯。二是养成合理分类存放文件的学习习惯。发现大多
数 同学在将图片保存到站点的时候，直接就保存在站点文件夹根目录，而不会保存到站点的分类文件夹中。
如果网站比较大型的话，文件不分类管理的话，就会显得杂乱无章。设想引导学生观察网页和图片的保存
时的对话框，让学生知道网站中文件管理的思想，从而养成合理分类存放文件的学习习惯。
提高的教师能力：