1.6 制作HTML5网页（教学设计）-信息科技第二册同步教学（河北大学版2023）
2024-10-21
|
5页
|
401人阅读
|
1人下载
精品
内容正文：
《制作HTML 5网页》 教学设计
课例名称
《制作HTML 5网页》
年级
八年级
章节
第一章第6节
教材版本
河大初中《信息技术第3版》
教学目标
知识与技能目标：掌握HTML（超文本标记语言）的相关知识。
过程与方法目标：通过小组合作探究，培养学生的观察、分析和归纳能力。
情情感态度与价值观目标：培养学生的信息素养，提高信息鉴别和使用信息的能力。
教学重难点
教学重点：学会使用MAKA网站制作网页
教学难点：认识HTML
学情分析
学生已具备基本的计算机操作能力，能够上网查找信息，但不会制作网页，学生缺乏详细系统的学习。
教学准备
多媒体课件、计算机教室
教学过程
一、新课导入
【教师活动】教师展示学习目标
1.学会新建空白网页
2.了解HTML
3.了解HTML5
4.体验H5网页制作
【学生活动】学生齐声朗读学习目标
【教师活动】任务驱动
通过探究所见即所得工具编辑网页背后的秘密—HTML语言，认识PC网站与移动端网站的关联。
【教师活动】操作指南
1.新建一个空白网页，书写一段简单的文字
2. 文件—另存为—命名
3. 工具—F12开发人员工具
二、新课讲授
【教师活动】认识HTML
<html>
<head>
此处是head区域的内容
</head>
<body>
此处是head区域的内容
</body>
</html>
（1）<html>和</html>
<html>表示超文本文件的开始
</html>表示超文本文件的结束
（2）<head>和</head>
<head>表示超文本文件头信息的开始
</head>表示超文本文件头信息的结束
（3）<title>和</title>
<title>和</title>之间是网页的标题
（4）<body>和</body>
<head>表示网页主体部分的开始
</head>表示网页主体部分的结束
（5）<p>和</p>
<p>表示一段文本的开始
</p>表示一段文本的结束
【教师活动】了解HTML 5
HTML5简称H5，HTML5的Web页面和传统的网页界面的差别就是HTML5页面能适配不同尺寸的移动设备以正常大小查看，适用于市场上不同的浏览器。
H5会根据不同设备屏幕的比例自动调整网站页面的比例，很好地避免网站页面变形等问题的出现，给访问者良好的阅读体验。
【教师活动】教师展示学习任务
请同学们以小组为单位，利用前面制作网页的素材，选择在线的HTML5网页制作工具，制作主题为“大美七彩河北”的HTML5网页。
①选择H5网页编辑器
②注册账号并登录
③准备素材
④选择场景，编辑内容
⑤发布网页
【教师活动】任务分析
本节课以MAKA平台为例，体验制作HTML 5网页的基本方法。
1.注册、登录MAKA网站
打开MAKA网站，注册账号后完成登录
2.创建作品
作品管理—创建作品
使用空白模板进行编辑制作
（1）添加文字
文本—选择字体样式
修改文字内容
（2）添加素材库元素
添加素材库的不同元素
（3）添加图片并设置样式
①导入图片素材
②预览效果
3.保存、预览网页
保存：保存网页
预览/分享：预览网页效果
三、课堂练习
【教师活动】请同学们以小组为单位，使用MAKA网站制作一个“大美河北”的网页，来介绍自己的家乡，并展示汇报
【学生活动】同学们以小组为单位，使用MAKA网站制作一个“大美河北”的网页，来介绍自己的家乡，并展示汇报
其他小组成员进行评价
四、作品展示
【教师活动】现在请同学们展示并介绍本组的作品。
【学生活动】学生展示自己的作品，并汇报。
其他小组成员对其进行点评，说明优缺点。
五、课堂小结
【教师活动】教师带领学生复习回顾本节课知识点
【学生活动】学生和教师一起复习回顾本节课知识点
六、板书设计
1.学会新建空白网页
2.了解HTML
3.了解HTML5
4.体验H5网页制作
七、作业设计
【教师活动】教师布置课后作业
（1）制作H5网页的流程是什么？
（2）选择一个免费模板，制作宣传学校科技节的H5网页。
反思评价
本节课是一节操作课，教师需要合理设置教学活动，注意教学环节的时间安排和纪律的维护。
原创精品资源学科网独家享有版权，侵权必究！6
学科网（北京）股份有限公司
$$
资源预览图
1
2
相关资源
示范课
由于学科网是一个信息分享及获取的平台，不确保部分用户上传资料的 来源及知识产权归属。如您发现相关资料侵犯您的合法权益，请联系学科网，我们核实后将及时进行处理。