《第9节 制作HTML5网页》精品教案.docxVIP

学而优教有方

PAGE2/NUMPAGES2

第9节制作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./home#zh）

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

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

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

3.Epub360（/）

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

4.易企秀（/）

易企秀定位简单翻页模板H5，面向普通用户，用户可以发布模板，模板数量较多。

5.Maka（http://www.maka.im/）

Maka的主要用户群体是设计师，操作体验较优，功能较少。

6.兔展（/）

兔展定位普通用户，操作体验佳，最近上线的psd导入功能挺实用的。

活动过程

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

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

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

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

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

试一试

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

二、制作网页

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

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

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

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

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

进入编辑状态。

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

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

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

切换要编辑的页面。

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

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

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

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

试一试

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

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

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

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

①导入素材。

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

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

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

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

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

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

③添加文字

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

④添加形状。

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

⑤编辑页面。

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

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

(3)设置、保存场景。

网页编辑完成后，单击“预览和设置”按钮，编辑网页标题和内容描