FrontPage制作网页型课件教案设计5篇

FrontPage制作网页型课件教案设计5篇

FrontPage制作网页型课件教案设计第1篇

用FrontPage制作网页课件教案

【教学目标】了解用FrontPage制作课件的优势与不足，

学会用FrontPage制作网页型课件，用FrontPage制作网页课

件

授课教案：

【重点难点】重点是如何在FrontPage插入多媒体素材，

难点是课件交互性的实现和网页源代码的应用。

【教学策略】教师实例演示，学生上机操作，教师辅导和

点评。

【媒体选择】主要采用FrontPage示范课件和实际操作讲

解相结合，并辅以文字教材、网上学习资源和教学光盘。

【教学内容】现在越来越多的课件是用网页制作工具来制

作，并结合数据库、ASP等技术来加强课件的交互性。

网页形式的课件可以集成丰富的多媒体信息，具有交互性

强、制作简易、体积小、便于在网络上发布、传播和更新等优

点，适合于个别化学习、课堂教学和网络教学。

网页课件的开发工具软件有很多，包括：语言编程如

HTML、DHTML、ASP、JSE、HUE、JAVA、JavaScript、

VBScritp、VRML等。

所见即所得的可视化编辑工具，如FrontPage、

Dreamweaver、Flash、Authorware、PowerPoint、

CourseBuilder等。

对于一般都有繁重教学任务在身的学科教师来说，没有太

多的精力去学习复杂的编程语言。

可视化网页编辑工具由于源代码自动生成，使教师可以有

更多的精力关注内容的表达和教学设计。

用FrontPage编制的网页课件有较易操作的界面（与上网浏

览网页完全相同），一门课程或一堂课的脉络结构（知识结构）可

以在主页上用菜单（树形菜单或弹出菜单）或导航条的形式清楚

地表明，可以列出教学目的、内容、重点难点、引言、概念性

质、例题、练习、小结、作业等等，甚至操作注意事项。

FrontPage被公认为最好的入门级的网页编辑工具。

一、FrontPage基本操作

启动FrontPage：双击桌面上的FrontPage快捷方式图

标；开始一程序一MicrosoftFrontPage;右击一个扩展名为

him或html网页文件，选“编辑”。

2.打开或隐藏视图栏、文件夹列表和网页文档a.点“视

图一视图栏”打开或隐藏视图栏。

点”视图一文件夹列表”打开或隐藏文件夹列表。

b.右击扩展名为htm或html网页文件（如

index,htm）,选“编辑”，系统默认用FrontPage打开网页。

C・点”文件f打开”或点常用工具栏中的“打开”按钮，

从本地磁盘或网络驱动器中打开网页文档，从任意Web网站打

开网页，打开最近打开过的网页文档。

3.在FrontPage编辑器中预览网页a.点普通视图按钮，

观察刚才打开的index,htm网页。

b.点HTML视图按钮，观察index.htm网页。

c.点预览视图按钮，观察index,htm网页。

4.FrontPage视图方式：网页视图，文件夹视图，报表视

图，导航视图，超级链接接视图，任务视图。

5.保存网页：点“文件一保存（另存为）”或点常用工具

栏中的“保存”按钮，将新建的网页或从万维网上打开的网页

保存到本地磁盘，把自己喜欢的网页作为模板保存。

6.关闭网页：点”文件一关闭”或文档窗口中的“X”

按钮，关闭当前网页。

二、设计网页课件的框架结构

三、在网页中插入表格、图像、背景、剪贴画、声音、视

频和动画等多媒体对象

1.插入表格插入到网页上的文本、图片、音频、视频、

动画等元素，往往看起来显得不够整齐，为了使网页更美观，

我们利用表格来控制复杂的网页布局，即用表格来定位网页

元素。

（1）点“表格一插入一表格”，输入行数、列数（如3

列5行），插入一个规则表格，设置表格的属性。

⑵用“表格”工具栏上的按钮或“表格”菜单上的“插

入行或列”命令来增加表格的行或列。

(3)用“表格”二具栏上的按钮删除一个单元或多个单元，

删除一行、多行或一列、多列，删除整个表格，表格删除后立

即按“常用工具栏”中的“撤消”按钮或按“Ctrl+Z”恢复表

格；选择单元格或单元格中的内容用鼠标把选择的内容拖到新位

置进行移动；按住CTRL键，再用鼠标把选择的内容拖到新位置

进行复制。

(4)选中需要拆分的单元，单击“表格”工具栏上的按钮或

