计算机课件第9章.ppt

1、第第 九九 章章 网网 页页 制制 作作 目 录上一页下一页 结 束2022-12-171计算机文化基础第九章 网页制作9.1 HTML简介简介 9.2 FrontPage概述概述 9.3网页制作网页制作 9.4网页布局网页布局 9.5创建表单页面创建表单页面 9.6网页的发布网页的发布 目 录上一页下一页 结 束2022-12-172计算机文化基础9.1 HTML简介9.1.1 HTML语言概述语言概述9.1.2 HTML语言的基本语法语言的基本语法返 回 目 录上一页下一页 结 束2022-12-173计算机文化基础9.1.1 HTML语言概述 HTML HTML即即HyperTextHy

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

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

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

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

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

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

8、LHTML世界！世界！/h1这里我们首先介绍这里我们首先介绍HTMLHTML语言的基本知识和语法。然后，语言的基本知识和语法。然后，讲授如何使用讲授如何使用HTMLHTML语言编写您的语言编写您的WebWeb页面。页面。/p 目 录上一页下一页 结 束2022-12-177计算机文化基础HTML语言概述 将上述代码用文本编辑器编辑并保存为一将上述代码用文本编辑器编辑并保存为一个扩展名为个扩展名为.htmhtm的文件，双击该文件图标，的文件，双击该文件图标，在浏览器中看到如下图所示的结果。在浏览器中看到如下图所示的结果。图9-1 目 录上一页下一页 结 束2022-12-178计算机文化基础HT

9、ML语言概述 从上例可以看出，一般从上例可以看出，一般HTMLHTML文件都是以文件都是以开头，以开头，以结束。其文件结构结束。其文件结构由以下两部分组成：由以下两部分组成：1 1）头部（）头部（HeadHead）HTMLHTML文件的头部由文件的头部由和和标标记定义。通常情况下，文件的标题、语言字记定义。通常情况下，文件的标题、语言字符集信息等都放在头部信息中。最常用到的符集信息等都放在头部信息中。最常用到的标记是标记是 title，它用于定义网，它用于定义网页文件的标题，当该网页文件被打开后，网页文件的标题，当该网页文件被打开后，网页文件的标题将出现在浏览器的标题栏中。页文件的标题将出现在

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

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

12、控制段落的对齐方式，其值可以是leftleft、centercenter、rightright，分别表示左对齐、居中和右，分别表示左对齐、居中和右对齐，默认值为左对齐。对齐，默认值为左对齐。使用格式如下：使用格式如下：p align=/p标记定义的两个段落之间留有一个空行。标记定义的两个段落之间留有一个空行。2 2）换行标记）换行标记 br 标记可以强制文本换行。该标记只有开始标记。标记可以强制文本换行。该标记只有开始标记。3 3）水平线标记）水平线标记 hr水平线标记水平线标记用于在网页中插入一条水平线。用于在网页中插入一条水平线。目 录上一页下一页 结 束2022-12-1711计算机文化

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

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

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

16、的粗体、斜体、上标、下标、下划线等，如下表所示。划线等，如下表所示。标记格式标记格式字形结果字形结果粗体粗体斜体斜体下划线下划线上标上标下标下标 目 录上一页下一页 结 束2022-12-1713计算机文化基础HTML语言的基本语法3.3.插入图片插入图片 标记将图片插入网页中。可以设置图片的大小以及相邻文字标记将图片插入网页中。可以设置图片的大小以及相邻文字的排列方式。该标记具有以下属性：的排列方式。该标记具有以下属性：（1 1）srcsrc属性：指明图片文件所在的位置。格式为：属性：指明图片文件所在的位置。格式为：=URL 其中其中URLURL是指图片文件存放的位置。是指图片文件存放的位置

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

