班级网页

《网页制作》教学设计

《网页制作》教学设计（精选5篇）

《网页制作》教学设计1

一、教材或教学内容分析

本章内容在本教材中的位置处于第五章,是在文字处理(Word2000)和网络基础

及因特网应用两章之后。学生所学的文字处理软件Word和将要学习的网页制作软

件Frontpage同是Microsoft公司的产品,在软件的使用上有很多的共通之处,所以

在学习frontpage的时候,很多内容可以让学生自学,而不必面面俱到地在课上讲

授。而第四章网络基础及因特网的应用又为学生对网页的理解奠定了基础,学生对

网页中的基本元素――文字、图片、动画、声音等都有所了解,而网页的制作就是

将这些元素重新组合到网页上,学生要学的就是这种组合的方法。所以说,虽然大多

数学生以前都未接触过网页的制作,但有了以上这些基础,学起来就轻松多了。

本章内容按照学生已有的基础,我对教学内容分了一下类,也为教学的组织工作

打下一点基础。本章内容主要由网页基础知识、网站的建立和管理、网页的制作、

创建超链接、图片的处理、网页框架。

重点是网页的制作和创建超链接,学会了这些就可以开始简单的网页制作了。

难点是网页框架,这部分相互之间关系比较复杂,必要时,老师在对各组个别辅

导时,可以给予分别讲解。这个分类可以为组长安排各个组员的任务提供参考,使

分工更加合理。

二、教学对象的分析

信息技术课虽然已经成为初中的必修科目,但是城乡学生之间掌握情况的差异

却相当大,条件好一点的初中学生不仅已经熟练掌握了课本上的内容,还对一些常用

软件有所了解;而差一点的可以说是从高中开始才正式接触到信息技术知识的学习,

他们需要多锻炼、多指导,所以协作学习对学生的学习帮助很大。

三、教学策略的选择及媒体的使用

在教学策略的选择上,我使用的是任务驱动和协作学习相结合的方法。

任务驱动就是要求本章内容学习完之后,每个小组都要完成自己班级网站的制

作,并在全班进行评比,选择最好的作为班级主页挂到学校主页上去,这有助于激发

学生参与学习的积极性。

协作学习则是让学生在学习过程中互帮互助,用较短的时间、教少的精力学到

更多的东西,完成一个集体项目,让他们在学习之后获得成就感。因此在媒体的选择

上,我们使用的是TOP2000系统。TOP2000系统有利于教师进行分组教学和学生作

品的点评及成果的展示。教学过程开始之前,教师把学生按座位分成四组,每个组都

按学生对计算机的掌握程度平均分配,保证每个组都有计算机操作方面比较突出的,

也有相对比较差的,使其形成能够互帮互助的学习小组。并由他们自己选出组长各

一名,然后由组长根据组员的情况,确定在班级主页制作过程中主要完成什么任务,

也就是说起到一个组织者的作用。做过网页的人都知道,做网页是一项比较费时的

工作,而要学生在较短的时间内制作出像样的网页是比较困难的,而在这个过程中,

网页的设计占去了相当多的一部分时间,组长把任务分到各组员头上以后,组员就可

根据自己要完成的任务相对集中的做某方面的工作,做完以后,组员之间进行经验交

流,告诉组员自己的网页是如何制作出来的,在完成自己的网页后,再重复一遍制作

过程花费的时间的不多的。这样,其他组员就可在较短的时间之内掌握比较先进的

网页制作方法,而不必再花那么多时间去探索。因为每位组员都必须自己完成一个

任务,所以在这个过程中,也同样有自己探索学习的机会和介绍自己经验的机会,使

组内的每个学生都在学习中获得成就感。

四、教学过程

教学进程

教师活动

学生活动

1、课前准备

课前将本章内容的基本结构、内容的归类、网页基础知识、网页素材做成一个

网站,供学生参考,网站上的内容可根据学生以后在学习中的要求添加。根据学生对

已有的网页制作的情况进行分组。

学生根据自己的分组情况选出组织能力较强、计算机水平较高的人做组长,协

作小组形成。

2、教师布置任务,作必要讲解

