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

前言：一篇好文章的诞生，需要你不断地搜集资料、整理思路，本站小编为你收集了丰富的网页设计教学教案主题范文，仅供参考，欢迎阅读并收藏。

第1篇：网页设计教学教案范文

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.

第2篇：网页设计教学教案范文

关键词：计算机 网页设计 案例教学 应用

中图分类号：G632 文献标识码：A 文章编号：1674-2117（2014）16-00-01

在目前的大学计算机网页设计教学中，大多数教师仍旧采用传统的教学方式进行知识的灌输，较少让学生合作探究、主动学习、讨论交流，因而学生缺少独立思考的能力和亲身实践的经历，导致学生的研究和创新意识相对不足。

案例教学是教师根据特定的教学目的，选择带有一定启发性的典型案例，通过具体的情境让学生提高综合素质和相关能力，理解、感悟、掌握知识的教学方法。案例教学的特点是以师生之间的交往为基础，以案例为线索，以培养学生的能力、促进学生的全面发展为目的，对多种教学方式和教学媒体进行优化。

1 计算机案例教学的特点

1.1 鼓励学生独立思考

传统的计算机网页设计教学没有与实践紧密结合起来，只是告诉学生怎么去做，非常枯燥无味，在一定程度上影响了学生的学习效果和学习积极性。但在计算机网页设计的案例教学中，没人会告诉学生下一步应该怎么做，而是需要学生自己去创造、去思考，让枯燥的知识变得生动起来。而且案例教学的后续阶段中，每位学生要根据自己和同学的方案发表自己的见解。通过交流，一方面可以起到激励的作用，另一方面可以让学生之间取长补短、加强学生的人际交往能力。

1.2 更加重视双向交流

传统的计算机网页设计教学是教师讲、学生学，学生听没听课、听懂了多少，教师也不清楚，要到最后考试成绩出来才能见分晓。而且在这种教学模式下学生学到的都是死知识，难以在实际操作中得到真正的应用。而在案例教学中，学生拿到案例后，先要对案例进行理解，然后查询各种相关的理论知识，无形中学生又对这些知识主动复习了一遍，并且加深了对知识的理解。理解了相关的理论知识后，学生还要经过自主地思考，然后提出解决问题的方案，这一步就提高了学生的实际应用能力。与此同时，因为教师随时会给以学生引导点拨，又促使教师思考相关问题，并且可以随时根据学生的理解情况补充新的教学内容。

1.3 引导学生更加注重实际操作能力

随着计算机网页设计案例教学的发展和市场经济的发展，学生越来越明白，掌握了知识不等于具备了能力，知识还需要通过实际的操作才能转化为能力。如果教师忽视实际能力的培养，一味的教授书本上的死知识，不仅会对学生以后的发展有着巨大的障碍，而且也不利于计算机网页设计教学的开展。

2 教学案例实现的步骤

2.1 设计教学案例

在计算机网页设计案例教学中，设计科学、合理、符合学生实际情况的教学案例是实施该教学方式的基础和前提。教师要充分备课，根据教学要求和教学进度设计案例，解析并讲授与教学案例相关的技能技巧和理论知识。教师在设计教学案例时要注意，案例必须具备典型性、覆盖足够多的知识点，并且要和实际操作相吻合。应该针对学生的学习阶段和学生的接受能力来设计或者选择教学案例，让教学案例能够被学生理解。整个计算机网页设计教学过程中用到的案例之间应该相互联系、由易到难、前后衔接。

2.2 教师组织学生进行案例讨论

组织案例讨论的目的在于引导学生分析问题，提出解决问题的方法和途径。该环节的关键是把理论知识与所对应的案例内容联系起来。要达到这样的目标，就要求教师做好启发工作和引导工作，创造自由轻松的讨论氛围。教师要让学生成为案例讨论的中心，在宏观上指导和把握案例讨论，避免出现方向性的偏差。教师应该把案例分解成若干个小的部分，将案例的分解顺序与学生的知识认知顺序相结合，这样做更能体现根据学生的认知规律来安排教学内容的思想方针。

2.3 对案例进行总结

在组织学生对案例进行讨论研究之后，教师应该针对讨论做出相应的讲评，重点强调案例中所涉及的操作技能和理论知识。在学生上机实践的时候，可以按照课堂上讨论的方案来进行实际操作。案例总结应该做到客观、全面，以提高学生的分析能力为主要目的，充分调动学生参与的积极性。对案例进行总结不仅有利于学生记牢要求掌握的知识，而且可以避免在案例中留下没有解决的问题。

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

（1）准备阶段。教师在课前做的准备包括研究教学内容，寻找具有代表性的案例，充分了解学生关心的话题和兴趣所在、将来的就业方向等问题。学生在课前做的准备包括仔细研究案例、向同学和教师介绍自己擅长的方面等。

（2）实施阶段。将学生分为3～5人的学习小组，让学生根据所学的知识逐步解决各个小的案例问题，如制作一个主页、设计混排网页、设计一个页面等。在这过程中，教师要保障及时检查各个小组的问题解决情况，在必要时要对典型的问题进行讲解。最后，将学生解决完成的所有小案例组合成一个大案例。

（3）结束阶段。该阶段主要是对案例的评价、总结，主要分为学生自评、小组互评和教师评价三种方式。

在计算机网页设计中应用教学案例，可以极大提高学生对计算机网页设计课程的积极性和学习兴趣，有利于帮助学生做出很多高质量的网页。这种新方法注重培养学生的自我意识，发挥了学生在学习中的主体作用，培养了学生的探索精神。

（珠海市第一中等职业学校，广东 珠海 519000）

参考文献：

[1]葛继科，雷亮.案例教学在计算机科学与技术专业课教学中的应用[J].重庆科技学院学报（社会科学版），2011（9）

[2]刘勇.案例教学法在网页设计教学中的应用研究[J].南昌高专学报，2010（6）.

[3]申玉静，谭业武.数据库案例教学在计算机专业专科教育职业化改革中的应用与研究[J].福建计算机，2010（1）.

第3篇：网页设计教学教案范文

关键词：网页设计课程资源资源库建设

课程资源包括教师的教学资源和学生的学习资源，所谓课程资源库的建设主要目标就是收集有价值的资源辅助教师的教学和学生的学习。因此，它的出发点是提升教学和学习效果，关键是在资源的有效性而不在于资源是否丰富。在职业教育中，专业建设和教学改革一直是热门的话题，也受到很多院校的重视。根据我院计算机专业的课程改革和自己的教学经验，我谈谈《网页设计》课程资源库建设的基本思路。

一、教学资源建设

教学资源主要包括课程大纲、校本教材、教案、课件、实训素材等。前期资源建设是一项艰巨的任务，需要一个团队的智慧和努力，而资源建设成型后，可以实现资源共享，提高教师的工作效率，从而教师有更多的时间参与教研提升自己的业务水平。

1.课程大纲

