Vb教程 Vb.net教程 Vfp教程 C/C++教程 Vc/Vc++教程 Delphi教程 Java教程 Powerbuilder
  杀毒频道 | 短信频道 | 网络电视 | 论文中心 | 学上网 | 学软件 | 网页特效 | 电脑基础 | 论坛  
  NCRE | 软考 | CET | 职称英语 | 司法考试 | 报关员 | 公务员 | CATTI | CPA考试  
  Html教程 | Css教程 | Xml教程 | Asp教程 | Asp.net | Php教程 | Jsp教程 | Linux教程 | QQ技巧  
Photoshop Illustrator ImageReady Maya教程 3D Max教程 Lightscape Coredraw教程 Authorware Autocad教程 Freehand教程
Access教程 Mysql教程 Sql server Oracle教程 Word教程 Excel教程 Powerpoint Frontpage Asp.net源码 Php源代码
Flash教程 Fireworks Dreamweaver C#教程 outlook教程 系统安装 vbscript教程 Javascript Jsp源代码 Asp源代码
您的位置:首页 >> Dreamwaver教程 >> 正文

Dreamweaver MX中移动层的使用
文章来源:六月海设计

这是一个使用Dreamweaver MX中 拖动层行为的运用实例。你可以通过操作上面的实例感觉一下。

因为接触DW不久,所以技术有限,如果有不对的地方,请各位指出来。在这儿首先要说的是同一个效果,实现的方法有很多,关键在自己如何去实现。

在这里,我只是提出自己的想法。如果有什么好意见或建议,可到论坛提出来或直接通过下面的评论发表。

 

 

 

下面是该教程的正文:

1、首页我们需要先创先一个大一点的层,用来包含移动层。 大致参数为上图。层的大小你可以自己调节。

2、然后呢,在这个topDiv层中插入一个新层navDiv,放到左边; 再插入一个新层moveDiv用来做移动层(我在层中插入一个2行1列的表格,并设置其背景色)。 参数设置与效果如上图。

3、为navDiv以及moveDiv添加透明效果,使用CSS的ALPHA定义:

其参数为:

<STYLE type="text/css">
<!--
.divalpha {
filter: Alpha(Opacity=60, FinishOpacity=60, Style=0, StartX=1, StartY=1, FinishX=100, FinishY=100);
}
-->
</STYLE>

得到上图效果

4、现在我们开始进入正题了吧。首先给navDiv层和moveDiv层上的小图片加上事件。

首先给navDiv层的open.gif小图片加上:

<IMG src="open.gif" width="13" height="13" style="cursor:hand" onclick="jscript:moveDiv.style.display='';" alt="点击打开层">

给moveDiv层的close.gif小图片加上:

<IMG src="close.gif" alt="点击关闭层" width="13" height="13" onclick="jscript:moveDiv.style.display='none';" style="cursor:hand">

到现在为此,我们的moveDiv层已经有了隐藏和显示的效果了。现在我们需要使用DW中的拖动层行为,先通过编辑窗口下面的快捷选定<BODY>标记,然后为BODY的ONLOAD事件添加拖动层行为:具体参数如左图:

注:高级参数设置中的左,上,宽,高为moveDiv层的区域,通过设置这部分,我们可限制允许拖动层的范围基本参数设置中的上、下、左、右,为moveDiv层可移动的范围。

5、到目前为止,拖动层的效果已经出来了。为了加强效果,我们继续: 前面我提到过在moveDiv层中插入了一个2行1列的表格,现在我们在用到它了。 给上面的单元格修改成加上以下代码:

<TD height="30" bgcolor="#0099FF" onMouseDown="this.style.cursor='move';this.style.backgroundColor='#0066cc'" onMouseUp="this.style.cursor='';this.style.backgroundColor='#0099ff';" id="moveTd" onMouseOut="this.style.cursor='';this.style.backgroundColor='#0099ff';">

到目前为止,整个效果就出来了!:) 效果如上图

[返回]

编程语言 web开发 数据库 网络技术 操作系统 服务器 网页设计 图形设计 办公软件 常用软件 学电脑

Copyright© www.bianceng.cn Powered by 编程入门网 All Rights Reserved.
关于本站 | 版权声明 | 联系我们 | 友情链接 |
编程入门网 版权所有