使用“表格”工具栏上的“笔”拆分单元格;选中需要合并的单

元，单击“表格”工具栏上的按钮或单击“表格”工具栏上的

(擦除)按钮合并单元格。

经过处理，3列5行的表格变成1列4行。

2.插入图像和背景图象将鼠标定位到要插入图片的位置

(如某个单元格内)，单击“常用工具栏”上的'“插入图片”按

钮，从已建站点的图片文件夹中选择合适的图片，点击“确

定”，教案《用FrontPage制作网页课件授课教案：》。

也可以在“图片”对话框中点击“插入一个计算机中的图

片"按钮，FrontPage编辑器将打开“选择文件”对话框，从

本地磁盘中指定一个图像文件。

右击网页空白处，选“网页属性”快捷命令，单击“网

页属性”对话框的“背景”选项卡，先选中“背景图片”复选

框，选择合适的图像作为背景图插入网页，点击“确定”按钮。

3.插入剪贴画总“插入”一“图片”一“剪贴画”命令，

选择一幅剪贴画，单击“插入”按钮，或直接双击剪贴画。

4.插入声音或视频剪辑选择“插入”一“高级”一“插件”

命令，打开“插件属性”对话框，单击“浏览”按钮，打开

“选择插件数据源”对话框，从站点文件夹或本地计算机上指

定要播放的声音或视频文件。

调整网页中插件图标到合适的尺寸。

5.修改图像属性右击网页中的图像，选“图片属性”命令，

在“常规”选项方式下指定图像的格式（例如jpg和质量75）；

在“文本”框内简单地描述图像；单击“外观”选项卡，指定图

像无边框即边框线宽度为0,指定图像与相邻的文字或图像之

间的水平间隔和纵向间隔，要改变图像的大小，首先选中“大

小”框内的“指定大小”复选框，然后分别指定图像的宽度和

高度。

熟悉“图片”工具栏：创建自动缩略图；调整图像的黑白对

比度和亮度；给图像加上斜面边界；把彩色图像变成黑白图像；把

图像翻转；修正图像；裁剪图像；淡化图像；把图像恢复原样；在

GIF格式的图像上写文字；使GIF图像透明等。

6.插入水平线美化网页网页水平线用于把网页分隔成几个

部分。

新建或打开网页文档，把插入点移到要插入水平线的地方，

单击“插入”菜单上的“水平线”命令。

要把水平线插入在下一行，就把插入点定在行尾。

在水平线上单击鼠标右键，在弹出的菜单中选择“水平线

属性”命令，也可直接双击该水平线，设置水平线的宽度、水

平线的对齐方式和水平线的颜色。

四、在课件网页中使用书签和超级链接接

1.书签的作用书签用于在长网页内部快速跳转和定位。

2.创建书签网页从Web网页上复制一篇比较长的文本，

粘贴（选择性粘贴：无格式文本）到新建网页中。

选择要标记的位置，单击“插入”菜单中的“书签”命令。

FrontPage编辑器将显示“书签”对话框。

在“书签”框中键入书签名称（最好用西文命名），书签名

称应具有较好的描述性，然后单击“添加”按钮。

可看到标签小旗出现在期望定位的位置上。

用同样的方法创建其它书签。

在网页顶端创建系列提纲（目录）文本，选中其中一个，右

击文本，选“超链接”，在“链接到”栏中点“本文档中的位

置”，在书签列表中选中合适的书签，确定。

用同样的方法给其它的提纲（目录）文本建立超链接。

保存网页，在IE中预览。

3.超级链接使用超级链接，不仅可使站内的网页成为一

个有机整体，还可使不同的站点之间建立联系。

例如，在制作“网上学习资源”网页时，需要给所列出的

大量的网上学习资源的标题文字设置超链接，以便访问者通过

点击网页上的标题文字打开相对应的学习资源。

首先选中标题目文字，然后单击标准工具栏上的“超级链

接”按钮，在弹出的“创建超链接”对话框中指定超级链接所

对应的网页，或在URL文本框中填入网页的地址即可。

4.创建图像热点作为超级链接接新建或打开包含有复杂图

片(如地图或大型仪器图片)的网页。

练习创建图像热点作为超级链接接。

例如，在世界地图片上的“国家地区”区域处创建一个热

点，指定它跳转到“按国家地区查询”的主页上。

方法是：首先单击图像，编辑器将显示“图片”工具栏，

选择“图片”工具栏上的“图片”按钮，把光标移到图像上，

光标将变成笔状，按住鼠标左键在图像上画出热点。

