计算机文化基础ppt课件 第9章.ppt

《计算机文化基础ppt课件 第9章.ppt》由会员分享，可在线阅读，更多相关《计算机文化基础ppt课件 第9章.ppt（101页珍藏版）》请在三一办公上搜索。

1、第 九 章 网 页 制 作,2022/12/19,1,计算机文化基础,第九章 网页制作,9.1 HTML简介 9.2 FrontPage概述 9.3网页制作 9.4网页布局 9.5创建表单页面 9.6网页的发布,2022/12/19,2,计算机文化基础,9.1 HTML简介,9.1.1 HTML语言概述9.1.2 HTML语言的基本语法,返 回,2022/12/19,3,计算机文化基础,9.1.1 HTML语言概述,HTML即HyperText Markup Language(超文本标记语言) 的缩写。它使用一些约定的标记（Tag）对文本进行标注，定义网页的数据格式，描述Web页中的信息，控制

2、文本的显示。 我们把用HTML语言编写的文件称为HTML文件（网页）。它通常被存储在Web服务器上，客户端通过浏览器向Web服务器发出请求，服务器响应请求并将HTML文件发送给浏览器，然后由浏览器对文件中的标记作出相应的解释，以页面的形式呈现在用户屏幕上。因此，我们又把HTML文档在Web浏览器中的这种表现形式称为Web页面 (Web Page)。 HTML语言是一种标记语言，简单易学。用HTML语言编写的网页实际上是一种文本文件，它以.htm或.html为扩展名，我们可以使用任何文本处理软件（例如：记事本）编写。,2022/12/19,4,计算机文化基础,HTML语言概述,HTML语言是由世

3、界性的标准化组织W3C（World Wide Web Consortium）制定的。通过浏览http:/www.w3.org可以了解到HTML标准的最新动态。下面介绍HTML文件的基本构成和HTML文件的层次结构。 1. HTML文件的基本构成 Internet中的每一个HTML文件都包括文本内容和HTML标记两部分。其中，HTML标记负责控制文本显示的外观和版式，并为浏览器指定各种链接的图像、声音和其他对象的位置。多数HTML标记的书写格式如下：文本内容 标记名写在“”内。多数HTML标记同时具有起始和结束标记，并且成对出现，但也有些HTML标记没有结束标记。另外，HTML标记不区分大小写。

4、,2022/12/19,5,计算机文化基础,HTML语言概述,某些HTML标记还具有一些属性。这些属性指定对象的特性，如背景颜色、文本字体大小、对齐方式等。属性一般放在“开始标记”中，格式如下： 文本内容 其中标记名和属性之间用空格分隔。如果标记有多种属性，属性之间也要用空格分开。,2022/12/19,6,计算机文化基础,HTML语言概述,2. HTML网页的结构 现在我们先看一个简单的HTML文件，从中体会用HTML语言编写网页时的层次结构。【例9-1】用HTML语言编写一个简单的网页。我的第一个Web页欢迎进入HTML世界！这里我们首先介绍HTML语言的基本知识和语法。然后，讲授如何使用

5、HTML语言编写您的Web页面。,2022/12/19,7,计算机文化基础,HTML语言概述,将上述代码用文本编辑器编辑并保存为一个扩展名为.htm的文件，双击该文件图标，在浏览器中看到如下图所示的结果。,图9-1,2022/12/19,8,计算机文化基础,HTML语言概述,从上例可以看出，一般HTML文件都是以开头，以结束。其文件结构由以下两部分组成：1）头部（Head） HTML文件的头部由和标记定义。通常情况下，文件的标题、语言字符集信息等都放在头部信息中。最常用到的标记是，它用于定义网页文件的标题，当该网页文件被打开后，网页文件的标题将出现在浏览器的标题栏中。,2022/12/19,9

6、,计算机文化基础,HTML语言概述,2）正文主体（Body） 正文主体是HTML文件的核心内容，由和标记定义。标记具有一些常用的属性，格式如下：其中，bgcolor为背景颜色，color为文本颜色。n为六位十六进制数。如果网页使用背景图像，格式为：HTML对格式的要求并不严格，当HTML文件被浏览器扫描时，所有包含在文件中的空格、回车等均被忽略了。因此你可以将一行写成两行或多行，在浏览器中结果是相同的。,返 回,2022/12/19,10,计算机文化基础,9.1.2 HTML语言的基本语法,1. 文本布局 1）段落标记标记指定文档中一个独立的段落。通过设置align属性，控制段落的对齐方式，其

