《前端设计与开发》课程标准

《前端设计与开发》课程标准课程代码7102Z1B03适用专业信息技术服务专业群适用学制3+2学制、五年一贯制、5+2贯通培养编制人审核人版本号202301一、课程名称前端设计与开发二、适用专业计算机网络技术专业、大数据技术应用专业、人工智能技术应用专业三、课程学时与学分72学时，4学分。四、课程性质本课程是信息技术服务专业群群平台课程，旨在培养学生具有前端设计与开发的实际能力和创新精神。该课程注重实践操作，贯彻“理论联系实际，知行合一”的教学理念。课程包含前端开发的相关知识和技术，学生将通过项目实践来掌握前端开发的基本原理、技能和方法。同时，本科课程还为计算机网络技术专业后续学习《程序设计基础》、《渗透测试》等课程，大数据技术与应用专业后续学习《互联网数据采集》、《数据可视化》等课程，人工智能技术与应用专业后续学习《数据分析与可视化》、《web框架技术应用》等课程奠定基础。五、课程目标依据国家专业教学标准、1+X证书标准、行业企业职业标准以及国家思政教育的要求，通过本课程的学习，学生能完成web前端开发的工作任务，达到以下具体目标：（一）素养目标1、培养学生的社会主义核心价值观、爱国主义情操。2、培养学生良好的职业道德和职业操守，增强学生的职业素养和专业素养；3、提高学生的综合素质和人文素养，增强学生的综合能力和社会责任感；4、培养学生的自学能力和创新意识，让学生能够不断适应和掌握前端技术的新变化；5、提高学生的沟通能力和团队协作能力，培养学生在团队中合作、领导和协调的能力；6、具备前端开发项目的规范化和标准化意识，能够编写易于维护和扩展的代码；7、提高学生的审美和艺术素养，培养学生对前端设计的创造力和美感追求。（二）知识目标1.掌握HTML的基本标签、属性和语法，了解HTML5新增特性，掌握创建语义化的页面结构的方法。2.学习CSS的基本语法、基本属性和各种选择器的应用，理解盒模型的概念，并能使用浮动、定位、Flexbox等方式进行布局。3.掌握基础JavaScript语法，掌握使用JavaScript进行基本的变量声明、赋值，掌握字符串、数值、数组、对象等数据类型的操作方法。熟悉控制流程的语句、循环语句，了解函数的定义和调用，以及作用域和闭包的基本概念。4.熟悉浏览器的基本工作原理，了解文档对象模型的基本概念。了解浏览器如何解析HTML、CSS和JavaScript代码，以及如何渲染页面。掌握DOM树的结构和基本操作，如访问、修改、添加和删除节点等。5.学习如何使用基本的调试工具进行网页调试。了解如何使用浏览器内置的开发者工具进行元素查看、样式调整、JavaScript调试、网络请求分析等操作，提高开发效率。（三）能力目标1.能够运用HTML和CSS实现常见的页面布局和样式设计。包括单列、多列、流式、响应式等布局方式，以及对文本、背景、边框、边距、内边距等样式的控制。2.能够使用基础的JavaScript实现表单验证、图片轮播、导航栏切换等用户交互功能，满足基本的用户体验需求。3.能够进行基本的网页调试，定位并解决问题。利用浏览器提供的调试工具，快速识别和解决页面布局、样式、交互等方面的问题，提高开发效率。4.能够运用媒体查询和流式布局等技术实现简单的响应式设计，使网页适应不同屏幕尺寸和分辨率的设备，在不同设备上保持良好的显示效果。5.能够使用Bootstrap框架的组件、栅格系统实现常见的页面布局和样式设计。6.能偶使用Bootstrap框架的JavaScript插件，实现常见的用户交互功能。六、课程内容与要求本课程以完成不同应用场景网页的开发任务为载体，坚持立德树人根本要求，结合学生学习特点，遵循职业教育人才培养规律，落实课程思政要求，有机融入思想政治教育内容，紧密联系工作实际，突出应用性和实践性，注重学生职业能力和可持续发展能力的培养。合理设计：学习单元、能力点、学习内容与要求。本课程结合实际使用场景、知识点与技能点的覆盖范围确定学习模块内容，合理序化教学内容。学习单元一、二围绕电商平台前端页面开发情景展开，实现电商平台主页和注册页的设计与开发；学习单元三围绕移动端app主页开发情景展开，实现响应式布局，能够根据不同的屏幕尺寸进行适配。三个学习单元的学习难度由浅入深。表1课程内容与要求序号学习单元能力点学习内容与要求学习成果建议学时1品优购网站页面布局1.掌握HTML的基本标签、属性和语法，了解HTML5新增特性，能够创建具备一定语义化的页面结构。2.学习CSS的基本语法、基本属性和各种选择器的应用，理解盒模型的概念，并能使用浮动、定位等方式进行布局。3.熟悉浏览器的基本工作原理，了解文档对象模型的基本概念。了解浏览器如何解析HTML、CSS代码，以及如何渲染页面。4.了解如何使用浏览器内置的开发者工具进行元素查看、样式调整等操作，能够运用基本的调试工具进行网页调试，提高开发效率。1.掌握HTML的基本标签、属性和语法，包括文本标签、超链接标签、图像标签、表格标签、表单标签等。2.掌握CSS的基本语法、基本属性和各种选择器的应用，理解盒模型的概念。3.了解文档对象模型的基本概念和结构。4.了解浏览器的基本工作原理，了解浏览器如何解析HTML、CSS代码，以及如何渲染页面。1.课堂示例代码。2.电商平台注册页面1个。3.任务书1套。202品优购网站表单验证和用户交互功能实现1.掌握JavaScript的基础语法和DOM操作技巧，能够实现网页交互效果。2.能够使用JavaScript实现表单验证功能，对用户输入进行格式、长度、必填等方面进行验证，提高网页的安全性和稳定性。3.能够熟练使用JavaScript实现常见的用户交互功能，包括图片轮播和导航栏切换等，能够将这些功能与HTML和CSS结合起来实现良好的用户体验。4.能够运用调试工具进行网页调试，快速识别和解决交互功能方面的问题，提高开发效率。1.掌握JavaScript的基础语法和DOM操作技巧。2.掌握表单验证的基本原理和实现方法。3.掌握图片轮播和导航栏切换等常见的用户交互功能的实现方法。4.掌握使用基本的调试工具进行网页调试、元素查看、样式调整、JavaScript调试、网络请求分析等操作方法。1.课堂示例代码。2.电商平台主页1个。3.任务书1套。203品优购网站移动端开发1.熟悉Bootstrap框架的使用，能够快速创建基于Bootstrap的响应式网页。2.掌握如何使用Bootstrap提供的组件和样式，实现常见的页面布局和样式设计。3.能够运用Bootstrap提供的响应式布局方式，使网页适应不同屏幕尺寸和分辨率的设备，在不同设备上保持良好的显示效果。4.能够运用Bootstrap提供的JavaScript插件，实现网页的交互功能，如轮播、模态框等。1.Bootstrap框架的基本概念、基础语法和使用方法，了解Bootstrap提供的组件、样式和插件。2.Bootstrap提供的栅格系统和响应式布局方式，使网页适应不同屏幕尺寸和分辨率的设备，在不同设备上保持良好的显示效果。3.Bootstrap提供的组件和样式，实现常见的页面布局和样式设计。4.Bootstrap提供的JavaScript插件，实现网页的交互功能。1.课堂示例代码。2.手机电商APP主页1个。3.任务书1套。32七、课程实施（一）师资队伍1.专任教师职业能力：具备优秀的专业课教学开展与组织能力，具有一定的设计思维能力，能够为学生提供技术上的解决方案，并且能够根据实际情况，正确结合使用流动布局，媒介查询及混合技术来实现响应式布局，能够以情境任务要求完成前端页面的制作。知识结构：了解前端工程师的各项职业岗位要求；熟悉HTML、CSS、JavaScript、Ajax、XML等Web技术，熟悉Web标准、W3C标准、Webkit技术，掌握响应式布局、移动端Web开发、前端性能优化等内容。资质：具备中职学校专业课任教资格和企业实践经历。2.兼职教师职业能力：企业优秀讲师或行业企业专家，具备有3到5年的web开发相关行业从业经验，参与过多个web项目规划与开发过程，具有较强的专业技能，具备良好的专业课教学开展与组织能力，具备优秀的web开发、测试和调优的能力，能够以情境任务要求完成教学。知识结构：在行业领域中，深入了解前端开发工程师的各项职业岗位要求；在专业领域中，具备HTML、CSS、JavaScript、Ajax、XML等Web技术、精通JavaScript框架的使用等深入的专业知识背景。资质：具备前端开发行业从业背景和企业工作经历。（二）实验实训条件1.校内实训基地根据不同的项目学习需要，选择教室、校企合作实习实训基地、实训设备等进行教学。（1）实训场地：云计算实训室；（2）实训设备：服务器9台，存储设备1台，防火墙1台，三层交换机1台，二层交换机2台，台式计算机120台，满足云数据中心简单标准。2.校外实训基地目前计算机网络技术有1个联想校外实训室，能够同时满足50名学生进行实习实训。能够满足学校教师、企业专家共同办公，满足专业人才学徒制人才培养要求，符合企业研发、生产要求。本校外实训基地具备如下条件：（1）联想组织机构健全，领导和工作（或技术）人员素质高，管理规范，在新一代信息技术领域发展前景好。（2）基于联想“端—边—云—网—智”技术框架下，其研究方向与经营的业务与本专业对口，且联想属于世界五百强企业，社会形象好。（3）符合学生专业实习实训条件，并且能够满足学生顶岗实训一个月以上。（4）有相应的技术人员担任实训指导教师。（三）教学资源1.教材按照教材必须在政治上坚持四项基本原则，符合党和国家的方针和政策，能运用辩证唯物主义和历史唯物主义的观点阐述本课程的基本规律的原则选择教材。教材必须符合本课程教学大纲的要求，符合学生层次的实际，教材内容的阐述要循序渐进，富于启发，有利于对学生能力和素质的培养。充分考虑教材的变动与更新，保证教材内容有用、新鲜和实用。为保证教学质量，优先选择国家规划教材。《Web前端开发技术（HTML5+CSS3+jQuery）》主要介绍了HTML5、CSS3以及jQuery在Web前端开发中的应用，为主要教材，《网页设计与制作项目驱动式教程》中涉及了关于前端项目管理方面的内容是辅助教材，两本教材相辅相成有助于学生更好的提升实践能力，在这些教材的基础上可结合学习单元自主开发模块化教材，包括活页式工作页、学习页、评价表等，同时也可采用校企合作资源库课程资源包。表2教材配备表序号教材名称作者出版社出版时间是否为国规教材1Web前端开发技术（HTML5+CSS3+jQuery）高莺，尤澜涛中国铁道出版社2017.09.01是2网页设计与制作项目驱动式教程刘晓洪，邓长春中国铁道出版社2021.08.01是2.图书文献配备以下三本参考图书都涵盖了前端设计与开发的相关知识，包括HTML5、CSS3和Bootstrap框架的使用。可用于学生业余学习，它们的主要作用是帮助学生深入了解前端设计和开发的原理和技术，从而能够开发出响应式、具有良好用户体验的网站和应用程序，提升实践能力，亦可用于专业教师教科研等工作的开展，方便师生查询、借阅。表3图书文献配备表序号教材名称作者出版社出版时间1响应式Web开发项目教程HTML5+CSS3+Bootstrap人民邮电出版社2017年1月2Bootstrap前端开发（全案例微课版）清华大学出版社2021年8月3构建移动网站与APP：HTML5移动开发入门与实战清华大学出版社2017年1月3.数字教学资源配置自主开发资源：ppt、微课、试题库、案例等。（四）教学方法在教学过程中采用：讲演法、任务驱动法、项目教学法、案例分析法等教学方法，辅以餐垫法、工作站法、展览馆法等特色的教学组织方式，提升学生自主探究、合作学习的意识，培养良好的学习习惯；在每个学习情境中，学生进行自主探究学习与小组合作讨论学习，加强操作训练；以企业生产过程中实际的工作任务作为案例，在实践中引导学生学会分析问题、解决问题。（五）教学评价严格落实培养目标和培养规格要求，围绕计算机网络技术专业的人才培养目标，通过教师、企业、学生三个评价主体从核心素质、关键知识、综合能力、实践成果四个维度，通过课堂评价（占比20%）、项目评价（占比50%）、课程评价（占比30%）三种形式收录反映学生成长过程和发展水平的描述与实证材料，全面评价学生综合素质，客观反映学生的个性差异和特长，突出评价对学生全面发展的促进作用。1.课堂评价（20%）：通过自评、学生评价、老师评价三个主体侧重核心素质的评价。课堂评价根据表格中的各项及标准，注重评价学生在课堂上的参与度、完成工作页、常规项等，教师在课程中帮助学生更清晰的认识自己。学习笔记的检查20%：评价标准为四级式：A、B、C、D，要求完整、字迹工整、有重点、难点的标记。学习材料的保存15%：评价标准为四级式：A、B、C、D，要求完整、字迹工整、有错误工作页进行了正确的修改。教师的评价40%：学生出勤（10%）、展示、学习时的表现（10%）、口试（问答、专业对话等）（10%）、实操（10%）同学的评价（互评）15%：组内其他同学的评价（10%），其他小组的同学对他的评价（5%）自评10%：自己对自己的评价2.项目评价（50%）：阶段测评项目评价以小组为单位，进行综合素质评价及每一个项目作品成果评价，针对每一个项目，累计各个工作阶段实施评分、素质评分、项目成果评分，将评分数据由学习平台进行统计，最终项目结束后按照评分公布优秀项目组，学生素质通过多维能力雷达图展示，实现学生的增值性评价，学生养成职业认同感。其中《素质评分表》如下表所示，每个项目素质评价内容相同，各项目评价考核表详见附件1《项目评价考核明细表》，每个项目考核内容不同。表4素质评分表团队姓名评价项目考勤仪容仪表工位整洁有序对待工作任务的态度对待工作任务的整体把控能力自主学习能力团队沟通、协作能力创新能力素质成绩第一组3.课程评价（30%）：期末考试理论考试（30%）：试卷，从试题库中抽取100分的试题进行考核，试题类型有主观题：80%，填空题、选择题和判断题组成；客观题：20%，简答题、论述题。考核时间为：90分钟、闭卷。考核内容为：学习内容中涉及到的所有内容，重点为技术类要求掌握的知识以及其它能够用试卷考核的内容。项目测试（70%）：为学生提供4个企业商业案例项目，每个小组随机抽取一个工作项目，并且按照任务书的要求完成1个完整的工作项目。考核时间：6节课。前四节课为项目制作，最后两节课为项目结果说明展示。考核人员：企业员工和专业教师组成。考核内容：数据中心私有云平台管理，数据中心私有云平台部署，数据中心私有云平台资源分配，数据中心云主机派发。重在考核学生通过运用综合能力，做出的实践成果，详见附件2《私有云部署交付》课程综合评价表。

附件1：项目评价考核明细表1、考核项目1——电商平台注册页面制作考核项目1——电商平台注册页面制作采用过程性评价，考核评价表如下表所示：考核项目1——电商平台注册页面制作考核评价表班级：姓名：学号：考核项目1电商平台注册页面制作序号评价标准分值自我评价30%小组评价30%教师评价40%1实际效果与设计图一致202符合开发规范，代码具备一定语义化203注释清晰完整，代码具备很好的可读性204表单域创建成功，能够成果提交和重置数据205文字链接、图片链接生效，能够成功跳转到目标网站20合计1002、考核项目2——电商平台主页制作考核项目2——电商平台主页制作采用过程性