用FrontPage创建网页教学设计

用FrontPage创建网页教学设计（精选5篇）

篇1：用FrontPage创建网页教学设计

大海 发表于 2011-11-7 12:32:00

一、教学内容分析：

《用Frontpage创建网页》是海南出版社信息技术八年级下册第一章《建好网上的“家”——网页制作》中第一节的内容，用Frontpage创建网页教学设计。Frontpage是微软办公自动化软件Office中的一个极为重要的组件之一，它具有功能强大、操作方便等特点，是目前最为流行的网页制作与站点管理工具之一。Frontpage 既是简单实用的网页编辑器，又是一个浏览，有“所见即所得”的效果，创建网页的过程中还可以不时地在文本编辑器和浏览之间切换，以查看编写页面的效果。而且，八年级学生已经学过Word2003、powerpoint2003的操作，而它们又出于同一家族，它们有许多相似之处，Frontpage的许多菜单、工具的操作会有一种似曾相识之感，教学过程中，要注意引导学生进行知识的迁移，这些都有助于学生轻松进入Frontpage的世界。

二、学生学情分析

教学对象是八年级的学生，他们质对许多事物充满好奇，求知欲强，学生的创作欲望强，表现力强，对于教师布置的任务能够认真对待。因此本节课中，鼓励他们独立完成作品，培养他们热爱自然、热爱环境、热爱家乡的意识。因为有Word软件的学习经验，学生在学习Frontpage 软件时会有似曾相识的感觉，很多的知识点都已学习过，所以教师不要拘泥于教材，要根据学生的实际情况，有的放矢，充分激发学生学习兴趣，最大限度挖掘学生的创造潜能。但是学生之间还存在一定差异，信息技术认知能力、实际操作能力和知识水平都存在一定的差异。

三、教学目标：

【知识与技能】

（1）初步了解Frontpage 2003的基本功能。

（2）掌握Frontpage 2003的启动和掌握在网页上文字的输入。

（3）熟悉Frontpage 2003窗口的组成。

（4）通过实例学会创建简单的网页和保存网页文件。

【过程与方法】

（1）能用Frontpage 2003制作简单网页；具有一定探索新应用软件的能力

（2）通过对比观察，培养学生利用已学知识去解决问题的能力，培养学生敢于尝试和自主探究的学习能力；培养学生的相互协作能力和知识的迁移能力。

【情感态度与价值观】

（1）激发学生热爱自然、热爱环境、热爱家乡的情感。

（2）激发学生的学习热情和创作热情，在亲历学习过程中，获取知识、体验成功，从而提高学习兴趣。

（3）培养审美意识，促进学生形成良好的审美观；提高信息素养。

（4）在合作学习中，学会交流与协作，提高学生的合作意识和合作能力。

四、教学重点和教学难点

【教学重点】 Frontpage 2003的启动以及Frontpage 2003的窗口组成。

【教学难点】 通过实例学会用Frontpage 2003创建简单的网页和保存网页文件。

【处理思路】 在介绍Frontpage 2003的窗口组成时运用比较法，打开Word 2003的工作窗口和Frontpage 2003的窗口进行比较，让学生找出他们相似之处和不同之处。如何在Frontpage 编辑器“普通”状态中简单地创建网页，预览网页，教师先进行示范操作、讲解。然后，学生完成练习，师生共同解决问题。

五、教学策略设计

本课内容设计中，注重创设教学情景，有效设计问题，激发学生的学习兴趣和求知欲，引导学生通过积极有效的独立自主的探究和比较，获得知识。在教学设计过程中，本人将本课的教学过程分为以下六个环节：

创设情境，激起兴趣（2分钟）

引出问题，尝试练习（8分钟）

任务分析，演示讲解（8分钟）

自主创作，小组协作（12分钟）

交流评价，体验成功（8分钟）

小结探究，课外延伸（2分钟）

六、教学方法

“创设情境法”、“比较法”、“任务驱动法”、“演示法”

七、教学准备

硬件：速龙多媒体网络教室，30台学生机

软件：Frontpage 2003软件，教师自制的教学课件，教师自制的网页

学生分组：把48名学生分为6个组，每组8人共用5台学生机，并由学生选好组长。

