《Web编程基础实训（Fundamentals of Web Programming Practical Training）》教学大纲-计算机科学与工程学院（人工智能学院）

《Web编程基础实训（Fundamentals of Web Programming Practical Training）》教学大纲

《Web编程基础实训（Fundamentals of Web Programming Practical Training）》教学大纲

制定时间：2025年03月

一、课程基本信息

（一）适用专业：本科计算机科学与技术

（二）课程代码：3ZN1060A

（三）学分/课内学时：3学分/60学时

（四）课程类别：专业教育

（五）课程性质：必修/实践专周

（六）先修课程：C语言程序设计与应用

（七）后续课程：企业级应用开发、企业级应用开发课程设计、毕业设计等

二、课程教学目标

本课程是计算机科学与技术专业的一门专业教育必修课程，学生通过“学中做、做中学”的实训模式，帮助大一学生夯实Web开发基础，了解并掌握HTML、CSS、JavaScript等Web技术，并能综合运用HTML、CSS、JavaScript实现Web项目设计与制作，在综合实训中，学生也可以自己选择游戏之类的项目完成，以培养学生的创新精神和实践能力，最终为其成为兼具技术能力与人文关怀的数字化人才打下基础。

（一）‌知识与能力目标‌

目标1：学生能够合理的选择和使用HTML的常用标签和语义化标签，提高网页的可读性和可访问性，编写规范、结构化的HTML代码，构建清晰且内容丰富的网页布局；学生能够运用CSS选择器精确选中HTML元素，并应用样式设计，编写有效的CSS代码，美化网页的外观和布局，提升用户体验；学生能够编写基本的JavaScript代码，熟练进行DOM操作，处理用户交互事件，实现基本的网页交互功能。通过‌技术规范约束、分阶段迭代、工具赋能‌三维度，培养“工匠精神”，培养学生对代码质量、用户隐私保护及社会价值的极致追求，契合计算机专业“精益求精、服务社会”的育人目标。（对应毕业要求指标点1.3）

目标2：学生应具备基本的调试技巧，能够使用浏览器的开发者工具进行代码调试和错误排查。学生能够初步整合HTML、CSS和JavaScript三种技术，构建出结构清晰、基础功能完备、样式美观且具备一定交互性的网页应用，为后续的深入学习和实际项目开发打下坚实的基础。帮助学生更好地理解前端开发的流程和原理，提升其在前端开发领域的综合能力。以“乡村振兴”、“非遗保护”、“家乡网站”等国家战略需求的真实项目为实训项目，以增强学生的文化自信，通过技术传播中华优秀传统文化。（对应毕业要求指标点5.1）

目标3：能通过独立查阅相关文献资料，并在对文献资料进行综合分析后，理解课题任务。根据课题需求确定技术方案，提出比较合理的实施方案。能够撰写描述具体课题综合训练过程及呈现训练成果的报告。（对应毕业要求指标点3.4 ）。

（二）课程目标与毕业要求的对应关系

毕业要求	毕业要求指标点	课程目标	教学单元	评价方式
1.具备专业必需自然科学、工程基础和专业知识，能够用于解决计算机软件开发中的复杂工程问题。	指标点1.3:计算机软件与理论、计算机系统结构、计算机应用技术的基本理论、基本知识和基本技能。	目标1	Web基础与思政导论、‌HTML基础与语义化、‌CSS样式与布局、‌JavaScript交互基础	平时成绩（阶段性成果）
3. 能够设计针对计算机应用系统设计中的复杂工程问题的解决方案，设计满足特定需求的系统，并能够在设计环节中体现创新意识，考虑社会、健康、安全、法律、文化以及环境等因素。	指标点 3.4:能够进行计算机应用系统开发文档的撰写。	目标3	撰写课程设计报告	实训总结报告
5.能够针对计算机应用系统的复杂工程问题，开发、选择与使用恰当的技术、资源、现代工程工具和信息技术工具，实现对复杂工程问题的预测与模拟，理解其局限性。	指标 5.1:能运用信息技术、大型团队开发过程管理软件等现代工程工具和信息技术工具，对计算机系统的设计开发过程进行管理。	目标2	完成“红色文化主题网站”的开发，包含HTML结构、CSS样式、JS交互全流程	实训成果（答辩）

