高职院校软件专业网页设计课程教学改革初探

【摘 要】网页设计是高职院校软件技术及相关专业的一门重要的专业课程，该课程侧重培养学生的前端网页布局、设计和美工的能力和素养。本文从课程的总体定位、教学内容的选取与组织、教学过程设计、考核过程设计四大方面阐述了对该课程教学改革的一些探索和实践的基本思路。

【关键词】网页设计；教学改革；教学过程设计

一、课程教学的总体定位

《网页设计》是软件技术专业一门重要的专业课，但长期以来我们的授课方式是以零散的知识点加小规模的实训，而实训都是以验证性实验为主，这与企业的用人需求及工学结合的职业教育模式脱节，学生虽然上课时能够掌握基础知识，并有着极大的学习兴趣，但由于内容过于分散，学生很难综合运用并做出一个实物。这样将导致学生学习的成就感缺失，久而久之，就会对课程失去兴趣。

针对职业教育的特点，在我们对众多大中型网站开发企业进行调研分析、对专业毕业生的岗位进行调查回访的基础上，我们对网站的开发流程有了清晰的认识和了解。一般大中型网站企业开发分前台美工人员和后台程序人员。前台美工人员的任务是使用photoshop等软件制作网站效果图，在用户确认通过后，根据效果图进行切片来生成网页中的图片，然后利用表格或使用DIV+CSS来对网页进行布局，从而完成前台静态网页的制作；而后台程序人员则使用各种动态网页技术如ASP、JSP、PHP等完成程序的编写，利用数据库管理软件对数据库进行部署，存储网站中需要的数据。

前台美工人员完成的工作正好是我们这门课程所要完成的目标。基于此，我们把课程定位在适应企业用人需求，提高学生使用photoshop等软件进行网站效果图制作、使用表格或使用DIV+CSS来对网页进行布局上。

网页设计面向的工作岗位主要有：前台美工、DIV+CSS网页布局、使用简单JS脚本进行客户端编程等。职业学院所培养的网页设计开发人才主要从事静态网页设计，基于此思路，

我们依据岗位需求，应以培养网页美工、前端代码设计和布局为基本目标，通过完成学习性工作项目，培养学生能够依据用户需求，进行网站架构设计、网页布局和美化设计、打包发布的能力，并通过拓展项目训练，逐步培养学生具备网站系统分析和网页美感、色彩搭配、网页布局和设计的能力。

二、课程教学内容的选取与组织

在进行该课程的设计时遵循以下三个理念和原則：

（1）以岗位需求为目标、以职业能力培养为主线、以工作过程为导向建立教学体系。

（2）根据一个完整网站统领全课程，用任务驱动构建网页设计课程知识体系。选取企业网站作为课程载体，将所有知识点、技能融于六大情境模块中。

（3）与企业合作，完全模拟静态网页真实开发过程进行教学，以技能训练为重点培养学生解决实际问题的能力、创新能力、“零距离”就业能力。实现三方面培养目标。

通过以下手段重构教学内容：

（1）走访、调研多家网站开发企业、查询行业标准，了解熟悉网站开发的流程。

（2）根据我所带班级学生特点及目前就业岗位技术需求确定教学内容。

（3）以企业网站设计案例为载体重构该学科知识体系。

（4）参考网页设计师认证考试大纲拓宽知识面。

具体教学内容分为6个模块，列举如下：

（1）模块1：著名网页效果赏析、网页布局结构。该模块的任务是对经典的网页进行效果赏析，并对网页布局结构进行学习和借鉴。涵盖主要知识点：美感培养、色彩搭配、字体应用；网页LOGO、头部、菜单栏、版权栏、各栏目结构。该模块学时分配为9学时。

（2）模块2：HTML基础知识。该模块的任务是学习HTML基本标记和HTML基本语法，并对页面美工进行学习。涵盖主要知识点：各标记的语法应用、属性设置；CSS样式表。学时分配为4学时。

（3）模块3：网站效果图制作。该模块的任务是学习photoshop软件的使用、flash软件的使用、Fireworks、Dreamweaver以及切片操作。涵盖主要知识点：选区、图像编辑、图层、通道、蒙版、路径、滤镜等；图形绘制工具、图形编辑、位图和视频、对象编辑、元件和实例、动画制作；动态滤镜、图层、通道、蒙版；文本与图像处理、层、框架网页等。学时分配为30学时。

（4）模块4：HTML表格布局。该模块的任务是学习表格嵌套和表格属性设置。涵盖主要知识点：表格布局。学时分配为6学时。

（5）模块5：DIV+CSS。该模块的任务是学习CSS语法格式、各个CSS属性用法；并将切片后的页面进行DIV+CSS布局。涵盖主要知识点：表格布局。学时分配为9学时。

（6）模块6：站点测试与发布。该模块的任务是学习如何使用Dreamweaver上传网站，完成发布。学时分配为3学时。

三、课程教学过程设计