18、式为：属性：设置图片文件的边框。格式为：=URL border=n 其中其中n n为像素数。为像素数。目 录上一页下一页 结 束2022-12-1714计算机文化基础HTML语言的基本语法（5 5）alignalign属性：设置图片相对于文本的位置关系。格式为：属性：设置图片相对于文本的位置关系。格式为：对齐方式可以是：对齐方式可以是：toptop（顶边对齐）、（顶边对齐）、middlemiddle（垂直居（垂直居中）、中）、bottombottom（底边对齐）、（底边对齐）、leftleft（左对齐）、（左对齐）、rightright（右对齐）。（右对齐）。4.4.超链接超链接 在在HTML

19、HTML语言中，语言中，和和标记用于设置网页中的超标记用于设置网页中的超链接链接hrefhref属性指明被超链接的文件地址。格式为：属性指明被超链接的文件地址。格式为：=URL超链接文本超链接文本/a 用于表示超链接的文本一般显示为蓝色并且加下划线。用于表示超链接的文本一般显示为蓝色并且加下划线。在浏览器中，当鼠标指针指向该文本时，箭头变为手形，在浏览器中，当鼠标指针指向该文本时，箭头变为手形，并在浏览器的状态栏中显示该超链接的地址。并在浏览器的状态栏中显示该超链接的地址。若使用图片做超链接，可使用如下格式完成：若使用图片做超链接，可使用如下格式完成：=URL2 目 录上一页下一页 结 束20

20、22-12-1715计算机文化基础HTML语言的基本语法5.5.使用表格使用表格 在网页中插入一个表格，需要用到一组在网页中插入一个表格，需要用到一组HTMLHTML标记。标记。定义表格的有关标记如下：定义表格的有关标记如下：table 定义表格。定义表格。/tr 定义表行。定义表行。td 定义表列。定义表列。常用的标记属性中，常用的标记属性中，borderborder属性用于设置表格边属性用于设置表格边框的宽度；框的宽度；widthwidth、heightheight属性设定表格或表项的宽属性设定表格或表项的宽度、高 度，取 值 可 以 是 像 素 数 或 百 分 数；度、高 度，取 值 可

21、 以 是 像 素 数 或 百 分 数；cellspacingcellspacing和和cellpaddingcellpadding属性分别用于设置单元格属性分别用于设置单元格之间的间隙和单元格内部空白；之间的间隙和单元格内部空白；alignalign属性设置表格属性设置表格或表项的对齐方式；或表项的对齐方式；bgcolorbgcolor和和backgroundbackground属性设置属性设置表格背景的颜色和背景图像。表格背景的颜色和背景图像。返 回 目 录上一页下一页 结 束2022-12-1716计算机文化基础9.2 FrontPage 2000概述 虽然使用一般的文本编辑器就可以编写虽

22、然使用一般的文本编辑器就可以编写HTMLHTML文档，但是使用专门的文档，但是使用专门的HTMLHTML编辑器或编辑器或WebWeb创作工具往往更加方便。具有创作工具往往更加方便。具有“所见即所得所见即所得”功能的功能的WebWeb页面创作工具可以使页面创作工具可以使WebWeb创作人员创作人员直接面对直接面对WebWeb页面进行编辑修改，并且能立即页面进行编辑修改，并且能立即看到看到WebWeb页面的显示效果。页面的显示效果。FrontPageFrontPage是微软公司开发的网页制是微软公司开发的网页制作和网站管理工具。作和网站管理工具。FrontPage 2000FrontPage 20

23、00是是Microsoft Office 2000Microsoft Office 2000的组件之一，与的组件之一，与OfficeOffice的其他组件高度融合。它界面友好，的其他组件高度融合。它界面友好，功能强大，易学易用，是目前使用较为广泛功能强大，易学易用，是目前使用较为广泛的网页制作、网站管理工具之一。的网页制作、网站管理工具之一。目 录上一页下一页 结 束2022-12-1717计算机文化基础9.2 FrontPage 2000概述9.2.1 FrontPage 2000的主要功能的主要功能9.2.2 FrontPage 2000的启动与退出的启动与退出9.2.3 网页与网站网页与

