资源简介

(共57张PPT)
1.1 编辑网页信息
电子工业版七年级下册
本章重点
1、学习使用网页编辑工具创建网络文档，表达创作思想。
2、知道网络中信息编码及呈现的原理。
3、认识网络爬虫，了解网络爬虫的作用。
4、掌握通过编写网络爬虫程序来获取网页信息的方法。
5、知道使用网络爬虫程序获取网页信息时要遵守基本的道德规范。
新知讲解
互联网的信息和资源的作用：
（1）政府部门发布政务信息，提供政策咨询，沟通社情民意；
（2）企业进行产品推广、业务宣传、寻找合作伙伴；
（3）服务机构提供新闻、教育、娱乐、旅游等服务；
（4）学校师生可以宣传学校形象、展示学习效果、开展研究性学习。
新知导入
首先观看一个视频，了解什么是H5？
教学目标
1、了解网页的概念及组成元素；
2、掌握常用的浏览器的使用；
3、了解HTML和H5的概念；
4、了解静态网页和动态网页的区别；
5、了解H5网页的特点及应用；
6、掌握“科技创新·自主可控”主题网页制作。
1.1.1 浏览网页
新知讲解
网页是构成网站的基本元素，是承载各种网站应用的平台，是一个包含HTML标签的纯文本文件，采用超文本标记语言格式（文件扩展名为.html或.htm）。
新知讲解
网页包含的元素：
（1）文本；
（2）图像；
（3）音频、视频；
（4）表格、表单；
（5）动画；
（6）导航栏。
思考——什么是导航栏？
导航栏就是在网页中是一组超链接，其连接的目的端是网页中重要的页面。
新知讲解
超链接是从一个网页指向另一个目的端的链接，超链接的目的端可以是网页，也可以是图片、电子邮件地址、文件和程序等，用于实现页面或者网站的跳转功能。
新知讲解
常用浏览器：
（1）IE浏览器；
（2）谷歌浏览器；
（3）360浏览器；
（4）火狐浏览器；
（5）世界之窗浏览器。
新知讲解
与科技创新相关的网页。
网址或网站名称 可借鉴之处
中国科学院科技创新发展中心http://www.bjb./ 图文并茂，动画、视频展示科技内容，采用表格合理划分区域
网易新闻（神舟15号新闻报道） https://m./dy/article/HURRQDNV0552D3NO.html 除了图文展示新闻内容外，才插入了GIF动画，让内容更加丰富
1.1.2 认识H5网页
新知讲解
HTML语言（超文本标记语言）是一种标准的通用网页信息表示语言。
HTML语言的第五代，简称H5，H5网页就是以用HTML5语言来制作的动态网页。
新知讲解
静态网页其内容是预先确定的，并存储在Web服务器或者本地计算机/服务器之上。
新知讲解
静态网页特点：
（1）制作速度快，成本低。
（2）模板一旦确定下来，不容易修改，更新比较费时费事。
（3）常用于制作一些固定版式的页面。
（4）通常用于文本和图像组成，常用于子页面的内容介绍。
（5）对服务器性能要求较低，但对存储压力相对较大。
新知讲解
动态网页，是取决于由用户提供的参数，并根据存储在数据库中的网站上的数据中创建的页面。
通俗地讲，静态页是照片，每个人看都是一样的，而动态页则是镜子，不同的人（不同的参数）看都不相同。
新知讲解
H5网页的特点：
（1）互动性强；
（2）显示效果更丰富；
（3）更适合移动设备；
（4）灵活性强；
（5）减少代码冗余；
（6）开发简单，成本低。
新知讲解
H5网页的应用：
（1）邀请函；
（2）贺卡；
（3）小游戏；
（4）测试题；
（5）宣传海报；
（6）商业服务营销。
1.1.3 制作网页
新知讲解
“科技创新·自主可控”主题网页制作过程。
（1）登录在线网页编辑平台（http://www.）。单击“创建作品”菜单，进入到在线网页编辑窗口。
新知讲解
（2）添加页面。单击工具栏中的“页面”按钮，在“舞台”下方增加一个页面对象，将该页面命名为“欢迎页”。
新知讲解
（3）设置页面背景颜色。单击属性面板上的“背景颜色”，选择一种颜色（橙色）。
新知讲解
（4）编辑文本。单击工具面板中的“中文字体”工具 ，并在舞台中单击，然后在弹出的“文本内容”对话框中输入标题文字。
新知讲解
（5）设置文本属性，选中文本框。在属性面板中选择字体，设置字体的颜色、大小等属性。
新知讲解
（6）添加图片。单击工具面板中的图片工具 ，拖动鼠标，调整图片的大小和位置，松开鼠标后在弹出的“打开”对话框中选择要插入网页中的图片。
新知讲解
（7）给文本添加动态效果。选中文本，单击菜单栏中的 按钮，在下拉列表中为文本选择一种动态效果。
新知讲解
（8）保存并预览网页。单击菜单栏中的 按钮，保存网页文件。单击菜单栏中的 按钮，预览网页效果。
新知讲解
H5网页预览效果
项目实施
（1）单击菜单栏中的 按钮，添加一个方框，然后将填空颜色设置为“无”，边框颜色为“#000000”（黑色），粗细为“1PX”，并且设置“圆角”的值为15。
项目实施
（2）单击菜单栏中的 按钮，添加文字“中国空间站”，并设置字体、颜色、文本对齐方式以及位置等。
项目实施
（3）单击菜单栏中的 按钮，按住鼠标左键不放，拖动透明按钮框在“中国空间站”之上即可。
项目实施
（4）单击菜单栏中的 按钮，发布网页文件（需要实名认证）。单击菜单栏中的 按钮，提供网页预览二维码。
新知讲解
带按钮功能的H5网页预览效果
知识拓展
点击菜单栏“文件”，选择“打开模板”，就可以选用网页模板了。
知识拓展
5.12国际护士节和五四青年节参考模板的主页面
课堂总结
本节课主要知道网页的概念及组成元素，掌握常用的浏览器的使用，接着了解HTML和H5的概念，了解H5网页的特点及应用最后重点讲授了“科技创新·自主可控”主题网页制作方法。
课堂练习
1、简述互联网的信息和资源的作用。
2、简述网页包含的元素。
3、列举常用的浏览器。
4、简述H5网页的特点。
课堂练习
1、简述互联网的信息和资源的作用。
答：
（1）政府部门发布政务信息，提供政策咨询，沟通社情民意；
（2）企业进行产品推广、业务宣传、寻找合作伙伴；
（3）服务机构提供新闻、教育、娱乐、旅游等服务；
（4）学校师生可以宣传学校形象、展示学习效果、开展研究性学习。
课堂练习
2、简述网页包含的元素。
答：
（1）文本；
（2）图像；
（3）音频、视频；
（4）表格、表单；
（5）动画；
（6）导航栏。
课堂练习
3、列举常用的浏览器。
答：
（1）IE浏览器；
（2）谷歌浏览器；
（3）360浏览器；
（4）火狐浏览器；
（5）世界之窗浏览器。
课堂练习
4、简述H5网页的特点。
答：
（1）互动性强；
（2）显示效果更丰富；
（3）更适合移动设备；
（4）灵活性强；
（5）减少代码冗余；
（6）开发简单，成本低。
板书设计
编辑网页信息
一、浏览网页
1、网页的概念及组成元素
2、常用的浏览器
二、认识H5网页
1、HTML和H5简介
2、静态网页和动态网页
3、H5网页的特点
4、H5网页的应用
三、制作网页
1、“科技创新·自主可控”主题欢迎网页制作过程
2、项目实施——跳转按钮的制作
课后作业
1、制作“科技创新·自主可控”主题网页第二页、第三页、第四页的内容。
2、添加跳转和返回按钮功能。
作业布置
1、制作“科技创新·自主可控”主题网页第二页的内容，设置网页背景颜色，添加文本、图片和“返回”按钮，效果如下图所示。
作业布置
（1）添加页面。单击工具栏中的“页面”按钮，在“舞台”下方增加一个页面对象，将该页面命名为“第二页”。
答案
作业布置
（2）设置页面背景颜色。单击属性面板上的“背景颜色”，选择一种颜色（蓝色）。
答案
作业布置
（3）单击菜单栏中的 按钮，添加文字“中国空间站简介”以及正文内容，并设置字体、颜色、文本对齐方式以及位置等。
答案
作业布置
（4）添加图片。单击工具面板中的图片工具 ，插入空间站图片，并调整大小和位置。
答案
作业布置
（5）单击菜单栏中的 按钮，添加“返回”按钮。
答案
作业布置
2、在“欢迎页”为“中国空间站”按钮添加“事件属性”，设置按钮的触发条件为“点击”，目标对象为跳转到第二页。实现单击“中国空间站”按钮可以跳转到第二页。
作业布置
（1）在“欢迎页”选择“中国空间站”按钮，点击 “事件属性”，设置按钮的触发条件为“点击”，目标对象为跳转到第二页。
答案
作业布置
3、在第二页为“返回”按钮添加“事件”属性，实现单击“返回”按钮可以跳转到“欢迎页”。
答案
作业布置
4、查找关于“自研芯片”和“中国天眼”的资料，制作以“自研芯片”为主题的第三页网页和以“中国天眼”为主题的第四页网页，在“欢迎页”添加“自研芯片”按钮和“中国天眼”按钮，并分别实现页面跳转的效果。
作业布置
（1）新建“自研芯片”为主题的第三页网页和以“中国天眼”为主题的第四页网页。
答案
作业布置
（2）在“欢迎页”添加“自研芯片”按钮和“中国天眼”按钮，分别在第三页、第四页添加“返回”按钮，并分别实现页面跳转的效果。
答案
作业布置
5、保存网页，，查看预览效果，并将制作的网页进行分享。
访问地址（ https://file1397f3214724./v3/idea/k1LBBs4V ）。
答案
谢谢
21世纪教育网（www.21cnjy.com)
中小学教育资源网站
兼职招聘：
https://www.21cnjy.com/recruitment/home/admin中小学教育资源及组卷应用平台
信息科技 第1课 编辑网页信息教学设计
课题 编辑网页信息 单元 第一单元 学科 信息科技 年级 七年级下
教材分析 编辑网页信息选自《信息科技》（电子工业版）的第一章第一节的内容，教材由“浏览网页”、“认识H5网页”“制作网页”三部分内容组成，主要内容包括：了解网页的概念及组成元素、H5网页的特点与应用以及网页制作过程几个部分。学生通过对本教材的学习逐步掌握信息科技的相关知识，具备一定的科学精神和科技伦理，提高创新能力，夯实信息社会责任，发挥信息科技课程的独特育人价值，为数字强国培养优秀接班人和建设者。
教学目标 1、信息意识：体验互联网交互方式。2、计算思维：在实践应用中，熟悉网络平台中的技术工具、软件系统的功能与应用。3、数字化学习与创新：根据任务要求，借助在线平台，与伙伴协作设计和创作作品。4、信息社会责任：遵循信息科技领域的伦理道德规范，明确科技活动中应遵循的价值观念、道德责任和行为准则。
重点 1、了解网页的概念及组成元素；2、了解HTML和H5的概念；3、了解静态网页和动态网页的区别；4、了解H5网页的特点及应用。
难点 1、掌握常用的浏览器的使用；2、掌握“科技创新·自主可控”主题网页制作。
教学过程
教学环节 教师活动 学生活动 设计意图
导入新课 H5页面是一种基于HTML5新特性的网页设计，它可以帮助企业把网页的设计效果和功能提升到一个新的高度。H5页面的优势在于它可以使网页的功能更加丰富，可以更好地将网站的内容展示给用户，从而提高用户的体验。观看视频引出今天的教学内容编辑网页信息。 学生听教师引导生活中的案例 激发学生对编辑网页的学习兴趣并快速进入学习状态
讲授新课 本章重点1、学习使用网页编辑工具创建网络文档，表达创作思想。2、知道网络中信息编码及呈现的原理。3、认识网络爬虫，了解网络爬虫的作用。4、掌握通过编写网络爬虫程序来获取网页信息的方法。5、知道使用网络爬虫程序获取网页信息时要遵守基本的道德规范。互联网的信息和资源的作用：（1）政府部门发布政务信息，提供政策咨询，沟通社情民意；（2）企业进行产品推广、业务宣传、寻找合作伙伴；（3）服务机构提供新闻、教育、娱乐、旅游等服务；（4）学校师生可以宣传学校形象、展示学习效果、开展研究性学习。一、浏览网页1、网页是构成网站的基本元素，是承载各种网站应用的平台，是一个包含HTML标签的纯文本文件，采用超文本标记语言格式（文件扩展名为.html或.htm）。2、网页包含的元素：（1）文本；（2）图像；（3）音频、视频；（4）表格、表单；（5）动画；（6）导航栏。练一练思考——什么是导航栏？导航栏就是在网页中是一组超链接，其连接的目的端是网页中重要的页面。3、超链接是从一个网页指向另一个目的端的链接，超链接的目的端可以是网页，也可以是图片、电子邮件地址、文件和程序等，用于实现页面或者网站的跳转功能。4、常用浏览器：（1）IE浏览器；（2）谷歌浏览器；（3）360浏览器；（4）火狐浏览器；（5）世界之窗浏览器。练一练收集与科技创新相关的网页，找出可以借鉴之处。二、认识H5网页1、HTML语言（超文本标记语言）是一种标准的通用网页信息表示语言。HTML语言的第五代，简称H5，H5网页就是以用HTML5语言来制作的动态网页。2、静态网页其内容是预先确定的，并存储在Web服务器或者本地计算机/服务器之上。3、静态网页特点：（1）制作速度快，成本低。（2）模板一旦确定下来，不容易修改，更新比较费时费事。（3）常用于制作一些固定版式的页面。（4）通常用于文本和图像组成，常用于子页面的内容介绍。（5）对服务器性能要求较低，但对存储压力相对较大。4、动态网页，是取决于由用户提供的参数，并根据存储在数据库中的网站上的数据中创建的页面。通俗地讲，静态页是照片，每个人看都是一样的，而动态页则是镜子，不同的人（不同的参数）看都不相同。5、H5网页的特点：（1）互动性强；（2）显示效果更丰富；（3）更适合移动设备；（4）灵活性强；（5）减少代码冗余；（6）开发简单，成本低。6、H5网页的应用：（1）邀请函；（2）贺卡；（3）小游戏；（4）测试题；（5）宣传海报；（6）商业服务营销。三、制作网页1、“科技创新·自主可控”主题网页制作过程。（1）登录在线网页编辑平台（http://www.）。单击“创建作品”菜单，进入到在线网页编辑窗口。（2）添加页面。单击工具栏中的“页面”按钮，在“舞台”下方增加一个页面对象，将该页面命名为“欢迎页”。（3）设置页面背景颜色。单击属性面板上的“背景颜色”，选择一种颜色（橙色）。（4）编辑文本。单击工具面板中的“中文字体”工具，并在舞台中单击，然后在弹出的“文本内容”对话框中输入标题文字。（5）设置文本属性，选中文本框。在属性面板中选择字体，设置字体的颜色、大小等属性。（6）添加图片。单击工具面板中的图片工具，拖动鼠标，调整图片的大小和位置，松开鼠标后在弹出的“打开”对话框中选择要插入网页中的图片。（7）给文本添加动态效果。选中文本，单击菜单栏中的动效按钮，在下拉列表中为文本选择一种动态效果。（8）保存并预览网页。单击菜单栏中的保存按钮，保存网页文件。单击菜单栏中的预览按钮，预览网页效果。2、项目实施——添加按钮功能（1）单击菜单栏中的方框按钮，添加一个方框，然后将填空颜色设置为“无”，边框颜色为“#000000”（黑色），粗细为“1PX”，并且设置“圆角”的值为15。（2）单击菜单栏中的文字按钮，添加文字“中国空间站”，并设置字体、颜色、文本对齐方式以及位置等。（3）单击菜单栏中的“透明按钮”按钮，按住鼠标左键不放，拖动透明按钮框在“中国空间站”之上即可。（4）单击菜单栏中的发布按钮，发布网页文件（需要实名认证）。单击菜单栏中的二维码按钮，提供网页预览二维码。3、点击菜单栏“文件”，选择“打开模板”，就可以选用网页模板了。 通过教师的讲解，以小组合作的方式，开展探讨交流，完成任务。通过教师的讲解，以小组合作的方式，开展探讨交流，完成任务。通过教师的讲解，以小组合作的方式，开展探讨交流，完成任务。通过教师的讲解，以小组合作的方式，开展探讨交流，完成任务通过教师的讲解，以小组合作的方式，开展探讨交流，完成任务 通过小组合作，加强学生组内团结、共同完成任务培养学生独立思考的能力培养学生独立思考的能力培养学生的探究能力培养学生的动手实践能力
布置作业 1、制作“科技创新·自主可控”主题网页第二页、第三页、第四页的内容。2、添加跳转和返回按钮功能。 完成作业 培养学生查阅资料的能力，分析解决问题的能力
课堂小结 本节课主要知道网页的概念及组成元素，掌握常用的浏览器的使用，接着了解HTML和H5的概念，了解H5网页的特点及应用最后重点讲授了“科技创新·自主可控”主题网页制作方法。 分组总结归纳 锻炼学生的总结能力，逻辑思维、语言表达能力。
板书 一、浏览网页1、网页的概念及组成元素2、常用的浏览器二、认识H5网页1、HTML和H5简介2、静态网页和动态网页3、H5网页的特点4、H5网页的应用三、制作网页1、“科技创新·自主可控”主题欢迎网页制作过程2、项目实施——跳转按钮的制作 学习、记忆及勾画知识点 明确教学内容及重点和难点
21世纪教育网 www.21cnjy.com 精品试卷·第 2 页 （共 2 页）
HYPERLINK "http://www.21cnjy.com/" 21世纪教育网(www.21cnjy.com)

展开更多......

收起↑