动态提示轻松做

Author: 曾子昭 Date: 1999年 第42期 27版


  动态提示就是当鼠标移动到网页中的一个链接上的时候,在这个链接的旁边就会出现一个提示条,显示你预先设定的提示文字!下面我就带领大家一步步地制作一个动态提示,你可以体会在Dreamweaver中使用layer是多么的方便!好了,我们开工吧: 
    1.打开Dreamweaver2.0。如果觉得里面的窗口太多,可以把Layer、Behaviors以及Style窗口都拖到Objects窗口里,如图1所示: 
    2.选取“修改”/“页面属性”菜单项,出现一个窗口,在第一行“标题栏”里填上“我的动态提示”;第二栏是设置网页的背景图片的,这里我们不设背景图片;第三栏设置背景颜色,我们选择白色;最后选择“确定”。
  3.在正文区里写上“动态提示示例”,将文字全部选中,然后在“属性”窗口(就是那个长长的大窗口)里面找到链接栏(英文版前面显示的是Link), 在里面填上你要链接的页面,如果只是做试验,那就填上“#”好了。
    4.在Objects窗口里用鼠标点一下layer图标(^422701a^1),你会发现鼠标变成了十字架形状,然后在“动态提示示例”这几个字的右下按下鼠标,用鼠标拖出一个小长条,在小长条里写上“提示文字”如^422701b^2所示。然后选定这几个字,在属性窗口中的字体颜色框里设定字体的颜色,这里我们选白色。然后选定这个layer(把鼠标移到layer上面,直到鼠标的箭头变成一个四方向箭头,然后点一下鼠标左键),再在属性窗口里的背景颜色框中选择背景颜色,这里我们选天蓝色。
    5.在layer窗口中,layer1就是上一步里画的那个layer,用鼠标点一下前面的眼睛,使其闭上,如^422701c^3。然后你会发现刚才画的layer消失了。
  6.现在选定“动态提示示例”这几个字,然后在Behaviors窗口里点“+”图标(^422701d^4),弹出一个菜单,选择Show-hide layer这一项。这个菜单是让我们选择当鼠标移动到“动态提示示例”这几个字时所发生的事件,由于我们这里要求当鼠标移动到文字上时显示layer,鼠标移开时让layer消失,所以就选“Show-hide layer”项。 
    7.出现如^422701e^5窗口,我们选定layer“layer1”栏,按“Show”按钮,然后选“确定”。这是设定layer1隐藏和显示时的动作,show代表显示,hide代表隐藏。
    8.接着第七步,你会看到Behaviors窗口已经变成了如^422701f^6样,这说明显示layer的动作已经建立好了,不过默认的激发事件不符合我们的要求,因此我们要做一些修改。用鼠标点一下中间的小三角形,在弹出的菜单中选择onMouseOver。onMouseOver事件是指当鼠标在“动态提示示例”上移动时,激活显示layer的动作。
    9.重复第六步,在第七步时选hide按钮,在第八步时它会产生一个新的“onLoad Show-Hide Layer”,这一次我们点那个三角形,选onMouseOut事件,当鼠标离开“动态提示示例”这几个字时,激活隐藏layer的动作。
    10.到现在这个作品已经完成得差不多了,我们来进行最后一步,也就是让layer里的“提示文字”动起来!先在layer窗口里,点一下layer1,layer1重又出现了。选定里面的文字,然后在屏幕的右下角的一排图标中点击最后一个(^422701g^7),显示网页的html代码窗口。在“提示文字”前面手工加上<marquee>,后面加上</marquee>,这样就大功告成了!
  把这个网页保存起来,然后用IE打开它,把鼠标移到“动态提示示例”上面看看,真的很酷吧!