《HTML5+CSS3网页制作》课程教学方法的研究与探讨

摘要：在信息技术飞速发展的背景下，互联网已经成为人们沟通和获取信息的主要途径，网络上也产生了各种各样的网站。《HTML5+CSS3网页制作》作为计算机专业基础性教学课程，需要结合学生的实际需求对教学方法进行调整，使学生掌握更多的网页制作方法。基于此，本文结合《HTML5+CSS3网页制作》课程的教学现状，对该课程的具体教学方法进行研究和探讨，以提高学生的网页制作水平。

关键詞：《HTML5+CSS3网页制作》；课程教学；教学方法；实践措施

本文系2021年度广西职业教育教学改革研究重点项目“新一代信息技术背景下“项目专递、证赛提升、中高衔接”中职计算机WEB应用开发课程群开发与实践”（项目编号GXZZJG2021A060）阶段性研究成果之一。

黄美世（1995.12-），女，壮族，广西乐业，本科，助理讲师，研究方向：计算机应用与技术专业。

一、引言

计算机在生活中得到普及之后，网络对人们的生活越来越重要。人们在使用互联网的过程中，网页是接触最多的内容。在日常生活中用到的网页都是由多种技术结合在一起，如：文字、图画、视频等，同时也涉及了编程代码或者数据库等交互式的网页。《HTML5+CSS3网页制作》课程对学生的实践能力要求较高，并且要求学生要将理论与实践相结合，所以学生必须要在熟练掌握理论知识的基础上，掌握网页的设计原则，这样才能掌握相应的实践技能。

二、《HTML5+CSS3网页制作》教学的主要问题

首先，《HTML5+CSS3网页制作》的涉及的知识范围较广，课程的内容是一个整体的理论体系，除了包含基础的网络知识和平面设计知识以外，还涉及了动画设计和编程方面的内容。例如：学生在学习基础性的网络知识时，必须要了解互联网的基础知识和应用方法，能够熟练掌握利用FTP或者WEB将网页的内容上传至服务器。学生在学习平面设计方面的内容时，要掌握图片的处理方法，学会如何对网页图片的色彩进行搭配以及采用何种文字样式才能符合网页的整体风格。学生在学习动画设计方面的知识时，除了要学习Flash动画设计外，还要学会Gif 动态图片的制作方法。学生在学习编程方面的知识时，至少要对其中一种编程语言掌握扎实。由此可见，基础网页制作知识是学生深入学习网页制作的基石，同时也是提升《HTML5+CSS3网页制作》教学质量的重要依据。受到课时的限制，教师想要在规定的时间内将课程所涉及的内容全部讲完很不现实，如果教师要想将所有的教学内容全部利用课堂时间讲完，即便学生有能力了解，也只是了解表面内容，既不能将教学重点掌握扎实，又缺乏网页制作的实际经验[1]。

其次，《HTML5+CSS3网页制作》课程的教学方法非常单一。为了不影响正常的教学进度，教师一般都会向学生灌输理论知识，导致学生只能通过死记硬背掌握最简单的基础制作方法，如果没有教师的指导和帮助，很难自主完成网页设计工作。再加上学生的基础能力存在差异，有些学生只跟着教师的思路学习一遍就能掌握，有些学生却需要反复练习才能记住，有部分教师并没有根据学生的实际学情将教学内容进行分层，导致基础能力好的学生认为教学过于简单，而基础能力差的学生又跟不上教学进度，导致学生之间的差距越来越大。

最后，对于学生而言，网页制作是非常有吸引力的教学内容，很多学生表示出了对网页制作的学习兴趣，但是大部分的教材在分类的过程中基本上都是按照网页制作软件的功能，然后再结合各个章节的内容引导学生进行单项训练。单项训练是非常枯燥的学习内容，很多学生就是在这种枯燥的练习过程中慢慢降低了学习网页制作的积极性。另外，《HTML5+CSS3网页制作》课程的教学结果与市场需要之间存在差异，甚至出现脱节的情况，学生虽然掌握了理论知识，但是由于教师没有给学生提供实践机会，导致学生只会纸上谈兵，对未来的就业造成了严重的影响[2]。

三、《HTML5+CSS3网页制作》课程教学方法的实践措施

（一）对教学内容重新进行规划

学生在学习《HTML5+CSS3网页制作》课程的教学内容之前，必须要了解“网页”与“网站”之间的差距，了解HTML5语言的基本概念以及网页在制作过程中所涉及的工具，懂得网页和网站的基本制作方法后，还要明白并掌握教材中涉及的网络制作方法和设计流程，这样才能制作一个完整的网页。学生要在教师的指导下将这些教学内容进行系统性的编排，从而构建完善的基础知识体系。其次，《HTML5+CSS3网页制作》课程中涉及的网页布局制作是非常重要的基础内容，该部分内容的学习难度大，大部分都是关键性的教学内容，学生如果能够将这些内容掌握扎实，就能掌握网页布局的制作技巧，也能快速掌握网站的制作方法[3]。最后，网页美化制作方面的内容也非常重要。这个部分的知识点涉及了PS和Flash动画制作方面的内容。PS软件的主要作用是对各种网页制作素材加工和处理，从而完成基础性的网页制作。而Flash软件难度主要作用是能让学生制作出具有动态效果的网站。教师在开展这部分内容的教学活动时，可以让学生提前欣赏一些制作好的网站模板，让学生初步建立对网站制作程序和设计思路的了解，同时也能让学生了解一些网站色彩的调整方法。网页美化制作方面的教学重点就是为了让学生熟练掌握PS和Flash动画设计的基本操作方法，并将这种方法应用在网页制作中，如此学生的实践能力也能得到提升。

