第九章网页制作

《第九章网页制作》由会员分享，可在线阅读，更多相关《第九章网页制作（101页珍藏版）》请在金锄头文库上搜索。

1、第第 九九 章章 网网 页页 制制 作作 目 录上一页下一页 结 束第九章 网页制作9.1 HTML简介简介 9.2 FrontPage概述概述 9.3网页制作网页制作 9.4网页布局网页布局 9.5创建表单页面创建表单页面 9.6网页的发布网页的发布 8/30/20241计算机文化基础 目 录上一页下一页 结 束9.1 HTML简介9.1.1 HTML语言概述语言概述9.1.2 HTML语言的基本语法语言的基本语法返 回8/30/20242计算机文化基础 目 录上一页下一页 结 束9.1.1 HTML语言概述 HTMLHTML即即HyperTextHyperText Markup Marku

2、p Language(Language(超超文文本本标标记记语语言言) ) 的的缩缩写写。它它使使用用一一些些约约定定的的标标记记（TagTag）对对文文本本进进行行标标注注，定定义义网网页页的的数数据据格格式式，描描述述WebWeb页页中中的的信信息息，控控制制文文本本的的显显示。示。 我我们们把把用用HTMLHTML语语言言编编写写的的文文件件称称为为HTMLHTML文文件件（网网页页）。它它通通常常被被存存储储在在WebWeb服服务务器器上上，客客户户端端通通过过浏浏览览器器向向WebWeb服服务务器器发发出出请请求求，服服务务器器响响应应请请求求并并将将HTMLHTML文文件件发发送送

3、给给浏浏览览器器，然然后后由由浏浏览览器器对对文文件件中中的的标标记记作作出出相相应应的的解解释释，以以页页面面的的形形式式呈呈现现在在用用户户屏屏幕幕上上。因因此此，我我们们又又把把HTMLHTML文文档档在在WebWeb浏浏览览器中的这种表现形式称为器中的这种表现形式称为WebWeb页面页面 ( (Web Page)Web Page)。 HTML HTML语言是一种标记语言，简单易学。用语言是一种标记语言，简单易学。用HTMLHTML语言编写语言编写的网页实际上是一种文本文件，它以的网页实际上是一种文本文件，它以. .htmhtm或或. .htmlhtml为扩展名，为扩展名，我们可以使用任

4、何文本处理软件（例如：记事本）编写。我们可以使用任何文本处理软件（例如：记事本）编写。 8/30/20243计算机文化基础 目 录上一页下一页 结 束HTML语言概述 HTMLHTML语语言言是是由由世世界界性性的的标标准准化化组组织织W3CW3C（World World Wide Wide Web Web ConsortiumConsortium）制制定定的的。通通过过浏浏览览http:/www.w3.orghttp:/www.w3.org可可以以了了解到解到HTMLHTML标准的最新动态。标准的最新动态。下面介绍下面介绍HTMLHTML文件的基本构成和文件的基本构成和HTMLHTML文件的

5、层次结构。文件的层次结构。 1. 1. HTMLHTML文件的基本构成文件的基本构成 InternetInternet中中的的每每一一个个HTMLHTML文文件件都都包包括括文文本本内内容容和和HTMLHTML标标记记两两部部分分。其其中中，HTMLHTML标标记记负负责责控控制制文文本本显显示示的的外外观观和和版版式式，并并为为浏浏览览器器指指定定各各种种链链接接的的图图像像、声声音音和和其其他他对对象象的的位位置置。多数多数HTMLHTML标记的书写格式如下：标记的书写格式如下： 文本内容文本内容/ 标标记记名名写写在在“ “”内内。多多数数HTMLHTML标标记记同同时时具具有有起起始始

6、和和结结束束标标记记，并并且且成成对对出出现现，但但也也有有些些HTMLHTML标标记记没没有有结结束束标标记记。另外，另外，HTMLHTML标记不区分大小写。标记不区分大小写。8/30/20244计算机文化基础 目 录上一页下一页 结 束HTML语言概述 某某些些HTMLHTML标标记记还还具具有有一一些些属属性性。这这些些属属性性指指定定对对象象的的特特性性，如如背背景景颜颜色色、文文本本字字体体大大小小、对对齐齐方方式式等等。属属性性一一般般放放在在“开开始始标标记记”中中，格式如下：格式如下： 2 文本内文本内容容 / 其中标记名和属性之间用空格分隔。如果标记其中标记名和属性之间用空格

7、分隔。如果标记有多种属性，属性之间也要用空格分开。有多种属性，属性之间也要用空格分开。 8/30/20245计算机文化基础 目 录上一页下一页 结 束HTML语言概述2. 2. HTMLHTML网页的结构网页的结构 现现在在我我们们先先看看一一个个简简单单的的HTMLHTML文文件件，从从中中体体会会用用HTMLHTML语言编写网页时的层次结构。语言编写网页时的层次结构。【例【例9-19-1】用】用HTMLHTML语言编写一个简单的网页。语言编写一个简单的网页。 html我的第一个我的第一个WebWeb页页/title欢迎进入欢迎进入HTMLHTML世界！世界！/h1这这里里我我们们首首先先介

8、介绍绍HTMLHTML语语言言的的基基本本知知识识和和语语法法。然然后后，讲授如何使用讲授如何使用HTMLHTML语言编写您的语言编写您的WebWeb页面。页面。/p8/30/20246计算机文化基础 目 录上一页下一页 结 束HTML语言概述 将将上上述述代代码码用用文文本本编编辑辑器器编编辑辑并并保保存存为为一一个个扩扩展展名名为为. .htmhtm的的文文件件，双双击击该该文文件件图图标标，在浏览器中看到如下图所示的结果。在浏览器中看到如下图所示的结果。图9-18/30/20247计算机文化基础 目 录上一页下一页 结 束HTML语言概述 从从上上例例可可以以看看出出，一一般般HTMLH

9、TML文文件件都都是是以以 html开开头头，以以/html结结束束。其其文文件件结结构构由以下两部分组成：由以下两部分组成：1 1）头部（）头部（HeadHead） HTMLHTML文文件件的的头头部部由由 head和和/head标标记记定定义义。通通常常情情况况下下，文文件件的的标标题题、语语言言字字符符集集信信息息等等都都放放在在头头部部信信息息中中。最最常常用用到到的的标标记记是是 title，它它用用于于定定义义网网页页文文件件的的标标题题，当当该该网网页页文文件件被被打打开开后后，网网页文件的标题将出现在浏览器的标题栏中。页文件的标题将出现在浏览器的标题栏中。8/30/20248计

10、算机文化基础 目 录上一页下一页 结 束HTML语言概述2 2）正文主体（）正文主体（BodyBody） 正正文文主主体体是是HTMLHTML文文件件的的核核心心内内容容，由由 body和和/body标标记记定定义义。 body标标记记具具有有一一些些常常用用的的属属性，格式如下：性，格式如下： =#n color=#n其中，其中，bgcolorbgcolor为背景颜色，为背景颜色，colorcolor为文本颜色。为文本颜色。n n为六位十六进制数。为六位十六进制数。如果网页使用背景图像，格式为：如果网页使用背景图像，格式为： bodyHTMLHTML对格式的要求并不严格，当对格式的要求并不严

11、格，当HTMLHTML文件被浏览文件被浏览器扫描时，所有包含在文件中的空格、回车等均器扫描时，所有包含在文件中的空格、回车等均被忽略了。因此你可以将一行写成两行或多行，被忽略了。因此你可以将一行写成两行或多行，在浏览器中结果是相同的。在浏览器中结果是相同的。 返 回8/30/20249计算机文化基础 目 录上一页下一页 结 束9.1.2 HTML语言的基本语法1. 1. 文本布局文本布局 1 1）段落标记）段落标记 p标标记记指指定定文文档档中中一一个个独独立立的的段段落落。通通过过设设置置alignalign属属性性，控控制制段段落落的的对对齐齐方方式式，其其值值可可以以是是leftleft

12、、centercenter、rightright，分分别别表表示示左左对对齐齐、居居中中和和右右对齐，默认值为左对齐。对齐，默认值为左对齐。使用格式如下：使用格式如下： p标记定义的两个段落之间留有一个空行。标记定义的两个段落之间留有一个空行。2 2）换行标记）换行标记 标记可以强制文本换行。该标记只有开始标记。标记可以强制文本换行。该标记只有开始标记。3 3）水平线标记）水平线标记 hr水平线标记水平线标记 hr用于在网页中插入一条水平线。用于在网页中插入一条水平线。8/30/202410计算机文化基础 目 录上一页下一页 结 束HTML语言的基本语法2. 2. 文字格式文字格式HTMLHT

13、ML语言中用于文字格式化的标记有：语言中用于文字格式化的标记有：1 1）标题标记）标题标记 格式为：格式为： 标题文字内容标题文字内容 / 其其中中n n说说明明大大小小级级别别，取取值值范范围围为为1 1到到6 6的的数数字字。把把标标题题分分为为 6 6级级，即即h1h6h1h6，其中其中h1h1文字最大，文字最大，h6h6文字最小。文字最小。2 2）字体标记）字体标记 font字体标记用来对文字格式进行设置，主要具有以下属性：字体标记用来对文字格式进行设置，主要具有以下属性：（1 1）sizesize属性用来控制文字的大小，其格式为：属性用来控制文字的大小，其格式为： font size

14、=n其中其中n n的取值范围为的取值范围为1 17 7的数字，默认值为的数字，默认值为3 3。 font标标记记和和 标标记记都都可可以以控控制制文文字字的的大大小小。一一般般情情况况下下，文文章章的的标标题题最最好好由由 标标记记控控制制，而而其其余余的的文文字字由由 font标标记记控制。相比较而言，控制。相比较而言， font对字体的控制更加灵活。对字体的控制更加灵活。8/30/202411计算机文化基础 目 录上一页下一页 结 束HTML语言的基本语法（2 2）colorcolor属性用来控制文字的颜色，其格式为：属性用来控制文字的颜色，其格式为： font 其中其中n n是一个十六进

15、制的六位数。是一个十六进制的六位数。（3 3）faceface属性用来指明文字使用的字体，其格式为：属性用来指明文字使用的字体，其格式为： font 其其中中，字字体体名名的的选选择择由由WindowsWindows操操作作系系统统安安装装的的字字体体决决定定。如：宋体、楷体如：宋体、楷体_ _GB2312GB2312、Times New RomanTimes New Roman、ArialArial等。等。3 3）字形标记）字形标记 字字形形标标记记用用于于设设置置文文字字的的粗粗体体、斜斜体体、上上标标、下下标标、下下划划线等，如下表所示。线等，如下表所示。标记格式标记格式字形结果字形结果

16、粗体粗体斜体斜体下划线下划线上标上标下标下标8/30/202412计算机文化基础 目 录上一页下一页 结 束HTML语言的基本语法3. 3. 插入图片插入图片 标标记记将将图图片片插插入入网网页页中中。可可以以设设置置图图片片的的大大小小以以及及相相邻邻文文字字的的排列方式。该标记具有以下属性：排列方式。该标记具有以下属性：（1 1）srcsrc属性：指明图片文件所在的位置。格式为：属性：指明图片文件所在的位置。格式为： =URL 其中其中URLURL是指图片文件存放的位置。是指图片文件存放的位置。（2 2）altalt属属性性：图图片片的的文文字字说说明明，当当鼠鼠标标指指针针指指向向图图片

17、片时时，该该图图片片的的说说明明性性文字弹出。格式为：文字弹出。格式为： （3 3）heightheight和和widthwidth属性：设置图片显示区域的高度和宽度。格式为：属性：设置图片显示区域的高度和宽度。格式为： =URL height =n1 width=n2 其其中中heightheight和和widthwidth属属性性的的取取值值n1n1和和n2n2为为像像素素数数，像像素素数数越越大大，图图片片显显示越大。示越大。（4 4）borderborder属性：设置图片文件的边框。格式为：属性：设置图片文件的边框。格式为： =URL border =n 其中其中n n为像素数。为像素

18、数。8/30/202413计算机文化基础 目 录上一页下一页 结 束HTML语言的基本语法（5 5）alignalign属性：设置图片相对于文本的位置关系。格式为：属性：设置图片相对于文本的位置关系。格式为： 对对齐齐方方式式可可以以是是：toptop（顶顶边边对对齐齐）、middlemiddle（垂垂直直居居中中）、bottombottom（底底边边对对齐齐）、leftleft（左左对对齐齐）、rightright（右右对对齐）。齐）。4. 4. 超链接超链接 在在HTMLHTML语语言言中中， a和和/a标标记记用用于于设设置置网网页页中中的的超超链接链接hrefhref属性指明被超链接的