释放鼠标后，Frontpage编辑器自动打开“创建超级链接”

对话框，在此指定该热点要跳转的目标网页或网址。

制作好后在IE浏览器中预览。

5.改变超级链接的外观选择某文字超级链接，单击“格式”

菜单上的“背景”命令，打开“网页属性”对话框的“背景”

选项。

把该超级链接的颜色改为另一种更醒目的颜色，预览一下，

看超级链接文字是否发生变化。

试着用不同的颜色表示未访问过的超级链接(Hyperlink)、

访问过的超级链接(VisitedHyperlink)和将要访问的超级链

接(Activellyperlink)。

看看改变超级链接的外观的效果。

6.编辑超级链接属性右击超级链接，选”超级链接属性”，

FrontPage编辑器将打开，在URL框内键入新的网页文件名或

网址。

观察改变后的效果。

7.取消超级链接右击超级链接，选”取消超级链接”命令。

五、插入活动元素-让课件网页活起来

1.制作悬停按钮定位插入点，单击“插入”/“组件”

/“悬停按钮”，打开"悬停按钮”对话框。

把动态按钮默认标签“按钮文本”，改成所需的按钮文字,

单击“字体”按钮，在打开的“字体”（字体）对话框里设置您

所需标签的字体。

要为动态按钮创建超级链接，可直接在“链接到”框内键

入要跳转的URL,乜可单击“浏览”按钮，从当前打开的网站、

WWW.本地磁盘中指定跳转目标。

可重新指定按钮的前景颜色，不过如果按钮显示的是图像,

前景颜色无效。

当用户把鼠标移到动态按钮上时，按钮的颜色将自动发生

变化，这是动态按钮最大的特色，至于颜色是怎样变化的，可

通过“效果”和“效果颜色”框设定。

还可改变按钮的宽度和高度（以像素为单位）。

FrontPage制作网页型课件教案设计第2篇

青州一中

刘志韩

文件一一新建一一网页【学习目标】

1、包括网页制作基础知识

2、站点的规划和创建

3、网页文本和图片的处理、表格和框架的应用【学习重

难点】

1、建立一个主题网站

2、建设一个网站的步骤

3、网页的美化与特效的制作【课前预习】

思考一下多媒体信息集成的方式有哪些？

【自主学习】

1、在www中，是信息的主要组织和表现形式。

2、用语言编写的网页实际上是一种文本文件，

以.HTML或者.HTM为扩展名，可以使用任何文本处理软件(如

记事本、word等)创作或修改。

3、制作网页常用的软件有和

4、网页文件的扩展名有哪些？

5、网站开发的基本过程：

网站的规划一一()——()——网站的发布与管理一

网站的评价【合作探究与指导】

三、网站的制作

1、创建站点

文件一一新建一一站点(选择或创建存储站点的文件夹)

2、网页的创建与编辑

3、插入对象水平线图片字幕悬停按钮

4、创建超级链接

在对象上右击选择超级链接一一选择链接的目标。

5、使用表格

表格一一插入（在制作网页的过程中用表格来布局网页）

6、在站点中查看网页的编辑及网页之间的链接情况。

分步骤操作练习题：

1、新建一个站点，只有一个空白网页的站点。

2、在首页上插入“我最喜爱的明星”，然后进行修饰。

3、再新建一个空白网页。重新命名为“周杰伦”o

4、插入图片“周杰伦”，文本“周杰伦”，排版设置后保

存网页。

5、再建立一张空白的网页，重新命名为“刘亦菲”。

6、插入图片“刘亦菲”，文本“刘亦菲”，排版设置后保

存网页。

7、分别在首页和“周杰伦”“刘亦菲”网页建立超级链接。

操作练习：【拓展任务】

以环保为主题，利用文件夹“环保”中的素材，制作一个

5页的网站。

【当堂检测】

1.在网页制作中，我们经常用下列（）办法进行页面布局。

A.文字

B.表格

C.表单

D.图片2.使用浏览器访问网站时，第一个被访问的网页称

为()。

A.网页

B.网站

C.HTML语言

D.主页3.网页中可使我们进行选择性浏览的称为()o

A.文字

B.图片

C.声音

D.超链接

4.在FrontPage2000中，要建立同一个网页内的链接点，

让你点选某一链接后，迅速跳到同一网页内的另一个特定位置,

应采用()链接。

A.单元格

B.表单

C.书签

D.表格5.FrontPage2000中，下述关于图片与链接的关

系表述正确的是()。

A.图片不能建立链接

