电子工业版信息技术七下1.1 编辑网页信息 课件.pptx

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）世界之窗浏览器。

新知讲解与科技创新相关的网页。网址或网站名称可借鉴之处中国科学院科技创新发展中心/图文并茂，动画、视频展示科技内容，采用表格合理划分区域网易新闻（神舟15号新闻报道）///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）登录在线网页编辑平台（）。单击“创建作品”菜单，进入到在线网页编辑窗口。

新知讲解（2）添加页面。单击工具栏中的“页面”按钮，在“舞台”下方增加一个页面对象，将该页面命名为“欢迎页”。

新知讲解（3）设置页面背景颜色。单击属性面板上的“背景颜色”，选择一种颜色（橙色）。

新知讲解（4）编辑文本。单击工具面板中的“中文字体”工具，并在舞台中单击，然后在弹出的“文本内容”对话框中输入标题文字。

新知讲解（5）设置文本属性，选中文本框。在属性面板中选择字体，设置字体的颜色、大小等属性。

新知讲解（6）添加图片。单击工具面板中的图片工具，拖动鼠标，调整图片的大小和位置，松开鼠标后在弹出的“打开”对话框中选择要插入网页中的图片。

新知讲解（7）给文本添加动态效果。选中文本，单击菜单栏中的按钮，在下拉列表中为文本选择一种动态效果。

新知讲解（8）保存并预览网页。单击菜单栏中的按钮，保存网页文件。单击菜单栏中的按钮，预览网页效果。

新知讲解H5网页预览效果

项目实施（1）单击菜单栏中的按钮，添加一个方框，然后将填空颜色设置为“无”，边框颜色为“#000000”（黑色），粗细为“1PX”，并且设置“圆角”的值为15。

项目实施（2）单击菜单栏中的按钮，添加文字“中国空间站”，并设置字体、颜色、文本对齐方式以及位置等。

项目实施（3）单击菜