19、文件地址。格式为：属性指明被超链接的文件地址。格式为： =URL超链接文本超链接文本/a 用用于于表表示示超超链链接接的的文文本本一一般般显显示示为为蓝蓝色色并并且且加加下下划划线线。在在浏浏览览器器中中，当当鼠鼠标标指指针针指指向向该该文文本本时时，箭箭头头变变为为手手形形，并在浏览器的状态栏中显示该超链接的地址。并在浏览器的状态栏中显示该超链接的地址。 若使用图片做超链接，可使用如下格式完成：若使用图片做超链接，可使用如下格式完成： =URL28/30/202414计算机文化基础 目 录上一页下一页 结 束HTML语言的基本语法5. 5. 使用表格使用表格 在在网网页页中中插插入入一一个个

20、表表格格，需需要要用用到到一一组组HTMLHTML标标记记。定义表格的有关标记如下：定义表格的有关标记如下： table 定义表格。定义表格。 定义表行。定义表行。 td 定义表列。定义表列。 常常用用的的标标记记属属性性中中，borderborder属属性性用用于于设设置置表表格格边边框框的的宽宽度度；widthwidth、heightheight属属性性设设定定表表格格或或表表项项的的宽宽度度 、 高高 度度 ， 取取 值值 可可 以以 是是 像像 素素 数数 或或 百百 分分 数数 ；cellspacingcellspacing和和cellpaddingcellpadding属属性性分分

21、别别用用于于设设置置单单元元格格之之间间的的间间隙隙和和单单元元格格内内部部空空白白；alignalign属属性性设设置置表表格格或或表表项项的的对对齐齐方方式式；bgcolorbgcolor和和backgroundbackground属属性性设设置置表格背景的颜色和背景图像。表格背景的颜色和背景图像。返 回8/30/202415计算机文化基础 目 录上一页下一页 结 束9.2 FrontPage 2000概述 虽虽然然使使用用一一般般的的文文本本编编辑辑器器就就可可以以编编写写HTMLHTML文文档档，但但是是使使用用专专门门的的HTMLHTML编编辑辑器器或或WebWeb创创作作工工具具往

22、往往往更更加加方方便便。具具有有“所所见见即即所所得得”功功能能的的WebWeb页页面面创创作作工工具具可可以以使使WebWeb创创作作人人员员直直接接面面对对WebWeb页页面面进进行行编编辑辑修修改改，并并且且能能立立即看到即看到WebWeb页面的显示效果。页面的显示效果。 FrontPageFrontPage是是微微软软公公司司开开发发的的网网页页制制作作 和和 网网 站站 管管 理理 工工 具具 。 FrontPage FrontPage 20002000是是Microsoft Microsoft Office Office 20002000的的 组组 件件 之之 一一 ， 与与Off

23、iceOffice的的其其他他组组件件高高度度融融合合。它它界界面面友友好好，功功能能强强大大，易易学学易易用用，是是目目前前使使用用较较为为广广泛泛的网页制作、网站管理工具之一。的网页制作、网站管理工具之一。 8/30/202416计算机文化基础 目 录上一页下一页 结 束9.2 FrontPage 2000概述9.2.1 FrontPage 2000的主要功能的主要功能9.2.2 FrontPage 2000的启动与退出的启动与退出9.2.3 网页与网站网页与网站9.2.4 FrontPage 2000的编辑方式的编辑方式9.2.5 FrontPage 2000中的视图中的视图返 回8/3

24、0/202417计算机文化基础 目 录上一页下一页 结 束9.2.1 FrontPage 2000的主要功能FrontPage 2000FrontPage 2000的主要功能是制作网页和管理网站。的主要功能是制作网页和管理网站。 使使用用FrontPage FrontPage 20002000可可以以创创建建新新的的网网页页，也也可可以以打打开开并并修修改改已已经经存存在在的的网网页页。FrontPage FrontPage 20002000提提供供了了多多种种编编辑辑网网页页的的方方式式，不不但但可可以以直直接接修修改改HTMLHTML，而而且且可可以以采采用用“所所见见即即所所得得”的的方

25、方式式编编辑辑网网页页，还还可可以以使使用用菜菜单单命命令令插插入入各各种网页元素，使用对话框修改其属性，十分灵活。种网页元素，使用对话框修改其属性，十分灵活。 在在FrontPage FrontPage 20002000中中，可可以以很很容容易易地地插插入入文文本本、图图片片、表表格格、组组件件等等元元素素；可可以以使使用用主主题题，共共享享边边框框，框框架架等等管管理网页的外观；还可以使用表单等元素设计出交互式网页。理网页的外观；还可以使用表单等元素设计出交互式网页。 FrontPage FrontPage 20002000提提供供了了强强大大的的站站点点管管理理功功能能。一一组组相相关关

26、网网页页和和有有关关文文件件组组成成一一个个站站点点，站站点点也也是是FrontPage FrontPage 20002000对对网网站站进进行行管管理理的的基基本本单单位位。在在FrontPage FrontPage 20002000中中可可以轻松实现设计、管理、分析、发布和维护站点等工作。以轻松实现设计、管理、分析、发布和维护站点等工作。 返 回8/30/202418计算机文化基础 目 录上一页下一页 结 束9.2.2 FrontPage 2000的启动与退出 1. 1. FrontPage 2000FrontPage 2000的启动的启动 FrontPage 2000FrontPage

27、2000可以按下列步骤启动：可以按下列步骤启动：（1 1）单单击击“开开始始”按按钮钮，在在“开开始始”菜菜单单中中单单击击“程程序序”；（2 2）在在“程程序序”菜菜单单中中单单击击Microsoft Microsoft FrontPageFrontPage，即即可可打开打开Microsoft FrontPage 2000Microsoft FrontPage 2000窗口，如图窗口，如图9-29-2所示。所示。 图图9-2 9-2 Microsoft FrontPage 2000Microsoft FrontPage 2000窗口窗口 另外，也可以在桌面上建立另外，也可以在桌面上建立Fro

28、ntPage 2000FrontPage 2000快捷方式，快捷方式，后在桌面上双击该图标，即可启动后在桌面上双击该图标，即可启动FrontPage 2000FrontPage 2000。8/30/202419计算机文化基础 目 录上一页下一页 结 束FrontPage 2000的启动与退出2. 2. FrontPage 2000FrontPage 2000的退出的退出 FrontPage 2000FrontPage 2000的退出有以下三种方式：的退出有以下三种方式：（1 1）选取）选取“文件文件”菜单中的菜单中的“退出退出”。（2 2）单击操作窗口中右上角的）单击操作窗口中右上角的“关闭关

29、闭”按钮。按钮。（3 3）按快捷键）按快捷键Alt+F4Alt+F4。返 回8/30/202420计算机文化基础 目 录上一页下一页 结 束9.2.3 网页与网站网网页页是是WWWWWW上上的的基基本本文文档档，用用HTMLHTML书书写写，通通常常以以. .htmhtm或或. .htmlhtml为为扩扩展展名名。网网页页可可以以独独立立存存在在，但但常常常常作作为为网网站站的的一一部部分分。网网站站是是一一组组相相关关网网页页和和有有关关文文件件的的组组合合。网网站站一一般般有有 一一 个个 特特 殊殊 的的 网网 页页 作作 为为 浏浏 览览 的的 起起 始始 点点 ， 称称 为为 主主

30、页页（HomepageHomepage），），用来引导用户访问其他网页。用来引导用户访问其他网页。 网网站站通通常常位位于于WebWeb服服务务器器上上。客客户户机机通通过过网网络络向向WebWeb服服务务器器发发送送请请求求，WebWeb服服务务器器响响应应客客户户机机的的请请求求，并并使使用用HTTPHTTP协协议议将将网网页页和和有有关关文文件件通通过过网网络络传传送送回回客客户户机机。客客户户机机端端使用网页浏览器就能看到网页的内容了。使用网页浏览器就能看到网页的内容了。在在FrontPage FrontPage 20002000中中，可可以以建建立立和和编编辑辑独独立立的的网网页页，

31、也也可可以以设设计计和和管管理理站站点点。在在站站点点中中可可以以包包含含大大量量网网页页和和各各种种文文件件，甚甚至至可可以以包包含含子子站站点点，而而且且只只有有在在使使用用站站点点时时，FrontPage FrontPage 20002000的的许许多多特特性性才才有有效效。例例如如：在在单单个个网网页页的的环境中，导航栏变得毫无意义。环境中，导航栏变得毫无意义。 8/30/202421计算机文化基础 目 录上一页下一页 结 束网页与网站 通通常常，在在FrontPage FrontPage 20002000中中建建立立的的站站点点需需要要发发布布到到InternetInternet中中

32、的的WebWeb服服务务器器上上，成成为为真真正正意意义义上上的的网网站站，InternetInternet上上的的用用户户才才能能访访问问。有有时时，可可以以在在同同一一台台计计算算机机上上安安装装WebWeb服服务务器器端端软软件件（如如IISIIS等等），从从而可以将站点发布到本机进行测试。而可以将站点发布到本机进行测试。用用FrontPage FrontPage 20002000也也可可以以建建立立基基于于本本地地硬硬盘盘的的站站点点，这这种种站站点点以以本本机机文文件件夹夹的的形形式式存存在在，不不需需要要发发布布到到服服务务器器，这这时时，所所有需要服务器支持的功能都是不可用的。有

33、需要服务器支持的功能都是不可用的。 返 回8/30/202422计算机文化基础 目 录上一页下一页 结 束9.2.4 FrontPage 2000的编辑方式的编辑方式 FrontPage FrontPage 20002000的的网网页页视视图图下下有有三三种种编编辑辑方式：普通、方式：普通、HTMLHTML、预览。预览。 该该视视图图窗窗口口底底部部有有三三个个标标签签：“普普通通”、“HTML”HTML”和和“预预览览”。它它们们分分别别控控制制网网页页以以普普通通方方式式、HTMLHTML方方式式进进行行编编辑辑或或是是预预览览网网页页的的效效果，默认是普通方式。果，默认是普通方式。 如如

34、果果切切换换到到HTMLHTML方方式式，用用户户就就可可以以看看到到FrontPage FrontPage 20002000自自动动生生成成的的HTMLHTML代代码码。在在HTMLHTML方式下，可以直接键入方式下，可以直接键入HTMLHTML代码。代码。 预预览览方方式式实实际际上上是是用用Internet Internet ExplorerExplorer来显示网页。来显示网页。返 回8/30/202423计算机文化基础 目 录上一页下一页 结 束9.2.5 FrontPage 2000中的视图FrontPage FrontPage 20002000提提供供了了6 6种种视视图图以以方

35、方便便用用户户对对站站点点的的管管理理，可可以在不同的视图中进行不同的操作。以在不同的视图中进行不同的操作。1. 1. 网页视图网页视图网网页页视视图图是是FrontPage FrontPage 20002000中中最最常常用用的的工工作作界界面面。网网页页的的创创建建、编辑、预览等基本操作都是在此视图中进行的。编辑、预览等基本操作都是在此视图中进行的。2. 2. 文件夹视图文件夹视图在在文文件件夹夹视视图图中中，站站点点显显示示为为一一组组文文件件和和文文件件夹夹。可可以以在在文文件件夹夹视图中创建、移动和删除文件或文件夹。视图中创建、移动和删除文件或文件夹。3. 3. 报表视图报表视图使使

36、用用报报表表视视图图可可以以方方便便地地了了解解当当前前站站点点的的文文件件内内容容、更更新新链链接接情情况况、组组件件错错误误、所所有有文文件件列列表表及及变变化化情情况况等等信信息息。可可在在“报报表表”工具栏中的工具栏中的“报表报表”下拉列表中选择所需显示的报表。下拉列表中选择所需显示的报表。4. 4. 超链接视图超链接视图超超链链接接视视图图将将当当前前站站点点显显示示为为链链接接文文件件的的一一个个网网络络，它它们们表表示示了了站站点点中中各各个个网网页页之之间间的的相相互互链链接接关关系系。超超链链接接视视图图就就像像一一张张地地图图，表明站点中的超链接路径。表明站点中的超链接路径

