第十四讲 网页的动态效果

经常上网的朋友一定有过这样的体验，当打开某个网页时一张图片会慢慢移入，或者鼠标停到某个图片上它会变成另一幅图片，这就是DHTML，人见人爱的动态网页。
　　动态网页可让访问者和网页产生互动，使网页元素（文字、图像等）显示简单的动画效果。
　　FrontPage2000就提供了制作动态网页的方法。实现动态效果有三种方法：DHTML工具、组件和插入HTML语句，前二种方法操作都比较容易和直观，你完全可以轻松地建立属于自己的动态网页。
　　在因特网上还有一种所谓动态网站。这种网站在服务器上有一个数据库（即所谓ASP空间），采用ASP或PHP等网络语言编程，维护比较简单，有权限的访问者都可以给网站增加内容。大型网站和论坛一般都是动态网站。
一、使用DHTML工具在网页中实现动态效果
　　1、“DHTML效果”工具栏
　　右击FrontPage窗口工具栏上任意位置，在出现的快捷菜单中选择“DHTML效果”，会在窗口中显示下图所示的“DHTML效果”工具栏。使用这个工具栏，用户可以根据自己的意愿，通过设置实现单击、双击、悬停鼠标时的多种效果，当鼠标移动到一段文字上时，文字发生变化，提醒浏览者注意。使文字和图片实现动态效果。

　　工具栏上各按钮和列表框的说明：
　　1）“开启”下拉列表框中，选定触发动态效果的事件。即浏览者的什么操作可产生动态效果？这里有四种事件可供选择：
　　●单击：当一个站点访问者指到网页元素和按左鼠标按钮时开始动画。
　　●双击：当一个站点访问者指到网页元素和双击鼠标按钮时开始动画。
　　●鼠标悬停：当一个站点访问者指到和散布在网页元素上时开始动画。
　　●网页加载：当网页被加载在站点访问者的浏览器时开始动画。也就是当网页第一次装入的时侯发生的事件，它不需要用户利用鼠标去触发它，而只需要访问者利用浏览器打开它的时侯就会产生预设的动态效果　　2）“应用”下拉列表框中，选定动态效果的类型。不同的触发事件，能产生的动态效果不同。例如，“网页加载”可选择八类动态效果；而“鼠标悬停”只有“格式”一种效果可选。
　　3）“选择设置”下拉列表框，用于选定具体的动态效果。例如，飞入动态效果有从右侧、从底等。
　　4）“删除效果”按钮，单击后，删除动态效果。
　　5）“突出显示动态HTML效果”按钮，按下时，设置了动态效果的网页元素将突出显示。例如，出现淡蓝背景色。
　　2、使用DHTML的基本步骤：
　　●首先在网页视图模式下要将使用DHTML的对象（比如文本、图片）选定；
　　●然后在DHTML工具栏的“开启”的下拉列表中选择一种事件（文本和图片所具有的事件是不同的）；　　●接下来在“应用”下拉列表选择一种效果类型；
　　●最后在“选择设置”下拉列表对该效果的实现进行设置。
　　【注意】只有前一个下拉列表选择好后，下一个下拉列表框才有效（由虚变实）。
　　下面分别对文本和图片的动态效果设置方法作进一步说明：
　　1）文本的动态效果
　　设置文字的动态HTML效果时，是以段落为单位的。
　　选中一段或几段文字（若只设一段，只需将光标定在一段的任意位置即可），再单击“DHTML效果”工具条中“开启”框右边的下拉按钮，在下拉清单中单击“鼠标悬停”，这时右边的“应用”框由虚变实。然后，单击“应用”框右边的下拉按钮，在“应用”下拉列表选择一种效果。这里只有“格式”一种效果可选。这时右边的“选择设置”框由虚变实。单击“选择设置”框右边的下拉按钮，在下拉框中可单击“选择字体”或“选择边框”，就可打开 “字体”对话框或“边框与阴影”对话框。在对话框中，设置好需要的格式，单击“确定”按钮，就可完成设置。这时设置过的文字段背景会变成下图所示的淡蓝色（“突出显示动态HTML效果”按钮已按下）。

　　在“预览”中，背景颜色恢复正常：

　　但当鼠标指针移动到设置过的文字段，文字会变成设置的效果（本例中将设为兰色、36磅的“华文彩云”字体）：

