苏教版《初中信息技术》8年级第3章《H5快速制作网页》教学设计_

《H5快速制作网页》教学设计

一、学习内容分析

《H5快速制作网页》是苏教版《初中信息技术》8年级第3章《主题网站设计与制作》第2节《制作网页》中第1课时的内容。H5是指第5代HTML标记语言，其搭建的站点可方便地应用于PC、Android、iOS等多种平台，它为互联网内容的呈现提供了一种全新的框架和平台，包括免插件的音视频、图像、动画、本地存储以及更多酷炫的功能。通俗地说，H5是一种创建网页的方式，用H5创建的网页以文字、图片、动画、声音等相结合的富媒体出现，页面图文并茂、生动活泼、传达方便、易于推广。

二、学习者分析

本节课的学习对象是八年级的学生，处于这一年龄段的学生，思维活跃，具备一定的理解能力和较强的自学能力。通过前面的学习，学生已熟练使用WPS演示文稿等软件，也掌握了规划设计主题网站的方法。本节课以WPS H5软件为平台，学习用H5快速制作网页。虽然学生从未接触过WPS H5，对于陌生软件的学习会有些畏难情绪，但是WPS H5与WPS演示文稿软件使用有很多相似之处，相信通过引导，学生能摸索出软件使用中的共性特点。

在日常生活中，学生们经常能接触到各种各样的手机H5网页，如企业宣传、个人简历、邀请函、纪念册等，这些H5网页给大家带来了全新的体验，技术本身带来的新奇感让学生心生向往。

三、学习目标

1、能列举H5网页的特点；掌握在WPS H5软件中添加和编辑文字、图片、动画等元素的方法，学会设置对象属性的方法。

2、通过制作主题班会邀请函，经历制作H5网页的基本过程。

3、感悟H5网页制作并非难事，软件使用有共通之处。

四、教学重点及难点

教学重点：使用WPS H5软件快速制作图文并茂的网页。

教学难点：WPS H5软件中不同对象的属性设置。

五、教学策略

技术知识的学习并不是一味传授给学生技术的概念、规则和一般原理等这样一组抽象信息，而是为了有效地服务于现实生活和问题解决，其教学场景应该尽可能地发生在真实或接近于真实的情境中，通过具体的情境激发学生的学习动机和兴趣。本节课就以制作“班会邀请函”为主题设置了六个环节：（1）创设情境，初认H5；（2）根据需求，规划H5；（3）知识迁移，制作H5；（4）自主探究，美化H5；（5）作品展示，共析H5；（6）知识梳理，展望H5。

通过六个环节，在课堂中呈示了一个知识的“亲缘”关系图，设计了6个层层递进的活动：活动1：体验H5邀请函，认识H5。活动2：根据需求，选择素材，规划H5。H5作品“麻雀虽小，五脏俱全”。通过一个表格让学生规划出整体构想对于作品的完成会起到事半功倍的作用。活动3：认识WPS H5界面。采用知识迁移，与之前学过的WPS演示对比，引导学生去探究WPS H5与WPS演示不同处和相同处，进而帮助学生利用已学的知识、技能成功地解决新软件中的问题。活动4：利用WPS H5软件，制作邀请函H5。采用局部“翻转课堂”的形式，通过微视频和问题，引导学生思考探究。在学生遇到问题和困难时，师生共同分析问题所在，在问题中获得新知。活动5：美化1

完善邀请函H5。通过作品剖析，让学生带着目的去美化邀请函，以减少学生操作的盲目性；活动6：发布和评价作品。给出评价量规，学生准确把握评价要点，从而获得更具针对性的反馈信息，来修改和完善自己的作品，真正实现“以评促学”。

整个课堂一方面暴露学生各种疑问、困难、障碍；另一方面也是展示学生聪明才智、独特个性、创造成果的过程，让学生有意义、有价值得学习。

六、教学过程

（一）创设情境，初认H5

蓝天保卫战，我是行动者，本周为我校的环境保护周。为了培养大家垃圾分类的好习惯，呼吁全社会人人动手，一起来为改善生活环境作努力，在本周六晚上我们班级将召开线上班会，主题为“垃圾分类我先行，美丽环境我保护”。

思考：本次线上班会要邀请家长参加，你会选择什么样的方式来做出邀请呢？（口头传达、短信、纸质邀请函等）

活动1：体验““垃圾分类我先行，美丽环境我保护”主题班会邀请函H5”，初认H5。

（1）同学在电脑浏览器中打开，老师在手机浏览器中打开（网址：/p/）。 浏览后回答以下问题：

①不同平台的浏览效果是否一致？说明什么？

②这支H5中具有哪些媒体元素？

③用户能参与其中吗？

④你会用什么方式推广这支H5？

小结：H5具有跨平台、支持多媒体、可交互、易推广等优势。以上特点使得H5可能成为我们发出邀请的首选。

（2）“邀请函H5”为何如此吸引人？观看视频，思考到底什么是H5？

小结：H5是指第5代HTML标记语言，也指用H5语言制作的一切数字产品。通俗地说，H5是一种创建网页的方式。用H5创建的网页图文并茂、生动活泼、传达方便、易于推广。

设计意图：与H5相关的概念性知识抽象、枯燥难懂，如果采用讲授法，学生并不容易理解。2

因此本节课创设了学生现实生活中的情境，以制作线上主题班会邀请函H5为主题，设计了4个问题，每个问题目标指向明确，容易引起学生的共鸣，激发学生的思考并得出结论。通过微视频用通俗易懂的语言帮助学生进一步认识H5，内化知识。

