初中信息技术苏科版八年级全册第3章 设计与制作主题网站第2节 制作网站1 H5快速制作网页教案设计

这是一份初中信息技术苏科版八年级全册第3章 设计与制作主题网站第2节 制作网站1 H5快速制作网页教案设计，共8页。教案主要包含了教学课题，教材分析，学习者分析，教学目标，教学重难点分析，教学策略与方法，教学准备，教学过程等内容，欢迎下载使用。

H5快速制作网页（第三章 第二节 第1课时）
【教材分析】
《H5快速制作网页》是2018版江苏省初中《信息技术》教材八年级第三章第二节第一课时的内容，是相对于之前的教材版本中新增的一部分。H5网页设计紧跟时代潮流，许多微信网页都是使用H5在线制作平台设计出来的，本节课则是使用H5常见的在线制作平台Ih5为例，变繁琐的代码编写为可视化的所见所得傻瓜式的设计，最终稿还可以以时下流行的二维码形式发布，学生可以在手机、平板上欣赏，关键的学生掌握设计方法之后还可以设计诸如游戏、竞猜类的网页，这足以让学生疯狂，学习兴趣倍增。因此，教材中将此节内容放在了传统的网页制作软件Dreamweaver 和Frantpage之前，一上台就抓兴趣，后面则事半功倍了。所以，本节内容地位很重要，是本章内容的“先锋官”。
【学习者分析】
本节内容学习对象为八年级的学生，绝大多数都有着玩手机游戏、浏览手机动态网页的经历，网龄也相当的长，从浏览网页被引导到自己动手设计网页这对他们来说不是很困难，甚至有的学生已经有过制作网页的经历。教师使用自制的小游戏网页开篇引导，学生容易产生浓厚的学习兴趣，而且iH5良好友善的在线编辑界面对于八年级学生来说非常容易上手。
【教学目标】
知识与技能：
1．掌握H5的概念及特点；
2. 了解H5常见的一些在线制作平台；
3. 登陆iH5平台，试用工具创建作品；
4. 认识iH5 界面窗口，掌握各部分的功能及使用方法；
5. 掌握在iH5 中设计简单的网页，并能保存发布。
过程与方法：
1．通过iH5 的打开、创建作品、设计作品、保存、发布作品等一系列操作，锻炼学生的动手操作实践能力；
2．通过自主探究设计第二张页面，培养学生的自主创新、动手设计能力；
3．利用课堂《学习评价表》的填写计分让学生完成课堂学习的过程性自我评价。
情感态度价值观：
教师的小游戏作品的使用，让学生产生了浓厚的学习兴趣；
基于网络的在线平台的现场设计使用，大大提高了学生的学习主动性，增加了学习内驱力；
《学习评价表》的使用让学生养成注重学习过程，重视自我评价的好习惯。
【教学重难点分析】
教学重点：在iH5在线平台上设计网页。
教学难点：给文本、图片、按钮等工具添加动态效果或者触发事件。
【教学策略与方法】
因为本节课教学内容新颖，为了学生更好的掌握方法，我前半场主要采取教师演示——学生模仿、边讲边练的形式授课，在学生基本掌握了平台各部分功能之后，后半场我采取了学生自主创新设计的教学形式，教师只是给予适当的指导和点评。
【教学准备】
网页主题“动物——人类的朋友”的相关素材：文字、图片；
教师提前利用iH5设计一个简单的拼图小游戏；
教学机房网络的保障。
【教学过程】
教学环节
教学主要流程
设计意图
第一环节
游戏展示
导入新课

1.教师：同学们喜欢玩游戏吗？请一位同学到老师的机器这儿玩一个拼图游戏。
（学生集体兴奋，踊跃上前）
2.这个游戏虽然不精美，但是确是老师自己设计的，你们想不想自己也能设计一个小游戏呢？
（学生：想）
3.想自己设计游戏，今天就请同学们把老师介绍的这个在线软件学好了，保证下一节课你就可以出山自己设计游戏啦。
通过一个简单的小游戏，将学生的学习兴趣激发起来，为本节课的在线网页编辑打下重要的基础。
第二环节
教师演示
学生探究

1.关于H5的介绍
H5是指第五代HTML标记语言，但它不再仅是一种标记语言，它为下一代互联网提供了全新的框架和平台，在这个平台上，视频、音频、图像、动画等同电脑的交互都被标准化。它可以轻易的在不同的平台、不同的终端设计、播放、展示和应用。
2.思考题：你知道H5有哪些常见的在线制作平台吗？（动手搜一搜）
（学生上网搜索）
未来应用、70度、咫尺微页、兔展、MAKA、易企秀、初页、互动大师等。其中VXPLO互动大师就是我们这节课要学习的ih5，它是一套完全自主研发的设计工具，允许在线编辑网页交互内容，研发时间超过8年，有超过50项专利。它支持各种移动端设备和主流浏览器，能够设计制作出PPT、应用原型、数字贺卡、相册、简历、邀请函、广告视频等多种类型的交互内容。《吴亦凡入伍》《宋仲基结婚照》等百万级阅读浏览传播量的H5就是出自这强大的iH5。
今天就请同学们跟老师一起来学习下iH5怎么用。
3. iH5界面认识
（1）进入iH5界面（网址），主界面选择使用者身份：教师、学生、工程师等。
（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.打开老师所给的网址，对本节课的学习内容、学习情况做一个问卷星在线问卷，完成后提交。
学生对自己本堂课的学习情况进行自我评价