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

《《前端设计与开发》课程标准.docx》由会员分享，可在线阅读，更多相关《《前端设计与开发》课程标准.docx（13页珍藏版）》请在优知文库上搜索。

1、前端设计与开发课程标准课程代码7102Z1B03适用专业信息技术服务专业群适用学制3+2学制、五年一贯制、5+2贯通培养编制人审核人版本号202301一、课程名称前端设计与开发二、适用专业计算机网络技术专业、大数据技术应用专业、人工智能技术应用专业三、课程学时与学分72学时，4学分。四、课程性质本课程是信息技术服务专业群群平台课程，旨在培养学生具有前端设计与开发的实际能力和创新精神。该课程注重实践操作，贯彻“理论联系实际，知行合一”的教学理念。课程包含前端开发的相关知识和技术，学生将通过项目实践来掌握前端开发的基本原理、技能和方法。同时，本科课程还为计算机网络技术专业后续学习程序设计基础、渗透

2、测试等课程，大数据技术与应用专业后续学习互联网数据采集、数据可视化等课程，人工智能技术与应用专业后续学习数据分析与可视化、web框架技术应用等课程奠定基础。五、课程目标依据国家专业教学标准、1+X证书标准、行业企业职业标准以及国家思政教育的要求，通过本课程的学习，学生能完成Web前端开发的工作任务，达到以下具体目标：（一）素养目标1、培养学生的社会主义核心价值观、爱国主义情操。2、培养学生良好的职业道德和职业操守，增强学生的职业素养和专业素养；3、提高学生的综合素质和人文素养，增强学生的综合能力和社会责任感；4、培养学生的自学能力和创新意识，让学生能够不断适应和掌握前端技术的新变化;5、提高学

3、生的沟通能力和团队协作能力，培养学生在团队中合作、领导和协调的能力；6、具备前端开发项目的规范化和标准化意识，能够编写易于维护和扩展的代码；7、提高学生的审美和艺术素养，培养学生对前端设计的创造力和美感追求。（二）知识目标1 .掌握HTML的基本标签、属性和语法，了解HTML5新增特性，掌握创建语义化的页面结构的方法。2 .学习CSS的基本语法、基本属性和各种选择器的应用，理解盒模型的概念，并能使用浮动、定位、FIeXbOX等方式进行布局。3 .掌握基础JaVaSCriPt语法，掌握使用JaVaSCriPt进行基本的变量声明、赋值，掌握字符串、数值、数组、对象等数据类型的操作方法。熟悉控制流程

4、的语句、循环语句，了解函数的定义和调用，以及作用域和闭包的基本概念。4 .熟悉浏览器的基本工作原理，了解文档对象模型的基本概念。了解浏览器如何解析HTML、CSS和JavaScript代码，以及如何渲染页面。掌握DOM树的结构和基本操作，如访问、修改、添加和删除节点等。5 .学习如何使用基本的调试工具进行网页调试。了解如何使用浏览器内置的开发者工具进行元素查看、样式调整、JaVaSCriPt调试、网络请求分析等操作，提高开发效率。（三）能力目标1 .能够运用HTML和CSS实现常见的页面布局和样式设计。包括单列、多列、流式、响应式等布局方式，以及对文本、背景、边框、边距、内边距等样式的控制。2

5、 .能够使用基础的JaVaSCriPt实现表单验证、图片轮播、导航栏切换等用户交互功能，满足基本的用户体验需求。3 .能够进行基本的网页调试，定位并解决问题。利用浏览器提供的调试工具，快速识别和解决页面布局、样式、交互等方面的问题，提高开发效率。4 .能够运用媒体查询和流式布局等技术实现简单的响应式设计，使网页适应不同屏幕尺寸和分辨率的设备，在不同设备上保持良好的显示效果。5 .能够使用Bootstrap框架的组件、栅格系统实现常见的页面布局和样式设计。6 .能偶使用Bootstrap框架的JavaScript插件，实现常见的用户交互功能。六、课程内容与要求本课程以完成不同应用场景网页的开发任