第一节课,教师简单介绍网页基础知识,并给各小组布置任务――用下面的时间

完成班级网页的制作,并对组长进行本章基本内容及本章内容的分类的介绍,让他们

对本章内容有总体上的'把握。

在教师对网页基础知识讲解的基础上,浏览教师制作的网站,继续学习;

课后各组设计自己的班级主页,组长根据网站上教师对本章内容的分类给学生

布置任务。

3、教师指导分工情况,学生开始自主学习

第二节课教师对组长对全组的分工情况给予检查,提出意见和建议。

学生根据分工制作网页,学习可以跟着课本上自学,也可根据以前学习Word的

经验自己摸索制作过程,不懂之处可向会的同学请教,还可以相互之间讨论,在网页

的设计方面也可以相互之间多商量,发扬互帮互助的精神。

4、学生自主学习,教师指导、监督

下面三节课,老师在每组各用10分钟时间检查他们上节课的网页制作情况,并

对他们碰到的问题给予提示或解决,起指导和监督作用。

学生继续学习、制作网页。

五、阶段总结

四节课的制作以后,各组员所制作的网页都初见雏形,所以教师组织一堂课,由

各组展示自己的作品。教师在学生评讲完后,给予总结。

各组分别展示自己的作品,其他组对他们可以提出意见或建议,也可从其他组的

学到好的创意。由组长在课后写一份阶段总结,从而指导以后的工作。

六、学生自主学习,教师指导、监督

下面四节课,老师仍然对每组各花10分钟时间轮流检查他们上节课的网页制作

情况,并对他们碰到的问题给予提示或解决,起指导和监督作用。

学生继续学习、制作网页。

七、各组将内容汇总,形成班级主页

教师对各组出现的问题提出建议或意见。

组长或组长安排人将各组的主页进行汇总,形成一个完整的班级主页,对欠缺的

地方进行修补。

八、班级网站制作完成,展示与总结

老师请其他信息技术教师来做评委,对各组做的网站提出意见或建议,评出最佳

网站、最佳创意等奖,让大家的付出都有所收获。

各组分别展示自己组所制作的班级主页。

课后:

大家集中各组的优势,将班级主页完成,挂到学校主页上。

《网页制作》教学设计2

一、教学目标：

1、知识与技能：

（1）了解框架结构网页的概念及在网页中的作用，了解它与表格网页的区

别。

（2）掌握框架结构网页的建立、框架结构的拆分、框架的删除等。

（3）掌握框架中页面设置及保存的方法，如设置初始网页按钮、新建网页按

钮等。

2、过程与方法：

（1）能够区分框架结构属性设置与网页属性设置的不同点。

（2）通过框架结构网页设计，使学生对网页的整体结构有更进一步的认识。

3、情感态度与价值观：

（1）能够将表格与框架结构网页结合使用，在创作中体验乐趣。

（2）培养学生网页设计的审美意识、创新意识。

二、教学重点难点：

1、教学重点：

（1）框架网页的作用和功能，框架的建立与属性设置。

（2）框架中各个页面之间的关联，每个框中页面的设置方法。

（3）框架网页的保存方法。

2、教学难点：

（1）框架结构网页中框架属性与页面属性的设置方法。

（2）理解框架结构的多页面存储方法及各页面之间的关联。

三、教学过程：

1、创设情境、导入新课

（1）教师展示一组表格制作的网页，引导学生找出它们的共同特点。并提问

如何快捷地制作这种网页（学生回答：使用复制、粘贴快捷地制作）。

（2）教师又提问：有没有更好的方法呢？相同的区域我们能否只做一遍呢？

从而导入新课――框架网页的制作。

设计意图：通过对比、比较，引导学生思考，激发学生学习的乐趣。

2、任务驱动、自主学习

（1）教师展示一个框架网页，引导学生理解框架网页的概念。

（2）出示任务一：框架网页的新建与保存。教师要求学生先阅读教材中的操

作步骤，再尝试完成书本第227页的实践学习。

（3）教师讲解框架结构中的每个框都是一个独立的选项文件，即网页文件，

因此当框架确定之后，需要为每个框分别指定其网页文件的来源，可以通过每个框