课程大纲决定了课程的主要目标和内容要求，因此它在整个课程的教学中有着非常重要的作用。在我们实际的课程资源建设过程中，首先，我们针对网页设计师这个岗位开展市场调查，了解该岗位的技能要求，再根据自己学校的培养目标并结合《网页設计》课程教学的实际情况制定相应的课程大纲。它不仅要反应出新的技能要求和各知识点的掌握程度，更要突出学生分析能力和创新能力的培养。只有在课程大纲的指引下，我们后续的课程资源建设才能有效地进行。

2.校本教材

一本好的教材无法满足所有人的要求，一个优秀的教学案例也不能完全符合所有学生的要求。因此，围绕自己学校的培养目标进行校本教材的开发是非常有必要的。在进行校本教材开发的过程中，我们要保证案例的真实性和有效性，可以结合企业的真实案例对知识点进行剖析。我们要以学生的发展为基础，充分考虑授课对象的学习基础和知识结构，对教学内容的编写进行适当的处理，避免出现只利于教师教学，不利于学生学习的情况。

3.教案、课件

教学活动的开展要以教案为依据，而教案的编写要符合课程大纲的要求，因此，我们要专研课程大纲和教材的基础上，对我们的教学活动进行精心地设计。我们明确教学目标和教学重难点的前提下，才能对教学内容进行选择和处理，教学过程的设计充分考虑学生感受和体验。编写好的电子教案，不仅是为了上好课，也是为改进下次授课做准备，使一个教案的完善有一个持续的过程。除了编写教案，我们可以做好配套的授课课件，因为它可以得到重复的使用，节省教师的备课时间。

4.实训素材

实训素材不仅包括课堂案例所用的素材，应该包括实训步骤手册，课堂效果评价表等等。素材的准备我们要做到简单、有效而且分类明确，尤其在《网页设计》课程中，用到较多的图片素材，必须要保证能快速的查找。实训手册文字的描述要做到简洁，适当的时候可以通过图片或符号来代替文字，做到直观明了。要充分考虑在简短的一堂课时间内，它的作用是供学生参考，辅助学生的课堂学习。课堂效果评价表的设计可以结合学生的自评和互评，根据教学目标针对性的设计评价要点，目的是让学生认清自己在一堂课中的学习效果和不足的地方。

二、学习资源建设

随着互联网的发展，数字化学习资源变得非常的丰富，也是学生学习的一种新途径。学习资源的建设不仅要确保学生能巩固知识和技能，更重要的是要激发学生的自主学习。学习资源的建设需要借助网络平台，真正实现随时随地的学习，它主要包括微课、作业指南、试题库等等。

1.微课

近几年，微课在教学中的应用非常的广泛，在微课的设计中，我们要做到时间短，重点突出和语言简洁，使学生在观看的过程中快速的掌握要点。一般我们都是针对课程的重点或难点，有针对性的对知识点进行讲解或对操作步骤进行演示。尤其对课堂上掌握不好的知识点，在课余时间通过微课进行巩固，使学生在轻松、愉悦的环境下学会自主研究。

2.作业指南

《网页设计》课程实操性比较强，同时操作步骤较多，学生仅仅通过课堂的学习，对操作要点的记忆并不是非常的深刻。课余作业的目的是巩固学生的学习，我们要保证在做作业的过程中遇到问题能得到及时的解决才能使学生能持续的研究下去。作业指南主要就是为了解决此问题，它不同于实训步骤手册，应该更注重于操作步骤要点的提醒，引导学生有效地完成作业。

3.试题库

试题库不仅是用来检测学生的学习情况，也是学生通过试题库学会灵活应变。试题库可以针对一堂课，一个知识点，一个模块或一个阶段进性设计，同时它可以包括理论和实操。在试题库的建设过程中，要注重试题的质量，做到知识全，针对性强，确保学生在检测的过程中巩固相应的知识和技能要点。

三、课程资源建设原则和意义

课程资源建设是要以培养学生职业能力和素养为原则，重在提高教学质量，促进学生学习。因此，资源建设不能脱离实际的工作岗位要求，避免出现冗余和泛滥的现象，所有资源的选择要考虑教学和学习的需求。同时，资源建设不是一个阶段性的任务，它是永久持续的，必须结合每个时期的情况对资源进行补充和更新，才能保证资源的有效性。

课程资源建设不是靠一个教师的努力，是要一个团队的集思广益，在建设过程中也是培养教师的教科研能力，也有利于教师队伍的建设。在某种程度上，它可以提高课堂的教学效果，突破传统课堂教学的局限性，引导学生进行自主学习。

结语

课程资源建设是教师参与课程开发的过程，同时，它又是为教师的教学和学生的学习服务。《网页设计》课程实际案例多，技术更新快，传统的课堂教学无法满足实际的需求，通过课程资源库的建设，提高课堂教学效果，丰富学生的学习途径和内容，从而进一步推动教学改革。

参考文献 

[1]杜强，潘国芬.高职“网页制作”立体化校本课程建设研究[J].无线互联科技，2017（23）：95-96. 

[2]何启旻，曹智勇.《数据库原理与应用》课程资源建设的实践探索[J].贵州广播电视大学学报，2014，22（03）：14-16+20. 

第4篇：网页设计教学教案范文

关键词：精品课程 学科建设 教学改革

精品课程建设是职业院校教学改革的方向，是专业建设、学科建设的基础。精品课程共享优质教学资源，提高教学质量和人才培养质量，从而深化教学改革。笔者学院在 2012年启动专业课程建设项目，通过近三年的探索与实践，在建设目标、教学方法、数字化资源库建设等方面积累了一定的经验，本文就实施情况谈几点体会。

一、课程性质与建设目标

网页设计与制作课程是电子商务专业的专业技术课程。襄阳技师学院的电子商务专业创建于2006年，在初期就提出根据区域内中小电子商务企业需求，培养具有网络信息编辑、网站策划和维护、网络服务推广等电子商务实用型人才，从而确立了《网页设计与制作》课程在专业技能培养中的重要地位。

网页设计与制作课程在《office基础》《PhotoShop 图像处理》《flas制作》《数据库应用》等课程之后开设，此时学生具备了一定的操作能力，能较快地掌握网页制作的各种知识。

课程坚持“以能力为本位，以就业为导向”的职教理念，以“增强学生的职业能力，更好地服务区域经济与社会的发展”为宗旨，基于行业企业真实工作过程设计课程教学活动方案。运用“任务驱动、行动导向”的一体化教学模式，进行教学资源建设的工作。使学生掌握网页设计和制作的基本技能，具备网站的策划、设计和制作能力。

二、以课程教学改革为核心

1.改革教学内容

（1）修订教学大纲。学院开设的《网页设计与制作》课程，原来的教学大纲内容以Dreamweaver基础知识为主。按照教学计划，学生只能掌握最基本的知识和操作，而实际技能水平无法满足社会就业岗位的需要。因此制作精品课程时，要重新修订教学大纲，以 “实用、够用、好用”为原则，教学内容上适当增加Photoshop、flash的实用功能，强化 Dreamweaver操作应用。修订的大纲打破了传统的学科体系模式，侧重学生实际操作能力的培养，将网页设计职业能力中实用的知识点融合在项目中。学生通过各项系列任务练习，不断强化掌握岗位所需知识和技能。

