湘电子版信息技术七下第9节 制作HTML5网页教案

湘电子版七年级下册第三单元第9节制作HTML5网页教学设计课题制作HTML5网页单兀第二单兀学科信息技术年级七年级学习目标

1、了解注册并登录制作H5网页软件平台

2、学会利用平台自主设计网页、组合网站和发布作品重点学会利用平台自主设计网页、组合网站和发布作品难点学会利用平台自主设计网页、组合网站和发布作品教学过程教学环节教师活动学生活动设计意图导入新课H5网页中包含文字、图片、动画、声音等媒体形式，借助移动设备可以观看丰富的内容那么如何制作H5网页呢？这节课我们一块制作H5网页听老师讲解调动学生学习的积极性，为以下的学习打下良好的基础讲授新课活动任务请完成主题规划、收集素材等准备工作后，选择在线的H5网页制作工具，制作主题“我的家乡一湖南”的H5网页我的问题如果不会HTML语言，如何制作H5网页？活动建议可以使用H5语言直接制作页面，但这种方法有一定难度对于初学者来说，借助H5编辑器，可简单快速地制作H5网页1选择H5网页制作工具2注册账号并登录3整理素材4选择场景分头制作5小组汇总页面，形成作品6发布网站做H5页面用什么软件比较好？

1.人人秀https://w\vw.rrxiu.net/home#zh了解本节课的问题带着问题可更好的去解决问题人人秀定位傻瓜级操作体验，除了能够制作简单的翻页H5还支持各种互动插件，比如照片投票、游戏、微信红包、抽奖、VR全景、答题等功能，功能十分强大iH5http:〃www.ih

5.cn/1H5定位计款专业级H5制作工具，功能较为强大，用户可以编写代码，但是学习成本较高，不适合不懂代码的初学者Epub360http://www.epub

360.com/epub360的定位和iH5一样，是一款专业级H5制作工具，企业用户较多，很多功能需要开通年度VIP才可以使用易企秀http:〃eqxiu.com/home易企秀定位简单翻页模板H5面向普通用户，用户可以发布模板，模板数量较多Makahttp://\mv.maka.im/Maka的主要用户群体是设计师，操作体验较优，功能较少兔展http://www.rabbitpre.com/兔展定位普通用户，操作体验佳，最近上线的psd导入功能挺实用的70Chttp://70c.com/70c定位普通用户，体验佳，活动比较丰富最酷网http:〃www.zuiku.com/最酷网主要面向企业用户，费用较高，在互动方面做的较好活动过程本节以“易企秀”平台为例学习制作H5网页的基本方法，推荐使用谷歌浏览器访问易企秀创意设计平台旗下产品涵盖H

5、海报、表单、长页、互动、视频等创意设计工具，产品简通过教师的讲解以小组合作的方式，开展探讨交流，完成任务1了解制作H5软件通过教师的讲通过小组合作，加强学生组内团结、共同完成任务拓展思维，培养团结合作的精神通过小组合作，单好用制作快，用户简单操作就可以生成炫酷的翻解，以小组合加强学生组内团页H

5、海报图片、问卷表单、营销长页、互动抽奖作的方式，开结、共同完成任小游戏、特效视频等各种形式的创意作品，快速分享到社交媒体开展营销易企秀提供图片、文字、音乐、视频、报名表单、直拨电话、涂抹、指纹、图集等功能

一、注册并登录“易企秀”平台打开易企秀网站，注册账号后登录完成，如图展探讨交流，完成任务务所示学生小组间讨培养学生组间合试一试论，共同完成作能力，并且炼打开易企秀网站，注册账号后并登录

二、制作网页

1.使用“免费模板”制作H5网页1单击“免费模板”链接，进入免费模板页面注意任务动手能力使用他人制作好的模板要注意版权信息的提通过教师的讲通过小组合作，不解以小组合加强学生组内团2在页面左侧按分类选择适合的场景例作的方式，开结、共同完成任如，选择“地球一小时”3选择某一个在该主题下的场景，预览全部网页，然后单击“立即使用”进入编辑状态4认识编辑区界面，如图所示

①编辑区左侧是模板区，包含文本、艺术字、图片等内容元素

②编辑区右侧是图层管理和页面管理，功能分别为编辑页面中的各兀素和切换要编辑的页面

