主页动态提示轻松做

动态提示轻松做

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