Web前端技术实验

实验01　开发环境与首个HTML5页面

课程代码 ZY070018｜适用：2024级、2025级｜第1次
2026—2027学年第一学期

字段	内容	字段	内容
大纲锚点	实验项目一：通过Dreamweaver创建一个网页	学时拆分	完整项目（2学时）
项目属性	基础验证型 / 必做 / 1人一组	课程目标	LO1、LO2

本次实验按任务书完成并现场验收；单次成绩按100分记录，课程总评按本年级教学大纲执行。

一、学习目标

建立规范的课程目录，能使用编辑器、浏览器和开发者工具完成“编辑-保存-运行-检查”闭环。
写出包含 doctype、html、head、meta、title、body 的HTML5文档骨架。
区分HTML、CSS、JavaScript的结构、表现和行为职责，并能解释页面加载结果。

二、核心任务

创建以学号命名的实验总目录，并建立 index.html、styles.css、app.js 三个文件。
完成班级个人主页：标题、个人简介、学习目标和一个可点击按钮均应有明确语义。
在开发者工具中检查DOM、网络加载和控制台；修复至少一个教师给出的路径或标签错误。
用外部CSS完成基础排版，用JavaScript让按钮更新页面中的状态文字。

三、验收标准

序号	可观察条件	记录
1	双击或本地静态服务均能打开，控制台无报错。	□通过　□需修改
2	HTML、CSS、JavaScript分文件组织，文件名与路径规范。	□通过　□需修改
3	能口头说明三类文件的职责，并展示一次开发者工具检查。	□通过　□需修改

四、提交物

完整项目文件夹
运行截图1张
控制台无错误截图1张
实验报告中的职责说明

统一命名：学号_姓名_实验01

五、90分钟流程

时间	活动
0—10	说明与安全检查
10—25	预测、演示、最小验证
25—65	独立完成核心任务
65—80	测试与同伴复核
80—90	抽查与退出记录

六、评分量规（100分）

维度	分值	判定要点
功能与任务完成	45	必做功能可运行，数据和交互正确
测试与问题修复	20	有边界或错误测试，并保留复测记录
代码与页面质量	15	结构、命名规范，控制台无未解释错误
报告与证据	15	报告、截图与源码相互对应
现场解释	5	能解释关键实现和至少一项修改

七、拓展与思考

选做：为页面增加深色模式按钮，但不得复制整段不理解的代码。

思考：如果页面空白，应按什么顺序定位文件路径、HTML结构和脚本错误？

八、AI辅助记录

如使用AI，记录问题、采用或拒绝的建议、本人修改及验证方法；未使用则注明“未使用”。