《制作交互网页教学设计（优秀3篇）》

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

制作交互网页教学设计 篇1

网页制作的教学设计

一、教学目标、知道站点、主页的概念，能在指定位置建立只有一个网页的站点；、认识 frontpage 的界面；、掌握在主页中插入文字、图片、水平线；、掌握页面文件与图片的保存。

二、教学重点、能在指定位置建立只有一个网页的站点（难点）、能在页面中插入文字、图片、水平线、掌握页面文件与图片的保存（难点）

三、学情分析

学生已经学习了 word、powerpoint 与上网浏览信息，对计算机的基本操作（word 中文档的编辑，网页的浏览等）比较熟练。这使得学生主动探索、自主学习成为可能。每位学生必须完成基本任务，有能力的学生还可以完成提高篇的学习，以充分发挥学生的积极性与自主性。

四、教学方法

在教学中，一方面采用比较教学的方法，促进学生知识的迁移；另一方面，提供学生一个导学课件，让学生根据这个网络环境下的课件自己探索学习，以满足不同层次学生的需求。

五、教学过程设计

教师活动： 1、引入课题：（激发兴趣，活跃气氛）

同学们喜不喜欢上网？经常上新浪、西祠胡同等，有没有同学知道新浪、西祠胡同称做什么？（网站）

浏览新浪网站，浏览的第一个页面称为什么？（主页）

我们还可以浏览其它的页面，点击超链接浏览，当鼠标变成手指的形状时有超链接。

问题 1 ：网站是不是就是网页？用自己的语言描述一下网站的概念（网站包含多个网页，通过超链接把不同的页面链接起来）

问题 2 ：网页是不是就是主页？(第一个页面称为主页 , 网站设计者可以确定哪一个是主页 , 主页的文件名一般为： , 主页也是网页)

设计网站一般必须经过两个步骤，首先是在计算机里做好，然后发布在 internet 上，让所有的人访问浏览。

今天我们学习用 frontpage 建立站点，制作一个主页。

先来研究一下没有发布的网站 , 打开教师做的网站

问：同学们看到了什么？（文件夹）

总结：

可以这样理解网站：在资源管理器里，网站表现为一个文件夹，里面存放的是所有与网站相关的文件。

打开主页，浏览页面，这是老师做的一个导学课件，将帮助大家完成学习任务。

请学生浏览教师课件，了解学习任务、新建站点

fp 的启动

问：与 word 比较，有什么不同？

（增加了视图区，编辑区有三个窗口）

总结：

视图区：多种视图模式是为了方便网站的管理。制作网页时，必须在网页视图中编辑页面

普通窗口：鼠标在闪动，可编辑、修改页面，所见即所得的方式

预览窗口：浏览器中出现的效果，与 powerpoint 中的 “ 放映幻灯片 ” 类似。

html 窗口：编写 html（超文本标记语言，它是描述网页内容和外观的标准。）

打开导学软件，根据步骤，示范建立只有一个网页的站点，强调新站点的位置、路径的正确输入，站点的名称。

（教会学生利用导学课件，根据导学软件完成任务）

任务 1 ：学生根据导学课件，在 d: 建立自己站点

教师巡视指导

请一位学生示范如何建立站点 , 教师总结

问：在文件夹列表中看到了什么？

分析多出的文件夹列表栏，多了一个文件夹，里面有两个子文件夹和主页，图片存放在 images 文件夹中）、编辑主页与保存主页

看效果图，请学生分析主页中的元素

总结：鲜明的主题，如：我的世界、我的宠物等，有分割页面的水平线，与主题相关的图片，对网站的简单介绍

根据导学软件，学生完成任务 2 ：设计主页、保存主页与图片

教师巡视指导、总结反馈

请学生示范，讲解如何插入图片（来自剪贴画与来自文件）、插入水平线，如何保存

总结：必须切换到 “ 普通 ” 窗口下编辑

主页的保存中存在问题：