7、值可以是left、center、right，分别表示左对齐、居中和右对齐，默认值为左对齐。使用格式如下： 标记定义的两个段落之间留有一个空行。2）换行标记 标记可以强制文本换行。该标记只有开始标记。3）水平线标记水平线标记用于在网页中插入一条水平线。,2022/12/19,11,计算机文化基础,HTML语言的基本语法,2. 文字格式HTML语言中用于文字格式化的标记有：1）标题标记 格式为： 标题文字内容 其中n说明大小级别，取值范围为1到6的数字。把标题分为 6级，即h1h6，其中h1文字最大，h6文字最小。2）字体标记字体标记用来对文字格式进行设置，主要具有以下属性：（1）size属性用来

8、控制文字的大小，其格式为：其中n的取值范围为17的数字，默认值为3。标记和标记都可以控制文字的大小。一般情况下，文章的标题最好由标记控制，而其余的文字由标记控制。相比较而言，对字体的控制更加灵活。,2022/12/19,12,计算机文化基础,HTML语言的基本语法,（2）color属性用来控制文字的颜色，其格式为： 其中n是一个十六进制的六位数。（3）face属性用来指明文字使用的字体，其格式为： 其中，字体名的选择由Windows操作系统安装的字体决定。如：宋体、楷体_GB2312、Times New Roman、Arial等。3）字形标记 字形标记用于设置文字的粗体、斜体、上标、下标、下划

9、线等，如下表所示。,2022/12/19,13,计算机文化基础,HTML语言的基本语法,3. 插入图片 标记将图片插入网页中。可以设置图片的大小以及相邻文字的排列方式。该标记具有以下属性：（1）src属性：指明图片文件所在的位置。格式为： 其中URL是指图片文件存放的位置。（2）alt属性：图片的文字说明，当鼠标指针指向图片时，该图片的说明性文字弹出。格式为： （3）height和width属性：设置图片显示区域的高度和宽度。格式为： 其中height和width属性的取值n1和n2为像素数，像素数越大，图片显示越大。（4）border属性：设置图片文件的边框。格式为： 其中n为像素数。,20

10、22/12/19,14,计算机文化基础,HTML语言的基本语法,（5）align属性：设置图片相对于文本的位置关系。格式为： 对齐方式可以是：top（顶边对齐）、middle（垂直居中）、bottom（底边对齐）、left（左对齐）、right（右对齐）。4. 超链接 在HTML语言中，和标记用于设置网页中的超链接href属性指明被超链接的文件地址。格式为： 超链接文本 用于表示超链接的文本一般显示为蓝色并且加下划线。在浏览器中，当鼠标指针指向该文本时，箭头变为手形，并在浏览器的状态栏中显示该超链接的地址。 若使用图片做超链接，可使用如下格式完成： ,2022/12/19,15,计算机文化基础

11、,HTML语言的基本语法,5. 使用表格 在网页中插入一个表格，需要用到一组HTML标记。定义表格的有关标记如下： 定义表格。 定义表行。 定义表列。 常用的标记属性中，border属性用于设置表格边框的宽度；width、height属性设定表格或表项的宽度、高度，取值可以是像素数或百分数；cellspacing和cellpadding属性分别用于设置单元格之间的间隙和单元格内部空白；align属性设置表格或表项的对齐方式；bgcolor和background属性设置表格背景的颜色和背景图像。,返 回,2022/12/19,16,计算机文化基础,9.2 FrontPage 2000概述,虽然使

12、用一般的文本编辑器就可以编写HTML文档，但是使用专门的HTML编辑器或Web创作工具往往更加方便。具有“所见即所得”功能的Web页面创作工具可以使Web创作人员直接面对Web页面进行编辑修改，并且能立即看到Web页面的显示效果。 FrontPage是微软公司开发的网页制作和网站管理工具。FrontPage 2000是Microsoft Office 2000的组件之一，与Office的其他组件高度融合。它界面友好，功能强大，易学易用，是目前使用较为广泛的网页制作、网站管理工具之一。,2022/12/19,17,计算机文化基础,9.2 FrontPage 2000概述,9.2.1 FrontP

13、age 2000的主要功能9.2.2 FrontPage 2000的启动与退出9.2.3 网页与网站9.2.4 FrontPage 2000的编辑方式9.2.5 FrontPage 2000中的视图,返 回,2022/12/19,18,计算机文化基础,9.2.1 FrontPage 2000的主要功能,FrontPage 2000的主要功能是制作网页和管理网站。 使用FrontPage 2000可以创建新的网页，也可以打开并修改已经存在的网页。FrontPage 2000提供了多种编辑网页的方式，不但可以直接修改HTML，而且可以采用“所见即所得”的方式编辑网页，还可以使用菜单命令插入各种网页

