探索“盒子”奥秘，AI赋能课堂—《Web编程基础》智慧教学公开课
2026-05-20
刘欣欣 74
为深入推进教育智能化转型，探索人工智能AI与课堂教学的深度融合，2026年4月27日，人工智能学院软件工程系刘欣欣老师在杭州湾科创楼511教室开展了一场别开生面的教学公开课。本次公开课围绕《Web编程基础》课程中的核心难点——“盒子模型”展开，依托“智慧树”AI智慧课程平台，为师生们展示了一堂高效、互动、智能的精彩课程。
“盒子模型”作为CSS布局的基石，其涉及的内边距（padding）、边框（border）、外边距（margin）等属性关系复杂，是初学者的“拦路虎”。在本次公开课上，刘欣欣老师充分利用智慧树AI平台的立体化资源，将传统的“老师讲、学生听”转变为“AI引导、实训练兵”。
课堂上，老师理论讲解环节通过智慧树平台，借助AI的智能渲染功能，将原本枯燥的平面代码瞬间转化为可拆解、可交互的“真实盒子”。学生们通过平台上的实时演示，直观地看到了padding撑大盒子、margin产生塌陷等动态效果，极大降低了认知负荷。
依托智慧树AI智慧课程平台的强大数据分析能力，本次公开课实现了全流程的精准教学。
1.课前知识准备：借助“智慧树”AI模拟面试智能体，通过课前智能体测试，平台自动分析学生对块级元素等前置知识的掌握情况，为主讲教师调整教学策略提供了数据支撑。
2.课中实战：在实操环节，学生们利用平台内置的AI代码助手进行实时编程练习。当学生代码出现“外边距合并”、“宽高计算错误”等典型问题时，AI助手能即时给出提示和修正建议，实现了“一对一”的智能辅导。教师端的大屏上，各个同学的代码正确率、常见错误类型实时更新，老师根据常见问题，针对共性问题进行集中讲解。
3.课后拓展：智慧树平台根据课堂互动数据，自动为每位学生生成了个性化的复习资源和拓展训练题，并推荐相关的“盒子模型”经典布局案例，真正实现了因材施教。
公开课现场气氛热烈，学生参与度极高。在随后的“智慧挑战”环节中，利用平台随机挑人PK的功能，学生们争相展示自己的“盒子嵌套”作品，充分展现了举一反三的能力。
智慧树AI平台让“盒子模型”这个知识难点变得可视、可测、可练，学生抬头率、点头率明显提高。通过平台的AI实时反馈，”
本次公开课不仅为《Web编程基础》课程的教学改革提供了新范式，更展示了“AI+教育”在提升理工科实践教学质量的巨大潜力。未来，软件工程专业将继续深化与智慧树等平台的合作，推动更多课程开展智慧教学改革，助力人才培养质量迈向新台阶。
“盒子模型”作为CSS布局的基石，其涉及的内边距（padding）、边框（border）、外边距（margin）等属性关系复杂，是初学者的“拦路虎”。在本次公开课上，刘欣欣老师充分利用智慧树AI平台的立体化资源，将传统的“老师讲、学生听”转变为“AI引导、实训练兵”。
课堂上，老师理论讲解环节通过智慧树平台，借助AI的智能渲染功能，将原本枯燥的平面代码瞬间转化为可拆解、可交互的“真实盒子”。学生们通过平台上的实时演示，直观地看到了padding撑大盒子、margin产生塌陷等动态效果，极大降低了认知负荷。
依托智慧树AI智慧课程平台的强大数据分析能力，本次公开课实现了全流程的精准教学。
1.课前知识准备：借助“智慧树”AI模拟面试智能体，通过课前智能体测试，平台自动分析学生对块级元素等前置知识的掌握情况，为主讲教师调整教学策略提供了数据支撑。
2.课中实战：在实操环节，学生们利用平台内置的AI代码助手进行实时编程练习。当学生代码出现“外边距合并”、“宽高计算错误”等典型问题时，AI助手能即时给出提示和修正建议，实现了“一对一”的智能辅导。教师端的大屏上，各个同学的代码正确率、常见错误类型实时更新，老师根据常见问题，针对共性问题进行集中讲解。
3.课后拓展：智慧树平台根据课堂互动数据，自动为每位学生生成了个性化的复习资源和拓展训练题，并推荐相关的“盒子模型”经典布局案例，真正实现了因材施教。
公开课现场气氛热烈，学生参与度极高。在随后的“智慧挑战”环节中，利用平台随机挑人PK的功能，学生们争相展示自己的“盒子嵌套”作品，充分展现了举一反三的能力。
智慧树AI平台让“盒子模型”这个知识难点变得可视、可测、可练，学生抬头率、点头率明显提高。通过平台的AI实时反馈，”
本次公开课不仅为《Web编程基础》课程的教学改革提供了新范式，更展示了“AI+教育”在提升理工科实践教学质量的巨大潜力。未来，软件工程专业将继续深化与智慧树等平台的合作，推动更多课程开展智慧教学改革，助力人才培养质量迈向新台阶。