第五章 计算机网络与INTERNET应用

5．4网页制作与网站建设5．4．1概述FrontPage 2003是Microsoft Office 2003家族的成员之一，它是一个具有“所见即所得”的“傻瓜”型网页制作软件。

使用FrontPage 2003制作网页时，并不要求用户了解和掌握HTML, Javascript, Vbscript等网页开发语言，用户可将精力更多地集中到网页的构思和创意上，即使是非专业人员也能轻松地编辑出专业水平的网页，而对于专业Web开发人员来讲，可以大大减少代码编辑工作量，提高工作效率。

FrontPage 2003不仅可以用来制作网页，用户还可以使用它来建设和维护整个网站，更简单地检测、更新你的网站。

1．FrontPage 2003的主界面单击“开始”→“所有程序”→“Microsoft Office”→“Microsoft Office FrontPage 2003”命令，启动中文版FrontPage 2003.其工作窗口如图5-7所示。

图5-7 FrontPage 2003工作窗口中文版FrontPage 2003的工作窗口主要由标题栏、菜单栏、工具栏、状态栏、标记栏、视图栏和工作区组成。

下面分别介绍各组成部分的功能。

（1）标题栏标题栏位于FrontPage 2003工作窗口最上面，它是由控制按钮、窗口标示与窗口按钮三部分组成的。

拖动标题栏可移动整个窗口，双击标题栏可在窗口最大化和恢复原有大小之间切换。

（2）菜单栏菜单栏位于标题栏的下方，它以菜单命令的形式为用户提供各种编辑网页和管理网页的功能，其中包括“文件”、“编辑”、“视图”、“插入”、“格式”、“工具”、“表格”、“数据”、“框架”、“窗口”和“帮助”等11个菜单，涵盖了Web站点管理、网页制作的所有菜单命令。

（3）工具栏工具栏位于菜单栏的下方，它以工具按钮的形式为用户提供主要的编辑和管理功能。

最初启动中文版FrontPage 2003时有两个工具栏，即“常用”工具栏和“格式”工具栏，它们是中文版FrontPage 2003最主要的两个工具栏，打开“视图”菜单下的“工具栏”选项可以看到所有的工具栏选项，它们分别是：常用、格式、DHTML效果、XML视图、表格、代码视图、定位、动态WEB模板、绘图、绘图画布、任务窗格、图片、样式、艺术字、自定义，用户可根据需要选择需要显示的工具栏。

（4）状态栏状态栏位于窗口的最底端。

用于显示FrontPage 2003当前所处的各种状态。

（5）标记栏标记栏是中文版FrontPage 2003新增的窗口元素，如图5-8所示。

当选择了网页中的某个对象时，在该栏中自动显示出相关的HTML标记，如果用户对HTML比较了解的话，还可以直接在该栏中修改HTML标记。

图5－8 HTML标记栏（6）视图栏视图栏位于窗口的下方，当选择一个网页时，显示“设计”、“拆分”、“代码”、“预览”等视图模式。

而当选择网站时，则显示“文件夹”、“远程网站”、“报表”、“导航”、“超链接”、“任务”等视图模式。

不同的模式对应着不同的工作方式。

（7）工作区工作区位于标记栏的下方，它是管理站点、编辑网页的主要场所。

用户在视图栏中选择不同的视图模式，则可以使用不同的工作方式。

例如，在网页编辑中，选择“设计”视图模式，可以在工作区中直接输入文本或插入对象；而选择“代码”视图模式，则在工作区中只能进行HTMIL代码的编写。

2．FrontPage 2003网站视图模式当新建或打开网站时，“视图栏”显示“文件夹”、“远程网站”、“报表”、“导航”、“超链接”、“任务”六种视图模式，如图5－9所示。

下面分别介绍各网站视图模式的功能。

图5－9 网站视图模式（1）“文件夹”视图“文件夹”视图的功能是通过创建内部文件夹，对诸多网页进行组筛选、归类，达到使站点组织结构清晰、网页制作方便的目的，如图5-10所示。

一个结构清晰、框架明朗的站点会更受网络漫游者的欢迎。

站点内的Private文件夹具有一定的特殊性，其中的网页文件夹对于网络漫游者是隐藏的，这样可以将有关个人的信息存放在Private文件夹中，既安全又方便。

图5-10 “文件夹”视图模式（2）“远程网站”视图“远程网站”视图用于站点或站点内文件的发布。

用户单击视图栏中的“远程网站”按钮即可进入“远程网站”视图模式，选定远程网站的位置之后，会弹出如图5－11所示的窗格。

用户在该窗格中可以直接将当前站点中的文件或文件夹拖动到远程站点中进行发布，从而大大简化了发布的工作。

图5－11 “远程网站”视图模式（3）“报表”视图“报表”视图主要用于查看站点的各种情况，如文件内容、更新链接、文件列表及变化情况等。

“报表”视图如图5-12所示。

在“报表”视图模式中，用户如果想查看一些具体的信息，例如，如果查看使用率摘要，只要单击“视图”→“报表”→“使用率”→“使用率摘要”命令，即可在“报表”视图中查看相关内容。

图5－12 “报表”视图模式（4）“导航”视图用户通过“导航”视图可以清晰地看到当前站点的主页和其他网页的链接关系，也可以设置站点的导航结构或添加和删除网页。

单击视图栏中的“导航”按钮，即可切换到站点的“导航”视图模式，如图5-13所示。

“导航”视图是由数据导航图框组成的，每个图框都与站点内的网页文件相对应。

如果导航图框包含下级网页，那么在图框的名称下将显示“＋”或“－”，其中“＋”表示图框处于折叠状态，“－”表示图框处于展开状态，单击这两个符号，可切换图框的折叠与展开状态。

