资源简介

中小学教育资源及组卷应用平台
信息技术《制作HTML5网页》教学设计
课题 《制作HTML5网页》 单元 一单元 学科 信息技术 年级 八年级
教材分析 《制作HTML5网页》这一课旨在让学生增进对HTML网页的认识和掌握，以及学会使用PC端认识网页背后的语言。教材编排了“学习任务-任务分析-操作指南-任务小结-知识链接-练习与思考”的系列学习活动，引导学生学会使用MAKA软件制作网页的方法和步骤，促进对网页构建的学习和使用，这些学习对于初中学生来说是非常有必要的，不仅可以增加学生知识，同时也能增强学生对信息的感受力、注意力，以及对信息价值的判断力和洞察力，提高学生信息素养。教材编排合理，贴近学生生活实际，符合七年级学生认知特点。
学习目标 1.信息意识：具有将创新理念运用到制作HTML5网页学习中去的意识；2.计算思维：能够对学习中产生的问题，进行分解、计算，得出解决办法；3.数字化学习与创新：在学习中具有创新、创造能力；4.信息社会责任：规范使用网络技术解决问题，形成良好道德准则，不做伤害他人的事。
重点 掌握制作HTML5网页的步骤和方法
难点 学会运用所学的知识，制作更深层次的网页
教学过程
教学环节 教师活动 学生活动 设计意图
导入新课 导入：师：说到网页网站，其实大家并不陌生，我们用电脑浏览新闻查询信息，查看图片等，都是在浏览网页，网页是一种可以在互联网传输，能被浏览器识别和翻译成页面，并显示出来的文件是网站的基本构成元素，只要是经常上上网的用户都浏览过网页。 学生了解网页在生活中的运用 由此引出今天的学习内容
讲授新课 我们学习和体验了PC网站的制作，对网站的结构和内容组织方式有了充分的认识。那么，移动设备上的网站制作又是什么样的 与PC网站的制作有何异同呢 学习任务1通过探究“所见即所得”工具编辑网页背后的秘密——HTML语言，认识PC网站与移动端网站的关联。拓展延伸PC端：Personal Computer 翻译成中文的意思是：个人计算机或者个人电脑。PC是一个具有广泛含义的词语，也是电脑的统称。移动端：就是移动端访问的网站,通俗来说就是适合手机访问的网站。任务分析我们制作网站使用的是“所见即所得”的网站制作工具。要想对比PC网站与移动端网站的异同，我们必须了解网页文件背后的支持技术是怎样的，也就是对编写网页的语言有所了解。了解相关技术，也能够帮助我们进一步理解浏览器与网页文件之间的关系。操作指南1.探究网页背后的秘密（1)新建一个空白网页，写一段简单的文字。（2）执“文件”→“另存为”命令，将文件以“first.html"为文件名保存到指定位置。 （3）在浏览器中打开“first.html”文件，执行“工具”→“F12开发人员工具”命令，在页面下方左侧出现HTML代码，如图所示。通过对比观察你会发现，使用“所见即所得”编辑器（FrontPage)制作的图文并茂、色彩丰富、生动有趣的网站，其背后是网页编辑语言（超文本标记语言HTML)默默地支持这一切在网络中神奇地发生。2.认识HTML(超文本标记语言)从一句话页面的背后，我们看到网页标记语言的结构如下:(1)和。表示超文本文件的开始，表示超文本文件的结束。这是告诉浏览器软件：当读到时，以下的代码就是超文本文件，直到读到为止，即这两个标记之间的内容要以网页的形式展现。（2)和。表示超文本文件头信息的开始，表示超文本文件头信息的结束。一般情况下，head区域存储网页的信息，如网页标题存放在head标记下的title标记中，网页关键字存放在meta标记中。(3)。这对标记是在和部分中使用的。之间是网页的标题，如我们没有特意修改某个网页的标题，系统默认的HTML代码是“”即标题是“New_Page 1”。（4)和。表示网页主体部分的开始，表示网页主体部分的结束。body区域是网页内容的显示部分，主要由表格（table标记)、段落(p标记)、图像(img标记)等组成。在这里不做详细介绍了，可以通过“普通”“代码”两个窗口来自己学习。（5）。

表示一段文本的开始，

