(
课件网) 七年级下册 主题一 文化遗产线上展 任务一 探秘网页与代码 Cloud 汇报人：WPS 情境导入 壮壮上网搜集有关“三月三”的内容，浏览到许多图文并茂、呈现效果生动逼真的网页，这些网页是通过什么方式实现这些效果的呢？ 导入 XXXX 用浏览器打开一个本地的 HTML 文件，按下“F12”键或在浏览器的工具栏中查找“开发者工具”，选中后打开，如图： 探究 XXXX 用鼠标在“开发者工具”窗口进行任意移动和点击，观察浏览器窗口所显示的内容的变化，如图： 探究 1. 同一个网页文件的内容，显示在浏览器窗口和显示在“开发者工具”窗口有何不同？各有什么特点？ 思考 浏览器窗口主要展示网页的最终呈现效果,是用户正常浏览网页时看到的样子。 开发者工具窗口除了显示网页的内容外,还会展示网页的源代码结构、网络请求信息、性能分析数据等。 特点:浏览器窗口:用户友好性高、视觉效果优先。开发者工具窗口:面向开发者的功能强大、提供网页底层信息。 思考 1. 同一个网页文件的内容，显示在浏览器窗口和显示在“开发者工具”窗口有何不同？各有什么特点？ 思考 图文声像并茂的网页背后,对应着一串串字符代码,这些代码对应着描述网页的 语言--HTML(hypertext markup language,超文本标记语言)。浏览器根据 HTML语言进行相应的处理,才能呈现出人们看到的网页效果。HTML 语言中用 于标记内容、格式或超链接的代码符号叫标签,大部分标签是成对出现的,但也 存在不成对的情况。 思考 概念 HTML（hypertext markup language）的中文名全称为“超文本标记语言”，是一种标记语言。HTML 标签是 HTML 中最基本的单位，HTML 就是通过一系列标签对要显示在网页上的超 文本内容进行统一的格式定义。 概念 部分常用标签的作用 不同的标签有不同的效果，图中还涉及了哪些标签？这些标签的作用分别是什么？请你大胆猜想并和小伙伴展开讨论，将你们讨论的结果记录下来。 讨论
DIV标签,称为区隔标记。作用是设定字、画、表格等的摆放位置。 span标签,标签被用来组合文档中的行内元素,支持HTML的全局属性。 讨论 标签有哪些表现形式？请举例说明。 思考 标签表现形式有:单标签与双标签。 单标签::图像、:换行符、:水平线等。 双标签::超链接、:段落、:网页的标题等。 思考 XXXX 通过浏览器的“开发者工具”窗口编辑网页，修改或删除标签，观察网页效果的变化，验证你的猜想，并将这些标签的作用进行总结，记录在表中。 马上行动 XXXX 1. 请明确将要制作的网页主题，并规划页面结构。 2. 请编写代码。使用“记事本”（或其他文本编辑器）直接编辑代码，也可以使用在线网页制作工具编写。 3. 请运行调试，修改代码。通过浏览器打开网页文件预览效果，可以借助浏览器的“开发者工具”调试代码，直至达到满意的效果。 4. 请保存网页代码，使用相关工具发布网页。 做中学 XXXX 请将你操作过程中遇到的问题、解决方法记录在表中 问题描述 解决方法 做中学 在网页中添加本地图像的代码和添加来源于其他网页上的图像的代码有什么区别？在实际应用中各有哪些优缺点？将两种方式涉及的代码写下来进行对比，并根据运行效果总结它们适合的应用场景。 思考 本地图片:当图片存储在服务器上或与HTML文件在同一目录时,可以使用相对路径引用图片。如果HTML文件和图片文件位于同一目录下,可以使用以下代码:
;如果图片在子目录中,可以使用:
;如果图 片在上一级目录中,可以使用:
网络图片:当图片存储在其他网站的服务器上时,需要使用图片的URL地址。如:
~~ 您好，已阅读到文档的结尾了 ~~
