利用DW的DragLayer轻松实现可拖动层

2008-02-23 06:14:01来源：互联网阅读 ()

浏览网页时,经常会看到一些类似图片或文字内容的东西,能够通过鼠标点击拖拉，任意地改变其在屏幕上的位置。其实，这种效果一般是通过“可拖动层”来完成的。

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层的透明度。注意:此代码应加在原来的引号之内,如图：