第9节 制作HTML5网页 教案 - 2023-2024学年信息技术湘电子版（2019）七年级下册

第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://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)创建空白模板，如图所示，以制作封面页为例。 ①导入素材。 单击功能导航栏的“图片”，可以使用图片库中的素材，也可以上传本地素材，如图所示。 建议把编辑网页用到的图片素材一起 导入，方便应用。 导入音视频文件也是同样的操作方式。 ②在页面