中的“新建网页”按钮和“设置初始网页”按钮进行选择。

（4）学生理解框架网页的概念，通过阅读教材中的内容，自学新建框架网页

的操作，初步了解“新建网页”和“设置初始网页”两个按钮的不同，并认真聆听

教师的讲解，注意观察，按要求模仿操作。

（5）出示任务二：相关页面的制作与设置。教师要求学生先阅读教材中的操

作步骤，再尝试完成书本第228、229页的实践学习。

（6）学生制作相关页面，同时也是对前面所学内容的复习和回顾。教师反馈

学生的操作情况，开展评比活动，对表现好的学生给与表扬。

（7）出示任务三：框架网页属性的设置。学生自主探究学习，有问题可向教

师寻求帮助。教师基础扎实的同学完成任务后可进行拓展学习。

（8）教师请学生示范操作，并说明自己设置的方法和原因。同时鼓励做的比

较好的学生。

设计意图：培养学生的自主学习能力，对于课堂教学难点，学生在教师的讲解

后模仿操作，有效突破难点。

3、展示作品、课堂小结

（1）教师给出一些常见的框架结构应用界面，如Web邮箱页面等，引导学生

总结本课内容，并让学生分组，推进一些优秀作品在全班展示。

（2）教师点评，并鼓励完成作品比较好的学生。

设计意图：拓展学生的视野，使学生了解框架的应用方法。展示优秀作品鼓励

学生，激发学生的创作欲望。

四、教学反思：

1、本节课是在学习完简单网页、表格布局网页、交互式网页的基础上，进一

步页的设计方法。由于学生已经具备了一定的网页设计基础知识与技能，所以教师

可以根据学生的实际情况，采用更灵活

的教学方法。教师可以简单介绍框架结构网页的功能及框架的建立与编辑方

法，以及框架属性设置与网页属性设置的方法与区别。然后由学生根据教师提供的

学案及演示动画，完成框架网页设计任务。

《网页制作》教学设计3

教学目标：

1、让学生掌握在网页中插入表格的方法以及表格的修改

2、学会利用表格来规划网页

3、培养学生创新的能力以及动手操作的能力

教学重、难点：

利用表格来规划网页，从中培养学生的创新能力

教学过程：

一、情境导入

同学们你们善于观察吗？老师先考考你们，我们一起来看一组图片，你们看看

在那里看过呢？学校缓台的窗台上。你们的观察能力真的很强啊，对，这些都是我

们学校美术的特色作口，盘画。其实，我们做过很多作品：有手工作品，语文课中

的作文、书法等都是作品，这节课我们以绘画作口品为例，做一个学习园地网页，

把我们的作品展示到自己的班级网站中，以便我们更好的努力学习。现在我们就一

起来制作吧！

二、新知探究

首先我们来打开上节课的班级网站，在这个网站中新建一个网页，并保存成

“学习园地”。

教师讲解：如何制作学习园地网页。

1、制作网页的标题：输入文字，并设置文字的格式。

2、插入表格：单击“表格”中的“插入表格”并对表格属性进行设置。如：

行、列的操作，对齐方式等。同时讲解什么是行，什么是列，以及单元格的概念。

3、修改表格：调整表格行高和列宽。

4、在学生学会插入表格的基础上，来设计网页，展示作品。并讲解在单元格

中可以插入图片、文字。那我们就一起快快去做吧！插入图片，并在图片的上面或

下面进行图片的注释。

5、进一步设置单元格的背景，来美化网页。

6、设置超链接：通过导航栏目，设置文字超链接。选中文字，点击右键选择

超链接在列表中选择你要链接的网页，单击“确定”按钮。

7、学生在教师的讲解后，学生自己动手操作制作网页。教师进行指导。（伴

随音乐）

三、作品评价

1、生评：从网页设计上，美观程度上，知识落实上重点评价。

2、师评：对学生作品进行评价，并对其它学生的评价加以更完整的解释。

四、总结

我们这节课主要是利用了表格来设计网页，以使来美化我们的网页，通过绘画

作品的展示，学习更多的知识。

《网页制作》教学设计4

