网页设计教学教案精选(五篇)

序言：作为思想的载体和知识的探索者，写作是一种独特的艺术，我们为您准备了不同风格的5篇网页设计教学教案，期待它们能激发您的灵感。

篇1

关键词:案例教学;项目驱动模式;网页设计;应用

中图分类号:TP3文献标识码:A文章编号:1009-3044(2010)05-1261-02

Case Study + Project Progressive Model in Homepage Design the Use of Teaching

YOU Qi

(Guang Dong Institute of Science and Technology, Zhuhai 519090, China)

Abstract: Teaching in the web page design, the use of case teaching + project-driven models to project-driven teaching and learning activities as the main line to case teaching task learning goals, you can give full play to the enthusiasm of students to the principal and teachers to learn the leading role of good teaching results to enhance students comprehensive skills and employability.

Key Words: Case study; Project Progressive model; Web Design; Application

网页设计作为一门综合性、实践性、应用性极强的课程,在教学的方法上应有别于一般的基础理论课程。在教学中不仅要求学生掌握专业理论知识,更要求学生具有运用专业知识分析企业实际情况、解决实际问题的能力。因此,提升学生学习的主动性,通过对教学内容及实验内容的合理安排对学生进行正确引导并提高学生实际动手能力是其中的关键。

1 案例教学+项目驱动模式

案例教学法的基本方法是:根据教学目的和培养目标的要求,在教学过程中不是先进行理论知识或知识点的灌输,而是从实际的例子人手,把学生带入特定的事件情景中进行分析问题和解决问题,适当讲解理论知识或相应的知识点,从而培养学生运用理论知识,并形成技能技巧的一种教学方法。特点是从案例到理论或者知识点,从感性到理性。项目驱动教学法是:在教学过程师生通过共同实施一个完整的项目工作来展开的,教师组织学生参与项目设计、项目执行和管理的全过程.整个学习过程成为一个人人参与的创造实践活动。把相关的知识点融入到项目的各个环节中去,层层推进项目。通过对问题的深化或功能的扩充,来拓宽知识的广度和深度,直至得到一个完整的项目解决方法,从而达到学习知识、培养能力的目的。

这两种教学方法是紧密联系的,案例教学法是按照知识点把课程独立划分成一个个典型案例,引导学生对知识点的掌握;而项目驱动教学法则把一个项目划分成若干个具体案例,每个案例都与这个项目有着密切的关联,然后把相关的知识点融入到这些案例中去。单独使用案例教学法,学生所掌握的知识点是零散的、不系统的,教师对案例的选取不具体、不切题,而借助项目驱动教学法则可以把相关的知识点系统地联起来。单独使用项目教学法,可能会遗漏一些重要的知识点,这时必须借助于案例教学法来补充项目中涉及不到的知识点。

2 案例教学+项目驱动模式注意事项

2.1 案例设置原则

案例设置主要考虑如下几个方面:1)案例应具有针对性,这样做容易突出授课目标,不易偏离授课内容;2)案例应具有代表性,学生能够从该案例得到启发,进行拓展性思考;3)案例应前后相互联系,相互渗透,后续阶段的案例尽可能涵盖前面的内容,以加深和巩固所学知识;4)案例应具有真实性,从实际出发,根据学生的特点,尽可能设计一些学生感兴趣的、贴近生活工作的案例。通过生动有趣的案例教学激发学生的学习兴趣,加强学生的动手能力和创新能力的培养。如:大学校园生活、班级主页、宿舍集中营、个人博客等;5)案例应循序渐进,从易到难的递进方式设计,一方面是有利于调动学生的积极性;另一方面是便于学生对项目分解的理解,从而掌握整个项目的核心思想和构建步骤。

2.2 项目的设置原则