B.一张图片只能建立一个链接

C.图片要建立链接需经过处理

D.通过设置热区，一张图片可建立多个链接6.在

FrontPage2000“网页”视图模式下，单击“普通”标签后，

在出现的“普通”窗口中，可直接进行OO

A.网页编排

B.观察网页在浏览器中的效果

C.编辑HTML代码

D.下载图片7.网页制作的超文本标记语言称为()o

A.VB语言

B.HTML语言

C.BASIC语言

D.ASCII8.在Frontpage2000网页视图方式下，单击()

标签可直接编辑HTML代码？

A.普通

B.HTML

C.预览

D.编辑9.在FrontPage2000中，我们想要文字左右交替

移动的效果，是下列()效果。

A.字体

B.DIITML效果

C.字幕

D.悬停按钮10.在FrontPage2000表格单元格中，()项

目不能输入。

A.表格

B.图形

C.背景

D.声音

作业：以我们寒假生活为主题，从互联网上搜索的素材制

作一个网站。

【阅读材料】

网站设计

建立一个网站就像盖一幢大楼一样，它是一个系统工程，

有自己特定的工作流程，你只有遵循这个步骤，按部就班地一

步步来，才能设计出一个满意的网站。

一、确定网站主题

网站主题就是你建立的网站所要包含的主要内容，一个网

站必须要有一个明确的主题。特别是对于个人网站，必须要找

准一个自己最感兴趣内容，做深、做透，办出自己的特色，这

样才能给用户留下深刻的印象。

二、搜集材料

明确了网站的主题以后，你就要围绕主题开始搜集材料了。

常言道：“巧妇难为无米之炊”。要想让自己的网站有血有肉，

能够吸引住用户，你就要尽量搜集材料，搜集得材料越多，以

后制作网站就越容易。材料既可以从图书、报纸、光盘、多媒

体上得来，也可以从互联网上搜集，然后把搜集的材料去粗取

精，去伪存真，作为自己制作网页的素材。

三、规划网站

网站设计得成功与否，很大程度上决定于设计者的规划水

平，规划网站就像设计师设计大楼一样，图纸设计好了，才能

建成一座漂亮的楼房。网站规划包含的内容很多，如网站的结

构、栏目的设置、网站的风格、颜色搭配、版面布局、文字图

片的运用等，你只有在制作网页之前把这些方面都考虑到了，

才能在制作时驾轻就熟，胸有成竹。

四、选择合适的制作工具

网页制作涉及的工具比较多，首先就是网页制作工具了，

目前大多数网民选用的都是所见即所得的编辑工具，这其中的

优秀者当然是Dreamweaver和Frontpage了，如果是初学者，

Frontpage2000是首选。除此之外，还有图片编辑工具，如

Photoshop>Photoimpact等；动画制作工具,如Flash>Cool

3d、GifAnimator等；还有网页特效工具，如有声有色等，五、

制作网页

材料有了，工具也选好了，下面就需要按照规划一步步地

把自己的想法变成现实了，这是一个复杂而细致的过程，一定

要按照先大后小、先简单后复杂来进行制作。

六、上传测试

网页制作完毕，最后要发布到Web服务器上，才能够让全

世界的朋友观看，利用这些FTP工具，你可以很方便地把网站

发布到自己申请的主页存放服务器上。网站上传以后，你要在

浏览器中打开自己的网站，逐页逐个链接的进行测试，发现问

题，及时修改，然后再上传测试。

七、推广宣传

网页做好之后，还要不断地进行宣传，这样才能让更多的

朋友认识它，提高网站的访问率和知名度。推广的方法有很多，

例如到搜索引擎上注册、与别的网站交换链接、加入广告链等。

FrontPage制作网页型课件教案设计第3篇

目前，课件制作软件很多，它们都有各自的优点。笔者这

几年来一直使用FrontPage制作网页式课件，它的最大优点是

可以在Internet网上发布，它的交互，既可以在教师与学生之

间进行，又可以在学生与学生之间进行，这是其它形式的课件

无法比拟的。接下来本人就如何利用FrontPage设计网页式课

件谈谈自己粗浅的认识。

1.制作课件前的准备工作

1.1熟悉创作软件

首先要安装FrontPage中文版。该软件运行环境为

windows操作系统。其次要注意浏览器的兼容性。用Front

Page制作课件最终要在浏览器中浏览，所以应该让你的课件尽

量与大部分的浏览器兼容，许多浏览器有自己不同的HTML解释