6、务为载体，坚持立德树人根本要求，结合学生学习特点，遵循职业教育人才培养规律，落实课程思政要求，有机融入思想政治教育内容，紧密联系工作实际，突出应用性和实践性，注重学生职业能力和可持续发展能力的培养。合理设计：学习单元、能力点、学习内容与要求。本课程结合实际使用场景、知识点与技能点的覆盖范围确定学习模块内容，合理序化教学内容。学习单元一、二围绕电商平台前端页面开发情景展开，实现电商平台主页和注册页的设计与开发；学习单元三围绕移动端app主页开发情景展开，实现响应式布局，能够根据不同的屏幕尺寸进行适配。三个学习单元的学习难度由浅入深。表1课程内容与要求序号学习单元能力点学习内容与要求学习成果建议学

7、时1品优购网站页面布局L掌握HTML的基本标签、属性和语法，了解HTML5新增特性，能够创建具备一定语义化的页面结构。2 .学习CSS的基本语法、基本属性和各种选择器的应用，理解盒模型的概念，并能使用浮动、定位等方式进行布局。3 .熟悉浏览器的基本工作原理，了解文档对象模型的基本概念。了解浏览器如何解析HTML、CSS代码，以及如何渲染页面。4 .了解如何使用浏览器内置的开发者工具进行元素查看、样式调整等操作，能够运用基本的调试工具进行网页调试，提高开发1 .掌握HTML的基本标签、属性和语法，包括文本标签、超链接标签、图像标签、表格标签、表单标签等。2 .掌握CSS的基本语法、基本属性和各种

8、选择器的应用，理解盒模型的概念。3 .了解文档对象模型的基本概念和结构。4 .了解浏览器的基本工作原理，了解浏览器如何解析HTML、CSS代码，以及如何渲染页面。1 .课堂示例代码。2 .电商平台注册页面1个。3 .任务书1套。20效率。2品优购网站表单验证和用户交互功能实现1 .掌握JavaScript的基础语法和DOM操作技巧，能够实现网页交互效果。2 .能够使用JavaScript实现表单验证功能，对用户输入进行格式、长度、必填等方面进行验证，提高网页的安全性和稳定性。3 .能够熟练使用JavaScript实现常见的用户交互功能，包括图片轮播和导航栏切换等，能够将这些功能与HTML和CS

9、S结合起来实现良好的用户体验。4 .能够运用调试工具进行网页调试，快速识别和解决交互功能方面的问题，提高开发效率。1 .掌握JavaScript的基础语法和DOM操作技巧。2 .掌握表单验证的基本原理和实现方法。3 .掌握图片轮播和导航栏切换等常见的用户交互功能的实现方法。4 .掌握使用基本的调试工具进行网页调试、元素查看、样式调整、JaVaSeriPt调试、网络请求分析等操作方法。1.课堂示例代码。2.电商平台主页1个。3.任务书1套。203品优购网站移动端开发1 .熟悉Bootstrap框架的使用，能够快速创建基于Bootstrap的响应式网页。2 .掌握如何使用Bootstrap提供的组

10、件和样式，实现常见的页面布局和样式设计。3 .能够运用Bootstrap提供的响应式布局方式，使1. Bootstrap框架的基本概念、基础语法和使用方法，了解Bootstrap提供的组件、样式和插件。2. Bootstrap提供的栅格系统和响应式布局方式，使网页适应不同屏幕尺寸和1.课堂示例代码。2.手机电商APP主页1个。3.任务书1套。32网页适应不同屏幕尺寸和分辨率的设备，在不同设备上保持良好的显示效果。4.能够运用Bootstrap提供的JavaScript插件，实现网页的交互功能，如轮播、模态框等。分辨率的设备，在不同设备上保持良好的显示效果。3. Bootstrap提供的组件和样

