还剩30页未读，
继续阅读
所属成套资源：湘电子版七年级下册信息技术课件PPT
成套系列资料，整套一键下载
信息技术七年级下册第9节 制作HTML5网页教学演示课件ppt
展开
这是一份信息技术七年级下册第9节 制作HTML5网页教学演示课件ppt，共38页。PPT课件主要包含了我的问题，活动建议，活动过程，制作网页，组合发布作品，总结本节课所讲内容等内容，欢迎下载使用。
H5网页中包含文字、图片、动画、声音等媒体形式，借助移动设备可以观看丰富的内容。那么如何制作H5网页呢？这节课我们一块制作H5网页。
如果不会HTML语言，如何制作H5网页?
可以使用H5语言直接制作页面，但这种方法有一定难度。对于初学者来说，借助H5编辑器，可简单快速地制作H5网页。
(1)选择H5网页制作工具。，(2)注册账号并登录。(3)整理素材。(4)选择场景分头制作。(5)小组汇总页面，形成作品。(6)发布网站。
1. 人人秀（ #zh ） 人人秀定位傻瓜级操作体验，除了能够制作简单的翻页H5，还支持各种互动插件，比如照片投票、游戏、微信红包、抽奖、VR全景、答题等功能，功能十分强大。
2. iH5（ ) iH5定位于一款专业级H5制作工具，功能较为强大，用户可以编写代码，但是学习成本较高，不适合不懂代码的初学者。
3. Epub360（ ） epub360的定位和iH5一样，是一款专业级H5制作工具，企业用户较多，很多功能需要开通年度VIP才可以使用。
4. 易企秀（httpeqxiu.cm/hme ） 易企秀定位简单翻页模板H5，面向普通用户，用户可以发布模板，模板数量较多。
5. Maka（ ） Maka的主要用户群体是设计师，操作体验较优，功能较少。
6. 兔展（ ） 兔展定位普通用户，操作体验佳，最近上线的psd导入功能挺实用的。
7. 70C （http70c.cm/ ） 70C定位普通用户，体验佳，活动比较丰富。
8. 最酷网（ ） 最酷网主要面向企业用户，费用较高，在互动方面做的较好。
本节以“易企秀”平台为例学习制作H5网页的基本方法，推荐使用谷歌浏览器访问。
易企秀创意设计平台旗下产品涵盖H5、海报、表单、长页、互动、视频等创意设计工具，产品简单好用制作快，用户简单操作就可以生成炫酷的翻页H5、海报图片、问卷表单、营销长页、互动抽奖小游戏、特效视频等各种形式的创意作品，快速分享到社交媒体开展营销。
易企秀提供图片、文字、音乐、视频、报名表单、直拨电话、涂抹、指纹、图集等功能。
一、注册并登录“易企秀”平台
打开易企秀网站，注册账号后登录完成，如图所示。
打开易企秀网站，注册账号后并登录
(1)单击“免费模板”链接，进入免费模板页面。
使用他人制作好的模板要注意版权信息的提示。
(2)在页面左侧按分类选择适合的场景。例如，选择“地球一小时”。
(3)选择某一个在该主题下的场景，预览全部网页，然后单击“立即使用” 进入编辑状态。
(4)认识编辑区界面，如图所示。
①编辑区左侧是模板区，包含文本、艺术字、图片等内容元素。
②编辑区右侧是图层管理和页面管理，功能分别为编辑页面中的各元素和 切换要编辑的页面。
③编辑区上方是功能导航栏，有效果丰富的各种类型库。
④编辑区中间是画布，是编辑网页的工作区，能直观看到编辑效果。
(5)选择页面上的某一项内容，会弹出“组件设置”面板，包括“样式” “动画”和“触发”，如图所示。
(6)网页编辑完成后，单击“预览和设置”按钮，设置相关信息，如图所示。
打开编辑界面，熟悉各项功能。
(1)创建空白模板，如图所示，以制作封面页为例。
单击功能导航栏的“图片”，可以使用图片库中的素材，也可以上传本地素材，如图所示。
建议把编辑网页用到的图片素材一起 导入，方便应用。
导入音视频文件也是同样的操作方式。
单击添加的图片，在“组件设置”面板 中设置“样式” “动画”等内容，如图片边框、图片出现的方式等，如图所示。
单击模板区的“艺术字”，选择一种艺术字体，双击修改文 字内容，并在弹出的“组件设置”面板中，修改文字的样式和动画属性，如图所示。
为了让页面更生动，内容更丰富，可配合网页内容添加不同的“元素”，如图所示。
单击编辑区右侧的“图层管理”，可以选择编辑页面中的元素，包括调整顺序、复制、删除等，如图所示。
(2)在“页面管理”中，单击“常规页”，添加新的空白页，编辑其他页 面，如图所示。
(3)设置、保存场景。
网页编辑完成后，单击“预览和设置”按钮，编辑 网页标题和内容描述，保存网页，如图所示。
对照网站结构，小组成员相互检查网页是否达到预期效果，内容是否完整无误。
“我的作品”列表中显示了已保存的网页，可以单击预览效果或者再次进行编辑。
把编辑完成的场景统一转赠给小组中的某一成员，以便组合成网站作 品，如图所示。
尝试分享、发布自己的作品。
在制作H5网页时，H5编辑器中的一些组件可以直接嵌入使用，如图所示。
视频：在页面中添加本地视频。外链视频：只支持外部视频，通过复制“通用代码”将视频添加到页面中。
图集：添加一组图片（最多6张），在页面中的同一位置循环播放。链接：功能与演示文稿中的超链接类似，除内部链接、外部链接， 还可以跳转到“拨打电话”位置。电话：直接调用"链接”中的“拨打电话”选项，单击后跳转到拨号页面。音效：在页面中对按钮或图片添加声音效果，单击后播放。计数：在页面中添加类似“点赞”的功能，单击后计数加1。统计：在页面中添加观看统计功能，每浏览一次，计数加1。计时：在页面中添力口正计时或倒计时功能，计时完毕后显示预设文本。地图：在页面中添加"位置”信息，添加后可以直接调用导航（在线模式）。画板：在页面中添加一个矩形的“涂鸦”区域，用户可以利用触摸 屏完成“涂鸦”。
制作H5网页的流程是什么？
H5网页中包含文字、图片、动画、声音等媒体形式，借助移动设备可以观看丰富的内容。那么如何制作H5网页呢？这节课我们一块制作H5网页。
如果不会HTML语言，如何制作H5网页?
可以使用H5语言直接制作页面，但这种方法有一定难度。对于初学者来说，借助H5编辑器，可简单快速地制作H5网页。
(1)选择H5网页制作工具。，(2)注册账号并登录。(3)整理素材。(4)选择场景分头制作。(5)小组汇总页面，形成作品。(6)发布网站。
1. 人人秀（ #zh ） 人人秀定位傻瓜级操作体验，除了能够制作简单的翻页H5，还支持各种互动插件，比如照片投票、游戏、微信红包、抽奖、VR全景、答题等功能，功能十分强大。
2. iH5（ ) iH5定位于一款专业级H5制作工具，功能较为强大，用户可以编写代码，但是学习成本较高，不适合不懂代码的初学者。
3. Epub360（ ） epub360的定位和iH5一样，是一款专业级H5制作工具，企业用户较多，很多功能需要开通年度VIP才可以使用。
4. 易企秀（httpeqxiu.cm/hme ） 易企秀定位简单翻页模板H5，面向普通用户，用户可以发布模板，模板数量较多。
5. Maka（ ） Maka的主要用户群体是设计师，操作体验较优，功能较少。
6. 兔展（ ） 兔展定位普通用户，操作体验佳，最近上线的psd导入功能挺实用的。
7. 70C （http70c.cm/ ） 70C定位普通用户，体验佳，活动比较丰富。
8. 最酷网（ ） 最酷网主要面向企业用户，费用较高，在互动方面做的较好。
本节以“易企秀”平台为例学习制作H5网页的基本方法，推荐使用谷歌浏览器访问。
易企秀创意设计平台旗下产品涵盖H5、海报、表单、长页、互动、视频等创意设计工具，产品简单好用制作快，用户简单操作就可以生成炫酷的翻页H5、海报图片、问卷表单、营销长页、互动抽奖小游戏、特效视频等各种形式的创意作品，快速分享到社交媒体开展营销。
易企秀提供图片、文字、音乐、视频、报名表单、直拨电话、涂抹、指纹、图集等功能。
一、注册并登录“易企秀”平台
打开易企秀网站，注册账号后登录完成，如图所示。
打开易企秀网站，注册账号后并登录
(1)单击“免费模板”链接，进入免费模板页面。
使用他人制作好的模板要注意版权信息的提示。
(2)在页面左侧按分类选择适合的场景。例如，选择“地球一小时”。
(3)选择某一个在该主题下的场景，预览全部网页，然后单击“立即使用” 进入编辑状态。
(4)认识编辑区界面，如图所示。
①编辑区左侧是模板区，包含文本、艺术字、图片等内容元素。
②编辑区右侧是图层管理和页面管理，功能分别为编辑页面中的各元素和 切换要编辑的页面。
③编辑区上方是功能导航栏，有效果丰富的各种类型库。
④编辑区中间是画布，是编辑网页的工作区，能直观看到编辑效果。
(5)选择页面上的某一项内容，会弹出“组件设置”面板，包括“样式” “动画”和“触发”，如图所示。
(6)网页编辑完成后，单击“预览和设置”按钮，设置相关信息，如图所示。
打开编辑界面，熟悉各项功能。
(1)创建空白模板，如图所示，以制作封面页为例。
单击功能导航栏的“图片”，可以使用图片库中的素材，也可以上传本地素材，如图所示。
建议把编辑网页用到的图片素材一起 导入，方便应用。
导入音视频文件也是同样的操作方式。
单击添加的图片，在“组件设置”面板 中设置“样式” “动画”等内容，如图片边框、图片出现的方式等，如图所示。
单击模板区的“艺术字”，选择一种艺术字体，双击修改文 字内容，并在弹出的“组件设置”面板中，修改文字的样式和动画属性，如图所示。
为了让页面更生动，内容更丰富，可配合网页内容添加不同的“元素”，如图所示。
单击编辑区右侧的“图层管理”，可以选择编辑页面中的元素，包括调整顺序、复制、删除等，如图所示。
(2)在“页面管理”中，单击“常规页”，添加新的空白页，编辑其他页 面，如图所示。
(3)设置、保存场景。
网页编辑完成后，单击“预览和设置”按钮，编辑 网页标题和内容描述，保存网页，如图所示。
对照网站结构，小组成员相互检查网页是否达到预期效果，内容是否完整无误。
“我的作品”列表中显示了已保存的网页，可以单击预览效果或者再次进行编辑。
把编辑完成的场景统一转赠给小组中的某一成员，以便组合成网站作 品，如图所示。
尝试分享、发布自己的作品。
在制作H5网页时，H5编辑器中的一些组件可以直接嵌入使用，如图所示。
视频：在页面中添加本地视频。外链视频：只支持外部视频，通过复制“通用代码”将视频添加到页面中。
图集：添加一组图片（最多6张），在页面中的同一位置循环播放。链接：功能与演示文稿中的超链接类似，除内部链接、外部链接， 还可以跳转到“拨打电话”位置。电话：直接调用"链接”中的“拨打电话”选项，单击后跳转到拨号页面。音效：在页面中对按钮或图片添加声音效果，单击后播放。计数：在页面中添加类似“点赞”的功能，单击后计数加1。统计：在页面中添加观看统计功能，每浏览一次，计数加1。计时：在页面中添力口正计时或倒计时功能，计时完毕后显示预设文本。地图：在页面中添加"位置”信息，添加后可以直接调用导航（在线模式）。画板：在页面中添加一个矩形的“涂鸦”区域，用户可以利用触摸 屏完成“涂鸦”。
制作H5网页的流程是什么？
相关课件
初中信息技术湘电子版（2019）七年级下册第7节 认识HTML和HTML5网页评课课件ppt： 这是一份初中信息技术湘电子版（2019）七年级下册<a href="/xx/tb_c4033420_t3/?tag_id=26" target="_blank">第7节 认识HTML和HTML5网页评课课件ppt</a>，共33页。PPT课件主要包含了我的问题，活动建议，认识HTML网页，活动过程，HTML文件结构如下，总结本节课所讲内容等内容，欢迎下载使用。
信息技术七年级下册第9节 制作HTML5网页多媒体教学ppt课件： 这是一份信息技术七年级下册<a href="/xx/tb_c4033422_t3/?tag_id=26" target="_blank">第9节 制作HTML5网页多媒体教学ppt课件</a>，共38页。PPT课件主要包含了我的问题，活动建议，活动过程，制作网页，组合发布作品，总结本节课所讲内容等内容，欢迎下载使用。
湘电子版（2019）七年级下册第三单元 网站设计与制作第7节 认识HTML和HTML5网页课文内容ppt课件： 这是一份湘电子版（2019）七年级下册<a href="/xx/tb_c4033420_t3/?tag_id=26" target="_blank">第三单元 网站设计与制作第7节 认识HTML和HTML5网页课文内容ppt课件</a>，共33页。PPT课件主要包含了我的问题，活动建议，认识HTML网页，活动过程，HTML文件结构如下，总结本节课所讲内容等内容，欢迎下载使用。
