［摘要］ 传统的网页设计与制作课程教学存在许多弊端，已不能满足培养学生全新技能的要求。探讨通过依托世界技能大赛标准改革教材、开发教学资源，使用项目教学、微课教学、目标导向等方法与手段提升教学质量。
［关键词］ 世赛标准；网页设计与制作；教学改革
一、网页设计与制作传统课程教学存在的问题
（一）教学内容脱离实际
目前许多学校所使用的《网页设计与制作》教材出版的时间是四五年前的，甚至是十多年前的，教学内容太陈旧，已经跟不上时代的需要。教学目标的实现需要以教材为本，要培养学生与时俱进，教材需要更新，但是许多学校为了一时的便利，往往采用旧版材，课程内容选择随意，教学内容的选择没有考虑时代的发展、科技的进步，影响了学生培养的质量。
（二）教学手段和教学方法单一
传统课程教学的教学手段和教学方法单一，教师主要通过讲授法、练习法完成教学任务。学生参与教学活动的兴趣不高，导致课堂气氛沉闷，教学脱离实践，学生很难理解理论知识，产生畏学的思想，久而久之失去学习兴趣。
（三）课堂教学时空受限
传统的课堂最大特点是三个“固定”、三个“中心”和“三件套”。三个“固定”是指教室、时间和师生固定，三个“中心”是指以教室为中心、以教师为中心、以课本为中心，“三件套”指教师使用教材、黑板、粉笔来教学。这个特点存在的“弊端”是辅导时空限制，学生学习效果差，教师有心无力，“抓”不住学生。
二、依托世界技能大赛标准改革教材
2012 年以来我院多次组织师生参加世界技能大赛相关工作，2018 年我院承办了世界技能大赛网站设计与开发赛项广西选拔赛，并派教师参与网站设计与开发项目全国选拔赛的裁判工作。通过认真总结和反思，认识到世界技能大赛项目标准代表了世界技能人才的培养标准和方向，世界技能大赛是职业教育改革的导向标，作为职业院校教师，要打破传统教学理念，对接世赛标准，提高教师的专业技术技能水平，将世赛标准融入人才培养方案和专业课程教学改革中去，促进学生技术技能水平的提升。
（一）对世界技能大赛标准及行业企业需求进行调研
2020 年 1 月，我系选派专业教师到上海信息技术学校开展调研。上海信息技术学校是世界技能大赛“网站设计与开发”项目全国集训基地。通过调研教师了解到“网站设计与开发”赛项涉及的专业知识、技术技能、综合能力培养等方面内容。同年 3 月，专业组教师到与网站开发相关的企业调研，通过与行业企业专家深入交流学习了解至当前企业做网页所需的技术及常做的一些项目。通过对世赛标准及行业企业调研，根据本专业及师资的情况，专业组成员开发《网页设计与制作教程》教材由北京理工大学出版社出版。该教材使用项目教学法将“网站设计与开发”赛项的响应式单页设计、响应式页面重构两个部分所涉及的部分知识点及行业、企业的一些项目融合起来。学生通过学习掌握最新前沿知识及技能的同时融入企业实战项目，实现以“工作任务为导向”课程体系，为今后的实习及就业打下良好的基础。
（二）根据课程目标确定教学内容与教学项目
课程坚持以工作过程为导向，以能力为目标，以学生为主体，以实际工作岗位的项目为载体。它分为 12个学习项目，每个项目均由项目描述、项目目标、项目分析、知识引入、项目实施、项目总结、项目拓展 7 个环节组成，每个环节环环相扣。项目编排的原则是由易到难、循序渐进，遵循学生的认知规律，每个项目中含有若干个子任务，每个子任务是项目中新的知识点，学生轻松获取知识及技能，便于教学的实施。
（三）教材的特色
1.科学性。教材打破传统的以知识为结构的课程体系，力求建立基于真实工作过程的全新教学理念。体现“做中学，学中做”的理念，基于行动导向的教学观，以项目为引领，以任务为驱动的教学方式。
2.灵活性。教材每个项目的知识点，由多个子任务组成，教师可以根据实际课时数讲解子任务，每个项目及大部分子任务都配有二维码，师生通过手机扫描即可看到相关视频，学生可以在课前、课后自主完成学习。
3.先进性。教材使用的开发平台是 Visual StudioCode 编辑器，Visual Studio Code（简称 VS Code / VSC）是一款免费开源的现代化轻量级代码编辑器，支持几乎所有主流的开发语言。在传统的 CSS+DIV 网页布局基础上，添加 HTML 5的页眉、页脚、导航、文章内容等与结构相关的结构元素标签。增加了响应式页面的制作内容，响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用“大势所趋”来形容也不为过。目前世赛技能大赛网站设计与开发项目对响应式页面作为一项重要考核内容。
4.教材落实立德树人。项目中融入中华优秀传统文化如教材融入春节、清明节等我国传统的节日，同时还引入了一些歌颂道德品质的诗如《陋室铭》，加强爱国主义、集体主义、社会主义教育；教材引入“端午节由来与传说”将屈原爱国精神融入课堂。书中的项目 11 来源于企业真实的工作任务，项目 12 源于世界技能竞赛“网站设计与开发”的网页重构模块。同时本教材可以作为考取 1+X Web 前端开发（初级、中级）证书的参考教材，真正实现“岗课赛证”融通人才培养模式。
（四）教学资源的开发与建设
经过一年多的努力，专业组成员完成了 76 个子任务12 个教学项目教学视频的开发，完成 76 个子任务微课件的制作，完成 12 个项目的 12 份教学课件制作，同时完成了 12 个项目活页工单的开发，通过学习通平台将这些教学资源到平台上，方便教师及学生的学习，能有效提高学生的学习兴趣及教学质量。
三、教学方法与手段的创新
本课程的教学主要采用项目教学法，项目教学法是一种以学生为中心的教学方法，是指在一个真实或接近真实场景的学习任务中，学生相对独立地完成确定项目目标、项目分析、项目实施、项目总结、展示和评价、项目拓展的整个过程，整个项目教学通过课前、课中、课后来完成。课前教师将项目及子任务内容中的重点操作技巧制作成微课，借助网络平台成为共用资源，上传到网站，让学生课前上网观看自主学习，进行简单的预习和思考，这一满足学生热衷网络的特点，激发了学生的学习兴趣，突破了传统的教学模式，使课堂更加高效。课中将微课导入课程，微课其丰富多彩的视频画面容易吸引学生的注意力，使课程内容被迅速导入课堂。在简单、趣味的艺术形式表现形式下，学生能够轻松学习课堂教学的重点和难点，网页设计与制作课程项目内容较为繁琐，项目的代码长，如果按照以往的教学模式，往往会使学生学了后面，忘了前面。因此，在一些项目操作中，在内容较多时，教师将每一个重点、难点分割，并制作成微课，使学习较差的学生重复播放相应的微课，通过重复学习掌握学习难点，掌握完整的教学内容，并且有助于系统掌握知识。课后使用微课进行复习，对所学知识进行巩固。网页设计与制作课程子任务多，项目的内容难度大，学生难以将所有子任务中的重点内容系统地联系在一起，在课后教师布置项目拓展，学生在没有教师的指导下无法独立完成，更无法提高制作效果，因此制作积极性受挫。借助视频化微课，巩固学习知识，将知识进行重构，提高主动探究、深入学习的能力。本课程使用学习通网络平台将难以学习的程序代码，通过信息技术呈现给学生，学生可以在平台上观看教材中所有项目及大部分子任务的视频教学，增强学生运用网络资源自主学习的能力，满足学生的学习之需。同时网络资源包含教学课件、项目教学视频、子任务教学视频、活页工单等，大大提高了课程的学习效率。
四、课堂教学的改革与实践
（一）强化目标意识，以目标为导向
教学过程中让学生明白本项目的完成目标，学生根据自我已经掌握的知识、能力的薄弱环节及项目的目标来确定自己最终的目标。这种以目标为导向的教学方式能使学生学习具有更强的针对性及目标性。
（二）注重师生互动，活跃课堂
师生良好的互动会让整个课堂活起来，为此，我们在网页设计与制作中采用头脑风暴法、角色扮演法、演示法、练习法以及项目驱动法等方法开展教学。利用图片、实物、声音、图像和互联网络等元素制作多媒体课件，提高学生的学习兴趣和学习效果。在教学中教师要突出学生在教学活动中的主体地位，让他们自己发现问题、探索问题、讨论问题和解决问题。教师在课堂教学中充当“主导”的角色，引导学生参与其中。
（三）使用情境教学，创设真实情境
在项目教学中，首先要强调的就是情境创设，是指在教学过程中，教师有目的地引入或创设具有一定情绪色彩的、以形象为主体的生动具体的场景，以引起学生一定的态度体验，从而帮助学生理解教材，并使学生的心理机能得到发展。比如在讲解正航科技企业网制作时，让学生使用角色扮演法以企业员工的身份对企业网的制作提出要求。这种方式充分调动了学生学习的积极性，训练了学生的思维能力，收到了很好的教学效果。
（四）分层协作，追求“合作学习”
课堂中除了倡导学生通过“目标导向”和“情境教学”之外，重点让学生“合作学习”，按学生操作能力强弱把他们分组，鼓励操作能力强的学生能更好地进行知识拓展，并让这些学生帮助操作稍弱的学生，从而让学生全面完成对知识的掌握。
（五）注重教学技巧，提高学习效果
网页设计与制作这门课程的特点是“标签”和“属性”很多，且它们由英文组成，对于中职学生来说死记硬背学起来困难，这就要求学生一定要多动手，多敲代码，通过运行代码理解属性及其不同值所表现出来的效果，才能做到融会贯通。本门课程教学所用的是 VisualStudio Code 编辑器，教师在教学中教会学生使用一些快捷输入法，如输入“！”按“回车键”即可出现 HTML 5的基本结构，P*5 即完成五对<p></p>标签的输入等，这些快捷输入方法能加快学生编写代码的速度。
（六）使用项目拓展，实现知识迁移
每学完一个项目的时候，给学生布置一项本章的内容项目拓展。项目拓展中一般包括本章中的多个知识点和重点操作内容，有利于学生对新知识的接受和迁移，促使学生对其进行思考并进行实践操作，有利于学生形成自主思考、实践和创新的过程，在教学中收到较好的效果。
（七）帮助学生构建自主性学习
为促进学生的自主性学习，根据学生不同的心理特点和层次，设置各种课堂教学活动，满足学生的学习需要，激发他们的学习兴趣，调动他们的学习积极性，把“要我学”变成“我要学”。在构建自主学习的过程中，教师首先帮助学生制订学习目标，使用能调控自己的学习行为和策略，了解每一学习阶段的学习特点和规律，掌握有效的学习方法，从而学会自主学习。
（八）加强思政教育，实现立德树人
在网页设计与制作这门课程的项目教学过程中，融入了一些中华民族的传统节目，如“端午节由来与传说”作为图文排版的项目，通过本项目的学习学生能使用 HTML 5+CSS 3 对网页图文进行排版，同时加强了爱国主义教育。 在项目教学过程中引入《陋室铭》诗歌，要求学生使用<hr>标签对每行诗添加水平线，教师把安于陋室，高洁傲岸的节操和安贫乐道的生活乐趣，不慕名利、不与权贵同流合污的品德和精神追求教诲到每位学生，实现了立德树人。
五、课程的实施效果
本门课程实施于 2020 级计算机网络 1、2、3 班，通过一个学期的实施，学生完成的作品有了很大的变化，课程实施前学生只能完成单页的 PC 端网页，课程实施后学生能完成静态网站的开发，能完成单页响应 PC、手机、i Pad 端的网页效果，我们看到学生的技能水平有了很大的提高，同时该门课程通过多种教学方法与手段培养了学生的综合素质，让学生形成了发现问题、探索问题、解决问题的能力，大大提高了学生对网页设计与制作的兴趣。2021 年 12 月初，本系举行了 2022 年广西职业院校技能大赛的 Web 设计与开发项目的选拔赛，共30 多名学生踊跃报名参与该项目的选拔，也有些学生开始研究世界技能大赛网站设计与开发项目的题目，力争在下一届区内选拔赛中取得好的成绩。课程实施过程中还引入了世赛的评价标准，确保学生完成作品的质量。如“所有网页文字内容在页面中可以索引”“代码拥有良好的结构”“网页至少有两个以上互动效果”等。“路漫漫其修远兮，吾将上下而求索。”在对接世界技能大赛标准，提升教学质量对教学改革的探索，还有一段很长的路，我们需不断加强理论和技能的学习，将世界技能大赛的标准融入更多的课堂，为培养更多的技能型人才而努力。
参考文献：
［1］刘艳丽.高职计算机文化基础课程教学方法的改革与实践［J］.职业，2015（3）.
［2］曹频.以项目教学构建中职语文教学新模式的实践研究［J］.职业，2014（11）.
［3］许可芳.借助“微课”创建高效中职课堂的探索：以动画制作课程教学为例［J］.职业，2015（3）.
作者：曾娜 单位：广西工业技师学院