网页设计教学教案范文

网页设计教学教案篇1

关键词：关键词：案例教学；网页设计；教学；运用

中图分类号：G4    文献标识码：A    文章编号：

1．网页设计传统教学存在的问题以及案例教学法的含义及特点

计算机网页设计是一项具有操作性极强的一个综合性课程，想要制作出一个“有声有色”的网页，就要具备动画制作、图像处理以及文字版面处理等相关的一些知识。在计算机网页设计当中，常用的网页设计软件有：Firework、Dreamweaver以及Flash，这就是人们常说的“网页制作三剑客”。

在一般的技工学校开设网页设计课程时的教学模式都是沿用传统的教学模式，通过理论和实践的模式来组织教学的过程，也就是根据大纲的要求，针对各个章节来对学生进行教学，不同的知识点分别安排一次实验和理论[1]。然而这样做的结果是导致学生不能够学以致用，只会机械的照搬，不能够融会贯通，没有达到学生的创新能力的培养。虽然这种教学方式也比较注重实践教学，但是实际的教学效果却往往达不到预期想要的目标。形成这些结果的重要原因就是即使是学生对网页制作中的一些技巧以及技术掌握的非常好，但是在图片制作、内容排版编排、以及整个网站的布局和规划上缺乏对整体网站的把控能力，这一点是非常重要的。

案例教学法指的是在学生能够掌握基础部分的知识分析、知识理解以及能够达到辨识能力的基础上，教师通过精心的课程设计呈现给学生所要学习的案例。并且根据教学目标和课程大纲的要求和教学内容，引导学生通过运用案例来将所学的知识进行讨论和分析，并且采取团队合作和自己独立思考相结合的模式进行分析，对所学知识进行进一步的分析和辨识以及提高解决具体问题的能力。与此同时，培养学生正确的工作作风、管理理念管理理念以及沟通协调能力的一种教学模式。

案例教学法是一种通过实例为基本的教学方式，在教师教学的过程中通过生动形象的案例来激发学生对网页设计的学习星期，再把案例当中涉及到的知识点贯穿到学习网页制作的过程当中，让学生在学习知识的同时提高解决问题的能力。在整个案例教学的过程中教师扮演着重要的角色，既是设计者又是激励者，让学生能够积极的参与讨论。

2．案例教学的实现过程

在案例教学当中没有一成不变的教学方式，但是只有对每个环节的流程都加以注重才能得以有效的实施，才能够使案例教学达到成功。案例教学的流程是：案例教学设计组织案例讨论实现案例和总结。

2.1 案例教学设计

进行案例教学设计是实施案例教学法的基础和前提，授课教师要根据教学要求以及教学规划对讲授的内容进行充分的备课和对案例相关的技能和理论的讨论，并且对案例教学中可能出现的问题进行分析和讨论。

在案例设计的时候要注意以下几点：教学案例要具有实践性，设计的案例要跟现实和教学当中的案例相吻合，这样才能被学生理解；教学案例要具有典型性，教学案例要能够涵盖课程中大部分的知识点；设计的案例要具有系统性，在教学的过程中，要用到的案例之间应该是相互联系和前后贯穿的，而且要由易到难的进行编排；案例设计必须要具有针对性，教师要针对大部分学生的接收能力来设计教学案例和选择教学案例。

学生在对案例进行分析的同时，还要探索和思考怎样用于实际，及时有效地促进理论向实践的转化，达到理论和实践相结合，还能不断的扩展学生的视野。如：在网页设计的教学中，给学生一个实际的题目，设计个人求职网站。因此，学生就要根据实际情况和结合所学的网页制作知识来分析求职的素材以及独立的做出设计，提高学生实践动手能力和提高学生学习理论知识的兴趣。

2.2 组织案例讨论

组织案例讨论的重点是对问题进行分析，并且提出解决问题的思路和办法。针对同一个案例不同的学生实现的方法和分析的结果可能不大一样，有些学生能找到简易的实现途径但是难以理解，而有的学生找到的方法比较复杂但是容易理解[2]。因此，教师要引导学生删除案例当中次要的细节，并且发现案例中的理论知识和案例结构之间的联系。案例讨论的关键是教师和学生一起努力，把案例当中的教学内容和理论知识联系起来。想要达到这样的要求，教师要做好引导工作，创造自由的讨论氛围，知道案例讨论，让学生成为主角。

案例教学方法主要强调的是在教师进行教学的过程中当做一种交往的情境，在此情境当中，学生可以主动的参与各种互动交流以及学习活动，能够在情境中反复的进行学习。这就和传统的教学模式有所不同，传统的教学模式是以教师为主导思想。而在案例教学当中的主体地位是学生，对学生不要求强记内容，但是要对提出的问题进行积极的思考，并且经过反复的训练，才能使学生达到分析问题以及解决问题的能力，实现培养动手能力强的目标。如：在网页设计的教学过程中，教师可以针对不同的内容采取不一样的教学方式，在最初对Dreameaver MX网页制作工具进行介绍的时候，因为学生对这个工具比较陌生，教师可以采用案例讨论的方式来进行教学。

2.3 实现案例和总结

通过学生对案例进行讨论以后，教师要对讨论的结果做出评价，摒弃不正确的观念。并且还要对在案例分析当中需要用到的知识技能以及技巧进行讲析。在学生上机操作的时候，就可以按照课堂上的讨论内容来对案例进行实现。这样有利于使学生对需要掌握的知识点牢记。

3．案例教学在网页设计中的应用

3.1 提高教师自身素养，建立和谐师生关系

一位学者曾今说过，“人只能由人来塑造，能力只能由能力来培养”。作为一名教师的基本条件就是具有渊博的知识，这是教师传递知识和经验来决定的，教师要不断的学习通过学习方便不断地向学生提供各种新的不同的信息。只有做到这样，才能使教师的威信、影响力加以增强，并且提高教育质量。

教师还要通过各种形式的方式去关心和爱护学生，并且深入到学生中去，体会学生的心理感受，做学生的良师益友。

3.2 构建合理知识体系，选取精心教学案例

认知结构是认识事物、适应环境和学习知识必备的条件，而学生在学习的过程是“顺应”和“同化”机能的不断平衡的过程，是认知结构在不断构建的过程。所以，教师在呈现出新的知识点和引入一些必备的背景知识的时候， 要紧扣教学大纲的重点。教师在进行教学案例的选择的时候每一个案例都要反映到教学大纲当中的知识点上，做到有针对性。

如：在网页的页面布局时可以采用框架以及层和表格的方式，以一个食品网站为例做一个简单的草图：第一层插入背景图片，给网页一个主色调；第二层插入一个flash动画，使网页充满生机活力；第三层插入精品美食；第四层搭配歌曲体现企业的饮食文化；第五层可以添加一个浮动的物体，使整个网页看起来更具有立体感。教师要先对学生进行鼓励用表格布局的方式来解决问题，然后再引出层的概念，一步一步的解决问题，最后完成任务。

3.3 营造轻松的学习氛围