三、教学内容与方法

（一）教学内容及要求

序号	教学单元	教学内容	学习产出要求	推荐学时	推荐教学方式	支撑课程目标	备注
1	Web基础与思政导论	Web技术发展史、浏览器工作原理、科技伦理：技术中立性与社会责任	能简述Web技术的社会影响；理解“技术向善”的核心价值观	2学时	教师指导，学生自学	目标1
2	‌HTML基础与语义化	HTML常用标签（标题、段落、超链接、列表、表格）、语义化标签（<header>、<article>）、表单设计	能编写结构清晰的HTML页面；使用语义化标签提升可访问性	6学时	教师指导，学生自学，实操	目标1	课外学时4学时
3	‌CSS样式与布局	CSS样式、盒模型、浮动与定位、Flex/Grid布局、响应式设计（媒体查询）等	能实现多设备适配的页面布局；通过CSS美化页面视觉效果	12学时	教师指导，学生自学，实操	目标1	课外学时6学时
4	‌JavaScript交互基础	变量、函数与事件处理、DOM操作（元素获取、内容修改）表单验证	能实现动态内容更新与表单验证、编写简单交互逻辑（如轮播图、折叠菜单）	12学时	教师指导，学生自学，实操	目标1	课外学时6学时
5	综合项目实训	完成“红色文化主题”相关项目的需求分析、站点规划	综合运用HTML标签、CSS样式、JavaScript脚本语言完成Web项目规划设计制作与开发。提交完整项目代码，项目体现完整性、创新性以及思政元素。	4学时	教师指导，学生自学，实操	目标2	课外学时20学时
		项目的页面规划设计与制作（布局）		10学时
		JS交互功能设计与实现		10学时
6	撰写课程设计报告及答辩	完整开发文档‌：需求分析（功能清单）、技术设计文档（架构图、模块说明）、实现技术与方法（操作指南）、项目总结（技术难点与思政价值）	报告格式规范，条理清晰，文笔流畅，内容充实，反映项目实现的整个过程，并展示技术实现与思政价值融合点。答辩时学生对实训内容要熟悉，回答问题要陈述清晰，有一定逻辑性。	4学时	指导、答辩	目标3	课外学时4学时

（二）教学方法

（1）采用启发式教学，以学生为中心，激发学生主动学习的兴趣，培养学生独立思考、分析问题和解决问题的能力，引导学生主动通过实践和自学获得自己想学到的知识。

（2）在教学内容上，采用案例式教学，比如：通过企业官网首页、个人博客等案例分解标签使用与布局技巧；通过开发简易计算器、实时天气展示组件等开发，掌握JavaScript语言实现动态页面的交互，通过电商网站、在线教育平台等实现完整应用，从而‌培养学生独立思考、分析问题和解决问题的能力，引导学生主动通过自学和工程实践提升动手实践能力。

（3）在教学过程中采用电子教案，CAI 课件，多媒体教学与传统板书、教具教学相结合，提高课堂教学信息量，增强教学的直观性。

（4）训练内容与工程实践相结合，引导学生应用数学、自然科学和工程科学的基本原理，采用现代设计方法和手段，进行需求分析、设计以及实现，从而培养解决Web应用相关工程问题的思维方法和实践能力。

（5）鼓励学生结合自己的兴趣进行自主课题设计。

四、考核及成绩评定

（一）考核内容及成绩构成

