(
课件网) 第9节 制作HTML5网页 湘电子版 七年级下 新知导入 H5网页中包含文字、图片、动画、声音等媒体形式，借助移动设备可以观看丰富的内容。那么如何制作H5网页呢？这节课我们一块制作H5网页。 新知讲解 活动任务 请完成主题规划、收集素材等准备工作后，选择在线的H5网页制作工具, 制作主题 “我的家乡一湖南” 的H5网页。 新知讲解 我的问题 如果不会HTML语言，如何制作H5网页 新知讲解 活动建议 可以使用H5语言直接制作页面，但这种方法有一定难度。对于初学者来说，借助H5编辑器，可简单快速地制作H5网页。 (1) 选择H5网页制作工具。 ， (2) 注册账号并登录。 (3) 整理素材。 (4) 选择场景分头制作。 (5) 小组汇总页面，形成作品。 (6) 发布网站。 新知讲解 1. 人人秀（ https://www./home#zh ） 人人秀定位傻瓜级操作体验，除了能够制作简单的翻页H5，还支持各种互动插件，比如照片投票、游戏、微信红包、抽奖、VR全景、答题等功能，功能十分强大。 2. iH5（http://www./ ) iH5定位于一款专业级H5制作工具，功能较为强大，用户可以编写代码，但是学习成本较高，不适合不懂代码的初学者。 3. Epub360（http://www./ ） epub360的定位和iH5一样，是一款专业级H5制作工具，企业用户较多，很多功能需要开通年度VIP才可以使用。 做H5页面用什么软件比较好？ 新知讲解 4. 易企秀（http:///home ） 易企秀定位简单翻页模板H5，面向普通用户，用户可以发布模板，模板数量较多。 5. Maka（http://www.maka.im/ ） Maka的主要用户群体是设计师，操作体验较优，功能较少。 6. 兔展（http://www./ ） 兔展定位普通用户，操作体验佳，最近上线的psd导入功能挺实用的。 7. 70C （http://70c.com/ ） 70C定位普通用户，体验佳，活动比较丰富。 8. 最酷网（http://www./ ） 最酷网主要面向企业用户，费用较高，在互动方面做的较好。 新知讲解 活动过程 本节以“易企秀”平台为例学习制作H5网页的基本方法，推荐使用谷歌浏览器访问。 易企秀创意设计平台旗下产品涵盖H5、海报、表单、长页、互动、视频等创意设计工具，产品简单好用制作快，用户简单操作就可以生成炫酷的翻页H5、海报图片、问卷表单、营销长页、互动抽奖小游戏、特效视频等各种形式的创意作品，快速分享到社交媒体开展营销。 易企秀提供图片、文字、音乐、视频、报名表单、直拨电话、涂抹、指纹、图集等功能。 新知讲解 一、注册并登录“易企秀”平台 打开易企秀网站，注册账号后登录完成，如图所示。 合作探究 打开易企秀网站，注册账号后并登录 试一试 新知讲解 二、制作网页 (1) 单击“免费模板”链接，进入免费模板页面。 使用他人制作好的模板要注意版权信息的提示。 1.使用“免费模板”制作H5网页 注意 新知讲解 (2) 在页面左侧按分类选择适合的场景。例如，选择“地球一小时”。 新知讲解 (3) 选择某一个在该主题下的场景，预览全部网页，然后单击“立即使用” 进入编辑状态。 模板区 功能导航栏 图层管理和页面管理 画布 快捷菜单 (4)认识编辑区界面，如图所示。 新知讲解 ① 编辑区左侧是模板区，包含文本、艺术字、图片等内容元素。 ② 编辑区右侧是图层管理和页面管理，功能分别为编辑页面中的各元素和 切换要编辑的页面。 ③ 编辑区上方是功能导航栏，有效果丰富的各种类型库。 ④ 编辑区中间是画布，是编辑网页的工作区，能直观看到编辑效果。 新知讲解 (5) 选择页面上的某一项内容，会弹出“组件设置”面板，包括“样式” “动画”和“触发”，如图所示。 新知讲解 (6) 网页编辑完成后，单击“预览和设置”按钮，设置相关信息，如图所示。 合作探究 打开编辑界面，熟悉各项功能。 试一试 新知讲 ... ...