单击 “ 文件 ”----“ 保存 ” 或工具栏的 “ 保存 ” 按扭，弹出一个对话框，保存嵌入式文件，改变文件夹，图片必须保存在本站点 images 文件夹中 , 便于站点的管理。、请学生继续完成自己的主页，有能力的同学完成提高篇

教师巡视指导、教师与学生共同评价总结

展示学生作品，教师与学生共同评价

请学生总结今天的学习内容：建立包含一个页面的站点，主页的设计与保存。

学生活动：学生回答问题、学观察鼠标指针、学生回答问题、学生观察网站的表现形式、齐声回答、学生浏览课件，并了解本节课的学习任务、学生观察 fp 界面与 word 的不同、学生回答、学生观察教师演示不同编辑窗口的区别。学生上机操作，在指定位置建立自己站点、请先做好的学生当小老师，辅导其它学生。学生回答、学生操作，同桌互相帮助，并参考教师做的课件，利用网络环境下的课件自己探索学习，满足不同层次学生的需求、学生总结

注：课件中包含每一个操作过程的操作步骤及拓展的知识、基本任务与提高任务的效果图。

点评：

教学课题 “ 网页制作 ” 作为初中阶段的最后一部分内容，难度较大，教学的深度较难掌握。这就要教师在备教材的基础上，同时还要备学生，做到对学生的情况有较为深刻地了解，以便很好地完成教学任务，达到预期的教学效果。根据教材和《中小学信息技术课程指导纲要（试行）》中的精神，本课应以 “ 任务驱动 ” 的方式完成，一方面教会学生了解和熟悉具体软件的基本功能，另一方面又能主动地掌握并深入学习思考。寻着这个思路授课教师在课前作了大量的课前准备制作出了相应的教学课件 “ 网页制作 ”。

一、调动学生的学习热情，变被动学习为主动学习

整个教学过 程张云 老师采取了 “ 引导加任务驱动 ” 的模式进行。首先教师进行导入，导入概念，强调概念；再引导学生学习课件的使用，引导他们读懂课件中的第一个任务：建立一个只有一页的网站，（此处若能引导学生，由学生来完成，减少老师的操作，效果会更好），然后让学生模仿第一步的操作进行下面内容的学习，完成导学材料中给出的一个个任务。

二、突出重点，及时点评

张云 老师在引导学生进行学习、操作后，就主动地去观察和发现学生中出现的问题，甚至于课前对可能出现的问题，也进行有预见性地准备；发现问题及时点评。（点评分为个别点评和全班点评，点评不等于教师将操作过程演示一遍。张云 老师在点评建成的网站时，重点若再突出些，介绍再清楚些，效果会更好。比如：站点中内容说明不够清楚等。）

三、发挥学生的协作学习精神

张云 老师在教学过程中，对有困难的学生进行个别辅导，同时还需发挥学生的协作学习的精神，充分调动学生学习的积极性，让学有余力的学生充当 “ 小老师 ”，从而体会到学习的乐趣。（整个教学过程中，这点做地不够，没有充分地让师生互动起来）

四、重点突出、目标明确

最后，张 老师在整个教学过程中，应再突出教学重点，明确本节课的任务。（课前的导入，最好给出教学目标，课后的小结应让学生总结他本堂课学习到哪些知识，所以感觉这节课重点不突出，内容分散。）

五、教学效果较好

由 于张云 老师在课前对本课作了大量的准备工作，课件制作效果较好，所以学生完成情况很好，教学任务完成情况较好。

制作交互网页教学设计 篇2

一、教材分析

本课是frontpage中一节基础内容课，也是frontpage以后知识学习的铺垫。本节课以制作一个简单网页为教学任务，学习目的明确，步骤清楚，希望完成任务而初步掌握简单制作步骤的指导思想。同时对学生网页的创作能力、网页布局和色彩搭配能力进行激发与培养。并为其以后进一步学习网页制作而打下良好的基础。本节课的重点是网页常用编辑器以及网页设计布局，难点是网页的设计及布局。教师重点在导，学生重点在实践与创新。为了合理利用上课时间，将用已有部分拓展知识和演示范例利用网络下传至学生机，以利于学生上课的实践与创新。