项目的设置应遵循如下原则:1)内容适度:项目内容应基本涵盖网页设计课程的绝大部分知识点,要考虑市场对该学科有实际需要,并且是学生感兴趣的和熟悉的。由于就业的需求和压力,必将产生解决问题、参与项目活动的欲望,这种内在的动力是保证项目活动顺利展开前提,同时这种项目完成后也能给学生带来成就感,树立学生的学习信心。2)选择的项目应有一定的综合性:教师要考虑项目的大小、知识点的含量、前后联系及其它学科知识在项目的作用等多方面的因素,制定活动计划时要注意分散重点、难点,分层推进,让项目活动的实施成为逐步掌握知识、技能的积累过程要确保大部分的学生能够通过自己的努力、通过与同学的协作和教师的指导完成项目。3)项目完成应能看到具体的效果,学生经摸索完成后有成就感,使他们真正掌握网站设计的基本方法。

2.3 注重案例与项目驱动的关联性

可以有目的地选取合适的案例与项目,让学生掌握相关知识点,同时使学生明白案例教学与项目驱动之间的关系。例如:在设计大学校园生活项目时,将欣赏校园风光、学校\学院运动会、校园球赛等案例放置其中,这样在介绍相关知识点时学生较容易接受。

3 实施“案例教学+项目驱动”教学模式效果

3.1 有利于理论与实践相结合

打破了以往有条不紊地组织教学的模式,注重知识运用环节和实践能力培养环节的训练,使理论与实践有机结合起来。

3.2 充分调动了“教”与“学”的积极性

教师和学生两者平等地参与教学活动,充分地调动了“教”与“学”的积极性。教师可以就案例与项目阐明自己的观点,学生也可以就案例与项目发表自己的意见,在具体项目和相关案例的带动下,让学生通过自己的操作来学习“死”的理论,加强了理论与实践的联系,让学生明白学的这个知识点可以解决什么具体问题,起什么作用,最终提高了学生的分析能力、创新能力和实践动手能力,从而达到工学结合的教学效果。

3.3 提高对教师和学生的素质要求

该模式对教师的要求:实施该教学模式要求教师不仅具有渊博的理论知识,还要具有丰富的教学与实践经验,能够将理论知识与实践结合起来,能够根据新的教学大纲或者市场需要不断地更新教学内容、补充教案,编写切实可行的教学案例与项目。

实施该教学法对学生的要求:学生是教学主体,那么学生素质水平也就决定了此种教学法的成败要解决这一问题首先教师要注重教学中的循序渐进,先从简单的案例和项目开始,教师和学生一起分析案例与项目,并进一步训练他们学会如何分析问题,经过反复训练,学生的能力逐步提高,再增加难度。学生应做好课前的准备工作,提前预习相关内容,上课中应积极参与讨论,课后认真做好总结,独立完成后期实训作业。

4 结束语

在实行项目驱动、案例教学方式时,要做到灵活掌握对于学生实用的、重点、难点的知识可以采用,对于一些不实用或学生极易掌握的知识也不必生搬硬套。同时也不能以此来排斥和否定其他教学方法。因为我们的最终的目的是要通过最有效的教学方式让学生掌握必要的知识技能,提高他们的就业竞争能力,适应社会对高技能人才的需求。

参考文献:

[1] 卢万有.项目教学法在《网页设计》课程中的运用[J].计算机教育,2007(13).

篇2

关键词：课程教学；案例教学法；案例生活化；教学设计

中图分类号：G434 文献标识码：A 文章编号：16727800（2013）009019002

作者简介：钟钦钦（1983-），女，湖北工业大学硕士研究生，长江工程职业技术学院助教，研究方向为计算机应用与教学；罗俊（1981-），男，硕士，长江工程职业技术学院讲师，研究方向为道路桥梁。

1案例教学法存在的弊端

案例教学法，着眼于学生实际解决问题的能力，采用“做中学”的形式，通过一个实际的个案，掌握并理解所学的知识，同时能够解决类似及相似的问题。案例教学法能缩短教学与实际生活的差距。尽管它有许多的好处，但对于《动态网页设计》这门课程来说，存在着许多弊端。

案例的真实性不利于学生理解。《动态网页设计》课程中所采用的案例都是真真切切的设计个案，例如：聊天室、留言版、广告轮播、内容链接组件的使用等，都是真实的个案。从某个层面来说，学生能够真切地接触到网页设计的实际工作，但通过对学生的调查发现，这些设计内容都是学生第一次接触，整个设计过程基本上都是依葫芦画瓢，学生只会原原本本地按照案例的实现过程去敲写代码，一旦更换内容或变更形式，将无法完成设计任务。