拖动“导航”视图中的图框，可以改变站点网页之间的逻辑关系。

用鼠标右键单击图框，将在网页工作区中弹出一个快捷菜单，在其中选择“新建网页”选项，可在鼠标单击处添加新的图框。

如果选择快捷菜单中的“外部链接”选项，将改变图框所代表的网页的链接目标。

图5－13 “导航”视图模式（5）“超链接”视图“超链接”视图用于管理站点中各网页的超链接。

单击视图栏中的“超链接”按钮，即可切换到站点的“超链接”视图模式，如图5-14所示。

在该视图模式中，单击文件夹列表中的一个网页文件，即可在窗口中显示所选网页的“超链接”视图，从而清楚地看到该网页与其他网页之间的超链接情况。

图中当前网页放在中间，箭头代表链接的方向，由超链接指向该网页的其他网页放在左边，该网页链接到的其他网页或站点放在右边。

图5－14 “超链接”视图模式（6）“任务”视图“任务”视图主要用来创建和管理任务。

在视图中列出了当前站点中的“任务”，即当前站点中尚未完成的项目。

要切换到“任务”视图模式，单击视图栏中的“任务”按钮即可。

对于较大的站点来说，它的创建、维护和更新不是短时间内可以完成的，也不是由一个人可以实现的。

在此模式中，站点的主要设计和管理人员可将网页制作、内容更改等工作以任务的形式列在任务列表中。

“任务”视图能跟踪有哪些任务是需要被完成的，这些任务分配给了谁，并且能够迅速地查看任务的状态、说明和优先级。

这样维护人员就可以根据当前的工作进程，使所有人员协调一致、高效地工作。

3．FrontPage 2003 网页视图模式当新建或打开一个网页时，“视图栏”显示“设计”、“拆分”、“代码”、“预览”四种视图模式。

见图5－15所示。

用户可以在这几种视图之间进行切换，并根据需要调整或查看网页。

（1）“设计”视图“设计”视图是用户打开网页首先进入的视图，用户可以在其中输入文本、插入图片、插入对象和插入表格等，也可以任意进行修改，如图5－16所示。

图5－16 “设计”视图模式（2）“代码”视图“代码”视图可通过单击视图栏中的“代码”按钮进入，用户在“设计”视图中进行的操作都被编辑器自动转化成HTML代码，如果用户对HTML语言熟悉的话，可以在该视图中进行网页的设计，如图5－17所示。

图5－17 “代码”视图模式（3）“拆分”视图“拆分”视图可通过单击视图栏中的“拆分”按钮进入，它是中文版FrontPage 2003的新增视图模式，其功能就是将工作区拆分成上、下两个部分，如图5－18所示。

上半部分是代码区，下半部分是设计区。

无论在哪个区域中进行修改，另一个区域中都会做出相应的改动。

图5－18 “拆分”视图模式（4）“预览”视图“预览”视图可通过单击视图栏中的“预览”按钮进入，如图5－19所示。

在该视图模式中用户可以对设计出来的网页进行整体浏览。

图5－19 “预览”视图模式4．学习FrontPage 2003中常用到的术语（1）网页。

网页是全球广域网上的基本文档，用HTML（超文本标记语言）书写。

网页可以是站点的一部分，也可以独立存在。

然而，只有在你使用站点时，Microsoft FrontPage的许多特性才有效。

例如，允许站点访问者导航到站点中其他网页的导航栏，如果处在单个网页的环境中将毫无意义。

（2）HTML。

一个HTML网页包含了HTML标记符，这些标记符是一些嵌入式命令，提供网页的结构、外观和内容等信息。

Web浏览器利用这些信息来决定如何显示网页。

您无需懂得HTML就可以使用Microsoft FrontPage,可以像在字处理程序中一样编辑网页。

当您输入文本、设置文本格式以及添加图形、表格等网页元素时，FrontPage会在后台添加相应的HTML标记符。

您的网页就会以如同将在Web浏览器中出现一般，被显示出来。

然而，你也可以在网页上将HTML标记符显示出来；而且，如果您熟悉HTML,也可以自己编辑书写HTML标记符。

（3）超链接。

超链接是从一个网页指向另一个目的端的链接，比如说指向另一个网页或者相同网页上的不同位置。

这个目的端通常是另一个网页，但它也可以是一幅图片、一个电子邮件地址、一个文件（如多媒体文件或者Microsoft Office文档）或者一个程序。

超链接可以是文本或者图片。

5．4．2 FrontPage 2003的基本操作1．建立站点在制作网页之前，用户首先要创建站点，这是网页制作的前提。

以创建个人站点为例，其操作步骤为：（1）单击“文件”→“新建”命令，弹出“新建”任务窗格，在“新建网站”选项区中单击“其他网站模板”超链接，弹出“网站模板”对话框，如图5－20所示。

图5－20 “网站模板”对话框（2）在图5－20对话框的“常规”选项卡中选择“个人网站”模板，并在“选项”选项区中指定新网站的位置。

（3）单击“确定”按钮，使用模板创建的个人站点如图5－21所示（在“导航”视图模式下）。

图5－21 新建的个人站点2．创建网页（1)单击“文件”→“新建”命令，弹出“新建”任务窗格，在“新建网页”选项区中单击“其他网页模板”超链接。

(2)在弹出的“网页模板”对话框中列出了许多网页的模板，这些网页模板基本上包括了日常应用的网页形式。

当选中一个模板时，如选择“意见反馈表单”选项，则在右面的“说明”选项区中显示了这个模板的功能说明，在“预览”选项区中可以预览这个模板的大致样式，如图5-22所示。