网页设计教学教案（最新4篇）

作为一名老师，时常要开展教学设计的准备工作，教学设计是实现教学目标的计划性和决策性活动。一份好的教学设计是什么样子的呢？的小编精心为您带来了网页设计教学教案（最新4篇），如果能帮助到您，小编的一切努力都是值得的。

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

（一）环节一：导入新课、创设氛围

1.教师活动

（1）展示班

>> 《动态网页设计》案例生活化教学设计 动态网页设计教学探讨 模拟公司教学法在动态网页设计课程中的实践与思考 项目教学法在《动态网页设计与制作》课程中的应用 比较学习法在《ASP动态网页设计与应用》教学中的应用 一体化教学在ASP动态网页中的应用与反思 “ASP动态网页设计技术”项目教学法的研究与实践 《ASP动态网页设计》课程教学方法改革与实践 浅谈运用动态网页辅助教学 借助Xmind思维导图辅助动态网页教学 浅谈《ASP动态网页设计》课程教学改革 职业院校ASP动态网页设计教学刍议 高职《动态网页设计》课程教学改革研究 浅谈《ASP动态网页设计》教学研究 PHP 动态网页制作课程一体化教学模式的探索与实践 《狐假虎威》教学案例与评析 教学案例的设计与解读 《风筝》教学案例与反思 教学案例认识与体会 《泪珠与珍珠》教学案例 常见问题解答 当前所在位置：），在该页面的合适位置尝试创建表单。

（3）学生思考自己个人网站的表单里需要设置什么样的题目，才可以有效获得浏览者有价值的信息。

（4）根据设置的调查题目内容选择恰当的表单控件元素，并根据具体题目的选项，尝试修改控件的属性。

（5）学生尝试在表单区域内添加按钮控件，并测试表单页面运行后，各表单控件元素的选定或填写后的变化。

3.设计意图

通过评价其他同学的网站作品去设置调查的问题，可以使学生的表单任务更具有针对性和实用性。通过层层深入的关联问题，引出新知识，调动学生的学习积极性。

（三） 环节三：知识探究，解决问题――表单数据提交到哪里？接收页面收什么？怎么接收？如何显示？

（1）通过再次观看在线互动页面的填写提交过程，发现交互的过程有两个页面，引出需要一个页面来处理前一页面发送或提交过来的数据，建立数据处理页面feedback.htm，两个页面有什么关系？（发送和接收）

（2）通过建立两个页面的关系，引出表单form属性的动作设置（Action= feedback.htm）。

（3）通过接收数据，讲解Request.Form（“表单元素名称”）对象的基本语法及使用方法。

（4）通过显示已接收的数据，讲解输出语句（<%= %>的基本语法及使用方法）。

（5）通过上传第一次测试，结果不成功，找问题：引出基于服务器端动态网页ASP（讲解动静态网页区别及工作过程）。

（6）根据上述新知，修改feedback.htm后缀为asp，第二次上传测试：成功。（结合基于服务器端环境的动态网页工作原理，思考原因）

……

二、教学反思

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

本文主要探讨网页设计与网站管理课程教学的现状以及在教学过程中存在的问题，结合部队院校的特点，提出更合理的教学方法建议，寻求一条新的教学思路和教学方法，以便培养出越来越多部队所需要的网页设计与网站管理人才。

【关键词】

网页设计与网站管理；教学设计；考试方法

1部队院校网页设计与网站管理课程教学存在的问题

1.1部队院校网页设计与网站管理课程的教师水平参差不齐现阶段，部队院校正处于教学改革的重要时期，但是在教学过程中一些院校的教师的教学思想仍然比较守旧，网页设计与网站管理的专业知识和设计思想没有及时更新，在教学过程中没有很好的结合现代化教学方式方法。此外，在教学过程中不能很好与网络信息技术进行整合，特别是不能及时的把军事科技的新知识、新经验融合到网页设计与网站管理教学中。教员滞后的专业知识严重影响了网页设计与网站管理学员的学习热情和学习效果。教学内容不能很好衔接，网页设计与网站管理需要的预备知识比较多，面向对象编程能力、数据库知识、美学修养等都是必须的，而学生在选课时，部分学生没有这方面的预备知识，因而学习起来比较吃力，积极性受到打击。