14、元素，使用对话框修改其属性，十分灵活。 在FrontPage 2000中，可以很容易地插入文本、图片、表格、组件等元素；可以使用主题，共享边框，框架等管理网页的外观；还可以使用表单等元素设计出交互式网页。 FrontPage 2000提供了强大的站点管理功能。一组相关网页和有关文件组成一个站点，站点也是FrontPage 2000对网站进行管理的基本单位。在FrontPage 2000中可以轻松实现设计、管理、分析、发布和维护站点等工作。,返 回,2022/12/19,19,计算机文化基础,9.2.2 FrontPage 2000的启动与退出,1. FrontPage 2000的启动 Fron

15、tPage 2000可以按下列步骤启动：（1）单击“开始”按钮，在“开始”菜单中单击“程序”；（2）在“程序”菜单中单击Microsoft FrontPage，即可打开Microsoft FrontPage 2000窗口，如图9-2所示。 图9-2 Microsoft FrontPage 2000窗口 另外，也可以在桌面上建立FrontPage 2000快捷方式，后在桌面上双击该图标，即可启动FrontPage 2000。,2022/12/19,20,计算机文化基础,FrontPage 2000的启动与退出,2. FrontPage 2000的退出 FrontPage 2000的退出有以下三种

16、方式：（1）选取“文件”菜单中的“退出”。（2）单击操作窗口中右上角的“关闭”按钮。（3）按快捷键Alt+F4。,返 回,2022/12/19,21,计算机文化基础,9.2.3 网页与网站,网页是WWW上的基本文档，用HTML书写，通常以.htm或.html为扩展名。网页可以独立存在，但常常作为网站的一部分。网站是一组相关网页和有关文件的组合。网站一般有一个特殊的网页作为浏览的起始点，称为主页（Homepage），用来引导用户访问其他网页。 网站通常位于Web服务器上。客户机通过网络向Web服务器发送请求，Web服务器响应客户机的请求，并使用HTTP协议将网页和有关文件通过网络传送回客户机。客

17、户机端使用网页浏览器就能看到网页的内容了。在FrontPage 2000中，可以建立和编辑独立的网页，也可以设计和管理站点。在站点中可以包含大量网页和各种文件，甚至可以包含子站点，而且只有在使用站点时，FrontPage 2000的许多特性才有效。例如：在单个网页的环境中，导航栏变得毫无意义。,2022/12/19,22,计算机文化基础,网页与网站,通常，在FrontPage 2000中建立的站点需要发布到Internet中的Web服务器上，成为真正意义上的网站，Internet上的用户才能访问。有时，可以在同一台计算机上安装Web服务器端软件（如IIS等），从而可以将站点发布到本机进行测试。

18、用FrontPage 2000也可以建立基于本地硬盘的站点，这种站点以本机文件夹的形式存在，不需要发布到服务器，这时，所有需要服务器支持的功能都是不可用的。,返 回,2022/12/19,23,计算机文化基础,9.2.4 FrontPage 2000的编辑方式,FrontPage 2000的网页视图下有三种编辑方式：普通、HTML、预览。 该视图窗口底部有三个标签：“普通”、“HTML”和“预览”。它们分别控制网页以普通方式、HTML方式进行编辑或是预览网页的效果，默认是普通方式。 如果切换到HTML方式，用户就可以看到FrontPage 2000自动生成的HTML代码。在HTML方式下，可以

19、直接键入HTML代码。 预览方式实际上是用Internet Explorer来显示网页。,返 回,2022/12/19,24,计算机文化基础,9.2.5 FrontPage 2000中的视图,FrontPage 2000提供了6种视图以方便用户对站点的管理，可以在不同的视图中进行不同的操作。1. 网页视图网页视图是FrontPage 2000中最常用的工作界面。网页的创建、编辑、预览等基本操作都是在此视图中进行的。2. 文件夹视图在文件夹视图中，站点显示为一组文件和文件夹。可以在文件夹视图中创建、移动和删除文件或文件夹。3. 报表视图使用报表视图可以方便地了解当前站点的文件内容、更新链接情况、

20、组件错误、所有文件列表及变化情况等信息。可在“报表”工具栏中的“报表”下拉列表中选择所需显示的报表。4. 超链接视图超链接视图将当前站点显示为链接文件的一个网络，它们表示了站点中各个网页之间的相互链接关系。超链接视图就像一张地图，表明站点中的超链接路径。,2022/12/19,25,计算机文化基础,FrontPage 2000中的视图,5. 任务视图 任务视图主要用来创建和管理任务。在视图中列出了当前站点的“任务”，即当前站点中尚未完成的项目。6. 导航视图 使用导航视图可方便地观察站点的链接结构，它以层次状的组织结构图形式显示（见图9-3）。在该视图下，可以通过拖曳操作改变链接结构。,图9-

