《网页制作教学设计一》由会员分享，可在线阅读，更多相关《网页制作教学设计一（4页珍藏版）》请在金锄头文库上搜索。
1、网页制作教学设计（一）学科HTML教师王莉课题在HTML中加入图片课型新授课教 学 目 的知识目标通过学习，使学生熟练掌握网页中图片的导入。能力目标增强学生网页制作能力。德育目标热爱祖国，为使中国网络技术领先世界水平而读 书情感目标制作网页需要热情与激情，只有这样才能制作出 精美独特的网页,才能欣赏美和创造美教学重点1、网页中加入图片的标签2、标宽度和高度属性 WID THHEIG HT的设定3、图片对齐方式：ALIG N属性教学难点图片的对齐方式ALIGN教学手段多媒体教学网络教学教学方法启发式、讨论式目标设计记事通过本节学习，使学生能在网页制作中加入图片，能制作出图 文并茂漂亮的网页教材内
2、容分析及处理在网页中插入图片,是在学生在H TML中学习了文字的编辑， 表格的制作，列表的引入基础上学习的，因此通过本节内容的学习， 学生们将会制作出图文并茂的网页，并且能把图片与文字有规律地 排版,引导学生独立思考，设计出有特色的网页。对在INTERNET上流行的网页上图片的格式分析 网页中主要应用图片格式有JPG、GIF和BMP JPG图片的压缩格式、质量高、大、下载慢 GIF 质量低、小、下载快、动画效果 BMP质最高、文件太大、下载速度更慢建议学生在网页制作中使用JPG与GIF图片，把BMP图片通过 PH OTOS HOP转换成JPG和 GIF图片，应用于网页之中。网页制作教学设计（二
3、）导学过程一、导入通过网络广播教学，在屏 幕上出现一幅精美的网 景网页（图一），把学生 的注意力引入到精美的 网页之中二、学生心里分析：这时学生会跃跃欲试，有 强烈的求知欲望，心想这 图片是如何加上的呢？这时因势利导：告诉学生 加入图片并不难，只要掌 握加入图片的标签即可， 这时进入授课主题 利用广播教学网进行课 堂教学。学习过程（图一）1、打出标题：然后讲解插入图片的标签及属性2、让同学思考：（图一） 是如何制作出来的，通过学习，让学生自己动 手把代码在记事本中打 出，保存成.htm文件 然后通过浏览器显示出 来。3、通过例题让学生思考 在图片插入过程中，绝径 路径与相对路径的区别在HTML
4、 中插入图片（一）图片插入标签标签 格式：说明：SRC属性指明图片文件的绝对、相对 路径及文件名（在此之前学生已学会什么是绝对径，什么 是相对路径）例1 :利用绝对路径与相对路径，在网页中插 入 E盘上 HOME文件夹下的IMG 子文件夹中的 fj.j pg图片，并把网页文件保存在E盘上HOME 下的HTML子文件夹中名为FJ 1. HTM 文件。绝对路径代码如下： 风景 I M G RC =” f i le:/E |/home/img/fj 1. jp g网页制作教学设计 （ 三）#网页制作教学设计（四）养S fl li rrnriyfl JbiI viih1lrwi匸直MlrfrI Mri
5、i曲：. Tilllf*-fjjfHd 效果如图二所示耐 Ad KRlf陀*Q *蛋三d 野/-Fi -叽-1二电*a （图二）（图三）学习过程及效果相对路径代码：vHTM L风景 vlM G SRC =”/img/fj1.jp g”训练过程1、让学生自己动手在记事本上敲入左 侧代码，保存成网页文件，打开浏览 器，观察是否是（图二）效果。2、在标签中加入 width与 height属性控制图片的大小例：width=500 height=300让学生把记事本代码改为”得到如图三所示的效果3、练习图片的对齐方式在网页代码中加入保存为tu2.htm文件 打开浏览器得到（图四）的效果（二）图片大小的控
6、制通过 WID TH为宽度 HE IG HT为高度 单位为象素（三）图片的对齐方式ALIG N = LE FT图片与窗口左端对齐， ALIGN=RIGHT 图片与窗口右端对 齐，ALIG N = CENTE R图片在窗口中居中 默认方式为左对齐训练过程例题及效果（图四）（四）练习 做一个简单网页，要求有图 片有文字，展现班级学生生 活的内容。 上网申请免费空间，把自己 所做主页传上INTERNET, 以展现自我设计才能，展现 美，仓U造美。4、综合练习利用本节课所学的知识和以前所学的综合 知识，制作一网页我的主页 v/TIT LE v/HEA D风景欣赏美丽如画归纳总结广vlMG SRC标签学生总结本节课学了哪些内容 y WIDTH与HEIGHT属性ALIGN属性本节课我们主要学习了如何在HTML中导入图片，掌握图片大 小的控制及图片的对齐方式，通过本节学习及练习,相信各位同学能在网页中加入图片，制作 出精美,漂亮的网页，能展现自我的才华与风采，学会欣赏美，创 造美。