八、教学安排：1课时

九、教学过程（见下表）

教学环节 教师活动 学生活动 设计意图

一、创设

情境，激起

兴趣

（2分钟）

1、出示新浪网站的主页、三亚人民政府网主页等几个网站的主页，教学反思《用Frontpage创建网页教学设计》。

2、问：同学们，你们在网上冲浪过吗？

问：是否为浏览过的色彩缤纷的网页倾慕不已呢？

问：同学们想制作自己的网页吗？

其实我们只要学会使用制作网页的软件工具就可以了，老师相信你们通过学习一定能设计出更好的属于自己的网页。

3、出示网页《美丽三亚，浪漫天涯——我爱三亚》。学生看到可以上网，个个都很兴奋。答到：当然是上过啊。

是啊。

想，非常想！

欣赏

从学生感兴趣的主题入手，旨在激发学生的学习兴趣。

让学生在欣赏的过程中激发学生的学习热情，热爱环境、热爱家乡的情感。

二、引出

课题，尝试

练习

（8

分钟）

1、同学们知道这些网页是怎样做出来的吗？

2、展示课题：用Frontpage 创建网页

3、那么Frontpage2003能做些什么呢？

4、展示Frontpage 2003的功能，并做了简单的概述。

5、你们能启动你们计算机里的Frontpage 2003吗？

想一想，WORD 2003是如何启动的呢？如果想不起来的话，可参考我们的操作向导来完成操作。

6、任务一：练习启动 Frontpage 2003。（同学们想一想可以用几种方法来启动Frontpage 2003？）

【①开始——程序——Office 2003—— MicrosoftOfficeFrontpage2003

②双击“桌面”上的Frontpage 2003快捷方式】

7、同学们做得都很好，大部分同学都完成任务啦，哪位同学愿意把你所做的操作与同学们分享吗？

8、任务一同学们完成得都很好！希望大家再接再厉。（教师也对其中的不足加以指正。）用软件

思考

听

学生回忆以前学过WORD的基本操作方法，尝试运用到新软件操作中。

思考着并进行尝试操作

一个学生演示其操作过程

其它学生通过屏幕转播观看其学生的操作。

培养学生知识迁移的能力。

让学生在欣赏的过程中激发学生的学习热情，引发学生主动挖掘出本课的课题。

三、分析

任务，演示

讲解

（8

分钟）

1、比较Frontpage 2003窗口与Word 2003窗口的相似之处和不同之处。

教师小结：简单地介绍两者之间的异同。

2、那么老师的网页又是如何做出来的呢？

对于如何创建简单的网页进行一边讲解一边做简单的演示。

3、对于已经创建好的简单的网页又是如何保存的呢？

同学们，想一想在Word 2003中我们是如何保存文档的呢？

4、在编辑网页的过程中，想看看自己制作的网页的效果如何时，还可以用网页编辑器中的预览的网页。那么我们又是如何预览自己创建的网页呢？

进行操作演示网页的预览。结合屏幕上说出窗口的组成部分。讨论回答与WORD有哪些是相似的，哪些是有区别的？

小组内交流讨论

回答保存的操作。

结合课本第4页的内容进行回答。明确学生的学习任务，让他们通过讨论、交流，寻找解决问题的初步方案。

培养学生知识迁移的能力。

四、自主

创作，小组

协作。

（12分钟）假如，为了更好地推广三亚，让三亚走向世界，同学们能否利用Frontpage 2003来创建一个简单的“旅游三亚”的网页吗？并把网页保存在本班的文件夹中。

我们来比一比谁的网页更生动更吸引人。

1、根据任务要求进行作品创作。

2、小组成员之间相互交流、协作。

3、在教师帮助下对网页进行美化。

1、培养学生的探究能力，培养应用知识的能力，提高信息素养。

2、让他们通过讨论、交流和协作，培养学生与他人沟通的能力以及团队协作的精神。

五、交流

评价，体验

成功。

（8分钟）同学们的作品都完成的差不多啦，我们根据要求在组内进行互评。然后组长把本组内最优秀的作品上传到服务器的“八年级学生作品”中，与其它组的作品进行评比。

