# 个人主页——项目启动与开发环境搭建 教学设计

| **课题** | **个人主页——项目启动与开发环境搭建** |
|:---|:---|
| **课时** | 1课时（40分钟） |
| **教学目标** | **知识目标**：了解网站、网页与浏览器的关系，认识 HTML、CSS、JavaScript 在前端项目中的分工。<br>**技能目标**：能够规范创建个人主页项目目录，使用 Visual Studio Code 新建 `index.html`，并在浏览器中运行第一个网页。<br>**素养目标**：建立“先规划、后开发、再测试”的项目意识，养成规范命名和分类管理文件的职业习惯。 |
| **教学重难点** | **重点**：Web 前端三项核心技术的作用；项目目录创建；HTML 文件的编辑与运行。<br>**难点**：理解浏览器读取 HTML 文件并呈现页面的基本过程；建立文件路径与网页资源之间的联系。 |
| **教学资源准备** | Visual Studio Code、Chrome 或 Edge 浏览器、个人主页成品示例、项目需求单、离线安装包、包含 `images` 文件夹的目录模板。 |

## 教学过程

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

## 板书设计

```text
个人主页项目

HTML       CSS        JavaScript
结构       样式       交互
  └──────── 浏览器解析 ────────┘

personal-homepage/
├── index.html
└── images/

开发流程：规划 → 编码 → 保存 → 浏览 → 检查
```

## 教学成效与反思

| | |
|:---|:---|
| **教学成效** | 学生能够说出三项前端技术的基本分工，多数学生按规范建立项目目录并成功运行首个网页。成品展示使项目目标清晰，同伴互检提升了文件管理意识。 |
| **教学反思** | 初学者易忽略文件扩展名和保存操作，导致页面无变化。教学中应统一开启扩展名显示，并用“修改文字—保存—刷新”的短循环反复确认工作流程，减少环境问题占用实践时间。 |