21、3 导航视图,返 回,2022/12/19,26,计算机文化基础,9.3 网 页 制 作,Web站点的开发，首先应当根据其用途规划站点，确定站点的结构，并在本地磁盘上创建站点，然后再建立网页。那么什么是“站点”呢？其实站点就是一组相关网页和其他文件的集合。这些网页在Internet中表现为一个完整结构就称为“站点”。在FrontPage 2000中，站点以一个特殊文件夹的形式存储。,2022/12/19,27,计算机文化基础,9.3 网 页 制 作,9.3.1 创建站点9.3.2 网页编辑9.3.3 插入对象9.3.4 创建超链接,返 回,2022/12/19,28,计算机文化基础,9.3.1

22、 创建站点,使用FrontPage 2000的向导和模板，用户可以轻松地创建出各种用途和风格的站点。 新建站点时，可以根据自己的需求选择不同的模板和向导。对于不同的模板和向导，其新建站点的步骤略有不同。下面以“只有一个网页的站点”模板为例，介绍新建站点的方法。（1）在“文件”菜单的“新建”子菜单中选择“站点”，打开“新建”对话框；（2）在“新建”对话框的“指定新站点的位置”文本框中输入存储站点的文件夹；,2022/12/19,29,计算机文化基础,创建站点,3）双击“只有一个网页的站点”模板，新建站点如图9-4所示。该站点只有一个空白网页index.htm（主页）和用于存储图片的文件夹imag

23、es，你可以打开index.htm编辑该网页，也可以进一步根据网站规划创建文件夹和新建其他网页。 选择“文件”菜单的“退出”命令，可以关闭FrontPage 2000。要再次对该站点进行操作，在启动FrontPage 2000后使用“文件”菜单中的“打开站点”命令打开该站点。,返 回,2022/12/19,30,计算机文化基础,9.3.2 网页编辑,1. 新建网页2. 打开网页3. 设置文字格式4. 设置段落格式5. 设置网页属性6. 预览网页,返 回,2022/12/19,31,计算机文化基础,网页编辑,1. 新建网页 要创建一个新的网页，可按下面的步骤操作：（1）从“文件”菜单的“新建”子

24、菜单中选择“网页”命令，打开“新建”对话框。（2）在“常规”选项卡中选择所需的模板，可在“说明”及“预览”区域查看该模板的说明及预览图。如果要建一个空白网页，可选中“普通网页”模板。（3）单击“确定”按钮，系统新建一个基于所选模板的网页。此时，新建的网页显示在FrontPage 2000窗口中，可以对其进行编辑修改等操作。（4）单击“文件”菜单，选择“保存文件”命令，弹出“另存为”对话框。在“另存为”对话框中，单击“更改”按钮修改网页标题，如“新闻”。在“文件名”文本框中输入网页文件名，如news.htm。设置完成后单击“保存”按钮。（5）单击“视图”框中的“导航”图标，在“文件夹列表”中拖动

25、新建网页到站点的结构图，将其置入相应位置。此时，双击该页面图标可切换到网页视图。网页中若包含导航栏，则导航栏自动更新链接关系。,返 回,2022/12/19,32,计算机文化基础,网页编辑,2. 打开网页 在FrontPage 2000中，编辑某个网页必须首先打开该网页。打开网页的方法有多种，最常用的操作步骤如下：（1）在FrontPage 2000窗口中，单击工具栏中的“文件夹列表”按钮；（2）在文件夹列表窗口中找到要编辑的网页，然后双击网页图标即可打开网页。 实际上，在其他视图中双击网页图标，同样会打开指定网页。,返 回,2022/12/19,33,计算机文化基础,网页编辑,3. 设置文字

26、格式 同其他Microsoft Office组件一样，网页中可以输入文字，复制、剪切和粘贴文字，设置文字格式，查找和替换文字等。 在FrontPage 2000中，对文字的格式提供了相当完整的设定功能，文字格式的变化也因此多种多样。我们可以使用工具栏上的工具按钮或者菜单命令，快速地改变文字的外观。 文字格式包括字体、字形、大小、颜色和修饰效果等属性。 设置文字格式的操作步骤是：选中文字，单击“格式”菜单，选择“字体”命令，打开“字体”对话框，在对话框中设置字体的各种属性。 虽然可以设置各种美观的字体，但是由于浏览者只能使用本地计算机中安装的字体显示网页，因此还是使用常见的字体为好。,返 回,2