教学目标：

1、知识与技能：

（1）理解框架的概念及用途。

（2）掌握框架网页的新建、制作、编辑与保存，了解框架的拆分方法。

（3）初步掌握将框架结构与表格布局结合使用来制作网页。

2、过程与方法：

（1）通过对表格网页的分析，体验新知识（框架结构网页）的优点，从而促

进其学习新知识。

（2）理解框架的概念与组成，学会分析网站的结构。

3、情感态度与价值观：

（1）通过以"人与动物"为主题的框架结构网页制作活动，了解更多有关人与

动物和谐相处的知识，通过故事趣闻，增强学生关注动物的兴趣和意识。

（2）能够将表格与框架结构网页结合使用，在创作中体验乐趣。

教学重、难点：

1、重点：框架的概念、用途，创建、编辑与保存框架网页的方法。

2、难点：框架的拆分。

教学方法：

对比教学法、探究学习法、模仿学习法。

教学准备：

整理、归类相关素材，并按要求摆放。

教学过程：

1、引入

老师展示一组利用表格制作的网页，要求学生仔细观察，找出它们的一个共同

特点（学生答：网页上方和左侧内容都是相同的，仅右下部分内容不一样），并提

问如何快捷地制作这种网页？（学生答：使用复制粘贴快捷地制作）

尽管复制、粘贴能为我们节省时间，但有没有更好的方法呢？相同的区域我们

能否只做一遍呢？今天我们要学习的内容――框架网页制作，就能给我们带来更多

便捷。（让学生明确框架网页使用的场合）

2、新授

（1）框架网页概念

由以上例子入手，再展示一个框架网页，教师引导学生理解框架网页的概念

（2）框架网页的新建与保存

教师要求学生先阅读教材中的操作步骤，再尝试进行探究操作。

任务1创建"横幅和目录"结构的框架网页，新建top和left页面，并学会保

存。

框架结构中的每个框都是一个独立的选项文件，即网页文件，因此当框架确定

之后，需要为每个框分别指定其网页文件的来源，可以通过每个框中的"新建网页"

按钮和"设置初始网页"按钮进行选择。在top和left页面中，单击"保存"按钮，

随即开始保存。

此处为教学难点，可先由框架的概念入手，再针对保存页面中的蓝色部分，教

师进行讲解，教会学生注意观察。

学生要理解框架网页的概念，通过阅读教材中的内容，自学新建框架网页的操

作，初步了解"新建网页"和"设置初始网页"两个按钮的不同，并认真聆听教师的讲

解，注意观察，按要求模仿操作。

设计意图：培养学生自主

学习能力，课堂教学难点在教师的讲解后模仿操作，有效突破难点。

（3）相关页面的制作与设置

框架网页中相关页面的制作，需要结合表格来布局，插入文字、图片和交互式

按钮。

任务2top和left页面的制作。

要求：

○1top页面内插入1行2列的表格，左边单元格插入logo图片，右边单元格

插入banner图片。

○2left页面内插入5行1列的表格，在每个单元格内依次插入交互式按钮

（共4个），交互式按钮文字为展示介绍的相关内容概括，在第5个单元格内插入

一个邮箱指示的图片。

○3调整表格边框的粗细。

○4为main区域设置初始页面。（该网页由教师提供现成的）

学生制作相关页面，同时也是对前面所学内容的复习和回顾。老师反馈学生的

操作情况，开展比一比、评一评活动，对表现好的学生给予表扬。

（4）框架网页属性的设置

创建好框架网页后，可以根据实际需要改变框架的属性。

任务3调整框架的大小、设置框架的边框、设置框架窗口中的滚动条等。

提高任务：框架的拆分。

学生自主探究学习，可向老师寻求帮助。完成设置后请同学示范操作，并说明

自己设置的方法和原因。操作基础扎实的同学完成任务后可进行扩展学习。

3、总结与评价

老师可以给出一些常见的框架结构应用界面，如Web邮箱页面等，引导学生总

结本课内容，梳理课堂知识，并让学生分组，推荐一些优秀作品进行全班展示。

设计意图：开拓学生的视野，使学生了解框架的应用，教会学生要善于总结，

