admin 管理员组文章数量: 1087135
2024年6月15日发(作者：arm嵌入式系统结构与编程第三版课后答案)
ISSN1009-3044
ComputerKnowledgeand
年
Technology
第17卷第7期(20213月)
电脑知识
与技术
Vol.17,No.
7March
2021
E-mail：*************.cn
Computer
http
KnowledgeandTechnology
电脑知识
与技术
：//
Tel：+86-551-6569
新工科背景下《Web前端开发技术》的PBL教学改革与实践
刘雅君
1
，袁婷
2
，谢国
3
，李爱民
1
，刘光明
1
，常婉伦
1
（1.西安理工大学计算机科学与工程学院，陕西西安710048；2.西安理工大学水利水电学院，陕西西安710048；3．西安理工大学自动化与信息工
程学院，陕西西安710048）
摘要：在新工科背景下，通过分析Web前端开发技术课程传统教学的弊端，提出PBL教学考核方案。本文以“网页页面布
局”章节为例，通过导入部分、知识讲解和编程实践三个课堂环节介绍了课程改革实践过程。最后展示了学生的优秀作品
及教学反思。
关键词：Web前端开发技术；PBL教学法；教学改革
中图分类号：TP393文献标识码：A
开放科学（资源服务）标识码（OSID）：
文章编号：1009-3044(2021)07-0127-02
2017年以来，国家对“新工科”建设的倡导，为计算机专业
教学改革提出了新的要求，特别是如《Web前端开发技术》之类
的工程专项能力培养类基础课程。新工科建设行动路线（“天
大行动”）提出了六个问题导向，其中“问技术发展改内容，更新
工程人才知识体系；问学生志趣变方法，创新工程教育方式与
手段”对当前《Web前端开发技术》课程改革指引的方向。
1Web前端开发技术课程传统教学的弊端
《Web前端开发技术》是我校电子与计算机工程专业的专
业必修课程，是专业培养计划中网页前台开发方向的工程专项
能力培养类基础课程。该课程一般安排在第四学期开设。该
课程的学习目标分为三个层次：首先专业目标方面，通过课程
的学习，让学生正确理解前台开发的相关概念，熟悉前台开发
的基本过程，掌握主流的前台开发技能，为网站后台开发课程
的学习奠定基础；其次能力目标方面，合理运用所学各种技术，
完成企事业单位各种形式网站的前台开发任务，体现良好的艺
术性和实用性；最后素养目标，具有良好的自主学习能力团队
协作能力、职业岗位竞争能力和创新能力。
通过对首都师范大学、北京理工大学及陕西高等院校调研
发现，86%本科院校的计算机学院均开设了前台网页开发相关
课程。然而，网页前端技术的革新速度较快，发展势头迅猛，现
有的教学模式已经不能使学生较好地掌握网页设计、开发和发
布的全过程。在传统教学中存在以下两方面的弊端：
1）知识体系更新不足
伴随5G时代的到来，网页前端技术经历了多种技术革新。
前端开发工程技能要求也越来越综合，不仅要求掌握多种语言
的软件开发技术，还对可用性、外观等非功能性技术也有明确
要求。然而，新型技术在现有知识体系更新不足。例如，HT⁃
ML5作为最新的HTML标准，已经被大部分浏览器支持，但是
现有教学中所占比重仍然较少。同时，CSS也晋级到第3版本。
该版本不仅减少开发成本与维护成本的同时，也提高了页面性
能。但是该版本在现有教材中介绍不足。最后也最重要的是，
很多教材和教学都鲜少涉及网页前端开发框架。
因此，如何根据网页前台开发技术的新发展、前台开发岗
位对人才培养的新要求引入教学过程和更新教学内容，是
《Web前端开发技术》课程改革的亟待解决的问题之一。
2）工程教育模式陈旧
就目前授课情况和学生的学习情况来看，该课程主要采用
课内理论教学环节和实践教学环节结合的模式。课内理论教
学环节为32~48学时，实验课时一般16~24学时。作为重要的
工程技能培养课程，现有重理论轻实践的教学模式难以满足学
生理解并掌握工程技能的需求。因此改革传统教学模式，形成
新的工程教育模式成为教学改革的重要方向。
2PBL教学法
PBL(problem-basedlearning)是一种以问题为基础的教学
方法，重点培养学生分析、解决问题的能力。该方法最早应用
于医学教育领域
[1]
。不同于传统以授课为基础的教学法，PBL
教学法以问题为导向，以学生为中心。通过采用小组讨论的形
式，学生围绕问题独立收集资料，发现问题、解决问题，培养学
生自主学习能力和创新能力的教学模式。
3教学改革及实践
为了更新Web前端开发技术知识体系和改革传统教学模
式，我们尝试针对《Web前端开发技术》课程进行PBL教学
改革。
首先，针对网络和一线公司进行调研，确认最新技术动向，
转化为教学内容。网络方面，我们爬取了主流IT招聘网站前台
开发相关岗位的技能要求，统计关键字，分析技术动向。针对
收稿日期：2020-09-23
基金项目：西安理工大学教学改革项目（xjy1841）
作者简介：刘雅君（1985—），女，陕西省西安市任，讲师，博士，研究方向为软件工程；袁婷，副教授，学士；谢国，教授，博士；李爱民，
讲师，博士；刘光明，讲师，博士；常婉伦，讲师，学士。
本栏目责任编辑：王力
计算机教学与教育信息化
127
ComputerKnowledgeandTechnology
电脑知识
与技术
第17卷第7期(2021年3月)
当地软件园，设计了有针对性的调查问卷进行地毯式调研。
此外，教学模式方面，《Web前台设计》课程以集中2周的理
实一体化形式全程在机房授课。教师进行引导和适度讲解后，
提出问题。根据分组，学生在机房讨论、完成并展示作品。通
过学生的主动学习，发现问题和解决问题的过程，从而达到提
升教学效果的目的。本节以“网页页面布局”章节为例，介绍改
革具体实践。该部分课程的技能目标主要包含三个方面：要求
学生熟悉各种常见的页面布局类型、掌握主流页面布局类型相
应的DIV结构和浮动定位法中CSS规则的编写方法。课程分
为三个环节：导入部分、知识讲解和编程实践。
3.1导入环节
解案例的制作。通过该题的制作，检验学生课程学习的成果。
第二题要求学生两两自由组队，模仿知名网站实现一个主页面
的布局设置。所模仿的网站由学生自选，教师仅进行简单推
荐。最后一个题目要求学生仍以小组形式完成一个自创网页
的页面布局。
根据“教学做考”相结合的教学原则，教师在学生实践过程
中，观察学生学习情况，以实现“培优扶差”，从而提高课堂教学
效果。学生根据自身情况选择当堂提交或邮件提交。一般根
据教学软件统计，对当堂提交的前5名同学口头表扬并将此次
平时成绩记“A+”，以示鼓励。
4课堂效果及教学反思
课程首先设置了5分钟的引导部分。针对前期课程中CSS
盒子模型基础，提问学生思考“padding属性与margin属性的异
同”。之后为了引入新课，展示2个典型网站示例。教师提出
“这2个网页有哪些相似的功能区域？”的问题，要求学生讨论。
过程中，借助机房教学软件、QQ群、雨课堂等工具请学生提交
答案，引导学生理解页面分块。最后，根据学生回答，总结概念
“盒子相关位置”和“空间位置”，引入知识点。
3.2知识讲解
图1学生优秀作品
通过这样的教学改革，学生的网页实操能力得到普遍的提
高。图1所示是两位学生的优秀作品。作为一线教师，我们不
仅需要探究适应行业发展的教学内容，而且在教学模式方面进
行深度改革实践，如何针对传统工程能力培养方式的弊端，提
出并实践符合新工科要求的改革方案，是每位高校教师时下需
要深入思考的问题。针对《Web前端开发技术》课程，我们尝试
了PBL教学改革实践，希望这些实践能给计算机教师以启发。
根据学情，教师进行适度的知识讲解。首先，展示主流网
站，介绍常见的网页布局结构，如国字型、T字型、综合框架型
等。然后，介绍三种定位方法，包含绝对位置定位、浮动定位和
空间定位，引导学生分析优缺点。此外，根据工程实践推荐使
用浮动定位法，现场演示实现一个基本的布局案例。演示中，
应采用基于“工作过程”的教学模式，展示布局实现过程。另
外，该案例应贴近学生生活，一般选取学校或学院主页进行简
化的实操。最后，进行知识点的总结，引导学生查阅网页布局
框架，特别是自适应的网页框架，扩展学生视野。
3.3编程实践
参考文献：
[1]陈英华,胡国栋,张琳,董为人.PBL教学法在我国基础医学教
育中的应用及存在问题[J].中国继续医学教育,2015,7(18):
7-8.
【通联编辑：王力】
教师在讲解结束后立即向学生发布3道具有层次化的实
践题目。其中必做题2道，选做题1道。第一题为模仿课堂讲
（上接第126页）
参考文献：
[1]刘君“互联网.+”背景下高校师生工作室教学模式探究——
以“计算机网络”课程为例[J].厦门城市职业学院学报,2020,
22(1):52-58.
[2]飞云倩.天津市中职教师信息化教学能力现状及其对策研
究[D].天津职业技术师范大学,2017(1):42-45.
[3]谢小莉.浅谈中职学校计算机教学改革的必要性[J].教育教
学论坛,2017(25):260-261.
[4]陈玲“互联网.+”背景下中职学校会计教学改革与实践研究
[J].福建广播电视大学学报,2017(5):23-27.
[5]范丽芳.中等职业学校计算机教学存在的问题及改进策略
[J].信息化建设,2015(12):38.
【通联编辑：李雅琪】
128
计算机教学与教育信息化
本栏目责任编辑：王力
版权声明：本文标题：新工科背景下《Web前端开发技术》的PBL教学改革与实践 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/p/1718415282a721766.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论