浏览网页时,经常会看到一些类似图片或文字内容的东西,可以通过鼠标点击拖拉，任意地改变其在屏幕上的位置。其实，这种效果一般是通过“可拖动层”来完成的。
Dreamweaver有一个插件可以很快捷地做出此种效果,但是如果你手头上没有这个插件怎么办呢?没关系,我们利用DW的行为DragLayer(拖动层)也可以方便地做出此效果,它不比利用插件做出的逊色!
一.建立一个新层
1.打开DW,新建一网页。
2.使用Insert>Layer(插入>层)命令或者使用Object(对象)工具条中的DrawLayer(绘制层)工具插入一个层,并设定好大小及位置。打开Properties(属性)面板,在Bgcolor(背景)框中设置层的背景色为自己喜欢的颜色。设置高度、宽度。在layerID(层编号)框中设置这个层的名称为drag(或其它名字),如下图:
3.将鼠标定位在这个层中，利用Insert>Table(插入>表格)或由Object(对象)工具条中InsertTable(插入表格)工具在此层中插入一个3行1列的表格,设置表格的宽度和层的宽度一样。最上边的单元格高度为15px(或其它值)．
4.简单修饰表格.修饰后效果如下图:
二.设置行为
1.将鼠标定位至最上边的单元格里,打开Behaviors(行为)面板,点击"+"号，在弹出的菜单中选择DragLayer(拖动层)。
2.在弹出的DragLayer(拖动层)对话框的Layer(层)下拉选单中，列出了这个网页中的所有的层名称,我们选择Layer"drag"。
3.点击Advanced(高级)标签,在DragHandle(拖拽控制点)下拉菜单中选择Area Within Layer(层内区域)选项。它是用来确定作用区域的,它决定了在哪个区域内可以拖动层.其中L.T.W.H(左.上.宽.高)分别设为1.1.350.15。它说明了在距此层左边1px,顶部1px,宽度为351px,高度为15px的区域内(即最上面的单元格)可以触发DragLayer(拖动层)事件。如下图所示:
4.设好后,按OK确定。我们即可在Behaviors(行为)面板中看到此事件了。Events(事件)为动作的触发事件(onload),点击后面的箭头就可改变触发事件;Actions(动作)就是动作了,双击它可以修改相关参数.这时候可以按F12在浏览器中预览我们的作品了!
三.修饰
1.添加边框。
选中该层,按Ctrl+T打开代码定位编辑框.将border:1px
none #000000中的none修改为solid。预览，我们可以发现drag层已经有了一个黑色的细边框。改变后面的颜色代码可以改变细边框的颜色.
2.添加关闭按钮。
网页不能关闭可不行,下面我们就来添加一个关闭按钮.在最下面的单元格里输入"关闭"并使其居中。选中此二字,打开Properties(属性)面板,在Link(链接)框中输入“#”(为这两个字加一个空的链接)。选中二字,打开Behaviors(行为)面板,点击"+"号在弹出的菜单中选择Show-HideLayers(显示隐藏层)。在弹出的对话框中选中Layer"drag",点击Hide(隐藏),按OK，关闭对话框。回到Behaviors(行为)面板将Events(事件)设为OnClick(方法同上).按F12预览就可单击"关闭"来关闭(隐藏)drag层了.
3.添加透明效果。
要是能让拖动层透明岂不是更酷?好,选中drag层,按Ctrl+T打开代码定位编辑对话框,在代码最后加一个分号,再加上filter:alpha(opacity=80)。其中opacity=?的值可以改变(从0~100)它决定了drag层的透明度。注意:此代码应加在原来的引号之内,如图：
好了,在网页上加入背景,按F12看看我们劳动的成果吧!