案例操作过程的固化不利于学生掌握。《动态网页设计》课程中所采用案例的操作过程都是固定的，第一步应该如何，第二步应该如何，第三步应该如何……等等，学生按照案例操作过程去实现的时候，所记住的是步骤，而没有理解各步骤所实现内容之间的关联，导致对于所学习知识点的理解层面不高，学生只会以某一固定的方式去实现一个网页功能，不能灵活运用所学知识点。

综上所述，必须在原有的案例上进行加工处理，文中笔者采用的方式是将案例生活化。

2教学案例生活化

从事软件设计教学的教师都会强调，软件的设计源于生活，往往是为了解决生活中的某一问题才会促使设计者们去设计一个软件。教学案例生活化设计是让学生更好地理解并掌握所学知识的一种方法。

那么原有的案例不也是“生活化”吗？例如：在访问网站看小说的时候，会有一个页面，上面会有小说各个章节的链接。诚然，这是生活中访问网页时会出现的一种现象，但有局限性，一是并不是所有的学生都会在网络上看小说；二是即便学生有类似或相同的访问经历，但对于此网页功能实现的过程却是第一次接触。所以，这样的“生活化”不能称为生活化，它是一种表面形式，表面上看来，生活中确有其事，但不是人人都接触并理解的事物。

所以，要学生能够较好地理解知识，最好的方式是做到案例能和现实中人人都接触并理解的事物相联系。通过对学生的调查表明，案例生活化的教学效果要比所有的案例教学效果好得多，学生表示和生活中常见的事物相联系后，能更好地理解所学的知识点。3案例生活化教学设计

本文以内容链接组件教学设计为例说明案例的生活化。

内容链接组件的作用是将多个网页形成一个网页目录导航。

问：“同学们都买过书，看过书，对不对？”

得到回答：“对。”

问：“书都会有目录，对不对？”

得到回答：“对。”

那么这和所讲的内容链接组件有什么关系呢？现在通过表1来比较分析。

在此案例中，加入生活中人人都看过并理解的书的目录，并与内容链接组件实现各项内容相联系。由此可见，要实现内容链接组件的功能就必然少不了内容导航页面、列表文件及组成内容导航页面的多个网页。那么这三者之间的关联如图1所示。

通过这一关联图，能一目了然地知道内容导航页面、列表文件及组成内容导航页面的多个网页这三者之间的过程和关系。

以《宝宝营养餐》为例。

（1）首先需要用以形成链接导航的网页1、网页2、网页3……网页N（好比一本书目录的形成首先需要章节的存在）。

5.asp4-5岁营养食谱

（3）内容链接导航主程序页面（index.asp），在这个主程序页面中，将要用到内容链接组件，首先要实现的便是这个组件的实例化，使用server.createobject方法创建MSWC.Nextlink的实例，并用set关键字赋给NL，于是产生了名为NL的内容链接组件实例对象。一切方法的运用都在此对象进行。

完成go.asp后，最后一步则是将此功能添加到1.asp-5.asp中。此时，“1.asp～5.asp”这5个文件仍然是独立的程序块，使用标记 插入到每一分页文件（1.asp～5.asp）的结尾，即可实现链接。

参考文献：

篇3

1传统计算机网页设计教学中存在的问题

1.1教学方式落后

如今虽然已经完成了教育改革，但依然有许多教师处于传统教学观念的影响下，其在教学中往往排斥使用新型教学方式。高职教学中计算机网页设计是十分重要的课程，且具有很强的专业性和综合性，其该专业具有很好的就业空间，但若学生在就学期间无法很好的掌握该方面知识和技能，势必会使其丧失此优势。我国高职院校数量众多，虽然很多有实力的院校已经基本实现了信息化教学，但依然有很多院校使用传统的教学方式，传统教学方式对于计算机网页设计专业而言并不具优势，且难以使学生在短时间内掌握更多的内容，因此今后应积极改善教学方式[1]。

1.2课程设置不完善

