网页制作入门(frontpage2003教材) (4)_frontpage做网页教程

网页制作入门(frontpage2003教材) (4)由刀豆文库小编整理，希望给你工作、学习、生活带来方便，猜你可能喜欢“frontpage做网页教程”。

网页制作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，然后开始制作框架 网页。

④为网页设置过渡效果，将会给浏览者提供美妙且富有情趣的 视觉环境。

⑤制作完成后，检测网站结构、内容、超链接、浏览速度，并 在本地计算机上发布测试.⑥在局域网或者因特网上发布网站，并且经常对站点迸行维护

和更新.二、检查、完善“可爱的中国”网站