方法，应该在两种以上浏览器中进行测试。

1.2积累各种素材

选择最优的媒体素材去呈现教学内容，是运用网页式课件

在教学中能取得最优化教学效果的关键。没有素材，就失去了

操作对象，素材不理想，就影响了课件的质量。因此，在制作

课件之前一定要精心收集素材，要把课件中需要的素材全部收

集起来，并进行适当的处理，然后再制作课件。这样，不但可

以提高工作效率，同时也为制作出高质量的课件奠定了基础。

素材主要包括文字素材（主要指教案。提前备好课，深挖教材,

突破重点难点，处理好各个知识点）、图像素材、声音素材、

动画素材、视频素材等等。

1.3精心创意构思

教学设计的创意和构思是决定网页式课件成功与否的关键。

一个网页式课件的制作从技术上来说并不是很难，难的是课件

的设计和构思。在制作中必须根据教学的实际需要，恰当运用

各种素材，充分发挥多媒体的形象、直观、交互性强和非线性

等特点，必要时可运用特技手法，适度夸张，强化感染，创设

更为生动的教学氛围，激发学生的学习兴趣，以求达到最佳教

学效果。同时根据教学内容、目标、重点和难点，结合学生的

兴趣、爱好、学习方法和学习习惯，精心设计，合理安排课件

结构流程。以自己的技术水平，通过新颖的创意和独特的构思，

把收集的素材和教学内容完美结合起来，从而制作出优秀的课

件作品。

2.制作课件过程

首先在FrontPage中单击“文件一新建一网站”，建立一

个“只有一个网页的网站”，指定课件所在路径及课件名。这

时你打开刚才所建课件名，你会发现里面多了一些东西。其中

有一个名字叫“index”的文件,它就是课件的主页。“index”

是网站默认的主页名称，它的后缀为“htnT或"html”。还有

一个"images”文件夹，它是用来存放网页中的图片文件的，

我们可以把刚才准备好的各种图片都拷到它里面。另外再建立

几个文件夹，分别命名为“sounds"、“a个”、“gif”等等,

把素材分类存放到里面。

接下来就是利用导航视图确定导航结构图，建立教学内容

知识结构图，目的是为了创建超链接的方便性。先分析教学内

容的知识结构，把课件所包含的教学内容，分解为若干个知识

单元，每个知识单元又包含若干个知识点，找出各个知识点，

知识单元之间的关系和联系方式。然后在FrontPage中把视图

方式切换到“导航”，在“index”上单击右键，在快捷菜单中

选择“新建网页”，利用重命名给每一个新建的页面改成指定

的名字，这样建立的导航结构图既方便查看也方便建立连接栏,

层次也比较清楚。

下面就是编辑每一个页面了。先来编辑首页，我们在首页

上写上所讲内容的标题，另外加一些图片，作者信息，课件使

用的简单说明等等。接下来是编辑每一个知识点页面、练习页

面等等。编辑每一个页面时给他们设置导航栏，添加返回按钮,

利用超级链接把各个页面链接起来。

3.制作技巧及注意事项

3.1使用框架网页

用横幅目录框架网页设计主页，在横幅上显示标题，在目

录上添加导航栏，在主窗口显示各个知识点的内容，这样一来

标题突出，各个知识点清楚，内容又在窗口的主要部分显示比

较清晰。

3.2设置页面背景

一个课件应该有一种统一的背景风格，或利用颜色或利用

图片。背景的设计要讲究一种艺术性，要根据课件的内容去设

计，给课件营造一种与所讲内容相适应的氛围。

3.3页面文字的处理

页面的文字要处理好它们的字体、大小、颜色、粗细……

一般来讲，整个课件文字风格要统一，不要一个页面一个样,

那样给人一种乱的感觉。重点句子可以用下划线、加粗、突出

显示、改变颜色等方法处理，但一个页面中这种情况不要太多，

否则就乱了，反而起不到突出重点的作用了。

3.4插入图像

插入图像可以丰富课件的内容，可以增强内容的直观性，

还可以起到美化课件的作用。但无论哪一种图像插入课件时都

要注意：

3.4.1数量不可太多；

3.4.2要与课件内容结合比较紧密，能突出重点；

3.4.3要进行技术处理；

3.4.4装饰性图片尽量少用或不用。

3.5添加网页过渡和文本、图片动态效果以及字幕

为了增加课件的美感，我们还可以给网页添加过渡效果以

及文本、图片的动态效果。网页过渡效果可以发生在进入页面、

离开页面的时候，而文本、图片动态的效果则在某中触发事件

