高职软件技术专业网页布局课程教学改革研究

翟莲秋

摘 要：网页布局是网站开发方向的主要基础，文章结合我们教学改革实践，首先对软件技术专业学生进行了学情分析，然后分析与阐述了课程存在的问题，最后提出了具体的改进方案及措施。通过不断的教学实践和研究改革，有效提高学生的学习兴趣，达到提升学生实践能力和社会适应能力的职业培养要求。

关键词：高职;软件技术;网页布局;教学改革

根據高职软件技术专业人才培养方案，网站开发方向中Web前端工程师是核心岗位之一，要求学生必须掌握基本的Web前端开发技术、网站性能优化，学会运用各种工具进行辅助开发，并且熟悉网站后台开发和应用的能力。网页布局课程（HTML+CSS+DIV）是软件技术专业必修课程。

按照Web前端开发技术工作岗位对知识和能力的要求，本课程以HTML5和CSS3前端开发技术为主线进行课程设计，作为WEB前端开发技术的入门基础，课程设计最重要、最难的地方就是将一些非常复杂、难以理解的思想和问题简单化，让学生能够轻松理解并快速掌握Web开发和设计的精髓。

一、学情分析

学生思维活跃，乐于沟通，喜欢模仿和动手实践，但学习韧劲不足，缺乏坚持不懈的学习态度，团队合作意识薄弱;

学生上课纪律整体很好，但课前课后的学习主动性差;

学生会做不会说，作品优秀、闪光点多，但学生不能完美介绍出作品的优势;

学生经过课程学习已经掌握了HTML5网页内容的编辑，掌握了使用CSS3进行页面元素的布局与排版，并且能够对网页页面进行总体的控制，不过多数学生对网页设计的岗位认知还比较模糊。

二、软件技术专业已开设的网页布局课程存在的问题

（一）课程教学内容过多、课时过少

课程内容包括HMTL、CSS、JavaScript三部分，以HMTL为基础，结合DIV布局和CSS样式，实现网站前台和后台页面的布局，JavaScript编程主要实现实时的、动态的、可交互性的网页功能。随着WEB标准的升级，HTML5和CSS3应运而生，为更好更快适应市场需求，在新的课程中将加入HTML5和CSS3部分的知识。但这也造成了知识点多，课时少、学生实践练习少，对知识的掌握不彻底，对相关知识的整体认识不够。另外，JavaScript编程与HTML、CSS在一学期讲，融合得也不是很好。

（二）教学方法不够合理

课程采用“任务驱动”教学方法，每个教学任务都是独立的网页页面，学生对知识点的掌握较好，但只侧重对单个页面的认识，对网站的整体建设缺乏系统的了解。

（三）课程设置没有考虑专业体系的连贯性

软件专业网站开发方向的每门科程在设置学习任务或项目时过于狭隘，只考虑了单门课程知识点的学习和掌握，没有考虑整个专业课程体系中知识的连贯性。学生对每门知识和技能的掌握较好，但走向工作岗位后，不能快速有效地将各门学科有机的结合。

（四）缺少现代化教学辅助手段

学生缺少主动学习意识，学习韧劲不足，常常容易自我放弃。而教师缺少课后对学生的督促和考察的手段。

三、课程教学改革方案

针对以上对学生及课程的分析，提出以下改革方案：

（1）在内容上进行调整，新的培养方案中将JavaScript从《网页布局》中分离出来，将JavaScript与JQuery结合成《JavaScript+jQuery前端开发技术》，而原来的《网页布局》主要侧重网页页面的综合布局，同时加大了实训学时。随着网络技术的发展，JavaScript语言越来越受欢迎，是目前互联网上最流行的脚本语言，JavaScript被广泛应用于网页特效和网页表单验证等方面，而JQuery是一套轻量级的JavaScript脚本库，实现了JavaScript代码和HTML代码的分离，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发AJAX的操作。所以《JavaScript+jQuery前端开发技术》将复杂的东西封装成方法，使学生学习JavaScript的难度降低。

