模块1任务1.2与1.3：HTML与CSS初体验与编码工具实战（教案）-《网页设计与制作》（电子工业出版社）上好课

《任务1.2与任务1.3 HTML与CSS初体验和编码工具实战》教案 课 题 HTML 与 CSS 初体验和编码工具实战 课 型 新授课 课 时 2课时 授课班级 授课时间 授课教师 教材分析 本节课选自《网页设计与制作》教材模块 1，任务 1.2、任务 1.3 内容。承接上节课网页、网站基础概念，带领学生认识 HTML、CSS 基础理论，理解 Web 标准的结构、表现、行为分离思想；认识 VS Code 开发工具，掌握软件安装、插件配置、项目目录搭建。教材以任务驱动形式，先理论知识讲解，再实操演练：查看网页源代码、编写简单 test.html 网页、安装配置 VS Code、搭建精品课程网站项目目录。理论结合实操，让学生理解网页底层代码构成，掌握前端开发基础工具操作，为后续网页标签编写、完整网站开发打下实操基础，是从理论认知过渡到代码实操的关键一课。 学情分析 授课对象为中职计算机应用专业学生。学生已经初步了解网页、网站概念，知道 HTML、CSS、JavaScript 三种开发语言的分工；具备基础电脑文件操作能力，但从未接触浏览器开发者工具、代码编辑器。学生对写代码制作网页抱有好奇心，乐于动手实操；但对标签、层叠样式表、Web 标准这类抽象概念理解较困难，容易混淆 HTML 与 CSS 的作用；文件目录创建、VS Code 插件安装等实操步骤多，部分学生容易出现操作失误。 学习目标 【知识目标】 ①了解 HTML、CSS 的发展历史，理解 HTML、CSS 的作用； 掌握 Web 标准三部分：结构、表现、行为对应的技术； ②认识 HTML5 基础文档结构，掌握<!DOCTYPE html>、html、head、body等基础标签作用 ③了解网站开发五大流程；认识 VS Code、HBuilderX 编辑器，知道常用插件的功能。 【能力目标】 ①会使用浏览器开发者工具查看网页源代码；能够使用记事本编写简单 HTML 网页文件并浏览器预览； ②能够完成 VS Code 安装、中文、Live Server、Prettier 插件安装配置；可以搭建精品课程网站项目文件夹结构。 【素养目标】 ①建立网页代码规范开发意识，理解结构、表现、行为分离的开发思想； ②养成严谨的文件目录管理习惯，培养调试排错的实操习惯。 学习重难点 【学习重点】 1. HTML、CSS 作用，HTML5 基础文档结构； 2. VS Code 插件安装；精品课程网站项目目录搭建。 【学习难点】 1. 理解 Web 标准中结构、表现、行为三者分离； 2. 分清 HTML 负责内容结构，CSS 负责样式表现； 3. 理解代码文件、编辑器、浏览器三者关系。 教学方法 讲授法、案例演示法、对比分析法、实操演示法、任务驱动法 课前准备 预习教材任务 1.2、任务 1.3；电脑安装 Edge 浏览器；准备好 VS Code 安装包。 教学媒体 多媒体机房、PPT 课件、VS Code 安装包、浏览器 教学过程 教学环节 教师活动设计 学生活动设计 设计意图 活动一：创设情境，导入新课 1. 回顾旧知：提问复习，HTML、CSS 分别的作用是什么？ 2. 抛出问题：我们平时看到丰富多彩的网页，浏览器背后拿到的原始代码是什么样子？我们用什么工具编写这些代码？ 3. 展示本节课学习任务：本节课我们要学会看网页源代码，看懂基础 HTML 文档；学会安装 VS Code 工具，搭建精品课程网站项目目录。 1. 回顾上节课知识点，思考回答问题。 2. 明确本节课学习任务。 复习旧知识，抛出问题激发学生好奇心，引出本节课任务，明确学习目标。 活动二：HTML 与 CSS 理论知识学习 1. 新知讲授 （1）讲解 HTML：定义、诞生时间、HTML5 版本；讲解标签概念，成对标签、标签属性，举例<html lang="zhCN">。 （2）讲解 Web 标准：网页三部分：结构、表现、行为，分别对应什么技术；强调三者要素分离的开发原则。 （3）讲解 CSS：概念、提出时间，CSS3 模块；CSS 样式规则的格式，结合教材示例header { background: #f0f0f0; textalign: center; }讲解。 2. 课堂问答：提问 Web 标准三部分分别对应什么技术？HTML 和 CSS 分别负责什么？3. 梳理知识点，学生短时识记。 1. 做好课堂笔记，理解 HTML、CSS、Web 标准概念。 2. 参与课堂问答，记忆核心知识点。 落实知识目标，讲解课本理论，把抽象概念讲清楚，突破 Web 标准这一难点。 活动三：任务实操：查看网页源码，编写 test.html 1. 演示步骤 1：使用 Edge 浏览器开发者工具查看精品课程网站网页源代码，讲解<!DOCTYPE html>文档声明作用，对照教材讲解 HTML5 文档基础结构：<!DOCTYPE html>、<html>、<head>、<body>。 2. 演示步骤 2：记事本编写 test.html 完整流程：新建记事本、输入代码、保存为 test.html、浏览器打开预览效果。 讲解<style>标签是写 CSS 样式的地方。 3. 布置试一试任务：修改 test.html 里面的汉字内容，保存后刷新浏览器观察页面变化。 4. 教师巡视机房，指导学生实操，解决保存后缀错误、代码写错等常见问题。 1. 观看教师演示，认识网页源代码。 2. 跟随步骤实操，用记事本创建 test.html 网页，浏览器查看效果。 3. 完成试一试，修改网页文字，观察页面变化。 课本实操任务落地，让学生亲手体验 HTML+CSS 网页，理解编辑器写代码，浏览器解析渲染页面的逻辑。落实能力目标。 活动四：网站开发流程与开发工具介绍 1. 讲授网站开发完整 5 个阶段：规划与分析、设计与原型、开发与实现、测试与部署、维护与迭代，简单说明每个阶段参与人员。 2. 讲解网页编辑器 VS Code、HBuilderX 各自特点；介绍课本提到的插件：Chinese (Simplified)、Live Server、Prettier 的作用。 3. 简单介绍拓展知识 Lingma 灵码 AI 插件。 4. 课堂提问：Live Server 插件作用是什么？Prettier 插件用来干什么？ 1. 听讲，记录笔记，记住网站开发流程，了解各个编辑器、插件功能。 2. 回答课堂提问。 让学生建立完整网站开发流程认知，认识开发工具与插件功能，为后面实操做铺垫。 活动五：实操：VS Code 配置，搭建精品课程网站项目 1. 教师完整演示：①VS Code 安装；②安装中文语言包、Live Server、Prettier 插件；③讲解 VS Code 界面组成；文件新建、打开文件夹、保存等基础操作；④在 D 盘创建 website 项目根文件夹，VS Code 打开该文件夹，创建 css、images、pages 子文件夹，新建 main.html。 2. 布置试一试任务：学生独立完成整套操作，搭建空的精品课程网站目录结构。 3. 教师巡回指导，纠正学生不会打开文件夹、文件夹层级错误、插件搜索不到等问题。 1. 认真观看教师操作演示。 2. 动手实操，完成 VS Code 安装、插件安装，搭建 website 项目全部目录结构。 落实本节课核心实操任务，训练学生工具使用、项目目录管理能力，落实能力与素养目标。 课堂小结作业布置 课堂小结： 本节课学习 HTML、CSS 基础，Web 标准三部分；认识 HTML5 文档基础结构；会查看网页源码，记事本编写简单网页；了解网站开发流程； 掌握 VS Code 安装配置，完成精品课程网站项目目录搭建。 【作业布置】 1. 预习下一节 HTML 基础标签相关内容。 2. 作业 1：打开任意网页，使用浏览器开发者工具查看网页源代码，找出<!DOCTYPE html>。 3. 作业 2：打开 test.html 文件，修改 CSS 背景颜色，保存后浏览器观察页面效果。 4. 作业 3：确认自己电脑上 website 项目文件夹结构完整，css、images、pages 文件夹和 main.html 文件存在。 板书设计 一、HTML & CSS HTML：超文本标记语言，负责结构、内容 Web 标准：结构（HTML）、表现（CSS）、行为（JS/DOM），三者分离 CSS：层叠样式表，负责样式美化 HTML5 基础结构：<!DOCTYPE html>、<html>、<head>、<body> 二、网站开发流程 规划分析 → 设计原型 → 开发实现 → 测试部署 → 维护迭代 三、VS Code 工具 常用插件：中文包、Live Server:实时预览、Prettier:代码格式化 教学反思 本节课使用任务驱动教学，理论结合实操，学生动手操作积极性较高。部分学生容易混淆 HTML 和 CSS 的分工，后续课堂要反复举例区分。实操环节容易出现的问题：保存记事本文件后缀不是.html、VS Code 不会打开项目文件夹、插件搜索失败。少数学生电脑操作基础弱，跟不上操作步骤，后续可以设置分层小任务。可以增加更多网页源码对照案例，帮助学生理解浏览器解析代码的原理，强化结构表现相分离的开发思想。 原创精品资源学科网独家享有版权，侵权必究！ 学科网（北京）股份有限公司 $