教师在案例教学的过程中要学会营造一种融洽的、活跃的课堂教学气氛，让学生感到心理自由和心理安全，使学生真正做到敢说、敢尝试。教师在案例教学当中处在主导地位，是案例教学的组织者[3]。因此，案例的实现过程都要由学生来完成。学生的主动性和积极性很大程度的影响了案例的教学的质量以及效果。

4．总结

总而言之，案例教学法改变了传统教学中学生被动的角色，有利于提高学生的实践能力和对理论知识的掌握。在案例教学中学生成了学习的主体，提高了学生在学习过程中的自主性，并且还解决了在传统教学中的一些问题。案例教学法是现代教学法中的一种，想要优化课堂教学，就要运用多种教学模式，根据学生的实际情况来提高课堂教学效果，提高教学质量，培养现代化高素质的应用型人才。

参考文献：

[1]冯小东.浅谈高职院校《网页设计》课程教学改革[J]甘肃广播电视大学学报2010(2)：26-28.

[2]范海波."参与式"教学方法在教学中的应用——以网页设计与制作课程为例[J]北方经贸2009(3)：115-118.

网页设计教学教案篇2

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

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

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

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

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

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

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

网页设计教学教案篇3

［关键词］网页设计与制作 案例教学 任务驱动

在网络技术迅速发展的今天，网页制作已成为当今社会上一种比较热门的技术。“网页设计与制作”是我院网页设计专业的必修课，作为一门新型学科，与传统的其他学科相比具有鲜明的自身特点：

（1）具有很强的操作性和综合实践性，特别强调学生的操作能力和学以致用的综合实践能力。

（2）极富创造性。学生通过对信息技术、信息科学基本理论和方法的学习，在掌握基本技能的同时，不仅拓展了思维，而且培养了独特的创造力。

（3）集现实性、实效性于一体，具有明显的时展特点。这门课程的教学目标不是教会学生如何掌握单纯的某些知识和某种技能，而是通过学习计算机、网络等一系列基本技能，培养学生的网页制作能力、网上信息获取和加工能力、自主学习能力和团队协作能力，课程结束时学生能自行开发一个静态网站。

基于以上特点，“网页设计与制作”这门课程设计出了一套从学生实际出发，以“教师为主导，学生为主体”的符合这门学科特点的教学与管理模式，让学生在教师的指导下，对所学的课题进行探索、分析、研究，在实践操作中培养学生实践动手能力。课堂教学采用案例教学法，实践教学采用任务驱动法。所采用的教学模式在授课过程中，根据教学内容安排及要求，由教师创设环境，师生发现问题，以问题的出现、探究和解决来激发学生的求知欲、创造欲和主体意识，从而培养学生的创造能力。

一、课堂教学采用案例教学法

所谓案例教学，是为了培养和提高学习者知识能力的一种教学方法，即将已经发生或将来可能发生的问题作为个案形式让学习者去分析和研究，并提出各种解决问题的方案，从而提高学习者解决实际问题的能力。

案例教学的目的是在学生掌握了基本理论知识的基础上，在教师的精心策划和指导下，根据教学目的和教学内容的要求，运用典型案例，将学生带入特定事件的现场进行案例分析，通过独立思考和共同写作，进一步提高学生分析、解决实际问题的能力。在教学任务上，要求学生通过对案例的分析研究积累经验，以发展自己的创造能力。在教学活动中，学生在教师引导下分析和解决问题，学生活动在教学中处于主导地位，教师的传授、指导为辅，配合学生进行。在教学过程中，总是从案例开始，然后分析问题，最终解决问题或提出解决问题的捷径。因此，引导学生做好独立分析研究工作是教学的中心环节，而教学的准备、教师的指导都是为学生的分析研究服务的。

在讲授“网页设计与制作”课时，首先向学生讲授Flash，Fireworks软件的使用，再介绍DreamweaverMX网页编辑工具，并将三者结合起来，讲解图片插入网页中和在网页中如何设置字体格式等网页制作的基本知识，然后结合学生的实训课题，将一个有特定主题的网页呈现给学生，引导学生对这张网页进行分析，并提出实现网页的方法和步骤。在教学过程中，针对不同的内容，可采用不同的教学方式。在刚开始介绍DreamweaverMX网页制作工具时，由于学生对DreamweaverMX网页制作工具的使用还比较生疏，可采用以教师为主的案例讲解法，等学生熟练使用DreamweaverMX后，教师则可采用案例讨论教学法。在实施案例教学过程中，必须注意以下问题：

1.选择合适的教学案例。教师要根据教学进度和教学要求设计案例，并充分备课，讲授并解析与案例相关的理论和技能，分析案例讨论中可能出现的任何问题，以提前查阅相关资料应对。选择的案例必须具有典型性、针对性、实践性、系统性的特点，并且与学生的学习、工作紧密相关。我们结合课程内容，制作了近百个精美的案例，每个案例都综合了若干个知识点。课堂上先让学生观看相关案例，引出问题，然后在讲解知识点的同时实现案例的功能。在讲解过程中注重基础知识的传授和基本技能的培养，同时介绍网页制作中的相关规范和标准，并且注意总结一些实用的技巧。这种教学方式目的明确、形式生动，学生带着问题听课，学习兴趣和效果明显提高。学生在分析案例的同时，一方面不断形成新的理论视野，增长案例分析的技巧；另一方面探索思考理论如何运用于实际，从而及时、有效地促进了理论向实践的转化，真正达到理论与实践的结合，有利于加强高职院校学生的实践动手能力。

2.组织良好的课堂讨论。案例教学法实际上是强迫学生参与到课堂学习中去，要求学生真正从实际工作的角度来思考问题。组织案例讨论旨在分析问题，提出解决问题的途径和方法。教师要引导学生删除案例中次要的细节，发现案例中主要的结构和案例与理论知识之间的内在联系。教师关键要做好启发引导工作，想方设法创造自由宽松的讨论氛围，在宏观上把握和指导好案例讨论，让学生成为案例讨论的真正主角，同时又不至于出现大的方向性的偏差。

3.进行适宜的案例总结。案例经过学生的讨论后，教师应该及时做出讲评，并再次讲授案例分析中所需要用到的理论知识和技能。这样做有利于学生把要求掌握的知识记牢，符合高职院校学生的实际情况。

同时，我们改革课程成绩的评价方式，提高平时成绩的比例，刺激学生上课的积极性。实行一段时间之后，学生变上课被动为主动，课堂气氛日渐活跃。学生课下主动复习预习，课上积极发表自己的见解，取得了很好的效果。

二、实践教学采用任务驱动法

任务驱动教学是建立在一定理论基础上的一种教学模式，它强调学生的学习活动必须与任务相结合，以问题的探索来引导和维持学习者的学习兴趣和动机。教师应创建真实的教学情境，让学生带着真实的任务去学习，以使学生拥有学习的主动权，掌握网站设计与网页制作的知识与技能，培养学生计算机的综合应用能力和解决实际问题的能力。

