桂科版2025 七下主题一任务一 探秘网页与代码 课件.pptxVIP

七年级下册主题一文化遗产线上展任务一探秘网页与代码Cloud汇报人：WPS

情境导入壮壮上网搜集有关“三月三”的内容，浏览到许多图文并茂、呈现效果生动逼真的网页，这些网页是通过什么方式实现这些效果的呢？导入

XXXX用浏览器打开一个本地的HTML文件，按下“F12”键或在浏览器的工具栏中查找“开发者工具”，选中后打开，如图：探究

XXXX用鼠标在“开发者工具”窗口进行任意移动和点击，观察浏览器窗口所显示的内容的变化，如图：探究

1.同一个网页文件的内容，显示在浏览器窗口和显示在“开发者工具”窗口有何不同？各有什么特点？思考浏览器窗口主要展示网页的最终呈现效果,是用户正常浏览网页时看到的样子。开发者工具窗口除了显示网页的内容外,还会展示网页的源代码结构、网络请求信息、性能分析数据等。特点:浏览器窗口:用户友好性高、视觉效果优先。开发者工具窗口:面向开发者的功能强大、提供网页底层信息。思考

1.同一个网页文件的内容，显示在浏览器窗口和显示在“开发者工具”窗口有何不同？各有什么特点？思考图文声像并茂的网页背后,对应着一串串字符代码,这些代码对应着描述网页的语言--HTML(hypertextmarkuplanguage,超文本标记语言)。浏览器根据HTML语言进行相应的处理,才能呈现出人们看到的网页效果。HTML语言中用于标记内容、格式或超链接的代码符号叫标签,大部分标签是成对出现的,但也存在不成对的情况。思考

概念HTML（hypertextmarkuplanguage）的中文名全称为“超文本标记语言”，是一种标记语言。HTML标签是HTML中最基本的单位，HTML就是通过一系列标签对要显示在网页上的超文本内容进行统一的格式定义。

概念部分常用标签的作用

不同的标签有不同的效果，图中还涉及了哪些标签？这些标签的作用分别是什么？请你大胆猜想并和小伙伴展开讨论，将你们讨论的结果记录下来。讨论div/divDIV标签,称为区隔标记。作用是设定字、画、表格等的摆放位置。span标签,标签被用来组合文档中的行内元素,支持HTML的全局属性。讨论

标签有哪些表现形式？请举例说明。思考标签表现形式有:单标签与双标签。单标签::图像、:换行符、:水平线等。双标签::超链接、:段落、:网页的标题等。思考

XXXX通过浏览器的“开发者工具”窗口编辑网页，修改或删除标签，观察网页效果的变化，验证你的猜想，并将这些标签的作用进行总结，记录在表中。马上行动

XXXX1.请明确将要制作的网页主题，并规划页面结构。2.请编写代码。使用“记事本”（或其他文本编辑器）直接编辑代码，也可以使用在线网页制作工具编写。3.请运行调试，修改代码。通过浏览器打开网页文件预览效果，可以借助浏览器的“开发者工具”调试代码，直至达到满意的效果。4.请保存网页代码，使用相关工具发布网页。做中学

XXXX请将你操作过程中遇到的问题、解决方法记录在表中问题描述解决方法做中学

在网页中添加本地图像的代码和添加来源于其他网页上的图像的代码有什么区别？在实际应用中各有哪些优缺点？将两种方式涉及的代码写下来进行对比，并根据运行效果总结它们适合的应用场景。思考本地图片:当图片存储在服务器上或与HTML文件在同一目录时,可以使用相对路径引用图片。如果HTML文件和图片文件位于同一目录下,可以使用以下代码:imgsrc=image.jpgalt=描述文本;如果图片在子目录中,可以使用:imgsrc=images/image.jpgalt=描述文本;如果图片在上一级目录中,可以使用:imgsrc=../image.jpgalt=描述文本网络图片:当图片存储在其他网站的服务器上时,需要使用图片的URL地址。如:

imgsrc=/path/to/image.jpgalt=描述文本本地图片的优势:使用本地图片可以减少外部请求,加快页面加载速度。本地图片不受外部网站状态的影响,更加稳定。引用图片时需要注意版权问题。网络图片的优势:使用网络图片可以提供更多的灵活性和动态内容更新。然而,这可能增加页面加载时间,因为浏览器需要为每张图片发起新的网络请求。引用网络图片时需要注意版权问题。思考

HTML代码是不是必须保存在以“.htm”“.html”为扩展名的网页文件中？结合你对网页和代码之间关系的认识，和伙伴们进行讨论，把你的收获写下来。讨论讨论

查阅工具书或借助互联网了解更多制作网页的工具，选择一款你喜欢的网页制作软件，用它制作一张属于你自己的创意网页，在创作过程中进一步体会网页与代码之间的关系。拓展任务拓展

谢谢汇报人：WPS