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

《任务1.1、1.2：网页设计相关基本概念和网页传输的基本原理》教案 课 题 网页设计相关基本概念和网页传输的基本原理 课 型 新授课 课 时 2课时 授课班级 授课时间 授课教师 教材分析 本节课选自《网页设计与制作》第1章任务1.1"初识网页与网站"，是网页设计学习的入门章节，承接学生已掌握的计算机基础与网络常识，开启网页制作的专业学习。教材以"浏览典型网站"为切入点，系统讲解网页、网站、浏览器、URL、HTTP/HTTPS、IP地址、域名、超链接等核心概念，帮助学生理解"网页如何通过网络传输并被浏览器解析"的完整过程。内容从直观感知到原理剖析，由浅入深、层层递进，是培养学生网络认知、建立网页制作基础概念的关键章节，也为后续学习 HTML 语言、网页开发工具与页面制作等内容提供重要认知支撑。 学情分析 授课对象为中职计算机应用专业学生，已掌握计算机基础操作、互联网基本使用常识与简单的文字排版能力，平时会浏览各类网站、点击链接，但对"网页到底是什么""网站如何工作""为什么输入网址就能看到页面"等底层原理缺乏认知，对URL、HTTP、域名等术语较为陌生。学生对"自己动手做一个网页"兴趣浓厚，但对网页构成的元素、浏览器解析网页的机制等抽象概念理解困难。本节课通过真实网站分析与生活化类比，帮助学生建立从"用户视角"到"技术视角"的认知转变，激发学习兴趣，为后续学习HTML与网页制作打下基础。 学习目标 【知识目标】 1.理解网页、网站、浏览器、HTTP/HTTPS、URL等基本概念； 2.掌握HTML与CSS在网页构建中的作用及Web标准的基本要求； 3.熟悉VS Code开发环境的基本操作与配置。 4.理解静态网页与动态网页的区别，了解常用网页开发工具的种类与特点。 【能力目标】 ①能独立完成编码环境的搭建与基础配置；能创建并预览符合规范的初始HTML文档。 ②能使用VS Code编写简单的HTML代码并正确预览网页效果。 【素养目标】 树立使用技术传播正向价值的意识，培养对网络信息责任的初步认知；在编写代码时，遵循标准化，注意可读性与可维护性 学习重难点 【学习重点】 网页、网站、浏览器的基本概念及其相互关系； URL的结构与组成、HTTP与HTTPS的工作原理； IP地址与域名的关系、超链接的作用； HTML与CSS在网页构建中的作用及Web标准的基本要求。 【学习难点】 理解"网页如何通过网络传输并被浏览器解析"的完整工作过程； 区分静态网页与动态网页的运行机制，正确理解HTML与CSS在网页中的角色分工。 教学方法 讲授法、情境创设法、任务驱动法、示范操作演示法 课前准备 阅读教材、上网查询相关知识，阅读教材任务1.1内容。 教学媒体 多媒体教学，机房 教学过程 教学环节 教师活动设计 学生活动设计 设计意图 活动一： 创设情境 生成问题 1. 展示"中国天气网""国家中小学智慧教育平台""故宫博物院网站"等典型网站，引导学生观察这些网站的共同点与不同点。 2. 提出问题："这些精美的页面是如何呈现在我们面前的？""为什么在浏览器中输入网址就能看到网页？""网页到底是什么？"引出本节课学习主题。 3. 通过"寄快递"的生活情境类比：把网页比作"包裹"，浏览器比作"收件人"，网络比作"快递公司"，服务器比作"发件人仓库"，引出"网页如何通过网络传输并被浏览器解析"的核心问题，激发学生学习兴趣。 1. 跟随教师浏览典型网站，观察网页的文本、图像、导航栏等构成元素，主动分享自己的观察结果。 2. 结合自己上网经历，思考教师提出的问题，带着疑问进入新知学习。 3. 跟随"寄快递"类比，初步建立"网页—网络—服务器—浏览器"四要素的认知框架。 1. 通过真实网站展示，激发学生学习兴趣，激活学生已有上网经验。 2. 通过层层追问，引导学生从"用户视角"转向"技术视角"，自然生成对本节课核心问题的探究需求。 3. 用"寄快递"类比降低抽象概念的理解门槛，为后续知识点的学习做好铺垫。 活动二： 初识网页与网站核心概念 1.新知讲授 （1）讲解"网页"概念：网页是构成网站的基本元素，是一个包含HTML标签的纯文本文件，可以通过浏览器解析后展示。 （2）讲解"网站"概念：网站是在互联网上由若干网页集合而成的，网页之间通过超链接相互关联。每个网站都有一个唯一的入口。 （3）讲解"浏览器"概念：浏览器是用于解析、显示Web网页的软件，常见浏览器有Microsoft Edge、Chrome、Firefox、Safari等。 （4）讲解"URL"概念：URL是互联网上资源的地址，用于唯一标识一个网页位置。例如：www.baidu.com。 2.例题分析 题目：分析"百度首页"的URL构成 教师在浏览器中打开"百度首页"，与学生共同分析URL各部分的含义：协议类型、域名、资源路径等。 3.课堂问答 教师展示课堂问答题目，要求学生自主思考并主动回答问题，给予学生肯定评价并鼓励学生积极参与课堂互动。 4.背诵记忆 罗列并展示重要知识点内容，要求学生在规定的时间内完成知识点的识记，并通过教师开展的问答抽查，要求识记不牢固的学生利用课后时间继续完成记忆巩固。 5.课堂练习 教师展示两道单项选择的课堂练习题，要求学生思考并回答，针对回答问题的学生给予肯定的评价，并鼓励其他同学积极参与课堂互动。 1. 跟随教师讲授，认真记录网页、网站、浏览器、URL四个核心概念的定义与特点。 2. 观察"百度首页"的URL，分析其组成结构，理解协议、域名、路径的含义。 3. 参与课堂问答，完成知识点背诵记忆，认真作答课堂练习题，巩固所学知识。 1. 通过四个核心概念的讲授，帮助学生建立对网页与网站的基础认知。 2. 通过"百度首页"例题分析，将抽象概念具体化，加深学生对URL结构的理解。 3. 通过问答、背诵与练习，强化知识点记忆，检验学生的掌握情况，为后续学习HTTP/HTTPS等内容打基础。 活动三： 网页传输与访问原理 1.新知讲授 （1）讲解HTTP的作用：是用于传输网页的协议，规定了浏览器和服务器之间如何通信。 （2）讲解HTTPS：HTTPS是HTTP的安全版本，在HTTP基础上加入了SSL/TLS加密，可对传输数据进行加密，更安全。当前主流网站均使用HTTPS。 （3）讲解"IP地址"概念：IP是指互联网协议地址，是互联网上的每一台计算机的唯一标识，格式为"127.0.0.1"。 （4）讲解"域名"概念：域名是一种由用户使用的、方便记忆的互联网地址，DNS将域名解析为IP地址。 （5）讲解"超链接"概念：超链接是从一个网页指向另一个目标的连接关系，可以是文本、图片等，点击后可跳转到目标位置。 2.例题分析 题目：访问"www.baidu.com"的全过程 教师通过动画演示从输入网址到显示网页的完整过程：浏览器输入URL → DNS解析域名 → 浏览器向服务器发送HTTP请求 → 服务器返回HTML文件 → 浏览器解析并渲染网页。帮助学生理解整个工作流程。 3.课堂问答 教师展示课堂问答题目，要求学生自主思考并主动回答问题，给予学生肯定评价并鼓励学生积极参与课堂互动。 4.背诵记忆 罗列并展示重要知识点内容，要求学生在规定的时间内完成知识点的识记，并通过教师开展的问答抽查，要求识记不牢固的学生利用课后时间继续完成记忆巩固。 5.课堂练习 教师展示两道单项选择的课堂练习题，要求学生思考并回答，针对回答问题的学生给予肯定的评价，并鼓励其他同学积极参与课堂互动。 1. 跟随教师讲授，认真记录HTTP、HTTPS、IP地址、域名、超链接五个核心概念，理解网页传输与访问的完整流程。 2. 观察"访问百度"的全过程动画，理解DNS解析、HTTP请求、服务器响应、浏览器渲染的工作原理。 3. 参与课堂问答，完成知识点背诵记忆，认真作答课堂练习题，巩固所学知识。 1. 通过五个核心概念的讲授，帮助学生理解网页传输与访问的技术原理，突破"看不见的网络世界"这一认知难点。 2. 通过"访问百度全过程"的动画演示，将抽象过程可视化，让学生直观理解从输入网址到看到网页的完整链路。 3. 通过问答、背诵与练习，强化学生对核心知识点的记忆，为后续学习HTML与网页制作打下基础。 活动四： 了解网页开发相关知识 1.新知讲授 （1）讲解"静态网页"与"动态网页"的区别：静态网页内容固定，每个用户访问看到的页面相同；动态网页可根据用户操作或时间变化显示不同内容。 （2）讲解网页开发相关语言：HTML用于搭建网页结构，CSS用于美化网页外观，JavaScript用于实现网页交互。三者共同构成网页开发的三大基础技术。 （3）介绍Web标准的基本要求：结构、表现、行为相分离，便于代码维护与团队协作。 （4）介绍常用网页开发工具：记事本、EditPlus、Dreamweaver、Sublime Text、HBuilderX、Visual Studio Code等，重点演示VS Code的安装、汉化与基础配置。 2.例题分析 题目：使用VS Code创建第一个HTML文件 教师演示使用VS Code新建文件 → 编写简单HTML代码 → 保存为.html文件 → 用浏览器打开预览的完整过程，展示一个最简单的"Hello World"网页。 3.课堂问答 教师展示课堂问答题目，要求学生自主思考并主动回答问题，给予学生肯定评价并鼓励学生积极参与课堂互动。 4.背诵记忆 罗列并展示重要知识点内容，要求学生在规定的时间内完成知识点的识记，并通过教师开展的问答抽查，要求识记不牢固的学生利用课后时间继续完成记忆巩固。 5.课堂练习 教师展示课堂练习题，要求学生思考并回答，针对回答问题的学生给予肯定的评价，并鼓励其他同学积极参与课堂互动。 1. 跟随教师讲授，理解静态网页与动态网页的区别，记录HTML、CSS、JavaScript在网页开发中的角色分工。 2. 跟随教师演示，在VS Code中创建第一个HTML文件并预览，体会网页开发的完整流程。 3. 参与课堂问答，完成知识点背诵记忆，认真作答课堂练习题，巩固所学知识。 1. 通过对比静态与动态网页，帮助学生理解网页的不同形态，建立对网页开发技术体系的整体认知。 2. 通过VS Code的实操演示，让学生体验从编写代码到预览网页的成就感，激发后续学习兴趣。 3. 通过问答、背诵与练习，强化对开发工具与开发语言的记忆，为后续HTML学习做好铺垫。 课堂小结 作业布置 【课堂小结】 本节课我们认识了网页、网站、浏览器、URL等基础概念，理解了HTTP/HTTPS、IP地址、域名、超链接在网页传输与访问中的作用，掌握了"输入网址 → DNS解析 → HTTP请求 → 服务器响应 → 浏览器渲染"的完整工作流程；同时了解了静态网页与动态网页的区别，熟悉了HTML、CSS、JavaScript在网页开发中的角色分工，并能使用VS Code创建并预览简单的HTML文件，为后续深入学习网页制作打下基础。 【作业布置】 1. 预习任务1.2，了解HTML与CSS的基本语法。 2. 在VS Code中创建一个HTML文件，编写一个包含"个人信息卡"内容的简单网页：包含：姓名、班级、一句座右铭，并用浏览器打开预览。 3. 思考题：访问一个网站时，浏览器是如何把网页显示出来的？写出你理解的访问过程。 板书设计 一、核心概念 1. 网页 2. 网站 3. 浏览器 4. URL 二、网页传输与访问 1. HTTP / HTTPS 2. IP地址 → 域名 3. 超链接 三、网页开发相关知识 1. 静态网页 vs 动态网页 2. HTML：结构 CSS：表现 JavaScript：行为 3. 常用开发工具 记事本 Dreamweaver / Sublime Text HBuilderX / VS Code 四、工作流程 输入URL → DNS解析 →HTTP请求 → 服务器响应 →客户机接收 教学反思 本节课通过典型网站展示与"寄快递"生活类比，有效降低了网页传输原理的理解难度，"访问百度全过程"的动画演示也让学生直观感受了从输入网址到看到页面的完整链路。但部分学生对于DNS解析、HTTP请求与响应的工作过程仍存在困惑，后续可增加网络抓包工具的演示，让学生亲眼看到HTTP请求与响应的内容；小组练习中个别学生参与度不足，需优化分组方式，同时可结合更多贴近学生生活的网站作为案例，进一步提升学生的学习主动性与课堂参与度。 原创精品资源学科网独家享有版权，侵权必究！ 学科网（北京）股份有限公司 $