1. 核心宗旨与目标
培养创造者
让学生从互联网的“使用者”转变为“创造者”，理解科技背后的逻辑。
逻辑与艺术
通过代码编写培养严谨的逻辑，通过页面排版提升艺术审美。
- 掌握 HTML/CSS 基础，能独立制作具有个人特色的静态网页。
- 培养发现问题、调试代码（Debug）并解决问题的能力。
- 增强团队协作意识，通过小组项目完成复杂的网页作品。
2. 课程规划 (16课时)
建议每周 1-2 课时，具体进度可根据实际教学情况灵活调整。
| 阶段 | 主题内容 | 具体产出 |
|---|---|---|
| 第1-4周 | 结构之源 认识浏览器、HTML 标签、路径概念 |
个人名片网页 |
| 第5-8周 | 视觉魔法 CSS 颜色、字体、边框、盒子模型 |
精美文章排版页 |
| 第9-12周 | 布局进阶 Flex 布局、背景装饰、简单动效 |
多栏展示页面 |
| 第13-16周 | 创意发布 专题项目（班级、校园或兴趣主题） |
完整专题网站 |
3. 资源需求清单
硬件与环境 (单机运行)
- 计算机教室 (电脑无需连接外网)
- 投影及演示大屏
- 极域电子教室 (用于局域网内交流)
软件工具 (全本地离线)
- VS Code (单机版代码编辑器)
- Chrome / Edge 浏览器
- 本地素材资源包 (通过U盘/局域网下发)
优势：本方案采用纯本地开发模式，作品通过浏览器直接打开本地文件运行，不涉及互联网部署，确保学生用网安全，且对学校网络带宽零占用。
4. 核心特色
绿色安全
所有创作过程都在本地电脑完成，无需注册账号，无需上传数据，环境纯净。
成果可视化
即便不联网，通过浏览器打开本地 HTML 文件也能完美呈现精美的网页效果。
零成本运行
不需要购买服务器和域名，充分利用学校现有硬件资源，低碳高效。
5. 网页设计的魅力
这是我为这个页面写的一段代码，简单却强大：
<style>
.card {
border-radius: 12px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
</style>
掌握了这些，同学们就能在屏幕上建立起属于自己的数字城堡。
更多细节、精美案例与参考资料，详细见 PPT