（2）新的课程标准中课程以“项目+任务”规划所有教学内容，通过项目将知识点串联起来，学完一个项目的内容就能制作一个完整的网站，极大地激发了学生的学习兴趣和学习热情。将一个项目分解成多个子任务，完成子任务的实际操作过程就是知识的学习过程，让学生掌握项目中的知识点和技能点。其教学流程为“①布置任务→②任务分析→③知识讲解与操作示范→④任务实施→⑤任务展示点评→⑥归纳总结”六个环节，在内容的选择、结构的安排上符合初学者的认识习惯。同时本课程项目丰富，涉及电影、摄影、网上花店、网络学习、商品销售等多个方向，有助于学生掌握不同网站的设计风格与制作技巧。

课程共分为5个项目，结合HTML5、CSS3、DIV等Web前端主流技术的基础知识及应用，具体介绍如下：

项目1“国际电影节网站”介绍了Web基本概念、HTML5语法、HTML5标记、HTML5页面元素及属性，要求学生掌握HTML5文档的基本结构，熟练运用HTML5页面元素标记及属性，为后续学习打下基础。

项目2“网上花店”主要介绍CSS3样式表引用、CSS3选择器，要求学生能够熟练使用CSS3样式控制页面中的元素的外观，熟练使用CSS3选择器选择页面元素。

项目3“摄影网站”主要介绍CSS5盒子模型相关属性、背景属性、浮动和定位属性、表单属性及CSS3控制表单样式，要求学生熟练运用盒子模型相关属性、浮动和定位属性控制网页中元素的布局，并熟练运用表单及控件的相关属性来组织页面元素。

项目4“DIV CSS初学者网站”主要介绍模板的生成与保存、可编辑区域的定义和修改、库项目的创建和更新，要求学生熟练地修改网页模板及其属性，并同步更新该模板生成的网页。

项目5“商品销售网站”结合前面所学的知识，带领学生开发一个具有首页、产品浏览、在线留言页面的网站，以促进学生更好地掌握网站开发和制作的流程。

（3）针对整个专业的课程连贯性，在新的培养方案中，软件专业网站开发方向所有专业课程的最后的综合项目均为“商品销售网站”。在《网页美工》中进行网站效果图的制作，在《网页布局》中依据效果图进行前台和后台页面的布局，在《Java Web程序设计》、《软件框架技术》中进行数据库的连接及后台管理编程，在最后一学期末的实训周再把这几门课所有内容进行整合成一个完整的网站。

（4）建设课程开放平台。结合学校专业建设与发展需要，决定建设网页布局在线开放课程，制定课程的整体设计、课程标准、考核方案、教学计划、教学课件、教学视频、实训任务、技能题库、单元测验等教学资源上传到超星在线开放平台，学生可在课前通过观看教学课件、教学视频进行预习自学，上课时通过教师的系统讲解和示范操作，进行知识的查漏补缺和技能的训练，课后自行下载实训任务、技能题库、单元测验进行知识和技能的巩固掌握。切实做到线上线下两手抓、课前课后两不误。

四、结语

文章进行了软件技术专业网页布局课程的教学改革研究，首先对授课学生进行了学情分析，然后将已开设的网页布局课程存在的问题进行了细致的分析与阐述，最后针对出现的问题提出了具体的改进方案及措施。在今后的教学过程中，还将不断地进行发现问题、分析问题、改进问题，有效提高学生的学习兴趣，达到提升学生实践能力和社会适应能力的职业培养要求。

参考文献

[1] 李艳霞，杨威，李翠红.基于项目化教学的“网页设计与布局”课程教学研究[J].中国教育信息化，2017（04）：16-18.

[2] 丁玲.以“说课”形式谈《网页设计与制作》项目教学设计[J].科技视界，2013（30）：256-257.

[3] 侯云霞.软件工程与Rose建模在线开放课程建设方案[J].科教导刊：电子版，2017（30）：112.