《Web前端综合实战》实训-课程标准

《Web程序设计与框架技术实训》课程标准1、课程信息2、课程性质2.1课程在专业中的地位《Web程序设计与框架技术实训》课程是软件技术专业（Java方向）最核心一门课程，也是整个Web体系的关键课程，是对软件技术专业所学课程的综合实践和锻炼的考核。

也是学生就业前项目实训的一次整体考验，在培养学生实践动手能力、项目开发能力、团队协作能力的一次综合考验。

2.2先修课程与技术《Web程序设计与框架技术》先修课程有：《Java程序设计语言》、《数据结构》、《计算机网络》和《统一建模语言UML》等课程。

《Web程序设计与框架技术》后续课程有：《数据库技术及应用B》、《JavaEE程序设计》、《NetBean工具》和《软件生命周期》等课程。

3、设计思路3.1 设计依据我校软件职业技术学院作为本校的软件人才培养单位，积极结合培训性教学方式和人才培养性模式走出一条新道路，在人才综合能力培养方面迈出了很大的一步。

学院始终本着“为了学生一切、一切为了学生、为了一切学生”的理念，以人为本、因材施教，树立以学生为本的教学观念，采用多种教学手培养学习能力、创新能力和自学能力。

采取以项目驱动的教学模式，培养应用型的人才，实现分层次教学、教考分离。

整合实训教学环节，提高学生动手和实践能力，加强校内实训基地和校外实训基地建设，为学生营造良好的实训氛围。

在实践教学中，以真实项目为主线，在老师的指导下进行专业课程综合运用；项目的开发过程中，以项目组为单位进行团队开发，提高学生的软件开发能力、协作能力和团队精神。

改革实验教学模式，充分利用资源。

加强素质教育，提供学生综合能力。

注重提高学生实践动手能力。

3.2 设计思路为了提高学生综合能力，本课程采用实训室和校外企业相结合的设计思路。

校内实训室主要是通过对应课程的多个项目的练习，校外企业是送学生到企业实训以及企业到学校指导学生实训等多元的结合方式。

4、课程设计4.1 课程目标1）知识目标●通过《Web程序设计与框架技术》课程的学习使学生知道这门学科的性质、地位和独立价值。

web前端开发技术实训大纲
Web前端开发技术实训大纲
一、实训目标
本实训的目标是培养学生掌握Web前端开发的核心技术，包括HTML、CSS、JavaScript等，并能够独立完成简单的Web页面设计和开发。

二、实训内容
1. HTML基础
HTML文档结构
常用标签及其属性
列表、表格、表单等常见元素的使用
2. CSS基础
CSS选择器
常用样式属性
盒模型、布局、浮动等概念
3. JavaScript基础
JavaScript语法规则
DOM操作、事件处理等概念
常见JavaScript效果实现，如轮播图、下拉菜单等
4. 前端框架与工具
Bootstrap等前端框架的使用
Git等版本控制工具的基本操作
5. Web性能优化与测试
页面加载速度优化方法
前端性能测试工具的使用，如Google PageSpeed Insights等6. 项目实战
完成一个简单的企业官网或个人博客的设计与开发
实战中注重代码规范、可维护性及用户体验等方面的实践经验积累三、实训安排
本实训共计8周，具体安排如下：
第1周：HTML基础（2天）
第2周：CSS基础（3天）
第3周：JavaScript基础（3天）
第4周：前端框架与工具（2天）
第5周：Web性能优化与测试（2天）
第6-7周：项目实战（5天）
第8周：项目答辩与总结（2天）
四、实训要求
1. 熟练掌握HTML、CSS、JavaScript的基本语法和常用技巧；
2. 熟练使用至少一种前端框架和工具；
3. 了解Web性能优化和测试的方法和工具；
4. 能够独立完成一个简单的Web项目；。

《Web前端开发》课程标准一、课程基本信息表 1课程信息表表 2课程标准开发团队名单1注1：指参与课程标准制定的主要成员，包括校外专家二、课程定位和课程设计（一）课程性质与作用本课程是计算机应用技术专业的职业核心技术模块课程之一，是基于工作过程系统化的课程，是一门实践性和应用性都很强的课程。

为计算机应用技术专业学生将来从事职场的web前端开发岗位的发展打下良好基础，并为该专业后续网站开发与管理的学习打下网页前端设计基础。

（二）课程基本理念本课程的设计“以能力为本位、以职业实践为主线、以项目引导，以就业为导向”，打破了传统的按照知识体系教授课程的模式，以学生日后在从事Web前端开发行业中所需的实际技能为目标，进行基于工作项目和工作任务的课程开发与设计，既保证满足从事网站前端开发所必须的专业知识、专业技能，又保持原有知识体系的完整性，既培养了学生的职业能力，同时也为学生的可持续发展奠定了基础。