1.2部队院校网页设计与网站管理课程的教学方法陈旧由于部队院校的教育的发展略慢于地方院校，一些院校网页设计与网站管理的老师不能灵活应用现代教学工具，及时更新授课方式方法。因此在网页设计与网站管理课程教学时，仍然以老师教授为主，更多时候只是照本宣科，缺乏与学员间的互动，教学方法单一陈旧。而使得课堂缺乏生气与活力，从而使得学员们对网页设计的学习非常被动，严重影响了教学质量。（1）多媒体教学方式未发挥应有作用一些部队院校的教师无法发挥多媒体在教学过程中起到的重要作用，在课堂教学中教师将教学内容简单的以教学课件的形式进行展示，不能够根据部队院校学生的需求和网页设计与网站管理专业特点的角度进行课件设计。从而不能很好的提高教学的灵活性和生动性，提升课堂教学效果。（2）理论与实践结合不紧密大多数部队院校教师仍然采用传统的教育模式，教师只针对教学大纲进行授课，注重理论知识内容的讲授，忽略课堂实践环节，对于操作性极强的网页设计与网站管理课程，按照原来的教学模式授课，大大降低了学员的学习兴趣很差难以保证教学效果。虽然在教学过程中也有实践课程，但仅仅是对知识点的简单上机操作练习，没有采用项目教学、案例教学等新式教学方式进行教学，实践教学环节作用不突出，没有达到实践教学的效果。（3）教学内容衔接性差网页设计与网站管理需要的预备知识比较多，面向对象编程能力、数据库知识、图片处理能力、动画制作能力等都是必须学习的，而学生在选课时，部分学生没有这方面的预备知识，因而学习起来比较吃力，积极性受到打击。（4）教学内容和考试方式单一目前在很多部队院校网页设计与网站管理课程的理论考核部分仍然占据较大比例。整个教学过程以教师为中心，学员被动学习，最后只会做老师教的，不能达到举一反三、灵活掌握，导致学员缺乏创新能力和自学能力。在考试方式上，老师为了更好地完成教学任务，主要精力仍然放在学生们的理论知识和试题上。课后作业大部分以理论试题为主，结课考试学员们的成绩达到了院校要求。学员自身学习兴趣、分析问题和解决问题能力都受到挫伤。最终不能实现该课程的教学目标，不能适应部队对网页设计与网站管理需要的人才要求。

2教学设计分析

网页设计与网站管理课程教学特点：知识点多、内容分散、学生学习主动性差。因此，建议采用项目教学法、案例教学法相结合，来调动学生学习的积极性，突出理论与实践结合的重要性。

2.1项目教学法项目教学法是指在教师的指导下以学员为中心的教学方式。教师在学员学习过程中不仅传授学生理论知识，实践操作技能，还要帮助和提高学员解决实际问题的能力，在整个教学实施过程中注重学习的全过程而不是学习结果。尤其是对于部队院校的学员来说让他们掌握整个项目开发的全过程要比设计出一个简单的网页作品更重要。采用项目教学使学员的学习更有针对性和实用性，提高了学员的实践能力、分析解决实际问题的能力和团结协作的能力。与传统的教学模式相比，该模式是从教学目标出发。作为教师，既要讲解网页设计与网站管理相关理论基础知识，还要负责对每个项目组进行指导，检查督促项目进度；作为学员不光要掌握网页设计与网站开发的整个流程和相关专业知识，还要对所做网站的相关内容进行学习。这种教学方法促使学员从被动学习转为主动学习，大大提高了学员的学习积极性。

