第七章 FrontPage网页制作入门

FrontPage2000是一个创建站点和设计网页的优秀软件，是目前最常用的一种所见即所得的网页制作与站点管理工具，它能将网页界面自动翻译成对应的HTML标记语言，故不需要用户掌握很深的网页制作技术，就可以进行添加表格、图像、声音、动画和电影等的编辑，制作出精美的网页。它作为系列套装软件Office2000中的一个应用程序，不仅保留了“所见即所得”的特点，而且操作极为简便。使用FrontPage2000制作网页，就如同使用Word进行文字处理一样容易。在本章中，我们将介绍中文FrontPage2000的基本操作。

7.1 创建站点

7.1.1 FrontPage2000的界面

FrontPage2000的启动与Office2000其他组件的启动方法相同。图7-1是 FrontPage 2000窗口界面。

图7-1  FrontPage 2000窗口界面

标题栏显示当前打开的站点名及其位置。菜单栏和工具栏的使用方法与Office2000其他组件大致相同。视图栏提供的各个视图是为了管理站点的服务的，通过切换到不同的视图，可以更好的了解站点的状况。

窗口主体部分为网页编辑区，该区域占据了大部分的屏幕空间，所有网页都是在这里进行编辑制作的。在编辑区左下方有3个选项卡，用于切换网页文件的显示模式。“普通”模式用于可视化地编辑页面；“HTML”模式用于显示和编辑HTML源文件；“预览”模式用于查看网页在浏览器中的实际显示效果。

7.1.2 使用“个人站点”模板建立个人站点

站点是指为表达一个特定的内容而设计、并存储在Web服务器上或硬盘上的一系列网页、图形、文本、声音、视频等多媒体文件、站点可能还包括Frontpage为实现特殊功能所需要的用户看不见的文件。FrontPage 2000提供了一系列模板和向导创建各种类型站点。

创建个人站点的步骤是：

1、单击窗口“文件”→“新建”→“站点”命令，弹出如图7-2所示的“新建”对话框；选中“个人站点”；在“指定新站点的位置”框中指定新建站点在你的机器硬盘上的位置和站点名

图7-2 选择要建立站点类型和位置

2、确定后，一个简单的个人站点就建立了。新站点中包含5个网页文件、3幅图片和2个文件夹。一般网站都有两个标准的文件夹：Private文件夹和Images文件夹。双击Index.htm可以打开新站点的主页，如图7-3所示。

图7-3 新建的个人站点

根据实际情况，可以对其内容做相应的修改和扩充。

7.2 视图、导航栏与共享边框

7.2.1 FrontPage 2000的视图

1、“网页”视图：是FrontPage 提供的对网页编辑的方式，在这种视图下，可以对网页的内容进行编辑和修改，但无法了解网站的整体结构。

2、“文件夹”视图：是用来查看网站中的文件夹的分布情况。在这个视图中，可以方便地完成对文件的操作（如重命名、移动文件等）、类似资源管理器。

3、“报表”视图：是FrontPage 2000新增加的一种视图，实际上就是把许多视图以报表的形式列在一张表里，使站点的管理者能够更加方便的管理网站。

4、“导航”视图：FrontPage 自动将网站中的各个网页以组织结构图的形式列在“导航”视图里。表示各网页之间的层次关系。

5、“超链接”视图：是详细显示各个文件之间超链接关系的一种视图。一般以一个网页文件为中心，发散地表示出链接的关系。

6、“任务”视图：用来维护一个动态项目表的视图。

7.2.2 导航视图

打开新建个人站点，单击“查看”→“导航”，或单击视图栏“导航“按钮。系统将切换到导航视图方式，如图7-4所示。

图7-4 认识导航视图

导航视图中用矩形框表示网页，矩形框内显示的文字是网页的标题。含有下层的网页称为父网页，其下层的网页称为子网页。同在一个父层下的子网页称为兄弟网页。

1、移动网页

选中需要移动的网页，将其在导航视图中拖到合适的位置上。这样可以方便改变网页间的层次关系和排列顺序。

2、添加网页