（2）规划教材与自编教材充分整合。网页设计与制作课程是多门学科的知识相互渗透和相互支撑构成的科学、完整的课程体系。 以网页设计与制作课程为核心，其他Photoshop、flash、数据库开发、常用工具软件的使用等都是相关的辅助课程。

原来的教材换过很多版本。2012年申报精品课程建设后，学校选用人民邮电出版社的规划教材《网页设计与制作Dreamweaver CS5标准教程》。实用的教材对教学水平和教学质量的提高起了极大的促进作用。学校不断调整和补充教材和教学内容，尽可能保持知识的先进性和实用性。这两年劳动版的网页制作教材运用任务驱动教学法编写，也成为学校教学和精品课程制作的重要保证。

（3）课程内容模块化。学校将整个课程内容分成3个模块20个教学单元33个教学任务，3个模块是Dreamweaver+ Photoshop+flash，第一个模块是Dreamweaver网页设计与制作知识 ，第二个模块是Photoshop在网页中的常用功能，第三个模块是Flash在网页中的动画效果。每个模块包括多个教学单元，通过任务来实现岗位知识和能力的培养。模块间既相互关联，又相互独立，将课程难点分散到不同的模块任务中。每个模块自成体系，有鲜明的独立性，能单独完成某一方面的教学任务；模块间的知识相互关联，层层递进，后面的模块强化前面基础，这样可以让学生循序渐进地掌握知识。

（4）精心准备案例项目。精心准备典型案例，从课程的实际问题出发，构建教学设计。以完成具体工作任务和工作过程整合教材内容，将理论知识的讲解与具体的任务有机结合，理论与实践一体化，合理设计教学环节。如：“度假村”“江雨桥的博客”“宠物家园”整站的开发和设计，这些案例形成循序渐进的项目群，从而构建完整的教学方案。

2.改革教学方法与手段

（1）采用“任务驱动法” 教学，将“教、学、练、做”融为一体。精品课程教案的编写运用任务驱动法完成，对教师课堂实施一体化教学方式有很好的指导作用。课堂教学中，“任务驱动法”的熟练运用，配合案例教学、情景教学、探究式教学、作品演示等教学方法，将学生的自主能动性充分发挥出来。“任务驱动法”教学过程为：引入―分析―交流―实施―评价―总结六个阶段。第一个阶段引入任务，通过案例演示，提出问题，给出案例应用背景，让学生明确本次课的教学目标；第二个阶段分析任务，引导学生自主分析学习任务，结合理论知识尝试找到解决问题方法；第三个阶段交流任务，充分利用互联网网络教学资源和教学视频，引导学生相互交流，找到解决方案；第四个阶段实施任务，上机操作反复练习，掌握操作技能，培养学生的自主学习意识和学习能力；第五个阶段评价任务，在小组任务完成时，根据任务评价表引导学生进行典型作品的欣赏评价，让学生参与自评和互评；第六个阶段总结任务，教师对本次课的重点、难点归纳，并针对学生实施过程进行点评。

（2）抓好数字化资源建设。精品课程中不断完善的教学大纲、电子教案、教学课件、教学视频、案例集等对一体化教学课堂的实施提供了保证。这些数字化资源会陆续上传到精品课程网站的教学资源下载中心，构建全方位立体化学习平台供学生学习参考。

（3）因材施教，有效把握课堂。任务驱动法对于自觉性高、学习能力强、创造能力佳的学生充分有效，但是学校的生源相当一部分不能适应这样的教学。针对不同的教学内容、教学对象、难易程度，教师需要灵活采用多样教学方法，有时传统的教学方法更为实用。例如：讲授法、演示法、练习法、辅导法、启发式教学等。必须注意把握课堂秩序，使课堂教学在有序中有效进行。

3.改革考试评价方式

精品课程注重对学生职业道德、学习过程、职业能力与素质的评价。每项任务的实施都配有任务评价表，评价表给每个子任务的完成效果、学习过程、相关能力打分。同时根据学生的基础差异，使用弹性的评价方式。评价时注重创新性的学习能力，合作共事能力，注意听取学生的自评意见。

三、精品课程建设的思考与展望

经过近三年的建设探索与实践，《网页设计与制作》课程将努力建设成为具有实战特点的教学内容、科学合理的教学方法、较为完善的课程教学体系，能够适应本学科人才培养的示范性课程。课程建设期间，取得预期效果，也存在以下问题和困难。

课程的开发难以表现技术的前沿动态。网页设计涉及各种绘图软件和各类开发工具的使用，网络技术的发展极其迅速，软件开发技术日趋多样，一门课程很难覆盖这么多内容。

课程对推动地方经济建设的导向作用不够明显。主要表现在与企业合作不多，学生在本地企业顶岗实习的机会不多，学生的实操能力也达不到要求。

针对以上问题，应加快精品课程网站建设，尽早建立教学共享资源库。数字化网络教学资源构成立体化教学模式，给教师和学生提供全方位学习平台，师生基于这种平台，使学习过程得以延续。

第5篇：网页设计教学教案范文

本文分析电子商务专业学生学习网页设计与制作课程教学现状，并探讨了电子商务专业网页设计与制作课程教学设计、实施及考核环节，通过该课程教学改革提高学生学习兴趣，并能提升个人建设网站的综合能力和素质。

关键词：

电子商务；网页设计与制作；学习反馈；任务循环

1网页设计与制作课程教学现状

（1）学生欠缺计算机和美学设计基础知识。

没有计算机基础课程，且课程学习课时较少，对网页基础知识理解较为费解，美学设计的欠缺，导致网页设计能力差，虽然能够也能制作简单网页，往往布局不合理。审美能力弱，有时追求个性，制作的网页往往花里胡哨，内容和主题不一致，导致网页视觉效果差。

（2）学生逻辑思维能力差。

由于文科类电子商务专业特点，该专业学生逻辑思维相比理工类专业学生逻辑思维相对欠缺，对于网页布局处理能力和网站的规划能力较弱，甚至理解有一定困难。在这些方面的不足，导致学生学习起来感觉难度较大，学习积极性不高。

2网页设计与制作课程教学设计

