网页中添加文字及图片──丰富网站的内容》教学设计
鲁滨逊漂流记读书笔记-高考填志愿网站
网页中添加文字及图片──丰富网站的
内容》教学设计
课
件www.5yk
#TRS_AUToADD_28{mARGIN-
ToP:0px;mARG
IN-
BoTTom:0px}#TRS_AUToADD_28P{mARGIN-
To
P:0px;mARGIN-
BoTTom:0px}#TRS_AUToADD_28T
D{mARGIN-
ToP:0px;mARGIN-BoTTom:0px}#TRS_AUToADD_124
9890
715428DIV{mARGIN-ToP:0px;mARGIN-
BoTTom:0px}#TRS
_AUToADD_28LI{mARGIN-
ToP:0px;mARGIN-BoTT
om:0px}**---jSoN--{
ttom
gin-top
mal{TEXT-jUSTIFy:inter-
ideograph
;FoNT-
SIZE:10.5pt;mARGIN:0cm0cm0pt;FoNT-
FAmILy:
esNewRoman
mal{TEXT-jUSTIFy:inter-id
eograph;FoNT-S
IZE:10.5pt;mARGIN:0cm0cm0pt;FoNT
-FAmILy:
man
msoNormal{TEXT-
jUSTIFy:inter-ideograph;FoNT-
SIZE:10
.5pt;mARGIN:0cm0cm0pt;FoNT-
FAmILy:
EXT-ALIGN:justify}_
n1{page:Section1
}_93oL{mARGIN-B
oTTom:0cm}_93UL{mARGIN-
BoTTom:0
cm} 【教材使用】宁教厅审定
山东教育出版社出版软件FrontPageXX
【适用年级】8年级
【适用单元】网页制作第2大节
【教材分析】
教材中本节的内容分为三部分：一是新建网页；二是添<
br>加图片；三是添加背景音乐。第一部分新建网页是本章节的
重点部分，使用导航栏建立网页也是本
章节中的难点；第二
部分给建立好的网页添加文字和图片信息将做为一节课的
内
容；第三部分背景音乐和下一节的网页的背景合成一节课
内容，这样便于学生的理解和掌握。
本节是第二部分为网页添加文字及图片，它是网页中的
两大基本要素。文字
部分在教材中没有提及，上节添加的网
页是空白的，而在实际操作过程中网页中是没有文字的，因
此在这儿必须给学生时间添加文字，结合前面学习的网络搜
索让学生上网搜索信息，使前后知识充分结
合起来，而后才
能添加图片，达到图文并茂。
【学情分析】
学生已经学会了新建网页，建立的网页是空白的，学生
就有“为
空白网页添加文字及图片信息”的欲望，结合因特
网知识让学生为自己创建的网页添加所需的信息，添加
图片
的技能学生已经在word文字处理软件中学习过，因此本节
课知识，学生可以自主学习。
【教学目标】
1．知识目标
（1）掌握为网页中添加文字信息的不同方法。
（2）掌握为网页中添加图片信息的方法。
2．技能目标
通过学生自主学习过程中，掌握为网页中添加信息的不
同方法。
3．情感目标
（1）通过为网页添加文字信息的学习，培养学生的综
合运用知识的能力。
（2）利用插入图片知识，培养学生的图文并茂整体布
局网页的综合信息素养能力。
【教学重点与难点】
学习嵌入式保存素材的方法和分类管理素材的能力。
【课时安排】2课时
【教学方法】任务驱动法
【课前准备】软件FrontPageXX
多媒体广播系统
【教学设计】
第一课时
为网页添加文字信息
教学过程
教师活动
学生活动
教学意图
一、导入部分
（教师打开上节课站点中新建的网页进行广播展示……）
问：大家观察我们上节课使用导航栏添加的网页，网页中缺
什么？
网页中表达信息最常用的就是文字和图片，这节课我们就来<
br>给网页添加文字和图片。
（板书：网页中添加文字和图片）
学生观察后回答：网页中缺文字、图片内容。
直接摆出新建网页后的情况，激发学生为网页添加信息。
二、给网页中添加文字的不同方式
网页中表达信息的主要还是文字。（板书
一、添加文字：）
大家来看我们主页中的文字，是大家自己录入的。（广播展
示……）
（板书
．录入法：）
但是，这种方法对大家来说是
比较费劲的，在我们组织网站
时会准备一些电子资料，我们可以借用现有资料。
（板书
2．使用现有电子资料：）
（任务一：）大家通过“网上邻居”打开教师机的“我的家
乡”的文字资料，看看你的网页中需要哪些，
可以将这些文
字信息放入到自己的网页里。
教师进行辅导……
教师小结方法：
（1）可以使用最基本
的复制粘贴办法来解决；（2）当文档
中的文字资料都需要时，可以使用“插入文件”命令来完成。
（引）在刚才，大家给网页添加了一些文字信息，可是有许
多网页所
需要的信息并没有，怎么办呢？
网络中有许多信息，借助网络可以搜索到自己所需要信息。
（板书
3．网络搜索法：）
（任务
二：）大家可以借助网络查找自己所需要的资料，但
是有的资料不一定立即就用到，因此建议大家在“文
件夹列
表”窗口建立一个网络资源的文件夹，可以分文字、图片等
不同类，将找到的信息可以暂
时放在这些文件夹中；用到的
可以直接复制到网页中。
教师进行辅导……
学生观察理解……
学生实践……
回答：利用网络上网搜索
学生实践……
添加文字就直接的办法就是录入。
引导学生使用现有资料，复习复制粘贴操作。
（1）指导学生正确合理地使用网络资源，通过网络查找到
信息，分类存放在资源包中。
（2）用到了才是学生最需要的，因此将第1节课
准备工作
中“网络资源”文件夹放在这里进行，用来收集网页的素材。
三、小结
通过这节课的学习大家都明白网页中所需文字资料如何获
取了吗？都有哪些途径？
学生自己总结……
学生对自己所学知识进行汇总。
第二课时
为网页添加图片信息
教学过程
教师活动
学生活动
教学意图
一、导入部分
（教师打开上节课站点中新建的网页进行广播展示……）
网页中有
了文字，我们能不能添加一些相应的图片来烘托一
下主题，使网页变得图文并茂，更具有感染力？
回答：可以。
直接导入
二、添加图片
（任务一）组成网页的第二大元素就是图片，大家结合课本
P69完成主页中添加宁夏地区图的操作。
教师进行辅导……
叫一位出错的学生上来操作，其他同学给他找原因及解决的
办法。
教师小结知识点：
打开图片对话框后，要使用“从计算机上选择一个文件”按
钮；
<
br>保存时注意保存到“images”文件夹中，提醒学生注意书中
的“小博士”，用这个办法在今
后插入动画、音乐时可以建
立文件夹分类保存。
未能保存在“im
ages”文件夹中，在文件夹列表窗口中，可
以将图片文件拖动到“images”文件夹中。
插入图片后感觉不合理，可以调整图片，大家可以结合课本
P72的
“知识窗”和“金钥匙”调整自己的网页中的图片。
大家结合老师刚才的解说，从新调整网页中的图片。
（任务三）大
家为自己的网页添加了图片，若想达到图文并
茂，具有感染力时，也要相应地对文字进行修饰。文字的修
饰在学习文字处理软件word时已经学过了，大家试着将你
的网页中的文字进行修饰，达到图
文并茂，赏心悦目的结果。
教师进行指导……
学生实践……
学生观察并指导……
学生纠正错误……
学生实践……
让学生先实践，从中发现错误后再纠正学习的过程。
纠正学生的错误，可以将网页中所需的要素分类保存，培养
学生举一反三的学习
方法。同时要与素材文件夹进行区分。
引导学生使用已知的技能来修饰自己的网页。
三、知识总结
这节课你都学会了什么？
学生自己总结……
【教学反思】
这部分内容使用
两课时，给学生大量的时间来增加网页
中文字和图片的信息，可是其中的操作大部分是先前所学知
识，这里只是进行了一个综合应用，在应用的过程中学习部
分知识，学生在添加网页中的内容时也培养
了学生的成就感，
增强了学生的自信心，也为下一节课美化网页奠定一定的基
础。
调整知识：将第1节课准备工作中“网络资源”文件夹
放在这里进行，学生
查找资料时立即就用到了，用到了才是
学生最需要的。同时在讲解分类保存网页中所需的要素时可
以和网络资源文件夹的功能进行比较。这点知识学生容易混
淆，进行区分是有必要的。
课
件www.5yk
网页中添加文字及图片──丰富网站的
内容》教学设计
课
件www.5yk
#TRS_AUToADD_28{mARGIN-
ToP:0px;mARG
IN-
BoTTom:0px}#TRS_AUToADD_28P{mARGIN-
To
P:0px;mARGIN-
BoTTom:0px}#TRS_AUToADD_28T
D{mARGIN-
ToP:0px;mARGIN-BoTTom:0px}#TRS_AUToADD_124
9890
715428DIV{mARGIN-ToP:0px;mARGIN-
BoTTom:0px}#TRS
_AUToADD_28LI{mARGIN-
ToP:0px;mARGIN-BoTT
om:0px}**---jSoN--{
ttom
gin-top
mal{TEXT-jUSTIFy:inter-
ideograph
;FoNT-
SIZE:10.5pt;mARGIN:0cm0cm0pt;FoNT-
FAmILy:
esNewRoman
mal{TEXT-jUSTIFy:inter-id
eograph;FoNT-S
IZE:10.5pt;mARGIN:0cm0cm0pt;FoNT
-FAmILy:
man
msoNormal{TEXT-
jUSTIFy:inter-ideograph;FoNT-
SIZE:10
.5pt;mARGIN:0cm0cm0pt;FoNT-
FAmILy:
EXT-ALIGN:justify}_
n1{page:Section1
}_93oL{mARGIN-B
oTTom:0cm}_93UL{mARGIN-
BoTTom:0
cm} 【教材使用】宁教厅审定
山东教育出版社出版软件FrontPageXX
【适用年级】8年级
【适用单元】网页制作第2大节
【教材分析】
教材中本节的内容分为三部分：一是新建网页；二是添<
br>加图片；三是添加背景音乐。第一部分新建网页是本章节的
重点部分，使用导航栏建立网页也是本
章节中的难点；第二
部分给建立好的网页添加文字和图片信息将做为一节课的
内
容；第三部分背景音乐和下一节的网页的背景合成一节课
内容，这样便于学生的理解和掌握。
本节是第二部分为网页添加文字及图片，它是网页中的
两大基本要素。文字
部分在教材中没有提及，上节添加的网
页是空白的，而在实际操作过程中网页中是没有文字的，因
此在这儿必须给学生时间添加文字，结合前面学习的网络搜
索让学生上网搜索信息，使前后知识充分结
合起来，而后才
能添加图片，达到图文并茂。
【学情分析】
学生已经学会了新建网页，建立的网页是空白的，学生
就有“为
空白网页添加文字及图片信息”的欲望，结合因特
网知识让学生为自己创建的网页添加所需的信息，添加
图片
的技能学生已经在word文字处理软件中学习过，因此本节
课知识，学生可以自主学习。
【教学目标】
1．知识目标
（1）掌握为网页中添加文字信息的不同方法。
（2）掌握为网页中添加图片信息的方法。
2．技能目标
通过学生自主学习过程中，掌握为网页中添加信息的不
同方法。
3．情感目标
（1）通过为网页添加文字信息的学习，培养学生的综
合运用知识的能力。
（2）利用插入图片知识，培养学生的图文并茂整体布
局网页的综合信息素养能力。
【教学重点与难点】
学习嵌入式保存素材的方法和分类管理素材的能力。
【课时安排】2课时
【教学方法】任务驱动法
【课前准备】软件FrontPageXX
多媒体广播系统
【教学设计】
第一课时
为网页添加文字信息
教学过程
教师活动
学生活动
教学意图
一、导入部分
（教师打开上节课站点中新建的网页进行广播展示……）
问：大家观察我们上节课使用导航栏添加的网页，网页中缺
什么？
网页中表达信息最常用的就是文字和图片，这节课我们就来<
br>给网页添加文字和图片。
（板书：网页中添加文字和图片）
学生观察后回答：网页中缺文字、图片内容。
直接摆出新建网页后的情况，激发学生为网页添加信息。
二、给网页中添加文字的不同方式
网页中表达信息的主要还是文字。（板书
一、添加文字：）
大家来看我们主页中的文字，是大家自己录入的。（广播展
示……）
（板书
．录入法：）
但是，这种方法对大家来说是
比较费劲的，在我们组织网站
时会准备一些电子资料，我们可以借用现有资料。
（板书
2．使用现有电子资料：）
（任务一：）大家通过“网上邻居”打开教师机的“我的家
乡”的文字资料，看看你的网页中需要哪些，
可以将这些文
字信息放入到自己的网页里。
教师进行辅导……
教师小结方法：
（1）可以使用最基本
的复制粘贴办法来解决；（2）当文档
中的文字资料都需要时，可以使用“插入文件”命令来完成。
（引）在刚才，大家给网页添加了一些文字信息，可是有许
多网页所
需要的信息并没有，怎么办呢？
网络中有许多信息，借助网络可以搜索到自己所需要信息。
（板书
3．网络搜索法：）
（任务
二：）大家可以借助网络查找自己所需要的资料，但
是有的资料不一定立即就用到，因此建议大家在“文
件夹列
表”窗口建立一个网络资源的文件夹，可以分文字、图片等
不同类，将找到的信息可以暂
时放在这些文件夹中；用到的
可以直接复制到网页中。
教师进行辅导……
学生观察理解……
学生实践……
回答：利用网络上网搜索
学生实践……
添加文字就直接的办法就是录入。
引导学生使用现有资料，复习复制粘贴操作。
（1）指导学生正确合理地使用网络资源，通过网络查找到
信息，分类存放在资源包中。
（2）用到了才是学生最需要的，因此将第1节课
准备工作
中“网络资源”文件夹放在这里进行，用来收集网页的素材。
三、小结
通过这节课的学习大家都明白网页中所需文字资料如何获
取了吗？都有哪些途径？
学生自己总结……
学生对自己所学知识进行汇总。
第二课时
为网页添加图片信息
教学过程
教师活动
学生活动
教学意图
一、导入部分
（教师打开上节课站点中新建的网页进行广播展示……）
网页中有
了文字，我们能不能添加一些相应的图片来烘托一
下主题，使网页变得图文并茂，更具有感染力？
回答：可以。
直接导入
二、添加图片
（任务一）组成网页的第二大元素就是图片，大家结合课本
P69完成主页中添加宁夏地区图的操作。
教师进行辅导……
叫一位出错的学生上来操作，其他同学给他找原因及解决的
办法。
教师小结知识点：
打开图片对话框后，要使用“从计算机上选择一个文件”按
钮；
<
br>保存时注意保存到“images”文件夹中，提醒学生注意书中
的“小博士”，用这个办法在今
后插入动画、音乐时可以建
立文件夹分类保存。
未能保存在“im
ages”文件夹中，在文件夹列表窗口中，可
以将图片文件拖动到“images”文件夹中。
插入图片后感觉不合理，可以调整图片，大家可以结合课本
P72的
“知识窗”和“金钥匙”调整自己的网页中的图片。
大家结合老师刚才的解说，从新调整网页中的图片。
（任务三）大
家为自己的网页添加了图片，若想达到图文并
茂，具有感染力时，也要相应地对文字进行修饰。文字的修
饰在学习文字处理软件word时已经学过了，大家试着将你
的网页中的文字进行修饰，达到图
文并茂，赏心悦目的结果。
教师进行指导……
学生实践……
学生观察并指导……
学生纠正错误……
学生实践……
让学生先实践，从中发现错误后再纠正学习的过程。
纠正学生的错误，可以将网页中所需的要素分类保存，培养
学生举一反三的学习
方法。同时要与素材文件夹进行区分。
引导学生使用已知的技能来修饰自己的网页。
三、知识总结
这节课你都学会了什么？
学生自己总结……
【教学反思】
这部分内容使用
两课时，给学生大量的时间来增加网页
中文字和图片的信息，可是其中的操作大部分是先前所学知
识，这里只是进行了一个综合应用，在应用的过程中学习部
分知识，学生在添加网页中的内容时也培养
了学生的成就感，
增强了学生的自信心，也为下一节课美化网页奠定一定的基
础。
调整知识：将第1节课准备工作中“网络资源”文件夹
放在这里进行，学生
查找资料时立即就用到了，用到了才是
学生最需要的。同时在讲解分类保存网页中所需的要素时可
以和网络资源文件夹的功能进行比较。这点知识学生容易混
淆，进行区分是有必要的。
课
件www.5yk