　　【注意】若原来文字的字体、字号、颜色不是默认（普通）值，则动态效果的新设置不起作用。如此例中“版主的话”就不能将DHTML效果的字体设为其它格式。
　　用同样的方法，如果将事件设置成“网页加载”等，还可以实现“弹起”、“飞入”等许多有趣的效果。大家可以自己试试看!
　　2）图片的动态效果
　　图片的DHTML效果同样可用“DHTML效果”工具条实现。对“鼠标悬停”事件，只有“交换图片”一种效果。我们在FrontPage窗口打开“老顽童网站”的主页，选中“计算机世界”印章图片。在“DHTML效果”对话框中，单击“开启”框右边的下拉按钮，在下拉框中单击“鼠标悬停”，这时右边的“应用”框由虚变实。在“应用”框中选择“交换图片”，然后单击“选择设置”框右边的，在下拉框中选择“选择图片…”，在“图片”对话框中，单击要加入的图片（是尺寸放大的“计算机世界”印章图片），再单击“确定”按钮，完成设置：

　　将主页保存后，单击“文件”、“在浏览器中预览”，将鼠标指针移动到“计算机世界”印章上时，印章将放大，图片的说明文字同时也出现，下面的左右二图分别显示了鼠标悬停前后的情景：

　　【注意】设置图片的DHTML效果时，前后二幅图片的尺寸必须相同（至少要差不多）。否则会使后一幅图片发生严重失真。虽然上例中的前一幅“计算机世界”印章图片中的印章尺寸比后一幅小，但在印章周围留了空，总的图片尺寸还是一样大。这在编辑窗口中“突出显示动态HTML效果”的淡蓝色背景可以看出来。
　　3、DHTML效果的复制、删除和禁用
　　您还可以通过使用“格式刷”从一个网页元素复制动态效果到其它的元素，选择已有动态效果的元素，单击“格式刷”, 然后将它在您想应用动态效果的网页元素上“刷”一下即可。
　　您甚至可以应用多重效果到大部分的网页元素。例如：您可以制作当网页被加载时让文本从右方飞入的动态效果，然后添加当站点访问者单击文本时框线围绕文本的动态效果。
　　如果想删除某一个对象的DHTML效果，先选定该对象，然后单击“DHTML效果”工具栏上的“删除效果”图标即可。您也可以通过选择网页元素和单击 CTRL＋空格键在网页视图模式中删除动画。
　　如果想禁用DHTML效果，点选“工具”菜单中的“网页选项”，在打开的对话框里选择“兼容性”标签，在“技术”栏中将“动态HTML”前的复选框里的勾取消，这样DHTM效果就被禁用了。
　　熟练和灵活的使用动态HTML将给您的主页增添无穷魅力！
　　4、文本超链接的动态效果
　　为超链接设置动态效果，可以使网页看起来更生动。当鼠标指针移动到具有超链接的文本时，文本会发生变化，例如改变颜色、加粗、变大等。这样可以引起浏览者的注意，达到提高浏览率的目的。
　　首先打开主页，单击“格式”菜单，在下拉菜单中选中“背景”命令，在“网页属性”对话框的“背景”选项卡（如下图所示）中。选中“启用超链接翻转效果”：

　　然后单击“翻转样式”，打开如下图所示“字体”对话框。

　　在“字体”对话框中，设置好翻转效果中的字体、字号、颜色等（本例中将字体设为“华文彩云”、字型设为加粗、大小为18pt、字体颜色为兰色）。这样当鼠标移动到“版主的话”上时，它们将以设置的的样子显示。单击“确定”按钮返回“网页属性”对话框，再次单击“确定”按钮返回编辑窗口。
　　该设置对网页上所有的超链接文本都有同样的效果。
　　单击“预览”标签，将鼠标指针移动到任一超链接点上，超链接文本发生了变化，如下图所示。

　　这只是一些简单的动态效果，我们将在以后学习其他的网页特效，那时，你的网页会更加丰富多彩，更具有个人的气息。
　　5、网页过渡
　　当通过超链接从一个网页切换到另一个网页上时。可以通过网页过渡以特殊效果实现原网页的消失和新网页的出现。
　　现在，我们来看一下如何设置网页过渡，使单击超链接离开网页“indexl.htm'’时，网页发生特殊的变化。
　　打开一个网页后，单击“格式”菜单，在下拉菜单中选择“网页过渡”，打开如下 图所示的“网页过渡”对话框：