24、网站9.2.4 FrontPage 2000的编辑方式的编辑方式9.2.5 FrontPage 2000中的视图中的视图返 回 目 录上一页下一页 结 束2022-12-1718计算机文化基础9.2.1 FrontPage 2000的主要功能 FrontPage 2000FrontPage 2000的主要功能是制作网页和管理网站。的主要功能是制作网页和管理网站。使用使用FrontPage 2000FrontPage 2000可以创建新的网页，也可以打开可以创建新的网页，也可以打开并修改已经存在的网页。并修改已经存在的网页。FrontPage 2000FrontPage 2000提供了多种编辑提

25、供了多种编辑网页的方式，不但可以直接修改网页的方式，不但可以直接修改HTMLHTML，而且可以采用，而且可以采用“所所见即所得见即所得”的方式编辑网页，还可以使用菜单命令插入各的方式编辑网页，还可以使用菜单命令插入各种网页元素，使用对话框修改其属性，十分灵活。种网页元素，使用对话框修改其属性，十分灵活。在在FrontPage 2000FrontPage 2000中，可以很容易地插入文本、图片、中，可以很容易地插入文本、图片、表格、组件等元素；可以使用主题，共享边框，框架等管表格、组件等元素；可以使用主题，共享边框，框架等管理网页的外观；还可以使用表单等元素设计出交互式网页。理网页的外观；还可以

26、使用表单等元素设计出交互式网页。FrontPage 2000FrontPage 2000提供了强大的站点管理功能。一组相提供了强大的站点管理功能。一组相关网页和有关文件组成一个站点，站点也是关网页和有关文件组成一个站点，站点也是FrontPage FrontPage 20002000对网站进行管理的基本单位。在对网站进行管理的基本单位。在FrontPage 2000FrontPage 2000中可中可以轻松实现设计、管理、分析、发布和维护站点等工作。以轻松实现设计、管理、分析、发布和维护站点等工作。返 回 目 录上一页下一页 结 束2022-12-1719计算机文化基础9.2.2 FrontP

27、age 2000的启动与退出 1.FrontPage 20001.FrontPage 2000的启动的启动 FrontPage 2000FrontPage 2000可以按下列步骤启动：可以按下列步骤启动：（1 1）单击）单击“开始开始”按钮，在按钮，在“开始开始”菜单中单击菜单中单击“程程序序”；（2 2）在）在“程序程序”菜单中单击菜单中单击Microsoft FrontPageMicrosoft FrontPage，即，即可打开可打开Microsoft FrontPage 2000Microsoft FrontPage 2000窗口，如图窗口，如图9-29-2所所示。示。图图9-2 Mic

28、rosoft FrontPage 20009-2 Microsoft FrontPage 2000窗口窗口 另外，也可以在桌面上建立另外，也可以在桌面上建立FrontPage 2000FrontPage 2000快捷方式，快捷方式，后在桌面上双击该图标，即可启动后在桌面上双击该图标，即可启动FrontPage 2000FrontPage 2000。目 录上一页下一页 结 束2022-12-1720计算机文化基础FrontPage 2000的启动与退出2.FrontPage 20002.FrontPage 2000的退出的退出 FrontPage 2000FrontPage 2000的退出有以下

29、三种方式：的退出有以下三种方式：（1 1）选取）选取“文件文件”菜单中的菜单中的“退出退出”。（2 2）单击操作窗口中右上角的）单击操作窗口中右上角的“关闭关闭”按钮。按钮。（3 3）按快捷键）按快捷键Alt+F4Alt+F4。返 回 目 录上一页下一页 结 束2022-12-1721计算机文化基础9.2.3 网页与网站网页是网页是WWWWWW上的基本文档，用上的基本文档，用HTMLHTML书写，通常以书写，通常以.htmhtm或或.html.html为扩展名。网页可以独立存在，但常常作为网站的为扩展名。网页可以独立存在，但常常作为网站的一部分。网站是一组相关网页和有关文件的组合。网站一一部分

