H5快速制作网页教学设计 【教学课题】 H5快速制作网页（第三章 第二节 第1课时）【教材分析】H5快速制作网页是江苏省初中信息技术教材八年级第三章第二节第一课时的内容，是相对于之前的教材版本中新增的一部分。H5网页设计紧跟时代潮流，许多微信网页都是使用H5在线制作平台设计出来的，本节课则是使用H5常见的在线制作平台Ih5为例，变繁琐的代码编写为可视化的所见所得傻瓜式的设计，最终稿还可以以时下流行的二维码形式发布，学生可以在手机、平板上欣赏，关键的学生掌握设计方法之后还可以设计诸如游戏、竞猜类的网页，这足以让学生疯狂，学习兴趣倍增。因此，教材中将此节内容放在了传统的网页制作软件Dreamweaver 和Frantpage之前，一上台就抓兴趣，后面则事半功倍了。所以，本节内容地位很重要，是本章内容的“先锋官”。【学习者分析】 本节内容学习对象为八年级的学生，绝大多数都有着玩手机游戏、浏览手机动态网页的经历，网龄也相当的长，从浏览网页被引导到自己动手设计网页这对他们来说不是很困难，甚至有的学生已经有过制作网页的经历。教师使用自制的小游戏网页开篇引导，学生容易产生浓厚的学习兴趣，而且iH5良好友善的在线编辑界面对于八年级学生来说非常容易上手。【教学目标】知识与技能：1掌握H5的概念及特点；2. 了解H5常见的一些在线制作平台；3. 登陆iH5平台，试用工具创建作品；4. 认识iH5 界面窗口，掌握各部分的功能及使用方法；5. 掌握在iH5 中设计简单的网页，并能保存发布。过程与方法：1通过iH5 的打开、创建作品、设计作品、保存、发布作品等一系列操作，锻炼学生的动手操作实践能力；2通过自主探究设计第二张页面，培养学生的自主创新、动手设计能力；3利用课堂学习评价表的填写计分让学生完成课堂学习的过程性自我评价。情感态度价值观：1 教师的小游戏作品的使用，让学生产生了浓厚的学习兴趣；2 基于网络的在线平台的现场设计使用，大大提高了学生的学习主动性，增加了学习内驱力；3 学习评价表的使用让学生养成注重学习过程，重视自我评价的好习惯。【教学重难点分析】教学重点：在iH5在线平台上设计网页。教学难点：给文本、图片、按钮等工具添加动态效果或者触发事件。【教学策略与方法】因为本节课教学内容新颖，为了学生更好的掌握方法，我前半场主要采取教师演示学生模仿、边讲边练的形式授课，在学生基本掌握了平台各部分功能之后，后半场我采取了学生自主创新设计的教学形式，教师只是给予适当的指导和点评。【教学准备】1. 网页主题“动物人类的朋友”的相关素材：文字、图片；2. 教师提前利用iH5设计一个简单的拼图小游戏；3. 教学机房网络的保障。【教学过程】教学环节教学主要流程设计意图第一环节 游戏展示导入新课 1.教师：同学们喜欢玩游戏吗？请一位同学到老师的机器这儿玩一个拼图游戏。（学生集体兴奋，踊跃上前）2.这个游戏虽然不精美，但是确是老师自己设计的，你们想不想自己也能设计一个小游戏呢？（学生：想）3.想自己设计游戏，今天就请同学们把老师介绍的这个在线软件学好了，保证下一节课你就可以出山自己设计游戏啦。 通过一个简单的小游戏，将学生的学习兴趣激发起来，为本节课的在线网页编辑打下重要的基础。第二环节教师演示学生探究 1.关于H5的介绍H5是指第五代HTML标记语言，但它不再仅是一种标记语言，它为下一代互联网提供了全新的框架和平台，在这个平台上，视频、音频、图像、动画等同电脑的交互都被标准化。它可以轻易的在不同的平台、不同的终端设计、播放、展示和应用。2.思考题：你知道H5有哪些常见的在线制作平台吗？（动手搜一搜）（学生上网搜索）未来应用、70度、咫尺微页、兔展、MAKA、易企秀、初页、互动大师等。其中VXPLO互动大师就是我们这节课要学习的ih5，它是一套完全自主研发的设计工具，允许在线编辑网页交互内容，研发时间超过8年，有超过50项专利。它支持各种移动端设备和主流浏览器，能够设计制作出PPT、应用原型、数字贺卡、相册、简历、邀请函、广告视频等多种类型的交互内容。吴亦凡入伍宋仲基结婚照等百万级阅读浏览传播量的H5就是出自这强大的iH5。今天就请同学们跟老师一起来学习下iH5怎么用。3. iH5界面认识（1）进入iH5界面（网址http:/www.ih5.cn），主界面选择使用者身份：教师、学生、工程师等。（2）右上角两个按钮“试用工具”和“注册”，后者需要手边有手机，随时接受验证码，学生课堂不便注册，可以选择“试用工具”按钮。（鼓励学生回家以后利用手机补上“注册”环节）（3）注册成功以后进入系统，右上角两个按钮，分别是“创建作品”和“我的工作台”，建立新作品可以单击“创建作品”，如果是对已经保存过的作品进行再修改，可以单击“我的工作台”，在“全部作品”标签下寻找需要编辑的作品单击后选择“编辑”即可。（4）单击“创建作品”后出现iH5主界面，各部分功能如下图所示：3. 制作简单网页 （1）网站网页主题：动物人类的朋友（素材分发给学生） （2）学习任务：制作一个欢迎页面包含元素：a标题“欢迎你进入动物人类的朋友网站” b 文本介绍 c 图片 d 按钮（3）制作过程 操作守则：添加工具对象设置静态或者动态属性设置发生的事件（可选） 利用对象树全程调配控制。页面准备：首先保存作品：单击左上角“保存”按钮，弹出“保存作品”对话框，输入页面名称和介绍，保存即可。定位对象树中的舞台工具面板中添加“页面”工具，默认名称“页面1”；选中页面属性面板中修改页面背景；页面元素：A 文本元素同上，对象树面板中定位“页面1”工具面板中单击“文本”工具页面上方正中输入文本“欢迎你进入动物人类的朋友网站”； 选中该文本在属性面板中修改字体、字号、字颜色单击工具栏上的“动效”选择合适的满意的动态效果；可以随时单击页面正上方的“预览”按钮实时观看效果。 【学生探究活动一】按照这个欢迎标题的做法，你们能在标题右下方做一个页面的介绍吗？可以参考老师已经做好的样子。自己试一试，遇到问题可以同学讨论也可以求教老师。B 图片元素 添加图片同添加文字一样的方法。 定位页面1工具面板中单击“图片”工具在弹出的图片位置中找到要插入进来的图片即可； 说明：本节课所有素材最好放在同一个文件夹下面。 选中图片在属性面板中添加图片的静态属性，例如阴影效果、倾斜、放大缩小等；【学生探究活动二】自行添加第二幅图片并对图片进行属性设置。C 按钮元素 按钮是网页中最能体现人机交互性的强大的工具，用iH5来制作按钮不用跟代码打交道，就能轻松制作出交互感强的按钮来。例如以上两个按钮，单击“熊猫”按钮则控制熊猫图片旋转，单击“音乐”按钮则打开音乐“捉泥鳅”并使其从头播放。让我们来看一下如何实现的：定位页面1单击菜单栏“小模块”普通按钮选择一种按钮形式在页面上绘制按钮选中按钮在左侧的属性面板窗口总修改其相关静态属性；在文本框中录入按钮上的文字“熊猫”；【学生探究活动三】试着完成另外一个按钮，按钮文字为“音乐”。教师：按钮需要添加事件才能够触发其起作用选中“熊猫”按钮单击对象树面板右侧第一个按钮“事件”在“触发条件”下拉键中选择“单击”“当前对象”下拉键中选择需要触发的元素，例如“熊猫”图片在“目标动作”下拉键中选择“设置属性”，允许旋转，旋转角度35度单击“预览”观察效果图【学生探究活动四】试着给“音乐”按钮设置事件：单击后重头播放给定的音乐“捉泥鳅.MP3”提示：将教师分发给你们的音乐文件放到你的网页目录下面给页面1加一个“音乐”工具将音乐添加到页面1上 完成后预览，互相观看效果让学生从掌握H5的概念开始，所有的技术活都要从理论走起。避免干枯的理论讲解让学生分心，适时的动手操作容易调动学生的学习气氛，助力教学成效。 万丈高楼平地起，这是一个新软件平台的教学，教师需要从最基础的部分一步一步做个展示，让学生理解才能操作。学习的过程纵然需要老师领路，但是学生也得学会自己探索出下一步，相同类别的只是学习过后需要学生独立操作巩固一遍，知识才能被学生内化。第三环节任务检查展示点拨教师：老师巡视几圈，发觉大部分同学做的都非常的棒，有没有人愿意分享自己的页面给我们大家看一看的呢？（部分学生展示，教师点拨） 个别学生展示学习任务，精彩处教师表扬，可圈点出重点点评。第四环节 自我开拓巩固提升 教师：同学们刚才跟着老师一步一步完成了第一个页面的制作，下面给同学们一个机会，一个让你自我检查提升的机会，请你们独自在这个舞台上再设计一个页面2，上面元素可以简单一点，只有四张图片整齐摆放即可。请你们快速的制作一下。可以小组合作，也可以独自完成。 （学生操作练习）（教师选取个别作业利用“学生机演示”向全班展示） 学生从跟着老师操作到独立完成一个简单页面设计，既能锻炼他们的创新动手能力，又能对刚刚的学习做一个巩固和提升。第五环节自我评价教学反思 1.教师带领学生回顾本节课学习内容，并且对下一节课利用iH5探究做游戏的课程进行了展望，激发了学生进一步学习的动力。2.本节课学习内容你都掌握了吗？你对你的学习过程满意吗？3.打开老师所给的网址，对本节课的学习内容、学习情况做一个问卷星在线问卷，完成后提交。学生对自己本堂课的学习情况进行自我评价