在做“网页设计与制作”这门课程的第一次实验时，我们会推荐一些富有特色的网站供学生欣赏，将学生带入真实的学习情境中去，激发他们学习的热情，同时引导他们去思考如何建设网站、设计网页，由此确定课程的总体任务――建设一个完整网站。然后针对课程中每一部分知识点将总体任务细分为若干大任务，如文本、图像、链接、表格、框架、CSS样式、层时间轴、模板和库等，再将这些大任务进一步细分为一些小任务，让学生了解建设网站的一般程序和方法。而后，通过布置一个学习任务（网站作品），使学生迫切感受到课程要求与自己现有认知结构的关系和差异，进而明确学习活动的方向和要达到的目标。学生可以个人或团队方式对任务进行分析和探索，最终使问题得到解决。该任务作为一条主线自始至终贯穿课程，整个学习活动的展开都围绕着这条主线进行。

在高职院校网页制作的教学实践中，任务的设计必须考虑到学生的差异。动手能力强的学生可以做一些较复杂的网页，动手能力弱的学生可以先做一些简单的网页，遵循“模仿―提高”这一过程。例如，在学习“表格”的内容时，教师可通过让学生浏览观察几个网站的页面，激发他们的热情，再提出任务。初始任务可以是较为简单页面的制作，其中包含“表格的插入”“表格的修改”“表格属性的设置”等一些知识点。之后，教师可给出较为复杂的设计任务。例如让学生利用“布局视图”“布局表格”“绘制布局单元格”去实现一些较为复杂的页面。最后可以让学生根据页面主题内容进行页面的布局设计，为后面的教学打下基础。这样的教学设计使基础差的学生，在前两个任务完成后，再逐渐过渡到最后的创新设计中；而基础好的学生，从开始就可以完成较复杂的任务，大胆地展示自己的想象力及创造力。

在任务驱动实践教学的过程中，我们要求每个学生务必做到以下几点：首先，要求学生对一个网站进行全面的剖析，分析网站的基本要求和技术要求。基本要求包括整体风格、排版布局、色彩搭配、网站Logo、音乐、网页特效、网站中必有的网页元素等；技术要求包括主页文件命名规范、作品文件空间上限、栏目规划、导航和链接要求、网站文件管理、网页浏览兼容性等。其次，在完成演示案例制作的基础上，对学生提出拔高要求，让他们根据教师提供的素材和要求做出扩充的演示案例网页；也可以给学生一个更高要求，让他们自己收集资料和素材，以教师提供网页案例为模板，制作网页。最后，选择任务时，要仔细推敲每个知识点，统筹兼顾，为学生设计出一系列有典型的操作性和针对性的任务，让学生在完成任务过程中掌握知识、技能和方法，真正体现教学中学生的主体地位和教师的主导地位，充分发挥学生的主观能动性，训练他们的创造性思维，全面提高他们的综合素质。比如最后阶段，要求制作个人求职网站，学生需要结合所学网页设计制作知识，根据设计任务，分析求职素材，独立做出设计，从而提高学习理论知识的兴趣和实践动手能力。

三、总结

在两年的高职院校“网页设计与制作”课程教学中综合运用案例教学法和任务驱动法，有利于学生实践能

力的提高和理论知识的掌握。通过一段时间的运行，取得了很好的效果。学生在走出校园之后，能够很快适应社会发展的需求，赢得了用户单位的好评。我们将进一步采用各种先进的教学方法和手段，提高课堂教学效果和教学质量，培养符合时展要求的新型高素质应用型人才。

［参考文献］

［1］颜谦和，颜珍平.《网页设计与制作》课程运用案例教学法初探［J］.电脑知识与技术（学术交流），2007（9）.

［2］吴安平，王明珠，王继忠.案例教学法研究与实践［J］.长春大学学报，2002（5）.

［3］史科蕾，高咏欣.《网页设计与制作》课程的教与学［J］.信息技术与信息化，2007（2）.

网页设计教学教案篇4

在我国，视觉传达教育起步较晚，但是发展迅速，其人才培养和教育模式倍受社会关注。目前很多高校在艺术类网页设计课程的教学上存在两种主要现象：一是重设计、轻制作；二是重软件、轻艺术。第一种培养出的学生一般只注重静态页面的视觉效果，对网站的动态更新关注较少，不利于网页后期维护；第二种培养出的学生侧重于Dreamweaver、Flash等软件的操作，对网页的版式、VI形象等关注较少，制作出的网页往往缺乏个性、艺术表现力不强。因此，对视觉传达专业的网页设计课程的教学改革势在必行。

二、课程教学目标的重新确定

我们都知道，一门学科的课程目标通常决定了该学科的最终导向，它不仅能为教师传授正确的学科理念提供依据，同时也给学生指明正确的课程学习方向。因此，视觉传达专业网页设计课程改革的首要环节就是对该课程教学目标的重新确立。众所周知，高等教育培养出来的人才最终要服务于社会，社会的需求决定了该学科的教学内容和教学目标。随着科技的进步，时代的发展，不同时期对网页设计人员的需求也是不同的。通过市场调研，我发现目前社会上网站分工越来越细，招聘的相关岗位大体分为三类：第一类为前台美工，以视觉传达专业为主，以网站的形象塑造和界面美化为岗位内容；第二类为网站后台服务，多以h7V5数据库等做交互型网站的，以计算机专业为主；第三类就是两者都要具备的全才网页设计师，是具有技术背景和多年实战经验的创意人才。由此我们可以确定视觉传达专业培养出来的网页设计人才的岗位定位应是网页美工师，他应该具有两种专业素质：一是掌握网页设计的基本要素和美学知识相结合的方法与技巧；二是懂得简单机算计软件（PS、Dreamweaver、Flash）的操作，便于在制作网页界面时考虑到后台维护的便利。而“艺术设计教育的人才培养目标是：培养综合素质高、创造能力强的高级应用型设计人才”。所以该课程教学目标应该是培养具有以上两种专业综合素质的、创造能力强的高级网络应用型设计人才。新的培养目标确定后，该课程的教学内容应该在此基础上重新调整。

三、课程内容的调整

视觉传达专业网页设计课程教学内容应该为教学目标服务，知识结构要合理，应注意知识点之间的交叉及有机结合，同时也要有效地培养学生的创新性思维及独立分析、解决问题的能力。基于此，新的教学内容调整为两大板块：理论课程内容和实践课程内容。

1.理论课程内容

