湘电子版（2019）七年级下册第三单元 网站设计与制作第9节 制作HTML5网页说课ppt课件

导入新课

H5网页中包含文字、图片、动画、声音等媒体形式，借助移动设备可以观看丰富的内容。那么如何制作H5网页呢？这节课我们一块制作H5网页。

听老师讲解

调动学生学习的积极性，为以下的学习打下良好的基础

讲授新课

活动任务

请完成主题规划、收集素材等准备工作后，选择在线的H5网页制作工具, 制作主题“我的家乡一湖南”的H5网页。

我的问题

如果不会HTML语言，如何制作H5网页?

活动建议

可以使用H5语言直接制作页面，但这种方法有一定难度。对于初学者来说，借助H5编辑器，可简单快速地制作H5网页。

(1) 选择H5网页制作工具。 

(2) 注册账号并登录。

(3) 整理素材。

(4) 选择场景分头制作。

(5) 小组汇总页面，形成作品。

(6) 发布网站。

做H5页面用什么软件比较好？

1. 人人秀（ https://www.rrxiu.net/home#zh ）

 人人秀定位傻瓜级操作体验，除了能够制作简单的翻页H5，还支持各种互动插件，比如照片投票、游戏、微信红包、抽奖、VR全景、答题等功能，功能十分强大。

2. iH5（http://www.ih5.cn/ ) 

iH5定位于一款专业级H5制作工具，功能较为强大，用户可以编写代码，但是学习成本较高，不适合不懂代码的初学者。

3. Epub360（http://www.epub360.com/ ） 

epub360的定位和iH5一样，是一款专业级H5制作工具，企业用户较多，很多功能需要开通年度VIP才可以使用。

4. 易企秀（http://eqxiu.com/home ）  易企秀定位简单翻页模板H5，面向普通用户，用户可以发布模板，模板数量较多。

5. Maka（http://www.maka.im/ ）  Maka的主要用户群体是设计师，操作体验较优，功能较少。

6. 兔展（http://www.rabbitpre.com/ ）  兔展定位普通用户，操作体验佳，最近上线的psd导入功能挺实用的。

7. 70C （http://70c.com/ ）  70C定位普通用户，体验佳，活动比较丰富。

8. 最酷网（http://www.zuiku.com/ ）  最酷网主要面向企业用户，费用较高，在互动方面做的较好。

活动过程

本节以“易企秀”平台为例学习制作H5网页的基本方法，推荐使用谷歌浏览器访问。

易企秀创意设计平台旗下产品涵盖H5、海报、表单、长页、互动、视频等创意设计工具，产品简单好用制作快，用户简单操作就可以生成炫酷的翻页H5、海报图片、问卷表单、营销长页、互动抽奖小游戏、特效视频等各种形式的创意作品，快速分享到社交媒体开展营销。

易企秀提供图片、文字、音乐、视频、报名表单、直拨电话、涂抹、指纹、图集等功能。

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

打开易企秀网站，注册账号后登录完成，如图所示。

试一试

打开易企秀网站，注册账号后并登录

二、制作网页

1.使用“免费模板”制作H5网页

(1) 单击“免费模板”链接，进入免费模板页面。

注意

使用他人制作好的模板要注意版权信息的提示。

(2) 在页面左侧按分类选择适合的场景。例如，选择“地球一小时”。

(3) 选择某一个在该主题下的场景，预览全部网页，然后单击“立即使用” 进入编辑状态。

(4)认识编辑区界面，如图所示。

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

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

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

④ 编辑区中间是画布，是编辑网页的工作区，能直观看到编辑效果。

(5) 选择页面上的某一项内容，会弹出“组件设置”面板，包括“样式” “动画”和“触发”，如图所示。

(6) 网页编辑完成后，单击“预览和设置”按钮，设置相关信息，如图所示。

试一试

打开编辑界面，熟悉各项功能。

2.选择空白模板，自主设计网页

以制作“湖南美景推荐”网页为例。

(1)创建空白模板，如图所示，以制作封面页为例。

①导入素材。

单击功能导航栏的“图片”，可以使用图片库中的素材，也可以上传本地素材，如图所示。

建议把编辑网页用到的图片素材一起 导入，方便应用。

导入音视频文件也是同样的操作方式。