如果要添加一个顶层网页，只要在空白地方单击鼠标右键，在弹出的快捷菜单中选择“新建顶层网页”即可。

3、修改网页标题

选中要修改标题的网页，单击鼠标右键，在弹出的菜单中选择“重命名”即可。

4、删除网页

选中网页文件，按键盘上的Delete键或者用右键快捷菜单的“删除”命令。在弹出对话框中选择从所有导航栏删除还是从站点删除，如果选择“从所有导航栏中删除”，则站点中仍有此网页文件；如果选择“从站点中删除此网页”，则当前网页彻底被删除。

7.2.3 导航栏与共享边框

导航栏是根据导航视图中网站结构自动建立的，由一组按钮或文本组成的超链接构成。创建导航栏的目的是为了用户在每一个网页上都能很方便的访问到其他相关的网页上。

共享边框是站点中一个或多个网页的公共区域，其包含的内容将在该共享边框的每一个网页中出现，可以在网页的顶部、左边、右边、底部创建共享边框。通常把导航栏插入到网页顶部和左边的共享边框中。

只有在同一个站点中的导航视图里有联系的网页才能显示在导航栏中，独立的网页无法显示。

插入共享边框的步骤

1、单击“格式”→“共享边框”或使用右键快捷菜单的“共享边框”命令。

2、在出现的“共享边框”对话框中，单击“所有网页”单选钮，然后选中“上”、“下”复选框及“包含导航按钮”，如图7-5所示。单击确定，完成设置。

图7-5 设置“共享边框”对话框

7.3 网页的基本操作

7.3.1 网页的创建、打开、保存、打印和关闭

网页文件的后缀一般都是.htm或.html。其操作基本类似其他Office软件。

1、创建新网页

选择“文件”→“新建”→“网页”，打开“新建”对话框，在“常规”选项卡中可以看到FrontPage2000提供了26种网页的模板，如图7-6所示，选择需要的模板，确定即可。如果单击常用工具栏“新建网页”按钮，则FrontPage2000将自动生成一张普通网页。

图7-6 “新建”网页对话框

2、打开网页

使用“文件”→“打开”→“网页”命令，或单击常用工具栏“打开”按钮，然后在“打开文件”对话框中选中要打开的网页文件即可。要打开的网页是正在当前编辑的站点中，则在“文件夹”、“导航”或“超链接”等任意视图下，双击该网页的图标或文件名即可打开它。

3、保存网页

直接单击常用工具栏上的“保存文件”按钮，或使用菜单命令即可。

4、打印网页

使用“文件”→“打印”命令，也可直接单击常用工具栏“打印”按钮，可将网页外观打印出来

5、关闭网页

使用“文件” →“关闭”命令，或单击网页编辑窗口右上角的网页关闭按钮即可。使用“文件” →“关闭站点”命令，可以关闭当前的站点和站点里所有的网页。

7.3.2 网页的主题

主题是一种预先设计的元素与色彩方案，使用主题将使站点的所有页面和谐统一。FrontPage提供了大量风格各异的主题，通过主题可以方便地改变整个站点的面貌。设置主题的方案如下：

1、选择菜单栏“格式” →“主题”，打开“主题”对话框，如图7-7所示。

2、点击列表框选择一种主题，并选择将主题应用到所有网页还是所选的网页。

3、选择是否应用主题颜色、动态图形、背景图片和CSS；CSS即级联样式表，可以使用CSS统一修改任何HTML样式标签如标题、段落文本的外观，或者自定义新的样式。

4、点击“确定”完成操作。

图7-7 “主题”对话框

7.3.3 网页横幅

网页横幅位于网页顶端，是一条可以自己选定的横幅标志，类似与广告牌。网页横幅可以是图片或文本形式。双击网页横幅可以打开“网页横幅属性”对话框，如图7-8所示。在该对话框中可以修改网页横幅的属性和文本。网页横幅的图片由所选择的主题提供。如果删除了主题，网页横幅就只能以“文本”形式体现。

图7-8 “网页横幅属性”对话框

7.3.3 网页文本的编辑和格式化