我国教育由于已经形成了固有的形式，即以理论知识为主，实践知识为辅，此种教学理念虽然曾经发挥了很好的作用，但如今社会需要的是全能型人才、创新型人才，此种理念显然与社会要求相悖。而高职院校恰恰与其相反，其所追求的是为学生创造更多就业机会，因此其在教学中往往以实践为主，但是此种方式虽然可以使学生计算机网页设计能力得到提升，但却不利于学生掌握理论知识，难以将理论与实践更好的融合在一起，总而言之，大多数高职院校仍无法实现理论与实践课程课时更好地调节。

1.3教师综合素质及能力有待提升

计算机网页设计专业具有极强的专业性，对于任课教师的要求也很高，然而总所周知我国师资力量匮乏，能够在该专业独当一面的教师也较少，如近年来我国为了解决师资问题，适当的降低了教师准入标准，使得很多大学生有了当老师的契机，但此种方式虽然可以增加教师的数量，但却无法全面提升教师质量，很多新晋教师虽然自身具有较强的专业技能，但并不善于教学，而有效教师虽然能够很快掌握教学技巧，但奈何自身对计算机网页设计的了解不够深入，同样无法很好的开展教学。另外，很多经验丰富的教师其在教学时往往更喜欢自己的教学方式，因此其在教学中很少会引用新型教学方式[2]。

2案例教学在计算机网页设计中的应用

2.1收集整理素材

在进行案例教学的过程中，教师应善于收集和整理相应素材，在收集素材时应充分从学生的角度出发，意识到那些素材能够在当代学生计算机网页设计方面引起其兴趣，但同时也要考虑到素材与计算机网页设计的相关性。因此教师最终选择的素材可以是网页设计相关的视频、文字和图片等，通过视频学生可以更加直观的看到网页设计带来的视觉效果，能够充分引起学生学习的欲望，而适当的文字可以给学生提供揣摩的时间，便于其深入理解[3]。2.2选择教学案例教学案例的选择尤为重要，教师可以选择目前对于学生而言较为重要的部分，如可以要求学生设计个人求职网站，此种网站设计具有一定的针对性，并且与学生本身发展息息相关。在确定教学案例后，教师则应针对该方面进行更有针对性的讲解，使学生能够对该方面有更加深入的了解，并且要求学生自己主动寻找素材来丰富自己的设计，此种方式不仅能够使学生充分将自己的想法展现出来，也能够使学生更加了解网页设计方面的内容[4]。

2.3讨论分析案例

对案例进行讨论分析是案例教学法中的重中之重，此环节并不是要求学生掌握多么纯熟的设计技巧，而是能够在相互的交流中促进彼此进步。同样以个人求职网站为例，教师可以讲学生集中起来共同讨论，学生均是各个不同的个体，不同个体看待事物的角度不同，所思所想更加不一样，将所有学生聚集在一起能够使学生获得更多设计灵感，也能够充分认识到自身设计中的不足[5]。

2.4对案例进行总结并实现自我提升

案例教学法的最后应对案例进行总结，其中包括学生各自的想法抒发，教师对各个学生想法的评价等，同时教师应针对学生在讨论时提出的问题进行明确的解答，也要给予学生新的问题，使其能够促进自己不断开动思维，如此一来在课堂上机时，学生即可以带着问题进行设计。案例总结具有十分重要的意义，无论对于学生而言或是教师而言均是。

3结语

综上所述，研究关于案例教学在计算机网页设计中的应用方面的内容具有十分重要的意义，其不仅关系到我国高职教学的全面发展，也与学生的个人学习、各方面能力的提升息息相关。如今社会各界对人才的要求越来越高，我国也在为实现全民教育、提升教学质量而不断努力，针对案例教学法我国教育界也在不断对其完善，将其应用于计算机网页设计中后其虽然使得教学效果有了较大的提升，但时代在进步，教育事业更不能停滞不前，若案例教学法不及时进行丰富，也会逐步沦为传统教学法，因此今后高职院校更应加强对此方面的研究。

引用：

[1]郭锂,叶惠文.基于“双层项目驱动教学模式”的计算机基础课程立体教材开发与应用——以《网页设计与制作》为例[J].中国大学教学,2012,(11)02:83-85.