（三）课程设计思路本课程是以“基于工作过程”为指导，通过对Web前端开发所涉及到的岗位群进行工作任务和职业能力分析，以项目引导，以就业为导向，以培养学生的职业技能为目标、以学生为主体、以项目为载体，将知识、理论和实践一体化的课程设计思路。

在宏观教学设计上突破以知识点的层次递进为体系的传统模式，而是将职业工作过程系统化，以工作过程为参照系，按照工作过程来序化知识，培养学生规范、高效率、高质量地应用能力，使学生既学习岗位知识又培养学生职业素质，锻炼学生的方法能力与社会能力。

每个项目的学习以“做”为中心，教和学都围绕着做，在做中学，在学中做，做到“教、学、做”一体化，达到理论与实践的统一，同时注重培养学生的自主学习能力和职业素养的提升。

本课程思政内容及单元的知识、技能按照相应的专项能力在实际职业工作中出现的频度、内容的难度和要求掌握的程度进行排序，如下所示：课程思政内容：1.信息社会责任；2. 树立正确的技能观；3. 软件工匠精神培养。

《Web前端开发项目实训》教学实施方案
一、课程安排
学时：18学时，9次课
课程性质：理论课
教学地点：网络运维实验室
教学时间：2017年12月15日起，周三7-8节、周五5-6节
授课班级：2015级信息管理与信息系统专业
二、教学安排
1、教学说明
（1）实训题目
共6个实训题目，每人选择1个题目，每组6人，独立完成。

每个项目都包含四个功能：静态网站、ajax读取数据、互联网服务调用、移动端适配。

（2）版本管理服务器
SVN服务器，为每个项目开设SVN项目库。

（3）作品发布服务器
Web服务器，为每个项目提供独立的Web托管服务，面向校内提供访问。

建设项目进度网站，包含学号、姓名、项目名称、统计信息，三个导航（SVN仓库、原型预览、项目作品）。

（4）数据接口服务器
数据接口服务器，针对6个项目题目各提供一组JSON格式的数据接口服务，提供带有授权性质的数据读写服务。

2、课程教学
表：教学计划一览表
3、课程考核
（1）考核分为三个部分：文档（设计、测试、总结）、项目成果（SVN、原型在线、成果在线）、查重（代码查重、文档查重、防作弊机制）。

（2）总成绩（100分）=文档*0.4+项目成果*0.6，查重不通过记0分。

（3）实训考核成绩作为本课程的期末考试成绩，实训成果作为课程设计成果。

WEB前端开发技术实验教学大纲
课程名称：WEB前端开发技术
课程编号：0809913121
课程总学时：48
实验学时数：48
课程总学分：3
实验学分：3
开设实验项目数：4
一、实验教学目的
Internet的应用已深入到各个领域，本课程重在网页中的程序设计和B/S结构管理系统的程序设计，为学生以后独立的进行Web编程打下一个良好的基础。

二、实验项目内容、基本要求与学时分配
注：1、实验类型：演示、验证、操作、综合、设计、研究。

2、实验要求：指必做、选做。

三、实验考核方式与标准
成绩考核主要依据实验完成情况及所要求完成的实验报告进行评定，要求实验内容独立正确的完成，实验报告内容正确详实。

实验评分应包括三个方面：
（1）实验预习回答提问占20%；
（2）实验操作能力及实验纪律占40%；
（3）实验报告占40%。

3.评分等级
评分成绩分优、良、中、及格和不及格五个等级。

优：90分以上
良：80-89分
中：70-79分
及格：60-69分
不及格：59分及以下
具体评定标准如下：
优秀：实验纪律、预习、操作技能很好，实验报告书写工整无原则错误；
良好：实验纪律、预习、操作技能较好，实验报告中原则错误不超过一个；中等：实验纪律、预习、操作技能一般，实验报告中原则错误不超过两个；及格：实验纪律、预习、操作技能较差，实验报告中原则错误不超过三个；不及格：实验中严重违章违纪，实验技能均较差，实验报告中数据严重错误。

四、实验教材与参考书。

《Web前端综合实战》实训课程标准一、课程性质与任务本课程是软件技术专业的一门专业实践教学模块课程，为期一周。

是在学生学习了《网页设计与制作技术（HTML+CSS+Javascript）》及《Web前端综合实践》课程以后，通过项目开发的实战训练，要求学生能掌握JavaScript语言的基本编程思想，并能熟练利用JavaScript和JQuery控制WEB页面各级元素，实现WEB前端的验证、动态展示等任务。