理论课程内容在课程编排中为最先讲授内容，以教师PPT演示传授为主，学生讨论互动为辅，课时安排为总学时的四分之一。在教学过程中又分为两个环节来实现：（1）第一次课的设计把第一次课设置为课程概述，主要对网页设计课程的教学特点、教学内容、教学目的、教学重点和难点加以通篇介绍，对学生说明课程安排和考核要求，并通过简单上机实例操作来提高学生学习兴趣，进而引入网页基本理论教学环节。（2）网页基本理论学习网页基本理论学习包含三个知识板块：网页设计的基本要素、网页界面的版式设计、网页VI形象的美学塑造。我们知道每个设计门类都有自己独特的构成元素，这些不同的构成元素形成了该门类不同于别的门类的独特的艺术魅力。了解和掌握这些构成元素的特点和作用，有助于我们更好地进行设计工作。网页构成元素按功能和形式划分为两大类型，按功能划分为页眉和页脚、背景与底纹、按钮与控件、导航器和目录、功能板块和广告位；按形式分为文字、图片、色彩、多媒体和超级链接。网页设计中的构成语言不同于传统平面设计，它们之间存在很大差异，例如网页设计中的颜色是光色，是标准的RGB色彩，而传统平面设计中的颜色在输出过程中是以印刷色CMYK形式出现的；传统的平面设计不用考虑网络传输的因素，而网页设计中的构成元素应考虑在不影响显示效果的前题下，尽量压缩文件大小，便于网页文件的上传与下载；又如动画、音频等多媒体语言在传统平面设计中不用考虑，而在网页设计中它们是给网页增加活力的重要手段因此，教师在此板块教学中要选择大量实例进行比较，不但要指出网页设计各构成元素的特点和作用，而且还应指出与平面设计中相对应元素的异同之处，便于学生区别学习。网页界面的版式设计不同于传统平面设计的版式设计。平面印刷品有着各自固定的纸张大小或裁切规格，而网页界面则不然，它的显示尺寸受到电脑显示器的限制，不同尺寸的显示器显示的网页界面是有区别的。除此以外，它的最终显示控制权其实掌握在浏览者手中。如果过分注重网页界面版式设计的视觉完整性，就不能顾及网页设计元素的灵活性。所以，教师在此板块教学中应该强调网页界面版式的变化性，同时也要强调首页与内页版式的连贯性，要求学生在设计中注意网页界面版式完整性与灵活性的关系。网页设计是VI设计的一个重要组成部分，是企业视觉形象执行标准的延续和拓展。和所有的线下公司一样，一个好的网站也需要依助于VI设计。准确的、有创意的VI设计，有利于树立网站形象，使其在众多同类网站中脱颖而出，增加浏览者的浏览欲望和浏览记忆，对该企业的推广和宣传也能起到促进作用。网页设计课程上引入VI设计概念，教师应该保持教学的延续性，要求学生在进行网页设计的同时，将VI理念应用到网页界面中。网页设计应主题突出、富有创意，色彩搭配应协调统一，具有强烈的视觉冲击力，从网页LOGO到色彩运用均要突出企业视觉形象。

2.实践课程内容

视觉传达教育的目的就是培养出创造能力强的高级应用型设计人才。应用性人才的培养模式里实践性课程比例要大，网页设计课程也是这样，理论是基础，实践是灵魂。所以实践课程内容在课程编排中为比重最大的内容，课时安排为总学时的四分之三。实践课程包含软件操作板块、简单代码学习板块和实际案例制作板块三个知识点。此部分内容在教学过程中又分为两个环节来实现：

（1）软件操作和简单代码学习板块的教学

此部分教学为计算机软件学习阶段，Fireworks、Dreamweaver、Flash是传统的网页设计软件学习内容，根据当今互联网开放性的特点和视觉传达学生对现有软件知识掌握的情况（PS是基本功，是学生都已掌握的软件），把传统软件教学内容更改为“网页新三剑客”（PS+Dreamweaver+Flash）的学习。简单地说，就是用PS制作静态网页界面和切图，并处理图片，用Dreamweaver布局和超级链接，用Flash做特效。而这三个软件知识板块里面教学重点依次为Dreamweaver、Flash、PS。在软件教学环节，教师可借助类似“红蜘蛛”一样的网络教学平台和学生互动教学。学生可根据老师在线传送的素材临摹教师的操作，教师也可以在线观察学生执行情况个别辅导。同时根据艺术学生英语和数学水平普遍较低的特点，在教学中应该增加一些简单代码知识，介绍一些常用的代码语言及Html标签和CSS规则的使用方法，便于优化网页样式，使整个网站风格统一，也便于对已有的网页模板进行更改，进而大大提高学生的岗位实践技能。

（2）实际案例制作教学

此板块教学采用以项目为载体、以任务为驱动的教学方法。教师可以引入实际项目或者虚拟项目，提出项目名称和项目要求，辅导学生进行实际案例设计。实际案例制作教学应充分强调实用性和自主性，教学环节可分三步进行。首先是教师示范环节：教师要根据实例要求演示创作过程，从网站创意草图到制作静态界面；从创建站点到Dreamweaver网页布局，创建超级链接；从美化网页样式，到制作网页特效，利用简单的代码语言和Flas实现动态、实时、交互的页面效果教师应将每个创作环节一一展示，并将知识点设计应用到整个案例实际操作中去，做到知识点与案例有效融合，案例之间能承上启下，有机衔接。其次为学生设计环节：学生可以根据老师的思路对经典案例进行学习和分析，依据实际任务的要求，进行网页设计实际操作。其间遇到问题学生可以相互讨论，或求助教师解决难题。在整个讲课过程中，教师指导为辅，学生对案例进行学习和分析为主，充分发挥学生的主观能动性。要求学生充分发挥创意性思维，从被动学习转换为为了实现项目目标而进行多渠道主动学习，提高学生学习效率，缩短和实际岗位间的操作差距，进而为走向社会奠定基础。最后为展示评价环节：学生对自己的作品公开演示汇报，并鼓励别的学生对其作品评价，找出优劣点，好的保留，差的改正。教师根据作品质量和学生评价对作品打分，以此作为该生整门课程成绩的一个依据。

四、结语

网页设计课程教学改革3年以来，河南大学艺术学院视觉传达专业的网页设计教学效果得到显著提高，学生的网页设计作品获河南之星、中南之星、河南省高校优秀设计作品展等省级以上设计类奖励共十余项，有部分学生毕业后已经从事专业网站建设工作，教改带来了喜人的经济效益和社会影响力。科技在进步，时代在发展，网页设计课程的教学应紧跟时代、求实创新，该课程教学改革的研究与深化，以及教学质量的提高，都必须适应互联网对视觉传达专业网页设计人才的培养与需求，并随着社会的发展不断地更新、变化。高校专业教师应及时将最新案例和相关知识点引入课堂，不断探索教学内容、创新教学方法，这将是网页设计课程改革的永恒话题。

网页设计教学教案篇5

【关键词】实验教学改革；教学内容；教学方法；教学效果

1.引言

“网页设计与制作”课程正逐渐成为各高校近年来计算机专业领域发展最快和应用最广泛的课程之一，作为对学生实践动手能力要求较高的课程，该课程在许多高校已经采用了实验课堂的教学形式并受到了学生的普遍欢迎。那么，如何提高该课程的实验课堂教学质量，真正增强学生的动手实践能力则是摆在各位任课教师面前的首要问题。我们经过近五年的实验教学观察和总结，将从教学内容、教学方法以及教学效果三个方面阐述如何解决该课程发展面临的问题。