对各组选送出来的学生作品进行演示，并进行点评。最终还评出“最优秀作品”。

对各组选送出来优秀作品展示，其他学生进行点评，同时也对作品进行打分，从而评出“最优秀作品”。通过对作品的点评，学生不仅熟练掌握了信息技术的知识和技能，而且能将所学的知识灵活运用到自己创作的作品中，体会到了应用信息技术的乐趣和获得成功的喜悦。

六、小结

探究，课外延伸

（2分钟）通过今天这节课我们已经掌握了用Frontpage 2003来创建了一个简单的网页的基本操作。

我们要想使自己的网页更吸引人，呈现多姿多彩的画面，提高网页的点击率。同学们动动脑筋想想如何对你的网页进行修饰呢？

希望大家课后一起探讨，下次上课的时候再来对你的网页进行修饰，好吗？

留下疑问，让学生课后思考。

培养学生主动探究的能力。

十、课后反思

这节课是在比较学习，合作探究的基础上完成的。我本人认为这节课比较成功的地方有如下两点：

一是通过为学生展示Frontpage 网页时让学生感受到Frontpage 的魅力，激发兴趣，创设学习情境。这为本节课教学的顺利完成打下良好的基础。

二是本节课设计中利用Frontpage 2003与Word2003的比较让学生感到比较亲近，比较有利于Frontpage 2003的入门学习。

这节课的不足之处是由于学生个体差异比较大，班级人数过多，计算机少，有的学生甚至让别人来完成自己的任务。所以在今后的教学中，对个别人偷懒的应个别关注。

篇2：用FrontPage创建网页教学设计

当你想在网络上建立自己的“小天地”时，是不是为自己没有动态效果的Gif而烦恼着，如果是的话，哈哈!看了本篇文章后将会消除你的烦恼，

 

用FrontPage 2000创建网页动画

 

。其实FrontPage 2000里面有一个小工具可以实现动态图画效果的，具体操作步骤让我慢慢道来吧。

1、先用画图、Photoshop等制图软件，绘制出两个或两个以上大小相等的图片文件,然后保存。

2、启用FrontPage 2000，在“插入”里选取“组件”，在“组件”的二级菜单里有一项“横幅广告管理器”（它可不只是用来做广告的噢），如果没看见的话，用鼠标指向二级菜单下端的向下箭头即可见到，

3、点选“横幅广告管理器”后，弹出对话框（可别小看它呀，就是它为你解决烦恼的）。

“宽度”、“高度”是指所创建的动态图画的高与宽，将它设置为你绘图时的图片大小吧。

“过渡效果”是指图画的动态效果，它有很多项供你选择，如果你有兴致的话，可以逐一地试。

“每幅图片显示(秒)”即是设置每幅图片显示几多秒啦，一般设置在2～10秒之间。

“显示图片”里有[添加]按钮，点击它吧，在弹出的对话框里按路径选择刚才你创建的图片文件，之后按确定返回，这时在“显示图片”栏里显示了你的图片文件所在的路径，再“添加”另外的一幅甚至多幅图片吧，按[确定]返回后，选取“预览”标签看看有什么，嘻嘻……

篇3：用FrontPage创建网页教学设计

日前，笔者在Internet上碰到一些奇怪的网页，

用Frontpage巧补残缺网页

。这些网页，不但无法用右键菜单复制图片，而且用IE菜单中的“文件→另存为”命令也无法将图片保存下来，使保存在自己计算机中的网页成为“残缺”的网页。

怎样才能将那些图片“补齐”呢?经过摸索，笔者终于找到了用Frontpage快速保存完整网页的解决方法。下面以保存某个页面为例，我们在装有FrontPage的机器上进行如下操作。

1. 用IE打开此网址，然后单击工具栏上的FrontPage图标，使网页进入可编辑状态，

2. 在FrontPage编辑窗口中，不需任何修改，直接单击“文件→另存为”，在“另存为”对话框中指定一个保存路径(如“D:WebFiles”)，在“文件名”中任意给网页取个名(如“p1-c4+.htm”)，然后单击“保存”。

篇4：用FrontPage创建网页教学设计