在FrontPage2000中网页文本的编辑和格式化与Word操作非常相似，相同部分这里不再赘述。我们来看一些FrontPage2000的自身特色的内容。

1、项目符号和编号

如果网页中应用了主题，为使网站风格保持一致，在使用项目符号时，可以使用主题中带有图片。单击“格式” →“项目符号和编号”命令，在“图片项目符号”选项卡中选中“使用当前主题中的图片”项，这时主题中自带的图片就成为了网页文字的项目符号。

2、加入注释信息

为方便管理和维护网站，可以加入注释信息。注释信息会自动以不同颜色显示，并会自动在注释内容的最前面增加注释字样。使用“插入” →“注释”命令，可以完成该操作。如图7-9所示。

图7-9 “注释”对话框

3、在网页中插入水平线

网页中适当插入水平线可以分隔网页上的内容，使用“插入”菜单可以完成操作。

7.4 网页中的多媒体

7.4.1 网页图片和图片工具栏

网页中一般都大量用到图片。图片主要来自外部图像文件和Office2000提供的剪贴画库。插入图片方法是：

1、鼠标定位在需插入图片位置

2、单击“插入” →“图片” →“来自文件”

3、选择图片来源，如图7-10所示。

图7-10 选择插入图片的来源

4、选择完后，确定即可将选定的图片插入到当前网页。

FrontPage2000提供功能丰富的图片工具栏。当选中插入的图片，或使用“查看” →“工具栏” →“图片”命令，可以调出图片工具栏，如图7-11所示。

图7-11 图片工具栏

7.4.2 网页中应用声音、动画和视频

FrontPage2000支持的声音文件主要是PC上通用的WAV和MIDI音乐。一般网页中添加的主要是背景音乐。其操作步骤如下：

1、将要添加背景音乐的网页文件打开。

2、单击“文件” →“属性”命令，或在网页上使用右键快捷菜单的“网页属性”命令。

3、单击“常规”选项卡中的“浏览”，打开对话框，如图7-12所示。

图7-12 选择背景音乐的来源

4、选择音乐来源后选择添加的背景音乐，单击“确定”按钮即可。

应用动画和视频采用“插入”→“图片” →“视频”命令就可以方便的插入动画和视频文件。

在“普通”网页编辑模式下听不到音乐，需单击“预览”选项卡，在预览模式下才能得到网页的最终浏览结果。

7.5 超级链接的使用

超链接是建立网站过程中所使用的最重要的技术之一，它将原本互相分离的各个网页相互连接，是整个Web站点的结构基础。一般可以把链接分为文本超链接和图片超链接两类。

7.5.1 创建文本超链接

网页上绝大多数超链接都是文本超链接，创建了文本超链接后将给文本加下划线，并以一种不同于其他文字的颜色来显示。创建文本超链接的步骤是：

1、选中文本，单击“插入” →“超链接”或鼠标右键快捷菜单的“超链接”命令。

2、选定超链接方式（共5种），如图7-13所示。找到链接目标，确定即可。

图7-13 创建文本和图片的超链接

7.5.2 创建图片超链接

创建图片超链接与创建文本超链接的方法相同，同样在如图7-13所示对话框操作。为图片建立热区也是创建图片超链接的一种方式，如图7-14所示。

图7-14 为图片创建热区

7.5.3 书签的使用

如果网页中内容较多，可以使用书签进行定位和分层次，再建立指向书签的超链接。这样方便浏览者有选择的阅读网页内容。其方法如下：

1、选中要文本，单击“插入” →“书签”命令。

2、弹出“书签”对话框，填写书签名称，确定。出现虚线的书签标记。如图7-15所示。

3、重复上述步骤，建立其他书签。

4、在网页最上方创建书签超链接源，右击文本。选择“超链接”，打开对话框。

5、单击“书签”列表的下拉箭头，打开书签列表，选择要链接到的书签列表项。

6、单击“确定”，重复操作直到创建好所有书签链接。

图7-15 书签标记

7.6 网页中表格的使用

使用表格可以设计出布局合理、结构协调、美观匀称的网页。

