Dreamweaver中层实例运用解析

周小虎
2000年 第37期 

　　学习的最终目的是为了实践，而最好的学习方法就是从实例中去萃取与吸收，现在让我们结合实例来看一看Dreamweaver中层的行为以及对事件响应的运用吧。
#1    一、跳舞的MM
　　页面：http://www.yesky.com
　　描述：一个据说是某位小编假扮而成的MM舞着两块抹布：）从左扭到右，如此往复（^37040202a^1）。
    方法：
　　1.在页面插入一个层，并在层中插入图像（因动态样式和显示遮罩下面页面的需要，一般图像采用GIF格式）。
　　2.鼠标选定该层的标记，单击鼠标右键选择加入“时间轴”，用Ctrl＋F9显示时间轴窗口，DW默认的帧数是15帧，可以自己调整帧数和帧，现在鼠标点到第15帧，然后将层拖到移动路线的未端，勾选“自动播放”，如果希望一直播放还须勾选“循环”选项。
    举一反三
　　1.事件、行为和层的时间轴结合使用。插入一个层，在层里输入“我是唐僧嗡嗡嗡”，然后随便为它们设定一个链接地址（如：＃），将层加入时间轴，并设定好行动路线，注意不要勾选自动播放，只需勾选“循环”项，然后到时间轴的第一帧，选定层内的字符，打开Behaviors面板，选择“Play timeline1”然后确定，这时的效果你一按这些字，这个层就会“按预定路线逃跑”，为了保护唐僧不会被人打倒，我们可以重新选择，用右键的“Edit Target”，将默认的事件Onclick改为OnMouseover，这样鼠标一经过唐大哥，他就会自动逃跑哦。
　　2.两个层的连贯。分别插入两个层，插入两个球体形状的GIF，确定好它们之间有一定的距离，将第一个层加入时间轴，将这个层的行动终点设到第二个层旁（将Layer面板的“防止层重叠”选项去掉），然后将第二个层加入时间轴，如果你认为你主页拜访者的网速够快的话，你可以在Timeline1的最末一个帧或Timeline2的第一个帧加上一个Behaviors，选择Playsound，这样，在两个层相撞时发出你选择的声音。
#1    二、随鼠标而出现的箭头
　　页面：http://it.263.net/b/book/index.htm
　　描述：书架上的一排书，鼠标滑过每一本书的书脊时，都有一个箭头在书脊上部跳动当鼠标挪开时，箭头消失（^37040202b^2）。
    方法：
　　1.插入整个图片（263里用的整个图片，然后用DW的热点分割工具来划定一个一个的热点区域，你也可以用FIREWORKU将图片分割好后再一一插入，不要忘记将它们的链接地址设为＃），在每一个热区上都插入一个层，然后在层里插入同样的箭头图片，在Layer面板里将它们都设为不可见。
　　2.设置事件和动作。选取一个热区，然后激活Behaviors面板，按“＋“键，选择Show Hide Layer，选择Show该热区上的那个箭头所在层，因为这里默认的事件是Onclick，所以我们需将它改为OnMouseover，接着设置OnMouseout的动作，这次是Hide这个层，同样把Onclick改为OnMouseout。
　　3.复在每一个热区做以上无聊的工作，直至全部完成各个热区。
    举一反三
　　1.文字提示的制作。我们可以很方便地设置网页中每个图形的ALT键，即：当鼠标指向该图形停留时，会有提示的字符，但在Frontpage、Hotdog等软件中好像并不提供文字链接的注释功能，在DW中，我们需要做的就是将各个提示层做好后放在链接文字的下方，然后就用以上提到的Show/Hide Layer大法，这样鼠标停留到文字链接时，也会出现相应的提示。有关实例请参看http://coobe.cs.hn.cnifno.net/～bluesoul/index2.htm。
　　2.变层中文字的内容。在263新书发布的这个页面中当你按下你想要的书的书脊时，你会发现在旁边一个框架中的图片内容将会显示这本书的封面图像，经过观察，发现它是经过一个Javascript程序做到以上效果的，如果全部是文字信息的话，可以不通过附加这个程序而直接通过DW制作，方法就是在适当的位置另外插入一个层，设置为可见，当每个热区设置Show/hide layer时，另外加上一个Behaviors——Set text of the layer，选择的层就是刚才插入的层，这样，鼠标经过一个链接热区时，该层就会出现你设置的字符。有关实例请参看http://coobe.cs.hn.cninfo.net/～bluesoul/rock.htm。
#1    三、下拉菜单
　　页面：http://www.net.cn
　　描述：鼠标停留在一个链接时，有下拉式菜单出现，移向另一个链接时，又出现另一个下拉式菜单，每个菜单都有一个“X”键，用来关闭这个下拉式菜单（^37040202c^3）。
    方法：
　　同样是Show/Hide layer的应用，但考虑到如果是用OnMouseout的事件来Hide菜单层的话，结果就是你的鼠标一离开就不见了菜单层，正确的方法应该是：
　　1.在每个链接下制作相应的菜单层，将这些层的全部设为不可见，设置OnMouseover的事件，注意这里当OnMouseover时不仅要Show指定的层，还要Hide其他的所有菜单层。
　　2.样当鼠标经过时，会有相应的菜单出现而隐藏其他菜单层，但这里有一个所有菜单层都不出现该怎么做的问题，万网上首页的下拉式菜单并没有解决这个问题，但它的个人管理面板里有解决方法，就是在菜单的某部位（一般是顶层）加上一个“X“形的图形，聪明的你一定想到了，我们可以通过Behaviors设置，即：Onclick 这个X时Hide它所在的层。具体的样式，大家去看一看http://bluesoul.2699.com。

 