2.存在的问题

“网页设计与制作”作为许多高校计算机专业的专业基础课或者选修课，在实际教学过程中，经常面临的问题有：

⑴任课教师对新技术的把握能力不够。由于技术的发展日新月异，Html标准也发展到了Html5，一些任课教师显得无所适从。

⑵部分院校教学形式仍然采取理论和实验分堂教学。采取理论和实验分堂教学，在教学过程中学生理论课程听起来枯燥，在实验课又翻开书按部就班，学生掌握知识成效甚微。

⑶单纯工具型教学。学习任何一门课程的目的应该都要做到学以致用，简单的工具教学只能满足学生会不会的问题，要制作出优秀的网页还需要学生对艺术设计等相关知识有一定的了解。

3.实验教学改革

3.1 教学内容

根据制定的人才培养方案，该课程在我校开设一共32学时，全部采用实验课堂教学。经过对本课程的不断摸索和总结，我们将学生需要掌握及完成的教学内容分为六大模块：模块一，掌握网页、网站基础入门知识。根据“先总体后具体”的原则，总体讲述网站的概念以及网站上线的流程，要求学生不会做网页但要先会搭网站，计划2学时；模块二，掌握基本网页语言标签。通过对一些典型的小型网站来讲解并要学生掌握HTML语言各类标记符的使用方法，计划10学时；模块三，掌握网页布局，学会层叠样式表（CSS）。通过案例，要求学生学会样式控制并布局网站，计划10学时；模块四，掌握制作网页相关工具软件的使用。结合具体的实例介绍并掌握Dreamweaver、Microsoft Visual Studio、Photoshop等软件的使用方法，计划4学时；模块五，网页设计进阶学习。通过对优秀网站的鉴赏和分析，提高学生的学习兴趣，使学生头脑里形成设计的概念、网站规划的思路及流程，同时介绍网站的总体结构、风格定位、色彩的应用以及版式的设计等方面的知识，计划6学时；模块六，网页综合设计。学生自行选择一个积极健康的主题设计一个综合类网站，该内容在课堂外完成，可在课程中期开始同步进行。

3.2 教学方法

通过长期的教学实践，我们可以将教学方法归纳为以下几点：

（1）采用实验课堂教学，实践为主，讲授为辅

该课程的操作性较强，实践综合性也较强，课程学时也较紧凑，采用理论课堂教学，学生势必在有限的学时内收获较少，故采用实验课堂教学。在具体实验教学过程中，采取实践为主，讲授为辅的教学形式，如在教学内容模块一里面，计划2学时，可以1/3时间讲授基础入门知识，2/3时间学生根据教师精心准备的教学材料动手搭建成型网站，现学现用，学生记忆深刻，能较快掌握相关知识及技能。

（2）采用典型案例实验教学

该门课程强调实践动手能力，所以在实验课堂讲授时必须围绕案例进行教学，离开案例教学则该门课程又将倒退回理论教学的层面。要采用案例教学，需要从宏观上进行教学设计：可将互联网上较热的实际案例引入实验课堂教学体系中，每个重要知识点均与实际应用结合起来，在实际教学中，多引用实例，提高学生的学习兴趣，让学生主动去模仿、分析、创新等，同时也能帮助学生加强深对网站网页的理解，使其能够灵活运用所学的知识，从而获得一种成就感。该案例教学方法可以贯穿于教学内容的模块二至模块六，如在模块三掌握网页布局过程中，可以选用学生比较熟悉的淘宝、京东等知名企业网站进行讲解，可以由浅入深，从简单的登录网页到复杂的网站首页一步步剖析架构，特别是对于诸如margin、padding等容易出错的问题进行重点讲解，让学生能模仿并自己重新设计主题书写网页。

（3）拓展课堂、多元一体化辅助实验教学

要想真正让学生的动手能力达到质的飞跃，达到学以致用的目的，仅靠有限的课堂学时是远远不够的，但单纯增加学时又是不太现实和最不可取的方法。在实验教学过程中，我们不断摸索，总结出我们认为行之可效的方法：拓展课堂、多元一体化辅助实验教学。具体表现在以下几个方面：

①借用现代化多媒体手段学生自主学习。在教学过程中，学生除了按照任课教师的要求和准备的教学材料进行学习外，还应在任课教师指导下，充分利用现代多媒体等手段进行网上学习，如在基础知识模块学习过程中，可充分借助W3C学院（W3Cschool）进行辅助学习及实践练习。

②举办课堂外网页设计进阶讲座。在实验课堂教学过程中，模块五涉及到一些进阶的学习，但学生要借此在网页设计上有所造诣是远远不够的。我们在教学过程中，针对不同的学生对象，采取学生自愿的原则，免费举办一些网页设计进阶讲座，讲座的主题包括网页设计涉及的一些前言技术、美工素养及技能、学生创新创业思维的训练等。通过这些进阶讲座，学生提高了网页设计与制作的综合能力，同时也开拓了眼界。

③鼓励学生参加网页设计竞赛。在每学年学校或者全市、全国举办的网页设计等竞赛中，我们积极鼓励并指导学生参赛，从而进一步激发了学生的学习兴趣。

3.3 教学成效

经过近五年的实验教学摸索总结，在近三年的教学中，该课程保持了良好的教学效果，在学生之间口碑较佳，也得到了其他后续专业课程任课教师高度的认可，在学校的教学评分中也一直位于所有课程前20%之列。同时，课堂外的免费讲座、培训以及开展的各项相关比赛也极大鼓舞了学生的学习兴趣，为学生创新创业指明了方向，学生最终完成了该课程“学什么”、“怎么学”、“作什么”的关键问题，为今后的进一步深造学习打下了坚实的基础。

4.结语

通过“网页设计与制作”实验课程的教学改革实践，我们取得了不错的教学效果，但计算机技术发展日新月异，该课程教学肩负的任务也越来越重。我们将继续完善教学内容、教学方法以及考核方式等环节，不断提高学生的动手能力，真正让学生学有所用。

参考文献

[1]朱金秀，陈小刚，朱昌平等.项目式实验教学的探索与实践[J].实验室研究与探索，2008（11）：93-95.

[2]杜现朝，龙怀冰，王清理等.基于Web标准的网站设计与开发流程[J].计算机工程与设计，2008（4）：945-948.

[3]吕慧娟.《网页设计》课程教学的创新与实践[J].电脑知识与技术，2007（13）：264-266.

[4]任国庆.”计算机网页设计”课程体系分析及课程整合[J].计算机教育，2006（10）：58-60.

[5]章明珠.网页设计课程教学创新[J].电子科技，2012（9）： 144-146.

网页设计教学教案篇6

【关键词】网页设计；教学方法；实践

拥有自己的网站是政府机关、企事业单位以及广大网络爱好者的共同需求，制作精美的网页来吸引浏览者，提高网站的知名度，是大家共同的目标，而这一切都依赖于网页的设计和制作技术的运用，因此，也说明了网页设计与制作课程的重要性。《网页设计与制作》是近年来计算机领域发展最快和应用最广的课程之一，现阶段急需培养掌握网页设计、面向不同应用层次的人才。