37、。 8/30/202424计算机文化基础 目 录上一页下一页 结 束FrontPage 2000中的视图5. 5. 任务视图任务视图 任任务务视视图图主主要要用用来来创创建建和和管管理理任任务务。在在视视图图中中列列出出了了当当前前站站点点的的“任任务务”，即即当当前前站站点点中中尚尚未未完完成的项目。成的项目。6. 6. 导航视图导航视图 使使用用导导航航视视图图可可方方便便地地观观察察站站点点的的链链接接结结构构，它它以以层层次次状状的的组组织织结结构构图图形形式式显显示示（见见图图9-39-3）。在在该视图下，可以通过拖曳操作改变链接结构。该视图下，可以通过拖曳操作改变链接结构。图9-3

38、 导航视图 返 回8/30/202425计算机文化基础 目 录上一页下一页 结 束9.3 网 页 制 作WebWeb站站点点的的开开发发，首首先先应应当当根根据据其其用用途途规规划划站站点点，确确定定站站点点的的结结构构，并并在在本本地地磁磁盘盘上上创创建建站站点点，然然后后再再建建立立网网页页。那那么么什什么么是是“站站点点”呢呢？其其实实站站点点就就是是一一组组相相关关网网页页和和其其他他文文件件的的集集合合。这这些些网网页页在在InternetInternet中中表表现现为为 一一 个个 完完 整整 结结 构构 就就 称称 为为 “站站 点点 ”。 在在FrontPage FrontPa

39、ge 20002000中中，站站点点以以一一个个特特殊殊文文件件夹夹的形式存储。的形式存储。8/30/202426计算机文化基础 目 录上一页下一页 结 束9.3 网 页 制 作9.3.1 创建站点创建站点9.3.2 网页编辑网页编辑9.3.3 插入对象插入对象9.3.4 创建超链接创建超链接返 回8/30/202427计算机文化基础 目 录上一页下一页 结 束9.3.1 创建站点创建站点 使使用用FrontPage FrontPage 20002000的的向向导导和和模模板板，用用户户可可以轻松地创建出各种用途和风格的站点。以轻松地创建出各种用途和风格的站点。 新新建建站站点点时时，可可以以

40、根根据据自自己己的的需需求求选选择择不不同同的的模模板板和和向向导导。对对于于不不同同的的模模板板和和向向导导，其其新新建建站站点点的的步步骤骤略略有有不不同同。下下面面以以“只只有有一一个个网网页的站点页的站点”模板为例，介绍新建站点的方法。模板为例，介绍新建站点的方法。（1 1）在在“文文件件”菜菜单单的的“新新建建”子子菜菜单单中中选选择择“站点站点”，打开，打开“新建新建”对话框；对话框；（2 2）在在“新新建建”对对话话框框的的“指指定定新新站站点点的的位位置置”文本框中输入存储站点的文件夹；文本框中输入存储站点的文件夹；8/30/202428计算机文化基础 目 录上一页下一页 结

41、束创建站点创建站点3 3）双双击击“只只有有一一个个网网页页的的站站点点”模模板板，新新建建站站点点如如图图9-49-4所示。所示。该该站站点点只只有有一一个个空空白白网网页页index.index.htmhtm（主主页页）和和用用于于存存储储图图片片的的文文件件夹夹imagesimages，你你可可以以打打开开index.index.htmhtm编编辑辑该该网网页页，也也可以进一步根据网站规划创建文件夹和新建其他网页。可以进一步根据网站规划创建文件夹和新建其他网页。 选选 择择 “文文 件件 ”菜菜 单单 的的 “退退 出出 ”命命 令令 ， 可可 以以 关关 闭闭FrontPage Fro

42、ntPage 20002000。要要再再次次对对该该站站点点进进行行操操作作，在在启启动动FrontPage FrontPage 20002000后后使使用用“文文件件”菜菜单单中中的的“打打开开站站点点”命命令打开该站点。令打开该站点。返 回8/30/202429计算机文化基础 目 录上一页下一页 结 束9.3.2 网页编辑1. 新建网页新建网页2. 打开网页打开网页3. 设置文字格式设置文字格式4. 设置段落格式设置段落格式5. 设置网页属性设置网页属性6. 预览网页预览网页返 回8/30/202430计算机文化基础 目 录上一页下一页 结 束网页编辑1. 1. 新建网页新建网页 要创建一

43、个新的网页，可按下面的步骤操作：要创建一个新的网页，可按下面的步骤操作：（1 1）从从“文文件件”菜菜单单的的“新新建建”子子菜菜单单中中选选择择“网网页页”命命令令，打开打开“新建新建”对话框。对话框。（2 2）在在“常常规规”选选项项卡卡中中选选择择所所需需的的模模板板，可可在在“说说明明”及及“预预览览”区区域域查查看看该该模模板板的的说说明明及及预预览览图图。如如果果要要建建一一个个空白网页，可选中空白网页，可选中“普通网页普通网页”模板。模板。（3 3）单单击击“确确定定”按按钮钮，系系统统新新建建一一个个基基于于所所选选模模板板的的网网页页。此此时时，新新建建的的网网页页显显示示在

44、在FrontPage FrontPage 20002000窗窗口口中中，可可以以对其进行编辑修改等操作。对其进行编辑修改等操作。（4 4）单单击击“文文件件”菜菜单单，选选择择“保保存存文文件件”命命令令，弹弹出出“另另存存为为”对对话话框框。在在“另另存存为为”对对话话框框中中，单单击击“更更改改”按按钮钮修修改改网网页页标标题题，如如“新新闻闻”。在在“文文件件名名”文文本本框框中中输输入入网网页页文文件件名名，如如news.news.htmhtm。设设置置完完成成后后单单击击“保保存存”按钮。按钮。（5 5）单单击击“视视图图”框框中中的的“导导航航”图图标标，在在“文文件件夹夹列列表表

45、”中中拖拖动动新新建建网网页页到到站站点点的的结结构构图图，将将其其置置入入相相应应位位置置。此此时时，双双击击该该页页面面图图标标可可切切换换到到网网页页视视图图。网网页页中中若若包包含含导航栏，则导航栏自动更新链接关系。导航栏，则导航栏自动更新链接关系。返 回8/30/202431计算机文化基础 目 录上一页下一页 结 束网页编辑2. 2. 打开网页打开网页 在在FrontPage FrontPage 20002000中中，编编辑辑某某个个网网页页必必须须首首先先打打开开该该网网页页。打打开开网网页页的的方方法法有有多多种，最常用的操作步骤如下：种，最常用的操作步骤如下：（1 1）在在Fr

46、ontPage FrontPage 20002000窗窗口口中中，单单击击工工具具栏中的栏中的“文件夹列表文件夹列表”按钮；按钮；（2 2）在在文文件件夹夹列列表表窗窗口口中中找找到到要要编编辑辑的的网网页，然后双击网页图标即可打开网页。页，然后双击网页图标即可打开网页。 实实际际上上，在在其其他他视视图图中中双双击击网网页页图图标标，同样会打开指定网页。同样会打开指定网页。 返 回8/30/202432计算机文化基础 目 录上一页下一页 结 束网页编辑3. 3. 设置文字格式设置文字格式 同同其其他他Microsoft Microsoft OfficeOffice组组件件一一样样，网网页页中

47、中可可以以输输入入文文字字，复复制制、剪剪切切和和粘粘贴贴文文字字，设设置置文文字字格式，查找和替换文字等。格式，查找和替换文字等。 在在FrontPage FrontPage 20002000中中，对对文文字字的的格格式式提提供供了了相相当当完完整整的的设设定定功功能能，文文字字格格式式的的变变化化也也因因此此多多种种多多样样。我我们们可可以以使使用用工工具具栏栏上上的的工工具具按按钮钮或或者者菜菜单命令，快速地改变文字的外观。单命令，快速地改变文字的外观。 文文字字格格式式包包括括字字体体、字字形形、大大小小、颜颜色色和和修修饰饰效果等属性。效果等属性。 设设置置文文字字格格式式的的操操作

48、作步步骤骤是是：选选中中文文字字，单单击击“格格式式”菜菜单单，选选择择“字字体体”命命令令，打打开开“字字体体”对话框，在对话框中设置字体的各种属性。对话框，在对话框中设置字体的各种属性。 虽虽然然可可以以设设置置各各种种美美观观的的字字体体，但但是是由由于于浏浏览览者者只只能能使使用用本本地地计计算算机机中中安安装装的的字字体体显显示示网网页页，因此还是使用常见的字体为好。因此还是使用常见的字体为好。 返 回8/30/202433计算机文化基础 目 录上一页下一页 结 束网页编辑4. 4. 设置段落格式设置段落格式 文文字字段段落落的的格格式式编编排排对对于于一一个个网网页页的的外外观观是

49、是至至关关重重要要的的。FrontPage FrontPage 20002000通通过过按按EnterEnter键键划划分分段段落落。值值得得注注意意的的是是，段段落落之之间间插插入入了了一一个个空空行行。如如果果只只是是需需要要换换行行，而而不不是是另另起起一一个个段段落落，按按Shift+EnterShift+Enter键键即即可可。实实际际上上，按按EnterEnter键键在在HTMLHTML代代码码中中插插入入的的是是 p标标记记，而而按按Shift+EnterShift+Enter键则插入的是键则插入的是 标记。标记。 段段落落格格式式主主要要包包括括对对齐齐方方式式、文文本本缩缩进

50、进和和段段落落间间距距等。设置段落格式的方法如下：等。设置段落格式的方法如下：（1 1）将插入点移动到要设置格式的段落中；）将插入点移动到要设置格式的段落中；（2 2）单击）单击“格式格式”菜单，选择菜单，选择“段落段落”命令；命令；（3 3）在）在“段落段落”对话框中可以设置段落的各种属性。对话框中可以设置段落的各种属性。返 回8/30/202434计算机文化基础 目 录上一页下一页 结 束网页编辑5. 5. 设置网页属性设置网页属性 网网页页的的属属性性包包括括网网页页的的标标题题、位位置置、背背景景、页页边边距距等等。要要设设置置网网页页属属性性，用用户户可可以以使使用用“文文件件”菜菜

51、单单里里的的“属属性性”命命令令，或或者者在在网网页页的的任任意意地地方方单单击击鼠鼠标标右右键键，在在弹弹 出出 的的 菜菜 单单 中中 选选 择择 “属属 性性 ”命命 令令 ，FrontPage FrontPage 20002000将将显显示示“网网页页属属性性”对对话话框。框。8/30/202435计算机文化基础 目 录上一页下一页 结 束网页编辑1 1）“常规常规”属性属性 要要设设置置网网页页的的“常常规规”属属性性，单单击击“网网页页属属性性”对对话话框框的的“常常规规”选选项项卡卡，如如图图9-59-5所所示示。“标标题题”框框用用于于给给出出网网页页的的标标题题，网网页页标标

52、题题将将显显示示在在浏浏览览器器的的标标题题栏栏中中。“背背景景音音乐乐”框框用用于于指指定定网网页页的的背背景景声声音音，当当WebWeb浏浏览览器器打打开开网网页页时时，将将自自动动播播放放背背景景声声音音。其其中中，“位位置置”框框用用于于指指定定声声音音文文件件的的位位置置，用用户户可可以以单单击击“浏浏览览”按按钮钮，在在当当前前打打开开的的网网站站或或本本地地磁磁盘盘中中定定位位一一个个声声音音文文件件。“循循环环次次数数”框框用用于于指指定定声声音音要要反反复复播播放放的的次次数数，如如果果选选中中“不限次数不限次数”复选框，表示一直不停地播放。复选框，表示一直不停地播放。图9-

53、5 “常规”选项卡 8/30/202436计算机文化基础 目 录上一页下一页 结 束网页编辑2 2）“背景背景”属性属性 要要设设置置网网页页的的背背景景颜颜色色、背背景景图图片片以以及及超超链链接接的的颜颜色色，单单击击“网网页页属属性性”对话框的对话框的“背景背景”选项卡，如图选项卡，如图9-69-6所示。所示。 用用户户可可以以选选中中“背背景景图图片片”复复选选框框，并并指指定定一一个个图图片片作作为为网网页页的的背背景景图图片片，也也可可以以单单击击“浏浏览览”按按钮钮，在在当当前前打打开开的的网网站站或或本本地地磁磁盘盘中中定定位位一个图片文件。一个图片文件。 通通过过单单击击相相

