电子工业社版（2022）1.1 编辑网页信息一等奖课件ppt

这是一份电子工业社版（2022）1.1 编辑网页信息一等奖课件ppt，文件包含新课标电子工业版信息技术七下11《编辑网页信息》课件pptx、新课标电子工业版信息技术七下11《编辑网页信息》教案doc、什么是H5mp4、巩固作业科技创新自主可控页面最终效果mp4等4份课件配套教学资源，其中PPT共56页， 欢迎下载使用。

1、学习使用网页编辑工具创建网络文档，表达创作思想。2、知道网络中信息编码及呈现的原理。3、认识网络爬虫，了解网络爬虫的作用。4、掌握通过编写网络爬虫程序来获取网页信息的方法。5、知道使用网络爬虫程序获取网页信息时要遵守基本的道德规范。
互联网的信息和资源的作用：（1）政府部门发布政务信息，提供政策咨询，沟通社情民意；（2）企业进行产品推广、业务宣传、寻找合作伙伴；（3）服务机构提供新闻、教育、娱乐、旅游等服务；（4）学校师生可以宣传学校形象、展示学习效果、开展研究性学习。
首先观看一个视频，了解什么是H5？
1、了解网页的概念及组成元素；2、掌握常用的浏览器的使用；3、了解HTML和H5的概念；4、了解静态网页和动态网页的区别；5、了解H5网页的特点及应用；6、掌握“科技创新·自主可控”主题网页制作。
网页是构成网站的基本元素，是承载各种网站应用的平台，是一个包含HTML标签的纯文本文件，采用超文本标记语言格式（文件扩展名为.html或.htm）。
网页包含的元素：（1）文本；（2）图像；（3）音频、视频；（4）表格、表单；（5）动画；（6）导航栏。
思考——什么是导航栏？
导航栏就是在网页中是一组超链接，其连接的目的端是网页中重要的页面。
超链接是从一个网页指向另一个目的端的链接，超链接的目的端可以是网页，也可以是图片、电子邮件地址、文件和程序等，用于实现页面或者网站的跳转功能。
常用浏览器：（1）IE浏览器；（2）谷歌浏览器；（3）360浏览器；（4）火狐浏览器；（5）世界之窗浏览器。
与科技创新相关的网页。
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）登录在线网页编辑平台（）。单击“创建作品”菜单，进入到在线网页编辑窗口。
（2）添加页面。单击工具栏中的“页面”按钮，在“舞台”下方增加一个页面对象，将该页面命名为“欢迎页”。
（3）设置页面背景颜色。单击属性面板上的“背景颜色”，选择一种颜色（橙色）。
（4）编辑文本。单击工具面板中的“中文字体”工具 ，并在舞台中单击，然后在弹出的“文本内容”对话框中输入标题文字。
（5）设置文本属性，选中文本框。在属性面板中选择字体，设置字体的颜色、大小等属性。
（6）添加图片。单击工具面板中的图片工具 ，拖动鼠标，调整图片的大小和位置，松开鼠标后在弹出的“打开”对话框中选择要插入网页中的图片。
（7）给文本添加动态效果。选中文本，单击菜单栏中的 按钮，在下拉列表中为文本选择一种动态效果。
（8）保存并预览网页。单击菜单栏中的 按钮，保存网页文件。单击菜单栏中的 按钮，预览网页效果。
（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、保存网页，，查看预览效果，并将制作的网页进行分享。访问地址（ ）。