课程考核以考核学生能力培养目标的达成为主要目的，以检查学生对各知识点的掌握程度和应用能力为重要内容，整个实训过程采用综合项目驱动与分层递进模式，目标1主要是分层递进过程中的过程考核。目标2主要考核综合实训成果，采用成果检查和答辩方式，目标3主要考核学生撰写描述具体课题综合训练过程及呈现训练成果的报告的能力。各课程目标的考核内容、成绩评定方式、目标分值建议如下：

课程目标	考核内容	成绩评定方式	成绩占总评分比例	目标成绩占当次考核比例	学生当次考核平均得分	目标达成情况计算公式
目标1：能够合理的选择和使用HTML的常用标签和语义化标签，提高网页的可读性和可访问性，编写规范、结构化的HTML代码，构建清晰且内容丰富的网页布局；学生能够运用CSS选择器精确选中HTML元素，并应用样式设计，编写有效的CSS代码，美化网页的外观和布局，提升用户体验；学生能够编写基本的JavaScript代码，熟练进行DOM操作，处理用户交互事件，实现基本的网页交互功能。	能编写结构清晰的HTML页面；使用语义化标签提升可访问性	阶段性成果（代码）	6%	30%	B1
	能实现多设备适配的页面布局；通过CSS美化页面视觉效果.		8%	40%	B2
	能实现动态内容更新与表单验证、编写简单交互逻辑（如轮播图、折叠菜单）		6%	30%	B3
目标2：应具备基本的调试技巧，能够使用浏览器的开发者工具进行代码调试和错误排查。学生能够初步整合HTML、CSS和JavaScript三种技术，构建出结构清晰、基础功能完备、样式美观且具备一定交互性的网页应用，为后续的深入学习和实际项目开发打下坚实的基础。帮助学生更好地理解前端开发的流程和原理，提升其在前端开发领域的综合能力。	考查综合实训成果是否综合运用HTML标签、CSS样式、JavaScript脚本语言完成Web项目规划设计制作与开发。提交完整项目代码，项目体现完整性、创新性以及思政元素。	综合实训成果（答辩）	40%	100%	A1
目标3：能通过独立查阅相关文献资料，并在对文献资料进行综合分析后，理解课题任务。根据课题需求确定技术方案，提出比较合理的实施方案。能够撰写描述具体课题综合训练过程及呈现训练成果的报告。	能通过独立查阅相关文献资料，并在对文献资料进行综合分析后，理解课题任务。根据课题需求确定技术方案，提出比较合理的实施方案。报告格式规范。	实训总结报告	20%	50%	C1
	能够撰写描述具体课题综合训练过程及呈现训练成果的报告。	实训总结报告	20%	50%	C2
总评成绩（100%）=阶段性成果（20%）+综合实训成果（40%）+实训总结报告（40%）			100%	——	——

（二）总评成绩评定

评分标准如下

总评成绩由目标1（20%）、目标2（40%）和目标3（40%）组成。对应目标评分标准如下：

1.阶段性成果（代码）：三部分阶段性成果，支撑目标1，共占总评分20%。对应目标的评分标准如下：