　　在对话框中，单击“事件”框右端的下拉按钮，在下拉框中单击“进入网页”。在“周期”框中输入“5”，在“过渡效果”框中选择“圆形放射”，单击“确定”按钮。这样在浏览器中，由其它网页进入此网页时，将产生5秒钟由圆心向外放射的过渡效果。
　　FrontPage 2000一共提供了26种网页过渡效果供我们选择，大家可以自行设定各种网页过渡效果来体会一下。
二、使用组件在网页中实现动态效果
　　组件是用Java、VB等高级语言开发的功能模块，可以补充HTML语言的不足。通过组件的特殊效果，可使网页看起来更加生动、有趣。
　　FrontPage 2000提供多种网页组件，使用方法和前面介绍的DHTML没有什么区别。但对于普通用户来说，不是所有组件都能使用的，因为有些组件如“站点计数器”需要FrontPage服务器扩展支持，而很多因特网服务器都不提供这种支持。因此，在网页中插入组件时，必须考虑到服务器是否支持。
　　下面先介绍在网页中插入“字幕”、“横幅广告管理器”和“悬停按钮”三种组件的方法。它们均为不需FrontPage服务器扩展的支持。
　　1、活动字幕
　　滚动字幕可以实现一串文字从屏幕的左边或右边，依次不断地循环显示。就像电视上的节目变更通知一样。值得注意的是，并不是所有的浏览器都支持它，在不支持此项功能的浏览器中，字幕将被显示为普通文字。在微软的浏览器IE上它的效果最好。
　　1）操作步骤：
　　（2）在FrontPage窗口中打开网页，将光标移至需插入字幕处。单击“插入” 菜单，在下拉菜单中选择“组件”命令，在其旁边的子菜单中选择“字幕”，打开“字幕属性”对话框：

　　（2）在“字幕属性”对话框上，“文本”框中键入需在屏幕上滚动的文字，如，“欢迎光临！”，并设置其它属性项后，单击“确定”，就可完成滚动字幕的插入：

