网页制作教学设计

老地方整理的网页制作教学设计（精选4篇），希望这些优秀内容，能够帮助到大家。

网页制作教学设计 篇1

一、教学题目：

网页的制作

二、教学目标：

1、知道站点、主页的概念，能在指定位置建立只有一个网页的站点；

2、认识frontpage的界面；

3、掌握在主页中插入文字、图片、水平线；

4、掌握页面文件与图片的保存。

三、教学重点：

1、能在指定位置建立只有一个网页的站点（难点）

2、能在页面中插入文字、图片、水平线

3、掌握页面文件与图片的保存（难点）

四、教学难点：

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

五、教学过程：

教师活动：

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

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

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

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

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

问题2：网页是不是就是主页？（第一个页面称为主页，网站设计者可以确定哪一个是主页，主页的文件名一般为：，主页也是网页）设计网站一般必须经过两个步骤，首先是在计算机里做好，然后发布在internet上，让所有的人访问浏览。

今天我们学习用frontpage建立站点，制作一个主页。先来研究一下没有发布的网站，打开教师做的网站问：同学们看到了什么？（文件夹）总结：

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

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

2、新建站点

frontpage的启动问：与word比较，有什么不同？（增加了视图区，编辑区有三个窗口）总结：

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

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

预览窗口：浏览器中出现的.效果，与powerpoint中的“放映幻灯片”类似。html窗口：编写html（超文本标记语言，它是描述网页内容和外观的标准。）打开导学软件，根据步骤，示范建立只有一个网页的站点，强调新站点的位置、路径的正确输入，站点的名称。

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

请一位学生示范如何建立站点，教师总结。问：在文件夹列表中看到了什么？

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

3、编辑主页与保存主页

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

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

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

4、总结反馈

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

总结：必须切换到“普通”窗口下编辑主页的保存中存在问题：

单击“文件”———“保存”或工具栏的“保存”按扭，弹出一个对话框，保存嵌入式文件，改变文件夹，图片必须保存在本站点images文件夹中，便于站点的管理。

5、请学生继续完成自己的主页，有能力的同学完成提高篇

六、小结：

展示学生作品，教师与学生共同评价请学生总结今天的学习内容：建立包含一个页面的站点，主页的设计与保存。

网页制作教学设计 篇2

一、教材或教学内容分析

本章内容在本教材中的位置处于第五章，是在文字处理（Word2000）和网络基础及因特网应用两章之后。学生所学的文字处理软件Word和将要学习的网页制作软件Frontpage同是Microsoft公司的产品，在软件的使用上有很多的共通之处，所以在学习frontpage的时候，很多内容可以让学生自学，而不必面面俱到地在课上讲授。而第四章网络基础及因特网的应用又为学生对网页的理解奠定了基础，学生对网页中的基本元素——文字、图片、动画、声音等都有所了解，而网页的制作就是将这些元素重新组合到网页上，学生要学的就是这种组合的方法。所以说，虽然大多数学生以前都未接触过网页的制作，但有了以上这些基础，学起来就轻松多了。

本章内容按照学生已有的基础，我对教学内容分了一下类，也为教学的组织工作打下一点基础。本章内容主要由网页基础知识、网站的建立和管理、网页的制作、创建超链接、图片的处理、网页框架。

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

难点是网页框架，这部分相互之间关系比较复杂，必要时，老师在对各组个别辅导时，可以给予分别讲解。 这个分类可以为组长安排各个组员的任务提供参考，使分工更加合理。

二、教学对象的分析

信息技术课虽然已经成为初中的必修科目，但是城乡学生之间掌握情况的差异却相当大，条件好一点的初中学生不仅已经熟练掌握了课本上的内容，还对一些常用软件有所了解；而差一点的可以说是从高中开始才正式接触到信息技术知识的学习，他们需要多锻炼、多指导，所以协作学习对学生的学习帮助很大。

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

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

任务驱动就是要求本章内容学习完之后，每个小组都要完成自己班级网站的制作，并在全班进行评比，选择最好的作为班级主页挂到学校主页上去，这有助于激发学生参与学习的积极性。

