模块1任务1.1：初识网页与网站（课件）-《网页设计与制作》（电子工业出版社）上好课

《网页设计与制作》 任务1.1：初识网页与网站 网页设计与制作 电子工业出版社 教学目标 【知识目标】记忆 · 理解 ① 说清网页、网站、浏览器、URL的概念 ② 理解HTTP/HTTPS、IP、域名、超链接的作用 【能力目标】应用 ① 了解VS Code开发环境 ② 能创建并预览第一个HTML网页 【素养目标】内化 ① 规范写代码，养成严谨工匠精神 ② 树立传播正向网络信息的责任意识 学习重点与难点 学习重点 1. 网页、网站、浏览器的概念与关系 2. URL的组成结构 3. HTTP/HTTPS的作用与区别 4. IP地址、域名与DNS的关系 5. HTML/CSS/JS三大技术的分工 学习难点 1. "网页如何被传输和解析"的完整过程 2. 静态网页 vs 动态网页的运行机制 3. HTML与CSS的角色分工 新课导入 · 你每天都在用，但你了解它吗？ 中国天气网 https://www.weather.com.cn · 一点就跳转 AI职教 https://zhijiao.xkw.com/ · 一点就跳转 故宫博物院官网 https://www.dpm.org.cn/Home.html# · 一点就跳转 新课导入 · 你每天都在用，但你了解它吗？ 中国天气网 https://www.weather.com.cn · 一点就跳转 国家中小学智慧教育平台 https://basic.smartedu.cn · 一点就跳转 故宫博物院官网 https://www.dpm.org.cn/Home.html# · 一点就跳转 ❓ 三个问题：这些页面从哪来？ 为什么输入网址就能看到？ 网页到底是什么？ 💬 课堂互动1：你最喜欢逛哪个网站？它哪里吸引你？ 【配图建议】三个卡片处建议现场直接切换浏览器展示真实网站（比截图更有冲击力），或贴三张网站首页截图。 【教师讲课备注】导入控制在5分钟内。学生分享时顺势引导："你注意到页面上的文字图片了吗？这些元素就是网页的'零件'"。把三个问题写在黑板一角，全课结束前回收。 新课导入 · 一个类比看懂网页的一生 当我们打开自己的计算机，打开浏览器在网址栏输入相应网址后，敲击回车键。随后我们就可以看到我们想要浏览的网页了。我们的浏览器相当于是网页的请求者。。。随后。。。 新课导入 · 一个类比看懂网页的一生 📦 包裹 网页 装着文字图片的"包裹" 🏪 发件仓库 服务器 存放包裹的"大仓库" 🚚 快递公司 网络+HTTP 负责运送包裹 🏠 收件人 浏览器 收到后"拆开"给你看 访问网页 = 寄快递：仓库打包 → 快递运输 → 收件拆开 💬 课堂互动2：如果把网页比作包裹，快递单号相当于什么？ 请求者 发送者 服务器 存放网页的仓库 知识点1 · 什么是网页（Webpage） 记忆 核心定义 网页：是构成网站的基本元素，是一个包含HTML标签的纯文本文件，可以包含文字、图像、音频、视频等内容元素，是承载各种网站应用的平台。 浏览器把它"翻译"成你看到的漂亮页面 网页的常见"零件" 文字 · 图片 · 视频 · 导航栏 · 超链接 · 按钮 冷知识 右键→"查看网页源代码"，你看到的就是网页的真身：一堆代码文本 <p>你好，网页！</p> <img src="cat.jpg"> <a href="page2.html">下一页</a> 💡 上手试一试：打开任意网站 右键 → 查看网页源代码 各种各样的标签 知识点2 · 什么是网站（Website） 理解+记忆 核心定义 网站(Website)是指在互联网上，根据一定的规则，使用 HTML,等工具制作的用于展示特定内容的相关网页的集合。也可以说，网站是在互联网上，拥有域名或地址并提供一定网络服务的主机,是在储文件的空间,以服务器为载体。用户可以通过网页浏览器等访问和查找网站文件，也可以通过远程文件传输方式上传和下载网站文件。 网站有一个统一入口：首页 打个比方 网页 = 一页书 网站 = 一本完整的书 首页 = 这本书的封面和目录 ⭐ 辨一辨：输入 www.weather.com.cn 打开的是"网页"还是"网站"？ 💬 课堂互动3：一本书和一页纸，哪个是网页、哪个是网站？点你左边的同学回答 打开的是网站的首页，首页也是一张网页！ 知识点3 · 什么是浏览器（Browser） 理解+记忆 核心定义 浏览器 ：浏览器(Browser)是用于检索、显示及传递 Web 信息资源的应用程序。 相当于之前快递类比中的"请求者"和"收件人" 常见浏览器 Edge · Chrome · Firefox · Safari 浏览器 vs 搜索引擎💡易混！ 浏览器：装在电脑上的"软件"，如Edge 搜索引擎：浏览器里打开的一个"网站"，如百度 浏览器的两大本领 ① 请求：帮你要网页 "服务器你好，我想要xx页面" ② 解析渲染：拆开包裹 把HTML代码翻译成图文页面 💡 同一份代码，不同浏览器解析 效果可能略有差异——所以要遵循 Web标准 知识点4 · URL：网页的"门牌号" 理解 https://www.baidu.com/index.html https:// 协议 用什么方式送包裹 www.baidu.com 域名 收件仓库地址 www.baidu.com /index.html 路径 仓库里哪个货架 URL统一资源定位符 ：它描述了一个网页在网络服务器上的特定位置，即网址。URL通常由4部分组成:协议、服务器名称(或IP地址)、路径和文件名。 💬 课堂互动4：现在回顾导入问题——快递单号相当于什么？ 上黑板拆一拆：https://www.weather.com.cn/ 的三个部分分别是什么？ index.html 文件名 货架上的文件 【配图建议】URL三段用三种颜色下划线标注在顶部深蓝条内，与下方三个卡片颜色一一对应。 【教师讲课备注】互动4让学生上台用手指出三段，全班判断对错。URL概念必须人人过关，这是后面域名、HTTP讲解的地基。 知识点4 · URL：网页的"门牌号" 理解 https://www.baidu.com/index.html https:// 协议 用什么方式送包裹 www.baidu.com 域名 收件仓库地址 www.baidu.com /index.html 路径 仓库里哪个货架 试一试：https://www.baidu.com 和 https://www.baidu.com/index.html 有什么区别？ index.html 文件名 货架上的文件 https://www.baidu.com 返回根目录文件 https://www.baidu.com/index.html 返回根目录下的index.html文件 【配图建议】URL三段用三种颜色下划线标注在顶部深蓝条内，与下方三个卡片颜色一一对应。 【教师讲课备注】互动4让学生上台用手指出三段，全班判断对错。URL概念必须人人过关，这是后面域名、HTTP讲解的地基。 知识点5 · HTTP与HTTPS：快递的"运输规则" 理解 HTTP定义 超文本传输协议是一个简单的请求—响应协议，是通过互联网传输文档的数据传送协议。它规定了浏览器和互联网服务器之间的通信规则。 规定浏览器和服务器之间 "怎么打招呼、怎么传数据" 类比：普通快递，明信片式运输中不同货物运输规则 HTTPS = HTTP + 加密（定义） 是以安全为目标的HTTP通道，在HTTP的基础上通过传输加密和身份认证保证了传输过程的安全性。 在HTTP上加了SSL/TLS加密 类比：贵重物品用"保险箱快递" 数据被截获也看不懂 安全提醒：网址前有 🔒 图标 = HTTPS加密中 网购、网银、登录页面一定认准它！ 💬 课堂互动5：在网购页面和普通资讯页之间，哪个必须是HTTPS？为什么？ 【配图建议】放两张对比图：HTTP=明信片（内容可见），HTTPS=上锁的箱子；再截一张浏览器地址栏🔒图标特写。 【教师讲课备注】思政融入点①：HTTPS体现了"安全意识"——技术人先守住安全底线。可提一句：为什么网址有http也有https，淘宝早就是全站https了。 知识点6 · IP地址与域名：电脑的"身份证" 理解+记忆 IP地址 是互联网协议提供的一种统一的地址格式，它会为互联网上的每个网络和每台主机都分配一个逻辑地址，以屏蔽物理地址差异。 例如：192.168.1.25 （数字，难记但机器喜欢） 域名（Domain Name） 是由一串用点分隔的名字组成的互联网上某台计算机或计算机组的名称，用于表示在数据传输时对计算机的定位标识 给人看的"好记版"地址 例如：www.baidu.com （字母，人喜欢） DNS：域名系统 = "翻译官" 你输入：www.baidu.com ↓ DNS翻译 机器找到：110.242.68.66 类比：通讯录 存"妈妈的手机号" ←→ 138xxxx1234 你记名字，手机帮你换成号码拨打 💬 课堂互动6：把你同桌的QQ号比作IP地址，那么他的"备注名"相当于什么？ 【配图建议】画一个"翻译流程图"：域名框→(DNS翻译官图标)→IP框→(服务器图标)。 【教师讲课备注】IP举例用学生机能接触到的192.168.x.x内网地址更亲切。互动6答案：域名。QQ备注类比一说，零基础学生秒懂。 知识点7 · 输入网址后发生了什么？ 分析 ① 输入网址 浏览器地址栏 输入URL ② DNS解析 域名"翻译"成 IP地址 ③ HTTP请求 浏览器向服务器 发出"我要网页" ④ 服务器响应 把HTML文件 传回浏览器 ⑤ 解析渲染 浏览器翻译代码 显示页面 对应快递类比：查地址 → 找仓库 → 下单 → 发货 → 拆包裹 💬 课堂互动7：五步打乱顺序，请一名同学上台重新排队 【配图建议】这一页本身就是流程图。可加一张"访问百度全过程"动画截图（F12开发者工具Network面板）。 【教师讲课备注】本页是全课最核心的难点页，讲透。互动7用磁贴卡让学生排序，排序错误就是最好的教学资源——追问"如果先渲染后请求会怎样？"。此页停留至少5分钟。 知识点7 · 超链接：网页之间的"传送门" 记忆+理解 核心定义 超链接（Hyperlink）：全称为超文本链接，它通过非线性方式组织信息，以锚点链接同一文档或不同服务器资源，实现目标内容的自由跳转。 分类 文字可以做链接 · 图片可以做链接 按路径分：内部链接、锚点链接和外部链接 作用 把一个个孤立的网页串成网站 没有超链接 = 没有互联网的"互联" <a href="https://www.baidu.com"> 点我跳转百度 </a> 看懂了吗？ <a> 标签 = 超链接 href = 要跳去哪（目的地） 中间的文字 = 点哪里触发 【配图建议】放一张网页截图，用红圈标出"导航栏、文字链接、图片链接"三类典型超链接。 【教师讲课备注】让学生打开学校官网找超链接，数一数首页有多少个（一般几十上百个）。预告：<a>标签下节课细讲，现在混个脸熟即可。 知识点7 · 超链接：网页之间的"传送门" 记忆+理解 分类 文字可以做链接 · 图片可以做链接 按路径分：内部链接、锚点链接和外部链接 举例 【配图建议】放一张网页截图，用红圈标出"导航栏、文字链接、图片链接"三类典型超链接。 【教师讲课备注】让学生打开学校官网找超链接，数一数首页有多少个（一般几十上百个）。预告：<a>标签下节课细讲，现在混个脸熟即可。 知识点7 · 超链接：网页之间的"传送门" 记忆+理解 分类 文字可以做链接 · 图片可以做链接 按路径分：内部链接、锚点链接和外部链接 举例 总结 内部链接：链接本地网页 锚点链接：链接网页内部某节点 外部链接：链接外部网页 【配图建议】放一张网页截图，用红圈标出"导航栏、文字链接、图片链接"三类典型超链接。 【教师讲课备注】让学生打开学校官网找超链接，数一数首页有多少个（一般几十上百个）。预告：<a>标签下节课细讲，现在混个脸熟即可。 知识点8 · 网页之间的结构 记忆 网页内容元素 文本、图像、视频、动画、超链接 网页常见布局结构 页头：包含网站Logo、网站名称或横幅广告 导航栏：一组超链接的集合，相当于网站中的“路标” 主内容区域：网页的核心区域，用于展示文章、产品、视频 侧边栏：位于主内容区域两侧，用于显示辅助信息，广告或次级导航 页脚：位于页面底部，通常包含版权声明、联系方式、备案信息 【配图建议】放一张网页截图，用红圈标出"导航栏、文字链接、图片链接"三类典型超链接。 【教师讲课备注】让学生打开学校官网找超链接，数一数首页有多少个（一般几十上百个）。预告：<a>标签下节课细讲，现在混个脸熟即可。 知识点9 · 静态网页 vs 动态网页 分析 静态网页 没有后台数据库和服务器端程序的网页 内容固定不变 所有访客看到同一副面孔 例：公司简介页、课程介绍页 优点：速度快、成本低 技术：HTML + CSS 动态网页 以数据库技术为基础，可以与后台数据库进行数据交互与数据传递，能够大大减少维护网站的工作量。 内容随人/随时间变化 不同人看到不同内容 例：淘宝"猜你喜欢"、天气预报 技术：HTML + CSS + 后端程序 （数据来自服务器"现做现卖"） 💬 课堂互动8：判断下面哪个是动态网页？ A. 学校官网首页的"学校简介"　　B. 网易云音乐的"每日推荐" 【配图建议】左边放一张固定的"公司简介"截图，右边放淘宝个性化推荐页截图，视觉对比强烈。 【教师讲课备注】互动8答案：B（因为"每日推荐"人人不同）。注意纠正常见误解：会动的图片≠动态网页，"动"指的是内容变化而不是动画效果。 知识点10 · 网页开发三大件 理解 HTML 房子的骨架 搭建结构：标题/段落/图片 （毛坯房：能住，但简陋） CSS 装修队 美化外观：颜色/字体/排版 （精装修：好看舒适） JavaScript 智能家电 实现交互：点击响应/动画 （智能家居：会"动"起来） Web标准：结构(HTML)、表现(CSS)、行为(JS)三分离 —— 各干各的活，代码才好维护 【配图建议】放一张"盖房子"三步图：毛坯房→装修后→智能家居。与三卡片一一对应。 【教师讲课备注】"房子"类比是行业经典，务必讲。思政融入点②：Web标准三分离体现"各司其职、规范协作"的工匠精神——写代码如同盖房子，一步不规范，步步返工。 知识点11 · 简单了解网页开发工具有哪些 记忆 记事本 系统自带，最简陋 适合体验"裸写"代码 EditPlus / Sublime Text 轻量编辑器 安装包小、启动快 Dreamweaver HBuilderX 可视化+代码 "所见即所得" VS Code ★ 微软出品·免费 插件丰富·我们课堂用它！ 为什么选VS Code？ 免费 · 跨平台 · 智能提示 · 插件生态强大 —— 行业主流之选 💬 课堂互动9：你手机上或电脑上用过哪些"编辑文字"的软件？它们能写网页吗？ 【配图建议】放四款软件的logo和界面截图小拼图，VS Code放大居中。 【教师讲课备注】强调：工具只是"笔"，核心是HTML语言本身。写字用铅笔也能写，但用好的钢笔更舒服。下节课起全程用VS Code。 实操 · 创建你的第一个网页（上） 理实一体 Step 1：桌面新建文件夹"我的网页" Step 2：新建记事本 Step 3：新建文件，命名为 index.html Step 4：注意！扩展名必须是 .html ⚠️ 文件显示扩展名：查看 → 文件扩展名 打勾 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>我的第一个网页</title> </head> <body> <h1>Hello World!</h1> <p>我是XXX，这是我的 第一个网页</p> </body> </html> 👆 跟着老师敲一遍 💾 Ctrl+S 保存，文件名：index.html 【配图建议】右侧代码逐行配注解箭头（本页已用排版体现）；可补充一张VS Code新建文件的操作录屏GIF。 【教师讲课备注】实操环节放慢节奏，教师投影一步、学生跟一步。重点盯两件事：①扩展名是.html不是.txt；②charset=UTF-8防止中文乱码。写代码从第一天就规范缩进——工匠精神从第一个文件开始。 实操 · 创建你的第一个网页（下） 理实一体 Step 5 · 预览网页 方法：右键 index.html → 打开方式 → Edge浏览器 🎉 成功标志 浏览器标签页显示"我的第一个网页" 页面出现大标题 Hello World! 和你的自我介绍段落 代码逐行拆解 <!DOCTYPE html> 文档类型声明 <html> 网页的总容器 <head> "幕后信息"（观众看不见） <title> 标签页标题 <meta charset> 编码规则：支持中文 <body> "舞台"（观众看见的全部） <h1> 一级大标题 <p> 段落 💡 HTML标签 = 尖括号 + 英文单词 + 成对出现 <p>开始 ... </p>结束 【配图建议】右侧放一张"浏览器成功显示"的效果截图，让学生对照自查。 【教师讲课备注】让学生举手中的"成功/求助"双色卡，快速摸清全班完成度。先完成的同学当"小助教"帮扶邻居——互帮互助也是职业素养。 实操 · 创建你的第一个网页（上） 理实一体 【配图建议】右侧代码逐行配注解箭头（本页已用排版体现）；可补充一张VS Code新建文件的操作录屏GIF。 【教师讲课备注】实操环节放慢节奏，教师投影一步、学生跟一步。重点盯两件事：①扩展名是.html不是.txt；②charset=UTF-8防止中文乱码。写代码从第一天就规范缩进——工匠精神从第一个文件开始。 实操 · 创建你的第一个网页（上） 理实一体 思考：自己写的代码和渲染的网页有哪些相同的地方，不同的标签内的内容都出现在了什么位置? 【配图建议】右侧代码逐行配注解箭头（本页已用排版体现）；可补充一张VS Code新建文件的操作录屏GIF。 【教师讲课备注】实操环节放慢节奏，教师投影一步、学生跟一步。重点盯两件事：①扩展名是.html不是.txt；②charset=UTF-8防止中文乱码。写代码从第一天就规范缩进——工匠精神从第一个文件开始。 课堂小练习 · 学以致用 应用 第1题（单选） 下列关于网站和网页的说法 正确的是（　） A. 网站就是一张网页 B. 网站由网页通过超链接组成 C. 网页只能在手机上显示 D. 每个网站可以有多个首页 第2题（单选） URL中表示协议部分的是（　） A. www.baidu.com B. /index.html C. https:// D. 110.242.68.66 第3题（实操）：把网页标题改成你的名字， 在<h1>里加一句你的座右铭，保存刷新看效果 ⏱ 限时8分钟，前5名全对的小组 +2平时分 完成后同桌互查：标签成对了吗？扩展名对吗？ B C 【配图建议】无额外配图，保持卷面干净利于答题。 【教师讲课备注】答案：1-B（网站由网页组成，唯一入口是首页）；2-C。第3题为分层任务：基础弱的学生只改title即可得分，学有余力者完成座右铭。巡视时重点检查标签是否成对——这是下页易错点的伏笔。 常见易错点排查 · 你中招了吗 分析 易错点① 标签没成对 ✗ <p>你好 ✓ <p>你好</p> 开始标签必须有结束标签 易错点② 扩展名错误 ✗ index.txt / index.docx ✓ index.html 必须保存为 .html 易错点③ 中文乱码 ✗ 忘记写charset ✓ <meta charset="UTF-8"> 声明编码，中文才正常 易错点④ 保存后没刷新 ✗ 改了代码看不到变化 ✓ 浏览器按F5刷新 改代码→保存→刷新三部曲 🔍 排错口诀：一看扩展名，二看成对否，三查编码，四刷新 【配图建议】易错点①②可配"错误效果截图"：如网页显示乱码的实拍图，冲击力强。 【教师讲课备注】此页对应实操中刚刚巡堂发现的真实错误——现场拿学生的屏幕（征得同意）演示排错最有效。思政融入点③：程序员一半时间在找Bug，严谨耐心、直面错误就是工匠精神。 背诵记忆 · 核心概念一网打尽 记忆 网页 含HTML标签的纯文本文件 📦 包裹 网站 网页通过超链接组成，入口是首页 📚 一本书 浏览器 解析并显示网页的软件 🏠 收件人 URL 统一资源定位符=资源唯一地址 🏷️ 快递单号 HTTP/HTTPS 传输协议 / 加密版传输协议 🚚 运输规则 IP地址 联网设备的数字编号 🆔 身份证 域名 好记的地址，DNS翻译成IP 📇 备注名 超链接 网页间跳转的连接 🌀 传送门 ⏱ 3分钟限时背诵，随后随机抽查5人 · 记不牢的课后巩固 【配图建议】表格已含"类比"列帮助记忆，无需额外配图；可打印此表发学生当速记卡。 【教师讲课备注】限时3分钟自背→同桌互查→教师抽查。抽查用"击鼓传花"式随机点名增加趣味。未过关学生登记，课后找课代表复背。 课堂问答 · 快问快答 理解 Q1：我们常说的"上网看网页"，用什么软件看？ 答：浏览器（Edge/Chrome等） Q2：https比http多了什么？ 答：SSL/TLS加密，更安全 Q3：DNS的作用是什么？ 答：把域名翻译成IP地址 Q4：在快递类比里，服务器相当于什么？ 答：发件仓库 【配图建议】无配图；建议放映时用矩形遮挡右侧答案，点击后显现（本页答案栏可用动画做"点击出现"）。 【教师讲课备注】快问快答节奏要快，每题不超过30秒。可分男女队PK或小组PK积分。答错不批评，请同组补充——团队作战降低零基础学生的回答压力。 课堂小结 总结 知识收获 ✓ 9个核心概念：网页/网站/浏览器 URL/HTTP/HTTPS/IP/域名/超链接 ✓ 访问五步：输入→DNS解析→请求 →响应→渲染 ✓ 静态vs动态、开发三大件 （HTML骨架/CSS装修/JS交互） 技能收获 ✓ 了解VS Code ✓ 会创建index.html ✓ 能写出第一个网页并预览 🎉 从"看网页的人"变成 "做网页的人"！ 今天回收导入三问：页面从哪来？网址的结构有哪几部分？网页是什么？——你都答上来了吗？ 【配图建议】无配图；建议此页配合"知识地图"板书回顾。 【教师讲课备注】小结用提问式回收（学生齐答），不用教师念。重点渲染"身份转变"的成就感——第一行代码已写，万里长征第一步已迈出。 课后任务 作业 必做① 预习任务1.2：HTML与CSS基本语法 （课本P6-P9，圈出看不懂的地方） 必做② 制作"个人信息卡"网页： 姓名+班级+一句座右铭，保存并浏览器预览 选做③ 思考题：用自己的话写出"输入网址到 显示页面"的五个步骤，下节课分享 提交方式：下节课前，将index.html拷贝到教师机共享文件夹 或通过学习通APP拍照上传 【配图建议】可放学习通二维码方便扫码提交。 【教师讲课备注】作业分层设计：①②人人必做（15分钟内可完成），③面向学有余力者。提醒：代码文件很小，U盘、QQ文件传输均可提交。下节课开课前展示2-3份优秀作业。 每一行规范的代码，都是通往未来的基石 —— 下节课：HTML与CSS初体验—— 谢谢！ 【配图建议】可加一句英文彩蛋：Keep Coding, Keep Growing. 【教师讲课备注】结课金句呼应思政主线。留2分钟答疑时间，鼓励学生课后随时在学习通提问。 EV录屏5.5.7软件录制 Lavf58.33.100 本视频由湖南一唯信息科技开发的EV录屏软件录制, www.ieway.cn EV录屏5.5.7软件录制 Lavf58.33.100 本视频由湖南一唯信息科技开发的EV录屏软件录制, www.ieway.cn EV录屏5.5.7软件录制 Lavf58.33.100 本视频由湖南一唯信息科技开发的EV录屏软件录制, www.ieway.cn $