27、022/12/19,34,计算机文化基础,网页编辑,4. 设置段落格式 文字段落的格式编排对于一个网页的外观是至关重要的。FrontPage 2000通过按Enter键划分段落。值得注意的是，段落之间插入了一个空行。如果只是需要换行，而不是另起一个段落，按Shift+Enter键即可。实际上，按Enter键在HTML代码中插入的是标记，而按Shift+Enter键则插入的是标记。 段落格式主要包括对齐方式、文本缩进和段落间距等。设置段落格式的方法如下：（1）将插入点移动到要设置格式的段落中；（2）单击“格式”菜单，选择“段落”命令；（3）在“段落”对话框中可以设置段落的各种属性。,返 回,20

28、22/12/19,35,计算机文化基础,网页编辑,5. 设置网页属性 网页的属性包括网页的标题、位置、背景、页边距等。要设置网页属性，用户可以使用“文件”菜单里的“属性”命令，或者在网页的任意地方单击鼠标右键，在弹出的菜单中选择“属性”命令，FrontPage 2000将显示“网页属性”对话框。,2022/12/19,36,计算机文化基础,网页编辑,1）“常规”属性 要设置网页的“常规”属性，单击“网页属性”对话框的“常规”选项卡，如图9-5所示。“标题”框用于给出网页的标题，网页标题将显示在浏览器的标题栏中。“背景音乐”框用于指定网页的背景声音，当Web浏览器打开网页时，将自动播放背景声音。

29、其中，“位置”框用于指定声音文件的位置，用户可以单击“浏览”按钮，在当前打开的网站或本地磁盘中定位一个声音文件。“循环次数”框用于指定声音要反复播放的次数，如果选中“不限次数”复选框，表示一直不停地播放。,图9-5 “常规”选项卡,2022/12/19,37,计算机文化基础,网页编辑,2）“背景”属性 要设置网页的背景颜色、背景图片以及超链接的颜色，单击“网页属性”对话框的“背景”选项卡，如图9-6所示。 用户可以选中“背景图片”复选框，并指定一个图片作为网页的背景图片，也可以单击“浏览”按钮，在当前打开的网站或本地磁盘中定位一个图片文件。 通过单击相应的下拉列表框，设置网页的背景颜色、文本颜

30、色以及超链接文字的颜色。当同时设置背景图片和背景颜色时，图片将覆盖背景色。 FrontPage 2000允许用户使用其他网页中设置的“背景”属性，包括背景图片、背景颜色、文本前景颜色以及超链接的颜色。此时只要选择“从另一网页获得背景信息”并定位一个网页的URL即可。,图9-6 “背景”选项卡,2022/12/19,38,计算机文化基础,网页编辑,3）“边距”属性 在“边距”选项卡中可以设置页面的顶端页边距和左端页边距。如果要设置顶端页边距，选中“指定上边距”复选框，并指定上边距的像素数。,返 回,2022/12/19,39,计算机文化基础,网页编辑,6. 预览网页 网页制作过程中，用户可以随时

31、对网页进行预览。可以转换到预览视图方式，还可以使用“文件”菜单上的“在浏览器中预览”命令，使用外部浏览器打开当前网页进行预览。,返 回,2022/12/19,40,计算机文化基础,9.3.3 插入对象,1.插入水平线2.插入图片3.插入字幕4.插入悬停按钮 5.插入动态HTML效果,返 回,2022/12/19,41,计算机文化基础,插入水平线,1. 插入水平线 在网页中输入文本内容之后，还可在不同的段落、行之间添加水平线，以增强视觉效果。操作步骤如下：（1）在准备插入水平线的位置设置插入点。（2）打开“插入”菜单，选择“水平线”命令，此时在网页的插入点处插入一条水平线。如果插入点位于或接近行

32、尾，水平线将插入到下一行。,2022/12/19,42,计算机文化基础,插入水平线,打开“水平线属性”对话框，如图9-7所示，在“宽度”栏中可设置水平线的宽度，在“高度”栏中输入水平线的高度，在“对齐方式”栏中选择水平线在网页内水平对齐的方式，在“颜色”列表框内设置水平线的颜色，系统默认的颜色是黑色，选择“实线（无阴影）”复选框时，水平线将被设置成实心线，并且在水平线的边缘上没有阴影。,图9-7 “水平线属性”对话框,返 回,2022/12/19,43,计算机文化基础,插入图片,2. 插入图片 图片可以使网页变得生动活泼，并能吸引访问者的注意。 1）图片文件的格式 在WWW上常用的图像文件格式