11、式，实现常见的页面布局和样式设计。4. Bootstrap提供的JavaScript插件，实现网页的交互功能。七、课程实施（一）师资队伍1 .专任教师职业能力：具备优秀的专业课教学开展与组织能力，具有一定的设计思维能力，能够为学生提供技术上的解决方案，并且能够根据实际情况，正确结合使用流动布局，媒介查询及混合技术来实现响应式布局，能够以情境任务要求完成前端页面的制作。知识结构：了解前端工程师的各项职业岗位要求；熟悉HTML、CSS、JaVaSCript、Ajax、XML等Web技术，熟悉Web标准、W3C标准、Webkit技术，掌握响应式布局、移动端Web开发、前端性能优化等内容。资质：具备中

12、职学校专业课任教资格和企业实践经历。2 .兼职教师职业能力：企业优秀讲师或行业企业专家，具备有3到5年的Web开发相关行业从业经验，参与过多个Web项目规划与开发过程，具有较强的专业技能，具备良好的专业课教学开展与组织能力，具备优秀的Web开发、测试和调优的能力，能够以情境任务要求完成教学。知识结构：在行业领域中，深入了解前端开发工程师的各项职业岗位要求；在专业领域中，具备HTML、CSS、JavaScriptAjaxXML等Web技术、精通JaVaSCriPt框架的使用等深入的专业知识背景。资质：具备前端开发行业从业背景和企业工作经历。（二）实验实训条件1.校内实训基地根据不同的项目学习需要

13、，选择教室、校企合作实习实训基地、实训设备等进行教学。（1）实训场地：云计算实训室；（2）实训设备：服务器9台，存储设备1台，防火墙1台，三层交换机1台，二层交换机2台，台式计算机120台，满足云数据中心简单标准。3 .校外实训基地目前计算机网络技术有1个联想校外实训室,能够同时满足50名学生进行实习实训。能够满足学校教师、企业专家共同办公，满足专业人才学徒制人才培养要求，符合企业研发、生产要求。本校外实训基地具备如下条件：（1）联想组织机构健全，领导和工作（或技术）人员素质高，管理规范，在新一代信息技术领域发展前景好。（2）基于联想“端一边一云一网一智”技术框架下，其研究方向与经营的业务与本

14、专业对口，且联想属于世界五百强企业，社会形象好。（3）符合学生专业实习实训条件，并且能够满足学生顶岗实训一个月以上。（4）有相应的技术人员担任实训指导教师。（三）教学资源1.教材按照教材必须在政治上坚持四项基本原则，符合党和国家的方针和政策，能运用辩证唯物主义和历史唯物主义的观点阐述本课程的基本规律的原则选择教材。教材必须符合本课程教学大纲的要求，符合学生层次的实际，教材内容的阐述要循序渐进，富于启发，有利于对学生能力和素质的培养。充分考虑教材的变动与更新，保证教材内容有用、新鲜和实用。为保证教学质量，优先选择国家规划教材。Web前端开发技术（HTML5+CSS3+jQuery）主要介绍了HT

15、ML5、CSS3以及jQuery在Web前端开发中的应用，为主要教材，网页设计与制作项目驱动式教程中涉及了关于前端项目管理方面的内容是辅助教材，两本教材相辅相成有助于学生更好的提升实践能力，在这些教材的基础上可结合学习单元自主开发模块化教材，包括活页式工作页、学习页、评价表等，同时也可采用校企合作资源库课程资源包。表2教材配备表序号教材名称作者出版社出版时间是否为国规教材1Web前端开发技术(HTML5CSS3+jQuery)高莺，尤澜涛中国铁道出版社2017.09.01是2网页设计与制作项目驱动式教程刘晓洪，邓长春中国铁道出版社2021.08.01是2.图书文献配备以下三本参考图书都涵盖了前端设计与开发的相关知识，包括HTML5、CSS3和Bootstrap框架的使用。可用于学生业余学习，它们的主要作用是帮助学生深入了解前端设计和开发的原理和技术，从而能够开发出响应式、具有良好用户体验的网站和应用程序,提升实践能力，亦可用于专业教师教科研等工作的开展，方便师生查询、借