# 个人主页——项目启动与开发环境搭建 教学设计
| **课题** | **个人主页——项目启动与开发环境搭建** |
|:---|:---|
| **课时** | 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 页面。 | **代码演示**
输入 ``、`html`、`head`、`body` 基本结构，在正文中添加标题“我的个人主页”。
**巡回指导**
检查目录、扩展名、保存状态和浏览器打开方式，帮助定位空白页问题。 | **目录创建**
建立项目文件夹及 `images` 子目录，新建 `index.html`。
**编码测试**
完成基本结构，修改标题和问候语，保存后在浏览器中刷新验证。 | 通过首次“编辑—保存—运行—修改”闭环建立操作信心，形成网页开发的基本工作节奏。 |
| **5. 成果验收总结**
（4分钟） | 按标准检查首课成果，回顾项目路径并保存项目文件。 | **快速验收**
依据“目录正确、文件正确、页面可见、中文正常”四项标准抽查。
**知识梳理**
总结三项技术分工和网页运行流程。 | **同伴互检**
两人交换检查项目目录和页面效果，记录一个待改进项。
**成果归档**
关闭前确认文件已保存，并整理项目位置。 | 用明确标准完成阶段评价，强化文件管理和自我检查习惯。 |
## 板书设计
```text
个人主页项目
HTML CSS JavaScript
结构 样式 交互
└──────── 浏览器解析 ────────┘
personal-homepage/
├── index.html
└── images/
开发流程：规划 → 编码 → 保存 → 浏览 → 检查
```
## 教学成效与反思
| | |
|:---|:---|
| **教学成效** | 学生能够说出三项前端技术的基本分工，多数学生按规范建立项目目录并成功运行首个网页。成品展示使项目目标清晰，同伴互检提升了文件管理意识。 |
| **教学反思** | 初学者易忽略文件扩展名和保存操作，导致页面无变化。教学中应统一开启扩展名显示，并用“修改文字—保存—刷新”的短循环反复确认工作流程，减少环境问题占用实践时间。 |