第九章网页制作课件

第第 九九 章章 网网 页页 制制 作作 目 录上一页下一页 结 束第九章 网页制作9.1 HTML简介简介 9.2 FrontPage概述概述 9.3网页制作网页制作 9.4网页布局网页布局 9.5创建表单页面创建表单页面 9.6网页的发布网页的发布 7/13/20241计算机文化基础 目 录上一页下一页 结 束9.1 HTML简介9.1.1 HTML语言概述语言概述9.1.2 HTML语言的基本语法语言的基本语法返 回7/13/20242计算机文化基础 目 录上一页下一页 结 束9.1.1 HTML语言概述 HTMLHTML即即HyperTextHyperText Markup Markup Language(Language(超超文文本本标标记记语语言言)的的缩缩写写。它它使使用用一一些些约约定定的的标标记记（TagTag）对对文文本本进进行行标标注注，定定义义网网页页的的数数据据格格式式，描描述述WebWeb页页中中的的信信息息，控控制制文文本本的的显显示。示。我我们们把把用用HTMLHTML语语言言编编写写的的文文件件称称为为HTMLHTML文文件件（网网页页）。它它通通常常被被存存储储在在WebWeb服服务务器器上上，客客户户端端通通过过浏浏览览器器向向WebWeb服服务务器器发发出出请请求求，服服务务器器响响应应请请求求并并将将HTMLHTML文文件件发发送送给给浏浏览览器器，然然后后由由浏浏览览器器对对文文件件中中的的标标记记作作出出相相应应的的解解释释，以以页页面面的的形形式式呈呈现现在在用用户户屏屏幕幕上上。因因此此，我我们们又又把把HTMLHTML文文档档在在WebWeb浏浏览览器中的这种表现形式称为器中的这种表现形式称为WebWeb页面页面(Web Page)Web Page)。HTML HTML语言是一种标记语言，简单易学。用语言是一种标记语言，简单易学。用HTMLHTML语言编写语言编写的网页实际上是一种文本文件，它以的网页实际上是一种文本文件，它以.htmhtm或或.htmlhtml为扩展名，为扩展名，我们可以使用任何文本处理软件（例如：记事本）编写。我们可以使用任何文本处理软件（例如：记事本）编写。7/13/20243计算机文化基础 目 录上一页下一页 结 束HTML语言概述 HTMLHTML语语言言是是由由世世界界性性的的标标准准化化组组织织W3CW3C（World World Wide Wide Web Web ConsortiumConsortium）制制定定的的。通通过过浏浏览览http:/www.w3.orghttp:/www.w3.org可可以以了了解到解到HTMLHTML标准的最新动态。标准的最新动态。下面介绍下面介绍HTMLHTML文件的基本构成和文件的基本构成和HTMLHTML文件的层次结构。文件的层次结构。1.1.HTMLHTML文件的基本构成文件的基本构成 InternetInternet中中的的每每一一个个HTMLHTML文文件件都都包包括括文文本本内内容容和和HTMLHTML标标记记两两部部分分。其其中中，HTMLHTML标标记记负负责责控控制制文文本本显显示示的的外外观观和和版版式式，并并为为浏浏览览器器指指定定各各种种链链接接的的图图像像、声声音音和和其其他他对对象象的的位位置置。多数多数HTMLHTML标记的书写格式如下：标记的书写格式如下：文本内容文本内容/标标记记名名写写在在“”内内。多多数数HTMLHTML标标记记同同时时具具有有起起始始和和结结束束标标记记，并并且且成成对对出出现现，但但也也有有些些HTMLHTML标标记记没没有有结结束束标标记记。另外，另外，HTMLHTML标记不区分大小写。标记不区分大小写。7/13/20244计算机文化基础 目 录上一页下一页 结 束HTML语言概述 某某些些HTMLHTML标标记记还还具具有有一一些些属属性性。这这些些属属性性指指定定对对象象的的特特性性，如如背背景景颜颜色色、文文本本字字体体大大小小、对对齐齐方方式式等等。属属性性一一般般放放在在“开开始始标标记记”中中，格式如下：格式如下：2 文本内文本内容容/其中标记名和属性之间用空格分隔。如果标记其中标记名和属性之间用空格分隔。如果标记有多种属性，属性之间也要用空格分开。有多种属性，属性之间也要用空格分开。7/13/20245计算机文化基础 目 录上一页下一页 结 束HTML语言概述2.2.HTMLHTML网页的结构网页的结构 现现在在我我们们先先看看一一个个简简单单的的HTMLHTML文文件件，从从中中体体会会用用HTMLHTML语言编写网页时的层次结构。语言编写网页时的层次结构。【例【例9-19-1】用】用HTMLHTML语言编写一个简单的网页。语言编写一个简单的网页。html我的第一个我的第一个WebWeb页页/title欢迎进入欢迎进入HTMLHTML世界！世界！/h1这这里里我我们们首首先先介介绍绍HTMLHTML语语言言的的基基本本知知识识和和语语法法。然然后后，讲授如何使用讲授如何使用HTMLHTML语言编写您的语言编写您的WebWeb页面。页面。/p7/13/20246计算机文化基础 目 录上一页下一页 结 束HTML语言概述 将将上上述述代代码码用用文文本本编编辑辑器器编编辑辑并并保保存存为为一一个个扩扩展展名名为为.htmhtm的的文文件件，双双击击该该文文件件图图标标，在浏览器中看到如下图所示的结果。在浏览器中看到如下图所示的结果。图9-17/13/20247计算机文化基础 目 录上一页下一页 结 束HTML语言概述 从从上上例例可可以以看看出出，一一般般HTMLHTML文文件件都都是是以以 html开开头头，以以/html结结束束。其其文文件件结结构构由以下两部分组成：由以下两部分组成：1 1）头部（）头部（HeadHead）HTMLHTML文文件件的的头头部部由由 head和和/head标标记记定定义义。通通常常情情况况下下，文文件件的的标标题题、语语言言字字符符集集信信息息等等都都放放在在头头部部信信息息中中。最最常常用用到到的的标标记记是是 title，它它用用于于定定义义网网页页文文件件的的标标题题，当当该该网网页页文文件件被被打打开开后后，网网页文件的标题将出现在浏览器的标题栏中。页文件的标题将出现在浏览器的标题栏中。7/13/20248计算机文化基础 目 录上一页下一页 结 束HTML语言概述2 2）正文主体（）正文主体（BodyBody）正正文文主主体体是是HTMLHTML文文件件的的核核心心内内容容，由由 body和和/body标标记记定定义义。body标标记记具具有有一一些些常常用用的的属属性，格式如下：性，格式如下：=#n color=#n其中，其中，bgcolorbgcolor为背景颜色，为背景颜色，colorcolor为文本颜色。为文本颜色。n n为六位十六进制数。为六位十六进制数。如果网页使用背景图像，格式为：如果网页使用背景图像，格式为：bodyHTMLHTML对格式的要求并不严格，当对格式的要求并不严格，当HTMLHTML文件被浏览文件被浏览器扫描时，所有包含在文件中的空格、回车等均器扫描时，所有包含在文件中的空格、回车等均被忽略了。因此你可以将一行写成两行或多行，被忽略了。因此你可以将一行写成两行或多行，在浏览器中结果是相同的。在浏览器中结果是相同的。返 回7/13/20249计算机文化基础 目 录上一页下一页 结 束9.1.2 HTML语言的基本语法1.1.文本布局文本布局 1 1）段落标记）段落标记 p标标记记指指定定文文档档中中一一个个独独立立的的段段落落。通通过过设设置置alignalign属属性性，控控制制段段落落的的对对齐齐方方式式，其其值值可可以以是是leftleft、centercenter、rightright，分分别别表表示示左左对对齐齐、居居中中和和右右对齐，默认值为左对齐。对齐，默认值为左对齐。使用格式如下：使用格式如下：p标记定义的两个段落之间留有一个空行。标记定义的两个段落之间留有一个空行。2 2）换行标记）换行标记 标记可以强制文本换行。该标记只有开始标记。标记可以强制文本换行。该标记只有开始标记。3 3）水平线标记）水平线标记 hr水平线标记水平线标记 hr用于在网页中插入一条水平线。用于在网页中插入一条水平线。7/13/202410计算机文化基础 目 录上一页下一页 结 束HTML语言的基本语法2.2.文字格式文字格式HTMLHTML语言中用于文字格式化的标记有：语言中用于文字格式化的标记有：1 1）标题标记）标题标记 格式为：格式为：标题文字内容标题文字内容/其其中中n n说说明明大大小小级级别别，取取值值范范围围为为1 1到到6 6的的数数字字。把把标标题题分分为为 6 6级级，即即h1h6h1h6，其中其中h1h1文字最大，文字最大，h6h6文字最小。文字最小。2 2）字体标记）字体标记 font字体标记用来对文字格式进行设置，主要具有以下属性：字体标记用来对文字格式进行设置，主要具有以下属性：（1 1）sizesize属性用来控制文字的大小，其格式为：属性用来控制文字的大小，其格式为：font size=n其中其中n n的取值范围为的取值范围为1 17 7的数字，默认值为的数字，默认值为3 3。font标标记记和和 标标记记都都可可以以控控制制文文字字的的大大小小。一一般般情情况况下下，文文章章的的标标题题最最好好由由 标标记记控控制制，而而其其余余的的文文字字由由 font标标记记控制。相比较而言，控制。相比较而言，font对字体的控制更加灵活。对字体的控制更加灵活。7/13/202411计算机文化基础 目 录上一页下一页 结 束HTML语言的基本语法（2 2）colorcolor属性用来控制文字的颜色，其格式为：属性用来控制文字的颜色，其格式为：font 其中其中n n是一个十六进制的六位数。是一个十六进制的六位数。（3 3）faceface属性用来指明文字使用的字体，其格式为：属性用来指明文字使用的字体，其格式为：font 其其中中，字字体体名名的的选选择择由由WindowsWindows操操作作系系统统安安装装的的字字体体决决定定。如：宋体、楷体如：宋体、楷体_ _GB2312GB2312、Times New RomanTimes New Roman、ArialArial等。等。3 3）字形标记）字形标记 字字形形标标记记用用于于设设置置文文字字的的粗粗体体、斜斜体体、上上标标、下下标标、下下划划线等，如下表所示。线等，如下表所示。标记格式标记格式字形结果字形结果粗体粗体斜体斜体下划线下划线上标上标下标下标7/13/202412计算机文化基础 目 录上一页下一页 结 束HTML语言的基本语法3.3.插入图片插入图片 标标记记将将图图片片插插入入网网页页中中。可可以以设设置置图图片片的的大大小小以以及及相相邻邻文文字字的的排列方式。该标记具有以下属性：排列方式。该标记具有以下属性：（1 1）srcsrc属性：指明图片文件所在的位置。格式为：属性：指明图片文件所在的位置。格式为：=URL 其中其中URLURL是指图片文件存放的位置。是指图片文件存放的位置。（2 2）altalt属属性性：图图片片的的文文字字说说明明，当当鼠鼠标标指指针针指指向向图图片片时时，该该图图片片的的说说明明性性文字弹出。格式为：文字弹出。格式为：（3 3）heightheight和和widthwidth属性：设置图片显示区域的高度和宽度。格式为：属性：设置图片显示区域的高度和宽度。格式为：=URL height=n1 width=n2 其其中中heightheight和和widthwidth属属性性的的取取值值n1n1和和n2n2为为像像素素数数，像像素素数数越越大大，图图片片显显示越大。示越大。（4 4）borderborder属性：设置图片文件的边框。格式为：属性：设置图片文件的边框。格式为：=URL border=n 其中其中n n为像素数。为像素数。7/13/202413计算机文化基础 目 录上一页下一页 结 束HTML语言的基本语法（5 5）alignalign属性：设置图片相对于文本的位置关系。格式为：属性：设置图片相对于文本的位置关系。格式为：对对齐齐方方式式可可以以是是：toptop（顶顶边边对对齐齐）、middlemiddle（垂垂直直居居中中）、bottombottom（底底边边对对齐齐）、leftleft（左左对对齐齐）、rightright（右右对对齐）。齐）。4.4.超链接超链接 在在HTMLHTML语语言言中中，a和和/a标标记记用用于于设设置置网网页页中中的的超超链接链接hrefhref属性指明被超链接的文件地址。格式为：属性指明被超链接的文件地址。格式为：=URL超链接文本超链接文本/a 用用于于表表示示超超链链接接的的文文本本一一般般显显示示为为蓝蓝色色并并且且加加下下划划线线。在在浏浏览览器器中中，当当鼠鼠标标指指针针指指向向该该文文本本时时，箭箭头头变变为为手手形形，并在浏览器的状态栏中显示该超链接的地址。并在浏览器的状态栏中显示该超链接的地址。若使用图片做超链接，可使用如下格式完成：若使用图片做超链接，可使用如下格式完成：=URL27/13/202414计算机文化基础 目 录上一页下一页 结 束HTML语言的基本语法5.5.使用表格使用表格 在在网网页页中中插插入入一一个个表表格格，需需要要用用到到一一组组HTMLHTML标标记记。定义表格的有关标记如下：定义表格的有关标记如下：table 定义表格。定义表格。定义表行。定义表行。td 定义表列。定义表列。常常用用的的标标记记属属性性中中，borderborder属属性性用用于于设设置置表表格格边边框框的的宽宽度度；widthwidth、heightheight属属性性设设定定表表格格或或表表项项的的宽宽度度、高高 度度，取取 值值 可可 以以 是是 像像 素素 数数 或或 百百 分分 数数；cellspacingcellspacing和和cellpaddingcellpadding属属性性分分别别用用于于设设置置单单元元格格之之间间的的间间隙隙和和单单元元格格内内部部空空白白；alignalign属属性性设设置置表表格格或或表表项项的的对对齐齐方方式式；bgcolorbgcolor和和backgroundbackground属属性性设设置置表格背景的颜色和背景图像。表格背景的颜色和背景图像。返 回7/13/202415计算机文化基础 目 录上一页下一页 结 束9.2 FrontPage 2000概述 虽虽然然使使用用一一般般的的文文本本编编辑辑器器就就可可以以编编写写HTMLHTML文文档档，但但是是使使用用专专门门的的HTMLHTML编编辑辑器器或或WebWeb创创作作工工具具往往往往更更加加方方便便。具具有有“所所见见即即所所得得”功功能能的的WebWeb页页面面创创作作工工具具可可以以使使WebWeb创创作作人人员员直直接接面面对对WebWeb页页面面进进行行编编辑辑修修改改，并并且且能能立立即看到即看到WebWeb页面的显示效果。页面的显示效果。FrontPageFrontPage是是微微软软公公司司开开发发的的网网页页制制作作 和和 网网 站站 管管 理理 工工 具具。FrontPage FrontPage 20002000是是Microsoft Microsoft Office Office 20002000的的 组组 件件 之之 一一，与与OfficeOffice的的其其他他组组件件高高度度融融合合。它它界界面面友友好好，功功能能强强大大，易易学学易易用用，是是目目前前使使用用较较为为广广泛泛的网页制作、网站管理工具之一。的网页制作、网站管理工具之一。7/13/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中的视图中的视图返 回7/13/202417计算机文化基础 目 录上一页下一页 结 束9.2.1 FrontPage 2000的主要功能FrontPage 2000FrontPage 2000的主要功能是制作网页和管理网站。的主要功能是制作网页和管理网站。使使用用FrontPage FrontPage 20002000可可以以创创建建新新的的网网页页，也也可可以以打打开开并并修修改改已已经经存存在在的的网网页页。FrontPage FrontPage 20002000提提供供了了多多种种编编辑辑网网页页的的方方式式，不不但但可可以以直直接接修修改改HTMLHTML，而而且且可可以以采采用用“所所见见即即所所得得”的的方方式式编编辑辑网网页页，还还可可以以使使用用菜菜单单命命令令插插入入各各种网页元素，使用对话框修改其属性，十分灵活。种网页元素，使用对话框修改其属性，十分灵活。在在FrontPage FrontPage 20002000中中，可可以以很很容容易易地地插插入入文文本本、图图片片、表表格格、组组件件等等元元素素；可可以以使使用用主主题题，共共享享边边框框，框框架架等等管管理网页的外观；还可以使用表单等元素设计出交互式网页。理网页的外观；还可以使用表单等元素设计出交互式网页。FrontPage FrontPage 20002000提提供供了了强强大大的的站站点点管管理理功功能能。一一组组相相关关网网页页和和有有关关文文件件组组成成一一个个站站点点，站站点点也也是是FrontPage FrontPage 20002000对对网网站站进进行行管管理理的的基基本本单单位位。在在FrontPage FrontPage 20002000中中可可以轻松实现设计、管理、分析、发布和维护站点等工作。以轻松实现设计、管理、分析、发布和维护站点等工作。返 回7/13/202418计算机文化基础 目 录上一页下一页 结 束9.2.2 FrontPage 2000的启动与退出 1.1.FrontPage 2000FrontPage 2000的启动的启动 FrontPage 2000FrontPage 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窗口窗口 另外，也可以在桌面上建立另外，也可以在桌面上建立FrontPage 2000FrontPage 2000快捷方式，快捷方式，后在桌面上双击该图标，即可启动后在桌面上双击该图标，即可启动FrontPage 2000FrontPage 2000。7/13/202419计算机文化基础 目 录上一页下一页 结 束FrontPage 2000的启动与退出2.2.FrontPage 2000FrontPage 2000的退出的退出 FrontPage 2000FrontPage 2000的退出有以下三种方式：的退出有以下三种方式：（1 1）选取）选取“文件文件”菜单中的菜单中的“退出退出”。（2 2）单击操作窗口中右上角的）单击操作窗口中右上角的“关闭关闭”按钮。按钮。（3 3）按快捷键）按快捷键Alt+F4Alt+F4。返 回7/13/202420计算机文化基础 目 录上一页下一页 结 束9.2.3 网页与网站网网页页是是WWWWWW上上的的基基本本文文档档，用用HTMLHTML书书写写，通通常常以以.htmhtm或或.htmlhtml为为扩扩展展名名。网网页页可可以以独独立立存存在在，但但常常常常作作为为网网站站的的一一部部分分。网网站站是是一一组组相相关关网网页页和和有有关关文文件件的的组组合合。网网站站一一般般有有 一一 个个 特特 殊殊 的的 网网 页页 作作 为为 浏浏 览览 的的 起起 始始 点点，称称 为为 主主 页页（HomepageHomepage），），用来引导用户访问其他网页。用来引导用户访问其他网页。网网站站通通常常位位于于WebWeb服服务务器器上上。客客户户机机通通过过网网络络向向WebWeb服服务务器器发发送送请请求求，WebWeb服服务务器器响响应应客客户户机机的的请请求求，并并使使用用HTTPHTTP协协议议将将网网页页和和有有关关文文件件通通过过网网络络传传送送回回客客户户机机。客客户户机机端端使用网页浏览器就能看到网页的内容了。使用网页浏览器就能看到网页的内容了。在在FrontPage FrontPage 20002000中中，可可以以建建立立和和编编辑辑独独立立的的网网页页，也也可可以以设设计计和和管管理理站站点点。在在站站点点中中可可以以包包含含大大量量网网页页和和各各种种文文件件，甚甚至至可可以以包包含含子子站站点点，而而且且只只有有在在使使用用站站点点时时，FrontPage FrontPage 20002000的的许许多多特特性性才才有有效效。例例如如：在在单单个个网网页页的的环境中，导航栏变得毫无意义。环境中，导航栏变得毫无意义。7/13/202421计算机文化基础 目 录上一页下一页 结 束网页与网站 通通常常，在在FrontPage FrontPage 20002000中中建建立立的的站站点点需需要要发发布布到到InternetInternet中中的的WebWeb服服务务器器上上，成成为为真真正正意意义义上上的的网网站站，InternetInternet上上的的用用户户才才能能访访问问。有有时时，可可以以在在同同一一台台计计算算机机上上安安装装WebWeb服服务务器器端端软软件件（如如IISIIS等等），从从而可以将站点发布到本机进行测试。而可以将站点发布到本机进行测试。用用FrontPage FrontPage 20002000也也可可以以建建立立基基于于本本地地硬硬盘盘的的站站点点，这这种种站站点点以以本本机机文文件件夹夹的的形形式式存存在在，不不需需要要发发布布到到服服务务器器，这这时时，所所有需要服务器支持的功能都是不可用的。有需要服务器支持的功能都是不可用的。返 回7/13/202422计算机文化基础 目 录上一页下一页 结 束9.2.4 FrontPage 2000的编辑方式的编辑方式 FrontPage FrontPage 20002000的的网网页页视视图图下下有有三三种种编编辑辑方式：普通、方式：普通、HTMLHTML、预览。预览。该该视视图图窗窗口口底底部部有有三三个个标标签签：“普普通通”、“HTML”HTML”和和“预预览览”。它它们们分分别别控控制制网网页页以以普普通通方方式式、HTMLHTML方方式式进进行行编编辑辑或或是是预预览览网网页页的的效效果，默认是普通方式。果，默认是普通方式。如如果果切切换换到到HTMLHTML方方式式，用用户户就就可可以以看看到到FrontPage FrontPage 20002000自自动动生生成成的的HTMLHTML代代码码。在在HTMLHTML方式下，可以直接键入方式下，可以直接键入HTMLHTML代码。代码。预预览览方方式式实实际际上上是是用用Internet Internet ExplorerExplorer来显示网页。来显示网页。返 回7/13/202423计算机文化基础 目 录上一页下一页 结 束9.2.5 FrontPage 2000中的视图FrontPage FrontPage 20002000提提供供了了6 6种种视视图图以以方方便便用用户户对对站站点点的的管管理理，可可以在不同的视图中进行不同的操作。以在不同的视图中进行不同的操作。1.1.网页视图网页视图网网页页视视图图是是FrontPage FrontPage 20002000中中最最常常用用的的工工作作界界面面。网网页页的的创创建建、编辑、预览等基本操作都是在此视图中进行的。编辑、预览等基本操作都是在此视图中进行的。2.2.文件夹视图文件夹视图在在文文件件夹夹视视图图中中，站站点点显显示示为为一一组组文文件件和和文文件件夹夹。可可以以在在文文件件夹夹视图中创建、移动和删除文件或文件夹。视图中创建、移动和删除文件或文件夹。3.3.报表视图报表视图使使用用报报表表视视图图可可以以方方便便地地了了解解当当前前站站点点的的文文件件内内容容、更更新新链链接接情情况况、组组件件错错误误、所所有有文文件件列列表表及及变变化化情情况况等等信信息息。可可在在“报报表表”工具栏中的工具栏中的“报表报表”下拉列表中选择所需显示的报表。下拉列表中选择所需显示的报表。4.4.超链接视图超链接视图超超链链接接视视图图将将当当前前站站点点显显示示为为链链接接文文件件的的一一个个网网络络，它它们们表表示示了了站站点点中中各各个个网网页页之之间间的的相相互互链链接接关关系系。超超链链接接视视图图就就像像一一张张地地图图，表明站点中的超链接路径。表明站点中的超链接路径。7/13/202424计算机文化基础 目 录上一页下一页 结 束FrontPage 2000中的视图5.5.任务视图任务视图 任任务务视视图图主主要要用用来来创创建建和和管管理理任任务务。在在视视图图中中列列出出了了当当前前站站点点的的“任任务务”，即即当当前前站站点点中中尚尚未未完完成的项目。成的项目。6.6.导航视图导航视图 使使用用导导航航视视图图可可方方便便地地观观察察站站点点的的链链接接结结构构，它它以以层层次次状状的的组组织织结结构构图图形形式式显显示示（见见图图9-39-3）。在在该视图下，可以通过拖曳操作改变链接结构。该视图下，可以通过拖曳操作改变链接结构。图9-3 导航视图 返 回7/13/202425计算机文化基础 目 录上一页下一页 结 束9.3 网 页 制 作WebWeb站站点点的的开开发发，首首先先应应当当根根据据其其用用途途规规划划站站点点，确确定定站站点点的的结结构构，并并在在本本地地磁磁盘盘上上创创建建站站点点，然然后后再再建建立立网网页页。那那么么什什么么是是“站站点点”呢呢？其其实实站站点点就就是是一一组组相相关关网网页页和和其其他他文文件件的的集集合合。这这些些网网页页在在InternetInternet中中表表现现为为 一一 个个 完完 整整 结结 构构 就就 称称 为为“站站 点点”。在在FrontPage FrontPage 20002000中中，站站点点以以一一个个特特殊殊文文件件夹夹的形式存储。的形式存储。7/13/202426计算机文化基础 目 录上一页下一页 结 束9.3 网 页 制 作9.3.1 创建站点创建站点9.3.2 网页编辑网页编辑9.3.3 插入对象插入对象9.3.4 创建超链接创建超链接返 回7/13/202427计算机文化基础 目 录上一页下一页 结 束9.3.1 创建站点创建站点 使使用用FrontPage FrontPage 20002000的的向向导导和和模模板板，用用户户可可以轻松地创建出各种用途和风格的站点。以轻松地创建出各种用途和风格的站点。新新建建站站点点时时，可可以以根根据据自自己己的的需需求求选选择择不不同同的的模模板板和和向向导导。对对于于不不同同的的模模板板和和向向导导，其其新新建建站站点点的的步步骤骤略略有有不不同同。下下面面以以“只只有有一一个个网网页的站点页的站点”模板为例，介绍新建站点的方法。模板为例，介绍新建站点的方法。（1 1）在在“文文件件”菜菜单单的的“新新建建”子子菜菜单单中中选选择择“站点站点”，打开，打开“新建新建”对话框；对话框；（2 2）在在“新新建建”对对话话框框的的“指指定定新新站站点点的的位位置置”文本框中输入存储站点的文件夹；文本框中输入存储站点的文件夹；7/13/202428计算机文化基础 目 录上一页下一页 结 束创建站点创建站点3 3）双双击击“只只有有一一个个网网页页的的站站点点”模模板板，新新建建站站点点如如图图9-49-4所示。所示。该该站站点点只只有有一一个个空空白白网网页页index.index.htmhtm（主主页页）和和用用于于存存储储图图片片的的文文件件夹夹imagesimages，你你可可以以打打开开index.index.htmhtm编编辑辑该该网网页页，也也可以进一步根据网站规划创建文件夹和新建其他网页。可以进一步根据网站规划创建文件夹和新建其他网页。选选 择择“文文 件件”菜菜 单单 的的“退退 出出”命命 令令，可可 以以 关关 闭闭FrontPage FrontPage 20002000。要要再再次次对对该该站站点点进进行行操操作作，在在启启动动FrontPage FrontPage 20002000后后使使用用“文文件件”菜菜单单中中的的“打打开开站站点点”命命令打开该站点。令打开该站点。返 回7/13/202429计算机文化基础 目 录上一页下一页 结 束9.3.2 网页编辑1.新建网页新建网页2.打开网页打开网页3.设置文字格式设置文字格式4.设置段落格式设置段落格式5.设置网页属性设置网页属性6.预览网页预览网页返 回7/13/202430计算机文化基础 目 录上一页下一页 结 束网页编辑1.1.新建网页新建网页 要创建一个新的网页，可按下面的步骤操作：要创建一个新的网页，可按下面的步骤操作：（1 1）从从“文文件件”菜菜单单的的“新新建建”子子菜菜单单中中选选择择“网网页页”命命令令，打开打开“新建新建”对话框。对话框。（2 2）在在“常常规规”选选项项卡卡中中选选择择所所需需的的模模板板，可可在在“说说明明”及及“预预览览”区区域域查查看看该该模模板板的的说说明明及及预预览览图图。如如果果要要建建一一个个空白网页，可选中空白网页，可选中“普通网页普通网页”模板。模板。（3 3）单单击击“确确定定”按按钮钮，系系统统新新建建一一个个基基于于所所选选模模板板的的网网页页。此此时时，新新建建的的网网页页显显示示在在FrontPage FrontPage 20002000窗窗口口中中，可可以以对其进行编辑修改等操作。对其进行编辑修改等操作。（4 4）单单击击“文文件件”菜菜单单，选选择择“保保存存文文件件”命命令令，弹弹出出“另另存存为为”对对话话框框。在在“另另存存为为”对对话话框框中中，单单击击“更更改改”按按钮钮修修改改网网页页标标题题，如如“新新闻闻”。在在“文文件件名名”文文本本框框中中输输入入网网页页文文件件名名，如如news.news.htmhtm。设设置置完完成成后后单单击击“保保存存”按钮。按钮。（5 5）单单击击“视视图图”框框中中的的“导导航航”图图标标，在在“文文件件夹夹列列表表”中中拖拖动动新新建建网网页页到到站站点点的的结结构构图图，将将其其置置入入相相应应位位置置。此此时时，双双击击该该页页面面图图标标可可切切换换到到网网页页视视图图。网网页页中中若若包包含含导航栏，则导航栏自动更新链接关系。导航栏，则导航栏自动更新链接关系。返 回7/13/202431计算机文化基础 目 录上一页下一页 结 束网页编辑2.2.打开网页打开网页 在在FrontPage FrontPage 20002000中中，编编辑辑某某个个网网页页必必须须首首先先打打开开该该网网页页。打打开开网网页页的的方方法法有有多多种，最常用的操作步骤如下：种，最常用的操作步骤如下：（1 1）在在FrontPage FrontPage 20002000窗窗口口中中，单单击击工工具具栏中的栏中的“文件夹列表文件夹列表”按钮；按钮；（2 2）在在文文件件夹夹列列表表窗窗口口中中找找到到要要编编辑辑的的网网页，然后双击网页图标即可打开网页。页，然后双击网页图标即可打开网页。实实际际上上，在在其其他他视视图图中中双双击击网网页页图图标标，同样会打开指定网页。同样会打开指定网页。返 回7/13/202432计算机文化基础 目 录上一页下一页 结 束网页编辑3.3.设置文字格式设置文字格式 同同其其他他Microsoft Microsoft OfficeOffice组组件件一一样样，网网页页中中可可以以输输入入文文字字，复复制制、剪剪切切和和粘粘贴贴文文字字，设设置置文文字字格式，查找和替换文字等。格式，查找和替换文字等。在在FrontPage FrontPage 20002000中中，对对文文字字的的格格式式提提供供了了相相当当完完整整的的设设定定功功能能，文文字字格格式式的的变变化化也也因因此此多多种种多多样样。我我们们可可以以使使用用工工具具栏栏上上的的工工具具按按钮钮或或者者菜菜单命令，快速地改变文字的外观。单命令，快速地改变文字的外观。文文字字格格式式包包括括字字体体、字字形形、大大小小、颜颜色色和和修修饰饰效果等属性。效果等属性。设设置置文文字字格格式式的的操操作作步步骤骤是是：选选中中文文字字，单单击击“格格式式”菜菜单单，选选择择“字字体体”命命令令，打打开开“字字体体”对话框，在对话框中设置字体的各种属性。对话框，在对话框中设置字体的各种属性。虽虽然然可可以以设设置置各各种种美美观观的的字字体体，但但是是由由于于浏浏览览者者只只能能使使用用本本地地计计算算机机中中安安装装的的字字体体显显示示网网页页，因此还是使用常见的字体为好。因此还是使用常见的字体为好。返 回7/13/202433计算机文化基础 目 录上一页下一页 结 束网页编辑4.4.设置段落格式设置段落格式 文文字字段段落落的的格格式式编编排排对对于于一一个个网网页页的的外外观观是是至至关关重重要要的的。FrontPage FrontPage 20002000通通过过按按EnterEnter键键划划分分段段落落。值值得得注注意意的的是是，段段落落之之间间插插入入了了一一个个空空行行。如如果果只只是是需需要要换换行行，而而不不是是另另起起一一个个段段落落，按按Shift+EnterShift+Enter键键即即可可。实实际际上上，按按EnterEnter键键在在HTMLHTML代代码码中中插插入入的的是是 p标标记记，而而按按Shift+EnterShift+Enter键则插入的是键则插入的是 标记。标记。段段落落格格式式主主要要包包括括对对齐齐方方式式、文文本本缩缩进进和和段段落落间间距距等。设置段落格式的方法如下：等。设置段落格式的方法如下：（1 1）将插入点移动到要设置格式的段落中；）将插入点移动到要设置格式的段落中；（2 2）单击）单击“格式格式”菜单，选择菜单，选择“段落段落”命令；命令；（3 3）在）在“段落段落”对话框中可以设置段落的各种属性。对话框中可以设置段落的各种属性。返 回7/13/202434计算机文化基础 目 录上一页下一页 结 束网页编辑5.5.设置网页属性设置网页属性 网网页页的的属属性性包包括括网网页页的的标标题题、位位置置、背背景景、页页边边距距等等。要要设设置置网网页页属属性性，用用户户可可以以使使用用“文文件件”菜菜单单里里的的“属属性性”命命令令，或或者者在在网网页页的的任任意意地地方方单单击击鼠鼠标标右右键键，在在弹弹 出出 的的 菜菜 单单 中中 选选 择择“属属 性性”命命 令令，FrontPage FrontPage 20002000将将显显示示“网网页页属属性性”对对话话框。框。7/13/202435计算机文化基础 目 录上一页下一页 结 束网页编辑1 1）“常规常规”属性属性 要要设设置置网网页页的的“常常规规”属属性性，单单击击“网网页页属属性性”对对话话框框的的“常常规规”选选项项卡卡，如如图图9-59-5所所示示。“标标题题”框框用用于于给给出出网网页页的的标标题题，网网页页标标题题将将显显示示在在浏浏览览器器的的标标题题栏栏中中。“背背景景音音乐乐”框框用用于于指指定定网网页页的的背背景景声声音音，当当WebWeb浏浏览览器器打打开开网网页页时时，将将自自动动播播放放背背景景声声音音。其其中中，“位位置置”框框用用于于指指定定声声音音文文件件的的位位置置，用用户户可可以以单单击击“浏浏览览”按按钮钮，在在当当前前打打开开的的网网站站或或本本地地磁磁盘盘中中定定位位一一个个声声音音文文件件。“循循环环次次数数”框框用用于于指指定定声声音音要要反反复复播播放放的的次次数数，如如果果选选中中“不限次数不限次数”复选框，表示一直不停地播放。复选框，表示一直不停地播放。图9-5 “常规”选项卡 7/13/202436计算机文化基础 目 录上一页下一页 结 束网页编辑2 2）“背景背景”属性属性 要要设设置置网网页页的的背背景景颜颜色色、背背景景图图片片以以及及超超链链接接的的颜颜色色，单单击击“网网页页属属性性”对话框的对话框的“背景背景”选项卡，如图选项卡，如图9-69-6所示。所示。用用户户可可以以选选中中“背背景景图图片片”复复选选框框，并并指指定定一一个个图图片片作作为为网网页页的的背背景景图图片片，也也可可以以单单击击“浏浏览览”按按钮钮，在在当当前前打打开开的的网网站站或或本本地地磁磁盘盘中中定定位位一个图片文件。一个图片文件。通通过过单单击击相相应应的的下下拉拉列列表表框框，设设置置网网页页的的背背景景颜颜色色、文文本本颜颜色色以以及及超超链链接接文文字字的的颜颜色色。当当同同时时设设置置背背景景图图片片和和背背景景颜颜色色时时，图图片片将将覆覆盖盖背背景景色。色。FrontPage FrontPage 20002000允允许许用用户户使使用用其其他他网网页页中中设设置置的的“背背景景”属属性性，包包括括背背景景图图片片、背背景景颜颜色色、文文本本前前景景颜颜色色以以及及超超链链接接的的颜颜色色。此此时时只只要要选选择择“从另一网页获得背景信息从另一网页获得背景信息”并定位一个网页的并定位一个网页的URLURL即可。即可。图9-6 “背景”选项卡 7/13/202437计算机文化基础 目 录上一页下一页 结 束网页编辑3 3）“边距边距”属性属性 在在“边边距距”选选项项卡卡中中可可以以设设置置页页面面的的顶顶端端页页边边距距和和左左端端页页边边距距。如如果果要要设设置置顶顶端端页页边边距距，选选中中“指指定定上上边边距距”复复选选框框，并并指指定定上边距的像素数。上边距的像素数。返 回7/13/202438计算机文化基础 目 录上一页下一页 结 束网页编辑6.6.预览网页预览网页 网网页页制制作作过过程程中中，用用户户可可以以随随时时对对网网页页进进行行预预览览。可可以以转转换换到到预预览览视视图图方方式式，还还可可以以使使用用“文文件件”菜菜单单上上的的“在在浏浏览览器器中中预预览览”命命令令，使使用用外外部部浏浏览览器器打开当前网页进行预览。打开当前网页进行预览。返 回7/13/202439计算机文化基础 目 录上一页下一页 结 束9.3.3 插入对象1.插入水平线插入水平线2.插入图片插入图片3.插入字幕插入字幕4.插入悬停按钮插入悬停按钮 5.插入动态插入动态HTML效果效果 返 回7/13/202440计算机文化基础 目 录上一页下一页 结 束插入水平线插入水平线1.1.插入水平线插入水平线 在在网网页页中中输输入入文文本本内内容容之之后后，还还可可在在不不同同的的段段落落、行行之之间间添添加加水水平平线线，以以增增强强视视觉效果。觉效果。操作步骤如下：操作步骤如下：（1 1）在准备插入水平线的位置设置插入点。）在准备插入水平线的位置设置插入点。（2 2）打打开开“插插入入”菜菜单单，选选择择“水水平平线线”命命令令，此此时时在在网网页页的的插插入入点点处处插插入入一一条条水水平平线线。如如果果插插入入点点位位于于或或接接近近行行尾尾，水水平平线将插入到下一行。线将插入到下一行。7/13/202441计算机文化基础 目 录上一页下一页 结 束插入水平线插入水平线 打开打开“水平线属性水平线属性”对话框，如图对话框，如图9-79-7所示，在所示，在“宽度宽度”栏中可设置水平线的宽度，在栏中可设置水平线的宽度，在“高度高度”栏中输栏中输入水平线的高度，在入水平线的高度，在“对齐方式对齐方式”栏中选择水平线在栏中选择水平线在网页内水平对齐的方式，在网页内水平对齐的方式，在“颜色颜色”列表框内设置水列表框内设置水平线的颜色，系统默认的颜色是黑色，选择平线的颜色，系统默认的颜色是黑色，选择“实线实线（无阴影）（无阴影）”复选框时，水平线将被设置成实心线，复选框时，水平线将被设置成实心线，并且在水平线的边缘上没有阴影。并且在水平线的边缘上没有阴影。图9-7 “水平线属性”对话框返 回7/13/202442计算机文化基础 目 录上一页下一页 结 束插入图片插入图片2.2.插入图片插入图片 图图片片可可以以使使网网页页变变得得生生动动活活泼泼，并并能能吸吸引引访访问问者者的的注注意。意。1 1）图片文件的格式）图片文件的格式 在在WWWWWW上上常常用用的的图图像像文文件件格格式式是是JPEGJPEG和和GIFGIF，它它们们都都是是压压缩缩的的图图像像格格式式，文文件件的的信信息息量量小小，适适合合于于网网络络传传输输，现现已已几几乎乎被被所所有有的的WebWeb浏浏览览器器所所支支持持，因因此此被被广广泛泛地地应应用用在在WebWeb站点的设计中。站点的设计中。图图形形交交换换格格式式GIFGIF（Graphical Graphical Interchange Interchange FormatFormat）采采用用无无损损压压缩缩方方式式，其其主主要要特特征征是是支支持持动动画画、透透明明度度、图图形渐进，但形渐进，但GIFGIF格式只支持格式只支持256256种颜色。种颜色。联联合合图图像像专专家家组组JPEGJPEG（Joint Joint Photograph Photograph Expert Expert GroupGroup）格格式式是是专专为为有有几几百百万万种种颜颜色色的的照照片片和和图图形形设设计计的的，它它采采用用有有损损压压缩缩方方式式，以以牺牺牲牲图图片片质质量量换换取取大大的的压压缩缩比比例例。但但JPEGJPEG格格式式支支持持真真彩彩色色（2424位位色色），并并且且在在压压缩缩大大的的图图像像方面已被证明很有效。方面已被证明很有效。7/13/202443计算机文化基础 目 录上一页下一页 结 束插入图片插入图片2 2）插入图片的步骤）插入图片的步骤（1 1）移动光标至想要插入图像处；）移动光标至想要插入图像处；（2 2）单单击击菜菜单单项项中中的的“插插入入”，选选择择“图图片片”项项，再再选选取二取二 级菜单中的级菜单中的“来自文件来自文件”，弹出图片对话框；，弹出图片对话框；（3 3）如如果果图图片片在在该该站站点点中中，选选中中图图片片文文件件并并按按“确确定定”按按钮钮即即可可，否否则则单单击击“从从计计算算机机上上选选择择一一个个文文件件”按按钮钮或或单单击击“使使用用WebWeb浏浏览览器器来来选选择择网网页页或或文文件件”按按钮钮，从从计计算算机机本本地地硬硬盘盘中中或或者者InternetInternet上上选选中中图图片片并按并按“确定确定”按钮，即可将其插入网页中。按钮，即可将其插入网页中。3 3）设置图片属性）设置图片属性 打打开开“图图片片属属性性”对对话话框框，在在“外外观观”选选项项卡卡中中，可可以以调调整整图图片片的的大大小小。为为了了防防止止改改变变图图片片原原来来的的长长宽宽比比例例，可可以以选选中中“保保持持纵纵横横比比”复复选选框框，这这样样图图片片就就会会根根据据原原来来的的长长宽宽比比例例来来调调整整大大小小。同同样样在在“外外观观”选选项项卡卡中中，可可以以选选择择“对对齐齐方方式式”，设设置置图图片边框的宽度，片边框的宽度，0 0为无边框。为无边框。7/13/202444计算机文化基础 目 录上一页下一页 结 束插入图片插入图片4 4）编辑图片）编辑图片 选选中中插插入入的的图图片片，单单击击“查查看看”菜菜单单中中的的“工工具具栏栏”，选选择择“图图片片”命命令令，打打开开图图片片编编辑辑工工具具栏栏，可可以以对对图图片片的的亮亮度度、对对比比度度进进行行调调整整，可可以以旋旋转转、翻翻转转图图片片，对对图图片片进进行行剪剪裁裁，设设置置透透明明的的颜颜色色等等操操作作，如如图图9-89-8所示。所示。图9-8图片编辑工具栏返 回7/13/202445计算机文化基础 目 录上一页下一页 结 束插入字幕插入字幕3.3.插入字幕插入字幕 在在制制作作网网页页时时，可可以以将将网网页页中中的的文文字字做做成成由由左左至至右右，或或由由右右至至左左移移动动的的动动态态效效果果。在在网网页页中中加加入入移移动动字字幕幕，会会使使网网页页看看起来更活泼。具体操作步骤如下：起来更活泼。具体操作步骤如下：（1 1）将将插插入入点点设设置置在在要要插插入入移移动动字字幕幕的的位位置或者选择作为移动字幕的文本。置或者选择作为移动字幕的文本。（2 2）单单击击“插插入入”菜菜单单中中的的“组组件件”，选选择择“字字幕幕”命命令令，出出现现“字字幕幕属属性性”对对话话框。框。7/13/202446计算机文化基础 目 录上一页下一页 结 束插入字幕插入字幕（3 3）如如果果已已经经选选择择了了作作为为移移动动字字幕幕的的文文本本，此此文文本本就就会会出出现现在在“文文本本”框框中中（见见图图9-99-9）。如如果果没没有有选选择择文文本本，可可在在“文文本本”框框中中输输入入作作为移动字幕的文本。为移动字幕的文本。图图9-9“字幕属性字幕属性”对话框对话框7/13/202447计算机文化基础 目 录上一页下一页 结 束插入字幕插入字幕（4 4）在在“方方向向”区区域域中中选选择择文文字字的的移移动动方方向向。在在“速速度度”区区域域中中可可以以指指定定文文字字的的移移动动速速度度，在在“延延迟迟”框框中中输输入入的的数数值值表表示示在在每每个个连连续续运运动动之之间间暂暂停停的的毫毫秒秒数数，“数数量量”框框中中输输入入的的数数值值表表示示文文本本每每次次移移动动的的距距离离。在在“表表现现方方式式”区区域域中中可可以以指指定定文文字字的的运运动动方方式式，选选中中“重重复复”区区域域的的“连连续续”复复选选框框，则则移移动动字字幕幕连连续续不不停停循循环环；若若要要设设置置文文本本重重复复有有限限的的次次数数，则则取取消消选选中中并并输输入入字字幕幕重重复复的的次次数数。在在“背背景景颜颜色色”列列表表框框中中可可以以设设置置移移动动字字幕幕的背景颜色。的背景颜色。（5 5）单击）单击“确定确定”按钮。按钮。返 回7/13/202448计算机文化基础 目 录上一页下一页 结 束插入悬停按钮插入悬停按钮4.4.插入悬停按钮插入悬停按钮 悬悬停停按按钮钮是是一一种种动动感感按按钮钮，当当访访问问者者将将鼠鼠标标指指向向该该按按钮钮时时，按按钮钮就就会会改改变变颜颜色色或或形形状状。插插入入悬悬停停按按钮钮的的具体操作步骤如下：具体操作步骤如下：（1 1）将插入点设置在要插入悬停按钮的位置。）将插入点设置在要插入悬停按钮的位置。（2 2）单单击击“插插入入”菜菜单单中中的的“组组件件”，选选择择“悬悬停停按按钮钮”命命令令，弹弹出出“