[2]谭琦.案例教学在计算机网页设计教学中的运用[J].信息与电脑(理论版),2012,(02)08:195-196.

[3]郭锂,叶惠文.TPBIM在“广东省高校计算机公共课教学改革”试点课程中的构建与应用——以“网页设计与制作”课程为例[J].中国电化教育,2012,(10)12:111-114+135.

篇4

【关键词】网页设计 案例教学法 实践

【中图分类号】TP393.092-4【文献标识码】A【文章编号】1672-5158（2013）06-0369-01

随着Internet的日益普及，各种类型网站层出不穷，网页制作已成为为今非常热门的职业，熟练掌握网页设计与制作技术不仅能够提高高职院校学生的职业竞争力，而且还能够充分发挥其自己的个性和创造力，但在课堂教学实践中，由于教学方法的僵化滞后，导致学生学习难度增大，缺乏学习兴趣，不能充分使现课程应用开发的特色，因此，如何在教学中打破以往理论灌输的形式，引入安全教学法，激发学生学习兴趣，使学生在学习理论知识的同时也增强动手能力，从而更好地培养受企业欢迎的网页设计人才，成为高职院校计算机专业老师迫切需要解决的一个课题。

一、 案例教学法的内涵

案例教学法起源于1920年代，由美国哈佛商学院所倡导，到1980年代，已逐渐成为一种相当成熟的教学模式。所谓案例教学法就是一种以案例为基础的教学法，是在老师的指导下，根据教学目的和要求，组织学生通过对安全的调查、阅读、思考、分析、讨论和交流等活动，教给学生分析问题和解决问题的方法，进而提高他们分析问题和解决问题的能力，加深对基本概念和基本原理的理解，在案例教学法中老师不再是过去传统教学中，扮演传授知识者角色，而是扮演着设计者和激励者的角色，鼓励学生积极参与讨论，20世纪末，随着计算机技术和飞速发展和计算机使用的日益广泛，这种教学法也被应用到计算机教学中。通过案例教学法，可有效地培养高职院校学生识别分析和解决某一具体问题的能力，以及管理理念，工作作风，沟通能力和协作精神。

二、 案例教学法的特色

1、 鼓励学生独立思考

传统的教学法只告诉学生怎么去做，而且其内容在实践中可能不实用，导致学生学习中失去兴趣。在一定程度上损害了学生的积极性和学习效果，而安全教学法则是要学生自己去思考主，去创造，使得枯躁乏味的教学内容变得生动活泼，而且案例教学的稍后阶段，使学生都要就自己和他人的方案发表见解。通过这种经验的交流，既可取长补短，促进人际交流能力的提高也可起到一咱激励的效果。长期落后的学生，能激发其奋发自己，超越他人的内动力，从而积极进取，刻苦学习。

2、 重视双向交流。

传统的教学法是老师讲，学生听没听，听懂多少，要到最后的测试时才知道，而且学到的都是死知识，而在安全教学中，学生拿到案例后，先要进行消化，然后查阅各种他认为必要的理论，这无形中回加深了对知识的理解，而且是主动过行的，捕捉到这些理论知识后，他还要经过缜密地思考，提出解决问题的方案，这一应视为能力上的升华，同时他的要案，承受时由所谓教师给以引导，这也是促使教师根据不同学员的不同理解，补充新的教学内容。

3、 引导学生变注重知识为注重能力

现代人力资源理论认为知识是学重能力，知识应该转化为能力，用人企业也越来越重视学生的实践能力，同时学生一味地通过学习书本的死知识而忽视实际能力的培养，不仅对自身的发展不利，也无法让其今后所在企业直接受益，而案例教学法恰恰是培养学生创造能力的教学方法。

三、 案例教学法的实践

1、 确定案例，自行准备

