计算机ppt课件第9章.ppt

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

1、第 九 章 网 页 制 作,2022/12/3,1,计算机文化基础,第九章 网页制作,9.1 HTML简介 9.2 FrontPage概述 9.3网页制作 9.4网页布局 9.5创建表单页面 9.6网页的发布,2022/12/3,2,计算机文化基础,9.1 HTML简介,9.1.1 HTML语言概述9.1.2 HTML语言的基本语法,返 回,2022/12/3,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/3,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标记不区分大小写。,202

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

32、打开“水平线属性”对话框，如图9-7所示，在“宽度”栏中可设置水平线的宽度，在“高度”栏中输入水平线的高度，在“对齐方式”栏中选择水平线在网页内水平对齐的方式，在“颜色”列表框内设置水平线的颜色，系统默认的颜色是黑色，选择“实线（无阴影）”复选框时，水平线将被设置成实心线，并且在水平线的边缘上没有阴影。,图9-7 “水平线属性”对话框,返 回,2022/12/3,43,计算机文化基础,插入图片,2. 插入图片 图片可以使网页变得生动活泼，并能吸引访问者的注意。 1）图片文件的格式 在WWW上常用的图像文件格式是JPEG和GIF，它们都是压缩的图像格式，文件的信息量小，适合于网络传输，现已几乎被

33、所有的Web浏览器所支持，因此被广泛地应用在Web站点的设计中。 图形交换格式GIF（Graphical Interchange Format）采用无损压缩方式，其主要特征是支持动画、透明度、图形渐进，但GIF格式只支持256种颜色。 联合图像专家组JPEG（Joint Photograph Expert Group）格式是专为有几百万种颜色的照片和图形设计的，它采用有损压缩方式，以牺牲图片质量换取大的压缩比例。但JPEG格式支持真彩色（24位色），并且在压缩大的图像方面已被证明很有效。,2022/12/3,44,计算机文化基础,插入图片,2）插入图片的步骤（1）移动光标至想要插入图像处；（2

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

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

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

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

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

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

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

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

42、出来。,2022/12/3,56,计算机文化基础,创建超链接,1.创建超链接2. 使用书签3. 为图形添加热点4. 使用导航栏,返 回,2022/12/3,57,计算机文化基础,创建超链接,1. 创建超链接 在Web网页中超链接一般有两种表现方式，即以文本方式标注的超链接和以图片方式标注的超链接。对于文本或图片，利用FrontPage 2000都可以创建指向当前网站的另一个网页或WWW中另一个站点的某个网页的文本超链接，以及指向E-mail地址的超链接等。1）链接到页面创建超链接的步骤如下：（1）选定要定义超链接的文本或图片；,2022/12/3,58,计算机文化基础,创建超链接,（2）单击“

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

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

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

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

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

48、匹配需要的形状。（3）在图形上，依所选形状画上矩形、圆形或多边形。画多边形时，可单击多边形的第一个角，然后单击要放置多边形每个角的位置，最后双击完成。（4）松开鼠标按钮后，弹出“创建超链接”对话框，按照创建超链接中所讲方法创建超链接即可。 重复步骤（2）（4），在选定的图形上创建超链接到其他网页。,2022/12/3,65,计算机文化基础,为图形添加热点,也可以添加文本热点到图形中，文本热点是已经放在图形上并分配了超链接的文本字符串。当站点访问者鼠标移动到热点位置时，光标变为手形（见图9-19），单击鼠标以后，超链接的目标网页就会显示在Web浏览器窗口中。 图9-19 为图形添加热点 添加图形

49、或文本热点后，用户可以方便地对热点进行编辑，如调整热点大小、编辑热点的URL、移动和删除热点等操作。,返 回,2022/12/3,66,计算机文化基础,导航栏,4. 使用导航栏 为了使浏览者能在站点中的各个网页之间切换浏览，可以在每一个网页中分别设定链接到各网页的超链接，但是这样做非常烦琐，为此，FrontPage 2000提供了“导航栏”功能。导航栏是一组超链接，用来浏览站点多个主要的网页。用户可以在站点的每个网页上设置一个导航栏，这样可以方便地转向其他主要网页。 FrontPage 2000可以根据当前站点的导航结构自动设置导航栏。导航结构决定导航栏上有哪些超链接，而网页标题决定超链接的标

50、签。要为某个站点设置导航结构，具体步骤如下：（1）在FrontPage 2000中打开需要设计导航结构的站点，切换到导航视图（图9-3）；（2）导航视图显示出当前站点的链接结构，用户可以进行多种操作，如通过拖曳操作改变链接结构，重新设置导航结构中某个网页的标题等。,2022/12/3,67,计算机文化基础,导航栏,设置好导航结构后，就可以插入导航栏了，具体步骤如下：（1）将光标设置在要插入导航栏的位置；（2）从“插入”菜单中选择“导航栏”命令，打开“导航栏属性”对话框；（3）在“要添加到网页的超链接”区域中设定所需的超链接选项（图9-20），当选择了一个选项时，相应的超链接就以蓝色出现在结构示