1、第第 九九 章章 网网 页页 制制 作作 大学IT 目 录上一页下一页 结 束第九章 网页制作9.1 HTML简介简介 9.2 FrontPage 2003概述概述 9.3 网页制作网页制作 9.4 网页布局网页布局 9.5 创建表单页面创建表单页面 9.6 网页的发布网页的发布10/14/20221大学IT 目 录上一页下一页 结 束9.1 HTML简介 HTML即即Hypertext Markup Language的缩写。它使的缩写。它使用一些约定的标记（用一些约定的标记（Tag）对文本进行标注，定义网页对文本进行标注，定义网页的数据格式，描述的数据格式，描述Web页中的信息，控制文本的显
2、示。页中的信息，控制文本的显示。我们把用我们把用HTML语言编写的文件称为语言编写的文件称为HTML文件。它文件。它通常被存储在通常被存储在Web服务器上，客户端通过浏览器向服务器上，客户端通过浏览器向Web服务器发出请求，服务器响应请求并将服务器发出请求，服务器响应请求并将HTML文件发送文件发送给浏览器，然后由浏览器对文件中的标记作出相应的解给浏览器，然后由浏览器对文件中的标记作出相应的解释，以页面的形式呈现在用户屏幕上。因此，我们又把释，以页面的形式呈现在用户屏幕上。因此，我们又把HTML文档称为网页文档称为网页(Web Page)。10/14/20222大学IT 目 录上一页下一页 结
3、 束9.1 HTML简介HTML语言是一种标记语言，简单易学。语言是一种标记语言，简单易学。用用HTML语言编写的网页实际上是一种文本文件，语言编写的网页实际上是一种文本文件，它以它以.htm或或.html为扩展名，我们可以使用任何为扩展名，我们可以使用任何文本处理软件（例如：记事本）编写。文本处理软件（例如：记事本）编写。9.1.1 HTML语言概述语言概述9.1.2 HTML语言的基本语法语言的基本语法返 回10/14/20223大学IT 目 录上一页下一页 结 束9.1.1 HTML语言概述 HTML语言是由世界性的标准化组织语言是由世界性的标准化组织W3C（World Wide Web
4、 Consortium）制定的，通过制定的，通过浏览浏览http:/www.w3.org可以了解到可以了解到HTML标准的标准的最新动态。最新动态。下面介绍下面介绍HTML文件的基本构成和文件的基本构成和HTML文文件的层次结构。件的层次结构。10/14/20224大学IT 目 录上一页下一页 结 束1.HTML文件的基本构成文件的基本构成 Internet中的每一个中的每一个HTML文件都包括文本内文件都包括文本内容和容和HTML标记两部分。其中，标记两部分。其中，HTML标记负责标记负责控制文本显示的外观和版式，并为浏览器指定各控制文本显示的外观和版式，并为浏览器指定各种链接的图像、声音和
5、其他对象的位置。多数种链接的图像、声音和其他对象的位置。多数HTML标记的书写格式如下：标记的书写格式如下：文本内容文本内容 标记名写在标记名写在“”内。多数内。多数HTML标记同时标记同时具有起始和结束标记，并且成对出现，但也有些具有起始和结束标记，并且成对出现，但也有些HTML标记没有结束标记。另外，标记没有结束标记。另外，HTML标记不标记不区分大小写。区分大小写。HTML文件的基本构成文件的基本构成10/14/20225大学IT 目 录上一页下一页 结 束 某些某些HTML标记还具有一些属性，这些属性指定标记还具有一些属性，这些属性指定对象的特性，如背景颜色、文本字体及大小、对对象的特
6、性，如背景颜色、文本字体及大小、对齐方式等。属性一般放在齐方式等。属性一般放在“起始标记起始标记”中，格式中，格式如下：如下：文本内容文本内容 其中标记名和属性之间用空格分隔。如果标记其中标记名和属性之间用空格分隔。如果标记有多种属性，属性之间也要用空格分隔。有多种属性，属性之间也要用空格分隔。HTML文件的基本构成文件的基本构成10/14/20226大学IT 目 录上一页下一页 结 束2.HTML网页的结构网页的结构 现在我们先看一个简单的现在我们先看一个简单的HTML文件，从中体会用文件，从中体会用HTML语言编写网页时的层次结构。语言编写网页时的层次结构。【例例9-1】用用HTML语言编
7、写一个简单的网页。语言编写一个简单的网页。我的第一个我的第一个Web页页欢迎进入欢迎进入HTML世界！世界！这里我们首先介绍这里我们首先介绍HTML语言的基本知识和语法。语言的基本知识和语法。然后，讲授如何使用然后，讲授如何使用HTML语言编写您的语言编写您的Web页面。页面。10/14/20227大学IT 目 录上一页下一页 结 束HTML语言概述 将上述代码用文本编辑器编辑并保存为一个扩将上述代码用文本编辑器编辑并保存为一个扩展名为展名为.htm的文件，双击该文件图标，在浏览器的文件，双击该文件图标，在浏览器中看到如下图所示的结果。中看到如下图所示的结果。图9-110/14/20228大学
8、IT 目 录上一页下一页 结 束 从上例可以看出，一般从上例可以看出，一般HTML文件都是以文件都是以开头，以开头，以结束。其文件结构由以结束。其文件结构由以下两部分组成：下两部分组成：1）头部（）头部（Head）HTML文件的头部由文件的头部由和和标记定标记定义。通常情况下，文件的标题、语言字符集信义。通常情况下，文件的标题、语言字符集信息等都放在头部信息中。最常用到的标记是息等都放在头部信息中。最常用到的标记是，它用于定义网页文件的标题，它用于定义网页文件的标题，当该网页文件被打开后，网页文件的标题将出当该网页文件被打开后，网页文件的标题将出现在浏览器的标题栏中。现在浏览器的标题栏中。10
9、/14/20229大学IT 目 录上一页下一页 结 束文件结构2）正文主体（）正文主体（Body）正文主体是正文主体是HTML文件的核心内容，由文件的核心内容，由和和标记定义。标记定义。标记具有一些常用的属性，标记具有一些常用的属性，格式如下：格式如下：其中，其中，bgcolor为背景颜色，为背景颜色，color为文本颜色。为文本颜色。n为六为六位十六进制数。位十六进制数。如果网页使用背景图像，格式如下：如果网页使用背景图像，格式如下：HTML对格式的要求并不严格，当对格式的要求并不严格，当HTML文件被浏览文件被浏览器扫描时，所有包含在文件中的空格、回车等均被忽器扫描时，所有包含在文件中的空
10、格、回车等均被忽略。因此你可以将一行写成两行或多行，在浏览器中略。因此你可以将一行写成两行或多行，在浏览器中结果是相同的。结果是相同的。返 回10/14/202210大学IT 目 录上一页下一页 结 束9.1.2 HTML语言的基本语法1.文本布局文本布局1）段落标记）段落标记标记指定文档中一个独立的段落。通过设置标记指定文档中一个独立的段落。通过设置align属性，控制段落的对齐方式，其值可以是属性，控制段落的对齐方式，其值可以是left、center、right、justify，分别表示左对齐、居中、右对分别表示左对齐、居中、右对齐和两端对齐，默认值为左对齐。齐和两端对齐，默认值为左对齐。
11、使用格式如下：使用格式如下：2）换行标记换行标记 标记可以强制文本换行。该标记只有起始标记。标记可以强制文本换行。该标记只有起始标记。3）水平线标记）水平线标记水平线标记水平线标记用于在网页中插入一条水平线。用于在网页中插入一条水平线。10/14/202211大学IT 目 录上一页下一页 结 束2.文字格式文字格式 HTML语言中用于文字格式化的标记有：语言中用于文字格式化的标记有：1）标题标记）标题标记 格式为：格式为：标题文字内容标题文字内容 其中其中n说明大小级别，取值范围为说明大小级别，取值范围为1到到6的数字。把的数字。把标题分为标题分为 6级，即级，即h1h6，其中其中h1文字最大
12、，文字最大，h6文文字最小。字最小。10/14/202212大学IT 目 录上一页下一页 结 束2）字体标记）字体标记 字体标记用来对文字格式进行设置，主要具有以下属性：字体标记用来对文字格式进行设置，主要具有以下属性：（1）size属性：用来控制文字的大小，格式如下：属性：用来控制文字的大小，格式如下：其中其中n的取值范围为的取值范围为17的数字，默认值为的数字，默认值为3。标记和标记和标记都可以控制文字的大小。一般情况下，标记都可以控制文字的大小。一般情况下，文章的标题最好由文章的标题最好由标记控制，而其余的文字由标记控制，而其余的文字由标标记控制。相比较而言，记控制。相比较而言，对字体的
13、控制更加灵活。对字体的控制更加灵活。（2）color属性：用来控制文字的颜色，格式如下：属性：用来控制文字的颜色，格式如下：其中其中n是一个十六进制的六位数。是一个十六进制的六位数。（3）face属性：用来指明文字使用的字体，格式如下：属性：用来指明文字使用的字体，格式如下：其中字体名的选择由其中字体名的选择由Windows操作系统安装的字体决定。如：操作系统安装的字体决定。如：宋体、楷体宋体、楷体_GB2312、Times New Roman、Arial等。等。文字格式文字格式10/14/202213大学IT 目 录上一页下一页 结 束3）字形标记）字形标记 字形标记用于设置文字的粗体、斜体
14、、下字形标记用于设置文字的粗体、斜体、下划线、上标、下标等。划线、上标、下标等。标记格式标记格式字形结果字形结果粗体粗体斜体斜体下划线下划线上标上标下标下标文字格式文字格式10/14/202214大学IT 目 录上一页下一页 结 束3.插入图片插入图片 标记将图片插入网页中，用于设置图片的大小以及标记将图片插入网页中，用于设置图片的大小以及相邻文字的排列方式。该标记具有以下属性：相邻文字的排列方式。该标记具有以下属性：（1）src属性：指明图片文件所在的位置。格式如下：属性：指明图片文件所在的位置。格式如下：其中其中URL指图片文件存放的位置。指图片文件存放的位置。（2）alt属性：图片的文字
15、说明，当鼠标指针指向图片时，属性：图片的文字说明，当鼠标指针指向图片时，该图片的说明性文字弹出。格式如下：该图片的说明性文字弹出。格式如下：（3）width和和height属性：设置图片显示区域的宽度和高度。属性：设置图片显示区域的宽度和高度。格式如下：格式如下：其中其中width和和height属性的取值属性的取值n1和和n2，可以是像素数或百可以是像素数或百分比。分比。10/14/202215大学IT 目 录上一页下一页 结 束（4）border属性：设置图片文件的边框。格式属性：设置图片文件的边框。格式如下：如下：其中其中n为像素数。为像素数。（5）align属性：设置图片相对于文本的位
16、置关属性：设置图片相对于文本的位置关系。格式为：系。格式为：对齐方式可以是：对齐方式可以是：top（顶端对齐顶端对齐）、）、middle（相对垂直居中相对垂直居中）、）、bottom（相对底边对齐相对底边对齐）、）、left（左对齐左对齐）、）、right（右对齐右对齐）、）、texttop（文文本上方）等。本上方）等。插入图片插入图片10/14/202216大学IT 目 录上一页下一页 结 束4.插入超链接插入超链接 在在HTML语言中，语言中，和和标记用于设置网页中标记用于设置网页中的超链接，的超链接，href属性指明被超链接的文件地址。格属性指明被超链接的文件地址。格式如下：式如下：超链
17、接文本超链接文本 用于表示超链接的文本一般显示为蓝色并且加下用于表示超链接的文本一般显示为蓝色并且加下划线。在浏览器中，当鼠标指针指向该文本时，箭划线。在浏览器中，当鼠标指针指向该文本时，箭头变为手形，并在浏览器的状态栏中显示该超链接头变为手形，并在浏览器的状态栏中显示该超链接的地址。的地址。若使用图片做超链接，可使用如下格式完成：若使用图片做超链接，可使用如下格式完成：10/14/202217大学IT 目 录上一页下一页 结 束5.使用表格使用表格 在网页中插入一个表格，需要用到一组在网页中插入一个表格，需要用到一组HTML标记。定义表格的有关标记如下：标记。定义表格的有关标记如下：定义表格
18、区域定义表格区域。定义表格标题定义表格标题。定义表格头定义表格头。定义表格行定义表格行。定义表格单元格定义表格单元格。返 回10/14/202218大学IT 目 录上一页下一页 结 束 常用的标记属性中，常用的标记属性中，border属性用属性用于设置表格边框的宽度；于设置表格边框的宽度；width、height属性用于设置表格或单元格的宽度、高属性用于设置表格或单元格的宽度、高度；度；cellspacing和和cellpadding属性分别用属性分别用于设置单元格之间的间隙和单元格内部于设置单元格之间的间隙和单元格内部空白；空白；align属性用于设置表格或单元格属性用于设置表格或单元格的对
19、齐方式；的对齐方式；bgcolor和和background属性属性分别用于设置表格的背景颜色和背景图分别用于设置表格的背景颜色和背景图像像。表格属性表格属性10/14/202219大学IT 目 录上一页下一页 结 束9.2 FrontPage 2003概述 虽然使用一般的文本编辑器就可以编写虽然使用一般的文本编辑器就可以编写HTML文档，但是使用专门的文档，但是使用专门的HTML编辑器或编辑器或Web创作工具往往更加方便。具有创作工具往往更加方便。具有“所见即所得所见即所得”功能的功能的Web页面创作工具可以使页面创作工具可以使Web创作人员直创作人员直接面对接面对Web页面进行编辑修改，并且
20、能立即看到页面进行编辑修改，并且能立即看到Web页面的显示效果。页面的显示效果。FrontPage 2003是微软公司开发的网页制作是微软公司开发的网页制作和网站管理工具，它是和网站管理工具，它是Microsoft Office 2003的组的组件之一，与件之一，与Office的其他组件高度融合，界面友的其他组件高度融合，界面友好，功能强大，易学易用，是目前使用较为广泛好，功能强大，易学易用，是目前使用较为广泛的网页制作、网站管理工具之一。的网页制作、网站管理工具之一。10/14/202220大学IT 目 录上一页下一页 结 束9.2 FrontPage 2003概述9.2.1 FrontPa
21、ge 2003的主要功能的主要功能9.2.2 FrontPage 2003的启动与退出的启动与退出9.2.3 网页与网站网页与网站9.2.4 FrontPage 2003的网页视图模式的网页视图模式9.2.5 FrontPage 2003中的视图中的视图返 回10/14/202221大学IT 目 录上一页下一页 结 束9.2.1 FrontPage 2003的主要功能 FrontPage 2003的主要功能是制作网页和管理的主要功能是制作网页和管理站点。站点。使用使用FrontPage 2003可以创建新的网页，也可可以创建新的网页，也可以打开并修改已经存在的网页。以打开并修改已经存在的网页。
22、FrontPage 2003提供了多种编辑网页的方式，不但可以直接修改提供了多种编辑网页的方式，不但可以直接修改HTML，而且可以采用而且可以采用“所见即所得所见即所得”的方式编的方式编辑网页，还可以使用菜单命令插入各种网页元素，辑网页，还可以使用菜单命令插入各种网页元素，使用对话框修改其属性，十分灵活。使用对话框修改其属性，十分灵活。返 回10/14/202222大学IT 目 录上一页下一页 结 束 在在FrontPage 2003中，可以很容易地插入文本、中，可以很容易地插入文本、图片、表格、组件等元素；可以使用主题和样式图片、表格、组件等元素；可以使用主题和样式表、共享边框、框架等管理网
23、页的外观；还可以表、共享边框、框架等管理网页的外观；还可以使用表单等元素设计出交互式网页。使用表单等元素设计出交互式网页。FrontPage 2003提供了强大的站点管理功能。提供了强大的站点管理功能。一组相关网页和有关文件组成一个站点，站点也一组相关网页和有关文件组成一个站点，站点也是是FrontPage 2003对网站进行管理的基本单位。对网站进行管理的基本单位。在在FrontPage 2003中可以轻松实现设计、管理、中可以轻松实现设计、管理、分析、发布和维护站点等工作。分析、发布和维护站点等工作。FrontPage 2003的主要功能10/14/202223大学IT 目 录上一页下一页
24、 结 束9.2.3 网页与网站 网页是全球广域网上的基本文档，用网页是全球广域网上的基本文档，用HTML书写，通书写，通常以常以.htm或或.html为扩展名。网页可以独立存在，但常常作为扩展名。网页可以独立存在，但常常作为网站的一部分。网站是一组相关网页和有关文件的组合，为网站的一部分。网站是一组相关网页和有关文件的组合，一般有一个特殊的网页作为浏览的起始点，称为主页一般有一个特殊的网页作为浏览的起始点，称为主页（Homepage），），用来引导用户访问其他网页。用来引导用户访问其他网页。网站通常位于网站通常位于Web服务器上，客户机通过网络向服务器上，客户机通过网络向Web服服务器发送请求
25、，务器发送请求，Web服务器响应客户机的请求，并使用服务器响应客户机的请求，并使用HTTP协议将网页和有关文件通过网络传送回客户机，客户协议将网页和有关文件通过网络传送回客户机，客户机端使用网页浏览器就能看到网页的内容了。机端使用网页浏览器就能看到网页的内容了。10/14/202224大学IT 目 录上一页下一页 结 束网页与网站在在FrontPage 2003中，可以建立和编辑独立的网中，可以建立和编辑独立的网页，也可以设计和管理站点。在站点中可以包含大量页，也可以设计和管理站点。在站点中可以包含大量网页和各种文件，甚至可以包含子站点，而且只有在网页和各种文件，甚至可以包含子站点，而且只有在
26、使用站点时，使用站点时，FrontPage 2003的许多特性才有效。的许多特性才有效。通常，在通常，在FrontPage 2003中建立的站点需要发布到中建立的站点需要发布到Internet中的中的Web服务器上，成为真正意义上的网站，服务器上，成为真正意义上的网站，Internet上的用户才能访问。有时，可以在同一台计算机上上的用户才能访问。有时，可以在同一台计算机上安装安装Web服务器端软件，从而将站点发布到本机进行测试。服务器端软件，从而将站点发布到本机进行测试。用用FrontPage 2003也可以建立基于本地硬盘的站点，这也可以建立基于本地硬盘的站点，这种站点以本机文件夹的形式存在
27、，不需要发布到服务器，这种站点以本机文件夹的形式存在，不需要发布到服务器，这时，需要服务器支持的功能是不可用的。时，需要服务器支持的功能是不可用的。返 回10/14/202225大学IT 目 录上一页下一页 结 束9.2.4 FrontPage 2003的网页视图模式的网页视图模式 FrontPage 2003提供了四种网页视图提供了四种网页视图模式：模式：设计设计视图是打开网页首先进入的视图，可以在其中视图是打开网页首先进入的视图，可以在其中输入文本、插入图片、插入表格等，也可以任意进行输入文本、插入图片、插入表格等，也可以任意进行修改。修改。代码代码视图中，用户可以查看、编写和编辑视图中，
28、用户可以查看、编写和编辑HTML标标记。记。预预览视图中可以看到网页在览视图中可以看到网页在Web浏览器中的大体显浏览器中的大体显示情况。示情况。FrontPage 2003新增的拆分视图将窗口工作区拆分成上、新增的拆分视图将窗口工作区拆分成上、下两部分，上半部分是代码区，下半部分是设计区。无论对下两部分，上半部分是代码区，下半部分是设计区。无论对哪一个区域进行修改，另一个区域都会做出相应的改变。哪一个区域进行修改，另一个区域都会做出相应的改变。返 回10/14/202226大学IT 目 录上一页下一页 结 束9.2.5 FrontPage 2003中的视图 FrontPage 2003提供了
29、以下几种视图以方便用户提供了以下几种视图以方便用户对站点的管理，用户可以在不同的视图中进行相应对站点的管理，用户可以在不同的视图中进行相应的操作。的操作。1.网页视图网页视图2.文件夹视图文件夹视图3.远程网站视图远程网站视图4.报表视图报表视图5.导航视图导航视图6.超链接视图超链接视图7.任务视图任务视图10/14/202227大学IT 目 录上一页下一页 结 束9.3 网网 页页 制制 作作Web站点的开发，首先应当根据其用途进站点的开发，首先应当根据其用途进行规划，确定站点结构，在本地磁盘上创建站行规划，确定站点结构，在本地磁盘上创建站点，然后再建立网页。点，然后再建立网页。那么什么是
30、那么什么是“站点站点”呢？呢？其实站点就是一组相关网页和其他文件的其实站点就是一组相关网页和其他文件的集合，这些网页在集合，这些网页在Internet中表现为一个完整中表现为一个完整结构就称为结构就称为“站点站点”。在。在FrontPage 2003中，中，站点以一个特殊文件夹的形式存储。站点以一个特殊文件夹的形式存储。10/14/202228大学IT 目 录上一页下一页 结 束9.3 网 页 制 作9.3.1 创建站点创建站点9.3.2 网页编辑网页编辑9.3.3 插入对象插入对象9.3.4 创建超链接创建超链接返 回10/14/202229大学IT 目 录上一页下一页 结 束9.3.1 创
31、建站点创建站点 使用使用FrontPage 2003的模板和向导，用户可以轻松地创的模板和向导，用户可以轻松地创建出各种用途和风格的站点。建出各种用途和风格的站点。新建站点时，可以根据自己的需求选择不同的模板和新建站点时，可以根据自己的需求选择不同的模板和向导。对于不同的模板和向导，其新建站点的步骤略有向导。对于不同的模板和向导，其新建站点的步骤略有不同。不同。下面以下面以“由一个网页组成的网站由一个网页组成的网站”模板为例，介绍新模板为例，介绍新建站点的方法。建站点的方法。（1）单击）单击“文件文件”菜单的菜单的“新建新建”命令，在命令，在“新建新建”任任务窗格中选择务窗格中选择“新建网站新
32、建网站”中的中的“由一个网页组成的网由一个网页组成的网站站”；（2）在弹出的）在弹出的“网站模板网站模板”对话框的对话框的“指定新网站的位指定新网站的位置置”框中输入新站点要保存的位置，也可使用框中输入新站点要保存的位置，也可使用“浏览浏览”按钮指定新站点的位置；按钮指定新站点的位置；10/14/202230大学IT 目 录上一页下一页 结 束（3）单击）单击“确定确定”按钮，新建站点如下图所按钮，新建站点如下图所示示返 回该站点只有一个空白网页该站点只有一个空白网页index.htmindex.htm（主页）和用主页）和用于存储图片的文件夹于存储图片的文件夹imagesimages，你可以打
33、开你可以打开index.htmindex.htm进行编辑，也可以进一步根据网站规划进行编辑，也可以进一步根据网站规划创建文件夹和新建其他网页。创建文件夹和新建其他网页。选择选择“文件文件”菜单的菜单的“退出退出”命令，可以关闭命令，可以关闭FrontPage 2003FrontPage 2003。10/14/202231大学IT 目 录上一页下一页 结 束9.3.2 网页编辑1.新建网页新建网页2.打开打开/保存网页保存网页3.预览网页预览网页4.设置文字格式设置文字格式5.设置段落格式设置段落格式6.设置网页属性设置网页属性返 回10/14/202232大学IT 目 录上一页下一页 结 束网
34、页编辑 要根据要根据“网页模板网页模板”创建一个新的网页，可以创建一个新的网页，可以按下面的步骤：按下面的步骤：（1）单击）单击“文件文件”菜单的菜单的“新建新建”命令，在命令，在“新建新建”任务窗格中选择任务窗格中选择“新建网页新建网页”中的中的“其其他网页模板他网页模板”。（2）在弹出的）在弹出的“网页模板网页模板”对话框中选择所需对话框中选择所需的网页模板，可以在的网页模板，可以在“说明说明”及及“预览预览”区域查区域查看该模板的说明及预览图。看该模板的说明及预览图。（3）单击）单击“确定确定”按钮，系统新建一个基于所按钮，系统新建一个基于所选模板的网页。选模板的网页。（4）单击）单击“
35、文件文件”菜单，选择菜单，选择“保存保存”命令，命令，弹出弹出“另存为另存为”对话框。在此对话框中，输对话框。在此对话框中，输入文件名进行保存。入文件名进行保存。返 回1.新建网页新建网页10/14/202233大学IT 目 录上一页下一页 结 束 在在FrontPage 2003中，编辑某个网页之前，中，编辑某个网页之前，需要先打开该网页。打开网页的方法有多种，需要先打开该网页。打开网页的方法有多种，常用的有以下几种：常用的有以下几种：（1）使用）使用“文件文件”菜单的菜单的“打开打开”命令，或命令，或“常常用用”工具栏的工具栏的“打开打开”按钮，在弹出的按钮，在弹出的“打开文打开文件件”对
36、话框中选择相应的网页；对话框中选择相应的网页；（2）如需要打开的文件已在打开的网站中，在文）如需要打开的文件已在打开的网站中，在文件夹视图中双击该网页图标即可将其打开。实际件夹视图中双击该网页图标即可将其打开。实际上，在其他视图中双击网页图标，同样会打开指上，在其他视图中双击网页图标，同样会打开指定网页。定网页。要保存一个网页，可以使用要保存一个网页，可以使用“文件文件”菜单的菜单的“保存保存”命令，或命令，或“常用常用”工具栏的工具栏的“保存保存”按按钮，如需另存可使用钮，如需另存可使用“文件文件”菜单的菜单的“另存为另存为”命令。命令。返 回2.打开打开/保存网页保存网页网页编辑10/14
37、/202234大学IT 目 录上一页下一页 结 束网页制作过程中，用户可以切换到网页制作过程中，用户可以切换到“预览预览”视图预览网页，也可以使用视图预览网页，也可以使用“文件文件”菜单的菜单的“在浏览器中预览在浏览器中预览”命令预览网页。使用后者，命令预览网页。使用后者，系统会打开浏览器显示网页，如果该网页尚未系统会打开浏览器显示网页，如果该网页尚未保存，会弹出对话框提示用户保存网页。保存，会弹出对话框提示用户保存网页。返 回3.预览网页网页编辑10/14/202235大学IT 目 录上一页下一页 结 束4.设置文字格式 同其他同其他Microsoft Office组件一样，在网页中可以输入
38、文字，组件一样，在网页中可以输入文字，复制、剪切和粘贴文字，设置文字格式，查找和替换文字等。复制、剪切和粘贴文字，设置文字格式，查找和替换文字等。在在FrontPage 2003中，对文字的格式提供了相当完整的设中，对文字的格式提供了相当完整的设定功能，文字格式的变化也因此多种多样。可以使用工具栏定功能，文字格式的变化也因此多种多样。可以使用工具栏上的工具按钮或菜单命令快速地改变文字的外观。上的工具按钮或菜单命令快速地改变文字的外观。设置文字格式的一般操作步骤是：选中文字，单击设置文字格式的一般操作步骤是：选中文字，单击“格式格式”菜单的菜单的“字体字体”命令，在弹出的命令，在弹出的“字体字体
39、”对话框中设置字体对话框中设置字体的各种属性，也可以使用的各种属性，也可以使用“格式格式”工具栏中相应的命令按钮。工具栏中相应的命令按钮。虽然可以设置各种美观的字体，但是由于用户只能使用本虽然可以设置各种美观的字体，但是由于用户只能使用本地计算机中安装的字体显示网页，因此还是使用常见的字体地计算机中安装的字体显示网页，因此还是使用常见的字体为好。为好。返 回网页编辑10/14/202236大学IT 目 录上一页下一页 结 束5.设置段落格式设置段落格式 文字段落的格式编排对于一个网页的外观是至关重文字段落的格式编排对于一个网页的外观是至关重要的。要的。FrontPage 2003通过按通过按E
40、nter键划分段落。值得键划分段落。值得注意的是，段落之间插入了一个空行。如果只是需要注意的是，段落之间插入了一个空行。如果只是需要换行，而不是另起一个段落，按换行，而不是另起一个段落，按Shift+Enter键即可。键即可。实际上，按实际上，按Enter键在键在HTML代码中插入的是代码中插入的是标记，标记，而按而按Shift+Enter键则插入的是键则插入的是标记。标记。段落格式主要包括对齐方式、缩进和段落间距等。段落格式主要包括对齐方式、缩进和段落间距等。设置段落格式的一般方法如下：设置段落格式的一般方法如下：将插入点移动到要设置格式的段落中，或是选中该将插入点移动到要设置格式的段落中，
41、或是选中该段落，单击段落，单击“格式格式”菜单的菜单的“段落段落”命令，在弹出的命令，在弹出的“段落段落”对话框中进行各种段落格式属性的设置。对话框中进行各种段落格式属性的设置。返 回网页编辑10/14/202237大学IT 目 录上一页下一页 结 束6.设置网页属性设置网页属性网页属性包括网页的标题、格式、页边距等。网页属性包括网页的标题、格式、页边距等。要设置网页属性，用户可以使用要设置网页属性，用户可以使用“文件文件”菜单的菜单的“属性属性”命令，或者在网页的任意地方单击鼠标右命令，或者在网页的任意地方单击鼠标右键，在弹出的右键菜单中选择键，在弹出的右键菜单中选择“网页属性网页属性”命令
42、，命令，FrontPage 2003将显示将显示“网页属性网页属性”对话框。对话框。网页编辑10/14/202238大学IT 目 录上一页下一页 结 束1）“常规常规”属性属性 要设置网页的要设置网页的“常规常规”属性，单击属性，单击“网页属性网页属性”对话框的对话框的“常规常规”选项卡，如下图所示。选项卡，如下图所示。“标题标题”框用于给出网页的框用于给出网页的标题，网页标题将显示在浏览器的标题栏中。标题，网页标题将显示在浏览器的标题栏中。“背景音乐背景音乐”框用于指定网页的背景音乐，当用浏览器打开网页时，将自框用于指定网页的背景音乐，当用浏览器打开网页时，将自动播放背景音乐。背景音乐区域的
43、动播放背景音乐。背景音乐区域的“位置位置”框用于指定声音框用于指定声音文件的位置，用户可以使用文件的位置，用户可以使用“浏览浏览”按钮选择一个声音文件；按钮选择一个声音文件；“循环次数循环次数”框用于指定声音要反复播放的次数，如果选中框用于指定声音要反复播放的次数，如果选中“不限次数不限次数”复选框，表示一直不停地播放。复选框，表示一直不停地播放。网页编辑10/14/202239大学IT 目 录上一页下一页 结 束2）“格式格式”属性属性 要设置网页的背景、颜色，可以使用要设置网页的背景、颜色，可以使用“网页网页属性属性”对话框的对话框的“格式格式”选项卡，如下图所示。选项卡，如下图所示。用户
44、可以选中用户可以选中“背景图片背景图片”复选框，指定一复选框，指定一个图片作为网页的背景图片。如果要将图片按个图片作为网页的背景图片。如果要将图片按水印形式添加，需要选中水印形式添加，需要选中“使其成为水印使其成为水印”复复选框。通过单击相应的下拉列表框，可以设置选框。通过单击相应的下拉列表框，可以设置网页的背景颜色、文本颜色以及超链接文字的网页的背景颜色、文本颜色以及超链接文字的颜色。当同时设置背景图片和背景颜色时，背颜色。当同时设置背景图片和背景颜色时，背景图片将覆盖背景色。景图片将覆盖背景色。返 回网页编辑10/14/202240大学IT 目 录上一页下一页 结 束9.3.3 插入对象1
45、.插入水平线插入水平线2.插入图片插入图片3.插入字幕插入字幕4.插入交互式按钮插入交互式按钮 5.插入站点计数器插入站点计数器 返 回10/14/202241大学IT 目 录上一页下一页 结 束1.插入水平线插入水平线 在网页中输入文本内容后，还可在不同的段落、行之在网页中输入文本内容后，还可在不同的段落、行之间添加水平线，水平线将网页分割成几个部分，使得网间添加水平线，水平线将网页分割成几个部分，使得网页更具条理性。具体操作步骤如下：页更具条理性。具体操作步骤如下：（1）在准备插入水平线的位置设置插入点；）在准备插入水平线的位置设置插入点；（2）单击）单击“插入插入”菜单的菜单的“水平线水
46、平线”命令，插入水平命令，插入水平线。线。要修改水平线的外观，可以双击水平线，打开要修改水平线的外观，可以双击水平线，打开“水平水平线属性线属性”对话框。对话框。“宽度宽度”框用于设置水平线的宽度，框用于设置水平线的宽度，“高度高度”框用于设置水平线的高度，框用于设置水平线的高度，“对齐方式对齐方式”用于用于设置水平线在网页内水平对齐的方式，设置水平线在网页内水平对齐的方式，“颜色颜色”列表框列表框用于设置水平线的颜色，选中用于设置水平线的颜色，选中“实线（无阴影）实线（无阴影）”复选复选框时，水平线将被设成实心线。要为线条指定自定义样框时，水平线将被设成实心线。要为线条指定自定义样式或其他格
47、式，可以使用式或其他格式，可以使用“样式样式”按钮进行设置。按钮进行设置。返 回10/14/202242大学IT 目 录上一页下一页 结 束2.插入图片插入图片 图片可以使网页变得生动活泼，并能吸引用户的注意。图片可以使网页变得生动活泼，并能吸引用户的注意。1）图片文件的格式）图片文件的格式 在在WWW上常用的图像文件格式是上常用的图像文件格式是JPEG和和GIF，它们都它们都是压缩的图像格式，文件的信息量小，适合于网络传输，是压缩的图像格式，文件的信息量小，适合于网络传输，因此被广泛地应用在因此被广泛地应用在Web站点的设计中。站点的设计中。GIF（Graphical Interchange
48、 Format，图形交换格式）采图形交换格式）采用无损压缩方式，其主要特征是支持动画、透明度、图形用无损压缩方式，其主要特征是支持动画、透明度、图形渐进，但渐进，但GIF图像包含的颜色不能超过图像包含的颜色不能超过256种。种。JPEG（Joint Photograph Expert Group，联合图像专家组）联合图像专家组）格式是专为有几百万种颜色的照片和图形设计的，它采用格式是专为有几百万种颜色的照片和图形设计的，它采用有损压缩方式，以牺牲图片质量换取大的压缩比例。有损压缩方式，以牺牲图片质量换取大的压缩比例。JPEG格式支持真彩色（格式支持真彩色（24位色），并且在压缩大的图像位色），
49、并且在压缩大的图像方面已被证明很有效。方面已被证明很有效。10/14/202243大学IT 目 录上一页下一页 结 束2.插入图片插入图片2）插入图片的步骤）插入图片的步骤（1）移动光标至插入图像的位置；）移动光标至插入图像的位置；（2）单击）单击“插入插入”菜单的菜单的“图片图片”命令，在子命令，在子菜单中选择菜单中选择“来自文件来自文件”，弹出，弹出“图片图片”对话对话框；框；（3）利用）利用“图片图片”对话框选取需要插入的图片对话框选取需要插入的图片文件，单击文件，单击“插入插入”按钮，即可将图片插入网按钮，即可将图片插入网页中。页中。3）设置图片属性）设置图片属性 在在“图片属性图片属
50、性”对话框的对话框的“外观外观”选项卡中，选项卡中，可以设置图片的环绕方式、布局、大小等。可以设置图片的环绕方式、布局、大小等。插入图片插入图片10/14/202244大学IT 目 录上一页下一页 结 束4）编辑图片）编辑图片可以使用可以使用“视图视图”菜单的菜单的“工具栏工具栏”命令中的命令中的“图片图片”子命令，使子命令，使“图片图片”工具栏显示在屏工具栏显示在屏幕上。利用图片工具栏，可以对图片的亮度、幕上。利用图片工具栏，可以对图片的亮度、对比度进行调整，可以旋转、翻转图片，对图对比度进行调整，可以旋转、翻转图片，对图片进行剪裁，设置透明颜色等操作。片进行剪裁，设置透明颜色等操作。5）保