1.《网页设计与制作》课程的特点

《网页设计与制作》课程的特点是涵盖知识面广，综合性和实践性较强。《网页设计与制作》不是作为一门课程孤立存在的，它需要依靠多门课程的知识给予支撑。它们相互渗透和依赖，构成一个科学的、完整的课程体系。

《网页设计与制作》课程的教学以“实用、必须、够用”为原则，强化培养学生的实践操作能力及分析应用能力，做到“讲、学、练”统一协调。课时分配上注意将理论与实践进行科学、合理的安排。突出实践环节，注重培养学生的实践动手能力，提高理论服务于实践的意识。

2.《网页设计与制作》课程的教学方法

2.1 项目教学法

将《网页设计与制作》课程的总项目确定为开发一个具有一定实用功能的网站，并根据其中涉及到的知识点，将课程总项目划分为若干子项目。项目以任务书的形式下发给学生，按制定计划、实施、评价、和实际运行等阶段写出时间和目标要求。

2.1.1 制定项目计划

对项目涉及的问题进行分析，确定操作步骤，选择方法，制定计划。在此阶段，学生的主要任务是制定项目实施计划。教师的主要任务是关注学生的做法是否正确，启发和指导学生。在教学中采用分组法，将班级学生分成多组，每组人数约8人，选派一名“项目负责人”，为了让大家都能得到锻炼的机会，一般让团队的学生轮流当项目负责人。学生以团队为单位制定项目计划。例如，在做“学院主页”这一项目时，教师将此项目的学习目标和能力目标告诉学生。然后和学生一起分析项目，制定完成项目的基本步骤：首先确定网页的主题、内容、布局结构、色彩设计方案等以及团队人员的分工安排；然后根据设计绘制草图；最后写成项目计划书。项目教学注重学生主体作用的发挥和综合能力的培养，在制定项目计划过程中，教师要重视学生个性发挥，鼓励学生形成自己的特色。制定好计划后，教师要让每个团队的“项目负责人”介绍制定的计划，并说明设计理由。通过对项目计划的介绍，一方面可以提高学生的表达能力，另一方面，学生之间可以互相启发和学习。教师适当的把自己的见解和意见告诉学生，帮助提高计划的可行性。

2.1.2 实施项目计划

在实施过程中，要求学生注意两点：一是团队的合作精神和工作效率；二是要求学生认真记录每个操作步骤和过程。教师不仅要为学生提供充足的资源，而且要在学生实践操作过程中边观察边指导。学生在制作网页时，由于分工不同，处理图片的学生与设计版式的学生往往不是同一人，处理出来的图片经常会与布局规格不一致。教师要及时指导学生按照计划书的设计图进行设计，指导“项目负责人”组织好团队，与同学做好交流和沟通。有时候，计划书里一些预期的设计效果学生不能完成，如层的精确定位、FLASH动画的透明显示等，教师可及时进行指导，一方面可加深和巩固所学的知识点，另一方面，提高学生的学习积极性。

2.1.3 项目评价

学生在完成项目后，教师要求他们进行自评和互评。学生对各自项目自评，不仅有利于学生的自主学习，而且可以改进课程或教学的设计，其作用是重视学生学习主体，重视学生的反思，以促进学生的发展。学生互评是让学生对学习成果进行共享，从学生的角度发现问题以及提出改进意见，教师要引导学生尽量客观地从正面进行相互评价。

首先让每一组同学进行自评，完成自评过程后，请每一组以项目负责人为主，介绍本组设计的网站，在介绍过程中要求说明各自网站的设计的过程，遇到过什么问题，这些问题是如何解决的。其他组的同学可提出问题，让设计者解释网站所用的相关技术及特点，随后进行互评。在评价过程中要充分发挥学生的评价能力，适时引导学生通过自我反思和相互评价了解自己的优势和不足，学习别人的特长和优点，以评价促进学习，让学生在互评中相互学习、相互促进，共同提高。最后教师对各项目组的网站进行综合评价，这一工作很重要，是必不可少的。教师在评价学生网站时不能只进行优劣评价，而应该要指出问题所在，给出具体改进及修改建议等，让学生去完善网站。

2.1.4 项目归档及

项目完成后，归档工作也是网站工作的一部份。要求每个项目组对各自网站设计时的书面材料的右上角标注编号，并做好各种材料的目录表。对文本文件，图像文件，Flas文件、声音文件、视频文件，以统一的格式保存，做好这些文件材料书面记录。记录好在网站设计过程中使用过的软件名称、型号、版本号和相关参数手册、说明资料等。最后刻录好光盘，做好用户手册，并制作好电子文件的备份。

每个项目组，申请一个域名及网站空间，并把各自的网站传送至Web服务器中，完成站点的工作。进行市场化运作的项目交用户验收使用，并要经常对用户网站进行维护和更新，以提高网站的访问量，达到好地宣传效果。

实践表明，以项目为驱动的教学方法，有效地建立了课堂与社会现实生产生活的联系，使学生学习更有针对性和实用性，为以后进入实践和实习打下了基础；同时也有效调动了学生的积极性，充分发挥了学生的主动性和创新精神。

2.2 案例教学法

从《网页设计与制作》课程的实际问题出发，精心准备各种典型案例，构建课程的宏观教学设计。例如，层与导航、书籍专卖、旅游网站、房地产公司网站、个人网站等。以若干个案例为载体，形成循序渐进、种类多样的项目群，构建完整的教学布局。在案例教学中，首先要确定掌握哪些基本原理，然后，再选择出能够说明这些原理、理论的案例来。具体实施步骤如下：

2.2.1 收集和整理素材

这是实施案例教学法的基础和前提。信息是网站的根本，根据网站主题内容收集各种信息资料。如学院网站包括：学院简介、专业简介、招生就业等内容资料。整理资料则是根据将上述收集到的资料进一步挑选和细化，收集到的网页素材应落实为站标、内容、导航栏等页面元素。将收集到的资料转换成网页所能识别的文件格式。我们可以在各类网站收集或自己制作所需的网页素材，以便在教学案例中使用。

2.2.2 选择和设计网页案例

在选择和设计教学案例时应注意几点：一是案例必须具有教学性：通过直观的网页案例可以形象生动的展示学习的目标，也使学生能明确所学知识的实用价值，从而提高学生学习的兴趣和积极性，这也是运用案例教学的主要目的。二是案例必须具有典型性：所选择的案例要能充分地考虑理论知识点和操作技能等学习目标，应遵循由简到繁，由易到难，循序渐进地原则。所选择和设计的网页教学案例更要能突出重点，突破难点，真正起到帮助学生理解如何制作和设计网页的作用。三是案例必须具有针对性：选择和设计教学案例应针对学生的实际兴趣和接受能力来选择，这样学生就会学得兴致盎然，教师的点拨也会事半功倍。