通过模板建立的网页，常常预先置放了些标题栏、目录栏(一般叫导航栏)，导航栏都是用很多元素组成的，结构上稍稍复杂一些，一般情况下我们不必要对这些东西进行低层次的修改，FrontPage也不允许操作者修改，但在某些项目上，我们还是可以根据自己页面的要求来修改。

操作修改页面的主标题:在主页(index.htm)的页面上部，模板预置了一个名为“主页”的横幅标题，这个横幅标题和整个主页格格不入。点击横幅，按“Del”键删除，然后在同样位置插入一个事先准备好的横幅图片为主页标题。

操作修改导航条的链接:在主页的左边，有一个导航条(目录栏)，在建立站点的时候，导航条就建立了几个网站的链接。这些链接不能在网页窗口中修改，只能在站点管理的“导航”视图窗口中修改。但可以在网页视图窗口中给导航条添加链接。在导航条中点击鼠标，然后选择输入文字“给我写信”，设置文字的超链接，这里的链接地址设置的是我的邮箱地址“mailto:豆豆@yesky.com”。

操作删除页面元素:在主页的右下，程序放置了一个LOG图片，这个图片和我的主页不符，选择该图片，按“Del”删除。

操作给页面添加水平线:水平线对于规划页面有很大的作用，可以让页面清楚，简洁。在要插入水平线的位置点击鼠标，选择“插入/水平线”，水平线就出现了。注意，一般模板网页的水平线由程序自动设置外观属性。而其他情况下，将由操作者自己设置水平线的颜色，粗细等。

进一步学习的建议:页面长期编辑后，可能会留下垃圾(无效代码)，如果想做得更专业一点，可以在HTML标签窗口修改源代码，或者使用其他网页制作工具休整

表格的美化

表格实际和文字、图片一样，是一个网页的基本元素，但表格在网页中，更大的用途是来规划页面。实际上，在网页编辑中，通过空格、段落、缩进等是很不容易规划好一个有很多元素的页面的，特别是图文混排的页面。

在FrontPage中添加常用的数据表格，和在word中添加表格一样的方便，直接使用插入表格命令，然后填写数据就可以了。甚至还可以将word文件中的? 粘贴进来。

操作添加一个简单表格:在要插入表格的位置点击鼠标，选择“表格/插入/表格”，在弹出的对话框中设置表格的属性，然后选择表格的行数――2，选择表格的列数――1，然后指定表格的宽度，可以设置表格的宽度占网页宽度的百分比，或者直接设置表格的绝对宽度――像素。其他设置表格边框线的宽度为1，设置单元格间距为2。确定即可。

操作在表格中添入文字:在表格中输入文字和在普通编辑页面中输入文字没有什么区别，另外，在生成主页模板的时候，程序在网页中添加了一个高级控件，可以自动显示网页的更新时间，

将这个控件拖入到表格中。这样，一个显示网页制作者的表格就制作好了。

操作设置表格的属性:表格的属性比较复杂，分成单元格属性和表格属性。选择表格，然后选择菜单“表格/属性/表格”，在弹出的窗口中可以设置表格的边框、背景、颜色等等。特别要说明的是表格的浮动，表格的浮动是设置整个表格的对齐方式，而一般的对齐方式是设置表格内的元素的对齐。

操作图文混排:在需要的位置加入一个只有一个单元格的表格，并设置好其他属性。在表格中添加图片，并设置好表格的大小。再设置表格为“左浮动”，调整文字，让文字在表格的右边。这样，图文相配的混排就得到了。

进一步学习的建议:表格的操作比较复杂，需要反复的练习，学习如何用表格构造特殊页面，如何实现复杂的图文混排等等。

主题的设置

经过以上过程，我主页制作也基本完成了。但页面的背景图、导航栏、颜色选择，边框等都不太令我满意，而这些都是模板自动设计的，而且不能修改。这个时候，就要使用主题了。

主题，就是FrontPage针对页面中的背景、导航栏、横幅、按钮、各种边框自动进行设置，主题的内容有几十种，操作者可以根据自己的喜好选择，这样，就可以省去自己分别对这些页面元素的设置。

