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

  • 投稿臆想
  • 更新时间2015-09-07
  • 阅读量784次
  • 评分4
  • 84
  • 0

王淑云

(福建广播电视大学晋安校区 福建 福州 350003)

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

教育期刊网 http://www.jyqkw.com
关键词 :网页设计与制作;课程案例;班级网站

中图分类号:G712 文献标识码:A 文章编号:1672-5727(2014)11-0093-03

作者简介:王淑云(1965—),女,福建福州人,福建广播电视大学晋安校区高级讲师,研究方向为计算机软件。

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

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

(一)“课程案例”这一新概念的提出

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

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

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

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

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

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

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

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

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

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

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

“课程案例”的课堂教学

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

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

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

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

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

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

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

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

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

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

模块九:本地站点测试。

教学评价设计

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

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

结语

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

教育期刊网 http://www.jyqkw.com
参考文献

[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.

(责任编辑:王璐)