任课教师首先选用结构设置全面，讲授内容多较为充实的教材，这样使学习兴趣比较高的学生课下可继续学习。同时给学生提供一些关于计算机基础和平面设计类参考资料。向学生介绍网络上一些比较专业网站开发论坛。任课教师在设计教案时设计内容以选取教材为主，以选取其他同类教材为辅。尽量使章节框架齐全，章节内知识点丰富全面。每个知识点都选取相应案例，这样学生易于理解。将网页设计与制作课程内容分为七个模块，按照每个模块的知识点，依据教学目标设计要求学生课堂和课后完成的小任务[1]。第一个模块为网页设计与制作理论基础知识：介绍INTERNET基础知识、网页设计相关概念、网页制作开发相关技术和工具，共2个课时，使学生掌握该课程整体框架。第二个模块为HTML基础知识：修饰标签实现网页文字的设置；设置列表；插入图片和多媒体内容；设置超链接。共10课时，通过该模块学习，学生能掌握HTML网页标签建立个人主页。第三个模块为表格和表单：表格基本概念和常用属性；表单基本概念和常用属性。共6个课时，通过该模块学习，学生掌握使用表格整理数据和布局网页，利用表单设计注册页面。第四个模块为层叠样式表（CSS）：CSS的基本语法；CSS的选择器；CSS的使用方法；CSS的属性单位。共12个课时，通过该模块学习，学生能够利用CSS样式美化网页。第五个模块为CSS网页布局与定位：div标签；span标签；盒子模型；display属性；float属性；position属性；css+div布局类型。共9个课时，通过该模块学习，学生能够运用制作学校网站导航条和实现图文并茂的效果。第六个模块为超链接伪类、表单设计和导航菜单：共6个课时，通过该模块学习，学生能够使用伪类美化超链接，用CSS美化表单并能够制作各式各样的导航条。第七个模块为网站建设：网站建设的步骤；网站建设的原则。共6个课时，通过该模块学习，学生能够建立主题网站。

3网页设计与制作课程教学实施

3.1课程教学

（1）课堂教学

①基础知识学习，任课教师将课程的知识点通过多媒体教学进行详细的讲授，选择合适案例进行演示，尽量涵盖能够覆盖每个知识点，这样图文并茂的传授能够调动学生的学习兴趣，提高课堂教学效果。②任务实践，任课教师根据知识点设定各个任务，布置的任务能够覆盖所讲授内容所有的知识点，每个任务和前后任务都具有连贯性，这样能够在前次的任务基础开拓这次任务，对以前学习的知识点不断巩固。③学习反馈，在学生初次完成任务后，任课教师总结学生在任务执行过程中存在的问题并给出解决问题的办法和技巧，这样能都深化学生对知识的理解。④任务循环，学生在反馈学习之后再次根据老师指出的问题和提示对自己的作品进行改进。通过这种任务循环的方式使学生对于知识点的掌握会更加的深入理解，培养其精益求精的网站开发人员的素质。⑤任务总结，在所有的学生完成任务后，教师再次强调任务知识点的难点和重点，分析技术问题和处理技巧，并布置学生要在课下完成的小任务。

（2）课下自学

学生仅仅依靠在课堂上学习和练习，以达到对该课程熟练掌握的目的是远远不够的，所以要按照每个模块的知识点，依据教学目标设计学生课后完成的小任务。通过qq群和微信群沟通平台，学生之间和师生之间可以随时随地进行沟通和资源共享。鼓励学生多参加学科竞赛，达到以赛促学。

3.2课程考核

①平时考核。学生根据所学知识点，独立完成任课教师布置的任务。根据完成情况，记录为平时成绩，成绩等级分为没完成（C）、基本完成（B）、超越完成（A）。该成绩真实反馈学生知识掌握情况和动手能力的高低。平时考核在课堂结束前10分钟内完成。②项目考核。在第17周课程教学结束时布置设计并制作网站项目任务，网站项目作为该课程完成后的综合性考核，要求每个学生设计并制作一个表达某个主题的网站，向学生明确对网站评价的一系列标准，并要求根据提交项目设计制作报告书。并在课程教学第18周进行网站项目演示，每个同学在全班同学面前通过多媒体演示自己的作品，限时十分钟，教师进行点评，指出需要改进的地方。该过程既是学生利用所学知识展示自己的能力的时候，又是学生学习别人的机会。③考核成绩。该课程考核成绩计算方式及其所占比例如下所示：平时考核成绩=(完成每个子任务成绩之和÷子任务个数)×40%+出勤率×40%+课堂讨论×10%+课堂笔记×10%项目考核成绩=项目网站设计与制作报告书成绩*30%+项目网站设计与制作成绩×70%学期成绩=平时考核成绩*30%+项目考核成绩*70%

4结束语

该课程教学改革后对大部分学生进行调查访谈，虽然有很多学生反映课程压力较大，但是学习兴趣很高，学生实践中开发了自己的潜力，并激发了他们直面困难客服困难的创作创新精神。

作者：张亚杰 刘 单位：宿州学院

参考文献：

[1]李月辉,姜还红,云岩.基于CDIO的Java系列课程教学改革的研究[J].黑龙江科技信息,2015(11)：162.

第6篇：网页设计教学教案范文

网页设计是视觉传达设计专业中十分重要的专业课程，本文以当下新媒体技术为依托，分析高校网页设计课程教学目标的变革，针对网页设计的课程特点，对该课程的教学现状、教学内容、教学手段等方面进行详细的阐述，提出方法改善课程的教学效果，并探讨如何利用本专业学生的优势，丰富网页的视觉效果，提升设计的原创力，引导学生在新媒体语境下顺利实现艺术与技术的高度融合，培养新型的应用技术型人才。

关键词：

视觉传达；网页设计；课程教学

随着多媒体技术的不断发展，信息传播方式也相应的发生转变，人们工作和学习越来越离不开互联网这个信息平台的支持，视觉传达专业作为站在学科发展前沿的设计类专业来讲，首当其冲的受到了前所未有的影响，专业类课程的设置也必须是紧紧的围绕着符合当代审美需求，顺应时下技术实现的趋势。视觉传达设计专业的前身是上个世纪从欧洲传入中国的平面设计，科技的高度发展及人类文明的不断进步，以及各种新型媒介的出现，使得原来处于二维平面的信息元素向着动态的、三维甚至是多维空间发展，专业本身的复杂性、包容性都决定了它是一个多元素融合、多领域交叉的学科。

一、视觉传达专业网页课程现状分析

网页设计是一门综合性很强的专业主干课程，长期以来艺术院校的网页设计有两个误区，一是着重教授网页的色彩搭配，版面的设计，各个块面的分割等原来平面设计中关注的知识点，忽视了网页本身的功能；二是注重独立元素的制作或者单个网页的设计，缺乏对整体案例的分析、策划，这样造成的结果是学生可以很好的完成单独页面的设计，但分级页面之间的关系往往混乱不堪，网站的导航功能基本失控，网站失去了原有的完整性和条理性，教师无法真正落实教、学、做一体化课程的体系。原有的网页设计在教学中更多注重的就是网页界面上的平面元素的信息阅读，然而在这样一个新媒介当道的语境下，网络媒体的普及和深入为网页设计提供了更加宽广的舞台，也对网页设计者提出了更高的要求。视觉传达专业的课程教学要求也必须跟上时展的节奏，从静态的用photoshop就能完成的网页界面设计向着有一定交互功能和新信息传播形式转变，设计者不但要学习如何做界面，还要掌握基本的HTML计算机语言，学习简单的代码，学习以Flash和Dreamweaver为主的设计软件使基本的网页功能实现，同时，网页设计不能单独的割裂的讲诉单个的页面，各个分级页面的逻辑条理，恰恰是最为核心的内容，技术的更高要求使得教学成为了提升学生设计技能的关键，在此，结合当前各个设计类院校视觉传达专业现状，笔者提出关于教学新形式的几点思考：