33、是JPEG和GIF，它们都是压缩的图像格式，文件的信息量小，适合于网络传输，现已几乎被所有的Web浏览器所支持，因此被广泛地应用在Web站点的设计中。 图形交换格式GIF（Graphical Interchange Format）采用无损压缩方式，其主要特征是支持动画、透明度、图形渐进，但GIF格式只支持256种颜色。 联合图像专家组JPEG（Joint Photograph Expert Group）格式是专为有几百万种颜色的照片和图形设计的，它采用有损压缩方式，以牺牲图片质量换取大的压缩比例。但JPEG格式支持真彩色（24位色），并且在压缩大的图像方面已被证明很有效。,2022/12/19

34、,44,计算机文化基础,插入图片,2）插入图片的步骤（1）移动光标至想要插入图像处；（2）单击菜单项中的“插入”，选择“图片”项，再选取二 级菜单中的“来自文件”，弹出图片对话框；（3）如果图片在该站点中，选中图片文件并按“确定”按钮即可，否则单击“从计算机上选择一个文件”按钮或单击“使用Web浏览器来选择网页或文件”按钮，从计算机本地硬盘中或者Internet上选中图片并按“确定”按钮，即可将其插入网页中。3）设置图片属性 打开“图片属性”对话框，在“外观”选项卡中，可以调整图片的大小。为了防止改变图片原来的长宽比例，可以选中“保持纵横比”复选框，这样图片就会根据原来的长宽比例来调整大小。同

35、样在“外观”选项卡中，可以选择“对齐方式”，设置图片边框的宽度，0为无边框。,2022/12/19,45,计算机文化基础,插入图片,4）编辑图片 选中插入的图片，单击“查看”菜单中的“工具栏”，选择“图片”命令，打开图片编辑工具栏，可以对图片的亮度、对比度进行调整，可以旋转、翻转图片，对图片进行剪裁，设置透明的颜色等操作，如图9-8所示。,图9-8 图片编辑工具栏,返 回,2022/12/19,46,计算机文化基础,插入字幕,3. 插入字幕 在制作网页时，可以将网页中的文字做成由左至右，或由右至左移动的动态效果。在网页中加入移动字幕，会使网页看起来更活泼。具体操作步骤如下：（1）将插入点设置在

36、要插入移动字幕的位置或者选择作为移动字幕的文本。（2）单击“插入”菜单中的“组件”，选择“字幕”命令，出现“字幕属性”对话框。,2022/12/19,47,计算机文化基础,插入字幕,（3）如果已经选择了作为移动字幕的文本，此文本就会出现在“文本”框中（见图9-9）。如果没有选择文本，可在“文本”框中输入作为移动字幕的文本。,图9-9 “字幕属性”对话框,2022/12/19,48,计算机文化基础,插入字幕,（4）在“方向”区域中选择文字的移动方向。在“速度”区域中可以指定文字的移动速度，在“延迟”框中输入的数值表示在每个连续运动之间暂停的毫秒数，“数量”框中输入的数值表示文本每次移动的距离。在

37、“表现方式”区域中可以指定文字的运动方式，选中“重复”区域的“连续”复选框，则移动字幕连续不停循环；若要设置文本重复有限的次数，则取消选中并输入字幕重复的次数。在“背景颜色”列表框中可以设置移动字幕的背景颜色。（5）单击“确定”按钮。,返 回,2022/12/19,49,计算机文化基础,插入悬停按钮,4. 插入悬停按钮 悬停按钮是一种动感按钮，当访问者将鼠标指向该按钮时，按钮就会改变颜色或形状。插入悬停按钮的具体操作步骤如下：（1）将插入点设置在要插入悬停按钮的位置。（2）单击“插入”菜单中的“组件”，选择“悬停按钮”命令，弹出“悬停按钮属性”对话框（见图9-10）。,图9-10 “悬停按钮属

38、性”对话框,2022/12/19,50,计算机文化基础,插入悬停按钮,（3）在“按钮文本”框中输入按钮上的文本。可单击“字体”按钮，设置文本的字体、字形、大小和文本颜色等属性。“背景颜色”选项是指按钮的背景颜色，此选项一般不起作用。在“效果”列表框中选择当鼠标移到按钮上时出现的视觉效果，包括“填充颜色”、“颜色对比”、“发光”、“反色发光”、“微微发光”、“凸出”和“凹进”效果。可以在“效果颜色”列表框中指定当实现某一种效果时出现的颜色。,2022/12/19,51,计算机文化基础,插入悬停按钮,（4）可以通过单击“自定义”按钮，在弹出的“自定义”对话框中进一步设置按钮的属性，如图9-11所示