2.2.3 演示和讲解网页案例

通过案例演示，提出问题，讲解案例应用背景，给学生一个切入点，建立感性认识。目的是激发学生的学习兴趣、让学生感到学有所用，从而明确本次课的教学目标。将案例分解为若干个可行的任务，然后在一个个任务的驱动下，逐步完成案例的演示。一个网页案例往往包含了多个知识点，授课教师在讲操作时如果一口气把整个案例过程讲完，学生虽然能听懂，但不能记住。因此必须分步骤讲解，新知识点越多，步骤应分得越细。教师每讲完一步就要让学生练习一步，学生练完、练会后，老师再接着讲。这样直到学生一步一步地跟着老师把整个案例完成为止。教师在授课时一定要注意控制好速度，在讲到一些新知识点或学生操作比较生疏时，速度要尽量放慢些。一段时间后，学生有了一些基础，讲课速度可稍快些，特别是一些已经学过的知识点，可以快速讲解，甚至可以略过而只讲新知识点，以便多节省点时间给学生练习。

2.2.4 总结和应用

在每次课结束前，引导学生进行归纳总结。对本次课的实际意义、重点、难点、容易出错处等及时进行总结。并针对案例的不足之处，进行引申和提高。注意在这个阶段，强调的是“引导”学生，而不是老师讲解。

案例源于生活，最终要应用于生活。为了使学生能学以致用、举一反三、触类旁通，每次教学结束时及时布置相关的课后练习，使学生在课后进一步复习巩固，并且将课后作业纳入形成性考核的内容之一。同时给出下一次课的学习内容，提示学生预习。

在《网页设计与制作》课程中采用案例教学法，让学生对网页设计的基本理论知识的理解和技巧的掌握更具体化。案例教学法对激发学生的学习兴趣、提升学生的学习效率作用十分明显。

3.网页设计实践环节

当学生已基本掌握了本课程的大部分内容时，可以布置一份综合作业，要求每位学生设计一个网站。要求学生对自己的网站要做到既有鲜明、统一的风格又有完善的内容，将页面的结构、图片的位置、链接的方式设置合理，做到网页布局的和谐统一，并且还要做到容易更新等。要做到这些，就必须在制作网站之前，对网站进行一个总体规划，然后再逐步进行设计。

为了让学生有良好的创作技巧和独特的风格，把综合作业布置之后，先让学生进行选题，构建出自己的网站结构，再上网查询相关的资料，然后对网站进行规划，写出书面的网站设计方案，教师对每个学生的方案进行审查和评阅，及时指出应改进的地方和存在的问题，符合要求了，学生方可开始制作。

3.1 培养自主学习能力和基于问题式学习能力

综合作业里贯穿着问题式学习方法，完成综合作业需要学生发现问题，带着各种问题，考虑自己要学习哪些内容，在课后自行学习课堂和书本上未曾讲过的知识，需要自行查找大量的资料，确定设计方案，独立完成从设计、测试、排除问题到实现的全过程，通过综合作业，培养学生灵活运用所学知识解决比较复杂的实际问题的能力。

3.2 培养团队合作精神

在实际工作中，很多工作都不是一个人能独立完成的，这就需要团队合作，以集体的智慧攻克难关。学生在完成综合作业的过程中，势必要遇到一些相对比较棘手或者百思不得其解的问题，这个时候同学之间的沟通与交流乃至合作是非常必要和有益的。在对问题的讨论过程中不仅能了解对同一问题的不同解决方法，更能加深对知识的理解，同时学生自身的能力也在这一过程中获得了提高。

3.3 鼓励学生勇于创新

在布置综合作业的时候，要给学生留有充分发挥的空间，鼓励学生勇于创新，最大限度地接触最新技术，鼓励学生敢于向难题挑战。在满足综合作业基本设计要求的前提下，鼓励学生自行添加附加功能，为自己的作品“锦上添花”。在网页设计综合作业中，个人网页设计精彩纷呈，有些没有讲过的技术，学生也能应用。学生的思维是非常活跃的，只要加以正确的引导，在建立了兴趣的基础上，他们总能带给我们“意外的惊喜”，甚至是惊叹，教师在这一过程中也能从学生那里学到一些新知识。

学生在完成综合作业以后，不仅仅增强了动手能力，巩固和提高了对知识的掌握和理解，更是极大地培养了创新意识与创新思维。我们只有让学生在快乐的基础上主动学习、实践，让学生在学习的过程中尝到成功的喜悦，感受到自身能力的提高，增强学习的主动性，才能够真正达到学习的目的，才能最大限度地将“以学生能力发展为本，培养学生的创新意识与创新思维”的教学理念渗透进教学中去。

4.结束语

《网页设计与制作》课程教学内容活泼多样，教学方法灵活多变，目的明确。实践证明，以上教学方法及实践环节，都充分调动了学生的学习积极性，体现了以学生为主体的思想，充分体现了理论与实践的紧密结合，学生既学到了理论知识也掌握了实践技能，提高了学生的技术应用能力，收到良好的教学效果。

参考文献

[1]刘英晖.探索项目导向法在《网页设计与制作》中的运用[J].制造业自动化,2011

(6):188-190.

[2]韩勇.案例驱动教学法在《网页制作》课程分阶段教学中的运用[J].电脑与信息技术,2010(4):68-70.

[3]余平.项目驱动在网页设计实践教学中的应用[J].实验室科学,2007(5):94-95.

网页设计教学教案篇7

教学内容选取根据网页设计课程在服装艺术类专业中的定位及服装艺术类专业学生特点，教学内容要有合适取舍。根据多年的教学经验，课程主要内容选取如下：第一章为网页制作基础，主要包括认识网站和网页、网站开发基础、初始Dreamweaver、站点基本操作、网页文档基本操作。第二章为应用表格布局网页，主要包括创建和选择表格、设置表格和单元格属性、拆分与合并单元格、行列的添加与删除。第三章为设置网页内容，主要包括网页基本设置、文本输入与编辑、应用图像、应用动画和多媒体。第四章为应用超链接和行为，主要包括常规超链接、热点链接、电子邮件链接、图片链接、下载链接、命名锚记链接和制作浮动的广告，设置状态栏文本、弹出信息及制作收缩放大的图像等效果。第五章为应用CSS样式，主要包括样式表的基本应用及样式表的高级应用。第六章为应用Div+CSS布局网页，主要包括Div+CSS布局基础、Div+CSS布局中的定位方式及应用Spry布局对象。第七章为应用框架布局网页，主要包括框架网页的创建、框架和框架集基本操作。第八章为应用模板和库，主要包括创建和编辑模板、应用和管理模板、创建库项目及应用和编辑库项目。第九章为动态网页制作入门，主要包括安装和配置IIS、配置动态站点及应用表单和表单对象。第十章为测试和网站，主要包括虚拟空间和域名、站点本地测试及站点。课程的重点是文本处理、图像处理、超链接、使用表格、CSS样式，难点是使用框架、CSS样式。在课程的最后阶段，教师设定技术框架和规模，要求每位学生独立完成网站的设计与制作，学生通过自主选题，内容收集与整理，然后，学生在规定的时间内，完成创意、设计和制作的全部工作。