二、课程教学内容方面的改革

视觉传达专业具备很强的学科兼容性和交叉性，因此要求学生具有行业综合能力。所有的教学行为的开展都必须结合更多的实践，明确以实用为目的的教学方向，方能符合当前国家所倡导的应用技术性人才培养模式要求。

1）从网页设计所涵盖的市场需求来看，学生需要注重行业能力的要求。比如，视觉传达这个概念其实包含着“视觉元素”和“传达信息”两个方面，视觉元素的设计从大一开始，形式基础、设计色彩、版式设计、图形符号构建等基础课就重视对这方面能力的培养。而对“传达信息”的理解就离不开品牌管理、市场策略、营销传媒等相关学科知识。网页中尤其要注意以用户为中心的信息可视化设计，设计的质量水平直接影响用户接受信息的效率和体验。教师在讲授网页知识的同时，一定不要孤立的片面的传授知识，要建构各个课程之间可结合的网点，为这个庞大的综合性课程服务。

2）从网页设计的实现方式上可以知道，网页设计具有明显的技术性特征和团队协作的工作特点，但是在实际的教学中，设计实践环节却十分薄弱，这就让学生的理论知识失去了检查和锻炼的机会。因此，在课程教学中，根据本课程特点，针对的案例主要以项目制为主，教师可将学生分成若干个小组，分别按公司岗位设置任务，应加大市场调研分析的力度，对网页设计的对象进行真实客观的市场调研，按照公司制作网页的流程，分组进行市场调研、讨论，分析资料与数据，并在此基础上有意识地要求学生将设计构思以条理性的文字表达出来，形成设计策划，完成整体网站策划书的撰写，制作网页原型，并最终完成网站的建设。在课程最后的考核评价阶段进行设计提案，模拟公司设计流程，避免盲目的，假设性质的设计。在这个过程中，学生充分了解了网页制作的全部流程，与实际项目进行对接，增强了实践性，缩短了学生进入公司的磨合期。

3）教师可以从学生初步完成的作业中筛选出较为优秀的稿件雏形，组织学习小组深化设计，这样做的目的在于可以高效的组织学生团队参加国内外的专业竞赛，提高学生参与的兴趣，增加学生作品获奖的可能性，并将有潜在经济价值的设计作品产品化，推向市场，这样不仅能丰富本门设计课程教学内容，更能提高学生的综合能力，在这方面，有不少学校已经做出了尝试，并取得了较为显著的效果，可以为更广大的师生借鉴。因此，与时俱进，符合市场发展规律且能创造价值的教与学，更具有竞争优势，更能“可持续发展”。

三、课程教学方法方面的尝试

1、稳定的资源库建设

高校的专业课程学时有限，不可能在课堂上将网页设计的所有内容全部仔细讲解，笔者的经验是课堂上宝贵的有效时间用来讲解最为重要的思路引导和工具操作，因此，增设课前环节尤其重要，鼓励学生课前预习，扩充知识面，这需要教师事先做大量的准备工作，创建课程辅助网站，将课件、教案等与课程内容相关的资料拷贝链接入网站中，链接优秀网站的网址并随时进行更新，利用现有的技术手段，将微课视频、慕课等新型课堂形式融入其中，学生不再接受填鸭式教学的折磨，做到按需教学，分类教学。

2、灵活的分组协同模式

由于高年级的专业课程涉及到的知识面十分宽泛，一个综合课程项目的完成往往包含大量的辅助调查、统计、测评等工作，实施分组教学是非常有效的手段，既可节约设计主体在额外任务中的时间，加强竞争意识，还能加强学生自主学习的能力，团队协作、提案表述的能力都能获得很大的提升。

3、必要的跨学科交流

目前的高校网页设计类课程，有两类主要的学生人群，以计算机专业为主的工科院校和以视觉传达专业为主的艺术院校，我们可以利用工科强大的后台技术优势，为艺术与技术的紧密结合提供了良好的平台。授课过程中，可以聘请计算机专业的老师进行相关技术的讲解，并将其网页设计课程的作业进行展示与交流，充分发挥艺术生的特长优势，虚心弥补工科生的技术专长，取长补短，相互学习。

四、结语

随着新媒体技术的不断涌现，市场需求不断变换，人们的审美方式和倾向也发生着变化，陈旧的专业培养方式和教学手段已经无法满足学生对新知识新技能的渴望，很多专业的课程设置不可避免的出现了滞后问题，如果没有时刻把握前沿的触手和长远发展的战略眼光，教学方式和手段也将严重落伍，这要求我们从视觉传达专业客观实际出发，顺应互联网时代步伐，加强教师对教学内容和教学方式上的创新培养，突破常规，善于利用新兴的教学手段和技术支持，开发新型教学模式，以适应市场变化带来的对视觉传达设计专业的新要求。

参考文献：