　　这时，滚动字幕是静止的，单击“文件”菜单下的“在浏览器中预览”命令，将网页在浏览器中打开，可以看到文字从屏幕右端滚动而出的情景。
　　2）字幕属性设置
　　在插入字幕时，用户可在“字幕属性”对话框中对字幕的滚动方向、速度、表现方式、字体、字号等作出多种设置，设置在“字幕属性”对话框上进行。在插入完成后，右击字幕后在弹出的快捷菜单选择“字幕属性”命令也可出现“字幕属性”对话框。设置方法是：
　　（1）“方向”选项区
　　选中“左”单选框，文字自右向左滚动；选中“右”单选框，滚动方向相反。
　　（2）“速度”选项区
　　“延迟”框中设定前一次滚动结束至后一次滚动开始之间隔，单位为毫秒；
　　“数量”框中设定文字滚动时，向前移动的“步长”，单位为像素。
　　（3）“表现方式”选项区
　　设定滚动的方式。选中“滚动条”，文字以“方向”、“速度”选项区中选定的方向、速度循环滚动；选中“幻灯片”，文字前端滚动到屏幕边缘时，便消失；选中“交替”，文字在屏幕上左右摆（滚）动。
　　（4）“文本对齐方式”选项区
　　设置滚动文字在字幕区中的位置。
　　（5）“大小”选项区
　　设置字幕区的宽度和高度。度量单位是“像素”或“百分比（相对屏幕）”。一般宜用“百分比”。字幕的大小也可以直接用鼠标拖动字幕四周（角）的操作点方法改变。
　　（6）“重复”选项区
　　设置文字滚动的次数。选中“连续”复选框，滚动将不限次地进行；取消该复选框，可在下边的数值框中设定滚动的次数。
　　（7）“背景颜色”
　　设置字幕的背景颜色。一般均选用“自动”，即选用网页的背景。
　　（8）若要修改滚动文字的字体、字形、字号等属性，可单击“样式”打开“修改样式”对话框，在对话框中单击“格式”按钮，并在下拉菜单中选择“字体”命令(左下图），就可在“字体”对话框中(右下图）进行具体修改。

　　2、日期时间戳
　　日期时间戳是在网页中插入的一个时间标记，它显示的不是当前的日期和时间，而是最后一次编辑网页的日期和时间。浏览者可以根据日期时间戳确定网页的更新时间。
　　日期时间戳一般可放在在网页的最上方或下方，并可在其前面或后面加上“更新时间：”、“更新”等字样。插入方法如下：
　　单击“插入”菜单，选择“日期和时间”命令，打开“日期时间属性”对话框，如下图所示。

　　单击日期格式和时间格式框右边的，选择日期格式和时间格式，单击“确定”按钮，完成设置。本例在其后面加上“更新”两字最后结果如下：

　　3、悬停按钮
　　悬停按钮效果和文字图片的DHTML效果差不多，但更丰富多采。悬停按钮可以达到这样一种效果：当我们把鼠标放在按钮上时，按钮的颜色会发生非常漂亮的渐变变化，或凸起、凹陷效果，甚至还有声音和动画效果。当然和其他按钮一样，悬停按钮一般都是超级链接的源。单击它会打开一个链接。
　　下面我们来看一看插入和设置悬停按钮的方法：
　　在FrontPage窗口中打开网页，将光标移至需插入悬停按钮处，然后单击“插入”菜单，在“插入”菜单中选择“组件”，接着单击“组件”菜单中的“悬停按钮…”。出现下图所示的“悬停按钮属性”对话框，在“悬停按钮属性”对话框中输入按钮文本，设定好按钮颜色、效果颜色等属性，单击“确定”按钮就可完成。

　　“悬停按钮属性”对话框的各选项说明：
　　1）“按钮文本”框：输入按钮的标签文字。若需改变文字属性，可单击“字体”按钮，然后在“字体”对话框上进行设置。
　　2）“链接到”框：设定以悬停按钮为超级链接源的目标网页或其它文件（URL），可单击“浏览”按钮，然后在“选择悬停按钮超链接”对话框上选择链接对象。
　　【注意】悬停按钮的超链接设置不能用常规方法实现，只能在这里设置。如果按钮链接的是电子邮件信箱，由于没有“电子邮件超链接”按钮，所以要麻烦一些。在“悬停按钮属性”对话框中的“链接到”框中输入mailto:电子邮件地址。注意在mailto:与电子邮件地址之间不能有空格
　　3）“按钮颜色”下拉列表框：选定按钮颜色。
　　【注意】若在“自定义”属性中，为按钮选择了图片，则本框设置无效。
　　4）“背景颜色”下拉列表框：选定按钮的背景颜色。通常被按钮颜色遮蔽。
　　5）“效果”下拉式列表框：选定鼠标指针移动到该按钮上时的显示效果。共有7个选项：
　　（1）“填充颜色”：从“按钮颜色”变为“效果颜色”；
　　（2）“颜色对比”：从“按钮颜色”变为“效果颜色”与“按钮颜色”的中间色；
　　（3）“发光”：按钮中间部位变成“效果颜色”，并向四周逐渐过渡到“按钮颜色”；
　　（4）“反色发光”：按钮四周变成“效果颜色”，并向中心逐渐过渡到“按钮颜色”（与发光效果相反）；
　　（5）“微微发光”：按钮中间区域的颜色变淡；
　　（6）“凸出”：按钮上的文字向右上方移动一个像素（不易看出来）；
　　（7）“凹进”：按钮文字向左下方移动一个像素（不易看出来）。
　　简言之，悬停效果主要是按钮上的颜色变化。且决定于按钮颜色和效果颜色。
　　6）“效果颜色”下拉列表框：选定效果颜色。
　　7）“宽度”和“高度”文本框：设定悬停按钮的宽度与高度（单位是像素）。悬停按钮的宽度与高度也可直接用鼠标拖动悬停按钮四周的控制点来改变。
　　8）“自定义”按钮：用于设置悬停按钮的声音和图片效果。单击后，打开下图所示的“自定义”对话框，设置声音和图片。

　　“播放声音”：可通过“浏览”选择设定“单击（鼠标）时”和“悬停时”的声音文件。
　　“自定义图片”：可通过“浏览”选择设定按钮图片和悬停图片。若未设定按钮图片，则悬停时，可将文字的按钮换成一张图片，但图片的大小最好与按钮的大小差不多。
　　下面二张图是将“经气疗法”网页的目录部分改用悬停按钮在浏览器中的情况，上图是鼠标悬停前的情景。下图是鼠标悬停在“版主的话”时的变化。

　　5、横幅广告管理器
　　在很多网页上，在网页的上部有一条横条区域用于播放的是广告图片，称为“横幅广告”。横幅广告类似幻灯片播放，它将多幅图片以一定次序和时间间隔循环地在“横幅窗口”中显示。FrontPage 2000的“横幅广告管理器就是用于实现此目的的一种组件，可以用它实现动画效果。具体操作方法：
　　1）先准备好两个或两个以上大小相等的图片文件，本例准备的是下面二幅：

　　　

　　2）在FrontPage 2000中打开需要实现动画效果的网页，将光标定位于适宜位置。然后单击“插入” 菜单下的“组件”命令，在“组件”的二级菜单里选择“横幅广告管理器”，出现如下图所示的“横幅广告管理器属性”对话框。

　　3）在对话框中单击“显示图片”框左侧的“添加”按钮，在弹出的“添加横幅广告图片”对话框中按路径选择你准备的图片文件，再单击“确定”按钮可添加一幅图片。有几幅图片就重复几次。

　　4）再设置好对话框中的其它参数，单击“确定”按钮，即可得到下图所示的横幅广告。其中显示的图片只是第一幅，但在浏览状态下会依次显示后面的图片。

　　“横幅广告管理器属性”对话框中的参数设置：
　　1）“宽度”与“高度”文本框
　　即确定横幅广告的大小。若广告图片的高度或宽度大于上述设定值，则图片被截去一部分。若广告图片的高度或宽度小于上述设定值，则周围出现一个灰色的边框。横幅广告的大小也可以直接用鼠标拖动字幕四周（角）的操作点方法改变。
　　2）“过渡效果”下拉列表框
　　选定切换图片时的过渡效果。共有6个选项：①“无”，无过渡效果；②“水平遮蔽”，水平百页窗过渡效果；③“垂直遮蔽”，垂直百页窗过渡效果；④“分解”，下一幅图片，从当前图片上扩散出现的效果；⑤“盒状收缩”，从四周向中心汇合的过渡效果；⑥“盒状放射”，从中心向四周扩散的过渡效果。
　　3）“每幅图片显示（秒）”文本框：设定每幅图片的显示时间。
　　4）“链接到”框：设定以横幅广告为超级链接源的目标网页或其它文件（URL）。
　　5）“显示图片”框
　　利用左侧的“添加”、“删除”、“上移”和“下移”按钮可添加、删除或调整图片的显示顺序。
　　6、站点计数器
　　计数器是一项非常有趣的活动元素，它能够自动累计参观主页的人数，让网站主人有一种成就感。计数器几乎是任何一个个人主页必备的。
　　Frontpage虽然也提供站点计数器，有很多教材介绍插入站点计数器的方法。但因为多数服务器都不支持它，所以我们这里就不介绍了。不过许多提供主页空间的服务器都提供免费的计数器，计数器都大同小异。如新竹网站可以直接在“系统管理”页选择采用计数器。也有一些网站专门提供计数器服务，如“太极链”（http://www.textclick.com/）就是这样一个网站。下面我们简单介绍一下在“太极链”中申请免费计数器的方法：
　　在IE打开“太极链”网站，如下图所示：

　　单击“流量统计”下拉菜单中的“太极统计（免费）” 选项，进入“太极链站点统计”网页：

　　在网页的下部单击“新用户注册”，进入新用户注册网页。按要求逐项天好个人资料，就会出现如下网页：

　　用鼠标拖动的方法选中这段代码，然后鼠标右击该代码块，在快捷菜单中选择“复制”命令。再在FrontPage窗口打开主页，将光标定在要插入计数器的单元格位置，单击窗口下面的“HTML”按钮。使窗口变为“HTML”视图。将光标移动到插入位置，单击常用工具栏上的“粘贴”按钮，就可将代码插入：

　　在“普通”视图下看不到计数器效果，但用浏览器预览就可看到太极计数图标：

　　鼠标单击该图标，就会链接到太极网站你所注册的计数器数据库，把对你的网站的访问统计显示出来：

　　从上图可知，统计数据很详细，若喜欢，你甚至可以查看一下有那些地区的网友访问过你的网站。
三、插入HTML语句实现特殊效果
　　虽然FrontPage可以实现许多特殊效果，但终归简单了一些。我们可以通过插入一些HTML语句来实现特殊效果。
　　在网上有很多现成的能显示各种特殊效果的程序段，如“走马灯”、弹出广告等等。这些程序段都是用JavaScript等语言编的，我们只要把它们复制过来就可以了。
　　下面的语句用于在网页上显示当前的时间和星期。这样，浏览者一进入网页，就知道当前的时间了。
<script language=JavaScript>
　today=new Date();
　function initArray(){
　　this.length=initArray.arguments.length;
　　for(var i=0;i<this.length;i++)
　　this[i+1]=initArray.arguments[i] }
　var d=new initArray("星期日","星期一","星期二","星期三","星期四","星期五","星期六");
　tyear =today.getYear()<100?1900+today.getYear():today.getYear();
　tmonth=today.getMonth()+1;
　tday=today.getDate();
　tweek=tyear+"年"+tmonth+"月"+tday+"日 "+d[today.getDay()+1];
　document.write(tweek);
</script>
　　在网页的HTML视图的适当位置插入这段程序。在浏览器中预览网页，就可以在网页中出现了当前的时间和星期。