54、应应的的下下拉拉列列表表框框，设设置置网网页页的的背背景景颜颜色色、文文本本颜颜色色以以及及超超链链接接文文字字的的颜颜色色。当当同同时时设设置置背背景景图图片片和和背背景景颜颜色色时时，图图片片将将覆覆盖盖背背景景色。色。 FrontPage FrontPage 20002000允允许许用用户户使使用用其其他他网网页页中中设设置置的的“背背景景”属属性性，包包括括背背景景图图片片、背背景景颜颜色色、文文本本前前景景颜颜色色以以及及超超链链接接的的颜颜色色。此此时时只只要要选选择择“从另一网页获得背景信息从另一网页获得背景信息”并定位一个网页的并定位一个网页的URLURL即可。即可。图9-6

55、“背景”选项卡 8/30/202437计算机文化基础 目 录上一页下一页 结 束网页编辑3 3）“边距边距”属性属性 在在“边边距距”选选项项卡卡中中可可以以设设置置页页面面的的顶顶端端页页边边距距和和左左端端页页边边距距。如如果果要要设设置置顶顶端端页页边边距距，选选中中“指指定定上上边边距距”复复选选框框，并并指指定定上边距的像素数。上边距的像素数。返 回8/30/202438计算机文化基础 目 录上一页下一页 结 束网页编辑6. 6. 预览网页预览网页 网网页页制制作作过过程程中中，用用户户可可以以随随时时对对网网页页进进行行预预览览。可可以以转转换换到到预预览览视视图图方方式式，还还可

56、可以以使使用用“文文件件”菜菜单单上上的的“在在浏浏览览器器中中预预览览”命命令令，使使用用外外部部浏浏览览器器打开当前网页进行预览。打开当前网页进行预览。返 回8/30/202439计算机文化基础 目 录上一页下一页 结 束9.3.3 插入对象1.插入水平线插入水平线2.插入图片插入图片3.插入字幕插入字幕4.插入悬停按钮插入悬停按钮 5.插入动态插入动态HTML效果效果 返 回8/30/202440计算机文化基础 目 录上一页下一页 结 束插入水平线插入水平线1. 1. 插入水平线插入水平线 在在网网页页中中输输入入文文本本内内容容之之后后，还还可可在在不不同同的的段段落落、行行之之间间添

57、添加加水水平平线线，以以增增强强视视觉效果。觉效果。操作步骤如下：操作步骤如下：（1 1）在准备插入水平线的位置设置插入点。）在准备插入水平线的位置设置插入点。（2 2）打打开开“插插入入”菜菜单单，选选择择“水水平平线线”命命令令，此此时时在在网网页页的的插插入入点点处处插插入入一一条条水水平平线线。如如果果插插入入点点位位于于或或接接近近行行尾尾，水水平平线将插入到下一行。线将插入到下一行。 8/30/202441计算机文化基础 目 录上一页下一页 结 束插入水平线插入水平线 打开打开“水平线属性水平线属性”对话框，如图对话框，如图9-79-7所示，在所示，在“宽度宽度”栏中可设置水平线的

58、宽度，在栏中可设置水平线的宽度，在“高度高度”栏中输栏中输入水平线的高度，在入水平线的高度，在“对齐方式对齐方式”栏中选择水平线在栏中选择水平线在网页内水平对齐的方式，在网页内水平对齐的方式，在“颜色颜色”列表框内设置水列表框内设置水平线的颜色，系统默认的颜色是黑色，选择平线的颜色，系统默认的颜色是黑色，选择“实线实线（无阴影）（无阴影）”复选框时，水平线将被设置成实心线，复选框时，水平线将被设置成实心线，并且在水平线的边缘上没有阴影。并且在水平线的边缘上没有阴影。 图9-7 “水平线属性”对话框返 回8/30/202442计算机文化基础 目 录上一页下一页 结 束插入图片插入图片2. 2.

59、插入图片插入图片 图图片片可可以以使使网网页页变变得得生生动动活活泼泼，并并能能吸吸引引访访问问者者的的注注意。意。 1 1）图片文件的格式）图片文件的格式 在在WWWWWW上上常常用用的的图图像像文文件件格格式式是是JPEGJPEG和和GIFGIF，它它们们都都是是压压缩缩的的图图像像格格式式，文文件件的的信信息息量量小小，适适合合于于网网络络传传输输，现现已已几几乎乎被被所所有有的的WebWeb浏浏览览器器所所支支持持，因因此此被被广广泛泛地地应应用用在在WebWeb站点的设计中。站点的设计中。 图图形形交交换换格格式式GIFGIF（Graphical Graphical Intercha

60、nge Interchange FormatFormat）采采用用无无损损压压缩缩方方式式，其其主主要要特特征征是是支支持持动动画画、透透明明度度、图图形渐进，但形渐进，但GIFGIF格式只支持格式只支持256256种颜色。种颜色。 联联合合图图像像专专家家组组JPEGJPEG（Joint Joint Photograph Photograph Expert Expert GroupGroup）格格式式是是专专为为有有几几百百万万种种颜颜色色的的照照片片和和图图形形设设计计的的，它它采采用用有有损损压压缩缩方方式式，以以牺牺牲牲图图片片质质量量换换取取大大的的压压缩缩比比例例。但但JPEGJP

61、EG格格式式支支持持真真彩彩色色（2424位位色色），并并且且在在压压缩缩大大的的图图像像方面已被证明很有效。方面已被证明很有效。8/30/202443计算机文化基础 目 录上一页下一页 结 束插入图片插入图片2 2）插入图片的步骤）插入图片的步骤（1 1）移动光标至想要插入图像处；）移动光标至想要插入图像处；（2 2）单单击击菜菜单单项项中中的的“插插入入”，选选择择“图图片片”项项，再再选选取二取二 级菜单中的级菜单中的“来自文件来自文件”，弹出图片对话框；，弹出图片对话框；（3 3）如如果果图图片片在在该该站站点点中中，选选中中图图片片文文件件并并按按“确确定定”按按钮钮即即可可，否否则

62、则单单击击“从从计计算算机机上上选选择择一一个个文文件件”按按钮钮或或单单击击“使使用用WebWeb浏浏览览器器来来选选择择网网页页或或文文件件”按按钮钮，从从计计算算机机本本地地硬硬盘盘中中或或者者InternetInternet上上选选中中图图片片并按并按“确定确定”按钮，即可将其插入网页中。按钮，即可将其插入网页中。3 3）设置图片属性）设置图片属性 打打开开“图图片片属属性性”对对话话框框，在在“外外观观”选选项项卡卡中中，可可以以调调整整图图片片的的大大小小。为为了了防防止止改改变变图图片片原原来来的的长长宽宽比比例例，可可以以选选中中“保保持持纵纵横横比比”复复选选框框，这这样样图

63、图片片就就会会根根据据原原来来的的长长宽宽比比例例来来调调整整大大小小。同同样样在在“外外观观”选选项项卡卡中中，可可以以选选择择“对对齐齐方方式式”，设设置置图图片边框的宽度，片边框的宽度，0 0为无边框。为无边框。 8/30/202444计算机文化基础 目 录上一页下一页 结 束插入图片插入图片4 4）编辑图片）编辑图片 选选中中插插入入的的图图片片，单单击击“查查看看”菜菜单单中中的的“工工具具栏栏”，选选择择“图图片片”命命令令，打打开开图图片片编编辑辑工工具具栏栏，可可以以对对图图片片的的亮亮度度、对对比比度度进进行行调调整整，可可以以旋旋转转、翻翻转转图图片片，对对图图片片进进行行

64、剪剪裁裁，设设置置透透明明的的颜颜色色等等操操作作，如如图图9-89-8所示。所示。图9-8图片编辑工具栏返 回8/30/202445计算机文化基础 目 录上一页下一页 结 束插入字幕插入字幕3. 3. 插入字幕插入字幕 在在制制作作网网页页时时，可可以以将将网网页页中中的的文文字字做做成成由由左左至至右右，或或由由右右至至左左移移动动的的动动态态效效果果。在在网网页页中中加加入入移移动动字字幕幕，会会使使网网页页看看起来更活泼。具体操作步骤如下：起来更活泼。具体操作步骤如下：（1 1）将将插插入入点点设设置置在在要要插插入入移移动动字字幕幕的的位位置或者选择作为移动字幕的文本。置或者选择作为

65、移动字幕的文本。（2 2）单单击击“插插入入”菜菜单单中中的的“组组件件”，选选择择“字字幕幕”命命令令，出出现现“字字幕幕属属性性”对对话话框。框。8/30/202446计算机文化基础 目 录上一页下一页 结 束插入字幕插入字幕（3 3）如如果果已已经经选选择择了了作作为为移移动动字字幕幕的的文文本本，此此文文本本就就会会出出现现在在“文文本本”框框中中（见见图图9-99-9）。如如果果没没有有选选择择文文本本，可可在在“文文本本”框框中中输输入入作作为移动字幕的文本。为移动字幕的文本。图图9-9“字幕属性字幕属性”对话框对话框8/30/202447计算机文化基础 目 录上一页下一页 结 束

66、插入字幕插入字幕（4 4）在在“方方向向”区区域域中中选选择择文文字字的的移移动动方方向向。在在“速速度度”区区域域中中可可以以指指定定文文字字的的移移动动速速度度，在在“延延迟迟”框框中中输输入入的的数数值值表表示示在在每每个个连连续续运运动动之之间间暂暂停停的的毫毫秒秒数数，“数数量量”框框中中输输入入的的数数值值表表示示文文本本每每次次移移动动的的距距离离。在在“表表现现方方式式”区区域域中中可可以以指指定定文文字字的的运运动动方方式式，选选中中“重重复复”区区域域的的“连连续续”复复选选框框，则则移移动动字字幕幕连连续续不不停停循循环环；若若要要设设置置文文本本重重复复有有限限的的次次

67、数数，则则取取消消选选中中并并输输入入字字幕幕重重复复的的次次数数。在在“背背景景颜颜色色”列列表表框框中中可可以以设设置置移移动动字字幕幕的背景颜色。的背景颜色。（5 5）单击）单击“确定确定”按钮。按钮。返 回8/30/202448计算机文化基础 目 录上一页下一页 结 束插入悬停按钮插入悬停按钮4. 4. 插入悬停按钮插入悬停按钮 悬悬停停按按钮钮是是一一种种动动感感按按钮钮，当当访访问问者者将将鼠鼠标标指指向向该该按按钮钮时时，按按钮钮就就会会改改变变颜颜色色或或形形状状。插插入入悬悬停停按按钮钮的的具体操作步骤如下：具体操作步骤如下：（1 1）将插入点设置在要插入悬停按钮的位置。）将

68、插入点设置在要插入悬停按钮的位置。（2 2）单单击击“插插入入”菜菜单单中中的的“组组件件”，选选择择“悬悬停停按按钮钮”命命令令，弹弹出出“悬悬停停按按钮钮属属性性”对对话话框框（见见图图9-9-1010）。）。图9-10 “悬停按钮属性”对话框8/30/202449计算机文化基础 目 录上一页下一页 结 束插入悬停按钮插入悬停按钮（3 3）在在“按按钮钮文文本本”框框中中输输入入按按钮钮上上的的文文本本。可可单单击击“字字体体”按按钮钮，设设置置文文本本的的字字体体、字字形形、大大小小和和文文本本颜颜色色等等属属性性。“背背景景颜颜色色”选选项项是是指指按按钮钮的的背背景景颜颜色色，此此选

69、选项项一一般般不不起起作作用用。在在“效效果果”列列表表框框中中选选择择当当鼠鼠标标移移到到按按钮钮上上时时出出现现的的视视觉觉效效果果，包包括括“填填充充颜颜色色”、“颜颜色色对对比比”、“发发光光”、“反反色色发发光光”、“微微微微发发光光”、“凸凸出出”和和“凹凹进进”效效果果。可可以以在在“效效果果颜颜色色”列列表表框框中中指指定定当当实实现某一种效果时出现的颜色。现某一种效果时出现的颜色。 8/30/202450计算机文化基础 目 录上一页下一页 结 束插入悬停按钮插入悬停按钮 （4 4）可以通过单击）可以通过单击“自定义自定义”按钮，在弹出的按钮，在弹出的“自定义自定义”对话框中进

70、一步设置按钮的属性，如图对话框中进一步设置按钮的属性，如图9-119-11所示。所示。 （5 5）设置完成，按）设置完成，按“确定确定”按钮。按钮。 此时，设置的图片悬停按钮出现在插入点位置。此时，设置的图片悬停按钮出现在插入点位置。图9-11 自定义悬停按钮返 回8/30/202451计算机文化基础 目 录上一页下一页 结 束插入动态插入动态HTML效果效果5. 5. 插入动态插入动态HTMLHTML效果效果 动动态态HTMLHTML效效果果是是FrontPage FrontPage 20002000新新增增的的功功能能。可可以以将将动动态态HTMLHTML效效果果应应用用到到网网页页的的任

