为你的网页添加一个漂亮的窗口──Dreamweaver行为Drag Layer全攻略

  
2001年 31期

　　在开始学习教程前，请大家先看看图1这个效果。（^31040704a^）
　　　　怎么样，酷吧，你可以用鼠标按住它的红色部分来拖动这个窗口，并且这个窗口是透明的。具体在网页上的真实效果你可以在http://onlylogo.myetang.com看到。要做出这个效果其实不难，只要用Dreamweaver自带的插件Drag Layer很容易就可以做到。下面我就一步一步地告诉你如何使用Drag Layer。
　　　　Drag Layer插件可以让你在网页中插入一个可移动的层，而对这个层做一些修饰，就模拟出了一个窗口，下面我分三步来介绍它的做法：
　　#1　　一、建立一个层
　　　　打开Dreamweaver，按“Ctrl+F2”和“Ctrl+F3”以保证Objects和Properties两个窗口打开。点击Objects窗口上的“层”按钮，在屏幕上按住鼠标不放拖出一个区域，这样就在网页中插入了一个层（图2）。（^31040704b^）
　　　　1.在Properties窗口的Bgcolor框中填入#0099CC为层设置背景，设置层的宽度为255px，在layetID框中填入drag为这个层命名（图3）。（^31040704c^）
　　　　2.然后把鼠标移到层中，按Objects窗口上的“表格”按钮插入一个表格，在弹出窗口中设置这个表格，参数设置如图4。（^31040704d^）
　　　　3.在这个表格的第一行中输入文字“可以拖动的COOL窗口”，并设置这个单元格的背景色为#FF6600，单元格高度为18px，排列方式为居中（图5）。（^31040704e^）
　　#1　　二、为层设置Drag Layer行为
　　　　1.好，现在准备工作已经完成了，按“Shift+F3”打开Behaviors窗口。在Behaviors窗口中按“+”按钮，选择Drag Layer（图6）。（^31040704f^）
　　　　2.在弹出的Drag Layer窗口中有Layer下拉选单，它列出了这个网页中所有的层，确保你已经选中的drag这个层，这就是为什么我们前面要为层命名的原因（图7）。（^31040704g^）
　　　　3.点击Drag Layer窗口上部的Advanced标签，在Drag Handle下拉菜单中选择Area Within Layer。它的功能是设置层的可作用区域，决定鼠标在层的哪个范围内能拖动层。L、T、W、H分别设置为0、0、255、18。它们的是设置层可作用于区域距离层左边的宽度、区域距离层顶部的宽度、区域的宽度、区域的高度。255和18这两个值正是我们前面定义的层的宽度和单元格的高度（图8）。（^31040704h^）
　　　　4.设置好后按“OK”，你会看到Behaviors窗口中出现Events为onLoad，Actions为DragLayer（图9）（^31040704i^），这表示你已经基本成功了。这时候按F12预览看看效果，用鼠标点住红色单元格不放拖动，怎么样，有意思吧:）
　　#1　　三、美化并为窗口添加一个关闭按钮
　　　　1.预览时我们看到的窗口不是很精美，没有关系，接下来我们就做一点小修改。首先我们为窗口加上一个边框，选中层，按“Ctrl+T”打开快速编辑框，找到border: 1px none #000000这一句，把none改为solid，现在层已经有一个黑色的边框，按“F12”可以看到效果（图10）。（^31040704j^）
　　　　2.添加关闭按钮。在表格的第一行输入“关闭”两个字，并在Properties窗口中为它添加一个空链接，方法为在Link框中输入一个#号。单元格设置为居中（图11）。（^31040704k^）
　　　　3.选中“关闭”这两个字，点击Behaviors窗口中的按钮，在下拉菜单中选Show-Hide Layers。这时会弹出一个窗口，Named Layers框中列出了这个网页中所有的层，保证drag层被选中，点击下面的Hide按钮，按“OK”（图12）。（^31040704l^）
　　　　4.在Behaviors窗口的Events标签下有一个三角形的按钮，点击它选择onClick，如果没有onClick选项，请选Show Events For -> IE 4.0，然后再点三角形按钮，这时候onClick选项就出现了（图13）。（^31040704m^）
　　　　5.现在再按“F12”预览，你已经可以通过点击“关闭”来隐藏这个窗口了。
　　　　6.OK，这个窗口已经基本上完成了，最后我们来为它添加一个半透明的效果，让它看起来更炫。
　　　　再次选中层drag，按“Ctrl+T”打开快键编辑框，在刚才编辑过的border:1px solid #000000后面加上一个分号“;”，再加一句FILTER:Alpha（Opacity=80）注意：这一句要加在引号之内（图14）。（^31040704n^）
　　　　7.随便在网页上加点内容，然后按“F12”预览，真的变透明了呢（图15）。（^31040704o^）
　　　　好，酷酷的窗口就这样做好了，怎么样，容易吧。
　　　　有兴趣的朋友可以再研究研究，还可以给它加上最大化、最小化的按钮，最终可以模拟出和Windows一样的窗口。
　　
　　 
 