操作为网页指定主题:打开主页，选择“格式/主题”，弹出主题窗口。在主题窗口的左边，列出了可以选择的主题，默认的是“直边”，点击这些主题，可以在右面窗口查看该主体的风格，如横幅是什么样、是什么样的颜色、标题的样式、超链接的显示样式，导航条的样式等等。另外，还可以设置是否需要背景图片，是否使用鲜艳的颜色等。选择“渐蓝”主题，单击确定，即可在网页窗口看到效果了。

主题都是事先设计好的，如果你有什么特殊要求，而FrontPage又不允许你在网页编辑时修改，这个时候，可以自定义主题。

操作测试网页和网站:现在，我的主页基本完成了，要实地测验一下主页和整个网站的情况，看页面显示是否正常，各个超链接是否正确，设计上还有什么缺陷。打开要预览的主页，然后选择“文件/在浏览器中预览主页”，这样，我就看到了我精心设计的主页的真正模样了。测试的时候，要仔细看页面的各种元素，看是不是有不正确的地方。多改变一下浏览器的一些相关设置，如字体大小、全屏、缩放窗口。点击页面上的超链接，看是否能跳转到正确的页面。另外，最好将整个网站文件夹复制到其他机器上，看是否正确，特别是字体显示是否正确。

操作查看网站报表情况:在视图窗口选择“报表”图标，打开报表窗口，在这个窗口，可以看到整个网站的一些统计数据。仔细查看这些数据，看看有没有什么问题，如无效的超链接等。如果一切没有问题，就可以发布了。

篇5：用FrontPage创建网页教学设计

一、教学目标：

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

2、认识FRONTPAGE的界面；

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

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

二、教学重点：

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

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

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

三、学情分析：

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

四、教学方法

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

五、教学过程

设计教师活动：

1、引入课题：

（激发兴趣，活跃气氛）经常上新浪、西祠胡同等，有没有同学知道新浪、西祠胡同称做什么？（网站）浏览新浪网站，浏览的第一个页面称为什么？（主页）我们还可以浏览其它的页面，点击超链接浏览，当鼠标变成手指的形状时有超链接。

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

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

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

先来研究一下没有发布的网站,打开教师做的网站问：同学们看到了什么？（文件夹）

小结：可以这样理解网站：在资源管理器里，网站表现为一个文件夹，里面存放的是所有与网站相关的文件。打开主页，浏览页面，这是老师做的一个导学课件，将帮助大家完成学习任务。请学生浏览教师课件，了解学习任务。

2、新建站点：

与word比较，有什么不同？（增加了视图区，编辑区有三个窗口）

小结：视图区：多种视图模式是为了方便网站的管理。制作网页时，必须在网页视图中编辑页面普通窗口：鼠标在闪动，可编辑、修改页面，所见即所得的方式预览窗口：浏览器中出现的效果，与PowerPoint中的“放映幻灯片”类似。

Html窗口：编写HTML（超文本标记语言，它是描述网页内容和外观的标准。）打开导学软件，根据步骤，示范建立只有一个网页的站点，强调新站点的位置、路径的正确输入，站点的名称。（教会学生利用导学课件，根据导学课件完成任务）

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

教师巡视指导请一位学生示范如何建立站点，教师总结问：在文件夹列表中看到了什么？分析多出的文件夹列表栏，多了一个文件夹，里面有两个子文件夹和主页，图片存放在images文件夹中）

3、编辑主页与保存主页看效果图，请学生分析主页中的元素总结：鲜明的主题，如：我的世界、我的宠物等，有分割页面的水平线，与主题相关的图片，对网站的简单介绍根据导学软件，学生完成

任务2：设计主页、保存主页与图片。教师巡视指导

4、总结反馈请学生示范，讲解如何插入图片（来自剪贴画与来自文件）、插入水平线，如何保存总结：必须切换到“普通”窗口下编辑主页的保存中存在问题：单击“文件”“保存”或工具栏的“保存”按扭，弹出一个对话框，保存嵌入式文件，改变文件夹，图片必须保存在本站点images文件夹中,便于站点的管理。

5、请学生继续完成自己的主页，有能力的同学完成提高篇，教师巡视指导