发生时产生。FrontPage还有一种滚动字幕功能。它们都可以

起到活泼页面的气氛，制造一点特殊效果，吸引学生注意力。

但不可以滥用。

3.6设计好各种按钮

在网页式课件中要用到很多超链接，例如授课各环节、上

一页、下一页、首页等等，能够在网页上运用好这些按钮也会

给课件增添不少色彩。FrontPage为我们准备了很多漂亮的交

互式按钮。但是无论是采用交互式按钮还是采用图片做按钮都

要注意按钮要与网页相匹配，色调反差不宜太大，按钮风格要

统一，同一名称的按钮最好用同一图片，不要频繁更换。

3.7全屏浏览，反复修改

Windows自带的浏览器IE窗口最上面有菜单栏，其次是快

捷按钮栏，然后是地址栏，最下面还有状杰栏。这些东西把一

个窗口给挤占去很多空间，不利于我们展示课件内容。所以我

们在网页课件中最好使用IE的全屏浏览功能。在课件制作时就

按全屏来设计课件。另外当显示器的尺寸不同以及采用的分辨

率不同时它的显示显示效果也是不同的，所以制作时要特别注

意。

3.8把一些文件和文件夹设成隐藏

一个网页课件做成后会有很多网页文伶和文件夹，打开课

件文件夹后找主页“index”很费劲儿。我们可以把课件文件夹

下除“index”外的其他文件和文件夹都设成隐藏，这样打开文

件夹后只有“index”一个文件，非常简洁！

FrontPage制作网页型课件教案设计第4篇

学期教学计划

一、教材简析

本学期使用的计算机教材是江苏科学技术出版社出版的初

中信息技术教科书。同时，由于配合高中阶段选修网络课程，

增加部分网络知识。

本教材主要内容如下：1、网络基础知识2、网页的建立

3、网页图片的处理4、网页框架的设计5、网页表格的制作

6、网页表单的制作7、创建超链接8、动态网页的制作9、

网站的建立

二、学情评价

1、学生学习网络和网页制作的兴趣浓厚，热情较高2、

学生的计算机基础知识掌握不够牢3、学生运用电脑的能力较

差4、部分学生上机行为不够规范

5、有些学生键盘操作不熟练，用一只手操作键盘现象较

严重

二、目的要求

1、提高学生学习计算机网络知识的兴趣，注重动手能力

2、规范学生上机行为，养成良好的习惯

3、掌握基本的网络知识和网上获取信息的能力4、对学

生适时进行爱国主义教育

5、成绩指标：平均分80,及格率98%,高分率80%

三、教学措施

1、认真钻研，精心备课2、仔细讲授3、耐心辅导4、

严格要求学生

四、教学进度

序次课题：（内容）课时周次

序次课题：（内容）课时周次1

机房常规教育和课程安排

练习、实践

1102

网络基础知识，制作工具

动态网页制作

1113

网页的建立、网页属性设置

网站建立

1124

网页图片的处理

设置单元格式

1135

练习、实践

开始

网页框架的设计

分组做网站7

网页表格的制作

网页表单的制作

创建超链接

第一节

网页制作基础知识

教学目标：

1、了解网站、网页、主页和HTML的基本概念

2、了解常见的网页制作工具

3、掌握Frontpage的启动和退出

教学手段：教师讲解与学生演示相结合

教学过程：一.讲课：

一、网页及其组成

通过浏览器在e.htm。

操作步骤：1.文字编辑2.插入图片

插入图片可使网页丰富多彩。在网页中可以使用的图片类

型有多种，但最常用的是GIF和JPG格式的图片，因为这两种

图片的文件长度较小，有利于提高网页的浏览速度。所以，插

入其他格式的图片后，在页面存储时，系统会自动将图片格式

转换成GIF或JPG格式。

3.插入动画

在网页制作中，经常使用一些小动画，使页面生动活泼，

这些小动画文件用专门的工具制作，也以GIF作为文件的扩展

名。

操作步骤：

（1）依次单击“插入（I）”菜单中的"图片（P）”、

“来自文件（F）命令，打开“图片”对话框，单击“浏览”

按钮，打开“图片”对话框，单击“浏览”按钮，从“选择文

件”对话框中选择所需图片“diqiul.gif"，单击“确定”按

钮，插入动画。

（2）拖动动画到标题下方适当位置即可。

4.插入水平线

水平线是贯穿网页宽度的细灰条，用来分隔文本成加着重

符。插入水平线可以帮助我们将各类相关信息组合到一起，但

