课程思政浸润下“HTML5与CSS3网页设计”课程的教学研究与实践.pdf

2023年1 1 月计算机应用文摘第39 卷第2 2 期课程思政浸润下“HTML5与CSS3网页设计”课程的教学研究与实践杨静（江苏联合职业技术学院徐州财经分院，江苏徐州2 2 1 0 0 8）摘要：围绕立德树人根本任务将思政理念与专业课程充分结合，突出核心素养、必备品格和关键能力的培养等是目前职业教育教学改革的重要内容。文章以“HTML5与CSS3网页设计”课程为例，围绕教学内容、教学思路、教学实施、教学反思等方面，将Web前端开发技术与职业精神等思政元素进行有机融合，使思政教育在专业课程育人的各环节中更好地发挥引领作用，实现“三全育人”的目标。关键词：课程思政；三全育人；教学改革YANG Jing中图法分类号：G641Teaching research and practice of course“HTML5 and CSS3 Web designunder infiltration of curriculum ideology and politic(Xuzhou Finance and Economics Branch of Jiangsu United Vocational and Technical College,Xuzhou,Jiangsu 221oo8,China)Abstract:Focusing on the fundamental task of foster virtue through education,how to fully integrateideological and political concepts with professional courses,and highlight the cultivation of corecompetencies,essential qualities,and key abilities is an important content of current vocationaleducation teaching reform.Taking“HTML5 and CSS3 Web design as an example,this paper makespractical application from the aspects of teaching content,teaching ideas,teaching implementation,teaching reflection,etc.,and organically integrates the ideological and political elements such as thelearning of technical knowledge and skills of web front-end development and the cultivation ofprofessional spirit,so that ideological and political education can better play a leading role in allaspects of professional curriculum education,and achieve the goal of“three comprehensiveeducation.Key words:curriculum ideological and political education,three comprehensive education,teachingreform1引言相关文件提出，要以课程思政为抓手，牢牢把握教师队伍“主力军”、课程建设“主战场”和课堂教学“主渠道”，使各类课程与思政理论课同向同行1 基于此，一线专业课教师呕须思考如何将课程思政融人专业课程教学。作为软件技术专业的专业核心课之一，“HTML5与CSS3网页设计”课程是在“静态网页设计与制作”“网页美工”基础上开设的一门理实一体化课程,其任务是使学生理解 HTML 和 CSS 的基础理论知识,同时帮助他们掌握应用技能（如基本网页、页面布局、页面文献标识码：A效果等设计）,为后续的“Web应用程序开发”等课程及“1+X”Web前端开发（初级）职业技能评级等奠定基础。本文对“HTML5与CSS3网页设计”课程内容进行了梳理,并在此基础上重构了教学项目。其中,本文将学科体系内容与当下社会热点相结合并融人思政元素,从而整合设置了由易至难的网站项目：“致敬英雄”“献礼科创”“研学旅行”等。现以“献礼科创”网站为例，本文将从教学内容、教学思路、教学实施、教学反思等方面进行专业课程与思政元素的融合研究和实践。基金项目：江苏省徐州财经高等职业技术学校十四五第一期校级科学研究课题项目22教学内容设计将“HTML5与CSS3网页设计”课程原学科体系内容中第3至5 单元（内容分别为HTML5新增标签及属性、CSS3基础和盒子模型)整合为“献礼科创”网站，其三维教学目标如下。(1)知识目标：掌握HTML5中新增文档结构元素、文本格式化元素的使用方法；掌握HTML5中多媒体标签的使用方法；掌握CSS3中盒子模型的基本概念和相关属性；掌握 CSS3中新增字体文本属性、背景属性;掌握CSS3中新增属性选择器、关系选择器的用法。(2)能力目标：能使用HTML标签和HTML5新增标签制作静态页面；能使用CSS样式设计页面样式；能使用CSS新增背景、文本字体、盒模型属性美化页面。(3)素质目标：培养学生爱国精神与职业荣誉感；培养学生爱岗敬业、精益求精的劳动精神；培养学生良好的团队意识；遵循软件开发流程与规范，提高学生的代码编写质量；使学生养成实践创新、自主学习的良好习惯。3教学思路设计本文将“献礼科创”主题网站作为教学项目,明确课程思政教学目标,将学生德育教育与知识技能进行有机融合,采用“三段融通、思政导向、任务驱动”的教学模式。其中,具体教学按照项目开发流程展开,在培养学生的过程中传播爱国、发奋图强、积极向上、勇时间安排1.布置主题网站开发项目，分组进行需求分析2.搜集并整理科技发展大事件相关素材1.课前3.结合其他专业学生共同创作网站素材（手绘科技作品等）任务1:首页页面1.汇报分组预习情况2.网站整体规划：绘制网站整体框架图、首页页面原型图3.使用HTML5文档结构元素制作页面结构4.使用CSS3美化页面任务2：“启航”页面2.课时1.绘制页面原型图2.使用HTML5文档结构元素制作页面结构，掌握HTML5新增文档结构元素、文本格式化元素的使用方法3.使用CSS3盒模型设计页面样式任务3：“开天辟地创新路”页面1.绘制页面原型图2.制作页面结构3.使用CSS3设计页面样式计算机应用文摘往直前的“正能量”,着力提升学生知识和技能的转化能力；培养学生的前端开发能力和职业素养,重点培养学生求真务实、实践创新、精益求精的科学精神和踏实严谨、吃苦耐劳、追求卓越的优秀品质，使学生成长为心系社会并有时代担当的技术型人才 2 。4教学过程设计（1)教学策略。本文以学生为主体、教师为主导，使育人与教学一体,理论与实践一体,学习与工作过程一体；采用“项目教学法”，确定项目任务，制定实施计划,设计实施环节；将学生思政教育和知识技能进行有机融合,贯彻思政导向、任务驱动的教学模式 3C使思政元素贯穿“课前一课中一课后”，从而提升学生知识和技能的转化能力,培养其前端开发能力和职业素养,进而弘扬核心价值观及传播“正能量”，培养其科学精神和责任意识。(2)教学方法和手段。本文根据Web前端开发岗位所需的能力要求，将项目授课内容与思政教育相结合，以工作过程为主线，遵循“1+X”Web前端开发职业技能等级标准，通过任务的逐一实现将前端开发过程与知识精准融合 4。其中,本文灵活应用情境教学、项目教学、任务驱动、比较教学和分组讨论游戏化等教学方法，充分利用超星教学大数据平台，通过超星泛雅课程学习平台、多媒体课件、微课视频等教学资源，实现课上课下、线上线下的教学资源共享。（3）教学实施安排。教学实施安排的具体内容如表1 所列。表1 教学实施安排表教学内容安排爱国主义情怀：在素材搜集过程中激发学生的爱国主义情怀，在温故知新中感受科技强国的力量并增强民族自豪感行动力、执行力：通过汇报检测各组的任务执行情况思政目标：培养学生爱岗敬业、精益求精、专注创新的工匠精神，提升其行动力和执行力。团队精神：播放“刘建兵以工匠精神带出工匠团队”精心制作“工业之母”视频思政目标：培养学生团队沟通、协调、诚信的合作意识信息安全意识：使用网络资源时要注意保护知识产权和信息安全思政目标：培养学生遵守中国软件行业的基本公约、隐私信息的政策与规程等，增强其信息安全意识职业道德：教育学生在Web开发工作中要把道德放在首位思政目标：使学生遵守规章制度与开发保密制度，养成保护知识产权的职业道德素质2023年第2 2 期思政内容安排2023 年第 2 2 期(续表1)时间安排2.课时课后枯燥的专业知识技能与丰富的思政元素相结合，使课堂变得丰富而生动。该教学方法更能吸引学生，班级学习氛围较为浓厚,学习效果较往届明显提升。本课程学生成绩合格率为9 6%，其中32%为优秀，在课程思政公开课评比中得到校、系、督导和同行的认可。5教学反思(1)教学设计反思，思政切入点：本文将科技成果、爱国主义教育和科技创新教育融入专业课程的教学,在教授学生知识和技能的同时，复用图片、视频及学生的手绘作品等资源，在潜移默化中激发学生的科技报国使命担当,培养其精益求精的工匠精神。思政素材来源：本文的部分思政素材为各专业学生的原创作品，如“手绘科技”系列等优秀作品(2)教学效果反思。本文以立德树人为根本任务，并将“温故知心，科技强国”作为思政主题，借助信息化教学手段通过“三段融通、思政导向、任务驱动”的教学模式激发学生的爱国主义情怀和民族自豪感，有效地培养了学生的职业技能和职业素养，循序渐进地塑造了学生的终身学习和实践创新意识。同时,本文聚焦中国科技发展历程,使学生在学习中体味幸福生活的来之不易，激发计算机应用文摘教学内容安排任务4：“一张白纸绘新图”页面1.绘制页面原型图2.使用HTML5文档结构元素制作页面结构3.使用CSS3美化页面，掌握CSS3新增字体文本相关属性术发展动态，善于总结开发经验的学习意识和新增盒模型属性任务5：“伟大变革奠新基”页面1.绘制页面原型图2.使用HTML5文档结构元素制作页面结构3.能使用CSS3新增背景、文本字体、盒模型属性等美化页面任务6：“走向复兴谱新章”页面1.绘制页面原型图2.使用HTML5多媒体元素3.使用CSS3美化页面，掌握CSS3中新增属性选择器、关系选择器的用法项目拓展1.项目总结反思2.继续修改完善网站3.为网站增加一个内容页，以“少年强则国强”为主题向祖国告白4.完成课程平台“1+X理论检测3思政内容安排树立自信心：播放“洪家光从技校里的农村娃到大国工匠”视频思政目标：使学生树立专业自信，培养学生自觉跟踪前端开发技创新意识：强调工作中创新意识的重要性思政目标：培养学生的服务意识和创新意识爱国主义情怀和工匠精神：播放“我和我的祖国”视频片段，引出多媒体元素；在讲授标签属性和CSS时播放“为中国火箭焊接“心脏”的大国工匠高风林”视频，引申到工作中应严谨勤奋、精益求精思政目标：培养学生求真务实、严谨勤奋的工作态度和努力学习、报效祖国的决心爱国主义情怀：通过布置项目拓展任务和话题，继续激发学生的爱国主义情怀，增强民族自豪感思政目标：引导学生用奋进、创新、勤奋的方式表达自己的赤子之心和爱国之情其“为国争光”的学习热情,培养其爱国、爱科学的思想情感 5(3)改进措施反思在本文方法下,学生能够应用所学知识和技能完成网站页面的制作，但其网页设计艺术性有待提高。未来，我们还将进一步探索如何帮助学生提升审美能力。参考文献：1严交笋.高职院校专业课程思政的实现策略J.职业技术教育,2 0 1 8,39(35):6 9-7 1.2姜良琴.课程思政背景下高职中国优秀传统文化课程教学设计的研究一一以中国饮食文化课程为例 J.江西电力职业技术学院学报,2 0 2 2,35（1 2）：7 2-7 4.3朱晓丽，陈楠.课程思政改革在高校教学中的探索与实践一以建筑识图课程为例J.济源职业技术学院学报.2 0 2 2,2 1(4):2 6-32.4周雅静.高职计算机类课程思政教育的探索以C语言程序设计为例 J.教育现代化.2 0 1 9,6（42）：2 0 0-2 0 2.5陈荟洁,黄海菲.立德树人视域下高职院校“课程思政”融合发展模式探索 J.教育与职业，2 0 1 9（1 4）：8 8-9 1.作者简介：杨静（1 9 7 9 一），硕士，副教授，研究方向：职业教育、Web开发。