1、信息化与计算机教育本栏目责任编辑：王 力Computer Knowledge and Technology电脑知识与技术第19卷第18期(2023年6月）第19卷第18期(2023年6月）基于案例教学与项目驱动教学的网页设计课程教学改革实践探究胡娟，汤海林（广东白云学院 大数据与计算机学院，广东 广州 510400)摘要：针对传统网页设计课程教学中存在的一些问题，再结合教育部“四新”建设提出的要求，笔者基于案例教学与项目驱动教学制定了一系列的课程改革措施，分别从五个方面进行阐述，最后通过三个班级的学情分析来验证教学改革效果。关键词：网页设计；四新建设；案例教学；项目驱动教学中图分类号：G642
2、 文献标识码：A文章编号：1009-3044(2023)18-0129-03开放科学（资源服务）标识码(OSID)：0 引言网页设计是计算机科学与技术专业的必修课程，具有较强的实践性。教学内容包含HTML5基础知识、CSS3基础知识和JavaScript前端知识等。该课程采用案例教学+项目驱动教学方法，通过任务案例的导入、分析、实践与总结来讲解和强化知识点，引导学生在学中做、在做中学，把价值观的形成、基础知识的学习以及基本技能的培养和提高进行有机地结合，从而将学生培养成为社会所需的复合型高技能应用型人才1。1 教学现状和存在的问题1.1 照本宣科地教学没有经验的网页设计教师在讲授这门课程的时候
3、，通常是将市场上现有的网页设计书籍作为主教材，给学生演示的时候把书上的每一个例子都照抄一遍，但书中有部分标签在制作企业网站的时候并不实用。这种照本宣科、生搬硬套的教学方式，导致学生囫囵吞枣，不知所云，“夹生饭”问题层出不穷。1.2 学生的基础参差不齐大部分高校的网页设计课程都开设在大学一年级，很多学生在大一学习的都是基础课程，如高等数学、大学英语等，并没有接触到较多的计算机专业课程，所以大部分学生在学习这门课的时候对于计算机的基础知识并不了解，但是有一部分学生在读大学之前家里就有电脑，因为互联网的普及，这一部分学生很早就学会了上网，有的对网页制作很感兴趣，会花钱买书自学，或者上网看视频自学，这
4、一部分学生在学习本门课程之前，对于HTML5标签和CSS3的一些知识点其实已经掌握了。上课的时候老师如果还是只讲浅显的知识点，就会让基础好的学生吃不饱，但如果不讲这些最基本的知识点，那么基础薄弱的学生就有可能跟不上。1.3 考核评价体系单一考核评价体系单一，太注重期末考试，期末考试分数在形成性考核中所占比值过大。在布置期末大作业的时候，如果出同一道题目，很难杜绝有些学生进行抄袭，交上来的作业一模一样。为了杜绝这种抄袭现象，改革后重新制定了考核方案，新的考核方案能让每一位同学都独立思考，独立完成期末大作业。2 教学改革研究与实践针对上述存在的一些问题，笔者根据最近几年网页设计课程授课心得体会，作
5、出了如下的改进措施。2.1 教学内容的优化本门课程共48学时，理论知识讲解24学时，实践操作24学时，全部安排在实验室进行。笔者颠覆了完全按照书本章节进行教学的传统模式。本门课程并没有选择一本书作为主教材。因为教材编排的目的并不是为了直接服务于教学，教材更多的是承载学科知识体系。教材把完整的知识体系分散到了各个章节，而各个章节之间关联不大。现有的网页设计书籍中提到的大部分标签其实在做企业网站的时候是用不到的，学生只要学会一些常用的标签、样式、脚本，基本上就能完成企业网站的制作了。改革后的学习内容极大地激发了学生学习这门课程的兴趣，学生会迫不及待地想学习下一章节的内容。表1将改革前与改革后的课程
6、内容进行了对比，主要是把分散的知识点融入案例和项目中，不再单独讲解一个个标签，而是在综合应用中进行学习。2.2 案例教学法案例教学法起源于美国哈佛大学商学院，是一种收稿日期：2023-04-11基金项目：广东省高等教育学会“十四五”规划2021年度高等教育研究课题（编号：21GQN23)；2021年度广东省教育厅质量工程项目（编号：CXQX-JY202101)作者简介：胡娟(1983)，女，广东广州人，助教，硕士，研究方向为大数据，人工智能；汤海林(1980)，男，江西九江人，教授，硕士，研究方向为图像处理与识别。E-mail：http：/Tel：+86-551-65690963 656909
7、64ISSN 1009-3044Computer Knowledge and Technology 电脑知识与技术Vol.19,No.18,June 2023129DOI:10.14004/ki.ckt.2023.0897本栏目责任编辑：王 力信息化与计算机教育Computer Knowledge and Technology电脑知识与技术第19卷第18期(2023年6月）第19卷第18期(2023年6月）以案例为基础的教学方法(Case-based Teaching)。这些案例都是来自商业管理的真实情境或事件。在网页设计课程教学中，笔者将一些经典的案例引入课堂中，带领学生模仿真实的企业官网学
8、习网页设计制作，让学生提前了解企业网站的制作流程和规范，实现产学人才的无缝链接。另一方面，通过微信群等通信工具为学生在学习中碰到的实际问题进行解答，为课程提供了有力的技术支撑。案例教学法有利于学生学习和理解理论知识。表2列出了网页设计课程案例教学的例子。表2 网页设计案例教学展示知识点网页设计中色彩搭配原则及方法布局组成响应式设计用户界面(UI)和用户体验(UX)HTML5+CSS3+JavaScript综合运用案例说明案例1：给学生介绍世界上最著名的六种颜色及其背后的故事：克莱因蓝、勃艮第红、凡戴克棕、提香红、蒂芙尼蓝、波尔多红案例2：以搜狐网为例进行讲解。搜狐网1998年成立，是中国第一家
9、以风险投资资金建立的互联网公司。搜狐网的布局设计是门户网站的经典之作案例3：将全球著名科幻电影哈利 波特官方网站作为案例，讲解响应式设计知识案例4：以美国苹果公司为例，学习用户界面(UI)和用户体验(UX)设计。苹果采用的是客户体验升级模式，更简洁的设计、更友好的用户界面、更方便的使用场景、更高雅的外观和更舒适尊贵的持有感，构成了更好的用户体验(UX)案例5：以意大利著名奢侈品品牌阿玛尼ARMANI网站为例进行讲解，把HTML5+CSS3+JavaScript的知识进行综合灵活运用2.3 项目驱动教学法指导实践项目驱动教学法是以项目的形式进行教学，在老师的指导下，将一个相对独立的项目交由学生自
10、己处理2。项目驱动教学法能让学生有真实的体验，促进学生的参与性和创造性，增加学生的开发技能和学习的成就感。笔者把理论与实战相结合，将企业的真实网站作为项目融入课堂，选取了四个不同的实战项目向学生进行详细地讲解与分析。笔者对于重要的操作，撰写了实验操作手册，操作步骤详细，手册附加了操作截图，帮助学生轻松完成实战案例。项目式实验教学改革极大地激发了学生的学习兴趣与学习热情，计算机科学与技术专业的学生根据项目式实验内容亲自动手实践，加深了对网页设计的理解。表3列出了改革后新增加的实验项目及内容。表3 改革后实验项目及内容安排实验序号实验一实验二实验三实验四实验项目模仿Adobe网站模仿马爹利蓝带网站
11、模仿Dior网站模仿麦当劳点餐系统实验内容给学生演示如何创建一个类似Adobe公司的网站，然后让学生组队完成网站建设项目给学生演示如何创建一个类似马爹利蓝带干邑的网站，然后让学生组队完成网站建设项目给学生演示如何创建一个类似Dior的网站，然后让学生组队完成时尚商品网站建设项目给学生演示如何创建一个类似麦当劳点餐系统，然后让学生组队完成一个点餐系统项目2.4 课堂教学安排为了提升课堂教学质量，让学有余力的学生吃得饱，让跑得慢的学生跟得上。笔者重新调整了教学策略，精心设计了学生的学习任务，也研读了很多教育类书籍，试图寻找一种有效的教学途径改变课堂。图1展示了课堂提质增效的教学安排。2.4.1 课
12、前阶段为了解决上述学生基础参差不齐的问题，笔者将HTML5、CSS3和JavaScript的基础知识放到了超星学习通网页设计课程中，让基础薄弱的学生先预习掌握最基本的标签和用法。对于已经有一定网页设计理论基础的学生，可以跳过此环节，在课堂上直接听老师讲解案例和项目即可。改革后的课堂教学设计让基础好的学生不用重复学习，为他们节省了宝贵的学习时间，提高了学生的学习效率，同时也照顾到了基础薄弱的学生，让他们在课堂上学习案例的时候可以跟得上。2.4.2 课中阶段在课堂上，老师主要进行案例式教学。在案例中把网页设计需要学习的知识点进行讲解，对案例进行演示，让学生对这些经典的网站进行赏析。老师讲解完把主动
13、权交到学生手中，让学生做课堂练习，挑选出12名学生展示他们的练习作品，教师对学生的作品进行点评，最后做课堂总结。2.4.3 课后阶段基础薄弱的学生需要完成基础题和课后作业。基础好的学生需要完成附加题和课后作业。对于有一些基础但又不是很精通的学生，他们可以选择三种题都做，即基础题、课后作业和附加题，也可以选其中两种题完成作业。2.5 改革考核标准建立课程评价体系是教学活动的重要环节之一。经过对该门课程多个学期的教学经验总结，笔者针对这门课程制定了如下的形成性考核方案。该考核方案增加了学生平时分的比例，减少了期末考试分数所占的比例，打破了用一场考试来定义学生的水平，更加注重平时对于学生动手能力的培
14、养，这符合广东白改革前课程内容HTML概述HTML5标签及属性CSS3入门CSS3选择器CSS盒子模型元素的浮动与定位表单的应用HTML5音视频技术CSS3高级应用跨平台移动Web技术改革后课程内容经典网站赏析案例教学-1案例教学-2案例教学-3案例教学-4案例教学-5实验项目1实验项目2实验项目3实验项目4表1 改革前后课程教学内容对比130信息化与计算机教育本栏目责任编辑：王 力Computer Knowledge and Technology电脑知识与技术第19卷第18期(2023年6月）第19卷第18期(2023年6月）云学院应用型大学的教学目标。表4列出了课程形成性考核方案。表4 课
15、程形成性考核方案考核项目考 勤课前学习课堂表现课后作业期中考试小组汇报答辩期末考试权 重5%10%5%10%10%20%40%考核内容考察学生的出勤率学生课前完成线上学习任务学生是否认真听课，积极回答问题，参与讨论基础题、课后作业、附加题的完成率和正确率对18周的学习内容进行考核学生组队完成一个网站开卷完成期末大作业，单人单题2.5.1 课前学习的考核对于基础薄弱的学生需要完成课前学习任务，在超星学习通上教师可以看到学生完成的时间和完成的进度。对于基础好的学生，在上这门课之前就已经完成了自学的功课，所以可以跳过此环节直接得分。在这门课程开学的第一节课，笔者就进行了一场摸底考试，在有限的时间内完
16、成摸底测试并且得分在60分以上的学生，视为有一定的学习基础，其他学生就需要在超星学习通完成课前学习任务，才能获得相应的课前学习积分。2.5.2 小组汇报答辩考核安排学生自行组队，每个小组选一名组长，给自己的团队起一个响亮的名字，小组组长作为项目经理，安排3名网页设计师加一名前端工程师，完成一个网站或者项目。团队成员含组长不能超过5人。每次上台汇报或答辩的时候，可以由组长完成，也可以由其他成员汇报。这样安排主要是为了锻炼学生的组织能力、语言表达能力、网页设计能力、沟通协调能力和团队协作能力等，毕竟如今的社会已经不适合单打独斗去完成一件事情。从大一开始培养学生的软技能，可以增加学生日后在社会上的竞争力。2.5.3 期末考试考核期末考试虽然是开卷让学生完成一个大作业，但它与之前让学生组队通力合作完成一个网站不同。期末考试需要每一个学生独立思考，综合运用这个学期所学的知识，独立完成一个作品。为了防止学生抄袭其他同学的作品，笔者专门查询了国民经济行业信息，专门给每一个学生布置不同的行业网站作为期末考试题目，单人单题，这样就从根本上杜绝了抄袭的可能。这种出题方式对教师来说，工作量较大，但可以让学生