30、。网站是一组相关网页和有关文件的组合。网站一般有一个特殊的网页作为浏览的起始点，称为主页般有一个特殊的网页作为浏览的起始点，称为主页（HomepageHomepage），用来引导用户访问其他网页。），用来引导用户访问其他网页。网站通常位于网站通常位于WebWeb服务器上。客户机通过网络向服务器上。客户机通过网络向WebWeb服服务器发送请求，务器发送请求，WebWeb服务器响应客户机的请求，并使用服务器响应客户机的请求，并使用HTTPHTTP协议将网页和有关文件通过网络传送回客户机。客户机端协议将网页和有关文件通过网络传送回客户机。客户机端使用网页浏览器就能看到网页的内容了。使用网页浏览器就能

31、看到网页的内容了。在在FrontPage 2000FrontPage 2000中，可以建立和编辑独立的网页，中，可以建立和编辑独立的网页，也可以设计和管理站点。在站点中可以包含大量网页和各也可以设计和管理站点。在站点中可以包含大量网页和各种文件，甚至可以包含子站点，而且只有在使用站点时，种文件，甚至可以包含子站点，而且只有在使用站点时，FrontPage 2000FrontPage 2000的许多特性才有效。例如：在单个网页的的许多特性才有效。例如：在单个网页的环境中，导航栏变得毫无意义。环境中，导航栏变得毫无意义。目 录上一页下一页 结 束2022-12-1722计算机文化基础网页与网站 通

32、常，在通常，在FrontPage 2000FrontPage 2000中建立的站中建立的站点需要发布到点需要发布到InternetInternet中的中的WebWeb服务器上，服务器上，成为真正意义上的网站，成为真正意义上的网站，InternetInternet上的用上的用户才能访问。有时，可以在同一台计算机户才能访问。有时，可以在同一台计算机上安装上安装WebWeb服务器端软件（如服务器端软件（如IISIIS等），从等），从而可以将站点发布到本机进行测试。而可以将站点发布到本机进行测试。用用FrontPage 2000FrontPage 2000也可以建立基于本地也可以建立基于本地硬盘的站点

33、，这种站点以本机文件夹的形硬盘的站点，这种站点以本机文件夹的形式存在，不需要发布到服务器，这时，所式存在，不需要发布到服务器，这时，所有需要服务器支持的功能都是不可用的。有需要服务器支持的功能都是不可用的。返 回 目 录上一页下一页 结 束2022-12-1723计算机文化基础9.2.4 FrontPage 2000的编辑方式的编辑方式 FrontPage 2000 FrontPage 2000的网页视图下有三种编辑的网页视图下有三种编辑方式：普通、方式：普通、HTMLHTML、预览。、预览。该视图窗口底部有三个标签：该视图窗口底部有三个标签：“普通普通”、“HTML”HTML”和和“预览预览

34、”。它们分别控制网页以普。它们分别控制网页以普通方式、通方式、HTMLHTML方式进行编辑或是预览网页的效方式进行编辑或是预览网页的效果，默认是普通方式。果，默认是普通方式。如果切换到如果切换到HTMLHTML方式，用户就可以看到方式，用户就可以看到FrontPage 2000FrontPage 2000自动生成的自动生成的HTMLHTML代码。在代码。在HTMLHTML方式下，可以直接键入方式下，可以直接键入HTMLHTML代码。代码。预览方式实际上是用预览方式实际上是用Internet ExplorerInternet Explorer来显示网页。来显示网页。返 回 目 录上一页下一页 结