同一个页面中水平线不宜过多。

调整水平线的宽度、高度、对齐方式以及颜色，就可以改

变它的外观。5.设置背景

（1）单击“格式（0）”菜单中的"背景（K）命令，

出现“页面属性”对话框，且“背景”标签已被打开。

（2）单击”浏览（B）按钮，在“选择文件”对话框中

浏览文件夹内容，从中搜索到所需背景图案后，单击“确定”

按钮，关闭“选择文件”对话框，再单击“确定”按钮，关闭

“页面属性”对话框，背景图案即可插入页面。

页面制作完成，可以单击“预览”标签，观察一下效果。

三、网页的保存单击”文件（F）”菜单中的“保存文件

（S）”命令，弹出“另存为”对话框.在“文件名（N）”列表

框中输入"welcome"后，单击"保存（S）”按钮。如果要保

存的页面含有图片、动画、声音等元素，FrontPage还会继续

询问是否保存这些嵌入的文件，如图5T1所示。

此时最好将这些文件保存起来，以保挣它们在网页中的位

置，否则，当网站发生迁移时，可能因找不到这些图片、动画

等文件而无法显示。另外，最好将它们保存到Images文件夹中,

使网站保持清洁，便于管理和维护。练习：

1.在设计网页过程中，定义字体时要注意哪些问题？

2.为什么在网页中通常都使用GIF或JPG格式的图片文

件？设置网页的背景时，可不可以使用较大的图片？有什么缺

/占MS？•

制作“自我简介”

制作“自我简介”

一、教学目标

1、让学生熟悉FrontPage2000的界面。

2、学会制作网页标题。

3、学会在网页中插入美丽的图片。

4、学会在FrontPage2000中使用表格。

二、重、难点使用表格

三、教学方法演示法、讲授法、实践操作法、比较讨论法

四、教学类型新授课

五、教学过程

［导入］前面大家了解因特网的神奇世界，畅游了丰富多彩

的网站，欣赏了精美华丽的网页。看到这么多漂亮的网页，同

学们是否也想自己在网上建立一个自己的“家园”？现在我们

将学习如何利用FrontPage2000在因特网上安一个自己的

aa，，

豕O

在因特网上安“家”的一般步骤大致可分为网站规划、网

页制作和上传发布三个阶段。本章创建的整个网站主要由“自

我简介”、“成长之路”、“兴趣特长”和“网上交流”等网

页构成。

［讲授］创建网上家园，首先应将自己的有关情况展示出来,

让来访者对自己有一个大概的了解。这里，先来看一个同学制

作好的“自我简介”网页。

这个网页包含有图片、表格和相关文字等，下面学着制作

这个网页。每个网页都有一个标题，让来访者一目了然。在

“自我简介”网页中用“自我简介”几个文字来作为这个网页

的标题。

［演示］

1、单击屏幕左r角的“开始”按钮，在“开始”菜单中选

择“程序”fuMicrosoftFrontPage”菜单命令，进入

FrontPage窗口。

2、在网页编辑二作区输入文字“自我简介”，单击“格式”

工具栏上“居中”按钮，将文字居中。

3、选中文字“自我简介”，通过“格式”工具栏的“字体”

下拉列表，选择“楷体_GB2312"o

4、在“格式”工具栏选择“字号”为"24磅”，“颜色”

为“粉红色”

5、单击“常用”工具栏上的“保存”按钮，弹出“另存

为"对话框。

6、在“文件名”中输入文件名“简介”后，单击“保存”

按钮，保存网页。［实践操作］

1、使用“格式”一“字体”菜单命令也可以方便地设置字

体。启动FrontPage,在编辑工作区中输入文字“兴趣爱好”，

使用菜单命令改变字体。

2、单击“HTML”标签，观察编辑工作区的变化。［提醒］在

网页设计中，对于非Windows自带的字体尽量少用，以免造成

别人浏览此网页时无法显示这种字体，影响网页整体效果。

［讲授］

1、FrontPage启动后，会自动打开一个新的空白网页窗口。

FrontPage窗口与前面所学的Word窗口类似，由标题栏、菜单

栏、工具栏、编辑区和状态栏组成。

2、网页文件实际上是一个按HTML语言规则编写的文本文

件。我们看到的网页是浏览器对HTML文件进行逐条解释，再显

示出来的结果。

HTML是英文HyperTextMarkupLanguage的缩写，意为

“超文本标记语言”。这种语言用“<>”来标记网页中对象的