2.2案例教学法案例教学法从总体上讲是一种归纳模式，课堂案例是来自身边的真实情境或事件，透过此种方式能够有助于培养和提高学员学习的主动性和积极性。案例教学法涉及的层面很广，包括案例选择、案例编制、案例分析和案例评价，每一个层面的好坏都直接决定了案例教学的成败。网页设计与网站管理课程学习需要根据网站所要表达的主题思想设计不同风格的网页，所以包括的知识内容多而散。比如文本设计、图片设计、版面设计、软件知识等。教师应该根据所授课程的教学内容结合部队的相关资料制作出网页案例，并通过组织学员讨论交流等方式对案例进行分析最终掌握相应的理论要点和操作步骤。

2.3考核方式灵活化网页设计与网站管理是一门实践性很强的学科，该课程需要的考核方式不应该仅用传统的理论考试和课堂表现来测评学员的能力素质，应该通过学员自主设计作品的方式来全面反映学员实践操作能力。考核的目标是学员在设计作品过程中的整体构思、基本专业知识的掌握、实际动手能力和综合设计水平的检验，侧重于如何使用现有的网页素材更好的应用到部队的网页设计与网站管理上，最终实现教学目的。

3结论

通过对教学方法的分析和实践，让我们意识到作为部队院校的教师想要更好的教好网页设计与网站管理这门课程，培养出部队需要的网页设计与网站管理专业人才，首先要提高自身的专业水平和创新教学方式方法；其次通过项目教学法和案例教学法的教学方式注重培养学员的学习兴趣，提高学员的动手实践能力和完成整体案例能力；最后要突出部队院校特色，进一步提升学员将部队最新信息与资源融合到网页设计与网站管理中去的能力。有力的提升部队院校网页设计与网站管理课程的教学质量。

参考文献：

[1]段芸。艺术设计专业《网页设计》课程实践研究[D].沈阳：沈阳师范大学硕士学位论文，2013.

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

【论文摘要】《网页设计》课程是一门实用性和综合性都很强的课程。本课程教学的最大特点是易学易忘。为了提高《网页设计》课程的教学效果，必须不断改革与充实教学内容，注重突出人才培养的实践性、应用性。改革教学方法，培养学生的实际动手能力和计算机的操作能力，使学生能够运用所学的知识进行网页设计。

《网页设计》是近年来计算机专业领域发展最快和应用最广泛的课程之一，当今社会急需培养掌握计算机网页设计、面向不同应用层次的专业人才。因此，本课程自开设以来，受到学生的普遍欢迎，学生对这门课程教学的要求也越来越高。

《网页设计》课程以Dreamweaver MX软件为主干，专门介绍网页设计和制作的基本技巧。通过这门课程的学习，能够让学生掌握网页设计的基础知识，并能熟练地制作出动态网站。但是网页制作技术也在不断地发展变化，新的技术、新的方法也在不断涌现，所以我们也需要将网页设计的最新、最实用的技术引用到课堂上去。

为了提高《网页制作》课程的教学质量，笔者不断地从教学内容、教学方法、实验环节等多方面对本课程进行了积极的创新。在此基础上总结出一些实际教学经验与体会，与大家一起探讨。

一、《网页设计》课程的特点

高等学校计算机专业开设《网页设计》课程的主要目的，是通过本课程的学习，培养学生的实际动手能力和计算机的操作能力，使学生能够运用所学的知识进行网页设计。

《网页设计》不是作为一门课程孤立存在的，它要靠多门学科的知识给予支撑。它们相互渗透和依赖，构成一个科学的、完整的课程体系。

《网页设计》课程的教学内容实践性较强，能极大的激发学生的参与性，锻炼学生的动手能力，培养学生的专业兴趣。学习中一定要注意理论与实践相结合，其中实践内容是教学的主线。学生应该有较充足的动手实践机会，较熟练地创作出实用的动态网页来。理论教学服务于实践教学，实践教学反过来又作用于理论教学。在教学过程中常有学生反映，上课能看懂、理解，但课后就忘了，更不要说以后的实验了。这是本课程教学的最大特点：易学易忘。下面将探讨若干提高《网页设计》课程教学效果的方法。