35、 束2022-12-1724计算机文化基础9.2.5 FrontPage 2000中的视图 FrontPage 2000FrontPage 2000提供了提供了6 6种视图以方便用户对站点的管理，可种视图以方便用户对站点的管理，可以在不同的视图中进行不同的操作。以在不同的视图中进行不同的操作。1.1.网页视图网页视图网页视图是网页视图是FrontPage 2000FrontPage 2000中最常用的工作界面。网页的创建、中最常用的工作界面。网页的创建、编辑、预览等基本操作都是在此视图中进行的。编辑、预览等基本操作都是在此视图中进行的。2.2.文件夹视图文件夹视图在文件夹视图中，站点显示为一组

36、文件和文件夹。可以在文件夹在文件夹视图中，站点显示为一组文件和文件夹。可以在文件夹视图中创建、移动和删除文件或文件夹。视图中创建、移动和删除文件或文件夹。3.3.报表视图报表视图使用报表视图可以方便地了解当前站点的文件内容、更新链接情使用报表视图可以方便地了解当前站点的文件内容、更新链接情况、组件错误、所有文件列表及变化情况等信息。可在况、组件错误、所有文件列表及变化情况等信息。可在“报表报表”工具栏中的工具栏中的“报表报表”下拉列表中选择所需显示的报表。下拉列表中选择所需显示的报表。4.4.超链接视图超链接视图超链接视图将当前站点显示为链接文件的一个网络，它们表示了超链接视图将当前站点显示为

37、链接文件的一个网络，它们表示了站点中各个网页之间的相互链接关系。超链接视图就像一张地图，站点中各个网页之间的相互链接关系。超链接视图就像一张地图，表明站点中的超链接路径。表明站点中的超链接路径。目 录上一页下一页 结 束2022-12-1725计算机文化基础FrontPage 2000中的视图5.5.任务视图任务视图 任务视图主要用来创建和管理任务。在视图中任务视图主要用来创建和管理任务。在视图中列出了当前站点的列出了当前站点的“任务任务”，即当前站点中尚未完，即当前站点中尚未完成的项目。成的项目。6.6.导航视图导航视图 使用导航视图可方便地观察站点的链接结构，使用导航视图可方便地观察站点的

38、链接结构，它以层次状的组织结构图形式显示（见图它以层次状的组织结构图形式显示（见图9-39-3）。）。在该视图下，可以通过拖曳操作改变链接结构。在该视图下，可以通过拖曳操作改变链接结构。图9-3 导航视图 返 回 目 录上一页下一页 结 束2022-12-1726计算机文化基础9.3 网 页 制 作 WebWeb站点的开发，首先应当根据其用途规站点的开发，首先应当根据其用途规划站点，确定站点的结构，并在本地磁盘上划站点，确定站点的结构，并在本地磁盘上创建站点，然后再建立网页。那么什么是创建站点，然后再建立网页。那么什么是“站点站点”呢？其实站点就是一组相关网页和呢？其实站点就是一组相关网页和其

39、他文件的集合。这些网页在其他文件的集合。这些网页在InternetInternet中表中表现为一个完整结构就称为现为一个完整结构就称为“站点站点”。在。在FrontPage 2000FrontPage 2000中，站点以一个特殊文件夹中，站点以一个特殊文件夹的形式存储。的形式存储。目 录上一页下一页 结 束2022-12-1727计算机文化基础9.3 网 页 制 作9.3.1 创建站点创建站点9.3.2 网页编辑网页编辑9.3.3 插入对象插入对象9.3.4 创建超链接创建超链接返 回 目 录上一页下一页 结 束2022-12-1728计算机文化基础9.3.1 创建站点创建站点 使用使用Fro

40、ntPage 2000FrontPage 2000的向导和模板，用户可的向导和模板，用户可以轻松地创建出各种用途和风格的站点。以轻松地创建出各种用途和风格的站点。新建站点时，可以根据自己的需求选择不同新建站点时，可以根据自己的需求选择不同的模板和向导。对于不同的模板和向导，其新的模板和向导。对于不同的模板和向导，其新建站点的步骤略有不同。下面以建站点的步骤略有不同。下面以“只有一个网只有一个网页的站点页的站点”模板为例，介绍新建站点的方法。模板为例，介绍新建站点的方法。（1 1）在）在“文件文件”菜单的菜单的“新建新建”子菜单中选择子菜单中选择“站点站点”，打开，打开“新建新建”对话框；对话框

