资源简介 (共45张PPT)第1单元 第1课精彩尽在网页中——从制作到渲染（清华大学版）七年级下1核心素养目标3新知讲解5拓展延伸7板书设计2新知导入4课堂练习6课堂总结课后作业801核心素养目标信息意识计算思维数字化学习与创新信息社会责任网页网站的深度学习在掌握网页制作的基础技能的同时更能形成技术服务于社会需求的价值观，为数字化时代的公民素养奠定基础。深度学习课程尝试通过修改或自主设计，创作创新个性化网页，培养数字化成果的展示与交流能力。通过拆分网页模块分解为可操作单元的思维能力，掌握用HTML语言描述网页的基本结构，理解网页内容的层级化组织。能够分析网页内容的组织逻辑，理解网页作为信息社会的重要载体，在信息传播、获取与共享中的作用。02新知导入本单元你将学习：浏览器如何渲染网页视觉效果网络视频怎样实现流畅地播放如何确保信息在网络传输中的安全如何设计、制作并发布个人网页02新知导入在通信理论中，编码是按照一定规则对原始信息符号进行转换编成的代码，它能确保信息在通信线路中进行有效传输。编码既要实现用尽可能少的符号来传递尽可能多的信息，又要增强信号的抗干扰能力，以使信息传输效率最大化。互联网已经发展成规模最为庞大、通信最为繁忙的网络文本、图片、音频与视频等各种网络信息，也都通过一系列规则的变换实现高效传输。其中，网页是网络信息的重要载体。02新知导入文本、图片、动画、音频与视频等，都是互联网信息的重要载体。你知道它们都有哪些编码形式吗？请查询资料，了解相关信息，填写在下表中。学习热身信息载体 编码形式文本 ASCII, Unicode (UTF-8, UTF-16), ISO/IEC 8859图片 JPEG, PNG, GIF, BMP, TIFF, WebP动画 GIF, APNG, WebM, SWF (Flash)音频 MP3, AAC, WAV, FLAC, Ogg Vorbis, Opus视频 MP4 (H.264, H.265), AVI, MKV, WebM, MOV02新知导入你知道吗 克劳德·艾尔伍德·香农（Claude ElwoodShannon）是世界公认的信息论创始人。他一举奠定了现代通信技术、数字逻辑电路与密码学基础，并在数据压缩、数字计算机、网络流、图论、人工智能与人机交互领域作出了开创性贡献。香农在信息论方面的代表作有《密码学的一个数学理论》《通信的数学理论》等。02新知导入本课中你将学习：网站与网页之间的关系是怎样的网页的制作标准与设计制作工具有哪些浏览器是如何渲染网页的02新知导入在网络交流非常频繁的今天，网页诞生的时间虽然比较久远，但它仍然是一种非常重要的网络信息载体形式。网页就像是一个功能非常强大的容器，可以用来盛放各种各样的信息，并被大家访问与转发，从而让网络交流变得更加精彩、有趣!02新知导入你知道吗 1991年，世界上第一张网页诞生，虽然页面极其简陋，但却立即引起轰动。今天仍然可以继续访问它，如图1.1.1所示。02新知导入03新知讲解一、网站与网页网站与网页是上网浏览时经常提到的两个概念，它们之间是包含与被包含的关系。如图1.1.2所示，网站是Web服务器上用来存放网页的文件夹，它是所有相关网页的集合，而网页则是网站中的文档元素。03新知讲解1.网站及其标志人们提及网站，通常会说它的网站名或网站地址。网站名就是用于标识网站的名称，通常会醒目地放在首页中以便浏览者第一眼识别。网站首页就是输入网站地址后，默认被打开的第一张网页。如图1.1.3所示，网站首页的标题，通常显示在浏览器标签页上方的标题栏中。03新知讲解2.网页及其类型网站中的网页可以分为首页与内页。首页又称为主页，主要用来导航与链接其他内页，一个网站通常只有一张主页。内页又称为子页，就是网站内部的其他页面，主要用来呈现更多、更具体的网络信息，并且数量相对较多。03新知讲解阅读网页还可分为动态与静态两类。静态网页的URL（统一资源定位符 ），大多是以 htmm、html及shtml等为后缀，其交互性较差且不易修改,因而网站维护工作量相对较大。动态网页的URL，大多以asp、aspx、jsp、php或perl等为后缀，交互性较强，网站维护工作量相对较轻。03新知讲解无论是主页还是子页，它们的版面大多由导航栏、栏目及正文内容三大部分组成，如图1.1.4所示。网页中的基本元素有文本、图片、动画、音频、视频、表格、超链接、表单、框架与内嵌程序等，其中表单主要用来收集和记录信息，框架用来分割网页的不同区域，内嵌程序用来实现动态效果与交互功能。03新知讲解二、网页的制作在万维网发展初期，网页就已经成为人们获取网络信息的重要途径但由于当时还没有统一的制作标准，相同网页在不同浏览器中会产生不一样的视觉效果，实现不一样的功能，进而阻碍了万维网的发展。03新知讲解1.W3C 标准及其编程语言1994年，万维网联盟（World Wide Web Consortium，简称 W3C）成立，随后陆续发布400多项网页技术标准与实施指南，统称为网页W3C标准或规范。该标准规定，网页代码主要由结构、表现和行为三部分组成，并分别使用 HTML、CSS与 JS等编程语言来创建，如表1.1.1所示。03新知讲解阅读W3C标准的网页，就是一段由HTMIL标签组成的描述性文本文档，其基本格式如图 1.1.5 所示。03新知讲解阅读DOCTYPE（DocumentType 的简写，文档类型）声明，必须位于文档头部，以告诉浏览器将要加载的文档类型。是HTML页面的根元素。用于指定一些网页的元数据和其他信息。这些元数据通常包括页面标题、角色和字符集定义，还可以添加CSS 样式与JavaScripi脚本等。用于描述网页的标题。<br/><body>用于描述网页的页面内容。<br/><p>用于描述一个段落。<br/>03<br/>新知讲解<br/>探 索<br/>请自行了解并选择一款人工智能大语言模型工具，来帮你生成一张用 HTMI语言编写的简单网页，并要求对每一行代码进行注释。然后阅读并理解这些 HTML代码的意思，再将它们完整地复制到记事本中，并命名为 web.html文件，最后用浏览器打开并观察该网页的页面效果，看看它是否与你的理解保持一致。<br/>复制代码：将上面的代码完整复制。<br/>保存为HTML文件。<br/>用浏览器打开：<br/>找到保存的web.html文件。<br/>双击文件，它会在默认浏览器中打开。<br/>03<br/>新知讲解<br/>观察效果：<br/>网页标题应显示为“我的第一个网页”。<br/>页面上有一个大标题“欢迎来到我的网<br/>页！”，有两个段落文本。<br/>有一个超链接，点击后会跳转到示例网站有一张示例图片。<br/>探 索<br/>请自行了解并选择一款人工智能大语言模型工具，来帮你生成一张用 HTMI语言编写的简单网页，并要求对每一行代码进行注释。然后阅读并理解这些 HTML代码的意思，再将它们完整地复制到记事本中，并命名为 web.html文件，最后用浏览器打开并观察该网页的页面效果，看看它是否与你的理解保持一致。<br/>03<br/>新知讲解<br/>2.其他制作工具<br/>为了提高网页制作效率，人们还开发了许多其他编程语言与可视化开发工具。其中，可视化开发工具，可以让没有编程知识的人也能参与制作网页。他们只需按照相关提示，就可以在网页中插人文本、图片与音视频等信息，就像在编辑 Word 或 PPT 文档那样。<br/>为了随时随地制作网页，人们还开发出支持智能手机与平板电脑等移动终端的制作环境。人们可以通过这些移动终端，在公众号、微博和美篇等网络平台上，制作并发布各种所见即所得的符合 W3C 标准的精美网页。<br/>03<br/>新知讲解<br/>探 索<br/>请搜索更多关于网页制作工具的知识，并与同学分享交流。<br/>代码编辑器：VS Code（插件扩展）、Sublime Text。<br/>可视化工具：Webflow（无代码设计）、Wix（模板建站）。<br/>框架/库：Bootstrap（响应式布局）、React/Vue（动态交互）。<br/>部署与协作：Netlify（静态托管）、GitHub（版本控制）。<br/>03<br/>新知讲解<br/>三、浏览器的渲染<br/>如图1.1.6所示，无论是采用哪种制作工具，编写生成的网页都是一种包含HTML标签、CSS样式与JavaScript的纯文本文件。而它真实的视觉效果与功能，则必须经过浏览器的渲染，才能正常显示出来。<br/>03<br/>新知讲解<br/>所谓渲染，就是浏览器自动结合网络终端的屏幕性能，对服务器响应返回的HTML、CSS 和JavaScript 等相关资源文件进行解析。首先解析用来显示出标题、段落和图片等的HTML，其次解析让文字和图片以特定方式呈现的CSS，最后执行增加交互性的JavaScript，从而完整地绘制出用户所看见的网页视觉效果。<br/>03<br/>新知讲解<br/>阅读<br/>UTF-8是互联网中使用最广泛的字符编码，能够满足不同语言字符的编码要求，因此在文字解析时不容易出现如图1.1.7所示的“乱码”现象。<br/>03<br/>新知讲解<br/>探 索<br/>使用浏览器打开网页，尝试将UTF-8字符编码更改为GBK或者其他编码，再观察网页中文字的变化。<br/>（1）修改编码并重新打开<br/>将 <meta charset="UTF-8"> 修改为<br/><meta charset="GBK">，保存并重新打开。<br/>观察网页中文字的变化：<br/>中文字符可能显示正常，也可能出现乱码。<br/>03<br/>新知讲解<br/>英文字符通常不会受影响。<br/>特殊符号可能会显示为乱码。<br/>（2）尝试其他编码<br/>将 <meta charset> 修改为其他编码<br/>ISO-8859-1、Big5 等，保存并重新打开网页。<br/>v<br/>探 索<br/>使用浏览器打开网页，尝试将UTF-8字符编码更改为GBK或者其他编码，再观察网页中文字的变化。<br/>03<br/>新知讲解<br/>（3）变化：<br/>如果网页内容的实际编码与 <meta charset> 指定的编码一致，网页会正常显<br/>示。当编码不一致时可能会出现乱码，尤其是对于中文和其他特殊字符。<br/>推荐使用 UTF-8：由于 UTF-8 支持几乎所有语言，且是现代网页开发的默认编<br/>码，建议统一使用 UTF-8 来避免乱码问题。<br/>探 索<br/>使用浏览器打开网页，尝试将UTF-8字符编码更改为GBK或者其他编码，再观察网页中文字的变化。<br/>03<br/>新知讲解<br/>挑战<br/>使用“审查元素”工具修改网页源代码。使用浏览器打开网页按F12键，在弹出的源代码窗口中仔细阅读网页的源代码，找出标题、文本、图片等元素，并对其进行修改编辑，注意观察浏览器的实时渲染结果。<br/>04<br/>课堂练习<br/>一、选择题<br/>1、网站与网页的关系是（ ）。<br/>A. 网页是网站的集合 B. 网站是网页的集合<br/>C. 网站与网页无直接关系 D. 网页包含网站<br/>2、以下关于静态网页与动态网页的描述，正确的是（ ）。<br/>A. 静态网页以.php为后缀 B. 动态网页交互性较差<br/>C. 静态网页维护工作量较大 D. 动态网页以.html为后缀<br/>3、W3C标准中，用于控制网页布局和样式的语言是（ ）。<br/>A. HTML B. CSS C. JavaScript D. Python<br/>C<br/>B<br/>B<br/>04<br/>课堂练习<br/>4、浏览器解析网页时，第一步是（ ）。<br/>A. 执行JavaScript代码 B. 解析CSS样式<br/>C. 生成DOM树 D. 绘制页面内容<br/>二、判断题<br/>网站首页的标题通常显示在浏览器标签页的标题栏中。（ ）<br/>UTF-8编码能够避免网页文字出现乱码现象。（ ）<br/>动态网页的URL后缀一定是.html。（ ）<br/>使用浏览器开发者工具（F12）可以修改网页源代码并实时查看效果。（ ）<br/>C<br/>√<br/>√<br/>X<br/>√<br/>04<br/>课堂练习<br/>三、操作题<br/>使用HTML语言制作一个简单网页并通过浏览器验证渲染效果。<br/>要求：<br/>为每一行HTML代码添加中文注释。<br/>保存文件时确保字符编码为UTF-8。<br/>使用浏览器开发者工具修改代码并观察实时效果。<br/>05<br/>拓展延伸<br/>语义化标签<br/>语义化标签是指通过HTML标签的名称直接表达其内容或结构含义的标签。<br/>标签 用途描述 示例场景<br/><header> 页面或区块的头部 网站Logo、主导航栏<br/><nav> 导航链接集合 顶部菜单、侧边栏目录<br/><main> 网页主体内容 文章正文、产品列表<br/><article> 独立完整的内容块 一篇博客、新闻详情<br/><section> 文档中的逻辑分区 章节、产品功能模块<br/>05<br/>拓展延伸<br/>语义化标签<br/>标签 用途描述 示例场景<br/><aside> 与主内容相关的辅助信息 侧边栏广告、相关文章推荐<br/><footer> 页面或区块的页脚 版权声明、联系方式<br/><address> 表示联系信息（如作者、公司地址） 网页页脚中的联系方式，文章末尾的作者信息<br/><figure>+<figcaption> 图文组合及描述 图片配文字说明<br/>05<br/>拓展延伸<br/>编程语言<br/>编程语言是开发者与计算机交流的工具，通过编写特定语法的指令，控制计算机完成特定任务。<br/>语言 核心特点<br/>Python 语法简洁、跨平台、丰富的第三方库<br/>Java 强类型、面向对象、“一次编写，到处运行”<br/>C++ 高性能、支持底层操作、面向对象<br/>JavaScript 动态类型、事件驱动、浏览器原生支持<br/>SQL 声明式语言、专注于数据操作<br/>Rust 内存安全、零成本抽象、高性能<br/>Swift 简洁安全、苹果生态原生语言<br/>05<br/>拓展延伸<br/>渲染引擎<br/>渲染引擎（Rendering Engine）是浏览器的核心组件，负责将网页的HTML、CSS和JavaScript代码解析为可视化的页面。不同渲染引擎在实现上述流程时存在显著差异，直接影响网页的渲染效果和性能。<br/>核心流程：<br/>解析HTML → 构建DOM树<br/>解析CSS → 生成CSSOM树<br/>合并DOM与CSSOM → 构建渲染树（Render Tree）<br/>布局（Layout） → 计算元素位置与大小<br/>绘制（Painting） → 填充像素到屏幕上<br/>05<br/>拓展延伸<br/>网页从制作到渲染结合案例<br/>个人博客网站<br/>制作：先确定架构和内容，接着用 HTML5 搭建结构，CSS 设计样式，实现多设备适配，再用 JavaScript 添加交互。<br/>渲染：浏览器接收网页文件后，依次解析 HTML、CSS 构建树结构，生成渲染树，经布局计算后绘制页面，异步加载内容会后续更新显示。<br/>05<br/>拓展延伸<br/>网页从制作到渲染结合案例<br/>动态数据展示网页（以销售数据报表为例）<br/>制作：规划从数据库获取数据及展示形式，用 HTML 创建展示区域，CSS 美化，JavaScript 与服务器通信获取数据，借助可视化库将数据呈现在图表和表格中。<br/>渲染：浏览器获取网页资源，解析渲染页面，同时 JavaScript 发送数据请求，接收数据后更新图表和表格，浏览器重新渲染相关区域 。<br/>06<br/>课堂总结<br/>1<br/>引入新知内容<br/>精彩尽在网页中——从制作到渲染<br/>2<br/>学习网页网站的基础知识<br/>3<br/>进行实践操作与工具应用<br/>4<br/>完成课堂练习<br/>5<br/>进行知识拓展<br/>1<br/>2<br/>3<br/>4<br/>5<br/>07<br/>板书设计<br/>精彩尽在网页中——从制作到渲染<br/>1、进行新知引入<br/>2、学习网页网站的基础知识<br/>3、进行实践操作与工具应用<br/>4、完成课堂练习<br/>5、进行知识拓展<br/>课后作业。<br/>1、修改代码探究字符编码。<br/>2、学习总结。<br/>08<br/>课后作业<br/>1、将作业一的my_page.html文件另存为GBK编码（使用记事本或Notepad++）。修改代码中的<meta charset="UTF-8">为<meta charset="GBK">。用浏览器打开，记录中文显示效果（是否乱码）。<br/>2、总结本课所学内容。<br/>https://www.21cnjy.com/recruitment/home/fine</p> <p class="introAll">展开更多......</p> <p class="introAllHide">收起↑ </p> </div> </form> <div class="entry-content clearfix"> <p class="asset-tit"><img src="/images/asset.png" style="width: 20px;height: 20px;vertical-align: text-bottom;margin-right: 5px;">资源列表</p><ul class="des-list"><li><a href="https://www.21cnjy.com/H/14/286862/22607679.shtml?from=zy"><img src="/images/ppt.png" alt="ppt"></a> <a href="https://www.21cnjy.com/H/14/286862/22607679.shtml?from=zy"> <p>【清华大学版】《信息科技》七年级下册第1单元第1课《精彩尽在网页中——从制作到渲染》.pptx</p></a> </li> <li><a href="https://www.21cnjy.com/H/14/286862/22607679.shtml?from=zy"><img src="/images/video.png" alt="mp4"></a> <a href="https://www.21cnjy.com/H/14/286862/22607679.shtml?from=zy"> <p>视频引入.mp4</p></a> </li> </ul> </div> <div class="entry-footer"> <div class="entry-bar"> <div class="entry-bar-inner clearfix text-center"> </div> </div> <div class="entry-copyright"> <p>缩略图、资源来源于二一教育资源库</p> </div> </div> </div> </article> </div> <aside class="sidebar"> <div class="widget widget_views"> <h3 class="widget-title">相关资源</h3> <ul> <li><a href="https://doc.21cnjy.com/p-22607679.html" title="【核心素养目标】第1单元 第1课《精彩尽在网页中--从制作到渲染》课件+素材-【清华大学版2024】《信息科技》七下">【核心素养目标】第1单元 第1课《精彩尽在网页中--从制作到渲染》课件+素材-【清华大学版2024】《信息科技》七下</a></li> <li><a href="https://doc.21cnjy.com/p-22607677.html" title="【核心素养目标】第1单元 第1课《精彩尽在网页中--从制作到渲染》教案-【清华大学版2024】《信息科技》七下">【核心素养目标】第1单元 第1课《精彩尽在网页中--从制作到渲染》教案-【清华大学版2024】《信息科技》七下</a></li> <li><a href="https://doc.21cnjy.com/p-22471032.html" title="第1课 精彩尽在网页中——从制作到渲染 教学设计 清华大学版（2024）（青海） 七年级下册信息科技">第1课 精彩尽在网页中——从制作到渲染 教学设计 清华大学版（2024）（青海） 七年级下册信息科技</a></li> <li><a href="https://doc.21cnjy.com/p-22470982.html" title="第1课 精彩尽在网页中-从制作到渲染 课件(共23张PPT)+学案-2024-2025学年清华大学版七年级下册">第1课 精彩尽在网页中-从制作到渲染 课件(共23张PPT)+学案-2024-2025学年清华大学版七年级下册</a></li> </ul> </div> </aside> </div> </div> </main> <script src="//static.21cnjy.com/js/underscore-1.8.3.min.js"></script> <script type="text/javascript" src="https://b.bdstatic.com/searchbox/icms/searchbox/js/swanInvoke.js"></script> <script> function jumpbaiduboxapp(el){ if (navigator.userAgent.toLowerCase().indexOf('baiduboxapp/') >-1){ window.swanInvoke({ appKey: 'LYaggHHMnhIO7GgfWsVcMKQKoRjCXLqq', path: 'pages/zydown/zydown', query: { id: el.attributes['ownattr'].nodeValue } }); return false; }else{ return true; } }; ;(function(){ var ua = navigator.userAgent.toLowerCase() var isWXWork = ua.match(/wxwork/i) == 'wxwork'; var isWeixin = !isWXWork && ua.match(/MicroMessenger/i) == 'micromessenger'; var isMobile = isDesktop = false; if (navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|IEMobile)/i)) { isMobile = true; } else { isDesktop = true; } var isAndroid = ua.indexOf('android') > -1 || ua.indexOf('Adr') > -1; var isOS = ua.indexOf('iPhone') > -1 || ua.indexOf('iPad') > -1 || ua.indexOf('Mac') > -1; if (isWeixin) { } if (isAndroid) { } // 标题固定fixed var $fixedTit = $('#J_FixedShowDetailTit'); var fixed_tit = function () { var titIsShow = $(window).scrollTop() > 179; if (titIsShow) { $fixedTit.animate({ top: 0 }, 300); } else { $fixedTit.animate({ top: '-200px' }, 300); } }; $(window).on('scroll', _.debounce(fixed_tit, 50)); fixed_tit(); // 简介固定高度 var $height= $('.assets-intro').height(); if($height == 480) $('.introAll').show(); // 收缩 function toMore(el){ var flag = el == '.introAll' ? 1 : 0; var overflow = flag ? "auto" : "hidden"; var maxHeight = flag ? "inherit" : "480px" ; var className = flag ? ".introAllHide" : ".introAll"; $(el).on('click',function(){ $('.assets-intro').css({ "overflow":overflow, "maxHeight": maxHeight }); $(el).hide(); $(className).show(); }); } toMore('.introAll'); toMore('.introAllHide'); })(); </script> <!--footer开始--> <!-- 底部 --> <footer class="footer"> <div class="container"> <div class="clearfix"> <div class="footer-col footer-col-logo"> <!-- <mip-img src="/just/images/logo-footer.png" width="60" height="60"></mip-img> --> </div> <div class="footer-col footer-col-copy "> <ul class="footer-nav hidden-xs "> <li><a href="https://www.21cnjy.com/help/">帮助中心</a> </li> <li><a href="https://www.21cnjy.com/about/about_contact-us.php">联系我们</a> </li> <li><a href="https://www.21cnjy.com/about/about_opinion.php">意见反馈</a> </li> </ul> <div class="copyright "> 2023 版权所有© 二一教育 <a href="https://beian.miit.gov.cn" target="_blank " rel="nofollow noopener noreferrer">粤ICP备11039084</a> </div> </div> <div class="footer-col footer-col-sns "> <div class="footer-sns "> <ul class="footer-nav hidden-xs "> <li>友情链接：</li> <li> <a href="https://yj.21cnjy.com/" title="阅卷软件系统">阅卷系统</a> <a href="https://edu.21cnjy.com/" title="美文范文">优秀范文</a> <a href="https://paike.21cnjy.com/" title="新高考走班">走班排课</a> <a href="https://tiku.zujuan.com/" title="组卷网题库">组卷题库</a> <a href="https://www.chujuan.cn/" title="组题出卷网">出卷网</a> </li> </ul> </div> </div> </div> </div> </footer> <mip-fixed type="gototop"><mip-gototop></mip-gototop></mip-fixed> <mip-stats-baidu token="0280ecaa2722243b1de4829d59602c72"></mip-stats-baidu> <script src="https://c.mipcdn.com/static/v2/mip.js"></script> <script src="https://c.mipcdn.com/static/v2/mip-stats-baidu/mip-stats-baidu.js"></script> <script src="https://c.mipcdn.com/static/v2/mip-gototop/mip-gototop.js"></script> <script src="https://c.mipcdn.com/static/v2/mip-history/mip-history.js"></script> <script src="https://c.mipcdn.com/static/v2/mip-fixed/mip-fixed.js"></script> <script src="https://c.mipcdn.com/extensions/platform/v1/mip-cambrian/mip-cambrian.js"></script> <script src="https://c.mipcdn.com/static/v2/mip-share/mip-share.js"></script> <script src="https://c.mipcdn.com/static/v2/mip-form/mip-form.js"></script> <script src="https://c.mipcdn.com/static/v2/mip-sidebar/mip-sidebar.js"></script> <script src="https://c.mipcdn.com/static/v2/mip-vd-tabs/mip-vd-tabs.js"></script> <script src="https://c.mipcdn.com/static/v2/mip-lightbox/mip-lightbox.js"></script> <script src="https://c.mipcdn.com/static/v2/mip-ad/mip-ad.js"></script> <script src="/assets/26c9d710/jquery.js"></script> <script src="/assets/a0893c15/yii.js"></script> <script src="/assets/a0893c15/yii.activeForm.js"></script> <script type="text/javascript">jQuery(document).ready(function () { jQuery('#w0').yiiActiveForm([], []); jQuery('#w1').yiiActiveForm([], []); });</script> </body> </html>