表示一段文本的结束，在它们中间输入的文本将显示在页面上。3.了解HTML 5 HTML 5简称H5，是超文本标记语言HTML第5次重大改版，是目前互联网前端开发的主流语言。HTML 5的Web页面和传统的网页界面比起来，最大的差别就是HTML 5页面能适配不同尺寸的移动设备以正常大小查看，适用于市场上不同的浏览器。通过不同的设备访问普通的网站，由于每种设备的屏幕比例不一样，在访问普通网站的时候很容易出现页面变形等情况。网站出现这样的问题，非常影响使用。H5会根据不同设备屏幕的比例自动调整网站页面的比例，这样就可以很好地避免网站页面变形等问题的出现，给访问者良好的阅读体验。学习任务2利用前面制作网页的素材，选择在线的HTML 5网页制作工具，制作主题为“大美七彩河北”的HTML5网页。任务分析对HTML 5有所了解之后，我们可以选择一款在线编辑工具，利用已有的网站制作经验，体验一下H5网页的制作。可以参考以下步骤进行：①选择H5网页编辑器。②注册账号并登录。③准备素材。④选择场景，编辑内容。⑤发布网页。操作指南本节以MAKA平台为例，体验制作HTML5网页的基本方法。(推荐使用谷歌浏览器访问)1.注册、登录MAKA网站打开MAKA网站，注册账号后完成登录，网站首页如图所示。2.创建作品单击“作品管理”按钮跳转页面，在新页面中单击左侧“创建作品”按钮，选择右侧H5链接，如图所示。系统默认创建的是空白模板，可以自主设计H5网页，如图所示。(以制作“大美七彩河北”网页为例）（1）添加文字。单击左侧“文本”按钮，在打开的列表中选择一种字体样式，单击后该文字出现在页面上。双击页面中的相应文字可以修改文字内容。可以在右侧属性面板修改文字的属性。如图所示。(2)添加素材库元素。为了让页面更生动、内容更丰富，可以配合网页内容添加素材库的不同元素。如图所示。(3）添加图片并设置样式。①导入图片素材。单击“上传”按钮，选择“上传图片”命令，在“打开”对话框中选择图片后，单击“打开”按钮，上传本地图片素材，如图所示。建议把编辑网页用到的图片素材一起导入，方便应用。对于音视频文件也是同样的操作方式。②将图片拖动到页面上，在右侧面板中设置图片属性和动画效果，如设置图片边框图片出现的方式等。通过单击右侧浮动菜单中的“预览”按钮圈，预览页面效果。3.保存、预览网页网页编辑完成后，单击“保存”按钮保存网页：通过“预览/分享”按钮预览效果，生成网址、二维码等信息，可以向他人分享。任务小结在本节，通过认识HTML语言，了解了“所见即所得”网页背后的秘密，更深入地认识到网页和浏览器之间的关系。浏览器实际上是HTML语言的翻译官，浏览者通过它才能看到丰富多彩的网页内容。而HTML 5是HTML为适应当下移动互联网络的发展而进行的改进和优化。通过体验用MAKA平台制作简单的H5页面，我们对PC网站和移动端网站的异同有了初步认识。知识链接1.使用“免费模板”制作H5网页单击“免费模板”链接，进入可以使用的免费模板页面，单击“立即使用”按钮进入编辑状态。选择页面上的内容，在右侧属性面板进行相关设置，也可以调整页面元素的图层关系。2.H5中的互动组件在制作H5网页时，还有一些互动组件可以直接嵌入使用，包含表单、拼图、拨号组件、投票、接力、地图、倒计时等。这里我们举个例子学习一下表单：表单在网页中主要负责数据采集功能。一个表单有三个基本组成部分： 表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。 表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。 表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。练习与思考（1）制作H5网页的流程是什么？（2）选择一个免费模板，制作宣传学校科技节的H5网页。我们一起观看视频学习一下，看看H5是怎么制作的。作业布置请同学们总结我们本单元所学的所有知识点，制作一个最终的网页版本，可以将我们所学的知识点全部运用进去，制作一个更加成熟、引人的位置页面，下节课，一起进行评选，看看谁做的最好！ 学生了解什么是pc端与移动端学生掌握各种超文本标记语言的含义和使用学生了解H5网页的含义学生掌握制作H5的方法和步骤学生掌握“任务小结”和“知识链接”的学习内容学生完成课堂练习和课后作业 拓展延伸学生知识，增加学生知识储备增加学生知识技能铺垫后续的实践操作学习增加学生知识技能的同时，也提高学生的动手实践能力这两部分对本节课全部的学习内容的一个总结和概括巩固本节课的学习知识
课堂练习 请同学们利用我们刚刚学习到的表单，尝试将其嵌入到网页里，或者使用其他的互动组件，一起试试吧！ 学生完成课堂练习 巩固所学知识
课堂小结 认识不同HTML语言，了解不同网页之间的联系；学习H5制作的方法和流程；认识各种互动组件，加深对网页的学习。 学生总结本节课的学习内容 总结概括本节课的学习内容
板书 H5网页制作的方法和步骤了解不同网页之间的联系互动组件了解
21世纪教育网 www.21cnjy.com 精品试卷·第 2 页 （共 2 页）
HYPERLINK "http://www.21cnjy.com/" 21世纪教育网(www.21cnjy.com)(共36张PPT)
《制作HTML5网页》
河北大学版 初中版第二册
内容总览
学习目标
01
学习任务
02
任务分析
03
操作指南
04
任务小结
05
知识链接
06
目录
07
08
课堂练习
课堂总结
09
10
板书设计
课后作业
教学目标
1.信息意识：具有将创新理念运用到制作HTML5网页学习中去的意识；
2.计算思维：能够对学习中产生的问题，进行分解、计算，得出解决办法；
3.数字化学习与创新：在学习中具有创新、创造能力；
4.信息社会责任：规范使用网络技术解决问题，形成良好道德准则，不做伤害他人的事。
新知导入
说到网页网站，其实大家并不陌生，我们用电脑浏览新闻查询信息，查看图片等，都是在浏览网页，网页是一种可以在互联网传输，能被浏览器识别和翻译成页面，并显示出来的文件是网站的基本构成元素，只要是经常上上网的用户都浏览过网页。
新知讲解
我们学习和体验了PC网站的制作，对网站的结构和内容组织方式有了充分的认识。那么，移动设备上的网站制作又是什么样的 与PC网站的制作有何异同呢
新知讲解
学习任务1
通过探究“所见即所得”工具编辑网页背后的秘密——HTML语言，认识PC网站与移动端网站的关联。
新知讲解
PC端：Personal Computer 翻译成中文的意思是：个人计算机或者个人电脑。PC是一个具有广泛含义的词语，也是电脑的统称。
移动端：就是移动端访问的网站,通俗来说就是适合手机访问的网站。
拓展延伸
新知讲解
任务分析
我们制作网站使用的是“所见即所得”的网站制作工具。要想对比PC网站与移动端网站的异同，我们必须了解网页文件背后的支持技术是怎样的，也就是对编写网页的语言有所了解。了解相关技术，也能够帮助我们进步理解浏览器与网页文件之间的关系。
新知讲解
操作指南
1.探究网页背后的秘密
（1)新建一个空白网页，写一段简单的文字。
（2）执行“文件”→“另存为”命令，将文件以“first.html"为文件名保存到指定位置。
（3）在浏览器中打开“first.html”文件，执行“工具”→“F12开发人员工具”命令，在页面下方左侧出现HTML代码，如图所示。
新知讲解
通过对比观察你会发现，使用“所见即所得”编辑器（FrontPage)制作的图文并茂、色彩丰富、生动有趣的网站，其背后是网页编辑语言（超文本标记语言HTML)默默地支持这一切在网络中神奇地发生。
新知讲解
2.认识HTML(超文本标记语言)
从一句话页面的背后，我们看到网页标记语言的结构如下:
新知讲解
(1)和。
表示超文本文件的开始，表示超文本文件的结束。这是告诉浏览器软件：当读到时，以下的代码就是超文本文件，直到读到为止，即这两个标记之间的内容要以网页的形式展现。
（2)和。
表示超文本文件头信息的开始，表示超文本文件头信息的结束。一般情况下，head区域存储网页的信息，如网页标题存放在head标记下的title标记中，网页关键字存放在meta标记中。
新知讲解
(3)。
这对标记是在和部分中使用的。之间是网页的标题，如我们没有特意修改某个网页的标题，系统默认的HTML代码是“”即标题是“New_Page 1”。
新知讲解
(4)和。
表示网页主体部分的开始，表示网页主体部分的结束。body区域是网页内容的显示部分，主要由表格（table标记)、段落(p标记)、图像(img标记)等组成。在这里不做详细介绍了，可以通过“普通”“代码”两个窗口来自己学习。
（5）。