二、《网页设计》课程的教学方法

1、教学内容的改革

为了让学生能够适应计算机技术的快速发展，笔者在教授这门课程的过程中，对这门课程的教学内容不断地进行着调整。教学调整的目的就是让学生能够独立完成网页设计。所以在课堂上，主要以学生掌握知识为根本、以“能懂、够用、实用”为教学原则、以培养学生动手能力为目标来指导整个教改思路。

《网页设计》课程以前主要是应用FrontPage软件，再结合图像处理软件来处理一些网页图片。而现在网页制作主要讲授的内容是由Dreamweaver软件、Fireworks软件和Flash软件组成。讲授时是按这三个软件的先后顺序对各部分进行讲解，这三个软件的功能更新也非常快，讲授内容不能一成不变，如果这样，容易出现学生学习到的知识陈旧。通过调研并根据网页技术的发展状况，在每学期的教学过程中，笔者都会对本课程的内容进行调整，删除以前教学中过时的、理论性较强的内容，增加目前实用的、流行的新技术。

2、分阶段模块化教学

在教学中应注重突出人才培养的实践性、应用性。将整个教学内容分为四个阶段，每一阶段设计了若干教学模块。第一阶段使学生能熟练使用网页设计的超文本标记语言HTML；第二阶段能熟悉并熟练使用网页制作工具Dreamweaver MX；第三阶段能进行网页设计中的图像和简单动画的制作；第四阶段掌握在网页中嵌入Javascript脚本语言，实现网页动态效果。每一阶段的教学内容完成后，在专业机房组织单元考核，以实现分阶段达标，最终使学生能独立设计小型WEB站点。 转贴于

3、案例教学法

案例教学是在学生掌握了有关基本知识和分析技术的基础上，在教师的精心策划和指导下，根据教学目的和教学内容的要求，运用典型案例，将学生带入特定事件的现场进行案例分析，通过学生的独立思考或集体协作，进一步提高其识别、分析和解决某一具体问题的能力，同时培养沟通能力和协作精神的教学方式。

案例教学使得学生成为了教学活动的主体，形成了学生自主学习、合作学习、研究性学习和探索性学习的开放型的学习氛围。与传统的以教师为主导的教学法相比，案例教学法有以下几个方面的特点：①传统教学方式是以教师和教材为中心，以灌输的方式从书本到书本，从概念到概念，关注的是向学生灌输了哪些知识，忽视了对学生学习潜能的开发，导致学生理论与实践的脱节。而案例教学十分注重学生的主体性、主动性、自主性的发挥，注重引导学生通过案例的分析推导、运用概念较好地解决实际问题，促使学生的思维不断深化，并在力图对一个问题寻找多种解答的过程中培养和形成创造性思维。②案例教学有利于提高学生分析问题和解决实际问题的能力。区别于传统的注入式教学方式，案例教学是一种动态的、开放的教学方式，在案例教学中，学生被设计成自身处在特定的情境中，在信息不充分的条件下对复杂多变的形势独立做出判断和决策，在这过程中锻炼了自我综合运用各种理论知识、经验分析和解决问题的能力。③案例教学有利于促使学生学会学习。学会学习是学习型社会对人们能力的基本要求。传统教学方式教给学生的是运用概念解决问题的现成答案，学生获得的是背诵、机械记忆、按标准答案答题的知识。而案例教学告诉学生“答案不止一个”，答案是开放的、发展的。在案例教学中，教师通过有意识的引导，让学生自己去查资料，通过个体独立或群体合作的方式做出分析和判断，积极寻找多种答案，这样经过反复多次的积淀后，就会获得了自主学习的方法，使其学会学习成为现实。④案例教学有利于促使学生学会沟通与合作，在合作中互相沟通，在沟通中增进合作。