课程采用任务驱动，让学生在完成任务的基础上，进一步掌握动态网页设计的基本流程及方法。

二、课程教学目标1.知识目标能制作包含客户端验证、具有常见动态效果、界面美观大方的商业网站，但不包含任何服务器端脚本。

包含的知识点如下：（1） CSS3布局及美化；（2）会使用JavaScript美化网页；（3）会使用jQuery美化网页；（4）实现客户端表单校验。

2.能力目标（1）掌握在网页中添加CSS的方法。

掌握三种添加样式信息的方法，会使用CSS设置网页格式和列表的格式；（2）掌握在网页中嵌入图像的方法，掌握与嵌入图像相关标记的用法；（3）掌握与图像布局和位置相关的标记的概念和用法；（4）熟练掌握表格的使用方法，会用表格布局并设计网页；（5）掌握框架制作网页的方法，会使用框架设计网页；（6）掌握制作表单的方法，会利用表单建立交互式页面；（7）掌握JavaScript语言的语法；（8）掌握在HTML语言代码中嵌入JavaScript代码的方法，能看懂JavaScript特效网页源代码；（9）学会修改JavaScript代码，实现不同的特效网页效果；（10）学会使用JavaScript语言实现网页特效。

（11）会使用JavaScript+JQuery设置网页动画效果；（12）会使用JavaScript+JQuery设置网页验证效果；（13）会使用JavaScript+JQuery设置表单特效。

3.素质目标（1）培养学生的网页设计创意思维、艺术设计素质；（2）培养学生的团队协作精神和创新精神、交流与沟通能力；（3）培养学生科学研究、专业设计和撰写实训报告的基本技能；（4）主动学习的能力、分析问题的能力。

web前端开发技术实验与实践(第3版)储久良编著实训5
一、实训目标
通过本实训，学生将掌握Web前端开发的核心技术，包括HTML、CSS、JavaScript等，并能够运用这些技术进行实际的前端开发工作。

学生将通过实践操作，加深对前端开发技术的理解，提高解决实际问题的能力。

二、实训内容
1. HTML基础：学生将学习如何使用HTML标记语言创建基本的网页结构，包括标题、段落、列表、链接等元素。

2. CSS样式：学生将学习如何使用CSS样式表来美化网页，包括背景、颜色、字体、布局等属性的设置。

3. JavaScript编程：学生将学习如何使用JavaScript脚本语言为网页添加交互性，如表单验证、动态内容等。

4. 实战项目：学生将分组完成一个实际的前端开发项目，运用所学知识进行页面设计和功能实现。

三、实训步骤
1. 了解项目需求，制定计划。

2. 学习相关技术，掌握基本概念。

3. 完成个人任务，进行实践操作。

4. 分组讨论，分享经验，解决问题。

5. 完成项目，提交成果。

6. 进行项目总结和评价。

四、注意事项
1. 注意遵守软件开发规范和标准，编写清晰、简洁的代码。

2. 在实践过程中，要注重独立思考和解决问题的能力培养。

3. 积极参与小组讨论和分享，促进相互学习和进步。

4. 注意安全意识，不泄露个人信息和机密数据。

《Web前端综合实战》实训课程标准一、课程性质与任务本课程是软件技术专业的一门专业实践教学模块课程，为期一周。

是在学生学习了《网页设计与制作技术（HTML+CSS+Javascript）》及《Web前端综合实践》课程以后，通过项目开发的实战训练，要求学生能掌握JavaScript语言的基本编程思想，并能熟练利用JavaScript和JQuery控制WEB页面各级元素，实现WEB前端的验证、动态展示等任务。

课程采用任务驱动，让学生在完成任务的基础上，进一步掌握动态网页设计的基本流程及方法。

二、课程教学目标1.知识目标能制作包含客户端验证、具有常见动态效果、界面美观大方的商业网站，但不包含任何服务器端脚本。

包含的知识点如下：（1） CSS3布局及美化；（2）会使用JavaScript美化网页；（3）会使用jQuery美化网页；（4）实现客户端表单校验。

2.能力目标（1）掌握在网页中添加CSS的方法。

掌握三种添加样式信息的方法，会使用CSS设置网页格式和列表的格式；（2）掌握在网页中嵌入图像的方法，掌握与嵌入图像相关标记的用法；（3）掌握与图像布局和位置相关的标记的概念和用法；（4）熟练掌握表格的使用方法，会用表格布局并设计网页；（5）掌握框架制作网页的方法，会使用框架设计网页；（6）掌握制作表单的方法，会利用表单建立交互式页面；（7）掌握JavaScript语言的语法；（8）掌握在HTML语言代码中嵌入JavaScript代码的方法，能看懂JavaScript特效网页源代码；（9）学会修改JavaScript代码，实现不同的特效网页效果；（10）学会使用JavaScript语言实现网页特效。