二、服装艺术设计类专业网页设计课程教学方法

课程主要采用案例教学法。每个章节知识点都以项目任务进行贯穿讲解。在每个任务讲解后，通过课后练习让学生及时巩固知识。每堂课教学过程分为4个阶段：第一，任务说明阶段。教师展示本堂课案例的最终效果，并对此进行简易的分析和评价，指出本案例所用的新知识点和所要实现的目标，对于旧知识点根据实际需要进行必要的复习提示。第二，相关知识点讲授阶段。针对案例中的相关知识点，通过小型辅助案例进行分析讲解，激发学生的想象力，完善知识体系。要求学生在课堂练习和课后学习中，根据各自的想象去拓展该案例，为后续自主命题设计与实践打下良好基础。第三，任务实施阶段。在本阶段中，教师首先给出任务实施的具体要求，让学生结合课堂案例的实现方式和流程，独立去完成任务实施。然后，针对本项目所涉及的讲解案例以及相关知识点、设计与制作方法、创意效果进行总结，完成课堂教学任务。第四，课后练习阶段。在练习阶段，教师提出技术框架要求及创意设计要求，让学生自主选题、自由创意进行设计制作网页。在自主选择网站主题时，提倡学生面向学科应用需要，面向实际进行选题。如：以服装服饰的文化、设计和生产，或者服饰流行趋势等为网站主题。选题时，要考虑对网站内容的理解和把握程度，对相关文本信息、图形图像信息和媒体信息的收集、归纳和整理的水平，因为这些也在很大程度上决定网站的创意、设计和制作水平。自由创意让学生发掘自身的专业潜能，利用所学计算机技术把创意效果展现在网页上。做到主题鲜明，内容完整，色彩搭配美观，页面构图简洁合理等。此外，在这个阶段，教师可以通过多种方式，比如QQ、微信等，对学生的技术问题给予个性化的指导和帮助，对内容设定、创意设计给予点评，引导学生制作设计出优秀作品。

三、实施结果与分析

首先，学生出勤率及作业上交情况有了很大的提高，也就是学生的学习兴趣有了很大的提高。其次，优秀作品所占百分比有了最大幅度的提高，也即说明学生的网页创意设计有了很大的进步，也即是更多学生能将创意艺术与计算机技术进行完美结合设计网页，提高了教学质量。

四、结束语

在服装艺术设计类专业中开设网页设计课程，主要是顺应了时代需求，培养服装艺术设计与计算机技术相结合的能力，从而提高学生把计算机应用在专业领域中的能力。根据服装艺术设计类学生具有的审美和创意设计的优势，对教学内容进行必要的取舍，在教学过程中应注重网页的创意设计，不应像理工类学生那样只注重计算机技术的培养，在教学方法上以案例教学为主，贯穿讲授知识点，并要给学生留有足够的创意设计时空。

网页设计教学教案篇8

关键词 JavaScript 网页特效 创新精神

中图分类号：TP3 文献标识码：A

随着我国高职招生人数的增加，学生就业形势也越来越严峻，教师必须掌握行业特点，为社会培养高技能的实践型人才，才能满足行业对人才的需求。对于JavaScript教学而言，必须注重学生技能的培养，因此，应采用工学结合的教学模式，提升学生的专业技能，培养具有创新意识的新时代人才。

1教学策略

（1）运用案例引发学生关注

案例教学法是通过在课堂内引入一定的教学案例，使学生在分析案例过程中学会知识的教学手段。案例的特点是较为直观，学生被案例吸引进入知识的探索中，然后思考所学知识。案例教学尤其适用于学生技能的培养，而JavaScript的网页特效属于一种专业技能，所以教师应积极运用案例进行课堂演示，可以用案例解决实施问题，以培养学生的发散思维，使将理论联系实际，具备解决实际问题的能力。

（2）重视启发引导

多数高职学生认为编程语言较为枯燥，因此，教师应注意选择趣味性较强，且学生比较感兴趣的内容作为教学内容或题材，课堂上运行多媒体技术等，以展示JavaScript的动态效果，进而引发学生对编程语言的兴趣，主动投入学习和探索中。同时，高职教师应转变教学理念，积极学习现代教学方法和技术，使教学本身更符合学生的心理需求。注重教学过程的中对学生的启发，还应强调开阔学生的眼界，鼓励学生学习课本以外的知识，并积极进行创新。

2教学实例分析

在JavaScript教学中，教师要注意让学生理解网页特效给网页本身带来的交互性，让学生具备合理使用网页特效提升网页设计设计水平的意识。同时，教师也深入分析学生未来的工作实际，从而有所侧重的锻炼学生的实践能力。高职学生是未来社会相关专业的重要人才储备力量，教师要注意将最先进的技术展示给学生，同时运用最先进的教学工具激发学生的学习兴趣。在实际教学过程中，教师以实例展示、演示为教学的开始，吸引学生注意力，并向学生展示具体的做法。下文以鼠标跟踪和分时问候为教学实例，使用多媒体联机为学生演示JavaScript的编制方法：

（1）鼠标跟踪

课堂开始时，教师以简单的网页特效实例，向同学们展示网页特效的动态性，并询问学生：“哪个同学想要上台试试？”经过教师的鼓励，选取学生上台为台下学生演示制作过程，教师可以从旁帮助，并展示学生的制作效果，如下图1所示。随后，教师总结制作方法要求，并开始学习下一种特效。

（2）分时问候

经过上述教学，学生已经掌握基本的程序制作方法，然后教师教授学生网页预览时根据系统时间显示相应的问候语。教师将该程序的代码展示给学生，并指导学生添加到需要显示的var _userid = '';var _siteid =2230;var _istoken = 1;var _model = 'Model03'; WebPageSpeed =313; UrchinTrack();之间，代码如下：

学生在学习后，教师可以给学生布置作业让学生在课后练习使用，以提高学生的学习兴趣。

3结束语

教师要在教学过程中，注重实例的导入和分析，教会学生使用网页特效提升网页制作的效果。学生已知JavaScript的代码，只需调整语句及参数，就可满足不同网页设计的需求。教师要注意启发学生的思维，拓宽其思路，鼓励学生运用奇思妙想，设计更加丰富多彩的网页特效。在网页制作中，不仅要重视制作技术，还要注重网页的艺术性。未来电子产品的用户，更注重产品的人性化和艺术性。因此，高职学生注意科学与艺术的结合，具备市场意识，从而使其在该行业内寻求更好的发展。

参考文献

[1] 张树芬，赵新建.JAV语言WEB页面设计[J].信阳师范学院学报（自然科学版），2012，13（2）：200-213.

[2] 施伯乐.网页开发语言JavaScript实践教程[M].上海：上海交通大学出版社，2012，6（05）：115-116.