“网页设计与制作”之“课程案例”教学初探

王淑云

摘要：根据多年对“网页设计与制作”课程的教学探索，提出“课程案例”这一新概念，并设计开发出一个学生既熟悉、又感兴趣的“课程案例”——班级网站，让学生在模仿再开发该案例网站的过程中学习课程知识，从而掌握本课程的知识和运用技能，达到教与学的良好效果。

关键词：网页设计与制作；课程案例；班级网站

中图分类号：G712 文献标识码：A 文章编号：1672-5727（2014）11-0093-03

中职生的共性就是对缺乏学习兴趣。笔者通过多年的课堂教学体会到：如果有一套行之有效的既适合中职生实际水准、又贴近他们学习生活、能激发他们学习兴趣的案例贯穿于整个课程教学，就有可能解决这个问题。基于此，笔者提出了“课程案例”这一新概念，设计并开发出一套“课程案例”应用于“网页设计与制作”课程教学中，学生通过案例的模仿再开发，全面掌握“网页设计与制作”课程知识与技能的基本要领，从而实现课程的教学目标，培养学生的网站开发和设计能力。下面详述这一“课程案例”教学的设计及所进行的课堂教学。

“课程案例”的提出和设计

（一）“课程案例”这一新概念的提出

市面上相关教材比比皆是，但从其所提供的案例方面看，没有比较适合中职学生的：要么网页主题让学生很陌生，要么网页页面设计太复杂，中职生很难掌握，而且其中的案例多是针对某一知识点或某一章节设计的，属于“知识点案例”或“章节案例”，是零碎知识，不能贯穿整个课程知识教学。所以，教科书只适合作为本课程理论知识点的参考资料。“网页设计与制作”是一门技能型课程，重要的是要教会学生如何去构建和设计一个完整的网站，而不是空泛地谈一些理论知识。“课程案例”区别于“知识点案例”或“章节案例”之处在于：该案例贯穿于整个课程教学，覆盖课程包含的所有知识，课程知识的学习以“课程案例”为线索进行，学生模仿再开发设计完该案例，课程的所有知识学习也已结束。笔者思考并设计这样的“课程案例”，并对教材进行如下处理：提炼教材所提到的知识点，将其重新排列组合，按由浅入深的学习顺序，将课程知识点结合到自主设计的“课程案例”中，分模块渐进教学，整个教学过程注重学生自身思维的开发，将个体集美术设计、课程知识学习和课程实践三者紧密结合，将学生各方的能力逐渐激发展示出来。

（二）围绕学生的兴趣进行“课程案例”的设计

学生对一门应用型技术课的学习如没有兴趣，可能是没有一个令他们感兴趣的实例吸引他们渐次深入学习，从而引导他们学习掌握课程知识。班级是校园学习生活的一个集体，班级网站中所记录的人物、活动都是学生身边的人和事，网站的主题反映的正是他们的校园生活。如果把班级网站作为教学案例，让学生以自己的学习生活为主题组建成网站，一方面能引起他们极大的学习兴趣，另一方面，作为同一个班级的学生，在设计本班级的网站过程中，能够创造很多互相交流的机会，培养互相学习的精神，也能加深同学间的友情。所以，“班级网站的设计与创作”是一个理想的课程案例。笔者应用模块教学法，将理论知识与该课程案例完美结合起来，在近似实践的学习过程中培养学生的学习兴趣，让他们在兴趣中学、在学习中增添兴趣，从而在良性循环中完成课程学习。

再考虑学生的能力方面，他们已经有了对文字、图片和表格的基本处理能力，还学过或同步学习Photoshop、Flash、计算机网络基础等相关课程，所以，只要对网页素材的处理提出具体的要求，或对他们略加指导即能自行设计处理完成。对于该课程，虽然大部分学生浏览过很多网站内容，但并没有真正了解网站是怎么回事；对互联网世界充满兴趣和好奇，却还没有网页设计与制作的理论知识和实践技能，对网站常识还比较陌生。因此，在课程学习中，重点是要力求深入浅出、尽可能直观全面地剖析一个好的网站案例，运用视、听的方法，帮助学生建立有关网页设计与制作的基本概念和基本知识，掌握建设网站的基本技能。

鉴于此，教师如何将Dreamweaver、HTML和CSS三部分内容有机结合，让学生通过课程学习，模仿再开发出一个比较完整的“班级网站”，着力培养学生的实际建站能力、设计开发能力，从而提高他们自主学习与创新能力、信息收集与处理能力、提出问题并分析问题和解决问题的能力，成为课程教学的重要目标。

“课程案例”教学方法的设计

教学手段以“多媒体机房、网络、项目开发”三项结合。多媒体机房为学生设计网站提供基本条件，网络是学生寻找素材资源和借鉴别人经验的空间，项目开发是他们学习的任务。

教学方法上，采用示范讲解、任务驱动的教学模式，从以下三个方面展开：

采用案例讲解的教学模式 教学过程根据编排好的知识点内容和事先创建好的“班级网站”实例，逐步讲解该“课程案例”，便于学生理解和进行模仿设计开发。