在正式实施的一到二周，老师设计学生当前所学习的内容与现实情况基本相接近的案例，然后把案例材料发给学生，让学生阅读安全材料，查阅指定教材，搜集必要的信息，并积极地思索，初步形成关于案例中的问题的原因分析和解决方案，在该环节，老师可分队是段给学生列出一些思考题，让学生有针对性地开展工作，这样，在提起学生兴趣的同时，培养学生自学与探究的能力，例如在超链接一节中，文字、图像超链接，热区超链接，电子邮件超链接的操作方案类似，教师选择最复杂的热区超链接作为案例交予学生分析解决，并要求学生在需要完成的页面中加入电子邮件超链接，这样既可以使学生了解各知识点之间的相互关系，又可在学生头脑中形成该章节完整的知识体系，对所有知识点有一个交流和全面的认识。

2、 分析案例，集中讨论

在学生充分分析的了解案例的基础上，教师可围绕选择案例的涉及知识点进行必要的讲解和示范，此后，学生发表对于安全的分析和处理意见，可扩展和深化彼此对案例的理解程序，教师作为组织者和主持人提出几个意见比较集中的问题和处理方式，组织学生对这些问题和处理方式进行重点讨论，这样就将学生的注意力，引导到方案的合理解决上。

3、 引导实施，完成任务

在学生集中讨论完成以后，教师应留出一定的时间让学生自己进行思考和总结。并引导学生上机实际操作，为了让学生对所学知识融会贯通，要及时安排足够的上机时间，使理论讲授，学生讨论和上机练习同时进行，在此过程中，教师要充分体现学生的自主性和主体性，在学生遇到困难时及时指导，尽量启发引导学生主动控究。通过“做中学”，“做中教”，使学生学会和掌握相关的知识和技能，从而提高学生的网页制作能力，巩固所学知识与技能。

4、 科学评价，及时反馈

在学生完成案例后，教师要及时对学生的表现作出科学的评价，以往教学中，忽视实践操作和网站整体构思和建设，只强调学生对书本知识的记忆忽视了对学生思考能力，对知识的运用能力，创新能力以及其他来源的培养，因此，老师进行学习评论和定性评价相结合，教师评价和学生自评，互评相结合，增强老师与学生的互动交流，这样既能帮助教师及早发现学生的问题，反思教学效果，又能帮助学生及时总结自己的学习情况：如教师可在以一个综合作品及该作品的项目策划书（网站的构思、主题、结构、链接方式、色彩选择等，交由学生共同完成，完成后老师综合网页的版面设计，页面效果，实用性等多项指标，给出评分和评语，其他学生给出互评，制作人对作品给出自评，三部分分数相加作为作品的综合秘所得，这样既可调动学生平时学习网页知识的积极性，又培养了学生的实践能力、创新能力和团队合作精神。

四、 案例教学法在网页设计课程教学中坯布要注意的问题

1、 明确目的性

教师所选择的安全，要以教学内容为依据，以所学专业内容为课题材料，既独特又具有代表性，目的明确，让学生在案例的思考；分析和讨论中，建立起一套适合自己的完整而又严密的逻辑思维方法和思考问题的方式，以提高学生分析硅化木，解决问题的能力，进而提高素质。

2、 深刻的启发性

案例教学不存在绝对正确的答案，目的在于启发学生独立自主地去思考探索，在整个教学过程中，教师要注重与学生个体的交往，在交往中，循序渐进地培养学生独立思考能力，启发学生逐渐建立一套分析、解决问题的思维方式。

3、 突出实践性

网页设计是一门操作性和应用性很强的课程，要提高学生的实践动手能力，必须加强实验实训环节，在实践教学中，能要注重老师角色的转换，以学生为中心，教师为主导，通过精选案例、分解任务，讲练耐心融合，使学生积极参与，从而充分调动学生独立解决问题和积极性和能力。

总之，在高职院校的网页设计教学中，引入案例式教学，使学生在实践中掌握知识，提高技能，既让学生学到了网页制作方法，又锻炼了学生的自学能力主，团队合作能力，从而全面提高了高职生的综合素质，达到了学以致用的教学目的。

参考文献

篇5

（福建广播电视大学晋安校区 福建 福州 350003）

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

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

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

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

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

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

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

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

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

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

再考虑学生的能力方面，他们已经有了对文字、图片和表格的基本处理能力，还学过或同步学习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.