对应目标		目标1：能够合理的选择和使用HTML的常用标签和语义化标签，提高网页的可读性和可访问性，编写规范、结构化的HTML代码，构建清晰且内容丰富的网页布局；学生能够运用CSS选择器精确选中HTML元素，并应用样式设计，编写有效的CSS代码，美化网页的外观和布局，提升用户体验；学生能够编写基本的JavaScript代码，熟练进行DOM操作，处理用户交互事件，实现基本的网页交互功能。
考查点		页面的主题明确、内容健康丰富、新颖独到；合理的选择和使用HTML的常用标签和语义化标签，主页有logo图片、导航条等，构建清晰且内容丰富的网页	使用CSS样式的能力，包括：设计的页面美观性与美感；页面布局合理；独立的CSS样式文件	使用JavaScript编程技术实现动态内容更新与表单验证、编写一定的交互逻辑（如轮播图、折叠菜单）程序的能力
总评分占比		6%	8%	6%
评分标准	100% 至 90%	能编写结构清晰、规范的HTML页面；使用语义化标签提升可访问性，标签使用合理。	具有较强的综合使用CSS的能力，设计的页面美观性与美感强；页面布局合理，采用独立的CSS样式文件，能实现多设备适配的页面布局。	熟练使用JavaScript编程技术实现动态内容更新与表单验证、编写一定的交互逻辑（如轮播图、折叠菜单）程序。
	89.9% 至 80%	能编写结构清晰的HTML页面；标签使用合理，能使用部分语义化标签。	有一定的综合使用CSS样式能力，设计的页面美观性与美感较强；页面布局合理，采用独立的CSS样式文件	有一定的使用JavaScript编程技术的能力，能实现一定的动态内容更新与表单验证、编写一定的交互逻辑（如轮播图、折叠菜单）程序
	79.9 至 70%	能编写一定的HTML页面；标签使用基本合理、规范	能综合使用CSS样式，设计的页面美观性与美感一般；页面布局合理，采用独立的CSS样式文件	能综合使用JavaScript编程技术实现一些的动态内容更新与表单验证、编写一些交互逻辑（如轮播图、折叠菜单）程序。
	69.9% 至 60%	基本能按照要求编写HTML页面；标签使用基本合理	能综合使用CSS样式，设计的页面美观性与美感一般；页面布局基本合理，采用独立的CSS样式文件	了解JavaScript编程技术在教师指导下完成一些动态内容更新与表单验证。
	59.9%至 0	页面单一，主题不明确；页面元素不合理，错误链接，不完整	页面零乱，布局不合理，没采用DIV+CSS技术	不能使用JavaScript编程技术完成一些动态内容更新与表单验证。

2.答辩：支撑目标2，共占总评分40%。对应目标的评分标准如下：

对应目标

目标2：应具备基本的调试技巧，能够使用浏览器的开发者工具进行代码调试和错误排查。学生能够初步整合HTML、CSS和JavaScript三种技术，构建出结构清晰、基础功能完备、样式美观且具备一定交互性的网页应用，为后续的深入学习和实际项目开发打下坚实的基础。帮助学生更好地理解前端开发的流程和原理，提升其在前端开发领域的综合能力。

考查点

通过答辩考查综合实训成果是否综合运用HTML标签、CSS样式、JavaScript脚本语言完成Web项目规划设计制作与开发。提交完整项目代码，项目体现完整性、创新性以及思政元素。

总评分占比

40%

评分标准

100%

至

90%

构建清晰且内容丰富的网页系统，各功能模块划分合理、实现正确，且5个以上页面，各页面主题明确、内容健康、新颖独到；主页有logo图片、导航、和图片等元素，页面元素使用合理，新颖。具有较强的综合使用CSS的能力，设计的页面美观性与美感强；页面布局合理，采用独立的CSS样式文件。熟练使用JavaScript编程技术实现动态内容更新与表单验证、编写一定的交互逻辑（如轮播图、折叠菜单）程序。

能流利地阐述自己项目的实现过程和实现技术，能准确回答教师提问。

89.9%

至

80%

各功能模块划分合理、实现正确，5个以上页面，各页面主题比较明确、内容健康、新颖独到；主页有logo图片、导航和图片等元素，页面元素使用合理；导航可以正确跳转到其他页面。有一定的综合使用CSS样式能力，设计的页面美观性与美感较强；页面布局合理，采用独立的CSS样式文件。能编写一定的交互逻辑功能。

能较准确地阐述自己项目的实现过程和实现技术，能准确回答教师提问。

79.9

至

70%

各功能模块划分基本合理、实现基本正确，能完成4个以上页面，各页面主题较明确、内容健康；主页有logo图片、导航、图片等元素，页面元素基本合理；导航可以正确跳转到其他页面。能综合使用CSS样式，设计的页面美观性与美感一般；页面布局合理，采用独立的CSS样式文件，能综合使用JavaScript编程技术实现一些的动态内容更新与表单验证、编写一些交互逻辑（如轮播图、折叠菜单）程序。