（二）根据需求，规划H5

凡事预则立，不预则废，要制作主题班会邀请函，首先对每个页面的内容、素材等进行一个简单规划。

活动2：根据需求，选择素材，规划邀请函H5。

邀请函规划表

风格选择 简洁大方 活泼明亮 自然清新 古朴典雅

页面序号 主要内容 素材的类型及名称

文本_________________________

页面1

图片_________________________

背景_________________________

其它_________________________

文字_________________________

页面2

图片_________________________

背景_________________________

其它_________________________

……

设计意图：学生已经学习过网站的规划，所以容易理解规划的重要性。教师通过搭建“规划表”这个支架，引导学生根据制作主题班会邀请函的需求，对所要制作的邀请函进行初步的规划，帮助学生理清楚每个页面的内容和所需添加的元素。

（三）知识迁移，制作H5

能够用于开发H5网页的工具很多，今天以WPS H5软件工具为平台，学习使用H5快速制作网页。

活动3：认识WPS H5界面。

回顾WPS演示文稿界面，认识WPS H5界面。

小结：相同之处：_______________________（选项卡位置、页面位置、编辑区域）

不同之处：_______________________（WPS H5界面更简单，保存预览方式位置不同）

3

活动4：利用WPS H5软件，制作邀请函H5。

（1）观看操作指导微视频，自主探究页面的制作，完成以下问题：

①设置背景：选择_____________选项卡，上传添加背景图片。

②添加文字：选择_____________选项卡，添加文字。

③添加图片：选择_____________选项卡，上传添加图片。

④添加页面：选择_____________按钮。

小结：添加文字、图片的一般步骤：选择位置—添加对象。

（2）展示学生作品，师生共同分析存在的问题，寻求解决方式。

问题1：无法移动文本框。

原因分析：只能选中文字，无法移动文本框。需要选中文本框下的小手标志，就可以移动文本框。

问题2：图片挡住了文字

原因分析：图片在上层，文字在下层了。需将文字上移一层。

设计意图：迁移是人类认知的一个普遍特征，因为新的学习总是建立在原有学习基础之上。学生原有的知识是WPS演示的使用，将WPS H5和WPS 演示进行对比，引导学生发现界面组成的“共性”与“个性“，让学生认识WPS H5的界面，能初步尝试探究WPS H5的操作。在制作H5时采用局部“翻转课堂”的形式，通过高效、简短的微视频和几个思考题，引导学生思考探究；在学生遇到问题和困难时，师生共同分析问题，解决问题。给学生“瑞士奶酪式”知识建构时间，使学生从规律的获得到知识的应用有一个过渡和渐进的过程。

（四）自主探究，美化H5

活动5：美化完善邀请函H5。

（1）邀请函中的标题、内容文字等选用什么样的字体、字号合适？如何设置？

（2）如何选择图片，修改大小？

4

（3）如何设置元素的动态效果，使得网页更生动？

小结：（1）选中文字或图片——工具栏——修改设置。 “邀请函”等标题文字字号一般选用大些，宜用饱满的字体，以达到醒目的作用；内容用于提供具体信息，文字字号可以小些。（2）图片选用要符合主题，色彩和谐。字体颜色与背景要有一定的对比度。（3）选择要添加动态效果的对象——选择动画命令。注意：设置合理、适度的动态效果，可以给观赏者带来较好的视觉体验。

设计意图：对邀请函的美化可分成两个部分：一是对邀请函中的文字、图片进行美化，二是合理设置动态效果。单从技术角度来讲，这些操作是比较简单的，只要学会设置属性面板即可。但是邀请函的美化不是天马行空，随心所欲，还需要一定的艺术欣赏能力。因此首先让学生带着问题思考如何设置文字、图片？设置动效时需要注意的问题？得出一定的结论后，让学生带着构思去美化邀请函，以减少学生操作的盲目性。

（五）作品展示，共析H5

活动6：发布和评价作品。

（1）对于制作好的作品，将其发布到网上，这样其他人就可以通过电脑和手机访问你的作品。请将当前的网页发布。

（2）同桌之间用发布的网址或二维码相互访问对方的作品。

（3）根据评价表对同桌的作品进行评价。

评价指标

邀请函内容完整

文字的字体、颜色、大小合适

图片选用符合主题

整体搭配有层次、有新意

动态效果设置合理

同伴

意见

（4）根据同伴及老师意见进一步修改作品。

设计意图：学生在制作完成邀请函后，进行保存，发布就可以浏览到自己的成品，极大地提高了学生的学习兴趣。将学生的作品进行展示，师生共同赏析作品，根据评价表进行点评，给出建议，然后进一步完善作品。

（六）知识梳理，展望H5

展示思维导图，梳理本节课内容：

评价结果

A

B

C

自我

评价

5

观看视频，结束本课：本节课我们一起完成了邀请函H5的制作，班会课后，你的家庭对垃圾分类有什么好建议、好做法，同学们也可以制作成h5，一起分享和推广。当今社会H5可谓是无处不在，H5可以是各种宣传网页、在线游戏，甚至户外大屏中的互动也可以是H5。在未来5-10年内，H5或将会成为移动互联网领域的主宰者。

设计意图：借助思维导图，将关键知识点结构化，清晰形象地呈现出各知识点的脉络关系，有助于学生从整体上把握知识，完成知识的建构。最后观看H5应用视频，了解H5的日常应用，对未来展望，进行情感升华。

6