（二）在课堂上应用案例教学法

案例教学法是《HTML5+CSS3网页制作》课程中非常重要的教学方法之一，这种教学方法主要是通过案例的形式将教学内容进行深化，案例教学法在应用的过程中，学生必须要对相关的教学内容具备初步的认识和分析，能够自主辨别网页设计方法和设计流程是否正确，教师结合教学内容为学生准备一些相应的案例，促使学生能够自主结合案例对教学内容进行深入探索。

学生在探索的过程中，除了通过自主思考之外，也可以通过团队合作的方法共同进行讨论，既能培养学生的辨别能力和分析能力，还能培养学生合作意识和沟通能力。例如：在网页与HTML教学中，教师可以为学生展示一个网页案例，如图1所示。代码编写由HTML编写完成，其源代码如图2所示，以便于更好地帮助学生理解并掌握HTML的正确使用方法。

之后引导学生进行分组并在案例分析基础上进行实践操作，通过开展不同的案例教学，提高学生网页制作学习中的针对性，帮助学生掌握更多不同的网页制作思路。案例教学法在应用的过程中，教师必须要为学生做好配合工作，引导学生积极投入到自主探索中。整个过程都要尊重学生的主体地位，教师的任务则是为学生提供指导作用。应用案例教学法的主要目标是希望学生能够通过案例积累相应的网页制作经验，教学内容则是让学生针对某个具体案例进行分析，深入挖掘问题并制定相应的解决方法。对于学生而言，自主分析和解决问题只是案例教学法的其中一个环节，在这个过程中教师的作用就是为学生的分析工作提供相应的服务[4]。

（三）在课堂上应用分层教学法

电子商务专业和计算机专业都涉及了《HTML5+

CSS3网页制作》课程，由于这两个专业的侧重点不同，专业课程的教学内容也存在一定的差异，所以学生的基础能力也存在较大差距。计算机专业的学生在学习《HTML5+CSS3网页制作》课程之前，就已经接触过网络知识和C语言课程方面的教学内容，对编程方面的知识也有一定的积累。在学习《HTML5+CSS3网页制作》课程的同时也会学习PS和Flash方面的知识，对于图画的处理技术和动态图画的制作方法了解得比较全面。但是电子商务专业的学生在学习《HTML5+CSS3网页制作》课程的知识时，只接触过一点关于计算机基础知识和电商商务方面的网络知识，这也就意味着电子商务专业的学生在基础能力上与计算机专业学生存在较大的差距[5]。另外，即便是同一个专业的学生，可能因为接受能力存在差距，对《HTML5+CSS3网页制作》课程知识点的掌握情况也会出现一定差距。因此，为了能够使各个层次的学生都能在原有的基础上有所提升，可以将分层教学法应用在教学过程中。如：教师可以将教学难度分为高级、中级和初级这三个层次，按照学生的基础能力将学生进行分层，对于不同层次的学生制定不同的学习目标，这样不仅能够让学生掌握知识，还能增强学生的自信心。①对于基础能力较差的学生而言，必须要熟练掌握网页设计软件的使用方法，能够自主设计简单的网页，还能利用代码为网页增加特效，丰富网页的功能，使网页看起来更加美观，学生还要利用系统中自带的画图工具对图片进行处理和加工。②对于基础能力一般的学生而言，除了要掌握网页设计软件的使用方法、对图片进行独立处理以外，还要自主设计动画网页，能够结合不同的要求设计出多种动态网站。对于基础能力一般的学生而言，对他们是否具备编程能力并没有特殊要求，但是必须要能够掌握编程的代码以及能将其应用在网页设计中。③对于基础能力较强的学生而言，除了具備以上这些能力之外，还要具备网站的规划能力和对网站进行管理，学生至少要掌握两门编程语言，能够自主设计制作具备数据库的动态网页核对网站。

（四）在课堂上应用项目教学法

项目教学法主要是由教师和学生共同制定一个项目主题，完成项目的过程就是整个教学活动的过程。项目教学法在应用的过程中，主要是围绕着项目，在整个过程中要充分尊重学生的主体地位，教师的作用则是为学生进行指导。教师在开展《HTML5+CSS3网页制作》课程教学时，要结合教学内容为学生创建相应的教学情境，引导学生结合自己的已知经验和专业知识，自主完成项目。在实践过程中，教师可以将不同的教学内容设计成多个项目，然后再按照项目内容将学生进行分组，每个项目组的学生要保证实力相当、能力互补，确保每个小组的学生通过合作完成项目的过程中能够实现相互帮助和相互学习，通过取长补短共同完成项目。小组的学生通过合力共同完成项目之后，不仅能够增强学生的专业技能，锻炼学生解决问题的实际能力，在培养学生价值观和合作意识方面也起到了非常重要的作用。