[1]李荣刚.视觉传达专业中的网页设计课程探索[J].美术学刊，2012，(10）.

[2]何磊孙志宜.视觉传达设计专业课程教学改革与创新[J].合肥师范学院学报，2015，（1）33期

[3]魏坤.视觉传达设计专业发展现状与教学对策——以汉江大学设计学院为例[J].中国艺术，2013，（4）.

[4]戴士弘.职业教育课程教学改革[M].北京:清华大学出版社，2007：13-15

第7篇：网页设计教学教案范文

关键词:平面设计;课程网站;网页设计;布局;模板;流媒体

中图分类号:TP393文献标识码:A文章编号:1009-3044(2009)24-6944-03

The Construct of Course Website of Graphic Design

MA Qiu-fang,ZHANG Bo-lun

(Qingdao Huanghai Vocational College, Info-Engineering Faculty,Qingdao 266427, China)

Abstract: Network-based teaching is possible with the popularity of campus network. One of the most important elements is establishment of website in teaching reform. It is focus on the necessity, location construction of the website. The principle in the website design with image processing software and web page design software is introduced in detail. The keys such as update of the website are also given in the paper.

Key words: graphic design;course website;web design;layout;template;streaming media

1 网站建设的背景及意义

计算机网络技术以及多媒体技术的快速发展推动了教学模式和教学手段的变革。我校的校园网已经建立,由于教学信息资源的匮乏,难以发挥其在教学科研中应有的作用,建立相应课程的教学网站势在必行。

教学网站是通过网络表现教学内容和实施教学活动的综合性教学系统,借助于多媒体和流媒体技术,为学生提供一个自主学习的环境。

平面设计课程是我校高职艺术类专业的一门主干课程。根据实际需要构建平面设计课程的教学网站,有助于激发学生的学习兴趣,提高课程的教学效果和影响力。

2 网站的前期准备

2.1 需求分析

平面设计课程教学网站的浏览者是教师和学生,需要提供课程的教学大纲、电子教案及案例素材等教学资源供学习者使用,提供课后习题以检查学习效果。此外,网站还应该实现师生之间的互动,形成一个有信息反馈和实时或非实时交流的系统。

2.2 风格定位

课程网站的风格应当美观大方、简洁明了,界面的设计体现友好和谐、方便用户操作。风格取决于布局和色彩。

网页布局结构大致可分为“国”字型、拐角型、标题正文型、左右框架型、上下框架型、封面型等[1]。无论采取何种结构的网页,都应遵循突出主要内容、主次分明这一原则。本站点的网页采用拐角型结构,正文部分纵向分隔为两栏,这是一种规范理性的分隔方式,类似于报刊的版式。

网站的页面主色调为海蓝色,海蓝色令人想到独立和创造,代表着美好的未来。通过调整透明度和饱和度对色彩进行变淡或加深渐变等的处理,产生新的海蓝色的近似色彩,整个网页看起来色彩统一,又不乏层次和变化。页面中还使用了淡灰色的背景图像,给人以遐想的空间,对于协调页面的均衡也起着很大的作用。

2.3 方案设计

2.3.1 网站栏目及栏目简介

根据需求分析,平面设计课程网站需要建立以下几个栏目:

(1)课程简介。简要介绍了平面设计课程的性质和说明,使用的教材及参考教材。

(2)课程建设。本栏目具体介绍了课程负责人和主讲教师的基本信息,课程的教学目的、教学设计思想和教学手段,课程的教学特色,考核方式和课程评价。

(3)教案与视频。该栏目提供了平面设计课程的CAI课件下载,重点章节的教师授课现场视频以及说课形式的课程整体介绍视频,帮助学生更有效的学习或复习。

(4)学习指南。网络教学不同于课堂教学,不能只提供教案课件,还需要提供学习指南指导学生的自主性学习[2]。本栏目包括本课程的知识结构、教学大纲、各章节学时分配,各章节的主要内容和重点难点以及课程进度表。

(5)实验实训。该栏目提供了平面设计课程的实践性环节,包括平面设计的精彩案例制作步骤以及所需素材的下载,用于拓展知识面。

(6)习题与试卷。包括各章节的相关习题、历年考题以及平面设计师认证考试的模拟试题,方便了学习者的自我检测。

(7)学生作品。选取优秀的学生作品和大赛获奖作品进行展示。此栏目不仅能够激发学生的积极性,又展示了课程的教学效果,对学校的教学起到宣传作用。

(8)讨论区。在讨论区学生可以进行学习交流、资源共享、信息以及作品展示等,该栏目加强了师生之间的联系。

2.3.2 网站拓扑图

图1为网站拓扑图。

2.3.3 确定设计工具

开发一个好的课程网站要选择好开发工具和开发技术,网站的静态部分使用Dreamweaver来制作,利用Photoshop设计网页界面和处理图像,网站的动态交互部分采用ASP和SQL实现,IIS为系统运行服务器。

3 网站建设

3.1 设计首页界面

3.1.1 绘制首页草图

确定了首页各项栏目及位置之后,开始设计首页的版面,将首页做一个简单的规划(如图2所示),包括导航栏、网站Banner、正文、版权信息。

3.1.2 首页效果图

使用Photoshop制作效果图,将文件规格设置为宽度780像素,高度800像素,分辨率为300像素/英寸。效果图制作完成后借助参考线进行划分,然后使用切片工具沿参考线切片(如图3所示),并将其存储为Web所用格式,系统则自动生成一个文件夹,保存所有的切片。

需要注意的是:切片时要按照Dreamweaver表格能实现的区域进行划分,切忌切片过于复杂[1];为了整个网站风格的统一,网站中的其他网页也采用类似的形式。

3.2 创建站点

在制作网站时创建一个本地站点文件夹,这个文件夹用来存放和管理站点中的所有文件,该文件夹的四个子文件夹,分别是image、video、courseware、works,分别用来存放网页的图片、教学视频、电子课件和学生作品。

启动Dreamweaver新建站点,站点名称为“平面设计课程教学网站”,本地根文件夹则设置为上面所建的本地站点。

3.3 网站建设中的关键点

3.3.1 网页的布局

网页的布局方式一般有:表格布局、框架布局及层布局。本站点中的网页采用表格布局,表格比较容易设置和定位,方便管理调用,比较适用于排版统一的网页[3]。不采用单一层进行布局是因为层的绝对定位方式导致网页的稳定性不高,层的位置会跟随显示分辨率的变化而移动,造成页面混乱。

3.3.2 模板和库的使用

由于网站中所有网页的布局和界面大体一致,在制作和修改网页时借助模板减少重复的工作量。避免了相同部分的输入,而且在更新网站时,只需修改模板,系统就能自动更新基于这个模板的所有网页。

此外还将网页中的内容的许多共性部分(如版权信息等)定义为库元素,将其应用在每个页面需要的地方。与模板类似,当相关信息发生改变时,不必每个页面都进行修改,只需修改库元素就会自动更新全部网页。

3.3.3 锚点链接

实验实训、学习指南、学生作品等网页的特点是内容分类多,但各项包含的内容少。如学生作品分为海报设计、包装设计、书籍封面设计等七个分类,而每一类展示的作品只有八幅,这样就可以在页面的右侧设计一个内部导航条,为其添加锚点链接。

这种设计方式是将全部内容放置在一个页面上,浏览时利用锚点在同一页面的不同位置进行跳转。这样一来,在浏览不同类别的内容时无需打开新的页面或刷新页面,提高了浏览速度,而且维护方便,省去大量重复代码,减少了文件容量。

3.3.4 流媒体

教案与视频页面需要将教师授课视频上传至网站,考虑到传输网络的带宽、观看者等待时间和视频分辨率等因素,将所有视频统一转换为Flv格式。Flv的全称是Flash video,是一种流媒体的格式,边下载边播放,形成的文件较小,加载速度快,分辨率适中。

3.3.5 以学生为中心

在网站的规划和实现方面都坚持以学生为中心。例如:针对不同水平的学生提供不同的教学进度和学习目标,并配合难易度不同的课件、教学视频以及课后习题;在讨论区设置教师答疑版块,集中解决学生学习中遇到的问题;设置反馈意见电子信箱,收集学生的意见和建议;网站栏目和内部导航条的划分符合学生的认知心理等,真正实现了由以教师为中心向以学生为中心的转变。

3.3.6 网站的更新

一个好的课程网站不仅需要建设,更需要不断更新维护。许多高校都建立了课程网站,但是建成后没有后期的更新维护,成了“一建了之”的工程,降低了网站的生命力,没有达到促进教学的最终目的。

平面设计课程发展速度很快,软件不断升级、国际流行设计不断变化。笔者刚接触Photoshop时的CS版本升级到现在CS4版本只用了四年的时间,增加了几十项功能。为了让课程跟上时代的步伐,不断吸纳最新的教学成果和研究成果,完善的教案、习题、视频等教学资源[4],并将讨论区里优秀的学生原创作品提炼出来充实到网站中,实现网站的滚动建设,延长生命力。

4 总结

课程网站的建设是教学模式和教学手段改革的一项重要内容,课程网站可以实现优秀教学资源和教学成果的共享,提高教学质量。通过一年的运行证明效果良好,学生自主学习的积极性增加,教师的业务水平也有所提高。课程网站的建设是一项长期的工作,需要在教学实践中不断总结和完善。

参考文献:

[1] 智丰电脑工作室.Dreamweaver8网站设计制作入门与提高[M].北京:中国林业出版社,2006.290-292,298.

[2] 王向红.“微机原理及接口技术”课程网站设计和实现[J].中国现代教育装备,2007(9):51-52.

[3] 王凤兰,赵应旺.花卉精品课程建设中网站的构建初探[J].农业与技术,2007(7):164.

第8篇：网页设计教学教案范文

【关键词】理实一体化；网站规划与网页设计；课程改革

《网站规划与网页设计》是针对网络技术专业学生网站规划与网页设计方向开设的一门经过整合的专业核心课程，它涵盖了Dreamweaver使用、Firework切图、Flas制作、HTML语言、SQL数据库和六大部分内容，分为上、下 两部分分别在大一下半学期和大二上半学期开设，学生通过学习本课程，掌握静态和动态网站的设计和规划、布局、美工、基本操作技术等方法。

通过工作过程导向的项目教学，学生掌握网页图片处理、制作等的基础知识与技能，能够根据不同主题选择图片类型，能够熟练的使用Photoshop等图形图像处理软件；根据需要完成网页动画元素的合成，能够熟练的应用Flash软件完成网页动画元素的制作，能够熟练应用Dreamweaver软件完成网页的布局，完成前台页面的制作；能够熟练应用SQL软件，建立数据库和数据表；能够使用T-SQL语句对数据库进行操作；能够在平台上制作动态网站。树立良好的职业道德意识，具有一定的创新思维能力和科学的工作方法，为职业能力发展奠定良好的基础。

当前高等职业教育的办学目标是培养高素质高技能型人才，而传统的教学方法存在一些局限性，无法更好的提高学生的实际动手能力，所以对该门课程进行理实一体化教学改革是势在必行的。

1、课程改革的指导思想

所谓理实一体化教学是指理论实践一体化教学方法，即讲授与操作一体化实施；教室、实验室和实习场所一体化配置；专业知识、操作技能与职业技能考核一体化训练的一种教学方法。它不是将理论教学和实践教学进行简单组合，而是通过实践教学使学生能更好的掌握和理解理论知识，达到理论教学和实践教学相融合，为学生的后续发展打好基础。

（1）以能力为本位为指导思想

以能力为本位的思想已成为国际职教界的共识。课程建设与改革的最终目标，就是培养学生的关键能力和职业能力。职业能力指从事职业活动所需要的知识和技能，它是劳动者胜任职业工作、赖以生存的核心能力；关键能力指那些与具体的职业和专业无直接关系，但对于一个人在现代社会中的生存和发展起着关键作用的能力，其目的在于填补学校教育与产业界实际之间的断层与空白。

（2）建设“理实一体化”的新型课程模式

课程改革必须充分体现“以学生为中心”的课程思想。“以学生为中心”的主要特点包括：“学”重于“教”；教师的作用是评估、判断、建议和指导而不仅仅是信息与知识的传递；形成“自组织”和互动的教学情境；发展学生的经验和技能；课程的灵活性与个性化。

所以在进行整个课程建设时，我们始终将“理实一体化”贯穿始终，以实际操作为主，通过实际操作来引导学生理解知识点。

（3）开发“任务驱动”的学习进程

课程改革倡导开发“任务驱动”的学习进程，在教学活动中实践“以学生为中心”的课程思想。学生通过完成“项目任务”进而完成课程的学习，同时其“成果”用作学生评价的主要依据。这种采用“任务驱动”的学习进程，能够有效地促进教学过程中的师生互动，有利于培养学生自主学习的能力和方法。

（4）建设丰富多样的教学资源

本课程的教学资源种类丰富，包括教学计划、课程标准、教学指导书、课件、教案、参考资料、参考视频以及在线资源等。

2、课程内容的教学改革

《网站规划与网页设计》作为我系计算机网络专业的核心课程，学生只有通过本门课程掌握了网站的设计和规划、布局、美工、基本操作技术等方法，才能更好选择就业方向，并且我们也走访了包头软件园，对一些软件公司进行了调研，确定了本门课程在行业职业标准中的职业资格定位为网页设计师和网站程序员，因此按照理实一体化的思路对本门课程的内容进行了重新的整合和设计，将教学内容设计成十四个学习情境，十四个学习情境分别为：网站策划与创建、表格布局、div+css布局、框架布局、利用模板制作和更新网页、表单页面的制作、行为与网页特效、flas设计、HTML语言、设计制作网络计算器、SQL数据库操作、留言板制作、综合实训一和综合实训二。针对每个学习情境都设计了相应的实际案例，教师通过对案例的讲解和演示，使学生先动手会操作，在操作过程中，将相应的基础知识点带进实际操作中，使学生把实践与理论联系在一起，进一步提高学生的操作水平，针对理解能力和接受知识能力强一些的学生，又设计有拓展知识点，使这部分学生掌握更多的理论知识。真正做到学生通过实践理解并掌握理论知识，做到“做中学，学中做”。

3、教学方法改革

传统教学方法在本门课程的传授过程中存在一定的局限性。比如在讲解学习情境二表格布局时，传统的方式是先讲解表格的使用及属性的设置，然后让学生练习表格的使用，虽然他们学会了表格的各项设置，但在使用表格进行页面布局时，学生往往却没有办法下手，不能进行灵活运用，无法将将理论和实践知识进行了联系，所以我们对教学方法进行了改革，本门课程现在采用的教学方法有以下几种：

（1）任务驱动教学法

教师根据教学内容准备一个或多个项目。利用设计项目的过程引导和组织学生开展学习，在活动过程中进行学生互评、教师点评，再结合成功的项目给予演示。由项目引出教学内容，由点到面，砌砖式地演练整个网页设计项目的设计与制作过程，通过项目过程来培养学生掌握网页设计知识的应用，实现整个教学内容。

（2）六步法

每个学习情境都按照“资讯、计划、决策、实施、检查、评估” 六步完整的行动过程。在教学过程中教师与学生互动，让学生在教师的指导下“获取信息”、“制定计划”、“实施计划”、“评价所做结果”，在自己动手的实践中，掌握职业技能，习得专业知识，从而构建属于自己的经验和知识体系。

（3）案例分析

在进行教学时，教师对每个学习情景都设计好案例，然后进行在上课的时候明确任务、教师演示、学生设计、展示评价等。

（4）分组教学法

在实训教学环节，课程通过项目分组的方式把学生分为若干项目小组实现分组设计。分组设计过程中，课程采用角色扮演的教学方法，每个项目分组扮演企业中的项目制作团队负责制作网页设计项目，授课教师扮演企业中的业务经理，负责向项目制作团队分配项目并对制作过程和制作结果进行监督与验收。

（5）课堂与实践一体化教学方法

在教学场地上的安排上，将课堂安排在实训基地，教师通过投影设备演示制作过程，评点学生团队作品。学生就地实训，一边学习理论内容，一边实训练习。

4、课程考核方式的改革

第9篇：网页设计教学教案范文

摘要：在一体化课程的改革、工学结合理念的更新时期，网站开发专业课程的教学也步入改革。我们在改革课程的时候，重视学生自主学习、自主创新、合作能力的体现，并且充分展现新网站开发课程与社会企业需求的结合。本文对网站开发专业的开设课程、课程内容开发、教学手段、评价方法等进行研究。

关键词 ：网站开发　教学　改革

近年来随着互联网应用领域快速发展，不少企业都在网上建立网站，宣传品牌、推广产品、提供网络服务。自2003年开始，中国的网站规模基本保持翻番增长，2009年网页数量达到 336 亿个，年增长率超过100%，网页设计已经成为当今社会一种热门的新兴职业。为此，各学院都纷纷开设网站开发课程，来满足社会对这方面人才的需求。笔者在此对网站开发专业的开设课程、课程内容开发、教学手段、评价方法等进行研究与探讨。

一、传统网站开发专业课程存在问题

传统学院的网站开发课程是我们用熟悉的Dreamweaver、photoshop软件制作网站的课程。这门课程是实践性很强的课程，具有丰富的图形界面，可以在网页上看到布局的效果。这本该是一门比较容易出“成果”的课程，但该课程教学仍存在以下问题。

一是传统教学内容都是1～2门课程，包含页面设计、布局、后台功能，学习内容比较浅，学习时间比较短，同时部分课程内容在企业中已被淘汰，如：表格布局、flash等，而Html5、Css3新技术的兴起在企业工作中却是必不可少的。这些问题导致学生在学校学的技术和到企业做的不一致，同时无法达到企业要求的深度，在毕业后无法接轨企业，这是学校面临的比较大的问题。

二是传统教学模式主要通过“理论+实践”的方式组织教学过程，选取课本后编写教学计划教案，按书上章节的内容在计算机房进行讲解实践。由老师进行讲解、示范、辅导，学生按教材要求完成相应学习内容。我们可以看到在教学的过程中，老师都是“填鸭式”地教，学生都是跟着老师在做。最终学生只学会了做这个网站，而换一个主题则完全无法完成。这种方式看上去学生一直在实践，却达不到培养学生实践能力的目的。原因在于学生只学会跟随老师去做，而忽略学生学习过程中的自我思考、自我学习、自我创新能力，而这正是网站设计人员最重要的能力。

三是传统的教学评价方法都是以理论进行考核，但这样的考核方式却无法检验学生的实践能力，就算理论满分也无法满足企业的需求。

二、网站开发专业教学的改革建议

1.重新确定培养目标及课程

因网站开发领域的不断发展，网站开发课程已可以独立成为一门专业，而且该专业相关的岗位较多。为贴近企业的用人需求，我们邀请专家进行专业访谈会，首先从网站开发流程了解企业岗位。一个网站的开发主要经过产品经理—网页美工—网页重构—前端开发—网站功能开发—网站测试—网站运营维护的过程，因此确定学生就业目标的岗位有网页美工、网页重构、前端开发、功能开发、网站推广。接着从岗位中确定课程，如：“网页重构”岗位需要开设“web标准化布局”课程。最终，确定几门课程为专业课程（见表1）。按照职业发展的过程，可以将课程分为中级和高级阶段。对于比较难掌握的学科网页脚本编程等，可分两个学期进行讲解，以便于学生循序渐进地学习。

2.开发工学一体的课程内容

在课程开发中，我们从企业该岗位工作中提取真实的工作任务，并转变成为学习任务，例如：web标准化布局，可以提取企业网布局、门户网布局这两个比较典型的任务作为学习目标，因为学生最终到企业，很可能需要完成这两个工作任务。同时发现，在学习中，直接给予学生的企业工作任务难度较大，所以我们在开展企业网布局和门户网布局这两个任务之前需要添加两个有趣的小任务（百度网布局和个人博客）作为热身，熟悉任务，以使学生能够从易到难地完成任务。表2是web标准化布局最终的4个任务。在开发教材任务的时候，还需要注意按照企业实际工作的流程分解开发。如“个人博客”任务就可以从规划效果图—html布局—css美化网站—测试验证网站这几个小活动流程中去完成（见表3），以便学生在学习过程中了解到企业真实的工作情况，同时养成执行企业工作流程的习惯。

3.教学方法的改革

在教学中，应该改变以往的老师灌输、学生听讲的教学方式。教师应该多以学生为中心，多给予学生开放性问题，引导学生思考问题，让学生自觉地完成任务。例如要完成一个“IT产品销售网站”，我们不应该直接动手打代码演示，直接完成企业网布局，让学生跟随操作。在学生接到任务后，教师应该引导学生做客户需求调研，根据企业选择合适的主颜色，使学生不仅仅要懂得做，更要明白为何这样做，同时提高学生自我学习能力，提高学生的学习兴趣。教师还应该多考虑企业的工作环境和模式。如企业中真正的网站开发是团队工作，我们在课程中可以尝试团队合作的方式，增强学生的团队合作能力。对于一些技术难点，可以举一些生活中通俗的小例子，例如解释什么是html和css，可以比喻， html好比是人的身体结构，而css就是人的眼镜、衣服、鞋袜等装饰物品。这样将学习融入到生活，可以提高学生的学习兴趣。同时课外时间可鼓励学生利用网上资源，如利用慕课网（IMOOC）进行学习更新知识。这样将课堂教学和课外指导紧密结合起来，延伸了课堂教学的时间和空间，弥补了课堂中的不足。

4.校企结合的教学评价

课程的考核主要为平时成绩60%+期末成绩40%，在平时成绩中，应更看重学生完成任务的过程，和与人交流、团队合作的情况。而期末考试应以实际的网页作品为主，在完成任务后，学生还需要进行作品答辩。考核由教师和企业人员共同进行评价。这样既考核了学生完成网站作品的实际工作能力，又增强了学生与人沟通表达、与人交流的能力。企业人员的评价，使学生更加了解企业中真实的需求，从中了解到自己的不足，便于下一步提高自己的专业能力。

参考文献：

[1]王晓红,周立.《网页设计与制作》课程教学改革[J].北京联合大学学报：自然科学版，2006（20）.