（11）会使用JavaScript+JQuery设置网页动画效果；（12）会使用JavaScript+JQuery设置网页验证效果；（13）会使用JavaScript+JQuery设置表单特效。

3.素质目标（1）培养学生的网页设计创意思维、艺术设计素质；（2）培养学生的团队协作精神和创新精神、交流与沟通能力；（3）培养学生科学研究、专业设计和撰写实训报告的基本技能；（4）主动学习的能力、分析问题的能力。

《Web前端开发技术》课程标准一、课程基本信息二、课程定位《JavaScript》课程是计算机软件技术专业的一门重要的专业课，定位于WEB技术开发工作岗位。

它是WEB前端技术开发的必备课程，在整个课程体系中具有重要的作用。

本课程的前导课程：高级语言程序设计、数据结构、HTML5。

后续课程：动态网站开发、毕业设计等。

通过学习本课程的学习，使学生掌握JavaScript的基本知识与应用，能运用所学知识开发出企事业单位需要的各种形式网站（网上商店、论坛、新闻发布等）的特效。

强化学生项目开发能力（系统分析/设计，编程，测试等）。

培养学生应用动态网站技术进行网页特效开发的能力，并形成良好的编程习惯和团队合作精神；培养学生的自主学习和创新能力，为其成长为一名合格的WEB前端技术开发程序员奠定良好的基础。

三、课程能力标准要求（一）知识要求使学生掌握常用的网页设计工具，熟练运用多种网页设计技术，具备Web网页设计、制作及站点管理的基本知识和基本技能，学生能够独立制作中小型的网站。

1、掌握JavaScript语言的基本语法。

2、掌握JavaScript中的BOM对象操作。

3、掌握JavaScript操作文档对象模型。

4、掌握jQuery选择器。

5、掌握jQuery中的事件与动画特效。

6、掌握jQuery中的DOM操作。

7、掌握表单验证。

8、掌握jQuery中的Ajax。

（二）能力要求1、具有网站功能规划的能力。

2、具有网站布局的能力。

3、具有规范化、专业化的编码能力4、具有规范化、专业化的测试能力；熟悉项目实施过程，如：需求分析、系统设计、编码、测试、提交产品等；（三）素质要求形成一定的学习能力、沟通与团队的协作能力，形成良好的思考问题、分析问题和解决问题的能力，养成良好的职业素养。

遵守国家关于软件与信息技术的相关法律法规，形成关键性的软件开发与应用的能力。

1、自主、开放的学习能力2、诚实、守信、坚韧不拔的性格3、良好自我表现、人际沟通能力、良好的团队合作精神四、知识体系(思维导图、知识要点)见图1知识体系思维导图五、课程主要内容课程教学能力训练项目设计表见表1课程教学能力训练项目设计表图1知识体系思维导图表1课程教学能力训练项目设计表六、课程考核6.1考核方式本课程考核采取形成性考核和终结性考核两种方式进行，两部分的分数比例为：课程考核成绩=形成性考核成绩（60%）+终结性考核成绩（40%）6.1.1形成性考核6.1.1.1形成性考核种类及分数比例本课程形成性考核选择平时成绩和项目任务成绩。

《WEB前端开发技术实习》课程标准
一、目的和要求
通过本课程学习掌握VUE的知识体系，模板语法、组件、过渡动画、生命周期等基础内容。

掌握VUE基本概念、VUE实例、VUE模板语法、VUE生命周期、VUE组件及组件间通信、VUE过渡与动画；掌握VUEYLI脚手架、脚手架配置、APP路由、单页面APP创建、APP组件开发、VUEYLI组件间传参、VUEYLI插槽、组件切换过渡动画、编译打包处理。

培养学生web前端开发能力。

同时，通过本课程的学习，提高学生的操作技能，培养学生踏实认真、精益求精、创新的精神，培养良好的职业道德，为学生学习动态网站开发相关课程提供知识和技术支持。

通过项目的实现，让学生具备良好的综合素质和职业道德，能够吃苦耐劳、爱岗敬业、团结合作。

本课程要求在理论实践一体化教室完成，以实现“教、学、做”三位合一。

使用教材：《Vue.js前端开发实战》，中国工信出版集团，人民邮电出版社十三五规划教材，黑马程序员编著2020年出版。

参考书目：
1.《Vue.js从入门到项目实战》，清华大学出版社，刘汉伟，2019.04.01出版.。