（五）在课堂上应用任务驱动教学法

任务驱动教学法是在建构主义的基础上为学生制定的一种任务驱动教学模式，整个教学过程都要以一个任务为中心内容，教师将教学重点全部融入任务当中，引导学生通过完成任务对教学重点进行深化。学生在完成任务的过程中，能充分发挥自身的主观能动性，对培养自身的探索能力和开拓精神有着非常重要的作用。

例如，教师在开展《HTML5+CSS3网页制作》课程的教学时，可以为学生制定一个设计网站的任务，网页的设计要求包含了自动调整网页的框架、对网页元素做出精准定位、对网页的布局进行规划设计、自主处理各项信息、通过插入图片的形式对网页进行美化处理、增加链接等内容。教师在设计该任务的过程中，将该项任务划分成为多个具有潜在联系的小任务，并引导学生按照步骤完成任务，从而实现教学目标[6]。

（六）对课堂教学的考核方法和评价方法进行调整

由于《HTML5+CSS3网页制作》课程对学生的实践能力有一定的要求，因此该课程的考核和评价都要围绕着学生的网页设计能力和创新意识。虽然期末考试成绩能够反映学生对基础知识的掌握情况，但是这种评价方式并不全面，对学生的能力和表现评估也不够准确。同时，学校在对学生进行评价时，也通常将考试成绩作为主要参考依据，而将学生的出勤和整个学期的表现作为辅助参考。因此，教师需要对考核和评价方法进行调整。例如，可以通过对学生完成网站设计的过程进行评价。在这个过程中规定完成时间，要求学生自主搜集相关材料，网页的布局是否合理、网页内容的丰富性都可作为评价依据。与其他课程不同，《HTML5+CSS3网页制作》课程并不适用于传统的评价方式，因为学期末的理论性考试只能反映学生部分情况。该课程的教学目标是提高学生的实践能力和操作能力，所以必须根据学生所设计出来的作品来评估其对专业知识的掌握情况。因此，教师在对学生进行考核和评价的过程中，可以将学生按照个人或者小组的形式进行考核，考核的内容是让学生自主选择一个网页设计主题，通过网页的页面制作是否能够吸引人，色彩搭配是否合理对学生的真实情况做出准确的判断。因此，教师要积极对考核方法和评价方法进行调整，将这种新颖的考核模式应用在评价中，不仅能够培养学生的自主能力和合作意识，还能提高学生的审美能力和实践能力。

四、结束语

总而言之，学生之所以学习《HTML5+CSS3网页制作》课程，最主要的目的是能够在网络中占据属于自己的领地，能够将自己设计和制作的网页上传至互联网，让更多的人欣赏自己设计的作品对学生来说是一件无上荣耀的事情。但信息技术的发展速度飞快，网页制作的工具也在不断更新，为了培养出更加符合相关领域需求的综合型网络技术人才，《HTML5+CSS3网页制作》课程教师必须要不断对教学内容进行调整与创新，将多元化的教学方法应用到实践当中，调动学生学习网页制作的热情，提高《HTML5+CSS3网页制作》课程的教学效果，培养学生开发和设计网站的能力，帮助学生毕业之后能顺利成为企业的网站工程师，并快速适应工作岗位。

作者单位：黄美世 广西南宁市第六职业技术学校

参  考  文  献

[1]邹洪侠，任莹莹.网站制作类课程教学内容整合探索[J].产业与科技论坛，2018，17（18）：168-169.

[2]谢冠怀. 立足基础 企业标准 接轨世界——论世界技能大赛网站设计（Web Design）項目成果转化暨《HTML5+CSS3网页制作》一体化课程改革[C]/中国职协2016年度优秀科研成果获奖论文集（学校一等奖），2016：1247-1255.

[3]万开成.关于《网站制作》课程教学的新探索[J].考试周刊，2013（83）：116-117.

[4]曹晓丽，孙玉敏.《网页设计与制作》课程教学设计[J].教育教学论坛，2012（S5）：206-207.

[5]罗静.网页设计课程教学改革的思考[J].计算机光盘软件与应用，2012（11）：241-242.

[6]孙晓娟.浅谈项目教学方法在《网站制作》教学中的实现[J].计算机光盘软件与应用，2012（02）：241+238.

[7]李广莉.基于移动平台的网页制作技术课程教学、研究与实践[J].河北农机，2021（04）：84-85.

[8]李桂春，吴振华.基于创客教育理念下中职计算机网络技术专业“网页制作”课程的教学研究[J].科技与创新，2020（19）：80-81.

[9]陶俊.实践活动在网页制作教学中的应用研究[J].学周刊，2019（16）：25.

[10]种子儒.项目教学法在网页制作教学中的应用[J].职业，2018（04）：72-73.

[11]薛辉.基于理实一体化的《网页制作》课程教学模式研究[J].电脑与电信，2017（04）：11-13.