③编辑区上方是功能导航栏，有效果丰富的各种类型库

④编辑区中间是画布，是编辑网页的工作展探讨交流，完成任务务区，能直观看到编辑效果5选择页面上的某一项内容，会弹出“组件设置”面板，包括“样式”“动画”和“触发”，如图所示6网页编辑完成后，单击“预览和设置”按钮，设置相关信息，如图所示、斗、小试——瓜打开编辑界面，熟悉各项功能

2.选择空白模板，自主设计网页以制作“湖南美景推荐”网页为例1创建空白模板，如图所示，以制作封面页为例O

①导入素材单击功能导航栏的“图片”，可以使用图片库中的素材，也可以上传本地素材，如图所示建议把编辑网页用到的图片素材一起导入，方便应用导入音视频文件也是同样的操作方式

②在页面中添加图片，设置样式单击添加的图片，在“组件设置”面板中设置“样式”“动画”等内容，如图片边框、图片出现的方式等，如图所示设置完成后，我们可通过快捷菜单中的“刷新预览”按钮预览页面效果

③添加文字单击模板区的“艺术字”，选择一种艺术字体，双击修改文字内容，并在弹出的“组件设置”面板中，修改文字的样式和动画属性，如图所示

④添加形状为了让页面更生动，内容更丰富，可配合网页内容添加不同的“元素”，如图所示学生小组间讨论，共同完成任务通过老师演示学生动手操作，提高动手能力小组交流、分享培养学生组间合作能力，并且炼动手能力培养学生动手操作能力，并且锻炼学生的语言组织能力和表达的能力

⑤编辑页面单击编辑区右侧的“图层管理”，可以选择编辑页面中的元素，包括调整顺序、复制、删除等，如图所示2在“页面管理”中，单击“常规页”，添加新的空白页，编辑其他页面，如图所示3设置、保存场景网页编辑完成后，单击“预览和设置”按钮，编辑网页标题和内容描述，保存网页，如图所不学生小组间讨培养学生组间合作能力，并且炼试一试论，共同完成动手能力尝试创建自己的作品

三、组合、发布作品.小组成员相互浏览网页对照网站结构，小组成员相互检查网页是否达到预期效果，内容是否完整无误.组合网站任务“我的作品”列表中显示了已保存的网页，可通过教师的讲通过小组合作，以单击预览效果或者再次进行编辑解以小组合加强学生组内团把编辑完成的场景统一转赠给小组中的某一作的方式，开结、共同完成任成员，以便组合成网站作品，如图所示展探讨交流，务

3.发布作品单击“发布”按钮，可以分享二维码或网址链接，完成作品发布完成任务试一试学生小组间讨培养学生组间合作能力，并且炼尝试分享、发布自己的作品论，共同完成动手能力资料H5编辑器的组件功能在制作H5网页时，H5编辑器中的一些组件可以直接嵌入使用，如图所示任务视频在页面中添加本地视频通过教师的讲通过小组合作，外链视频只支持外部视频，通过复制“通用解，以小组合加强学生组内团代码”将视频添加到页面中图集添加一组图片（最多6张），在页面中的同一位置循环播放链接功能与演示文稿中的超链接类似，除内部链接、外部链接，还可以跳转到“拨打电话”位置电话直接调用〃链接”中的“拨打电话”选项，单击后跳转到拨号页面音效在页面中对按钮或图片添加声音效果，单击后播放计数在页面中添加类似“点赞”的功能，单击后计数加1统计在页面中添加观看统计功能，每浏览一次计数加1计时在页面中添力口正计时或倒计时功能，计时完毕后显示预设文本地图在页面中添加〃位置”信息，添加后可以直接调用导航（在线模式）画板在页面中添加一个矩形的“涂鸦”区域，用户可以利用触摸屏完成“涂鸦”课堂练习制作H5网页的流程是什么？作的方式，开展探讨交流，完成任务学生小组间讨论，共同完成任务，并分组汇报结、共同完成任务培养学生独立完成练习的能力课堂小结总结本节课所学内容学生回答梳理本节课的知识点，完成学习目标，培养学生总结概况能力板书设计

一、注册并登录“易企秀”平台

二、制作网页.使用“免费模板”制作H5网页.选择空白模板，自主设计网页

三、组合、发布作品[.小组成员相互浏览网页.组合网站.发布作品。