优质课展台
《H5快速制作网页》教学设计
陈慧  江苏省盐城市初级中学
曹恒来  江苏省盐城市教育科学研究院
●学习内容分析
《H5快速制作网页》是苏教版《初中信息技术》八年级第3章《主题网站设计与制作》第2节《制作网页》第1课时的内容。H5是指第5代HTML标记语言，其搭建的站点可方便地应用于PC、Android、iOS等多种平台，它为互联网内容的呈现提供了一种全新的框架和平台，包括免插件的音视频、图像、动画、本地存储以及更多酷炫的功能。通俗地说，H5是一种创建网页的方式，用H5创建的网页以文字、图片、动画、声音等相结合的富媒体出现，页面图文并茂、生动活泼、传达方便、易于推广。
●学习者分析
本节课的学习对象是八年级的学生，处于这一年龄段的学生，思维活跃，具备一定的理解能力和较强的自学能力。通过前面的学习，学生已熟练使用WPS、Photoshop 等软件，也掌握了规划设计主题网站的
方法。本节课以iH5软件工具为平台，学习用H5快速制作网页。然而，学生从未接触过iH5，对陌生软件的学习，有些畏难情绪，觉得
无从下手。但是，在日常生活中，学生
能经常接触到各种各样的手机H5
网页，如企业宣传、个人简历、邀请
函、纪念册等，这些H5网页给学生
带来了全新的体验，技术本身带来
的新奇感让他们心生向往。
●学习目标
知识与技能：能列举H5网页
的特点；掌握在iH5软件中添加和
编辑文字、图片、动画等元素的方法
以及设置对象属性的方法，理解舞
台、页面、对象之间的层级关系。
过程与方法：通过制作校园
文化艺术节邀请函，经历制作H5网
页的基本过程。
情感态度与
价值观：感悟网
页制作并非难事，
软件使用有共通
之处。
●教学过程
1.创设情
境，初认H5
以艺载德、以
艺促智，一年一度
的校园文化艺术节又开始了，同学们
踊跃报名，比拼才艺。八年级将举行
以“多彩校园，闪亮你我”为主题的
汇报演出，充分展示八年级同学的
青春活力和精神面貌。
思考：本次演出将要邀请家长
参加，你会选择什么样的方式来做
出邀请呢？（口头传达、短信、纸质
邀请函等）
活动1：体验“校园文化艺术
节邀请函H5”，初认H5。
（1）两人一组，一位同学在手
机浏览器中打开（如图1），另一位
同学在电脑浏览器中打开（网址：
file1c666f51560f.iamH5.
cn/v3/idea/sE7mGA2R）。
浏览后
图1
回答以下问题：
①不同平台的浏览效果是否一致？为什么？
②这支H5中具有哪些媒体元素？
③用户能参与其中吗？④你会用什么方式推广这支H5？
小结：H5具有跨平台、支持多媒体、可交互、易推广等优势，以上特点使得H5可能成为我们发出邀
请的首选。
（2）“校园文化艺术节邀请函H5”为何如此吸引人？观看视频（视频截图如图2），思考到底什么是H5？
小结：H5是指第5代HTML标记语言，也指用H5语言制作的一切数字产品。通俗地说，H5是一种创建网页的方式。用H5创建的网页图文并茂、生动活泼、传达方便、易于推广。
设计意图：与H5相关的概念性知识抽象、枯燥、难懂，如果采用讲授法，学生并不容易理解。因此，本节课创设了学生现实生活中的情境，以制
作校园文化艺术节邀请函H5为主题，设计了4个问题，每个问题目标指向明确，容易引起学生的共鸣，激发学生的思考并得出结论。通过微视频用通俗易懂的语言帮助学生进一步认识H5，内化知识。
2.根据需求，规划H5凡事预则立，不预则废。要制作汇报演出邀请函，首先要对每个页面的内容、素材等进行一个简单规划。
活动2：根据需求，选择素材，规划邀请函（如表1）。
设计意图：学生已经学习过网站的规划，所以容易理解规划的重要性。教师通过搭建“规划表”这个支架，引导学生根据制作校园文化艺术节邀请函的需求，对所要制作的邀请函进行初步的规划，帮助学生理清楚每个页面的内容和所需添加的元素。
3.知识迁移，制作H5能够用于开发H5网页的工具很多，今天以iH5软件工具为平台，
学习使用H5快速制作网页。
活动3：“共性”，探“个性”，认识iH5软件。
（1）使用课前申请的账号，登录网址www .iH5，进入在线编辑平台。
（2）对比Photoshop界面，认识iH5界面，出相同之处和不同之处（如图3）。
小结：相同之处：_____________（菜单栏、工具面板、
编辑区）
图2
图3
表1
邀请函规划表
风格选择□简洁大方  □活泼明亮  □自然清新  □古朴典雅
页面序号
页面名称
主要内容
素材的类型及名称文本_________________________
不同之处：______________（对象树面板）
（3）比较Photoshop中的图层面板和iH5中的对象树面板（如表2），思考对象树面板的作用。
小结：对象树面板可以用来管理舞台中的对象，对象树中的层级关系为“舞台→页面→文本、图片等素材”，每个页面中的对象上层覆盖下层。
活动4：利用iH5软件，制作邀请函H5。
（1）观看操作指导微视频，自主探究页面的制作，完成以下问题：
①设置背景：选中页面1，在属性面板中到____________选项，添加背景图片。
②添加文字：选中页面1，在工具面板中选择____________选项。
③添加图片：选中页面1，在工具面板中选择____________选项。
小结：添加文字、图片的一般步骤：选择位置—添加对象。
（2）展示学生作品，师生共同分析存在的问题，寻求解决方式。
问题1：首页、内容页都播放同一素材（如图4）。
原因分析：素材全部都添加在了舞台之中，其层级关系在内容页和首页的上一级。
问题2：内容页没有显示内容（如图5）。
原因分析：素材全部都添加在了首页之中，而不是对应的内容页中。
设计意图：迁移是人类认知的一个普遍特征，因为新的学习总是建立在原有学习基础之上。学生原有的知识是Photoshop软件使用，
将Photoshop和iH5进行对比，引导学生发现界面组成的“共性”与“个性”，让学生初步认识对象树面板，学会利用对象树面板来管理素材。在制作H5时采用局部“翻转课堂”的形式，通过高效、简短的微视频和几个思考题，引导学生思考探究；在学生遇到问题和困难时，师生共同分析问题、解决问题。给学生“瑞士奶酪式”知识建构时间，使学生从规律的获得到知识的应用有一个过渡和渐进的过程。
4.自主探究，美化H5活动5：美化完善邀请函H5。（1）邀请函中的标题、内容文字等选用什么样的字体、字号合适？如何设置？
（2）如何改变图片大小，修改图片的亮度、对比度等？
（3）如何设置元素的动态效果，使得网页更生动？
小结：①选中文字或图片—属性面板—修改设置。“邀请函”等标题文字字号一般选用大一些的，宜用饱满的字体，以达到醒目的效果；内容用于提供具体信息，文字字号可以小些。②图片选用要符合主题，
彩和谐。字体颜与背景要有一定的对比度。③选择要添加动态效果的对象—选择动效命令。注意：设置合理、适度的动态效果，可以给观赏者带来较好的视觉体验。
设计意图：对邀请函的美化可分成两个部分：一是对邀请函中的文字、图片进行美化，
二是合理设
图4
图5  表2
添加页面按钮
置动态效果。单从技术角度来讲，这些操作是比较简单的，只要学会设置属性面板即可。但是，邀请函的美化不是天马行空、随心所欲，还需要一定的艺术欣赏能力。因此，首先让学生带着问题思考如何设置文字、图片，设置动效时需要注意的问题，得出一定的结论后，让学生带着构思去美化邀请函，以减少学生操作的盲目性。
5.作品展示，共析H5活动6：发布和评价作品。（1）对于制作好的作品，将其发布到网上，这样其他人就可以通过电脑和手机访问你的作品。请保存当前的网页并发布到网上。
（2）同桌之间用发布的网址或二维码相互访问对方的作品。
（3）根据评价表（如表3）对同
桌的作品进行评价。
（4）根据同桌及老师的意见进一步修改作品。
设计意图：学生在制作完成邀请函后，进行保存、发布就可以浏览到自己的成品，极大地提高了学生的学习兴趣。将学生的作品进行展示，师生共同赏析作品，根据评价表进行点评，给出建议，然后进一步完善作品。
6.知识梳理，展望H5展示思维导图（如图6），梳理本节课内容。
总结利用iH5制作网页的基本过程，如图7所示。
观看H5应用视频，结束本课：随着信息技术的高速发展，H5可谓无处不在。H5可以是各种宣传网页、在线游戏，甚至户外大屏中
图6
图7
表3
的互动也是H5。在未来5至10年内，H5或将会成为移动互联网领域的主宰者。
设计意图：借助思维导图，将关键知识点结构化，清晰形象地呈现出各知识点的脉络关系，有助于学生从整体上把握知识，完成知识的建构。最后观看H5应用视频，了解H5的日常应用，展望未来，进行情感升华。
应该说，这是一节典型的作品制作课，学生通过完成“校园文化艺术节邀请函”这个H5作品，比较完整地经历了规划、制作、评价等作品制作的整个过程。从本质来说，作品制作属于问题解决式的学习，问题解决式学习需要教师为学生创设一个真实而复杂的情境：“真实”是指情境应来源于学生的学习和生活，具有实际意义；“复杂”则意味着学生现有的知识还不能解决问题，从而能够形成认知冲突。制作校园文化艺术节邀请函这个情境是学生熟悉的，容易引起学生的共鸣，激发学生参与的积极性。学生在制作邀请函的过程中，学习知识，获得技能，形成能力。同时，这个情境也是切实可行的，虽然学生并没有使用过i H5，但其界面与学习过的Photoshop界面有许多共通之处，学生可以把使用Photoshop的经验迁移过来。页面数有一定的选择性，大多数学生2～3页即可完成作品，能力强的学生还可以进一步丰富其内容或美化页面。经过努力，学生都能在一节课内完成这个作品。
要想拍好一部电影，必须要先有剧本。作品制作也需要一个脚本做指导，也就是说，作品制作要从规
划开始。H5作品“麻雀虽小，五脏俱全”，事先规划出整体构想对于作品的完成会起到事半功倍的作用。本课在作品赏析的基础上，通过一个表格把看似空洞的规划落到了实处，学生在填表的过程中，逐步
理清楚每个页面的内容和所需添加的素
材的类型及名称，表格形式简洁、内容
清晰，便于完成，学生容易获得成就感。
但是，对于一个优秀的H5作品来说，规划
阶段还需要考虑调的搭配、内容的协
调、文字的效果等诸多因素，这些内容对
于八年级的学生来说比较抽象，所以做
了合理的舍弃，仅在制作环节通过一些
问题引导学生做了一些比较与思考。
当然，作品制作也离不开技能的学
习，例如，添加和编辑文字、图片、动画，
设置对象属性以及通过对象树管理对象
的层级关系等内容都需要学习。目前来
说，对于技能的学习，绝大多数教师使用
教师示范、学生模仿的方式进行。然而，
这种教学方式并未取得预期的效果，一
种典型的现象就是学生也能理解教师的
示范，可轮到自己操作时还是不知所措。
本课采用局部“翻转课堂”的形式，使用
网站建设网页制作教程微视频来进行示范，学生通过重放、慢
放、定格等控制手段，可以对操作进行
更细致的观察，配套的思考题既是一个
检测工具也是一个学习指引，将学生的
注意引到关键环节。师生共同解决作品
制作过程中遇到的问题和困难，有利于
学生进一步内化所学知识。
评价是作品制作课的最后也是关键
的一步。目前，许多信息技术教师只是采
用口头评价，用自己的眼光对挑选出的少
数作品做一些浮光掠影式的点评，学生
之间的互评也只是“很好，非常好”“你
真是太棒了”这种空乏的评价，这种无
营养评价无法发挥评价促进学生发展的
功能，甚至会把学生引向思维的歧途。作
品评价表实际上是一个评价量规，包括
内容、布局、颜、效果等方面的指标，
便于学生准确把握评价要点，站在一个
客观的角度评价自己或他人的作品，从
而获得更具针对性的反馈信息，来修改
和完善自己的作品，真正实现“以评促
学”。当然，如果能够在需求分析之后就
提供评价量规，学生在动手制作之前，
就能明白什么样的作品是符合要求的作
品，会有助于学生在学习过程中调节努
力的方向，自觉向标准看齐，也能更好地
发挥评价的目标导向功能。
（点评人：江苏省盐城市教育科学研究院 曹恒来）
本文系江苏省教育科学“十二五”规划2015年度课题“基于活动理论的信息技术教学设计研究”（项目编号：D/2015/02/405）研究成果。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。