5.2 KiB
5.2 KiB
个人主页——项目启动与开发环境搭建 教学设计
| 课题 | 个人主页——项目启动与开发环境搭建 |
|---|---|
| 课时 | 1课时（40分钟） |
| 教学目标 | 知识目标：了解网站、网页与浏览器的关系，认识 HTML、CSS、JavaScript 在前端项目中的分工。 技能目标：能够规范创建个人主页项目目录，使用 Visual Studio Code 新建 index.html，并在浏览器中运行第一个网页。素养目标：建立“先规划、后开发、再测试”的项目意识，养成规范命名和分类管理文件的职业习惯。 |
| 教学重难点 | 重点：Web 前端三项核心技术的作用；项目目录创建；HTML 文件的编辑与运行。 难点：理解浏览器读取 HTML 文件并呈现页面的基本过程；建立文件路径与网页资源之间的联系。 |
| 教学资源准备 | Visual Studio Code、Chrome 或 Edge 浏览器、个人主页成品示例、项目需求单、离线安装包、包含 images 文件夹的目录模板。 |
教学过程
| 教学环节 | 教学内容 | 教师活动 | 学生活动 | 设计意图 |
|---|---|---|---|---|
| 1. 项目情境导入 （6分钟） |
展示个人主页成品，明确项目要呈现个人简介、技能、作品和联系方式。 | 成品展示 演示桌面端和手机端页面效果，提问：“一个网页需要哪些内容和技术？” 任务发布 发放项目需求单，说明六课时阶段成果与最终验收标准。 |
观察思考 浏览成品页面，列出看到的文字、图片、链接和表单。 需求标注 在需求单上标记自己主页准备展示的内容。 |
用可见成果建立学习目标，将“学习网页制作”转化为“完成个人主页”的真实任务。 |
| 2. 技术角色认知 （8分钟） |
认识 HTML、CSS、JavaScript 的功能及浏览器的作用。 | 类比讲解 用“结构、装修、行为”类比三项技术，演示关闭 CSS 或 JavaScript 后的页面变化。 流程梳理 画出“代码文件→浏览器解析→网页呈现”的基本流程。 |
对比观察 比较不同技术缺失时的页面效果，填写技术作用表。 口头归纳 用一句话说明 HTML、CSS、JavaScript 各自负责什么。 |
通过对比建立前端技术整体认知，为后续按层次开发页面形成清晰框架。 |
| 3. 环境搭建示范 （8分钟） |
安装或确认编辑器与浏览器，认识资源管理器、编辑区和浏览器开发者工具。 | 操作示范 演示打开文件夹、创建文件、保存代码和刷新浏览器；强调扩展名显示及 UTF-8 编码。 规范提示 说明项目名使用英文小写、文件名不含空格、资源分类存放。 |
跟随操作 启动开发工具，找到主要功能区，完成环境检查。 规范记录 在任务单记录 index.html、css、js、images 的用途。 |
降低工具使用门槛，把目录和文件规范作为项目质量管理的起点。 |
| 4. 首个页面实践 （14分钟） |
创建 personal-homepage 项目，编写并运行第一个 HTML 页面。 |
代码演示 输入 <!DOCTYPE html>、html、head、body 基本结构，在正文中添加标题“我的个人主页”。巡回指导 检查目录、扩展名、保存状态和浏览器打开方式，帮助定位空白页问题。 |
目录创建 建立项目文件夹及 images 子目录，新建 index.html。编码测试 完成基本结构，修改标题和问候语，保存后在浏览器中刷新验证。 |
通过首次“编辑—保存—运行—修改”闭环建立操作信心，形成网页开发的基本工作节奏。 |
| 5. 成果验收总结 （4分钟） |
按标准检查首课成果，回顾项目路径并保存项目文件。 | 快速验收 依据“目录正确、文件正确、页面可见、中文正常”四项标准抽查。 知识梳理 总结三项技术分工和网页运行流程。 |
同伴互检 两人交换检查项目目录和页面效果，记录一个待改进项。 成果归档 关闭前确认文件已保存，并整理项目位置。 |
用明确标准完成阶段评价，强化文件管理和自我检查习惯。 |
板书设计
个人主页项目
HTML CSS JavaScript
结构 样式 交互
└──────── 浏览器解析 ────────┘
personal-homepage/
├── index.html
└── images/
开发流程：规划 → 编码 → 保存 → 浏览 → 检查
教学成效与反思
| 教学成效 | 学生能够说出三项前端技术的基本分工，多数学生按规范建立项目目录并成功运行首个网页。成品展示使项目目标清晰，同伴互检提升了文件管理意识。 |
| 教学反思 | 初学者易忽略文件扩展名和保存操作，导致页面无变化。教学中应统一开启扩展名显示，并用“修改文字—保存—刷新”的短循环反复确认工作流程，减少环境问题占用实践时间。 |