协作学习则是让学生在学习过程中互帮互助，用较短的时间、教少的精力学到更多的东西，完成一个集体项目，让他们在学习之后获得成就感。因此在媒体的选择上，我们使用的是TOP2000系统。TOP2000系统有利于教师进行分组教学和学生作品的点评及成果的展示。教学过程开始之前，教师把学生按座位分成四组，每个组都按学生对计算机的掌握程度平均分配，保证每个组都有计算机操作方面比较突出的，也有相对比较差的，使其形成能够互帮互助的学习小组。并由他们自己选出组长各一名，然后由组长根据组员的情况，确定在班级主页制作过程中主要完成什么任务，也就是说起到一个组织者的作用。做过网页的人都知道，做网页是一项比较费时的工作，而要学生在较短的时间内制作出像样的网页是比较困难的，而在这个过程中，网页的设计占去了相当多的一部分时间，组长把任务分到各组员头上以后，组员就可根据自己要完成的任务相对集中的做某方面的工作，做完以后，组员之间进行经验交流，告诉组员自己的网页是如何制作出来的，在完成自己的`网页后，再重复一遍制作过程花费的时间的不多的。这样，其他组员就可在较短的时间之内掌握比较先进的网页制作方法，而不必再花那么多时间去探索。因为每位组员都必须自己完成一个任务，所以在这个过程中，也同样有自己探索学习的机会和介绍自己经验的机会，使组内的每个学生都在学习中获得成就感。

四、教学过程

教学进程

教师活动

学生活动

1、课前准备

课前将本章内容的基本结构、内容的归类、网页基础知识、网页素材做成一个网站，供学生参考，网站上的内容可根据学生以后在学习中的要求添加。根据学生对已有的网页制作的情况进行分组。

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

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

第一节课，教师简单介绍网页基础知识，并给各小组布置任务——用下面的时间完成班级网页的制作，并对组长进行本章基本内容及本章内容的分类的介绍，让他们对本章内容有总体上的把握。

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

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

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

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

学生根据分工制作网页，学习可以跟着课本上自学，也可根据以前学习Word的经验自己摸索制作过程，不懂之处可向会的同学请教，还可以相互之间讨论，在网页的设计方面也可以相互之间多商量，发扬互帮互助的精神。

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

下面三节课，老师在每组各用10分钟时间检查他们上节课的网页制作情况，并对他们碰到的问题给予提示或解决，起指导和监督作用。

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

五、阶段总结

四节课的制作以后，各组员所制作的网页都初见雏形，所以教师组织一堂课，由各组展示自己的作品。教师在学生评讲完后，给予总结。

各组分别展示自己的作品，其他组对他们可以提出意见或建议，也可从其他组的学到好的创意。由组长在课后写一份阶段总结，从而指导以后的工作。

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

下面四节课，老师仍然对每组各花10分钟时间轮流检查他们上节课的网页制作情况，并对他们碰到的问题给予提示或解决，起指导和监督作用。

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

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

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

组长或组长安排人将各组的主页进行汇总，形成一个完整的班级主页，对欠缺的地方进行修补。

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

老师请其他信息技术教师来做评委，对各组做的网站提出意见或建议，评出最佳网站、最佳创意等奖，让大家的付出都有所收获。

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

课后：

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

网页制作教学设计 篇3

一、学习内容分析

《H5快速制作网页》是苏教版《初中信息技术》8年级第3章《主题网站设计与制作》第2节《制作网页》中第1课时的内容。H5是指第5代HTML标记语言，其搭建的站点可方便地应用于PC、Android、iOS等多种平台，它为互联网内容的呈现提供了一种全新的框架和平台，包括免插件的音视频、图像、动画、本地存储以及更多酷炫的功能。通俗地说，H5是一种创建网页的方式，用H5创建的网页以文字、图片、动画、声音等相结合的富媒体出现，页面图文并茂、生动活泼、传达方便、易于推广。

二、学习者分析

本节课的学习对象是八年级的学生，处于这一年龄段的学生，思维活跃，具备一定的理解能力和较强的自学能力。通过前面的学习，学生已熟练使用WPS、Photoshop等软件，也掌握了规划设计主题网站的方法。本节课以iH5软件工具为平台，学习用H5快速制作网页。然而学生从未接触过iH5，对于陌生软件的学习，有些畏难情绪，觉得无从下手。但是在日常生活中，他们经常能接触到各种各样的手机H5网页，如企业宣传、个人简历、邀请函、纪念册等，这些H5网页给大家带来了全新的体验，技术本身带来的新奇感让学生心生向往。

三、学习目标

知识与技能：能列举H5网页的特点；掌握在iH5软件中添加和编辑文字、图片、动画等元素的方法以及设置对象属性的'方法，理解舞台、页面、对象之间的层级关系。

过程与方法：通过制作校园文化艺术节邀请函，经历制作H5网页的基本过程。

情感态度及价值观：感悟网页制作并非难事，软件使用有共通之处。

四、教学过程

（一）创设情境，初认H5

以艺载德、以艺促智，一年一度的校园文化艺术节又开始了，同学们踊跃报名，比拼才艺。八年级将举行以“多彩校园，闪亮你我”为主题的汇报演出，充分展示八年级同学的青春活力和精神面貌。

思考：本次演出将要邀请家长参加，你会选择什么样的方式来做出邀请呢？（口头传达、短信、纸质邀请函等）

活动1：体验“校园文化艺术节邀请函H5”，初认H5。

二人一组，一位同学在手机浏览器中打开；另一位同学在电脑浏览器中打开（网址：https：//xxxxxx）。浏览后回答以下问题：

不同平台的浏览效果是否一致？为什么？

这支H5中具有哪些媒体元素？

用户能参与其中吗？

你会用什么方式推广这支H5？

小结：

（1）H5具有跨平台、支持多媒体、可交互、易推广等优势。以上特点使得H5可能成为我们发出邀请的首选。

（2）“校园文化艺术节邀请函H5”为何如此吸引人？观看视频，思考到底什么是H5？

小结：H5是指第5代HTML标记语言，也指用H5语言制作的一切数字产品。通俗地说，H5是一种创建网页的方式。用H5创建的网页图文并茂、生动活泼、传达方便、易于推广。

设计意图：与H5相关的概念性知识抽象、枯燥难懂，如果采用讲授法，学生并不容易理解。因此本节课创设了学生现实生活中的情境，以制作校园文化艺术节邀请函H5为主题，设计了4个问题，每个问题目标指向明确，容易引起学生的共鸣，激发学生的思考并得出结论。通过微视频用通俗易懂的语言帮助学生进一步认识H5，内化知识。

（二）根据需求，规划H5

凡事预则立，不预则废，要制作汇报演出邀请函，首先对每个页面的内容、素材等进行一个简单规划。

活动2：根据需求，选择素材，规划邀请函。

设计意图：学生已经学习过网站的规划，所以容易理解规划的重要性。教师通过搭建“规划表”这个支架，引导学生根据制作校园文化艺术节邀请函的需求，对所要制作的邀请函进行初步的规划，帮助学生理清楚每个页面的内容和所需添加的元素。

（三）知识迁移，制作H5

能够用于开发H5网页的工具很多，今天以iH5软件工具为平台，学习使用H5快速制作网页。

活动3：找“共性”，探“个性”，认识iH5软件。

（1）使用课前申请的账号，登录网址：，进入在线编辑平台。

（2）对比Photoshop界面，认识iH5界面，找出相同之处和不同之处。

小结：相同之处：_______________________（菜单栏、工具面板、编辑区）

不同之处：_______________________（对象树面板）

（3）比较PS中的图层面板和iH5中的对象树面板，思考对象树面板的作用。

小结：对象树面板可以用来管理舞台中的对象，对象树中的层级关系为：舞台→页面→文本、图片等素材，每个页面中的对象上层覆盖下层。

活动4：利用iH5软件，制作邀请函H5。

（1）观看操作指导微视频，自主探究页面的制作，完成以下问题：

设置背景：选中页面1，在属性面板中找到_____________选项，添加背景图片。

添加文字：选中页面1，在工具面板中选择_____________选项。

添加图片：选中页面1，在工具面板中选择_____________选项。

小结：添加文字、图片的一般步骤：选择位置—添加对象。

（2）展示学生作品，师生共同分析存在的问题，寻求解决方式。

问题1：首页、内容页都播放同一素材。

原因分析：素材全部都添加在了舞台之中，其层级关系在内容页和首页的上一级。

问题2：内容页没有显示内容。

原因分析：素材全部都添加在了首页之中，而不是对应的内容页中。

设计意图：迁移是人类认知的一个普遍特征，因为新的学习总是建立在原有学习基础之上。学生原有的知识是Photoshop软件使用，将Photoshop和iH5进行对比，引导学生发现界面组成的“共性”与“个性“，让学生初步认识对象树面板，学会利用对象树面板来管理素材。在制作H5时采用局部“翻转课堂”的形式，通过高效、简短的微视频和几个思考题，引导学生思考探究；在学生遇到问题和困难时，师生共同分析问题，解决问题。给学生“瑞士奶酪式”知识建构时间，使学生从规律的获得到知识的应用有一个过渡和渐进的过程。

（四）自主探究，美化H5

活动5：美化完善邀请函H5。

（1）邀请函中的标题、内容文字等选用什么样的字体、字号合适？如何设置？

（2）如何改变图片大小，修改图片的亮度、对比度等？

（3）如何设置元素的动态效果，使得网页更生动？

小结：

（1）选中文字或图片——属性面板——修改设置。“邀请函”等标题文字字号一般选用大些，宜用饱满的字体，以达到醒目的作用；内容用于提供具体信息，文字字号可以小些。

（2）图片选用要符合主题，色彩和谐。字体颜色与背景要有一定的对比度。

（3）选择要添加动态效果的对象——选择动效命令。

注意：设置合理、适度的动态效果，可以给观赏者带来较好的视觉体验。

设计意图：对邀请函的美化可分成两个部分：一是对邀请函中的文字、图片进行美化，二是合理设置动态效果。单从技术角度来讲，这些操作是比较简单的，只要学会设置属性面板即可。但是邀请函的美化不是天马行空，随心所欲，还需要一定的艺术欣赏能力。因此首先让学生带着问题思考如何设置文字、图片？设置动效时需要注意的问题？得出一定的结论后，让学生带着构思去美化邀请函，以减少学生操作的盲目性。

（五）作品展示，共析H5

活动6：发布和评价作品。

（1）对于制作好的作品，将其发布到网上，这样其他人就可以通过电脑和手机访问你的作品。请保存当前的网页并发布到网上。

（2）同桌之间用发布的网址或二维码相互访问对方的作品。

（3）根据评价表对同桌的作品进行评价。

（4）根据同伴及老师意见进一步修改作品。

设计意图：学生在制作完成邀请函后，进行保存，发布就可以浏览到自己的成品，极大地提高了学生的学习兴趣。将学生的作品进行展示，师生共同赏析作品，根据评价表进行点评，给出建议，然后进一步完善作品。

（六）知识梳理，展望H5

展示思维导图，梳理本节课内容：

总结利用iH5制作网页的基本过程：

观看视频，结束本课：随着信息技术的高速发展，H5可谓是无处不在。H5可以是各种宣传网页、在线游戏，甚至户外大屏中的互动也是H5。在未来5—10年内，H5或将会成为移动互联网领域的主宰者。

设计意图：借助思维导图，将关键知识点结构化，清晰形象地呈现出各知识点的脉络关系，有助于学生从整体上把握知识，完成知识的建构。最后观看H5应用视频，了解H5的日常应用，对未来展望，进行情感升华。

网页制作教学设计 篇4

一、教学目标：

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）、教师点评，并鼓励完成作品比较好的学生。

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

四、教学反思：

本节课是在学习完简单网页、表格布局网页、交互式网页的基础上，进一步页的设计方法。由于学生已经具备了一定的网页设计基础知识与技能，所以教师可以根据学生的实际情况，采用更灵活的教学方法。教师可以简单介绍框架结构网页的功能及框架的建立与编辑方法，以及框架属性设置与网页属性设置的方法与区别。然后由学生根据教师提供的学案及演示动画，完成框架网页设计任务。