在教学中，教师通过精心挑选案例，明确提出需要掌握的知识点及操作技能，以案例带动知识点，贯穿整个教学过程。具体做法是通过具体案例提出任务，将任务分解到每次的课堂教学中实现，教学过程中为了调动学生的学习积极性，教学过程中常常采用互动方式，即老师提出一种解决问题的思路，然后让学生采用其它方式来解决同一个问题，课堂上每介绍一个任务后，都要首先让学生上机去模仿着实现，然后再要求他们采用自己的解决方案来完成任务。实践证明，采用这种方式进行实践性强的课程教学收效非常明显。

4、注重实践环节

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

为了让学生有良好的创作技巧和独特的风格，把综合作业布置之后，先让学生进行选题，构建出自己的网站结构，再上网查询相关的资料，然后对网站进行规划，写出书面的网站设计方案，教师对每个学生的方案进行审查和评阅，及时指出应改进的地方和存在的问题，满足要求了，学生方可开始制作。通过这些环节让学生学会了创建、查找、阅读专业文献资料的方法，培养了学生撰写方案的能力。

总之，教师应以培养能力为主线，强化实践性教学。

教学工作是学校工作的重点，教学方法的革新是一个永久的话题，在教学过程中必须不断探索、不断创新，只有这样才能顺应时代潮流的发展，培养出素质高能力强的人才。

【参考文献】

[1]吕慧娟。 《网页设计》课程教学的创新与实践。 电脑知识与技术。 2007.13.

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

【关键词】 案例教学；计算机网页设计；教学应用；注意问题

传统的网页设计教学，基本都是依据教学大纲的要求，模式化的开展教学课程，这种教学模式严重限制了学生的思维，不利用学生理论联系实践能力的培养，导致理论与实践相脱节，基于这些问题，引入案例教学，根据学生特点以及当前教学要求，科学选择案例，将教学与实际的工作内容相结合，这样才更加符合当前计算机教育培养人才的要求。

一、案例教学模式内涵以及特点

案例教学，顾名思义就是以具体案例为依托，进行网页设计教学，这种教学方法能够帮助学生掌握扎实的基础知识以及具体实践操作要点，根据教学大纲的要求，明确教学目标之后，教师带领学生一同进行实践学习，通过小组合作、探索研究等方式，对知识进行进一步解析和研究，从而不断提升学生解决问题的能力，此外，教师还应该将学生协调沟通能力、工作作风等方面纳入教学计划当中，从整体上提升学生的网页设计综合水平，在大量的实践调查分析后发现，案例教学能够充分调动学生的学习积极性，同时也能够活跃网页课堂教学气氛，在和谐的师生关系基础上，通过形象、生动的案例教学，学生对网页设计课程的兴趣会更加浓厚，学生亲自参与到网页制作的过程中，教师合理的在各个知识点结合案例讲解，学生对这些知识点的理解会更加容易，记忆更加深刻，理论联系实践意识得以强化，实践能力不断提高，教师在案例教学中充当的是引导者和启发者的角色，指导学生学习的方向，提高学生自主学习效率。

二、案例教学在计算机网页设计中的具体应用

1、案例教学设计

案例名称：某旅游公司“一日游”的专题网页设计

（1）企业概况。本次进行的案例教学，以某旅游公司的专题设计为内容，该公司从事旅游资源开发工作，是一家具有民营性质的合法公司，在庐山脚下，四通八达，以“庐山”为景点的一日游独具特色，价格合理，是针对各个群体要求定制的套餐服务，该公司具有自己的宣传网站，属于“三星级”旅游公司。

（2）“庐山一日游”的主题介绍。人们生活节奏加快，身心俱疲，在周末或者是闲暇的时候，去庐山欣赏自然风光，缓解身心疲劳，通过体验大好的自然风光，唤醒人们对祖国打好河山的热爱，

2、主要教学内容

（1）准备阶段。准备阶段，教师要选择合适的案例，提供给学生，学生根据教师提供的案例，设计主题，进行相关资料的搜集，教师要以学生的兴趣、爱好以及学习特点为依据，选择当前的热点问题，以及学生关心的问题、擅长的问题，这样才能保障案例教学的成功。

