第一篇：网页制作入门(frontpage2003教材)
网页制作4
第三单元
本单元以“可爱的中国”为主题，运用前2单元已经学过的 Frontpage2003网页制作知识、制作完成“可爱的中国”主题网站。第一课规划网站，主要是设计网站结构图及创建“可爱的中 国”网站的站点，并为制作网站准备素材。
第二课设计框架网页，要求在左框架网页中始终显示导航栏, 并且通过导航栏链接的网页能够分别显示在右框架网页之中。第三课学习设置网页过渡效果以给浏览者提供美妙且富有情 趣的视觉环境。
第四课 发布网站 本课第一任务是对“可爱的中国”网站进
行最后的检测。第二任务是通过Windows系统中的“个人Web服务 器”，将自己的计算机作为服务器，发布网站。
第五课将制作网站的一般步骤进行如下归纳，学生检查自己制 作的网站并完成评价表的填写。本单元中所用到的素材等，都保存在 相关网页的相应文件夹中。知识要点： 第1课：
1、规划网站的结构。
2、创建空白站点。
3、为网站准备素材。第二课：
1、创建框架网页。
2、保存框架网页。第三课：
设置网页过渡效果。第四课：
1、对网站进行检测。
2、利用个人Web服务器发布、测试网站
第一课时规划与准备
探究空间：
可爱的中国、悠久的历史、灿烂的文化。接下来，就让我们以“可爱的中
国”为主题，从中国历史、地理、中国之最、中华民族等方面作为内容开始规划 一个“可爱的中国”网站。
11、规划网站的结构
在开始建立网站之前，首先要确定网站的主题，然后根据主题确定这个网
需要由多少个网页组成，以及这些网页之间的链接方式。当我们确定了“可爱的 中国”网站的主题后，经过分析，决定用5个网页来表现这个主题，如下图所示。
主
页
中国历史 中国地理
中国之最
中华民族
图3-1.1
我们把上面的这个图称为网站结构图。从这个图中可以看出，可爱的中国” 网站的结构分为2层。在制作网站之前画出结构图，不但可以帮助我们规划网站 结构，使网站层次分明、条理清楚，还可以确定各个网页的内容，方便大家思考 各网页之间的链接方式。
22、创建站点
设计出“可爱的中国”网站的结构后，接下来我们要在FrontPage中创建这 个空白网站，然后再逐步补充其中的内容，最终形成一个内容丰富多彩的网站。第1步:启动FrootPage。在右侧的“新建网站”任务窗格中单击
信息链接：
如果FrontPage窗口没有出现“新建网站”任务窗格，可单击菜单栏上的“ 文件，在“文件”菜单栏中单击“新建”，然后在右侧的窗格中选择新建网页或” 站点。
第2步:自动打开左下图所示“网站模板”对话框。在“指定新网站的位置” 栏可以设置网站保存的位置，在这里我们点击“d:可爱的中国”使这个文件夹成 为保存网站文件的默认文件夹。
图3-1.2
第3步:单击
框消失，新站点建立成功。，出现“创建新站点提示框。稍等一会儿，该提示
第4步:单击视图栏中的“文件夹”图标，此时FrontPage窗口中出现“文 件夹列表”窗格，在这里显示出新建网站中的文件夹。而在窗口标题栏中则显示 目前网站的所在位置，如下图所示。
图3-1.3
由于我们建立的是空白站点，所以网站文件夹中没有任何网页文件，但系
统会自动生:成上图所示的两个子文件夹，其中的“images”文件夹用于存放网站 中的图片文件。
若想关闭“文件夹列表”窗格，切换到网页编辑窗口，只要单击视图栏中 的“网页”图标即可。信息链接：
FrontPage中提供了多种建立典型网站(如个人网站、公司展示网站、讨论网 站等)的向导及模板，利用合适的向导来建立网站可以简化制作过程。上面介绍 了最基本的建立网站的方法。有兴趣的同学可以试看在“Web站点模板”对话框 中选择不同的站点向导、建立风格独特的网站。
33、为网站准备素材
“可爱的中国”网站的空站点建起来了，接下来我们的工作是制作网页，充实网站的内容前还有一件很重要的事要做，那就是为网站准备素材。网页中除了文字之外，还包含图片丶声音丶动画等多种内容，这些资料要
在制作网页之前准备好，存放在一个文件夹中。收集资料的方法很多，我们可以 在因特网上查找并下载所需要的资料;也可以在素材库中找素材;还可以利用扫描 仪、数码相机等设备来采集信息。
如下图所示，我们为制作“可爱的中国”网站准备的素材都存放在“D:网 站素材可爱的中国”文件夹中。在这个文件夹中有“动画”、“视频”、“图片”、“文字”、“音频”和“其他”等几个文件夹，分别用来存放网站所需的相关资 料。
图3-1.4
在“可爱的中国素材库”文件夹中，有制作“可爱的中国”网站所需的相
关素材，大家可将这些素材拷贝到“D:网站素材可爱的中国”的相关文件夹中。然后在这些素材的基础上继续丰富素材库。信息链接：
在使用他人创作的图片及文字资料前，一定要征得原作者的同意或者注明 资料的来源，尊重别人的知识产权。
在前面的操作中，我们对“可爱的中国”网站进行了规划，并且创建了空
白站点，还搜集了大量有用的素材。在下一个主题活动中，我们将通过设计框架 网页，进一步完善“可爱的中国”网站了。
实践升级
1.将FrontPage的窗口界面与Word的窗口界面进行对比，试看找出一些相 同点和不同点。
2.去因特网上逛一逛，浏览欣赏几个感兴趣的网站。结合具体的网站实例，进一步体会网站和网页的概念，了解网站和网页之间的关系。然后将你认为不错 的网站推荐给同学们，大家一起讨论:什么样的网站才是好网站?
3.根据“可爱的中国”网站的结构规划思想，自己想办法多收集一些文字、图片素材，例如中国历史、地理、中国之最、民族等内容，然后把这些资料分类 保存到“D:网站素材可爱的中国”文件夹中。
第二课时：制作框架网页 探究空间：
这节课的任务是设计一个框架网页，要求在左框架网页中始终显示导航栏, 并且通过导航栏链接的网页能够分别显示在右框架网页之中。
框架网页是一种独特的页面组织方式，它由导航框架和内容框架组成，一
个框架网页窗口中包含几个单独的网页，单击导航框架中的网页导航超链接即可 在内容框架中显示相应网页的内容。通常我们使用FrontPage提供的“框架网页” 模板来创建框架网页。
1、创建框架网页
第1步:启动FrontPage，打开“可爱的中国”网站。第2步:单击右侧的“新建网页”，“其他网页模板”。打开“网页模板”对话 框。单击对话框中的，进入“框架网页”选项卡。
图3-2.1
第3步:单击模板中的“横幅和目录”模板，再单击 如下图所示的空白框架网页。，即可创建
建立
图3-2.2
第4步:在空白框架网页中，分别单击顶端、左侧及右侧的3个 3个空白网页，如下图所示，图3-2.3
接下来，我们就可以像制作普通网页一样制作框架网页了。
2、添加网页内容
在我们上面制作的框架网页中，网页编辑区域分为三部分:上框架、左框架 和右框架。它们是3个独立的网页，我们可以单独对每个网页迸行编辑。完成上框架网页的内容。将上框架网页的边距的宽度和高度分设置为2像
素;然后在上框架网页中插入banner.jpg”图片，调整图片后，效果如下图所示。
图3-2.4
图3-2.5
接下来，我们要完成左框架网页的内容。因为左框架网页中包含导航内容，所以制作过程麻烦一些。
第1步将插入点光标移动到左框架网页中，在此插入一个:4行1列的表格。调整表格大小，并将表格线粗细设置为0。
图3-2.6 第 2步 如上图所示，将插入点光标移动到左框架网页的第1个单元格内。，再单击“插入”菜单中的，打开下图 单击菜单栏上的
所示的“插入web组件”对话框。
第3步::在“组件类型”列表中单击选择“动态效果”在右侧的效果列表中 单击选择“交互式按钮”。单击，打开“交互式按钮”对话框。
图3-2.7 第删除“按钮文本”框中的文字，重新输入“中国历史”即把按钮的4步 的标签(按钮上显示的文字)设置为“中国历史”。其他设置如下图所所示，完成 后单击，返回网页编辑窗口。
第5步:在左框架网页中再插入三个交互式按键钮，按钮名称分别为“中国 地理”、“中国之最”和“中华民族”，完成后效果如下图所示。
图3-2.8
利用事先准备好的素材，制作完成右框架网页的内容。如果暂时完不成网 页中的正文内容，可先做一部分，其他的留到课后完成。
3、保存框架网页
把框架网页的每部分都制作好后，我们要保存框架网页。单击常用工具栏上 的，打开下图所示“另存为”对话框。
图3-2.9 信息链接：
在保存框架网页时，每个框架中的网页都要单独保存一次。此外还要保存
整体框架网页，这个网页中包含该框架网页的设置信息，像如何显示网页，以及
框架的大小位置等。要打开一个框架网页，只要打开的整体框架网页就可以了。实践升级：
1、完成“中国历史”、“中国地理”、“中华民族”、“中国之最”、“中华民族”四 个子网页。
2、为左框架中的“中国历史”、“中国地理”、“中华民族”、“中国之最”、“中华 民族”4个“交互式按钮”设置超级链接，分别链接到相对应的网页中；设置这 四个网页在右框架中打开，保存修改，并在浏览器中浏览网页。
第三课时网页过渡 探究空间：
在因特网上建立站点，就好像在网上安“家”。如果把网页看做“家”里的
房间，网页中的各种元素则像家具一样。如何能使我们的“网上家园”既温馨典 雅，又美观大方呢？在这节课中，我们将通过设置页面过渡效果的方法来增加网 页的吸引力。
第1步:在FrontPage中打开“可爱的中国”网站中的主页。
第2步:单击菜单栏中的“格式”，再单击“格式”菜单中的“网页过渡”，打开“网页过渡”对话框。
图3-3.1
图3-3.2
第3步:如上图所示，在“事件”下拉列表中单击选取“离开网页”，即离开网页时显示过渡效果;在“过渡效果”列表中单击选中“圆形放射”;在“周 期”框中输入“5”，即网页过渡效果显示的时间为5秒。
第4步:单击“确定”，返回网页编辑窗口。然后保存网页并在浏览器器中浏览网 页。
需要注意的是，网页的过渡效果是网页间进行切换时才会表现出的一种动态 效果，只有网页间通过链接方式迸行浏览，或者使用浏览器中的“前迸”和“后 退”按钮浏览时才能看到过渡效果。练一练：
为网站中的其他网页添加过渡效果，并根据自己的喜好设置各项过渡属性。信息链接：
FrontPage中提供了众多的Web组件，合理地使用这些组件可以使网页显得 更活泼、更吸引人。除了对网页设置过渡效果，你还可以用计数器、滚动字幕等 组件来装饰“可爱的中国”网站的主页，或者在网页中设置动态HTML效果，增 加网页的动感。
实践升级：为网页元素设置动态效果
第1步：打开“可爱的中国”网站中zgls.htm网页，单击选中页面中的图 片，然后单击菜单栏中的“视图”，再单击“工具栏”中“DHTML效果”
图3-3.3
图3-3.4
第2步:在“DHTML效果”工具栏中，单击“选择一种事件”右端的小箭头，在下拉列表中选择“网页加载”，击“应用”右端的小箭头，在下拉列表中选丰 “飞入”，再单击“选择设置”右端的小箭头，从下拉列表中选择“从顶端”，如 图
图3-3.5
此时选中的图片所在的单元格变得有底色和边框，表示这是一个DHTML效 果，保存网页，然后进入„预览”，窗口预览动态网页，看看设置的效果是否实 现了。
使用“DHTML效果”工具栏可以为文本或图片设置多种动态效果，如文本或 图片的飞入飞出、螺旋等。设置动态效果时，首先要选择某个事件来触发，如单 击、双击、悬停或网页加载等;然后选掸具体的动画种类，最后再选择动画的具 体效果。每种事件能够触发的动画效果并不完全相同，大家快来试一下吧！第四课时发布网站 探究空间:
网站一旦发布出去，便要面对因特网上的所有浏览者，无论对集体还是个 人来说，网站的好坏都会影响到制作者的形象。为确保万无一失，发布网站前，一定要对网站进行反复分析，检查和测试，以确保网站的完整性和正确性。本课 我们通过检查、测试和发布“可爱的中国”网站，学会在局域网和互联网发布网 站的方法和技巧，使大家能够通过网络发布和交流信息。信息链接：
在发布网站初期要进行大量的测试和修改工作，个人Web服务器（Personal WebServer）功能允许我们把设计好的网站发布在自己的计算机上，以本机为服 务器对网站进行测试和管理，为节省时间，避免出现问题，教师在课前应在教学 机上安装并设置好个人Web服务器。
在发布网站之前，首先要在浏览器中打开网站，浏览每一个网页的内容。浏 览时主要检查以下几方面的内容。
1、检查网站结构是否与设计规划的一样。
2、检查网页元素的正确性和完整性，看看有没有错别字，能否清晰地表达作 者的意图等。
3、检查网页中的元素在浏览时是否能够正常显示。
4、检查网页的布局规划是否协调，风格是否一致，颜色搭配是否合理。
一、检查网站中的超链接
我们在建设网站的过程中已经那个知道，整个网站都是通过超级链接组织
起来的，所以必须保证网站中的超链接的正确性和完整性。直接浏览网页的方法 虽然也可以检查超链接，但是当网页过多时，无法保证所有的超链接都一一检查 到。这是我们可以在FrontPage的“超链接”视图中查看各网页之间的链接关系。第1步：启动FrontPage，打开“可爱的中国”网站的主页 第2步：单击菜单栏上的“视图”，再单击“视图”菜单栏中的“超链接”，进入超链接视图。此时在窗口中显示出主页的超链接情况，如图所示。
图3-4.1
在超链接视图中，单击“文件夹列表”窗格中的某个网页文件名称，在右窗 格中即可显示出与该网页相关的链接文件。练一练：
单击每个网页文件名，检查个网页超链接的状态，找出错误并进行修改。修改完超链接后，单击菜单栏上的“工具”，再单击“工具”菜单栏中的“重 新计算超链接”，单击“是”按钮，FrontPage会根据修改情况，刷新整个网站中 的超链接。
二、网页下载速度测试
一个优秀的网站不但应该有精彩的网页内容，还应该有很好的下载速度，没有人愿意浏览速度很慢的网站。所以发布网站前，应该对整个站点的内容进行 调整并找出下载速度很慢的网页，再针对不同的原因迸行修改。首先来看看如何测试单个网页的下载速度。
第1步:在FrontPage中打开“可爱的中国”网站的主页。第2步:单击状态栏中的“传输方式”，弹出一个菜单，如图所示。在此可以 选择网页的传输速率。
第3步：本例选择56k，以测试在此速率下打开本网页所用的时间。如果你对这个下载速度不满意，可以试着修改网页中的内容，例如把图变 小、取消一些动态效果等。
除了单个测试网页速度外，我们还可以找出整个网站中下载速度比较慢的 网页，方法如下。
第1步:打开“可爱的中国”网站。第2步:单击菜单栏上的“视图”，再单击“视图”菜单中的“报表”，从弹 出的下一级菜单中单击“问题”，再从下一级菜单中单击“慢速网页”，系统自动 给出“慢速网页”报表视图。
第3步:查看视图中所指出的慢速网页，打开网页，找出造成速度慢的原因，并进行修改。
利用找出“慢速网页”的操作方法，找出网站中未链接的文件和组件错误，并根据出错报告对相关内容进行调试和修改。
三、利用个人Webb服务器发布、测试网站 通过Windows系统中的“个人Web服务器”，我们可以将自己的计算机作 为服务器，发布自己的网站，并对网站进行测试调整。
1、在FrontPage中打开要发布的“可爱的中国”网站，单击菜单栏上的文件，再单击“文件”菜单中的发布站点，打开左下图所示的“发布站点”对话框。
第，在远程网站位置中输入
步：在“远程 web 服务器类型”选择“文件系统”“d：可爱的中国”，点击“确定”。
第3步：在弹出的窗口中选择“本地到远程”，发布网站，开始上传网站。
上传完成后，启动IE浏览器，在地址栏中你的IP地址，便可在浏览网页了。怎么样，制作网页、建设网站并不困难吧?但是，并非上传网站之后就算完 成了任务，我们还应该及时的对网站内容进行更新及维护，检查里面的超链接有
没有错误或者变更，随时将最新最好的资讯展现给浏览者，这才是一个称职的站 主哦！信息链接：
FTP(FileTransferProtocol)是一种专门用来传输文件的协议，包括上传文件 和下载文件两种功能。所谓“上传”，就是把本地计算机上的文件复制到站点服 务器上，而“下载”则是把站点服务器上的文件复制到本地计算机上。由于每个 提供免费空间服务的网站都有不同的上传和下载方式，为避免发生错误，大家一 定要严格按照服务商的要求，使用正确的上传方式。实践升级：
（1）根据网站测试的方法，检测“可爱的中国”网站。
（2）在因特网上为自己申请网页空间、将“可爱的中国”网站发布到因特 网上，然后浏览检查自己的网站。
第五课时
在这个单元，我们制作了“可爱的中国”网站，现将制作网站 的一般步骤进行如下归纳，同学们参照这个流程迸行操作，就可以避 免出现遗漏或者失误啦。
一、回顾制作网站的一般步骤
①确定网站主题;规划网站结构，画出结构图;确定网页内容、网页布局及色彩搭配等。
②根据主题准备网站素材，像文字、图片、声音等，之后对收 集到的素材进行筛选、加工，并分类存放在素材文件夹中，③选择合适的网页制作软件如FrontPage，然后开始制作框架 网页。
④为网页设置过渡效果，将会给浏览者提供美妙且富有情趣的 视觉环境。
⑤制作完成后，检测网站结构、内容、超链接、浏览速度，并 在本地计算机上发布测试.⑥在局域网或者因特网上发布网站，并且经常对站点迸行维护
和更新.二、检查、完善“可爱的中国”网站
第二篇：Frontpage网页制作经验总结
【摘要】Frontpage更以其功能强大、容易上手、界面亲切而著称。它采用所见即所得的方式编辑网页，利用它可以轻松的组织、编辑网页并将其发布到指定的站点上，而且在发布之后还能对更新情况进行监控以更新站点的。
【关键字】Frontpage创建站点、新建页面、文字、超链接
现在流行的网页制作软件有很多，如Macromedia公司的Dreamweaver、微软公司的Frontpage、还有Adobe Pagemill 3.0--制作多框架，表单和Image map 图像的网页工具、Netscape等等。其中Frontpage更以其功能强大、容易上手、界面亲切而著称。它采用所见即所得的方式编辑网页，利用它可以轻松的组织、编辑网页并将其发布到指定的站点上，而且在发布之后还能对更新情况进行监控以更新站点的内容。
工具准备好了，可根据你的个人喜好来选择一些素材，如图片、喜欢的文章等。现在就让我们从第一步的建立站点来踏上建造网上家园之旅。
用FRONTPAGE创建站点是很容易的。首先，我们来看一下创建一个只包含一个网页的站点。选择“文件”菜单的“新建”选项，单击“站点”命令，这时新建站点对话框就弹出来了，在“指定新站点位置”文本框中输入新站点的位置，单击“只有一个网页的站点” 图标，单击“确定”按钮。这就建立好站点了，我们现在来看一下新的站点里有什么，单击“视图”工具条的“文件夹”按钮。在文件夹列表里有一个网页文件，名字叫做“index.htm”。我们知道，每一个站点都要有一个主页，这个主页也是一个网页文件。浏览者访问站点时首先进入的就是站点的主页。主页的名字在一般情况下就叫做“index.htm”。就是说我们新建只包含一个网页的站点时，FRONTPAGE就自动为我们创建了站点的主页了。这个新建的站点主页时空的，我们可以向里面添加内容。
在文件列表里除了主页之外，还有文件夹。新建站点时，FRONTPAGE都会在站点所在位置下新建两个文件夹，一个是“images”另一个是“_private”。我们在编辑站点时可以在“image”文件夹里放置站点用到的图片。“private”文件夹比较特殊，其中的文件对浏览者来说是隐含的，我们可以把一些不想让浏览者看到的网页文件放在这个文件夹里，比如：我们可以在这个文件夹里存放注册用户的个人信息。
尽管每一个站点都要有一个主页，不过创建站点时我们仍然可以从一个空站点开始：选择“文件”菜单的“新建”命令，单击“站点”选项，在“新建站点”对话框里，我们可以选择“空站点”图标来创建一个空站点。“新建站点”对话框中还有许多其他图标，这是FRONTPAGE提供的用来创建站点模板或向导。我们创建只有一个网页的站点或者创建空站点，都是从头开始来创建一个站点，这就好像盖房子一样，首先画图纸。然而，有许多的房子都具有相似的结构和用途，所以我们可以用一张图纸盖很多相似的房子，这样就节省了许多工作。
同样的，尽管站点的风格千差万别但是有许多站点的功能和结构都是一样的，如果我们从头开始建立站点的话，就要做许多重复劳动，这时，我们就可以使用模板或向导来建立站点。模板和向导的作用就好像盖房子的图纸一样，我们不必每次建立站点时都从头开始。我们单击“个人站点”图标，用它可以迅速创建一个个人站点，输入站点所在的位置，单击“确定”按钮，这样我们刚就创建了个人站点。个人站点模板已经为我们规划好了站点的目录和建立了相关的页面。现在我们点击一下“文件夹”按钮，双击index.htm图标，看，这就是我们的个人站点的主页。哎，好象有许多文字都不对，没关系，这些文字都是可以改变的，现在写的是文字的用途，比如“主题”文字就是用来写网站标题的地方，我们只要把它改为自己喜欢的标题就可以了。返回到“文件夹”模式，双击photo.htm。也可以把风景图片换成自己的照片，只要在新建站点的基础上进一步修改就可以做出自己的个人站点了。这不仅节省了许多力气，同时也给了初学者一个良好的出发点。
那么模板和向导有什么区别呢？我们安装软件时，一步步的用对话框提示我们完成安装过程的程序就是一个向导。在FRONTPAGE里，向导也是一种模板，不过它是一种特殊的模板，它会以对话框的形式辅助你完成站点的创建过程。
现在我们选择“文件”菜单的“新建”选项，单击“站点”命令，你看，FRONTPAGE提供了两个向导：公司展示向导、讨论站点向导，使用起来都很方便，你有兴趣也可以利用向导建立一个站点。
创建页面最简单的就是单击FRONTPAGE“常用”工具栏的“新建”按钮。它的右方有一个向下的小箭头，它是用来选择要新建什么，可以用“新建”按钮新建网页、站点、文件夹和任务。默认状态下是新建网页。
如果要新建网页，可以不用向下箭头键选择，而直接单击“新建”按钮。不过使用文件菜单的“新建”命令来新建网页能够有更大的选择。单击文件菜单的“新建”命令，选择“新建网页”，在“新建”对话框里，可以看到FRONTPAGE提供的许多网页模板，我们可以用这些模板来建立相应的网页。在右下角的预览框里可以看到选中模板的外观。选择“两栏正文”网页，这样就创建了一个新的分为两栏的网页了。然后点确定。使用模板可以不用总是从空白网页开始编辑，这样就省力很多。
网上几乎所以的网页都使用图片加以点缀，在网页中插入适当的图片，能够产生图文并茂的效果。
如果有一个图形，怎么把它放到网页上呢？
首先要看你的图形是什么格式的，也就是它扩展名是什么 只有扩展名为GIF和JPEG的图形文件才能成为我们的页面的一部分。因为这两种图形格式不仅广泛，而且有利于节省存贮空间。如果图形不是这种格式，使用了其它格式的图形文件，在保存网页时FRONTPAGE会提示做格式转换，FRONTPAGE可以自动进行格式转换。
现在可我们看看怎么插入图形 选择“插入”菜单的“图片”命令，单击“来自文件”按钮。
在默认情况下，FRONTPAGE认为你要插入的图片总是放在你建立的站点的目录或它的子目录下的。可以说,站点就是一个目录。我们把编辑的许多网页文件放在同一个目录下，我们称这个目录为站点的主目录。这些网页引用的图形一般也放在这个目录下。当然，我们也可以在这个目录下建立其他的子目录，再把所有的图形放在子目录里。所以搜索下拉列表只允许在主目录和主目录下的子目录进行选择。
如果要插入的图片不在主目录下, 在“选择文件”对话框中进行选择。选择好文件以后，单击“确定”按钮，回到“图形”对话框。单击“确定”按钮，图形就插入了。现在单击“常用”工具栏的“保存”按钮。在“另存为”对话框中输入新的web页文件的名字，单击“保存”按钮。出现了一个对话框, 因为我们刚才插入的文件不在站点内，现在FRONTPAGE要把它复制到站点内，可是使用什么名字，放在站点的哪个目录下呢，就要在这设置了，单击“改变文件夹”按钮，另外这儿还在需要时对图形的格式进行转换。单击“位置”按钮，在默认情况下，图形被保存在站点的主目录下，现在我们选择IMAGE目录，单击“确定”按钮。回到“嵌入式文件”窗口，再单击“确定”。这样，图形就保存在站点内了
我们还可以从INTERNET上插入一个图形。选择“插入”菜单的“图片”命令，在URL栏内输入图片的地址，单击“确定”按钮。由于是插入网上的图片，因此在插入图形以后，应该保存一下网页，使图形存到站点内。
您可能说,我不会画画，插入图片容易，可是编辑图片就不容易了。没关系，FRONTPAGE自己带有许多剪贴画，你可以把它们插入到自己的网页。选择“插入”菜单的“图片”命令，选择“剪贴画”。你看，各种剪贴画都分类放好了。你可以自由地选
择。不过，插入后别忘了保存网页，把剪贴画复制到站点目录下。
一般我们插入的图形总是和文本在一起的，所以调整图形和文本的对齐方式很重要。在默认情况下，图形自动与文本的底部对齐。这一个网页，由于默认的对齐效果，页面出现了大量的空白。这时就要调整图形的对齐属性。在图形上单击鼠标右键，选择“图片属性”，选择“外观”选项卡我们把对齐方式调整为“左对齐”。使用图形可以使网页更加丰富多彩，而且我们还可以用图形来建立超链接，使网页相互联系起来。怎么用图形来建立链接呢？ 其实图形超链接只要在建立超链接时选择图形就可以了。首先选中超链接的图形，单击箭头图形，单击“常用”工具栏“超链接”按钮，选择主页文件“页面
1.htm”，单击“确定”按钮.在普通模式中，按住CTRL键，单击箭头图形，就跳到主页页面了。
如果我们要在图片上加上文字，单击图形工具栏“文本”按钮，现在图形中就出现了一个文本框，输入：“机软件”按一下Esc键，取消文字编辑，就选中文字框了，调整文本框到合适的位置，单击页面其他区域，文字就添加成功了。
如果我要修改 单击一下要修改的文字，这时文字作为一个整体被选中了，再点一下文字，这时文本框里有光标闪烁，你可以编辑文本了，重新输入：“计算机硬件”，在页面其他区域单击。文字就修改完成了。
怎样使文字更丰富、活泼呢？一个简单的就是使用“格式”工具栏。
字体设置：选上文字，打开格式工具栏的“字体”下拉列表框，在里面选择相应的字体就可以了。如果浏览网页的人使用的计算机没有设置的字体？浏览器会用系统默认的字体代替你设置的字体。不过，使用常用字体是一个好习惯。
字号设置：在“格式”工具栏“字号”下拉列表框中选择相应字体就可以了
工具栏上的B、I、U图标的作用是：
按下B按钮，被选中的文字就会变为粗体
按下I按钮，被选中的文字就会变为斜体
按下u按钮，被选中的文字就会带下画线
字的颜色：单击“格式”工具栏“字体颜色”按钮旁的向下箭头，选择适当的颜色，字的颜色就改变了。
还可以对字体进行一些其他设置。选择“格式”菜单的“字体”命令，在这里我们还可以作进一步的设置。这里除了“格式”工具栏可以做的设置以外，还可以设置许多效果。“字符间距”选项卡：它是用来设置文字的间距的。单击“间距”下拉列表，可以选择字符的间距是普通、扩充还是紧缩的。选择扩充，这时预览框的文字间距就变大了。也可以调整间距大小来改变间距，输入10，文字的间距就更大了。
“定位”下拉列表：在FRONTPAGE中每一行都有一个底线，定位就是指文字相对于底线的距离。也就是把文字上下移动，现在选择“上移”，文字就向上移动了。预览框中的黑线就是行的底线。
设计好的页面，应该检查它在浏览器中是否显示正常。
方法是，一般只要切换到预览模式就可以了。单击“预览”选项卡，在这个预览模式下的显示和在浏览器中的显示是一样的。但这并不意味着我们就不必用浏览器来检查编辑的网页了。因为即使是同一个页面，可能在不同的浏览器中显示会不太一样。比如在INTERNET EXPLORER中是这样显示的，但是在NETSCAPE中又是那样显示的。所以，我们要在自己的机器上多装几个浏览器，用来检查网页的兼容性。
那么为什么不用不同的浏览器来检查呢？选择“文件”菜单的“在浏览器中预览”选项，在浏览器列表框中选择不同的浏览器。（以INTERNET EXPLORER 5.0为例）单击“确定”
按钮。就可以看到新建页面在浏览器中的效果了。
怎样才能自己做的网页相互联系起来呢?也就是说让别人点页面上的图形或文本就跳转到其他页面呢？
在网页里，我们把这种点击后会进行页面切换的网页界面元素叫超链接。先来看一下用文字来建立链接。
首先创建一个指向站点内其他网页的超链接。
选择“插入”菜单的“超链接”命令，在文件列表框内选择“页面1.htm”文件，注意在URL文本框中显示了该文件的地址。单击“确定”按钮.超链接就制作成功了。我们切换到预览模式（单击预览按钮），当我们把鼠标指向“主页”两字时鼠标变成手形，单击它，我们就切换到主页了。
那么为什么不在普通模式下试呢？：因为普通模式主要是用来编辑网页的，当我们在普通模式把鼠标指向“主页”两字时鼠标没有变成小手状，因此不能进行页面切换。不过如果按住CTRL键，鼠标就变成了小手状。这时单击就可以进行切换了。也就是说在普通模式中按住CTRL键才能激活超链接。
我们也可以将超链接指向其他站点的网页。选中作为超链接的文本，单击“常用”工具栏的“超链接”按钮，这和选择插入菜单的超链接命令是一样的。在“创建超链接”对话框里，在URL地址栏直接输入要连接的网页或网站的地址。如果不清楚要作超链接的地址，只要单击URL地址框后面的放大镜就可以用浏览器在INTERNET上查找要链接的网页，FRONTPAGE会自动记录你找到的地址。单击“确定”按钮就可以了。我们还可以改变已经设置好的超链接。首先确认是普通模式，在要改变的超链接下单击鼠标右键，选择“超链接属性”命令，输入新的URL地址就可以了。要想取消超链接，删除所有URL地址框里的就可以了。还有一种超链接，可以链接邮件。这样可以使你的网上朋友通过Email及时与你联系，这是一个网站站长和网友交流的重要手段。先选中要作为超链接的文本，一般文本就是你的邮箱地址，单击“超链接”按钮，单击“信封”按钮，输入你的邮箱地址，单击“确定”按钮，退出对话框，选择“确定”，这时超链接就建立好了。我们试一下，切换到预览模式，单击邮件链接。
这样我们就差不多完成了网页的制作步骤，最后可将它发布到Web服务器上。站点发布前还要对它进行检查工作，包括超链接，页面等。
【】
〈1〉乔春源，樊天岳等。信息技术。江苏技术出版社，2001年7月。
〈2〉李振格。Office入门与提高。清华大学出版社，2001年2月。
〈3〉王超锋。网页制作。人民邮电出版社，2001年10月。
第三篇：frontpage网页制作教案
Frontpage网页制作导学案
青州一中
刘志韩
文件——新建——网页 【学习目标】
1、包括网页制作基础知识
2、站点的规划和创建
3、网页文本和图片的处理、表格和框架的应用 【学习重难点】
1、建立一个主题网站
2、建设一个网站的步骤
3、网页的美化与特效的制作 【课前预习】
思考一下多媒体信息集成的方式有哪些？
【自主学习】
1、在www中，________是信息的主要组织和表现形式。
2、用________语言编写的网页实际上是一种文本文件，以.HTML或者.HTM为扩展名，可以使用任何文本处理软件（如记事本、word等）创作或修改。
3、制作网页常用的软件有_________________和_________________。
4、网页文件的扩展名有哪些？
5、网站开发的基本过程：
网站的规划——（）——（）——网站的发布与管理——网站的评价 【合作探究与指导】
三、网站的制作
1、创建站点
文件——新建——站点（选择或创建存储站点的文件夹）
2、网页的创建与编辑
3、插入对象 水平线 图片 字幕 悬停按钮
4、创建超级链接
在对象上右击选择超级链接——选择链接的目标。
5、使用表格
表格——插入（在制作网页的过程中用表格来布局网页）
6、在站点中查看网页的编辑及网页之间的链接情况。
分步骤操作练习题：
1、新建一个站点，只有一个空白网页的站点。
2、在首页上插入“我最喜爱的明星”，然后进行修饰。
3、再新建一个空白网页。重新命名为“周杰伦”。
4、插入图片“周杰伦”，文本“周杰伦”，排版设置后保存网页。
5、再建立一张空白的网页，重新命名为“刘亦菲”。
6、插入图片“刘亦菲”，文本“刘亦菲”，排版设置后保存网页。
7、分别在首页和“周杰伦”“刘亦菲”网页建立超级链接。操作练习： 【拓展任务】
以环保为主题，利用文件夹“环保”中的素材，制作一个5页的网站。
【当堂检测】
1.在网页制作中，我们经常用下列（）办法进行页面布局。
A.文字
B.表格
C.表单
D.图片 2.使用浏览器访问网站时，第一个被访问的网页称为（）。
A.网页
B.网站
C.HTML语言
D.主页 3.网页中可使我们进行选择性浏览的称为（）。
A.文字
B.图片
C.声音
D.超链接
4.在FrontPage2000中，要建立同一个网页内的链接点，让你点选某一链接后，迅速跳到同一网页内的另一个特定位置，应采用（）链接。
A.单元格
B.表单
C.书签
D.表格 5.FrontPage 2000中，下述关于图片与链接的关系表述正确的是（）。
A.图片不能建立链接
B.一张图片只能建立一个链接
C.图片要建立链接需经过处理
D.通过设置热区，一张图片可建立多个链接 6.在FrontPage 2000“网页”视图模式下，单击“普通”标签后，在出现的“普通”窗口中，可直接进行（）。
A.网页编排
B.观察网页在浏览器中的效果
C.编辑HTML代码
D.下载图片 7.网页制作的超文本标记语言称为（）。
A.VB语言
B.HTML语言
C.BASIC语言
D.ASCII 8.在Frontpage2000网页视图方式下，单击（）标签可直接编辑HTML代码？
A.普通
B.HTML
C.预览
D.编辑 9.在FrontPage 2000中，我们想要文字左右交替移动的效果，是下列（）效果。
A.字体
B.DHTML效果
C.字幕
D.悬停按钮 10.在FrontPage 2000表格单元格中，（）项目不能输入。
A.表格
B.图形
C.背景
D.声音
作业：以我们寒假生活为主题，从互联网上搜索的素材制作一个网站。
【阅读材料】
网站设计
建立一个网站就像盖一幢大楼一样，它是一个系统工程，有自己特定的工作流程，你只有遵循这个步骤，按部就班地一步步来，才能设计出一个满意的网站。
一、确定网站主题
网站主题就是你建立的网站所要包含的主要内容，一个网站必须要有一个明确的主题。特别是对于个人网站，必须要找准一个自己最感兴趣内容，做深、做透，办出自己的特色，这样才能给用户留下深刻的印象。
二、搜集材料
明确了网站的主题以后，你就要围绕主题开始搜集材料了。常言道：“巧妇难为无米之炊”。要想让自己的网站有血有肉，能够吸引住用户，你就要尽量搜集材料，搜集得材料越多，以后制作网站就越容易。材料既可以从图书、报纸、光盘、多媒体上得来，也可以从互联网上搜集，然后把搜集的材料去粗取精，去伪存真，作为自己制作网页的素材。
三、规划网站
网站设计得成功与否，很大程度上决定于设计者的规划水平，规划网站就像设计师设计大楼一样，图纸设计好了，才能建成一座漂亮的楼房。网站规划包含的内容很多，如网站的结构、栏目的设置、网站的风格、颜色搭配、版面布局、文字图片的运用等，你只有在制作网页之前把这些方面都考虑到了，才能在制作时驾轻就熟，胸有成竹。
四、选择合适的制作工具
网页制作涉及的工具比较多，首先就是网页制作工具了，目前大多数网民选用的都是所见即所得的编辑工具，这其中的优秀者当然是Dreamweaver和Frontpage了，如果是初学者，Frontpage2000是首选。除此之外，还有图片编辑工具，如Photoshop、Photoimpact等；动画制作工具，如Flash、Cool 3d、Gif Animator等；还有网页特效工具，如有声有色等，五、制作网页
材料有了，工具也选好了，下面就需要按照规划一步步地把自己的想法变成现实了，这是一个复杂而细致的过程，一定要按照先大后小、先简单后复杂来进行制作。
六、上传测试
网页制作完毕，最后要发布到Web服务器上，才能够让全世界的朋友观看，利用这些FTP工具，你可以很方便地把网站发布到自己申请的主页存放服务器上。网站上传以后，你要在浏览器中打开自己的网站，逐页逐个链接的进行测试，发现问题，及时修改，然后再上传测试。
七、推广宣传
网页做好之后，还要不断地进行宣传，这样才能让更多的朋友认识它，提高网站的访问率和知名度。推广的方法有很多，例如到搜索引擎上注册、与别的网站交换链接、加入广告链等。
八、维护更新
第四篇：《网页制作FrontPage》教案
《网页制作FrontPage》教案
教师：张爱平
第1、2课时 网页设计概述
【教学内容】
讲解网页设计的相关术语及网站制作的基本流程。【教学目的】
使学生对网站及网页有一定的认识，激发学生学习网页设计的兴趣。【教学重点】
网页设计中的若干术语。【教学难点】
理解网页设计中的若干术语。【教学方式】
讲授式、讨论式、案例分析式。【教学参考】
1、《网页设计与制作》杨尚森 曲宏山 贾文峰等著 电子工业出版社。
2、《Internet 网页工场》Wittime工作室 重庆出版社。
3、《WEB网站设计》Joel Sklar著 高等教育出版社。
4、《HTML网页制作教程》材义语编著 铁道出版社。【新课内容】 1.1 中超级链接标志的难点。
第7、8课时HTML表格、表单与框架标志
【教学内容】
讲解HTML中制作表格、表单与框架的标志。【教学目的】
使学生掌握简单表格、表单与框架的制作。【教学重点】
* 表格中单元格的合并以及表格嵌套和叠加操作。* 框架的嵌套使用。* 表单元素标志与属性。【教学难点】
* 理解表格属性rowspan与colspan的含义以及表格嵌套实现的基本思想。
* 理解框架属性name、target的意义。* 理解表单中相应元素对应标志及属性的含义。【教学方式】 案例分析式、项目教学 【教学参考】
1、《网页设计与制作》杨尚森 曲宏山 贾文峰等著 电子工业出版社。
2、《WEB网站设计》Joel Sklar著 高等教育出版社。
3、《HTML网页制作教程》材义语编著 铁道出版社。【新课内容】 2.5 插入表格
2.5.1在网页中插入表格
表格的基本构成元素：表头，单元格，列，行
| 第一行第一列 | 第一行第二列 |
| 第二行第一列 | 第二行第二列 |
表单在Web网页中用来给访问者填写信息，从而能获得用户信息，使网页具有交互的功能。2.6.1创建表单
2.6.2用定义用户交互（1）单行文本输入区（2）密码输入区（3）单选框（4）复选框（5）隐藏区域（6）按钮
2.6.3定义下拉式菜单
你选修的课程：
2.6.4定义多行文字输入区域 请输入你的详细介绍：
2.7 框架窗口
框架把窗口划分成几个子窗口，各个子窗口可以调入各自的HTML文档，最后形成充满整个窗口的网页。2.7.1框架的定义 2.7.2框架属性设置