7.6.1 创建表格

在FrontPage2000中提供了方便快捷的表格操作，其操作命令以及方式与Word相似。如图7-16所示。

图7-16 网页中的表格

7.6.2 表格的编辑

1、表格属性

将鼠标移动到表格内任意位置，右键单击，在快捷菜单中选择“表格属性”，打开对话框，如图7-17所示。在该对话框对表格进行统一设置。

图7-17 表格属性对话框

2、插入表格的标题

将鼠标移动到表格中任意一个单元格，单击“表格” →“插入” →“标题”命令，这时在表格顶端自动空出一行，在此输入标题即可。

3、单元格属性

前面所述的“表格属性”是针对整张表格的设置，“单元格属性”则针对不同的单元格来进行属性设置。注意其区别。

选择需要设置的单元格，单击鼠标右键，在出现的快捷菜单中选择“单元格属性”命令，可打开“单元格属性”对话框。如图7-18所示。

图7-18 单元格属性对话框

7.7 网页中表单的使用

表单是联系Web浏览器和Web服务器的工具。表单中包含允许用户输入和选择信息的称为表单域，是表单上基本组成元素，如图7-19所示为典型表单操作。

使用“插入” →“表单” →选择表单域类型可完成表单域的插入。

图7-19 典型表单操作

完成表单域插入后，在相应对象上双击来设置其属性。如图7-20所示。

图7-20 设置单行文本框属性

7.8 网页中框架的使用

FrontPage2000中的框架网页是一种能在一个浏览器窗口包含多个子窗口的网页结构。它将网页划分为几个区域，每个区域都是一个单独的页面。框架网页并不是一个真正意义的网页，它主要记录在框架网页中所包含的框架数量以及拆分方式等信息。

7.8.1 创建与设置框架网页

单击“文件” →“新建” →“网页” →“框架网页”，如图7-21所示。

图7-21 创建框架网页

FrontPage2000提供了10类框架模板，挑选合适模板后确定，打开该框架网页。如图7-22所示。

图7-22 标题、页脚和目录框架网页

如果需要在其中使用模板，可以选中框架区域（该区域边框变成蓝色），单击“文件” →“新建” →“网页”，选择需要的模板。如图7-23所示。

图7-23 在框架中新建模板网页

7.8.2 保存框架网页

单击“文件” →“保存”命令，或直接单击常用工具栏上“保存”按钮，均可保存框架网页。由于框架网页中每个区域就是一个网页，因此需要分别保存，在对话框右边预览框内有保存网页在框架中的位置图，最后保存的是整个框架结构的文件。如图7-24所示。

图7-24 保存框架结构文件

7.9 动态网页

7.9.1 使用字幕

字幕是指网页中水平滚动的文字，类似于电子广告的效果。

定位光标，单击“插入” →“组件” →“字幕”命令，打开“字幕属性”对话框，如图7-25所示。用户可以在文本栏中输入文字，如“谢谢你的光临！”并对其设置其它属性，如运动的速度、方向、背景颜色等。

图7-25 设置字幕

7.9.2 悬停按钮

悬停按钮是一个具有动感效果的按钮，当鼠标移动到其上面时，该按钮的颜色与形状发生变化，产生动画效果。单击该按钮将打开与之相链接的目标文件。

定位光标，单击“插入” →“组件” →“悬停按钮”命令，打开对话框，如图7-26所示。可以利用不同按钮对其进行相应的设置。

图7-26 设置悬停按钮

7.10 发布站点

站点发布是指将已经设计好的站点传送到Internet上的一个Web服务器上，这样Internet上的用户才能够访问。使用Frontpage2000可以直接发布和更新站点。其步骤是：

1、打开需要发布的站点，单击“文件” →“发布站点”命令。

2、如图7-27所示。在“指定发布站点的位置”列表框中可以直接键入Web服务器的URL地址，也可以单击“浏览”按钮选择一个地址；然后选择发布网页的内容，设置完毕后，单击“发布”按钮，Frontpage2000立即开始发布和更新站点。

图7-27 “发布站点”对话框