二、学情分析

我校的大部分学生在小学就接受过系统的信息技术课程学习，具备了一定的计算机操作能力，加上初

一、初二也学完了word execl powerpoint的知识，应该说学生都具备了一定的基础。但也有部分学生基础没有打好，但基本的操作应该没有多大问题。因此，在教学过程中关于frontpage的打开与保存，这里我让学生自己去学习，教师只给予必要的提示。而关于html 和讲授网页布局的过程时，有必要要教师先演示一下，这也是本节课的重难点。

三、教学目标分析：

1、知识目标：

通过本节的教学，学生将了解常用的网页制作软件，掌握frontpage的操作界面，并能亲自尝试做出简单的网页作品。

2、过程与方法

学生将通过教师的引导，学会通过自主的研究探索，主动获取知识，并运用知识解决问题，逐步地培养自己的创新精神和实践能力。这对于学生以后的进一步学习很有帮助。具体过程：课题引入-----教师提示------学生上机自主学习------问题反馈-----教师演示-----学生完成作品-----优秀作品点评-----教师小结-----巩固练习-----课后探究、实践。

3、情感、态度与价值观 ① 活动教学激发学生学习frontpage的兴趣。

② 培养他们自主学习、互相协作的良好学习习惯以及自主创新精神。

4、重点、难点

重点：了解常用的网页制作软件，掌握frontpage的操作界面。

难点：网页的合理布局和色彩搭配。

四、教法阐述

为了实现以上教学目标，结合教材特点，本课采用的主要教学方法有“任务驱动法”、“创设情境法”等。通过学生已经受过的美术教育和信息技术教育（课程整合），创设一个inter网页在线的情境（创设情境法），设置一个个任务，让学生运用已学知识，自己动手，有机完成课堂设计的各种操作（任务驱动法）（包括：了解常用软件的概况，利用word对frontpage的操作界面熟练掌握，完成自己的第一个网页设计。）以任务驱动的方式查漏补缺，使教学内容合理流动，水到渠成。教学中，启发、诱导贯穿始终，充分调动学生的学习积极性，注意调节课堂教学气氛，使学生变被动学习为主动愉快的学习，使课堂能在生动、有趣、高效中进行。

五、学法指导

本课教给学生的学法是“接受任务——思考讨论——合作操练”。建构主义学习理论强调以学生为中心，要求学生由知识的灌输对象转变为信息加工的主体。故此本课教学过程中，巧妙设计，让学生带着一个个任务通过课堂讨论、相互合作、实际操作等方式，自我探索，自主学习，使学生在完成任务的过程中不知不觉实现知识的传递、迁移和融合。

六、教学设计

1、收集资料，激发兴趣。

在这一环节中，教师利用课前准备好的前期省市获奖网页作品，并将之融合到课件中。教师结合初中学生特点和乡土教育，故利用屏幕广播播放《我的家乡》和《思品斋》，让学生共同欣赏，从而引导学生的创作欲望，激发其兴趣。

设计意图：通过网页实例的导入，将课堂气氛调节得比较活跃，让学生更容易进入学习状态，为以下的学习做好铺垫。

2、初识网页制作软件。在激发了学生学习兴趣后，教师趁势提出：你们也想制作这样的作品来表达自己的想法吗？顺势引出“三剑客”的概念，引导学生了解常见的html编辑器。

设计意图：通过学生感兴趣的问题设问，吸引学生的注意力，激发学生的学习兴趣。

3、层层攻关（任务驱动 逐步提高 分层教学）

欣赏过网页，教师就提出与学生共同制作简单的网页的想法。在授课中我安排了多次的动手制作活动，制作难度由浅入深，旨在通过学生自己动手动脑，形成自主探究进而创作的能力。

（1）第一关：基本任务：边学边做，牛刀小试