②在页面中添加图片，设置样式。

单击添加的图片，在“组件设置”面板 中设置“样式” “动画”等内容，如图片边框、图片出现的方式等，如图所示。

设置完成后，我们可通过快捷菜单中的“刷新预览”按钮预览页面效果。

③添加文字

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

④添加形状。

为了让页面更生动，内容更丰富，可配合网页内容添加不同的“元素”，如图所示。

⑤编辑页面。

单击编辑区右侧的“图层管理”，可以选择编辑页面中的元素，包括调整顺序、复制、删除等，如图所示。

(2)在“页面管理”中，单击“常规页”，添加新的空白页，编辑其他页 面，如图所示。

(3)设置、保存场景。

网页编辑完成后，单击“预览和设置”按钮，编辑 网页标题和内容描述，保存网页，如图所示。

试一试

尝试创建自己的作品。

三、组合、发布作品

1.小组成员相互浏览网页

对照网站结构，小组成员相互检查网页是否达到预期效果，内容是否完整无误。

2.组合网站

“我的作品”列表中显示了已保存的网页，可以单击预览效果或者再次进行编辑。

把编辑完成的场景统一转赠给小组中的某一成员，以便组合成网站作 品，如图所示。

3.发布作品

单击“发布”按钮，可以分享二维码或网址链接，完成作品发布。

试一试

尝试分享、发布自己的作品。

资料

H5编辑器的组件功能

在制作H5网页时，H5编辑器中的一些组件可以直接嵌入使用，如图所示。

视频：在页面中添加本地视频。

外链视频：只支持外部视频，通过复制“通用代码”将视频添加到页面中。

图集：添加一组图片（最多6张），在页面中的同一位置循环播放。

链接：功能与演示文稿中的超链接类似，除内部链接、外部链接， 还可以跳转到“拨打电话”位置。

电话：直接调用"链接”中的“拨打电话”选项，单击后跳转到拨号页面。

音效：在页面中对按钮或图片添加声音效果，单击后播放。

计数：在页面中添加类似“点赞”的功能，单击后计数加1。

统计：在页面中添加观看统计功能，每浏览一次，计数加1。

计时：在页面中添力口正计时或倒计时功能，计时完毕后显示预设文本。

地图：在页面中添加"位置”信息，添加后可以直接调用导航（在线模式）。

画板：在页面中添加一个矩形的“涂鸦”区域，用户可以利用触摸 屏完成“涂鸦”。

课堂练习

制作H5网页的流程是什么？

了解本节课的问题

通过教师的讲解，以小组合作的方式，开展探讨交流，完成任务。

了了解制作H5软件

通过教师的讲解，以小组合作的方式，开展探讨交流，完成任务。

学生小组间讨论，共同完成任务。

通过教师的讲解，以小组合作的方式，开展探讨交流，完成任务。

学生小组间讨论，共同完成任务。

通过老师演示学生动手操作，提高动手能力。小组交流、分享

学生小组间讨论，共同完成任务。

通过教师的讲解，以小组合作的方式，开展探讨交流，完成任务。

学生小组间讨论，共同完成任务。

通过教师的讲解，以小组合作的方式，开展探讨交流，完成任务。

学生小组间讨论，共同完成任务，并分组汇报。

带着问题可更好的去解决问题

通过小组合作，加强学生组内团结、共同完成任务

拓展思维，培养团结合作的精神

通过小组合作，加强学生组内团结、共同完成任务

培养学生组间合作能力，并且炼动手能力

通过小组合作，加强学生组内团结、共同完成任务

培养学生组间合作能力，并且炼动手能力

培养学生动手操作能力，并且锻炼学生的语言组织能力和表达的能力。

培养学生组间合作能力，并且炼动手能力

通过小组合作，加强学生组内团结、共同完成任务

培养学生组间合作能力，并且炼动手能力

通过小组合作，加强学生组内团结、共同完成任务

培养学生独立完成练习的能力。

课堂小结

总结本节课所学内容

学生回答

梳理本节课的知识点，完成学习目标，培养学生总结概况能力

板书设计

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

二、制作网页

1.使用“免费模板”制作H5网页

2.选择空白模板，自主设计网页

三、组合、发布作品

1.小组成员相互浏览网页

2.组合网站

3.发布作品