41、；（2 2）在）在“新建新建”对话框的对话框的“指定新站点的位置指定新站点的位置”文本框中输入存储站点的文件夹；文本框中输入存储站点的文件夹；目 录上一页下一页 结 束2022-12-1729计算机文化基础创建站点创建站点3 3）双击）双击“只有一个网页的站点只有一个网页的站点”模板，新建站点如图模板，新建站点如图9-49-4所示。所示。该站点只有一个空白网页该站点只有一个空白网页index.htmindex.htm（主页）和用于存储图（主页）和用于存储图片的文件夹片的文件夹imagesimages，你可以打开，你可以打开index.htmindex.htm编辑该网页，也编辑该网页，也可以进一

42、步根据网站规划创建文件夹和新建其他网页。可以进一步根据网站规划创建文件夹和新建其他网页。选 择选 择“文 件文 件”菜 单 的菜 单 的“退 出退 出”命 令，可 以 关 闭命 令，可 以 关 闭FrontPage 2000FrontPage 2000。要再次对该站点进行操作，在启动。要再次对该站点进行操作，在启动FrontPage 2000FrontPage 2000后使用后使用“文件文件”菜单中的菜单中的“打开站点打开站点”命命令打开该站点。令打开该站点。返 回 目 录上一页下一页 结 束2022-12-1730计算机文化基础9.3.2 网页编辑1.新建网页新建网页2.打开网页打开网页3.

43、设置文字格式设置文字格式4.设置段落格式设置段落格式5.设置网页属性设置网页属性6.预览网页预览网页返 回 目 录上一页下一页 结 束2022-12-1731计算机文化基础网页编辑1.1.新建网页新建网页 要创建一个新的网页，可按下面的步骤操作：要创建一个新的网页，可按下面的步骤操作：（1 1）从）从“文件文件”菜单的菜单的“新建新建”子菜单中选择子菜单中选择“网页网页”命令，命令，打开打开“新建新建”对话框。对话框。（2 2）在）在“常规常规”选项卡中选择所需的模板，可在选项卡中选择所需的模板，可在“说明说明”及及“预览预览”区域查看该模板的说明及预览图。如果要建一区域查看该模板的说明及预览

44、图。如果要建一个空白网页，可选中个空白网页，可选中“普通网页普通网页”模板。模板。（3 3）单击）单击“确定确定”按钮，系统新建一个基于所选模板的网页。按钮，系统新建一个基于所选模板的网页。此时，新建的网页显示在此时，新建的网页显示在FrontPage 2000FrontPage 2000窗口中，可以窗口中，可以对其进行编辑修改等操作。对其进行编辑修改等操作。（4 4）单击）单击“文件文件”菜单，选择菜单，选择“保存文件保存文件”命令，弹出命令，弹出“另存另存为为”对话框。在对话框。在“另存为另存为”对话框中，单击对话框中，单击“更改更改”按按钮修改网页标题，如钮修改网页标题，如“新闻新闻”。

45、在。在“文件名文件名”文本框中文本框中输入网页文件名，如输入网页文件名，如news.htmnews.htm。设置完成后单击。设置完成后单击“保存保存”按钮。按钮。（5 5）单击）单击“视图视图”框中的框中的“导航导航”图标，在图标，在“文件夹列表文件夹列表”中中拖动新建网页到站点的结构图，将其置入相应位置。此拖动新建网页到站点的结构图，将其置入相应位置。此时，双击该页面图标可切换到网页视图。网页中若包含时，双击该页面图标可切换到网页视图。网页中若包含导航栏，则导航栏自动更新链接关系。导航栏，则导航栏自动更新链接关系。返 回 目 录上一页下一页 结 束2022-12-1732计算机文化基础网页编