由于是初次制作，所以不易过难过复杂，所以选择了让学生自主进入frontpage的界面，因为有office前面知识做铺垫，学生进入操作界面并可以在较短的时间内熟悉基本的操作界面，又有助于形成学生内心的成就感，提高学生继续学习的积极性。后巡回辅导并观察哪些学生用的方法最快、最简便。

学生：自主学习、互相协作，也可以参考教师已下传上操作方法或正确样例。设计意图：这是第一关任务，对于已有计算机操作基础的学生来说相对较简单。所以我这里给出提示与操作方法后让学生自己去过这第一关。让学生学会操作，并尝试不同的操作方法来解决问题。（2）第二关：进阶任务：由学到创，拓展提升

在学习完成第一个环节后，教师趁势提出html的概念，实例中字体、大小、颜色变化，引导学生观察普通、html、预览的不同，以及相关的操作方法。在此基础上，教师进一步设置了拓展问题，让学生设计自己的网页，并通过简单网页的制作体会html的具体含义。最后教师选择相关学生进行总结，教师注意点评。

学生：根据刚才学习的知识和教师提供的素材。先完成自己的作品并与同学进行交流和沟通。学生通过不断的实践，简单修改html的方法，并进行演示。

设计意图：这是第二关任务，其中html也是本节课的重难点，所以教师先用一种常用方法演示html的内容，而修改让学生自主学习完成。同时让学生相互进行交流，有助于提高他们的学习积极性与成就感，又可以培养他们之间互相帮助学习的良好习惯。方法多样让学生学会用不同的操作方法来解决实际问题，但得让他们自己去实践，这有助于培养他们自主学习的良好习惯。（3）第三关：挑战任务：展翅高飞，自由创作

在学习制作完第二个环节后，引导学生进入“网页达人”的环节，本环节主要讲解网页的布局等知识，由教师演示常见的网页布局格式，并简单的给学生进行点评和原理分析。在此基础上，引导学生结合自己的上网经历仔细对比异同，同时归纳适合个人网页的布局和颜色搭配方式。

设计意图：在第二关的基础上，对出现的问题，进行分析、演示。让学生在掌握操作技术的基础上对网页布局和颜色搭配有进一步的认识，在此基础上形成对学生审美观的培养。完成第三关操作任务即完成自己的作品。让学生能设计出有创意的作品，培养他们的创新精神。考虑到学生之间的差异，在这里只对背景和图片的接触和了解，让计算机基础好的一些学生能探索出新的知识操作。

4、评价作品 教师总结 评价作品

（1）学生互评：通过教师设置的共享文件夹了解其他学生作品，学生互相发表意见。

（2）学生自己推荐：认为自己作品好的学生可以举手向老师推荐。（3）教师总结评价：教师对学生们评价出的优秀作品以及自己推荐的作品作评价并结合作品完成的时间前后评选出前5位优秀作品并进行表扬。

设计意图：培养学生评价他人作品的能力。互相欣赏作品可以让学生来检测自己的学习成果，知道彼此之间的差距。让学生有成就感，从而激发学生的学习积极性，进一步活跃了课堂气氛。

教师总结

教师结合学生作品和上课的具体情况总结本节课的主要内容，注意强调知识目标和情感态度价值观的总结。

5、知识竞答大比拼

教师演示准备好的一个知识竞答游戏，学生观看大屏幕，抢答题目。设计意图：用游戏形式的巩固练习即让学生对本节课的知识学习得到反馈，进一步巩固所学知识，又可以活跃课堂气氛。

6、课后探究实践

教师给出提示，引导学生自主学习，充分挖掘他们的学习潜力

设计意图：让学生在课后有思考问题的空间，进一步激发他们学习frontpage的兴趣。培养他们自主学习计算机其他操作知识。

制作交互网页教学设计 篇3

《网页的制作》教学设计

山东省昌乐二中 滕学梅

【学情分析】