71、任何何相相关关组组件件，如如文文本本、段段落落、图图片片、按按钮钮以以及及字字幕幕等等，并并将将这这些些动动态态效效果果链链接接到鼠标单击、双击、悬停或者加载网页等事件上。到鼠标单击、双击、悬停或者加载网页等事件上。 首首先先选选中中网网页页中中打打算算采采用用动动态态HTMLHTML的的元元素素，比比如如文文字字或或者者图图像像。然然后后选选择择“格格式式”菜菜单单中中的的“动动态态HTMLHTML效效果果”，弹出，弹出“DHTMLDHTML效果效果”工具栏（见图工具栏（见图9-129-12）。）。图9-12 DHTML效果工具栏 8/30/202452计算机文化基础 目 录上一页下一页 结

72、 束插入动态插入动态HTML效果效果 该该工工具具栏栏上上共共有有三三个个下下拉拉菜菜单单，需需要要选选择择“开开启启”菜菜单单中中的的触触发发事事件件，才才能能选选择择后后面面的的应应用用效效果果，然然后后才才能能选选择择第第三三个个下下拉拉菜菜单单的的效效果果属属性性设设置置。“开开启启”菜菜单单中中的的事事件件列列表表依依据据所所选选择择的的网网页页元元素素类类型型而而变变化。化。 例例如如将将鼠鼠标标指指向向某某个个段段落落时时，该该段段落落自自动动加加上上边边框，操作步骤如下：框，操作步骤如下：（1 1）用用鼠鼠标标选选中中该该段段落落，选选择择“格格式式”菜菜单单中中的的“动态动态

73、HTMLHTML效果效果”，弹出，弹出“DHTMLDHTML效果效果”工具栏；工具栏；（2 2）选选择择“鼠鼠标标悬悬停停”触触发发事事件件，在在“应应用用”中中只只有有“格格式式”可可以以选选择择，然然后后在在“效效果果”下下拉拉菜菜单单中中选选择择“选选择择边边框框”，FrontPage FrontPage 20002000会会弹弹出出“边边框框与与阴影阴影”对话框；对话框；8/30/202453计算机文化基础 目 录上一页下一页 结 束插入动态插入动态HTML效果效果（3 3）在在“边边框框与与阴阴影影”对对话话框框的的“样样式式”一一栏栏中中选选择择“双线双线”，单击，单击“确定确定”

74、按钮。按钮。 这这样样就就给给文文字字加加上上了了动动态态HTMLHTML效效果果。在在编编辑辑状状态态时时，可可以以看看出出，这这行行文文字字被被蓝蓝色色突突出出显显示示了了。可可以以转转到到“预预览览”模模式式查查看看效效果果，当当鼠鼠标标移移动动到到文文字字“动态动态HTMLHTML效果效果”时，自动出现边框（见图时，自动出现边框（见图9-139-13）。）。 图图9-13 9-13 DHTMLDHTML效果效果返 回8/30/202454计算机文化基础 目 录上一页下一页 结 束9.3.4 创建超链接WebWeb网网页页的的强强大大之之处处就就在在于于其其超超链链接接，使使用用超超链链

75、接接能能够够将将InternetInternet中中的的信信息息有有机机地地组组织织起起来来，使使人人们们在在丰丰富富多多彩彩的的WWWWWW世世界界轻轻松松地地漫漫游游。在在浏浏览览器器中中，超超链链接接通通常常表表现现为为与与普普通通文文本本或或图图片片不不同同的的特特点点。将将鼠鼠标标移移到到一一个个超超链链接接上上方方时时，鼠鼠标标指指针针会会变变成成手手形形。同同时时，与与这这个个超超链链接接相相对对应应的的URLURL会会在在窗窗口口底底部部的的状状态态栏栏显显示出来。示出来。 8/30/202455计算机文化基础 目 录上一页下一页 结 束创建超链接1.创建超链接创建超链接2.

76、使用书签使用书签3. 为图形添加热点为图形添加热点4. 使用导航栏使用导航栏返 回8/30/202456计算机文化基础 目 录上一页下一页 结 束创建超链接创建超链接1. 1. 创建超链接创建超链接 在在WebWeb网网页页中中超超链链接接一一般般有有两两种种表表现现方方式式，即即以以文文本本方方式式标标注注的的超超链链接接和和以以图图片片方方式式标标注注的的超超链链接接。对对于于文文本本或或图图片片，利利用用FrontPage FrontPage 20002000都都可可以以创创建建指指向向当当前前网网站站的的另另一一个个网网页页或或WWWWWW中中另另一一个个站站点点的的某某个个网网页页的

77、文本超链接，以及指向的文本超链接，以及指向E-mailE-mail地址的超链接等。地址的超链接等。1 1）链接到页面）链接到页面创建超链接的步骤如下：创建超链接的步骤如下：（1 1）选定要定义超链接的文本或图片；）选定要定义超链接的文本或图片；8/30/202457计算机文化基础 目 录上一页下一页 结 束创建超链接创建超链接（2 2）单单击击“常常用用”工工具具栏栏上上的的“超超链链接接”按按钮钮，或或者者从从“插插入入”菜菜单单中中选选择择“超超链链接接”命命令令，打打开开“创创建超链接建超链接”对话框，如图对话框，如图9-149-14所示；所示；（3 3）在在“创创建建超超链链接接”对对

78、话话框框中中可可见见，网网站站中中的的所所有有网页出现在文件列表中，选择链接的目标网页；网页出现在文件列表中，选择链接的目标网页；图9-14 “创建超链接”对话框8/30/202458计算机文化基础 目 录上一页下一页 结 束创建超链接创建超链接（4 4）单击）单击“确定确定”按钮，超链接创建完成。按钮，超链接创建完成。 单单击击窗窗口口底底部部的的“预预览览”标标签签，切切换换至至预预览览模模式式。将将鼠鼠标标移移至至链链接接文文字字或或图图片片上上时时，光光标标会会变变成成手手形形，此此时时单单击击鼠鼠标标就就跳跳转到目标网页中。转到目标网页中。 在在“创创建建超超链链接接”对对话话框框中

79、中，单单击击“创创建建一一网网页页并并链链接接到到该该网网页页”按按钮钮，出出现现“新新建建”对对话话框框，新新建建一一个个网网页页，即即可可链链接接到一个新创建的页面。到一个新创建的页面。8/30/202459计算机文化基础 目 录上一页下一页 结 束创建超链接创建超链接 在在“创建超链接创建超链接”对话框中，单击对话框中，单击“制作一个指向您计制作一个指向您计算机上文件的超链接算机上文件的超链接”按钮，出现按钮，出现“选择文件选择文件”对话框对话框（见图（见图9-159-15），选择要链接的文件，单击），选择要链接的文件，单击“确定确定”按钮，按钮，即可创建链接到计算机中某文件的超链接。即

80、可创建链接到计算机中某文件的超链接。 在在“创建超链接创建超链接”对话框中，单击对话框中，单击“使用使用WebWeb浏览器来浏览器来选择网页或文件选择网页或文件”按钮，系统自动打开按钮，系统自动打开WebWeb浏览器。在浏览器。在“地址地址”栏中输入一个站点的地址，打开某个网页。切换到栏中输入一个站点的地址，打开某个网页。切换到FrontPageFrontPage窗口中，这个地址就会出现在窗口中，这个地址就会出现在“创建超链接创建超链接”对话框中的对话框中的“URL”URL”栏中。单击栏中。单击“确定确定”按钮，完成按钮，完成WWWWWW上上其他站点超链接的创建。其他站点超链接的创建。 图9-

81、15 选择超链接文件 8/30/202460计算机文化基础 目 录上一页下一页 结 束创建超链接创建超链接2 2）创建发送电子邮件的超链接）创建发送电子邮件的超链接 可可以以创创建建与与电电子子邮邮件件的的超超链链接接，以以便便反反馈馈信信息息。具体创建步骤如下：具体创建步骤如下：（1 1）在在“创创建建超超链链接接”对对话话框框中中单单击击“制制作作发发送送电电子子邮邮件件的的超超链链接接”按按钮钮，出出现现“创创建建电电子子邮邮件件超超链链接接”对对话话框；框；（2 2）输输入入一一个个电电子子邮邮件件地地址址（见见图图9-169-16），单单击击“确确定定”按按钮钮返返回回到到“创创建建

82、超超链链接接”对对话话框框，在在“URL”URL”栏栏中中显示了该电子邮件地址；显示了该电子邮件地址； 图图9-16 9-16 创建与电子邮件的超链接创建与电子邮件的超链接（3 3）单击）单击“确定确定”按钮，完成超链接的创建。按钮，完成超链接的创建。 单单击击窗窗口口底底部部的的“预预览览”标标签签，切切换换至至预预览览模模式式，单单击击此此链链接接，就就会会打打开开系系统统默默认认的的收收发发电电子子邮邮件件工工具具，如如Outlook ExpressOutlook Express、FoxMailFoxMail等。等。返 回8/30/202461计算机文化基础 目 录上一页下一页 结 束使

83、用书签使用书签2. 2. 使用书签使用书签 对对于于网网页页的的超超链链接接，往往往往使使浏浏览览者者跳跳转转到到目目标标网网页页的的顶顶端端。应应用用书书签签能能够够更更严严密密地地控控制制访访问问者者到到达达网网页页内内某某个个具具体体位位置置。当当访访问问者者单单击击基基于于书书签签的的超超链链接接时时，将将直直接接跳跳转转到到这这个个书书签所在的位置。签所在的位置。1 1）插入书签）插入书签 在在创创建建到到书书签签的的链链接接之之前前，必必须须要要在在网网页页中中插插入书签。具体步骤如下：入书签。具体步骤如下：（1 1）将光标定位在要插入书签的位置；）将光标定位在要插入书签的位置；（

