为你的网页添加一个漂亮的窗口──Dreamweaver行为Drag Layer全攻略
?牐犜趺囱岚桑憧梢杂檬蟊臧醋∷暮焐糠掷赐隙飧龃翱冢⑶艺飧龃翱谑峭该鞯摹＞咛逶谕成系恼媸敌Ч憧梢栽趆ttp://onlylogo.myetang.com看到。要做出这个效果其实不难，只要用Dreamweaver自带的插件Drag Layer很容易就可以做到。下面我就一步一步地告诉你如何使用Drag Layer。
?牐燚rag Layer插件可以让你在网页中插入一个可移动的层，而对这个层做一些修饰，就模拟出了一个窗口，下面我分三步来介绍它的做法：
#1?牐犚弧⒔?立一个层
?牐牬蚩狣reamweaver，按“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?牐牰⑽闵柚肈rag 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，这个窗口已经基本上完成了，最后我们来为它添加一个半透明的效果，让它看起来更炫。
?牐犜俅窝≈胁鉪rag，按“Ctrl+T”打开快键编辑框，在刚才编辑过的border:1px solid #000000后面加上一个分号“;”，再加一句FILTER:Alpha（Opacity=80）注意：这一句要加在引号之内（图14）。（^31040704n^）
?牐?7.随便在网页上加点内容，然后按“F12”预览，真的变透明了呢（图15）。（^31040704o^）
?牐牶茫峥岬拇翱诰驼庋龊昧耍趺囱菀装伞?
?牐犛行巳さ呐笥芽梢栽傺芯垦芯浚箍梢愿由献畲蠡⒆钚』陌磁ィ钪湛梢阅Ｄ獬龊蚖indows一样的窗口。