实施模块化教学方法 遵循学生“由浅入深，循序渐进，由感性到理性”的认识规律，把知识点组合后分模块渐进教学。教学过程讲练结合，以学生实践为主，完成“班级网站”这一“课程案例”中包含的每个模块的再设计与再创作；以教师引导为辅，讲解设计与创作过程中遇到的新知识，组织学生完成能力拓展训练。

走四步教学流程，融“教、学、练”于一体 第一步，教师展示课程案例，演示创作过程，讲解涉及的知识点内容；第二步，下达任务，提出完成任务的具体要求和完成时间；第三步，学生模仿再设计再创作，完成任务；第四步，任务验收，学生自我评价，教师综合讲评。

“课程案例”的课堂教学

基于学生的现有知识技能，教师课程教学中重点讲授如何设计开发网站，在其他环节只扮演一个组织者和启迪者的角色，一步步引导学生完成本课程的目标，充分培养和发挥学生的自主设计能力、绘画能力和创新能力。

整个课程的课堂教学以“课程案例”为主线，设定以下几个教学模块。

模块一：学习有关网页的基本知识，介绍建设网站的工具等。

模块二：草拟“网站地图”，设计网站“模板页”。展示课程案例网站，分析班级网站的风格、页面的布局和包含的元素，先给学生一个真实的空间印象，之后让学生模仿如何设计这样的网站。首先设计出纸质的网站空间布局和内容：包括考虑整个网站的风格、主色调、页面布局、页面的大概内容等，每一个页面设计草拟在一张纸上，其实这就是网站地图了。做足了这个功课，日后的整个班级网站的设计就有了头绪。为避免各页面出现相同内容的重复设计，提出设计制作“模板页”来生成其他页面。例如：把风格和内容相一致的部分（如班级广告图、班级徽标、导航条、版权信息等）设计出来，作成模板页保存下来，以备后面制作网站各页面时利用模板页生成，并在此基础上进行相应页面内容的设计创作。草拟“网站地图”和设计制作网站“模板页”是同时进行的，要结合着做。这个阶段都还是“纸上练兵”。

模块三：收集和创作素材。班级网站的素材主要来源于学生自己的学习生活，可以是活动的照片、活动记录，也可以是为自己班级创作的班级广告图、班级徽标等Flash或Photoshop作品，将这些素材分门别类放入建好的站点目录树中。

模块四：学习Dreamweaver，首先建立班级网站站点。

模块五：设计创建“模板页”。根据前期草拟的网站地图，利用布局表格设计模板框架。框架搭好后就是为模板页添加素材。模板上需要的素材并不太多，关键是要“精”，用精心选择和创作的素材。提醒学生，模板上大块的空间要留出来给各页面添加相应的内容，这点至关重要。

模块六：利用模板生成网站各页面。模板设计成熟并制作出来后，就要根据模板上的导航设计生成相应的页面，并将各页面互相链接起来。

模块七：完善各页面内容。每一两次课完善一个页面的内容，直到网站中各页面内容全部添加完成。当然，课后要为如何合理安排这些页面内容花很多时间去构思、去创作或收集相应的素材。所以，收集素材这项工作是一直贯穿于整个网页设计过程中的。

模块八：应用一些网页特效的代码，如添加背景音乐、QQ互动、图片文字的滚动、表单等，让页面动起来，增加网页的吸引力和活力。

模块九：本地站点测试。

教学评价设计

评价方案 （1）学生自我评价：即每个学生对自己的评价。教师事先给出评价标准和具体要求，学生对照自己的学习态度、创作的作品，对自己给出合理评价。（2）模块作品评价：教师对每个学生的评价。教师通过对学生课堂反映、每个模块上交的作品、讨论活跃程度等方面，对每个学生进行评价。（3）期末考核：教师通过对学生一整学期模仿再设计创作的“班级网站”进行评分，考核学生的实践与动手的综合能力，对学生进行合理的评价。

成绩评定 按出勤率、模块作品成绩、成熟作品成绩加权考核。

结语

在“网页设计与制作”课程案例的课堂教学中，笔者采用的是兴趣教学和让学生贴近实战的方法，以保持学生对知识探索的兴趣并提高学生的动手能力。这种教学的重要前提是要设计一个好的案例，“好”的标准是内容贴近学生的学习生活、设计难度又适合他们的实际水平，“班级网站”这一课程案例便是好案例之一。此外，在教学过程中，笔者为学生提供了十分丰富的信息资源，教会他们信息资源该如何收集、从哪里获取、以及如何有效利用等知识。

参考文献：

[1]刘瑞新.网页设计与制作教程[M].北京：机械工业出版社，2010.

[2]唐乾林.网站界面设计案例教程[M].北京：机械工业出版社，2011.

[3]尚俊杰.网络程序设计——ASP[M].北京：清华大学出版社，北方交通大学出版社，2009.

[4]赵丰年.网页制作三剑客操作互动[M].北京：人民邮电出版社，2011.

[5]赵丰年.网页制作技术——Dreamweaver Flash Fireworks[M].北京：人民邮电出版社，2003.

[6]马月.网站界面设计[M].北京：北京理工大学出版社，2006.

[7]周予滨，张博强.网页制作上机培训教程[M].北京：清华大学出版社，2002.

（责任编辑：王璐）