39、。 （5）设置完成，按“确定”按钮。 此时，设置的图片悬停按钮出现在插入点位置。,图9-11 自定义悬停按钮,返 回,2022/12/19,52,计算机文化基础,插入动态HTML效果,5. 插入动态HTML效果 动态HTML效果是FrontPage 2000新增的功能。可以将动态HTML效果应用到网页的任何相关组件，如文本、段落、图片、按钮以及字幕等，并将这些动态效果链接到鼠标单击、双击、悬停或者加载网页等事件上。 首先选中网页中打算采用动态HTML的元素，比如文字或者图像。然后选择“格式”菜单中的“动态HTML效果”，弹出“DHTML效果”工具栏（见图9-12）。,图9-12 DHTML效果

40、工具栏,2022/12/19,53,计算机文化基础,插入动态HTML效果,该工具栏上共有三个下拉菜单，需要选择“开启”菜单中的触发事件，才能选择后面的应用效果，然后才能选择第三个下拉菜单的效果属性设置。“开启”菜单中的事件列表依据所选择的网页元素类型而变化。 例如将鼠标指向某个段落时，该段落自动加上边框，操作步骤如下：（1）用鼠标选中该段落，选择“格式”菜单中的“动态HTML效果”，弹出“DHTML效果”工具栏；（2）选择“鼠标悬停”触发事件，在“应用”中只有“格式”可以选择，然后在“效果”下拉菜单中选择“选择边框”，FrontPage 2000会弹出“边框与阴影”对话框；,2022/12/1

41、9,54,计算机文化基础,插入动态HTML效果,（3）在“边框与阴影”对话框的“样式”一栏中选择“双线”，单击“确定”按钮。 这样就给文字加上了动态HTML效果。在编辑状态时，可以看出，这行文字被蓝色突出显示了。可以转到“预览”模式查看效果，当鼠标移动到文字“动态HTML效果”时，自动出现边框（见图9-13）。 图9-13 DHTML效果,返 回,2022/12/19,55,计算机文化基础,9.3.4 创建超链接,Web网页的强大之处就在于其超链接，使用超链接能够将Internet中的信息有机地组织起来，使人们在丰富多彩的WWW世界轻松地漫游。在浏览器中，超链接通常表现为与普通文本或图片不同的

42、特点。将鼠标移到一个超链接上方时，鼠标指针会变成手形。同时，与这个超链接相对应的URL会在窗口底部的状态栏显示出来。,2022/12/19,56,计算机文化基础,创建超链接,1.创建超链接2. 使用书签3. 为图形添加热点4. 使用导航栏,返 回,2022/12/19,57,计算机文化基础,创建超链接,1. 创建超链接 在Web网页中超链接一般有两种表现方式，即以文本方式标注的超链接和以图片方式标注的超链接。对于文本或图片，利用FrontPage 2000都可以创建指向当前网站的另一个网页或WWW中另一个站点的某个网页的文本超链接，以及指向E-mail地址的超链接等。1）链接到页面创建超链接的

43、步骤如下：（1）选定要定义超链接的文本或图片；,2022/12/19,58,计算机文化基础,创建超链接,（2）单击“常用”工具栏上的“超链接”按钮，或者从“插入”菜单中选择“超链接”命令，打开“创建超链接”对话框，如图9-14所示；（3）在“创建超链接”对话框中可见，网站中的所有网页出现在文件列表中，选择链接的目标网页；,图9-14 “创建超链接”对话框,2022/12/19,59,计算机文化基础,创建超链接,（4）单击“确定”按钮，超链接创建完成。 单击窗口底部的“预览”标签，切换至预览模式。将鼠标移至链接文字或图片上时，光标会变成手形，此时单击鼠标就跳转到目标网页中。 在“创建超链接”对话

44、框中，单击“创建一网页并链接到该网页”按钮，出现“新建”对话框，新建一个网页，即可链接到一个新创建的页面。,2022/12/19,60,计算机文化基础,创建超链接,在“创建超链接”对话框中，单击“制作一个指向您计算机上文件的超链接”按钮，出现“选择文件”对话框（见图9-15），选择要链接的文件，单击“确定”按钮，即可创建链接到计算机中某文件的超链接。 在“创建超链接”对话框中，单击“使用Web浏览器来选择网页或文件”按钮，系统自动打开Web浏览器。在“地址”栏中输入一个站点的地址，打开某个网页。切换到FrontPage窗口中，这个地址就会出现在“创建超链接”对话框中的“URL”栏中。单击“确定