46、辑2.2.打开网页打开网页 在在FrontPage 2000FrontPage 2000中，编辑某个网页必中，编辑某个网页必须首先打开该网页。打开网页的方法有多须首先打开该网页。打开网页的方法有多种，最常用的操作步骤如下：种，最常用的操作步骤如下：（1 1）在）在FrontPage 2000FrontPage 2000窗口中，单击工具窗口中，单击工具栏中的栏中的“文件夹列表文件夹列表”按钮；按钮；（2 2）在文件夹列表窗口中找到要编辑的网）在文件夹列表窗口中找到要编辑的网页，然后双击网页图标即可打开网页。页，然后双击网页图标即可打开网页。实际上，在其他视图中双击网页图标，实际上，在其他视图中双

47、击网页图标，同样会打开指定网页。同样会打开指定网页。返 回 目 录上一页下一页 结 束2022-12-1733计算机文化基础网页编辑3.3.设置文字格式设置文字格式 同其他同其他Microsoft OfficeMicrosoft Office组件一样，网页中组件一样，网页中可以输入文字，复制、剪切和粘贴文字，设置文可以输入文字，复制、剪切和粘贴文字，设置文字格式，查找和替换文字等。字格式，查找和替换文字等。在在FrontPage 2000FrontPage 2000中，对文字的格式提供了中，对文字的格式提供了相当完整的设定功能，文字格式的变化也因此多相当完整的设定功能，文字格式的变化也因此多种

48、多样。我们可以使用工具栏上的工具按钮或者种多样。我们可以使用工具栏上的工具按钮或者菜单命令，快速地改变文字的外观。菜单命令，快速地改变文字的外观。文字格式包括字体、字形、大小、颜色和修文字格式包括字体、字形、大小、颜色和修饰效果等属性。饰效果等属性。设置文字格式的操作步骤是：选中文字，单设置文字格式的操作步骤是：选中文字，单击击“格式格式”菜单，选择菜单，选择“字体字体”命令，打开命令，打开“字字体体”对话框，在对话框中设置字体的各种属性。对话框，在对话框中设置字体的各种属性。虽然可以设置各种美观的字体，但是由于浏虽然可以设置各种美观的字体，但是由于浏览者只能使用本地计算机中安装的字体显示网页

49、，览者只能使用本地计算机中安装的字体显示网页，因此还是使用常见的字体为好。因此还是使用常见的字体为好。返 回 目 录上一页下一页 结 束2022-12-1734计算机文化基础网页编辑4.4.设置段落格式设置段落格式 文字段落的格式编排对于一个网页的外观是至关重文字段落的格式编排对于一个网页的外观是至关重要的。要的。FrontPage 2000FrontPage 2000通过按通过按EnterEnter键划分段落。值得键划分段落。值得注意的是，段落之间插入了一个空行。如果只是需要换注意的是，段落之间插入了一个空行。如果只是需要换行，而不是另起一个段落，按行，而不是另起一个段落，按Shift+En

50、terShift+Enter键即可。实键即可。实际上，按际上，按EnterEnter键在键在HTMLHTML代码中插入的是代码中插入的是标记，而按标记，而按Shift+EnterShift+Enter键则插入的是键则插入的是 标记。标记。段落格式主要包括对齐方式、文本缩进和段落间距段落格式主要包括对齐方式、文本缩进和段落间距等。设置段落格式的方法如下：等。设置段落格式的方法如下：（1 1）将插入点移动到要设置格式的段落中；）将插入点移动到要设置格式的段落中；（2 2）单击）单击“格式格式”菜单，选择菜单，选择“段落段落”命令；命令；（3 3）在）在“段落段落”对话框中可以设置段落的各种属性。对