（2）明确设计主题。教师首先将材料分发给班级全体学生，根据教学目标和公司情况，明确设计主题，要求学生设计具有风格特色，能够具有市场轰动效应的交互性专题网页。

（3）实践分组。班级全体学生共有45人，以9人为一个小组，共分为5个小组，每个小组选择一名小组长，小组内容自行分配文字报告撰写、资料搜集任务，调查时间为半天，讨论研究时间为半天。在整个实施阶段，教师需要全程参与，并为学生解决各种问题，同时教师要积极与各个小组保持联系，检查他们的网页制作情况，发现问题及时解决。

（4）结束阶段。这个阶段，就是总结网页制作情况，分析问题，总结经验的过程中，案例评价可以通过学生自评、教师评价以及小组互评三种方法进行。

三、案例教学落实过程中应该注意的问题

在开展案例教学的过程中，和谐的学习分为良好的师生关系以及科学的知识体系，是促进案例教学成功的重要因素，因此教师应该更加关注这几个方面，为案例教学的实施提供更好的条件。

1、营造轻松、和谐的学习氛围

开展网页设计教学中，和谐氛围中，学生的思维才能够更加活跃，心理上才会产生安全以及自由的感觉，网页设计、资料整理分析的时候，才能够大胆想象，教师在案例教学实施的时候，切记自己只是引导者，在适当的时候给予学生点拨，但是绝不能代替学生思考和设计，教师应该充分发挥学生的主管能动性，让学生独立完成整个案例教学过程。

2、提高教师素质，构建良好的师生关系

若想保证计算机网页设计案例教学顺利进行，需要教师具备知识洲博、经验丰富的特点，这也是教师为学生传递经验和知识的基木条件。因此，教师必须要不断的学习，以便为学生提供丰富的信息。因为只有这样，才能提高教师的影响力和威信，进而提高教学质量和教学效果。除此以外，教师还应全面、多角度的爱护和关心学生，同时融入学生中间，以便更好的感受和体会其内心世界，进而在做好教师的同时，努力成为学生的朋友。

3、建立科学合理的知识体系，选择合适的教学案例

良好的认知体系，是帮助学生快速掌握消化知识的关键，学生具备了认识和适应环境的基本条件，在学习中就可以不断实现知识的平衡同化，其顺应机能也更加优良。但是良好的认知体系并不是一开始就有的，教师应该引导学生建立固有知识与新知识点之间的联系，以教学大纲为依托，开展案例教学，应保证案例具有较强的针对性，且能充分反映教学大纲中的相关知识点。例如，为网页页面进行布局时，可通过表格、框架和层的方式进行，如为食品网站做简图时：为确定网页的主色调，应将背景图片插在第一层中：为给网页增添活力和生机，可将has插在第二层中：将精美食品插在第三层中：为体现饮食文化，可在第四层中搭配相关歌曲：为增强网页的立体感，可在第五层中添加浮动物体。此外，教师应先鼓励学生使用表格布局解决相关问题，尔后引出层的内涵，进而逐步解决问题，直至完成学习任务。

四、结束语

案例教学是目前网页设计教学中，最为有效的一种教学手段，它的应用，突破了传统枯燥、单一的教学模式，解放了学生思维，教学更具针对性，学生真正成为了学习主体，网页设计本身实践性非常强，教学中必须要综合理论与实践两个方面，案例教学符合理论联系实际的教学要求，能够推动网页设计教学质量与效率的提升。本文从三个方面对案例教学在网页设计教学中的应用进行了分析，希望能够为相关的教育工作者提供一些建议和参考。

【参考文献】

[1] 陈思聪。浅析电子商务案例教学模式[J].教育现代化，2016（10）.

[2] 林丽钗。案例教学在高职教育学中的实际运用[J].科学中国人，2016（15）.

[3] 张善利。试析积极实施案例教学法在会计专业教学中的运用――以中职会计专业为例[J].现代经济信息，2014（22）.

[4] 甄华。C语言案例教学模式在高职教育中的探讨[J].计算机与网络，2015（08）.