45、”按钮，完成WWW上其他站点超链接的创建。,图9-15 选择超链接文件,2022/12/19,61,计算机文化基础,创建超链接,2）创建发送电子邮件的超链接 可以创建与电子邮件的超链接，以便反馈信息。具体创建步骤如下：（1）在“创建超链接”对话框中单击“制作发送电子邮件的超链接”按钮，出现“创建电子邮件超链接”对话框；（2）输入一个电子邮件地址（见图9-16），单击“确定”按钮返回到“创建超链接”对话框，在“URL”栏中显示了该电子邮件地址； 图9-16 创建与电子邮件的超链接（3）单击“确定”按钮，完成超链接的创建。 单击窗口底部的“预览”标签，切换至预览模式，单击此链接，就会打开系统默认的

46、收发电子邮件工具，如Outlook Express、FoxMail等。,返 回,2022/12/19,62,计算机文化基础,使用书签,2. 使用书签 对于网页的超链接，往往使浏览者跳转到目标网页的顶端。应用书签能够更严密地控制访问者到达网页内某个具体位置。当访问者单击基于书签的超链接时，将直接跳转到这个书签所在的位置。1）插入书签 在创建到书签的链接之前，必须要在网页中插入书签。具体步骤如下：（1）将光标定位在要插入书签的位置；（2）从“插入”菜单中选择“书签”命令，打开“书签”对话框；,2022/12/19,63,计算机文化基础,使用书签,(3）在“书签名称”框中键入书签名称（见图9-17）

47、；（4）单击“确定”按钮，出现书签标记2）创建到书签的超链接,步骤如下：（1）在“创建超链接”对话框中，选定已经插入书签的目标网页，在“可选”区域中单击“书签”下拉按钮，在列表中选择链接的书签名称（见图9-18）；（2）单击“确定”按钮，完成超链接的制作。 。,图9-17 插入书签,图9-18 创建到书签的超链接,返 回,2022/12/19,64,计算机文化基础,为图形添加热点,3. 为图形添加热点 在图形上创建热点，即把同一个图形作为多个超链接的载体。假如我们通过山东地图浏览山东各城市的民俗风情，当鼠标移动至地图上的各个城市时，光标变为手形，单击后打开描述该城市民俗风情的页面，这里就为图形

48、添加了热点。操作步骤如下：（1）在网页视图中，选择需要添加热点的图形。（2）在“图片”工具栏中，单击长方形、圆形或多边形热点按钮匹配需要的形状。（3）在图形上，依所选形状画上矩形、圆形或多边形。画多边形时，可单击多边形的第一个角，然后单击要放置多边形每个角的位置，最后双击完成。（4）松开鼠标按钮后，弹出“创建超链接”对话框，按照创建超链接中所讲方法创建超链接即可。 重复步骤（2）（4），在选定的图形上创建超链接到其他网页。,2022/12/19,65,计算机文化基础,为图形添加热点,也可以添加文本热点到图形中，文本热点是已经放在图形上并分配了超链接的文本字符串。当站点访问者鼠标移动到热点位置时

49、，光标变为手形（见图9-19），单击鼠标以后，超链接的目标网页就会显示在Web浏览器窗口中。 图9-19 为图形添加热点 添加图形或文本热点后，用户可以方便地对热点进行编辑，如调整热点大小、编辑热点的URL、移动和删除热点等操作。,返 回,2022/12/19,66,计算机文化基础,导航栏,4. 使用导航栏 为了使浏览者能在站点中的各个网页之间切换浏览，可以在每一个网页中分别设定链接到各网页的超链接，但是这样做非常烦琐，为此，FrontPage 2000提供了“导航栏”功能。导航栏是一组超链接，用来浏览站点多个主要的网页。用户可以在站点的每个网页上设置一个导航栏，这样可以方便地转向其他主要网页

50、。 FrontPage 2000可以根据当前站点的导航结构自动设置导航栏。导航结构决定导航栏上有哪些超链接，而网页标题决定超链接的标签。要为某个站点设置导航结构，具体步骤如下：（1）在FrontPage 2000中打开需要设计导航结构的站点，切换到导航视图（图9-3）；（2）导航视图显示出当前站点的链接结构，用户可以进行多种操作，如通过拖曳操作改变链接结构，重新设置导航结构中某个网页的标题等。,2022/12/19,67,计算机文化基础,导航栏,设置好导航结构后，就可以插入导航栏了，具体步骤如下：（1）将光标设置在要插入导航栏的位置；（2）从“插入”菜单中选择“导航栏”命令，打开“导航栏属性”