我们以主页设计模块的任务5- 2 DIV+CSS布局为例进行说明。

该任务为6学时，具体任务包含3个子任务： DIV的布局；CSS设置属性；浮动、绝对定位。该任务主要使用DIV布局页面，用CSS设置DIV块的属性，将主页面分为几个部分，对应于相应的DIV，并使用浮动、定位属性定位DIV块。

任务目标包括知识目标和能力目标，列举如下：

知识目标：1、掌握DIV的布局 的方法。2、掌握使用CSS设置属性的方法。3、掌握浮动、绝对定位的方法。能力目标：1、培养学生使用DIV的布局 的能力；2、培养学生使用使用CSS设置属性的能力。学时分配：二次课（6学时）

教学过程设计如下：

主要教学方法：多种教学方法穿插并用，整个课堂按照”做—学—教—拓—思”的步骤进行。综合运用项目教学法（引入企业网站案例）、教—学—做合一的教学方法。

主要教学手段：多媒体课件演示；企业项目开发场景的模拟；分组讨论，团队开发；

视频录象的使用。

教学步骤：（1）做：教师讲解、演示：布置任務，演示DIV+CSS布局的基本操作；并演示任务的最终完成结果。学生：分组，按照实训指导书的步骤完成任务，每组学生要有组长（负责协调，带领全组讨论并完成任务）1、创建DIV块；2、使用DIV块嵌套；3、使用CSS设置属性；4、浮动DIV或绝对定位。

（2）学：学生复习并回答以下问题：1、什么是浮动？2、什么是绝对定位，什么是相对定位？3、怎样用CSS设置属性，有几种方法？学生可以查阅书本，或上网查找答案。

（3）教：1、2个DIV块并列。2、主要步骤：插入DIV块，设置边框属性、高度、宽度，内部包含的小DIV块，然后对DIV块绝对或相对定位。

（4）拓：1、使用表格布局是否也能达到同样的效果？2、尝试写CSS样式表

（5）思：课后练习：如何进行定位？

教学资源与教学评价如下：

（1）教学资源包括：网络资源（Csdn论坛；微软官方网站；其他主要技术论坛）；图书资源（教材；推荐参考书）；其他资源（教师提供的一些源码）

（2）教学评价包括：教师评价学生任务完成情况（程序界面美观程度；CSS代码质量；可读性、可维护性；资料查找能力；调试能力）；学生论述、答辩（对任务重、难点的认识情况；对教师问题的回答情况）

四、课程考核过程设计

网页设计课程的考核标准由职业素质、基础知识和技能三部分内容组成，各部分的考核内容如下：

（1）职业素质部分：职业道德、工作态度、工作作风、团队精神及竞争意识。

（2）基础知识部分：网页设计规范、HTML标记语言、网络图像处理、动画制作、小型网站建设及维护的知识。

（3）技能部分：网站策划、网络图像编辑与处理、动画制作、网页设计与制作、开发和维护小型网站的能力。

对基础知识的考核以教学基本目标为基准；对能力与技能部分的考核以模拟公司招聘员工和网页设计工作者的考核标准为本课程的标准。

考核的原则：以考核基础知识和职业技能为重点。对基础部分和职业素质在平时考核中完成，技能部分在期末上机考试中进行考核。在技能部分的考核中，要求在规定时间内（通常为2小时）利用给定素材，包括考题所需的图片、背景和其他辅助图片、相关考题内容的文字资料、考题要求等，学生利用授课所学软件完成规定技术要求的网站创意设计与制作。以这种模拟公司招聘员工和网页设计工作者工作过程的考核方式，检测学生创意、设计、理解题材、图像加工处理、动画制作、色彩运用、布局、站点管理等综合能力。

这里，我们从课程的总体定位、教学内容的选取与组织、教学过程设计、考核过程设计四大方面阐述了对该课程教学改革的一些探索和实践的基本思路，目前，该课程教学改革正在进行中，学生反馈的结果良好，学习兴趣得到了极大的提高。

参考文献：

[1] 赵志群，职业教育与培训新概念 [ M] . 北京：科学出版社，2003.

[2] 张润莲，张向利，叶进 . 案例教学法及其运用 [ J] .桂林电子工业学院学报，2004，24 （4）：102- 105.

[3] 顿祖义 . 项目化课程改革：高职院校教学工作的重要抓手 [J] .湖北民族学院学报：哲学社会科学版，2008，26（6）：61- 63.

[4] 张建国 . 我国职教课程开发模式的演变及启示 [ J] .职教论坛，2007， （4）：4- 10.

[5] 欧阳炜昊，吴振峰，罗卓君 . 基于工作过程导向的“网页设计与制作”课程教学改革研究 [J] .计算机教育，2010， （4）：50- 52 .

附：作者简介：程冠琦（1978-），湖北襄樊人，硕士研究生，无锡商业职业技术学院物联网技术学院讲师，研究方向：软件技术。