1.在学习网页制作之前，学生进行了网站的规划与设计，还没有就网页制作真正着手练习，对frontpage的使用比较陌生，但是已经有word等软件的操作基础，很多基本的操作可以迁移过来。并且，通过高一的学习与养成，学习小组的整体意识已经建立，组内合作、组间竞争的氛围已经形成，所以可以采用先进行自主练习，然后合作探究，通过各组推荐的作品展示进行评价，在展示的同时也提高了学生的技术水平。

2.学生操作基础不同，接受能力不同，可以充分发挥各小组“技术顾问”的作用，帮助指导组内其他成员，共同完成学习任务。【学习目标】

1.熟练掌握网页制作和美化的基本操作，提高操作和审美能力； 2.大胆动手，积极实践，总结用网页表达主题的技巧和方法； 3.积极、热情地投入学习，体验网页制作的快乐。【重点难点】

1.重点：利用表格对网页进行布局；网页中的图文设置及超链接的使用。2.难点：网页间超链接的建立。【教学过程】

课前准备：提前做好小组座次安排，由学科班长组织大家按组入座。

一、展示导入，明确学习目标（3分钟）

1.展示精彩网页（如北京大学、清华大学网站首页），引导学生简单分析网页风格。2.明确本节课学习目标与主要任务。

二、指导与点拨（3分钟）

1.分析北京大学网站首页，观察其网页布局（如图），引导学生尝试使用表格对网页进行版面设计。2.对网页制作所用的基本操作进行点拨：（1）文字、图片的添加与调整（2）网页背景的设置（3）超链接的建立

三、基本功练习（10分钟）

1.任务：快速“克隆”示例网页。（素材发到桌面“基本功练习”文件夹中）

与word中的操作类似，注意迁移 2.要求：（1）先独立练习（参考导学案的“操作导航”）；尝试一遍后可与组内同学小声交流，解决疑难问题；

（2）每组的“技术顾问”完成任务后可下座指导；（3）完成后相互检查超链接的效果。

四、制作主题网页（15分钟）

1.任务：从桌面“主题网页”文件夹给出的四个主题中选择一个，快速完成主题网页的制作；

2.具体要求参看导学案“实践探究”部分；可两人合作，有能力者最好独立完成；

五、作品推选、上传：每组推选一个作品参加组间评选，并将作品文件夹传至ftp。

六、精彩展示（10分钟）各组派一代表向全班展示自己的作品，并简介操作要点。展示前，引导全体学生积极思考以下问题：

1.你从展示作品中学到了什么？有哪些可借鉴之处？

2.你是否清楚各作品的效果是如何实现的？若有疑问，及时提出。3.能不能提出更好的修改建议？

注：1.学生展示过程中，教师要引导大家规范操作，对于重点加以强调。2.提醒学科班长记录参与展示和积极质疑、解答的同学，汇入评价。

七、完善提升：（5分钟）

1.借鉴所展示作品的优秀之处，进一步完善自己的作品； 2.根据展示同学的演示，将新学到的操作尝试一遍。

八、总结：

1.网页制作要领：（1）灵活运用基本操作；（2）版面设计清晰、条理，或者有独特之处；（3）配色和谐，给人美感；（4）超链接顺畅、自由，方便使用。2.由学科班长公布本节课评价统计情况。

【教学反思】

1.在学生自主练习过程中，适时指导很重要，但教师一人肯定不能照顾全体学生，所以充分发挥学习小组的“技术顾问”的作用很关键。

2.在“制作主题网页”环节，给学生准备四个不同的主题素材是很有必要的，我们在进行教学设计时要考虑到学生个性、兴趣不同，并加以利用，促进教学。

3.对进行展示的同学要进行简单培训（或者对各组长进行培训，由组长传达到展示者），防止展示时只宣讲他们网页中的内容，而忽略技术，浪费宝贵的时间。4.课堂即时评价很重要。学生初次接触一个软件，要经常收获一点成就感才有进一步探索的欲望，这就需要我们教师注意发现、及时鼓励。学科班长记录好大家的课堂参与情况，下课前公布，这项工作若坚持下来，对我们的教学会有很大促进。