google移动网站建站十大原则,河北省建设注册中心网站首页,想建一个自己的网站,网页制作语言谢从华#xff0c;高蕴梅 著.Web前端设计基础入门——HTML5、CSS3、JavaScript#xff08;微课视频版#xff09;,2023, 清华大学出版社. ISBN#xff1a;9787302641261.
1、教学目标
知识目标 学生能够准确阐述 Internet 的含义、发展历程、提供的网络服务#xff0c;以…谢从华高蕴梅 著.Web前端设计基础入门——HTML5、CSS3、JavaScript微课视频版,2023, 清华大学出版社. ISBN9787302641261.
1、教学目标
知识目标 学生能够准确阐述 Internet 的含义、发展历程、提供的网络服务以及接入技术的演变。深入理解 TCP/IP 协议的分层结构、各层包含的主要协议及其功能尤其是 TCP 和 IP 协议的作用。清晰掌握域名的概念、分级结构、域名解析的原理与过程以及中国域名服务器的安全现状与应对策略。熟知 URL、MIME、HTTP 协议的定义、语法、作用及相关特性如 HTTP 与 HTTPS 的区别。了解 Web 浏览器的主要组件、内核分类及工作原理熟悉常见浏览器及其内核特点。掌握 Web 服务器和应用服务器的概念、功能熟悉常见的 Web 服务器如 Apache、IIS、Nginx和应用服务器如 Tomcat、WebSphere、WebLogic的特点与应用场景了解国产相关产品情况。熟悉 Web 前端的主要技术包括 HTML、CSS、JavaScript、jQuery、Bootstrap、ECMAScript 的基本概念、功能、特点及相互关系。能力目标 能够根据给定的网络场景分析涉及的 Internet 技术原理如域名解析过程、HTTP 请求响应流程等。具备排查简单网络故障的能力例如根据浏览器显示异常判断可能的服务器、网络或前端代码问题。可以运用所学的前端技术初步构建简单的网页页面实现基本的布局、样式设置与交互功能。情感目标 培养学生对 Web 系统技术的学习兴趣激发探索网络技术奥秘的热情。引导学生关注我国在 Web 技术领域的发展现状增强为实现信息技术自主可控而努力学习的责任感。
2、教学重难点
教学重点 Internet 相关技术如 TCP/IP 协议分层、域名系统、HTTP 协议。Web 浏览器的内核与工作原理不同内核浏览器对网页呈现的差异。各类 Web 服务器和应用服务器的特点、适用场景如 Apache 与 Nginx 的对比。Web 前端核心技术 HTML、CSS、JavaScript 的协同应用jQuery 和 Bootstrap 框架对开发效率的提升。教学难点 TCP/IP 协议中各层协议的交互机制数据传输过程中的封装与解封装细节。域名解析在复杂网络环境下的完整流程涉及根域名服务器、权威 DNS 等的协同工作。浏览器渲染引擎的渲染流程从 HTML 解析到页面最终呈现的全过程包括重绘回流等关键概念。ECMAScript 标准的发展演变及其与 JavaScript 的关系理解不同版本新增特性对实际开发的影响。
3、教学方法
讲授法系统讲解理论知识确保知识的准确性与完整性如 Internet 协议、服务器原理等复杂概念。案例分析法通过实际的网络应用案例如访问百度网站涉及的域名解析、HTTP 请求等帮助学生理解抽象知识。演示法利用软件演示浏览器工作原理、网页前端技术效果让学生直观感受技术的实现过程如使用开发者工具查看浏览器内核解析网页的步骤。小组讨论法组织学生讨论国产 Web 技术发展面临的挑战与机遇激发思维碰撞培养团队协作与分析问题能力。
4、教学准备
多媒体教学设备确保教学课件、视频等资料的展示效果。安装有常见浏览器Firefox、Chrome、IE 等、Web 服务器软件如 Apache、Nginx的教学计算机用于课堂演示。自制教学课件包含丰富的图表、动画以辅助讲解复杂的技术原理如 DNS 域名解析流程动画。准备相关的案例资料、练习题及参考文档供学生课堂学习与课后拓展。
5、教学过程
一导入Bridge-in
展示当今互联网丰富多彩的应用场景图片或视频如网上购物、在线视频、社交媒体互动等。提问引导“大家每天都在使用互联网有没有想过这些便捷的服务背后是由哪些技术支撑的呢从打开浏览器输入网址到看到精美的网页这中间隐藏着怎样的奥秘今天就让我们一起走进 Web 系统的奇妙世界揭开它神秘的面纱。”
二学习目标展示Objectives
在课件上清晰列出本节课的知识、能力与情感目标
知识目标了解 Internet、Web 浏览器、服务器、前端技术等核心知识要点。能力目标具备分析网络技术原理、排查简单故障、构建简单网页的能力。情感目标激发学习兴趣增强技术自主可控的责任感。 向学生简要解读目标让学生明确学习方向与重点。
三知识讲解Pre - lecture
1. Internet 介绍 Internet 含义 以时间轴为主线讲述 Internet 于 1969 年诞生于美国由 ARPA 网演变而来强调其作为全球最大电子计算机互联网的地位。列举日常生活中的网络服务实例如用浏览器查找学习资料体现 WWW 信息服务、用微信即时通讯、用电子邮箱收发邮件、通过 FTP 下载软件文件传输服务、远程登录学校图书馆数据库查询学术资源、逛 BBS 论坛交流兴趣爱好、玩在线电子游戏等让学生切实感受 Internet 提供服务的丰富多样。结合校园网或家庭网络接入场景讲解接入技术发展从早期电话拨号上网的低带宽、单一接入方式到如今多样的有线ADSL、有线电视网接入、光纤接入和无线接入方式对比不同接入方式的带宽差异如过去几十 Kbps 到现在常见的几百 Mbps 甚至 1Gbps 以上让学生理解接入技术进步对网络体验的提升。TCP/IP 协议 运用 3D 动画或分层架构图展示 TCP/IP 协议的四个层次网络接口层、网络互连层、传输层和应用层形象呈现各层在网络数据传输中的位置与作用。重点讲解传输层的 TCP 协议负责可靠的数据传输通过三次握手建立连接、数据分段、序号标识、流量控制与拥塞控制确保数据完整有序到达网络互连层的 IP 协议负责为计算机网络相互连接通信进行寻址让学生理解两者是 Internet 最基本、最重要协议的原因。列举应用层常见协议如 HTTP 实现 WWW 服务以访问百度网站为例详细说明浏览器与百度服务器之间使用 HTTP 协议交互的过程FTP 用于文件共享、上传下载现场演示在命令行或图形化 FTP 客户端软件中进行简单文件传输操作SMTP 控制信件发送和中转结合电子邮箱发送邮件流程讲解其在邮件传输中的关键环节让学生明白各协议在实际网络应用中的功能。通过对比 IPv4 和 IPv6 的地址表示形式、位数差异讲解 IPv4 地址枯竭问题推动 IPv6 发展如给出几个常见的 IPv4 和 IPv6 地址示例让学生直观区分。域名和域名解析 以生活中的门牌号类比域名解释域名作为字符型标识便于记忆如将常熟理工学院网站域名 www.cslg.edu.cn 按级别拆分讲解.cn 代表中国国家地区代码顶级域名、edu 代表教育机构二级域名、cslg 代表常熟理工学院三级域名说明域名分级结构及各级域名含义。结合 DNS 服务器工作原理示意图分步骤讲解域名解析过程计算机向本地 DNS 服务器LDNS发出域名查询请求LDNS 依次向根 DNS、顶级域 DNS、权威 DNS 查询根据权威 DNS 返回的 A 记录域名与 IP 对应、NS 记录域名与负责解析的权威 DNS 对应、Cname 记录域名别名获取最终域名对应的 IP 地址以访问 www.baidu.com 为例详细展示完整查询流程让学生理解域名解析如何实现域名到 IP 地址的转换。讲述历史上伊拉克、利比亚域名被终止解析事件引出中国域名服务器安全问题展示全球根域名服务器分布地图说明美国占多数的现状及潜在风险介绍我国根镜像服务器建设情况如北京、上海等地的根镜像数量讲解通过根镜像、任播技术保障国内网络访问以及应对美国可能篡改根区文件的措施增强学生网络安全意识。URL 以生活中的地址格式类比 URL讲解 URL 作为因特网上标准资源地址的语法结构协议类型:// 服务器地址 (必要时需加上端口号)/ 路径 / 文件名给出常见 URL 实例如 http://cn.bing.com:80/readnews.aspx?newsid123详细解释各部分含义强调协议类型决定资源获取方式端口号在特定场景下的作用以及路径和文件名如何定位资源。说明浏览器在访问网页时对 URL 的处理规则如多数浏览器默认 HTTP 协议可省略 “http://” 部分超文本传输协议常用端口 80 也常省略让学生了解日常上网输入网址时的便捷性背后的原理。MIME 从电子邮件附件引入讲述 MIME 最早应用于电子邮件系统后扩展到浏览器和 HTTP 协议用于规定表示各种数据类型的符号化方法。展示常见的 MIME 类型及其对应的文件扩展名表格选取几个典型类型如 application/pdf 对应.pdf 文件用于显示电子文档、text/html 对应.html 文件是网页基本格式、image/jpeg 对应.jpeg 文件表示图片解释浏览器如何根据 MIME 类型自动调用相应应用程序打开文件让学生明白网页中不同类型资源的识别与处理机制。HTTP 协议 阐述 HTTP 协议作为 Internet 上应用最广泛网络协议的设计初衷即为发布和接收 HTML 页面提供方法通过 HTTP 或 HTTPS 协议请求的资源由统一资源标识符URI标识。对比讲解 HTTP 与 HTTPS 协议HTTPS 是 HTTP 和 SSL/TLS 的组合需要申请证书提及证书费用差异信息加密传输保障安全使用 443 端口连接具备加密传输、身份认证功能HTTP 是明文传输使用 80 端口连接简单无状态以网上银行交易用 HTTPS、普通网页浏览用 HTTP 为例让学生理解两者适用场景区别。
2. Web 浏览器 浏览器的主要组件 打开浏览器软件对照界面依次讲解各组件用户界面包含地址栏用于输入网址、后退 / 前进按钮方便浏览历史页面、书签目录保存常用网站让学生识别这些常用操作区域浏览器引擎作为查询及操作渲染引擎的接口简要说明其协调作用渲染引擎负责将请求内容如 HTML、CSS 解析并显示强调其决定网页呈现效果的核心地位网络组件完成 HTTP 请求等网络调用解释其平台无关性便于在不同操作系统工作后端用于绘制基本组件说明其依赖操作系统用户接口实现通用性JavaScript 解释器负责解释执行 JavaScript 代码为网页添加动态功能数据存储用于保存 Cookie 等数据提及 HTML5 定义的 Web 数据库技术作为轻量级客户端存储方案让学生了解浏览器背后复杂的功能支撑体系。浏览器的内核 展示常见浏览器及其内核表格介绍不同内核特点Firefox 的 Gecko 内核开源安全性较高Google Chrome 从 WebKit 过渡到 WebKit Blink 内核2013 年后在性能与标准支持上不断优化Safari 的 WebKit 内核是苹果系统自带与苹果生态紧密结合IE 的 Trident 内核曾是全球使用率最高但后期因更新滞后、与标准脱节出现安全问题Edge 从 2015 年开始有自己的内核逐渐发展Opera 从 Presto 内核切换到 WebKit Blink 内核适应行业趋势UC 的 U3 内核针对移动端优化QQ 浏览器和微信浏览器早期用 X5 内核2016 年后引入 Blink 内核提升性能让学生了解内核多样性及各自优势。以同一网页在不同内核浏览器打开呈现效果差异为例如 CSS 样式兼容性、JavaScript 特效执行情况解释渲染引擎对网页编写语法解释不同导致的结果强调内核在网页显示中的关键作用。浏览器的工作原理 结合浏览器访问网页动态演示讲解工作原理在地址栏输入网址后浏览器依据网址向服务器发送资源请求服务器解析请求将 Page 描述文档、图片、JavaScript 脚本、CSS 等数据资源传送回浏览器浏览器引擎对数据依次进行解码、解析、排版、绘制等操作重点讲解渲染流程核心步骤。借助流程图详细解析渲染流程Loader 模块负责处理 HTTP 请求与网络资源缓存说明主页面与外链资源下载的并发与阻塞情况如 JavaScript 脚本可能影响页面解析顺序Parser 模块解析 HTML 构建 DOM 树以简单 HTML 代码片段为例展示词法解析与语法解析过程生成 DOM 树节点同时解析 CSS 构建 CSS 规则匹配 Render 树节点排版布局解析 JavaScript 实现动态功能操作 DOM 树解释 JavaScript 引擎如 Android 4.2 版本 WebKit 采用的 V8 引擎执行 JavaScript 代码提升性能原理Layout 模块创建渲染树并计算布局对比 DOM 树与渲染树说明非可视 DOM 节点不对应渲染树节点及 CSS Style 传递关系Paint 模块将渲染树映射成可视图形遍历渲染树调用绘制方法在画布或位图上显示内容成为用户看到的页面提及缓存模块的 Page Cache、Memory Cache、Disk Cache 三种类型及其作用如 Memory Cache 减少相同资源重复下载、Page Cache 提升页面前进后退浏览体验、Disk Cache 节省网络下载时间让学生深入理解浏览器从请求到页面呈现全过程。
3. Web 服务器和应用服务器 Web 服务器 给出 Web 服务器的定义将其类比为现实中的图书馆管理员负责处理读者Web 客户端借阅请求、提供书籍网页等信息强调其驻留于因特网计算机程序能处理浏览器请求并返回响应放置网站文件供全球浏览、数据文件供下载以学校官网服务器为例说明其功能实现。指出 Web 服务器程序的共性从网络接受 HTTP 请求提供包含 HTML 文件或其他类型文件的 HTTP 回复让学生明白 Web 服务器与客户端交互的基本模式。列举最常用的 Web 服务器程序 Internet 信息服务器IIS、Nginx 和 Apache简要介绍各自所属阵营微软、俄罗斯、开源社区为后续详细讲解铺垫。Apache 服务器 介绍 Apache HTTP Server 是 Apache 软件基金会的开源 Web 服务器强调其跨平台性可在 Windows、Unix、Linux 等系统运行与安全性是世界著名网站如 Amazon 选用的服务器通过展示其开源社区活跃的代码更新日志、开发者交流论坛截图说明其源代码开放吸引众多开发者持续优化新功能、修复缺陷具备简单、速度快、性能稳定特点可兼作代理服务器以配置 Apache 虚拟主机为例讲解适当优化配置可提升性能同时提醒硬件和操作系统基础条件对其运行的重要性。IIS 服务器 说明 IIS 是微软公司基于 Microsoft Windows 的互联网基本服务打开 IIS 管理工具界面展示其图形化操作优势如便捷地监视配置和控制 Internet 服务详细讲解 Web 服务组件包括 Web 服务器、FTP 服务器、NNTP 服务器和 SMTP 服务器对应功能网页浏览、文件传输、新闻服务、邮件发送通过创建一个简单的 IIS 网站实例演示网站、应用程序、虚拟目录之间的层次关系解释绑定协议HTTP、HTTPS与绑定信息IP 地址、端口编号、主机头确定服务器与客户交互方式让学生理解 IIS 在 Windows 环境下构建 Web 服务的便利性与灵活性。Nginx 服务器 介绍 Nginx 是俄罗斯人编写的轻量级 HTTP 和反向代理服务器发音 “engine X”突出其占有内存少、并发能力强、易于开发部署特点以电商网站在促销活动时高并发场景为例对比 Nginx 与 Apache 处理静态文件速度优势讲解其负载均衡、反向代理功能实现原理如将用户请求合理分配到后端多个服务器实例同时提及缺点是只适合静态和反向代理不擅长处理动态请求引出与 Tomcat 搭配使用方案说明两者协同利用各自优势应对复杂 Web 应用需求。Tomcat 应用服务器 讲述 Tomcat 由 Sun 软件架构师开发后成为 Apache 软件基金会 Jakarta 项目核心是免费开放源代码的 Web 应用服务器属于轻量级应用服务器强调其作为 ServletJSP 也基于 Servlet容器本质可独立于 Apache 运行支持最新的 Servlet 和 JSP 规范以开发一个简单的 Java Web 应用部署到 Tomcat 为例展示其处理动态请求、编译 JSP/Servlet 能力让学生了解 Tomcat 在 Java 企业级开发中的关键地位同时明确其局限于 Java 应用场景。WebSphere 应用程序服务器 介绍 WebSphere Application Server 是 IBM 电子商务计划核心基于 Java 应用环境用于建立、部署和管理 Internet 和 Intranet Web 应用程序展示其功能完善、开放特点针对以 Web 为中心成长起来的开发人员IBM 提供系列