要学会学习的方法。

《网页制作》教学设计5

教学目标：

1、知识与技能

（1）了解超级链接的含义及链接源和链接目标的含义，掌握同一站点内以及

不同站点间网页超级链接的创建方法。

（2）掌握网页内书签的作用及创建书签链接方法，掌握交互式按钮、框架

网页内超级链接的设置方法。

（3）理解热区链接的含义及创建方法。

2、过程与方法

（1）通过创建网页超级链接的操作，使学生了解网页中创建超级链接的基

本方法，破除对网页链接的神秘感。

（2）通过对不同对象设置超级链接的操作，使学生总结出操作的规律，培养

学生自主学习与操作的能力。

（3）通过网页不同的超级链接方法，拓展学生思维，创建多种形式的网页

链接。

3、情感态度与价值观

（1）通过链接我国主要自然保护区网页，激发学生热爱祖国、热爱自然、热

爱生命的激情。

（2）完成超级链接，使学生感受成功的喜悦和快乐。

教学重、难点：

1、教学重点：

（1）超级链接的含义及链接源和链接目标的含义。

（2）超链接的制作方法――给文字、图片制作超链接，制作书签链接，给交

互式按钮制作超链接，框架页面内的超链接，图片区域制作超链接等。

2、教学难点

（1）书签链接中名称及对应链接位置的设定。

（2）在框架页面中制作超链接时，目标对象所选择的显示窗口形式。

教学方法与教学手段：

任务驱动法、讨论探究法、讲解与演示法、类比知识迁移法。

教学准备：

"动物――人类的朋友"站点，包括未链接的网页，如欢迎页、表格页、框架

页，表单页等。

教学过程：

1、引入

展示两个主页，一个已经创建了链接，一个没有创建链接，让学生进行比较并

找出区别，引出本课课题――超级链接。

提出：我们在先前的学习中，哪个软件中的相关操作与它类似？什么是超级链

接？找一个例子，分析链接源和链接目标分别是什么？

学生展开交流，通过对比找出不同点，并积极思考，回答老师的问题。

设计意图：通过对比操作、交流，再辅以知识迁移，明确本节课教学内容。

2、新授

（1）站内超级链接

引导学生回顾PowerPoint中超链接的制作方法（教师提示：右击链接源，利

用快捷菜单制作超链接），辅以教材中的内容，让学生自行探究并完成以下操作：

任务1同一站点内不同页面之间的链接

○1制作首页（欢迎页）到表格页的超链接。

○2给表格页内交互式按钮设置超级链接，链接到相关页面。

○3给框架页内交互式按钮设置超级链接，链接到相关页面。

教师巡视，及时指导，安排学生示范操作并讲解如何制作超链接。

交互式按钮的超链接制作要求在框架网页中演示操作。老师可以提问学生：

演示者操作的对吗？有没有问题？

引导学生发现问题：超链接制作完成后需要检验（保存后预览）。

教师讲解，突破难点，再交由学生操作。

以上是同一站点内不同网页之间的链接，有时一个页面中内容过多，需要不

断拖动滚动条实现阅读，能否实现快速跳转呢？

任务2同一站点内同一页面内的跳转（链接）：在"动物趣闻"页面内制作书签

链接。

教师讲解：由生活中的书签引入，介绍"书签链接"的概念，然后再演示如何操

作。

提示：书签链接的双向性问题（返回）。

学生认真听讲后模仿制作，教师巡视进行指导并反馈学生的完成情况。

（2）站间超级链接

仅凭我们课堂上制作的这些页面还不足以详细介绍我们的主题，此时我们还可

以借助超链接，链接到因特网上的其他网站，以丰富我们的内容。

任务3借助热区链接，为"友情链接"页面制作超链接，链接我国一些自然保护

区网站。

有了以上基础，可安排学生自学教材中有关热区链接的相关内容，学生探究

操作后教师再安排学生进行演示，辅助以提问的形式检验学生的自学情况。

3、总结与评价

开展同学间的互助，检验其链接完成情况，推荐优秀同学做展示。引导学生分

类总结本节课的知识点。