能阐述自己项目的实现过程和实现技术，基本能回答教师提问。

69.9%

至

60%

能规划核心功能，模块，完3个以上页面，各页面主题基本明确、内容健康；主页有logo图片、导航、图片等元素，页面元素基本合理，导航基本可以跳转到其他页面.能综合使用CSS样式，设计的页面美观性与美感一般；页面布局基本合理，采用独立的CSS样式文件。了解JavaScript编程技术，在教师指导或同学帮助下完成一些动态内容更新与表单验证。

能阐述自己项目的实现过程和部分实现技术，基本能回答教师提问。

59.9%至

不具备规划页面功能的能力，页面单一，主题不明确；页面元素不合理，错误链接，不完整，页面零乱，布局不合理，没采用DIV+CSS技术，不能使用JavaScript编程技术完成一些动态内容更新与表单验证。

不能清楚地阐述自己项目的实现过程，不能准确回答老师的提问。

3.实训总结报告：支撑目标3，共占总评分40%。对应目标的评分标准如下：

对应目标		目标3：能通过独立查阅相关文献资料，并在对文献资料进行综合分析后，理解课题任务。根据课题需求确定技术方案，提出比较合理的实施方案。能够撰写描述具体课题综合训练过程及呈现训练成果的报告。
考查点		实训总结报告格式是否规范，方案是否正确。	实训总结报告的内容对课题综合训练过程及呈现训练成果的报告阐述情况。
总评分占比		20%		20%
评分标准	100% 至 90%	能通过独立查阅相关文献资料，并在对文献资料进行综合分析后，充分理解课题任务。根据课题需求确定技术方案，提出合理的实施方案。报告格式规范。		能够撰写描述具体课题综合训练过程及呈现训练成果的报告。内容详尽，重点突出。
	89.9% 至 80%	能通过独立查阅相关文献资料，并在对文献资料进行综合分析后，理解课题任务。根据课题需求确定技术方案，提出合理的实施方案。报告格式较规范，图表清晰。		能够撰写描述具体课题综合训练过程及呈现训练成果的报告。内容完整，重点突出。
	79.9 至 70%	能通过独立查阅相关文献资料，并在对文献资料进行综合分析后，基本能理解课题任务。根据课题需求确定技术方案，提出合理的实施方案。报告格式基本规范，图表基本清晰。		能够撰写描述具体课题综合训练过程及呈现训练成果的报告。内容较详尽，
	69.9% 至 60%	能通过独立查阅相关文献资料，并在对文献资料进行综合分析后，基本能理解课题任务。根据课题需求确定技术方案，提出实施方案可行，但不是最佳。报告格式基本规范，图表基本清晰。		基本能够撰写描述具体课题综合训练过程及呈现训练成果的报告。内容基本完整，
	59.9%至 0	不具备独立查阅相关文献资料的能力，对课题任务理解不透彻。实施方案不合理。报告格式不规范，图表不清晰。		撰写报告内容不完整，没有完全体系训练过程和训练结果。

五、参考学习资料

推荐教材1：《HTML+CSS+JavaScript网页制作案例教程》，黑马程序员，人民邮电出版社.2021年,第2版， ISBN:9787115547392

推荐参考书1：《HTML5+CSS+JavaScript网站开发实用技术》，任永功等，人民邮电出版社.2016年第1版，ISBN：9787115422064

推荐参考书2：Web前端开发技术(HTML+CSS+JavaScript)（慕课版）刘何秀王林王建.人民邮电出版社.2019年9月，ISBN：9787115514004

推荐学习网站：极客学院http://www.jikexueyuan.com/course/

菜鸟教程：https://www.runoob.com/html/html-tutorial.html

W3SCHOOL：https://www.w3school.com.cn/

上一条返回列表

《Web编程基础实训（Fundamentals of Web Programming Practical Training）》教学大纲

（一）‌知识与能力目标‌

友情链接：