格式和有关参数。网页中除了文字保存在HTML文件中外，其他

对象（如声音、图象、动画等）在HTML文件中只是保存了相应

的标识和有关参数，真正是内容还在这些对象的文件中。因此,

这些对象的文件如果被删除或改变了位置，就不能在浏览器中

正确显示出来。

［讨论］如果在两个文字之间增加了一个空格后，间距又显

得太大，此时应怎样调整才能得到合适的间距呢？

［实践操作］启动FrontPage,分别建立主题为“兴趣特长’

和“成长之路”的两个网页，并保存为xingqu.htm和

chengzhang.htm［讲述］你在因特网上漫游时，精彩生动的图片

会使人流连忘返。在自己的网页上添加美丽的图片，一定也会

增加吸引力。

［演示］

1、打开网页jianjie.htm,选择“插入”一“换行符”菜

单命令，弹出“换行符属性”对话框，选择“普通换行符”，

单击“确定”按钮，将光标下移一行。

3、单击“常用”工具栏上的“插入文件中的图片"按钮，

弹出“图片”对话框。

4、单击“剪贴面”按钮，弹出“剪贴画库”窗口，在“比

喻”类别中找到剪贴画图片，将此图片插入到网页中。

5、调整图片的大小，并居中放置。

插入图片［讲授］

1、使用回车键换行时，行距较大，而采用普通换行符来换

行，行距为0。

2、FrontPage由可以插入的图片文件格式很多，如GIF、

JPEG、PNG和BMP等。其中BMP格式的图片是未经过压缩的，

文件较大，一般很少使用；而GIF、JPEG、PNG格式的图片都是

压缩过的，文件较小，便于在网页中浏览和下载，所以经常使

用。［实践操作］

1、在已建立的网页“成长之路”中，选择“插入”一“图

片”菜单命令，加入合适的图片，并调整图片的位置和大小。

2、在已建立的“兴趣特长”网页中，使用“常用”工具栏

上的“插入文件中的图片“按钮，加入合适的图片，并调整图

片的位置和大小。

3、选择“格式”一“背景”菜单命令在网页中加入背景图

片

以图片为背景的网页［讲解］在FrontPage中使用表格，可

以整齐地排列文本，有效地组织数据，使整个网页看起来简洁

清晰。我们下面来使用表格制作出自我情况介绍。

网页中的“自我简历表”［演示］

1、单击“常用”工具栏上的“插入表格”按钮，制作出一

个6行2列的表格。

2、在第一行第二列中，单击鼠标右键，在弹出的快捷菜单

中，选择“拆分单元格”命令，弹出“拆分单元格”对话框。

3、选取“拆分为列”选项，在“列数”框中输入3,单击

“确定”按钮，将此单元格分为三列。

4、输入表格中相应的文字。

5、按住Ctrl键，单击表格的第一列和第三列，选中此两

列，在“格式”工具栏上设置“字体”为“黑体”，"字号”

为“4(14)磅”，“字型”为“粗体”。

6、选中第二列和第四列，设置“字体”为“楷体”，”字

号”为“4(14)磅”。

7、选中表格的所有行，单击“格式”工具栏上的“居中”

按钮，将文字居中。

8、选中第二行、第四行、和第六行，单击“格式”工具栏

上的“突出显示颜色”按钮，选择突出显示颜色为“浅绿色”。

9、选中整个表格，单击鼠标右键，在弹出的快捷菜单中选

择“表格属性”菜单命令，弹出“表格属性”对话框。

10、选择边框颜色为“粉红色”，单击“确定”按钮，制

作出“自我简历表”。［试一试］删除表格的某一行、某一列或

整个表格。［小技巧］

1、选中表格的多行、多列或多个单元格时要按住Ctrl键

不放，再选取所需的行、列或单元格。

2、选中整个表格的方法：在表格的最左或最右边双击鼠标

左键，当所有单元格反色显示时表示该表格被选中。［学生阅读

并实践］表格的编辑方法用表格来安排版面［实践操作］

1、在自己所建的xingqu.htm网页中使用表格展示自己的

兴趣爱好。在chengzhang.htm网页中加入能反映自己成长过程

的图片。

2、建立一个2行6列的表格，在表格中插入图片和表格。

3、将本节中所制作的主题文字、图片和表格进行混排。

［总结］

FrontPage制作网页型课件教案设计第5篇

（高二信息技术公开课教学教案）

［教学目的］

了解网站的基本结构、构建网站的步骤，掌握用

FrontPage制作简单网页［教学重点］