《第9节 制作HTML5网页》参考教案.docxVIP

学而优教有方

PAGE2/NUMPAGES2

第9节制作HTML5网页

一、教材分析

上节课安排了学生完成“我的家乡一一湖南”主题网站的规划和素材分工搜集，本节课组织学生使用“易企秀”平台，运用文字、图片、动画、声音等媒体形式，小组分工制作多个HTML5网页，再汇总页面形成作品并发布。

二、学情分析

虽然是分工制作，但在制作过程中，小组成员要经常沟通，协调网页的风格，互帮互助，取长补短。教师应关注制作进度缓慢的学生，给出适当的点拨，以保证网站的完整性。

三、教学目标

1.知识与技能：

使用“易企秀”平台制作H5网页。

2.过程与方法：

首先教学生使用“易企秀”平台制作网页的基本方法，然后完成制作网页、汇总成网站的任务。

3情感态度与价值观：

加强小组合作完成任务的能力，提升对家乡湖南的认知和热爱。

四、教学重难点

网页制作工具的使用方法。

五、教学方法

讲授法、小组合作法、任务法。

六、教学过程

【新课导入】

师：上节课我们布置了根据“我的家乡一一湖南”主题的素材搜集，请同学们讲讲你们小组是从哪些方面搜集的素材。

生：小组代表发言。

师：根据学生的准备，给出网页制作建议。

【设计意图】视学生的完成情况，结合课堂时间安排，给学生提出简繁得当的网页制作建议，以保证课堂进度。

【讲授新课】

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

师：我们使用“易企秀”这款在线的HTML5网页制作工具来将我们的素材加工成网页。根据素材搜集的分工，每位同学要完成自己负责部分的网页，小组内再将小组成员做的网页汇总成网站，所以每位同学都要认真听接下来的“易企秀”的使用方法说明。

第一步，打开易企秀网站，注册账号后完成登录。

【设计意图】提醒学生后续任务的开展，让学生明白任务与每一个人都有关，有助于他们集中注意力听讲。

二、制作网页

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

（1）单击“免费模板”链接，进入免费模板页面。使用他人制作好的模板要注意版权信息的提示。

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

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

（4）认识编辑区界面。（图见课件，介绍编辑区界面的模板去、功能导航栏、图层管理和页面管理、快捷菜单、画布的位置和作用）

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

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

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

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

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

（6）网页编辑完成后，单击“预览和设置”按钮，设置相关信息。（图见课件）

2.选择空白模板，自主设计网页师：除了直接套用模板，我们还可以直接选择空白模板来自主设计网页。下面以制作“湖南美景推荐”网页为例。

（1）创建空白模板，以制作封面页为例。

①导入素材。单击功能导航栏的“图片”，可以使用图片库中的素材，也可以上传本地素材。建议把编辑网页用到的图片素材一起导入，方便应用。导入音视频文件也是同样的操作方式。

②在页面中添加图片，设置样式。单击添加的图片，在“组件设置”面板中设置“样式”“动画”等内容，如图片边框、图片出现的方式等。设置完成后，我们可通过快捷菜单中的“刷新预览”按钮预览页面效果。

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

④添加形状。为了让页面更生动，内容更丰富，可配合网页内容添加不同的“元素”。

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

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

（3）设置、保存场景。网页编辑完成后，单击“预览和设置”按钮，编辑网页标题和内容描述，保存网页。

【设计意图】带学生快速认识网页编辑器的基本用法，多留时间让学生动手操作。

三、组合、发布作品

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

师：我们上节课每个小组都进行了网站结构的规划设计，对照网站结构，小组成员相互检查网页是否达到预期效果，内容是否完整无误。

生：检查网页，准备组合成网站。

2.组合网站

师：“我的作品”列表中显示了已保存的网页，可以单击预览效果或者再次进行编辑。把编辑完成的场景统一“转赠”给小组中的某一成员，以便组合成网站作品。

生：组合成网站，准备发布。

3.发布作品

师：单击“发布”按钮，可以分享二维码或网址链接，完成作品发布。请同学们把作品链接分享给老师。教师将各个小组的作品点开展示，加以点评。

【设计意图】讲授只能是走马观花，每个学生