数学题初一上册网页制作教学设计(一)

2020年11月22日发(作者：谷牧)
网页制作教学设计(一)

学 科
课 题
HTML

在HTML中加入图片

教 师
课 型
王 莉

新授课

教
知识目标
学
能力目标
目
德育目标
通过学习，使学生熟练掌握网页中图片的导入
。

增强学生网页制作能力
。

热爱祖国，为使中国网络技术领先世界水平而读
书

制作网页需要热情与激情,只有这样才能制作出
1、网页中加入图片的标签
2、标宽度和高度属性 WIDTH HEIGHT的设定
3、图片对齐方式：ALIGN属性

图片的对齐方式ALIGN
多媒体教学 网络教学
启发式、讨论式
通过本节学习,使学生能在网页制作中加入图片,能制作出图
文并茂漂亮的网页.
的

情感目标
精美独特的网页,才能欣赏美和创造美

教 学 重 点
教 学 难 点
教 学 手 段
教 学 方 法
目标设计记事
教材内容分析及处理
在网页中插入图片,是在学生在《HTML》中 学习了文字的编辑,
表格的制作,列表的引入基础上学习的,因此通过本节内容的学习,
学生们 将会制作出图文并茂的网页,并且能把图片与文字有规律地
排版,引导学生独立思考，设计出有特色的网 页。

对在INTERNET上流行的网页上图片的格式分析
网页中主要应用图片格式有JPG、GIF和BMP
．JPG 图片的压缩格式、质量高、大、下载慢
．GIF 质量低、小、下载快、动画效果
．BMP质最高、文件太大、下载速度更慢

建议学生在网页制作中使用JPG与 GIF图片，把BMP图片通过
PHOTOSHOP转换成JPG和GIF图片，应用于网页之中。

1
网页制作教学设计(二)

导学过程
一、 导入
通过网络广播教学，在屏
幕上出现一幅精美的网
景网页（图一），把学生
的注意力引入到精美的
网页之中……

二、 学生心里分析：
这时学生会跃跃欲试，有
强烈的求知欲望，心想这
图片是如何加上的呢？

这时因势利导：告诉学生
加入图片并不难，只要掌
握加入图片的标签即可，
这 时进入授课主题
利用广播教学网进行课
堂教学。


1、打出标题：
然后讲解插入图片的标
签及属性

2、让同学思考：（图一）
是如何制作出来的，
通过学习，让学生自己动
手把代码在记事本中打
出，保存成.htm文件
然后通过浏览器显示出
来。

3、通过例题让学生思考
在图片插入过程中，绝径
路径与相对路径的区别

学习过程

（图一）


在HTML中插入图片

（一）图片插入标签标签
格式：

说明：SRC属性指明图片文件的绝对、相对
路径及文件名
（在此之前学生已学会什么是绝对径，什么
是相对路径）
例1：利用绝对路径与相对 路径，在网页中插
入E盘上HOME文件夹下的IMG子文件夹中的
图片，并把网页文件保存在 E盘上HOME
下的HTML子文件夹中名为文件。
⑴绝对路径代码如下：









2