84、2 2）从从“插插入入”菜菜单单中中选选择择“书书签签”命命令令，打打开开“书签书签”对话框；对话框； 8/30/202462计算机文化基础 目 录上一页下一页 结 束使用书签使用书签 (3 (3）在）在“书签名称书签名称”框中键入书签名称（见图框中键入书签名称（见图9-179-17）；）；（4 4）单击）单击“确定确定”按钮，出现书签标记按钮，出现书签标记2 2）创建到书签的超链接）创建到书签的超链接, ,步骤如下：步骤如下：（1 1）在在“创创建建超超链链接接”对对话话框框中中，选选定定已已经经插插入入书书签签的的目目标标网网页页，在在“可可选选”区区域域中中单单击击“书书签签”下下拉拉按

85、按钮钮，在在列列表表中中选选择择链链接接的书签名称（见图的书签名称（见图9-189-18）；）；（2 2）单击）单击“确定确定”按钮，完成超链接的制作。按钮，完成超链接的制作。 。图9-17 插入书签 图9-18 创建到书签的超链接 返 回8/30/202463计算机文化基础 目 录上一页下一页 结 束为图形添加热点为图形添加热点3. 3. 为图形添加热点为图形添加热点 在在图图形形上上创创建建热热点点，即即把把同同一一个个图图形形作作为为多多个个超超链链接接的的载载体体。假假如如我我们们通通过过山山东东地地图图浏浏览览山山东东各各城城市市的的民民俗俗风风情情，当当鼠鼠标标移移动动至至地地图图

86、上上的的各各个个城城市市时时，光光标标变变为为手手形形，单单击击后后打打开开描描述述该该城城市市民民俗俗风风情情的的页页面面，这这里里就就为为图图形形添添加加了了热热点点。操作步骤如下：操作步骤如下：（1 1）在网页视图中，选择需要添加热点的图形。）在网页视图中，选择需要添加热点的图形。（2 2）在在“图图片片”工工具具栏栏中中，单单击击长长方方形形、圆圆形形或或多多边边形形热热点点按按钮匹配需要的形状。钮匹配需要的形状。（3 3）在在图图形形上上，依依所所选选形形状状画画上上矩矩形形、圆圆形形或或多多边边形形。画画多多边边形形时时，可可单单击击多多边边形形的的第第一一个个角角，然然后后单单击

87、击要要放放置置多多边边形形每每个角的位置，最后双击完成。个角的位置，最后双击完成。（4 4）松松开开鼠鼠标标按按钮钮后后，弹弹出出“创创建建超超链链接接”对对话话框框，按按照照创创建建超链接中所讲方法创建超链接即可。超链接中所讲方法创建超链接即可。 重重复复步步骤骤（2 2）（4 4），在在选选定定的的图图形形上上创创建建超超链链接接到到其其他他网网页。页。8/30/202464计算机文化基础 目 录上一页下一页 结 束为图形添加热点为图形添加热点 也也可可以以添添加加文文本本热热点点到到图图形形中中，文文本本热热点点是是已已经经放放在在图图形形上上并并分分配配了了超超链链接接的的文文本本字字

88、符符串串。当当站站点点访访问问者者鼠鼠标标移移动动到到热热点点位位置置时时，光光标标变变为为手手形形（见见图图9-9-1919），单单击击鼠鼠标标以以后后，超超链链接接的的目目标标网网页页就就会会显显示示在在WebWeb浏览器窗口中。浏览器窗口中。 图图9-19 9-19 为图形添加热点为图形添加热点 添添加加图图形形或或文文本本热热点点后后，用用户户可可以以方方便便地地对对热热点点进进行行编编辑辑，如如调调整整热热点点大大小小、编编辑辑热热点点的的URLURL、移移动动和和删除热点等操作。删除热点等操作。返 回8/30/202465计算机文化基础 目 录上一页下一页 结 束导航栏导航栏4.

89、4. 使用导航栏使用导航栏 为为了了使使浏浏览览者者能能在在站站点点中中的的各各个个网网页页之之间间切切换换浏浏览览，可可以以在在每每一一个个网网页页中中分分别别设设定定链链接接到到各各网网页页的的超超链链接接，但但是是这这样样做做非非常常烦烦琐琐，为为此此，FrontPage FrontPage 20002000提提供供了了“导导航航栏栏”功功能能。导导航航栏栏是是一一组组超超链链接接，用用来来浏浏览览站站点点多多个个主主要要的的网网页页。用用户户可可以以在在站站点点的的每个网页上设置一个导航栏，这样可以方便地转向其他主要网页。每个网页上设置一个导航栏，这样可以方便地转向其他主要网页。 Fr

90、ontPage FrontPage 20002000可可以以根根据据当当前前站站点点的的导导航航结结构构自自动动设设置置导导航航栏栏。导导航航结结构构决决定定导导航航栏栏上上有有哪哪些些超超链链接接，而而网网页页标标题题决决定定超超链链接的标签。要为某个站点设置导航结构，具体步骤如下：接的标签。要为某个站点设置导航结构，具体步骤如下：（1 1）在在FrontPage FrontPage 20002000中中打打开开需需要要设设计计导导航航结结构构的的站站点点，切切换换到到导导航视图（图航视图（图9-39-3）；）；（2 2）导导航航视视图图显显示示出出当当前前站站点点的的链链接接结结构构，用用

91、户户可可以以进进行行多多种种操操作作，如如通通过过拖拖曳曳操操作作改改变变链链接接结结构构，重重新新设设置置导导航航结结构构中中某某个个网网页页的的标题等。标题等。8/30/202466计算机文化基础 目 录上一页下一页 结 束导航栏导航栏 设置好导航结构后，就可以插入导航栏了，具体步骤如下：设置好导航结构后，就可以插入导航栏了，具体步骤如下：（1 1）将光标设置在要插入导航栏的位置；）将光标设置在要插入导航栏的位置；（2 2）从从“插插入入”菜菜单单中中选选择择“导导航航栏栏”命命令令，打打开开“导导航航栏栏属属性性”对对话框；话框；（3 3）在在“要要添添加加到到网网页页的的超超链链接接”

92、区区域域中中设设定定所所需需的的超超链链接接选选项项（图图9-209-20），当当选选择择了了一一个个选选项项时时，相相应应的的超超链链接接就就以以蓝蓝色色出出现现在在结结构示意图中；构示意图中；（4 4）在）在“方向和外观方向和外观”区域中选择所需的方向和外观选项；区域中选择所需的方向和外观选项；（5 5）单击）单击“确定确定”按钮，导航栏出现在网页中的插入点位置。按钮，导航栏出现在网页中的插入点位置。 当当网网站站中中网网页页的的链链接接结结构构发发生生改改变变时时，导导航航栏栏将将自自动动进进行行调调整整，保持与变化后的链接结构的一致性。保持与变化后的链接结构的一致性。图9-20 “导航

93、栏属性”对话框返 回8/30/202467计算机文化基础 目 录上一页下一页 结 束9.4 9.4 网网 页页 布布 局局 网网页页的的布布局局设设计计，是是将将文文字字、图图形形、图图像像等等网网页页元元素素，根根据据特特定定的的内内容容和和主主题题，在在网网页页所所限限定定的的范范围围中中进进行行视视觉觉的的关关联联与与配配置置，从从而而将将设计意图以视觉形式表现出来。设计意图以视觉形式表现出来。 网网页页的的布布局局一一般般通通过过使使用用表表格格和和框框架架来来实实现。现。8/30/202468计算机文化基础 目 录上一页下一页 结 束9.4 9.4 网网 页页 布布 局局9.4.1

94、9.4.1 使用表格使用表格9.4.2 9.4.2 框架框架返 回8/30/202469计算机文化基础 目 录上一页下一页 结 束9.4.1 9.4.1 创建和使用表格创建和使用表格 表表格格由由行行和和列列交交叉叉所所形形成成的的单单元元格格组组成成。在在单单元元格格中中可可以以放放置置任任何何对对象象，例例如如文文本本、图图像像、表表单单、FrontPageFrontPage组组件件等等。利利用用表表格格可可以以有有条条理理地地排排列列数数据据或或者者组组织织网网页页布布局局。表表格格可可以以将将文文本本排排列列成成并并列列的的段段落落，或或模模拟拟文文本本的的分分栏栏形形式式，也也可可以

95、以利利用用宽宽度度固固定定的表格在网页上为文本提供边界。的表格在网页上为文本提供边界。 FrontPage FrontPage 20002000提提供供了了与与WordWord字字处处理理软软件件类类似似的的表表格格处处理理功功能，在网页中可以轻松地创建和处理表格。能，在网页中可以轻松地创建和处理表格。1. 1. 创建表格创建表格 创建表格有以下三种方法：创建表格有以下三种方法：（1 1）可可以以使使用用“常常用用”工工具具栏栏中中的的“插插入入表表格格”按按钮钮，快快速速地地插插入入表格。表格。（2 2）使使用用菜菜单单命命令令可可以以对对插插入入的的表表格格进进行行精精确确的的设设置置，包

96、包括括行行和和列列的数目、边框尺寸以及单元格宽度等。的数目、边框尺寸以及单元格宽度等。（3 3）从）从“表格表格”菜单中选择菜单中选择“手绘表格手绘表格”命令，手动绘制表格。命令，手动绘制表格。8/30/202470计算机文化基础 目 录上一页下一页 结 束设置表格属性设置表格属性2. 2. 设置表格属性设置表格属性 插插入入表表格格后后，打打开开如如图图9-219-21所所示示的的“表表格格属属性性”对话框，可以设置表格属性。对话框，可以设置表格属性。图9-21 设置表格属性 8/30/202471计算机文化基础 目 录上一页下一页 结 束设置表格属性设置表格属性对表格属性的设置说明如下：对

97、表格属性的设置说明如下：对对齐齐方方式式：可可以以选选择择左左对对齐齐、右右对对齐齐、水水平平居居中中和和两两端端对对齐。该属性决定表格在网页中的相对位置。齐。该属性决定表格在网页中的相对位置。浮浮动动：可可以以选选择择左左对对齐齐、右右对对齐齐。该该属属性性决决定定表表格格与与其其他他网页元素的排列关系，即网页元素的排列关系，即“文字环绕文字环绕”效果。效果。指指定定宽宽度度和和高高度度：设设置置表表格格的的大大小小。可可以以使使用用绝绝对对大大小小“像素像素”或相对大小或相对大小“百分比百分比”。单元格边距：设置表格线与表格内容的距离。单元格边距：设置表格线与表格内容的距离。单单元元格格间

98、间距距：设设置置两两个个相相邻邻单单元元格格边边框框的的距距离离如如图图9-229-22所所示。示。 图图9-22 9-22 单元格边距与单元格间距单元格边距与单元格间距边框：粗细以像素为单位，可以选择合适的边框颜色。边框：粗细以像素为单位，可以选择合适的边框颜色。背景：可以指定背景颜色或背景图像。背景：可以指定背景颜色或背景图像。8/30/202472计算机文化基础 目 录上一页下一页 结 束调整表格调整表格3. 3. 调整表格调整表格 创创建建表表格格后后，可可以以对对表表格格单单元元格格、行行和和列列的的布布局局和和结结构构进进行行调调整整，具具体体操操作作有有：调调整整行行、列列或或单

99、单元元格格；插插入入行行、列列或或单单元元格格；删删除除行行、列列或或单单元元格格；合合并并、拆拆分分单单元元格格；平平均均分分布布行行高高、列列宽宽；设设置置单单元元格格属属性性等等。在在“单单元元格格属属性性”对对话话框框中中，可可以以设设置置单单元元格格中中内内容容的的布布局局，精精确确定定义义单单元元格格的的宽宽度度、高高度度，确确定定单单元元格格的的背背景景以以及边框的颜色等。及边框的颜色等。 返 回8/30/202473计算机文化基础 目 录上一页下一页 结 束9.4.2 创建框架创建框架 框架的使用是进行网页布局设计的一种框架的使用是进行网页布局设计的一种重要手段。框架将浏览器窗

100、口划分为几个区重要手段。框架将浏览器窗口划分为几个区域，在每个框架中都可以显示一个独立的网域，在每个框架中都可以显示一个独立的网页。浏览器窗口中显示的网页实际是这些框页。浏览器窗口中显示的网页实际是这些框架的集合，因此被称为框架网页。框架网页架的集合，因此被称为框架网页。框架网页并不包含显示的内容，只是记录了该框架网并不包含显示的内容，只是记录了该框架网页包含几个框架、其拆分方式以及每个框架页包含几个框架、其拆分方式以及每个框架中显示哪个网页（与其他网页的超链接）等。中显示哪个网页（与其他网页的超链接）等。 8/30/202474计算机文化基础 目 录上一页下一页 结 束创建框架创建框架1.

101、1. 创建框架创建框架 在在FrontPage FrontPage 20002000中中，可可以以使使用用框框架架网网页页布布局局模模板板轻轻松松创创建建框框架架网网页页。具具体体步步骤骤如如下：下：（1 1）在在“文文件件”菜菜单单的的“新新建建”子子菜菜单单中中选选择择“网页网页”命令，打开命令，打开“新建新建”对话框；对话框；（2 2）选选中中“框框架架网网页页”选选项项卡卡，选选择择所所需需的的模模板板，如如“目目录录”模模板板，在在“说说明明”区区域域中中显显示示所所选选模模板板的的描描述述，在在“预预览览”区区域域中中可可以以预预览览框架网页的布局；框架网页的布局；8/30/202

102、475计算机文化基础 目 录上一页下一页 结 束创建框架创建框架3）单击）单击“确定确定”按钮，完成框架网页的创建（见图按钮，完成框架网页的创建（见图9-23）。）。 在在图图9-23所所示示窗窗口口的的底底部部出出现现了了两两个个新新的的标标签签，“无无框框架架”视视图图为为不不能能支支持持框框架架的的浏浏览览器器创创建建替替代代网网页页。“框框架架网网页页HTML”视视图图显显示示框框架架网网页页的的HTML代码。代码。 在在每每个个框框架架中中，单单击击“新新建建网网页页”按按钮钮可可以以建建立立显显示示在在该该框框架架中中的的新新网网页页。单单击击“设设置置初初始始网网页页”按按钮钮可

103、可以以建建立立与与已已经经存存在在网网页页的的超超链链接接，从从而而在在此框架中显示出来。此框架中显示出来。图9-23 “目录”框架网页 8/30/202476计算机文化基础 目 录上一页下一页 结 束保存框架网页保存框架网页2. 2. 保存框架网页保存框架网页 当当完完成成框框架架网网页页之之后后，就就需需要要保保存存这这个个框框架架网网页页。操操作作步步骤骤如下：如下：（1 1）单击）单击“常用常用”工具栏中的工具栏中的“保存保存”按钮，打开按钮，打开“另存为另存为”对对 话框，在右边的框架网页预览图中，其中一个框架话框，在右边的框架网页预览图中，其中一个框架 高亮显示，表示正在保存该网页

104、；高亮显示，表示正在保存该网页；（2 2）在）在“文件名文件名”框中输入网页名称；框中输入网页名称；（3 3）单击）单击“更改更改”按钮，设置网页的标题；按钮，设置网页的标题；（4 4）单击）单击“保存保存”按钮，该网页保存完毕，框架图中的另按钮，该网页保存完毕，框架图中的另 一个框架处于高亮状态；一个框架处于高亮状态；（5 5）重复步骤（）重复步骤（2 2）（）（4 4）的操作；）的操作；（6 6）当对话框中的整个框架处于高亮状态时，表示正在）当对话框中的整个框架处于高亮状态时，表示正在 保存框架网页本身；保存框架网页本身；（7 7）输入框架网页的文件名称及标题；）输入框架网页的文件名称及标

105、题；（8 8）单击）单击“保存保存”按钮。按钮。8/30/202477计算机文化基础 目 录上一页下一页 结 束拆分框架拆分框架3. 3. 拆分框架拆分框架 当当使使用用模模板板创创建建的的框框架架结结构构不不能能满满足足需需要要时时，可可以以通通过过拆拆分分框框架架制制作作出出更更为为复复杂杂的的框框架架网网页页。操作步骤如下：操作步骤如下：（1 1）选择要拆分的框架；）选择要拆分的框架；（2 2）在在“框框架架”菜菜单单中中选选择择“拆拆分分框框架架”命命令令，打开打开“拆分框架拆分框架”对话框；对话框；（3 3）根根据据需需要要选选择择“拆拆分分为为列列”或或“拆拆分分成成行行”选项；选

106、项；（4 4）单击）单击“确定确定”按钮完成拆分。按钮完成拆分。8/30/202478计算机文化基础 目 录上一页下一页 结 束删除框架删除框架4. 4. 删除框架删除框架 可可以以从从框框架架结结构构中中删删除除指指定定的的框框架架。此此时时，系系统统只只是是把把框框架架从从框框架架网网页页中中删删去去，而而此此框框架架中的网页文件仍然存在。中的网页文件仍然存在。 操操作作方方法法是是：选选择择要要删删除除的的框框架架，在在“框框架架”菜单中选择菜单中选择“删除框架删除框架”命令即可。命令即可。8/30/202479计算机文化基础 目 录上一页下一页 结 束设置框架属性设置框架属性5. 5.

107、 设置框架属性设置框架属性 通通过过对对框框架架属属性性的的设设置置，可可以以更更改改框框架架超超链链接接的的网网页页、调调整整框架大小等。框架大小等。 基基本本操操作作是是：选选择择目目标标框框架架，从从“框框架架”菜菜单单中中选选择择“框框架架属属性性”命命令令，出出现现如如图图9-249-24所所示示的的“框框架架属属性性”对对话话框框，设设置置框架属性。框架属性。 单单击击“框框架架属属性性”对对话话框框中中的的“框框架架网网页页”按按钮钮，弹弹出出如如图图9-259-25所所示示“网网页页属属性性”对对话话框框，在在这这里里可可以以调调整整框框架架间间距距。清清除除“显示边框显示边框

108、”复选框时，可以隐藏框架边框。复选框时，可以隐藏框架边框。图9-24设置框架属性图9-25设置框架边框显示状态8/30/202480计算机文化基础 目 录上一页下一页 结 束9.4.3 创建框架超链接创建框架超链接9.4.3 9.4.3 创建框架超链接创建框架超链接 框框架架超超链链接接的的使使用用，使使网网页页之之间间的的组组织织更更加加灵灵活活、有有效。效。1. 1. 创建框架超链接创建框架超链接 若要设置框架超链接，执行下列操作：若要设置框架超链接，执行下列操作：（1 1）选择要定义超链接的文字或图片；）选择要定义超链接的文字或图片；（2 2）单单击击“常常用用”工工具具栏栏上上的的“超

109、超链链接接”按按钮钮，出出现现“创建超链接创建超链接”对话框；对话框；（3 3）在）在“URL”URL”框中输入链接的目标网页；框中输入链接的目标网页；（4 4）单单击击“更更改改目目标标框框架架”按按钮钮，出出现现“目目标标框框架架”对对话框；话框；（5 5）在）在“当前框架网页当前框架网页”区域中单击要用作目标的框架；区域中单击要用作目标的框架；（6 6）单单击击“确确定定”按按钮钮，返返回回到到“创创建建超超链链接接”对对话话框框，在在“目标框架目标框架”栏中显示出设置的目标框架名称；栏中显示出设置的目标框架名称；（7 7）单击）单击“确定确定”按钮。按钮。8/30/202481计算机文

110、化基础 目 录上一页下一页 结 束使用特殊的目标框架使用特殊的目标框架2. 2. 使用特殊的目标框架使用特殊的目标框架 在在指指定定目目标标框框架架时时，除除了了当当前前的的框框架架之之外外，还还提提供供了了一一些些特特殊殊的的框框架架来来创创建建不不同同效效果果的的目目标标框框架架。这这些些特特殊殊框框架架位位于于“目目标标框框架架”对对话话框框中中的的“公公用用的目标区的目标区”区域，有以下几种：区域，有以下几种： 相同框架：将链接的网页显示在包含该超链接的相同框架：将链接的网页显示在包含该超链接的 同一个框架内。同一个框架内。 整页：将框架展开为整个窗口后，显示链接网页。整页：将框架展开

111、为整个窗口后，显示链接网页。 新建窗口：打开另外一个新窗口，显示链接网页。新建窗口：打开另外一个新窗口，显示链接网页。 父框架：在当前框架的上层框架内显示链接网页。父框架：在当前框架的上层框架内显示链接网页。返 回8/30/202482计算机文化基础 目 录上一页下一页 结 束9.5 创建表单页面 表表单单是是WebWeb服服务务器器与与客客户户交交互互的的手手段段。表表单单的的作作用用就就是是收收集集浏浏览览者者的的输输入入信信息息，从从而而实实现现网网站站与与浏浏览览者者的的交交互互。例例如如，用用户户可可以以用用表表单单收收集集客客户户的的个个人人资资料料，也也可可以以用用表表单单设设计

112、计一一个个订订货货单单，让让客客户户指指定定要要购购买买的的商商品品名名称、型号、数量等。称、型号、数量等。8/30/202483计算机文化基础 目 录上一页下一页 结 束9.5 创建表单页面9.5.1 插入表单域插入表单域9.5.2 提交表单提交表单返 回8/30/202484计算机文化基础 目 录上一页下一页 结 束9.5.1 插入表单域 表单是由表单域组成的，表单域是客户输表单是由表单域组成的，表单域是客户输入信息的区域。在入信息的区域。在FrontPage 2000FrontPage 2000中，有中，有6 6种种表单域：单行文本框、滚动文本框、复选框、表单域：单行文本框、滚动文本框、

113、复选框、单选按钮、下拉菜单、普通按钮。单选按钮、下拉菜单、普通按钮。 8/30/202485计算机文化基础 目 录上一页下一页 结 束单行文本框单行文本框1. 1. 单行文本框单行文本框 单单行行文文本本框框用用于于让让客客户户输输入入一一行行文文字字。要要插插入入一一个个单单行行文文本本输输入入框框，使使用用“插插入入”菜菜单单上上的的“表表单单”命命令令，再再选择选择“单行文本框单行文本框”。单行文本框如图。单行文本框如图9-269-26所示。所示。图图9-26 9-26 单行文本框单行文本框 要要设设置置单单行行文文本本框框的的属属性性，可可以以右右键键单单击击单单行行文文本本框框，在在

114、弹弹出出的的快快捷捷菜菜单单中中选选择择“表表单单域域属属性性”命命令令，也也可可以以直直接接双双击击单单行行文文本本框框，FrontPage FrontPage 20002000将将打打开开“文文本本框框属性属性”对话框。对话框。8/30/202486计算机文化基础 目 录上一页下一页 结 束滚动文本框滚动文本框2. 2. 滚动文本框滚动文本框 滚动文本框允许客户输入多行文本。滚动文本框允许客户输入多行文本。 要要插插入入滚滚动动文文本本框框，使使用用“插插入入”菜菜单单上上的的“表表单单”命命令令，再再选选择择“滚滚动动文文本本框框”。滚滚动动文文本本框框如如图图9-279-27所所示。示

115、。图图9-27 9-27 滚动文本框滚动文本框 与与单单行行文文本本框框一一样样，设设置置滚滚动动文文本本框框的的属属性性，可可以以右右键键单单击击滚滚动动文文本本框框，在在弹弹出出的的快快捷捷菜菜单单中中选选择择“表表单单域域属属性性”命命令令，或或直直接接双双击击滚滚动动文文本本框框，FrontPage FrontPage 20002000将打开将打开“滚动文本框属性滚动文本框属性”对话框。对话框。8/30/202487计算机文化基础 目 录上一页下一页 结 束复选框复选框3. 3. 复选框复选框 复复选选框框是是提提供供给给客客户户的的一一个个选选项项，一一般般彼彼此此独独立立的的多多个

116、个复复选选框框组组成成一一组组，客客户户可可以以同同时时选选中中所所有有选选项项，也也可以一个都不选。可以一个都不选。 要要插插入入一一个个复复选选框框，使使用用“插插入入”菜菜单单上上的的“表表单单”命令，再选择命令，再选择“复选框复选框”。 要要设设置置复复选选框框的的属属性性，右右键键单单击击复复选选框框，在在弹弹出出的的菜菜单单中中选选择择“表表单单域域属属性性”命命令令，或或直直接接双双击击复复选选框框，FrontPage FrontPage 20002000将将打打开开“复复选选框框属属性性”对对话话框框，如如图图9-9-2828所示。所示。图图9-28 “9-28 “复选框属性复

117、选框属性”对话框对话框 首首先先应应当当为为复复选选框框命命名名，当当客客户户提提交交表表单单时时，复复选选框框的的名名称称和和状状态态配配对对发发送送给给WebWeb服服务务器器端端的的表表单单处处理理程程序。可以设置复选框的初始状态是选中还是不选中。序。可以设置复选框的初始状态是选中还是不选中。8/30/202488计算机文化基础 目 录上一页下一页 结 束单选按钮单选按钮4. 4. 单选按钮单选按钮 单单选选按按钮钮通通常常组组成成一一组组互互斥斥的的选选项项，客客户户只只能选择其中一项。能选择其中一项。 要要插插入入单单选选按按钮钮，使使用用“插插入入”菜菜单单上上的的“表单表单”命令

118、，再选择命令，再选择“单选按钮单选按钮”。 如如果果表表单单上上有有多多个个单单选选按按钮钮，FrontPage FrontPage 20002000默认选中第一个。默认选中第一个。 要要修修改改单单选选按按钮钮的的属属性性，右右键键单单击击单单选选按按钮钮，在在弹弹出出的的菜菜单单中中选选择择“表表单单域域属属性性”命命令令，或或直直接接双双击击单单选选按按钮钮，FrontPage FrontPage 20002000将将打打开开“单选按钮属性单选按钮属性”对话框。对话框。 要注意的是，如果把多个单选按钮编成一组，要注意的是，如果把多个单选按钮编成一组，必须使它们的组名相同。此外，可以单击必

119、须使它们的组名相同。此外，可以单击“验验证有效性证有效性”按钮，限定客户按一定的规则做出按钮，限定客户按一定的规则做出选择。选择。 8/30/202489计算机文化基础 目 录上一页下一页 结 束下拉菜单下拉菜单5. 5. 下拉菜单（下拉列表框）下拉菜单（下拉列表框） 下下拉拉菜菜单单用用于于从从一一个个列列表表中中选选择择一一项项或或几几项项。从从功功能能的的角角度度讲讲，可可以以用用一一组组复复选选框框或或一一组组单单选选按按钮钮来来实实现现，但但下下拉拉菜菜单占用的网页空间相对较小。单占用的网页空间相对较小。 要要插插入入下下拉拉菜菜单单，使使用用“插插入入”菜菜单单上上的的“表表单单”

120、命命令令，再再选选择择“下下拉拉菜菜单单”。插插入入的的下下拉拉菜菜单单是是空空的的，用用户户可可以以右右键键单单击击下下拉拉菜菜单单，在在弹弹出出的的菜菜单单中中选选择择“表表单单域域属属性性”命命令令，或或直直接接双双击击下下拉拉菜菜单单，FrontPage FrontPage 20002000将将打打开开“下下拉拉菜菜单单属属性性”对话框，如图对话框，如图9-299-29所示。所示。图9-29“下拉菜单属性”对话框8/30/202490计算机文化基础 目 录上一页下一页 结 束下拉菜单下拉菜单 单击单击“添加添加”按钮，将打开按钮，将打开“添加选项添加选项”对对话框，在话框，在“选项选项

121、”框内输入名称，当客户提交框内输入名称，当客户提交表单时，提交的是选项的名称。如果想提交另表单时，提交的是选项的名称。如果想提交另外的值，应当选中外的值，应当选中“指定值指定值”复选框，然后键复选框，然后键入一个值。此外，用户还可以指定选项的初始入一个值。此外，用户还可以指定选项的初始状态是选定还是未选定。状态是选定还是未选定。8/30/202491计算机文化基础 目 录上一页下一页 结 束按钮按钮6. 6. 按钮按钮 一一个个表表单单上上至至少少要要有有一一个个“提提交交”按按钮钮和和一一个个“全全部部重重写写”按按钮钮。“提提交交”按按钮钮的的作作用用是是把把表表单单上上的的数数据据提提交

122、交给给WebWeb服服务务器器的的表表单单处处理理程程序序，“全全部部重重写写”按按钮钮的作用是把表单上的数据清空，以便重新填写。的作用是把表单上的数据清空，以便重新填写。 要要插插入入按按钮钮，使使用用“插插入入”菜菜单单上上的的“表表单单”命命令令，再选择再选择“按钮按钮”。 设设置置按按钮钮的的属属性性，可可以以右右键键单单击击按按钮钮，在在弹弹出出的的菜菜单单中中选选择择“表表单单域域属属性性”命命令令，或或直直接接双双击击按按钮钮，打打开开“按钮属性按钮属性”对话框。对话框。 可可以以把把按按钮钮作作为为“提提交交”、“全全部部重重写写” ” 或或者者普普通通按按钮钮。对对于于“提提

123、交交”按按钮钮和和“全全部部重重写写”按按钮钮来来说说，它们的动作特性是默认的。它们的动作特性是默认的。返 回8/30/202492计算机文化基础 目 录上一页下一页 结 束9.5.2 提交表单WebWeb服服务务器器怎怎样样获获取取客客户户在在表表单单中中填填写写的的信信息息呢呢？当当客客户户单单击击“提提交交”按按钮钮后后，WebWeb服服务务器器用用表表单单处处理理程程序序来来处处理理表表单单上上的的信信息息，表表单单处处理理程程序序可可以以是是注注册册组组件件，也也可可以是自定义的以是自定义的ISAPIISAPINSAPINSAPI应用程序或应用程序或CGICGI脚本等。脚本等。 表表

124、单单处处理理程程序序位位于于WebWeb服服务务器器端端，用用于于处处理理客客户户提提交交过来的表单上的内容，或者发送确认信息给客户。过来的表单上的内容，或者发送确认信息给客户。 要要指指定定表表单单处处理理程程序序，在在表表单单上上单单击击鼠鼠标标右右键键，在在弹弹出出的的菜菜单单中中选选择择“表表单单属属性性”命命令令，打打开开“表表单单属属性性”对话框，如图对话框，如图9-309-30所示。所示。图9-30 设置表单属性8/30/202493计算机文化基础 目 录上一页下一页 结 束提交表单 如如果果要要使使用用FrontPage FrontPage 20002000默默认认的的表表单单

125、处处理理程程序序，则则选选择择“发发送送到到”单单选选按按钮钮。默默认认情情况况下下，客客户户在在表表单单上上填填写写的的信信息息以以文文本本文文件件的的形形式式保保存存到到WebWeb服服务务器器的的_ _privateprivate文文件件夹夹，文文件件名名为为：form_results.txtform_results.txt。用用户户还还可可以以把把表表单单结结果果发发送送到到某个某个E-mailE-mail地址。地址。 如如果果不不想想使使用用FrontPage FrontPage 20002000默默认认的的表表单单处处理理程程序序，可可以以选选择择“发发送送到到其其他他对对象象”单

126、单选选按按钮钮，然然后后在在下下拉拉列列表表中中选选择择“自自定定义义ISAPIISAPI、NSAPINSAPI、CGICGI或或ASPASP脚脚本本”或或者者FrontPage FrontPage 20002000预预定定义义的的“讨讨论论表表单单处处理理程程序序”或或者者“注注册册表表单单处处理理程程序序”。 注注意意：使使用用FrontPage FrontPage 20002000默默认认的的表表单单处处理理程程序序或或FrontPage FrontPage 20002000预预定定义义的的“讨讨论论表表单单处处理理程程序序”或或者者“注注册册表表单单处处理理程程序序”，WebWeb服服

127、务务器器必必须须安安装装FrontPageFrontPage服服务务器器扩扩展展（FrontPage FrontPage Server Server ExtensionExtension），否否则则表表单单功功能能将将不不会会产产生任何效用。生任何效用。返 回8/30/202494计算机文化基础 目 录上一页下一页 结 束9.6 网页的发布9.6.1 网站和网页的设计原则网站和网页的设计原则9.6.2 站点的发布站点的发布和维护和维护返 回8/30/202495计算机文化基础 目 录上一页下一页 结 束9.6.1 网站和网页的设计原则 网网站站和和网网页页的的设设计计既既是是一一项项复复杂杂的

128、的技技术术也也是是一一门门艺艺术术。设设计计良良好好的的网网站站不不但但提提供供丰丰富富的的信信息息，而而且且给给用用户户带带来来愉愉悦悦的的浏浏览览体体验验。以以下下是是网网站站和和网网页页设设计计的的一一些些基基本原则。本原则。1 1）目标明确，重点突出）目标明确，重点突出 首首先先要要明明确确信信息息发发布布者者的的性性质质与与用用途途，并并了了解解主主要要浏浏览览对对象象以以及及其其进进行行的的操操作作，做做到到有有的的放放矢矢。然然后后，对对发发布布的的信信息息要要分分清清主主次次，面面面面俱俱到到可可能能使使浏浏览览者者难难以以找找到有用的信息，不能达到预期的目的。到有用的信息，不

129、能达到预期的目的。2 2）主题鲜明，层次清晰）主题鲜明，层次清晰 要做到主题鲜明，首先要设计好网站的主页。主页要做到主题鲜明，首先要设计好网站的主页。主页的设计要简洁，内容不宜过多，应该在主页上建立分类的设计要简洁，内容不宜过多，应该在主页上建立分类栏目。网页需要有层次清晰的结构，尤其是内容较多的栏目。网页需要有层次清晰的结构，尤其是内容较多的网页，可以根据内容进行归类，分成多个栏目，便于阅网页，可以根据内容进行归类，分成多个栏目，便于阅读。读。 8/30/202496计算机文化基础 目 录上一页下一页 结 束网站和网页的设计原则3 3）合理设置栏目）合理设置栏目 制制作作网网页页前前，要要先

130、先规规划划好好，确确定定合合理理的的栏栏目目和和板板块块。栏栏目目的的安安排排要要紧紧扣扣主主题题，既既要要考考虑虑网网页页内内容容的的分分类类，又又要要方方便浏览，并能对浏览者起到较好的导航作用。便浏览，并能对浏览者起到较好的导航作用。4 4）正确定位整体风格）正确定位整体风格 网网站站的的整整体体风风格格是是指指站站点点的的整整体体形形象象给给浏浏览览者者的的综综合合感感受受。整整体体风风格格是是非非常常抽抽象象的的概概念念，包包括括网网站站的的标标志志、色色彩彩、字字体体、标标语语、版版面面布布局局、内内容容价价值值等等诸诸多多因因素素，需需要要结结合合整整个个站站点点进进行行定定位位。

131、对对于于栏栏目目内内容容跨跨度度较较大大的的网网站站，可可以以考虑针对不同栏目采用不同的风格。考虑针对不同栏目采用不同的风格。5 5）页面布局合理）页面布局合理 网网页页设设计计要要针针对对所所要要表表达达的的信信息息进进行行合合理理的的布布局局，好好的的页页面面布布局局能能使使浏浏览览者者首首先先对对网网页页内内容容的的结结构构有有一一个个清清晰晰的的认认识识。可可以以使使用用表表格格辅辅助助页页面面元元素素的的布布局局，也也可可以以使使用用特特定定的的布布局局框框架架。页页面面布布局局要要注注意意保保证证重重点点内内容容放放置置在在屏屏幕幕中间的重点位置。中间的重点位置。8/30/2024

132、97计算机文化基础 目 录上一页下一页 结 束网站和网页的设计原则6 6）色彩搭配，和谐统一）色彩搭配，和谐统一 色色彩彩是是影影响响整整体体风风格格的的关关键键因因素素。不不同同的的色色彩彩搭搭配配产产生生不不同同的的效效果果，并并可可能能影影响响到到浏浏览览者者的的情情绪绪。一一般般来来说说，一一个个网网站站的的标标准准色色彩彩以以不不超超过过三三、四四种种为为宜宜，以以使使页面色彩丰富而又协调统一。页面色彩丰富而又协调统一。7 7）多媒体功能使用得当）多媒体功能使用得当 除除了了文文字字信信息息外外，网网站站中中图图片片、声声音音、动动画画以以及及视视频频等等多多媒媒体体信信息息的的使使

133、用用是是网网页页上上最最重重要要的的内内容容。它它们们的的使使用用可可以以丰丰富富画画面面，使使页页面面更更加加形形象象生生动动。但但这这些些文文件件都都不不应应该该太太大大，以以减减少少网网页页的的下下载载时时间间，提提高高用用户户浏浏览览信息的速度。信息的速度。返 回8/30/202498计算机文化基础 目 录上一页下一页 结 束9.6.2 站点的发布和维护 所所谓谓发发布布网网站站，就就是是在在FrontPage FrontPage 20002000中中把把创创建建或或修修改改后后的的网网站站中中的的内内容容上上传传到到WebWeb服服务务器器中中。为为了了便便于于用用户户发发布布站站点

134、点，FrontPage FrontPage 20002000提提供供了了一一个个相相当当方方便便的的网网页页发发布工具。发布站点的基本方法是：布工具。发布站点的基本方法是：（1 1）在）在FrontPage 2000FrontPage 2000中，打开站点；中，打开站点；（2 2）在在“常常用用”工工具具栏栏中中单单击击“发发布布站站点点”按按钮钮，或或者者从从“文文件件”菜菜单单中中选选择择“发发布布站站点点”命命令令，打打开开“发发布布站站点点”对话框（见图对话框（见图9-319-31）；）； 图9-31发布站点8/30/202499计算机文化基础 目 录上一页下一页 结 束站点的发布和维

135、护（3 3）在）在“指定发布站点的位置指定发布站点的位置”文本框中输入要发布站点的文本框中输入要发布站点的URLURL或或IPIP地址；地址；（4 4）单单击击“选选项项”按按钮钮，可可以以选选择择发发布布所所需需的的选选项项，可可以以使使用用默默认认选选项项“只发布更改过的网页只发布更改过的网页”，这样可以节省更新上传的时间；，这样可以节省更新上传的时间；（5 5）单击）单击“发布发布”按钮，按钮，FrontPage 2000FrontPage 2000开始检测开始检测WWWWWW服务器的状态；服务器的状态；（6 6）与服务器连接成功后，就会出现）与服务器连接成功后，就会出现“要求提供用户名

136、和密码要求提供用户名和密码”对话框；对话框；（7 7）设置完毕后，单击）设置完毕后，单击“确定确定”按钮，开始站点的发布过程。按钮，开始站点的发布过程。 当当网网站站发发布布成成功功后后，在在浏浏览览器器中中打打开开站站点点仔仔细细浏浏览览，检检查查站站点点中中每每个网页是否正确地显示。个网页是否正确地显示。 也也 许许 你你 的的 WWWWWW服服 务务 器器 不不 支支 持持 FrontPageFrontPage服服 务务 器器 扩扩 展展 ， 此此 时时FrontPage FrontPage 20002000会会自自动动启启动动Web Web PublishingPublishing向向导导来来发发布布FrontPageFrontPage网网站站，Web Web PublishingPublishing向向导导能能够够以以FTPFTP上上传传的的方方式式发发布布网网站站，但但用用户必须给出户必须给出FTPFTP服务器名、用户名和密码。服务器名、用户名和密码。 当当网网页页内内容容有有更更新新时时，只只要要单单击击“常常用用”工工具具栏栏中中的的“发发布布站站点点”按钮，即可将修改过的网页上传。按钮，即可将修改过的网页上传。返 回8/30/2024100计算机文化基础