表示一段文本的开始，

表示一段文本的结束，在它们中间输入的文本将显示在页面上。
新知讲解
3.了解HTML 5
HTML 5简称H5，是超文本标记语言HTML第5次重大改版，是目前互联网前端开发的主流语言。HTML 5的Web页面和传统的网页界面比起来，最大的差别就是HTML 5页面能适配不同尺寸的移动设备以正常大小查看，适用于市场上不同的浏览器。通过不同的设备访问普通的网站，由于每种设备的屏幕比例不一样，在访问普通网站的时候很容易出现页面变形等情况。网站出现这样的问题，非常影响使用。H5会根据不同设备屏幕的比例自动调整网站页面的比例，这样就可以很好地避免网站页面变形等问题的出现，给访问者良好的阅读体验。
新知讲解
学习任务2
利用前面制作网页的素材，选择在线的HTML 5网页制作工具，制作主题为“大美七彩河北”的HTML5网页。
新知讲解
任务分析
对HTML 5有所了解之后，我们可以选择一款在线编辑工具，利用已有的网站制作经验，体验一下H5网页的制作。可以参考以下步骤进行：
①选择H5网页编辑器。
②注册账号并登录。
③准备素材。
④选择场景，编辑内容。
⑤发布网页。
新知讲解
操作指南
本节以MAKA平台为例，体验制作HTML5网页的基本方法。(推荐使用谷歌浏览器访问)
1.注册、登录MAKA网站
打开MAKA网站，注册账号后完成登录，网站首页如图所示。
新知讲解
2.创建作品
单击“作品管理”按钮跳转页面，在新页面中单击左侧“创建作品”按钮，选择右侧H5链接，如图所示。
系统默认创建的是空白模板，可以自主设计H5网页，如图所示。(以制作“大美七彩河北”网页为例）
新知讲解
（1）添加文字。
单击左侧“文本”按钮，在打开的列表中选择一种字体样式，单击后该文字出现在页面上。双击页面中的相应文字可以修改文字内容。可以在右侧属性面板修改文字的属性。如图所示。
新知讲解
(2)添加素材库元素。
为了让页面更生动、内容更丰富，可以配合网页内容添加素材库的不同元素。如图所示。
新知讲解
(3）添加图片并设置样式。
①导入图片素材。
单击“上传”按钮，选择“上传图片”命令，在“打开”对话框中选择图片后，单击“打开”按钮，上传本地图片素材，如图所示。建议把编辑网页用到的图片素材一起导入，方便应用。对于音视频文件也是同样的操作方式。
新知讲解
②将图片拖动到页面上，在右侧面板中设置图片属性和动画效果，如设置图片边框图片出现的方式等。通过单击右侧浮动菜单中的“预览”按钮圈，预览页面效果。
新知讲解
3.保存、预览网页
网页编辑完成后，单击“保存”按钮保存网页：通过“预览/分享”按钮预览效果，生成网址、二维码等信息，可以向他人分享。
新知讲解
任务小结
在本节，通过认识HTML语言，了解了“所见即所得”网页背后的秘密，更深入地认识到网页和浏览器之间的关系。浏览器实际上是HTML语言的翻译官，浏览者通过它才能看到丰富多彩的网页内容。而HTML 5是HTML为适应当下移动互联网络的发展而进行的改进和优化。通过体验用MAKA平台制作简单的H5页面，我们对PC网站和移动端网站的异同有了初步认识。
新知讲解
知识链接
1.使用“免费模板”制作H5网页
单击“免费模板”链接，进入可以使用的免费模板页面，单击“立即使用”按钮进入编辑状态。选择页面上的内容，在右侧属性面板进行相关设置，也可以调整页面元素的图层关系。
新知讲解
2.H5中的互动组件
在制作H5网页时，还有一些互动组件可以直接嵌入使用，包含表单、拼图、拨号组件、投票、接力、地图、倒计时等。
新知讲解
表单：
表单在网页中主要负责数据采集功能。一个表单有三个基本组成部分： 表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。 表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。 表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。
这里我们举个例子学习一下
新知讲解
练习与思考
（1）制作H5网页的流程是什么？
（2）选择一个免费模板，制作宣传学校科技节的H5网页。
新知讲解
我们一起观看视频学习一下，看看H5是怎么制作的。
课堂练习
请同学们利用我们刚刚学习到的表单，尝试将其嵌入到网页里，或者使用其他的互动组件，一起试试吧！
课堂总结
1.认识不同HTML语言，了解不同网页之间的联系；
2.学习H5制作的方法和流程；
3.认识各种互动组件，加深对网页的学习。
板书设计
H5网页制作的方法和步骤
了解不同网页之间的联系
互动组件了解
作业布置
请同学们总结我们本单元所学的所有知识点，制作一个最终的网页版本，可以将我们所学的知识点全部运用进去，制作一个更加成熟、引人的位置页面，下节课，一起进行评选，看看谁做的最好！
谢谢
21世纪教育网（www.21cnjy.com)
中小学教育资源网站
兼职招聘：
https://www.21cnjy.com/recruitment/home/admin

展开更多......

收起↑