一聚教程网：一个值得你收藏的教程网站
Dreamweaver中层（Layer）的定位技巧
时间： 00:00:00
编辑：简简单单
来源：转载
我想许多朋友的朋友和我一样，都遇到过这样的问题:&层在某个下是正常的,可是换了分辨率或调整窗口,层就错位,这种情况最常见的情形就是下拉菜单的制作，鼠标移到一个项目上，子项菜单却从另外的地方弹出来，很烦人吧？怎样才能做到层在不同分辨率下不错位呢?& 现在我们来做一个鼠标移上去就弹出菜单的效果，请看下面的例子：
　　第一步:新建一个二行一列的表格,为了便于我看一些特殊的元素,我们将表格的边框定义为一;如下(新建表格的快捷键:ctrl+alt+T),
　　第二步:将第一行的表格分成5列,(给每列的表格定义颜色定义为红色,并将它们的Brdr也定义为黑色)如下:
　　第三步:将第一行表格的每一列输入以下文字(给表格的文字定义一个白颜色,12号字体的):
图层一下拉菜单
图层二下拉菜单
图层三下拉菜单
图层四下拉菜单
图层五下拉菜单
图层六下拉菜单
　　第四步:插入层,记住要将光标定义在第二表格里再插层,你会看到层的占位符在表格里,如下:
　　第五步:将层的left和top属性删除如下图:
　　第六步:将光标定义在layer层里,插入层,如下:
　　第七步:照&第六步&那样,再入五层图层(并给图层1～6层定义背景颜色),如下图:
　　第八步:将图层1～6定义确定要放的位置,并输入文字在每个层里,如下：
　　第九步:给图层1～6定义一个鼠标移上去、鼠标离开事件(这里我们就不作介绍)，这样弹出式菜单就做好了。按一下F12吧，别忘了改变分辨率来看一下哟，你会发现层被你左右了也~~~~~~~~~~~~~~~。
dsfasdfasdf
dsfasdfasdf
dsfasdfasdf
dsfasdfasdf
dsfasdfasdf
dsfasdfasdf
&script language="javascript" type="text/javascript">
function MM_findObj(n, d) { file&#58//v4.0
var p,i,x;
if(!d) d= if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)]. n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.i++) x=MM_findObj(n,d.layers[i].document);
if(!x && document.getElementById) x=document.getElementById(n);
function MM_showHideLayers() { file&#58//v3.0
var i,p,v,obj,args=MM_showHideLayers.
for (i=0; i
　　我们这里面为什么要将表格定义为两行呢，这是有道理的，那么第二行主要有什么有呢？其实就用来放layer层，这样层layer就相对表格定位了，不管什么分辨率下，表格的伸张收缩，层都会相对于表格来定位了，而不在是相对整个页面定位了，如果我们的层不是放在表格里，而是放在任意一个地方来定位，那么层就相对于整个页面来定位了，最后会在分辨率的改变下发生变化；而这时图层1～６就会相对于layer层来定位了。现在是不是解决了你的问题了呢?
　　总结，其实，这个问题的实质是层与表格的综合定位问题，如果你研究过微软的DHTML定位模型，就会了解表格与层的定位原理是不一样的，表格是使用的相对定位（Relative Positioning)模型，即按文字流的顺序从左到右从上到下的排列对象，一个对象的位置取决于其前面的对象，就象你在段落中删掉一个字后面的字自动前移一样，而层是采用的是绝对定位（Absolute Positioning），使用的是一个精确的座标系，此座标系的建立决定于该绝对定位元素母层次级的上一个绝对定位元素，如一个层包含另一个层时，子层的定位座标系建立在母层基础上,如没有上层绝对定位元素则相对于BODY元素。在网页中我们常常同时使用层和表格来共同定位，这样当页面改变大小或屏幕分辨率必改变时，相对定位的元素由于重新排列相互位置使位置改变，而绝对定位的元素如层等会保持原有位置，这就是错位的发生原因。解决这个问题的方法就是利用绝对定位的座标系决定于上一层次绝对定位元素的原理，在表格里插入一个绝对定位但没有LEFT和TOP属性的层实质上是放进了一个随相对定位元素同步改变位置的绝对定位座标系，这样他的子层将以此座标为基准进行绝对定位，所以即使改变分辨率与窗口大小也不会造成错位了。天极传媒：天极网全国分站
您现在的位置： >>
Dreamweaver中层（Layer）的定位技巧
　　我想许多朋友网页制作的朋友和我一样，都遇到过这样的问题:"层在某个分辨率下是正常的,可是换了分辨率或调整窗口,层就错位,这种情况最常见的情形就是下拉菜单的制作，移到一个项目上，子项菜单却从另外的地方弹出来，很烦人吧？怎样才能做到层在不同分辨率下不错位呢?" 现在我们来做一个鼠标移上去就弹出菜单的效果，请看下面的例子：　　第一步:新建一个二行一列的表格,为了便于我看一些特殊的元素,我们将表格的边框定义为一;如下(新建表格的快捷键:ctrl+alt+T),
&　　第二步:将第一行的表格分成5列,(给每列的表格定义颜色定义为红色,并将它们的Brdr也定义为黑色)如下:
&　　第三步:将第一行表格的每一列输入以下文字(给表格的文字定义一个白颜色,12号字体的css):
图层一下拉菜单
图层二下拉菜单
图层三下拉菜单
图层四下拉菜单
图层五下拉菜单
图层六下拉菜单
&　　第四步:插入层,记住要将光标定义在第二表格里再插层,你会看到层的占位符在表格里,如下:　　第五步:将层的left和top属性删除如下图: 　　第六步:将光标定义在layer层里,插入层,如下:
1（作者：coffee责任编辑：）
天极新媒体&最酷科技资讯扫码赢大奖
* 网友发言均非本站立场，本站不在评论栏推荐任何网店、经销商，谨防上当受骗！
笔记本手机数码家电Dreamweaver中层与时间轴的应用
层是CSS中的定位技术，在Dreamweaver中对其进行了可视化操作。文本、图像、表格等元素只能固定其位置，不能互相叠加在一起，而层可以放置在网页文档内的任何一个位置，层内可以放置网页文档中的其他构成元素，层可以自由移动，层与层之间还可以重叠，层体现了网页技术从二维空间向三维空间的一种延伸。
　　一、创建层
　　1、创建普通层
　　（1）插入层
　　选择菜单栏&插入&布局对象&层命令，即可将层插入到页面中去。
　　使用这种方法插入层，层的位置由光标所在的位置决定，光标放置在什么位置，层就在什么位置出现。选中层会出现六个小手柄，拖动小手柄可以改变层的大小。
　　（2）拖放层
　　打开快捷栏的“布局”选项，单击“绘制层”按钮，单击鼠标左键，并且按住不放，拖动图标到文档窗口中，然后释放鼠标，这是层就会出现在页面中了。
　　（3）绘制层
　　打开快捷栏的“布局”选项，单击“绘制层”按钮，在文档窗口内鼠标光标变成十字光标，然后按住鼠标左键，拖动出一个矩形，矩形的大小就是层的大小，释放鼠标猴层就会出现在页面中。
　　2、创建嵌套层
　　创建嵌套层就是在一个层内插入另外的层。
　　方法一：将光标放才某层内，选择菜单栏&插入&布局对象&层命令，即可在改层内插入一个层。
　　方法二：打开层面板，从中选择需要嵌套的层，此时按住Ctrl键同时拖动改层到另外一个层上，直到出现如下图所示图标后，释放Ctrl键和鼠标，这样普通层就转换为嵌套层了。
　二、设置层的属性
　　选中要设置的层，就可以在属性面板中设置层的属性了。
　　层编号：给层命名，以便在“层”面板和 JavaScript 代码中标识该层。
　　左、上：指定层的左上角相对于页面（如果嵌套，则为父层）左上角的位置。
　　宽、高：指定层的宽度和高度。如果层的内容超过指定大小，层的底边缘（按照在
Dreamweaver设计视图中的显示）会延伸以容纳这些内容。（如果“溢出”属性没有设置为“可见”，那么当层在浏览器中出现时，底边缘将不会延伸。
　　Z轴：设置层的层次属性。在浏览器中，编号较大的层出现在编号较小的层的前面。值可以为正，也可以为负。当更改层的堆叠顺序时，使用“层”面板要比输入特定的
z 轴值更为简便
　　可见性：在“可见性”下拉列表中，设置层的可见性。使用教本语言如JavaScrip可以控
制层的动态显示和隐藏。有四个选项：
　　Default——选择该选项，则不指明层的可见性。
　　Inherit——选择该选项，可以继承父层的可见性。
　　Visible——选择该选项， 可以显示层及其包含的内容，无论其父级层是否可见。
　　Hidden——选择该选项，可以隐藏层及其包含的内容，无论其父级层是否可见。
　　背景颜色：用来设置层的背景颜色。
　　背景图像——用来设置层的背景图像。
　　溢出——选择当层内容超过层的大小时的处理方式。有四个选项：
　　Visible（显示）：选择该选项，当层内容超出层的范围时，可自动增加层尺寸。
　　hidden（隐藏）: 选择该选项，，当层内容超出层的范围时，保持层尺寸不变，隐藏超出部分的内容。
　　scroll（滚动条）: 选择该选项，则层内容无论是否超出层的范围，都会自动增加滚动条。
　　auto（自动）: 选择该选项，，当层内容超出层的范围时，自动增加滚动条（默认）
　　剪辑：设置层的可视区域。通过上、下、左、右文本框设置可视区域与层边界的像素值。层经过“剪辑”后，只有指定的矩形区域才是可见的。
　　类：在类的下拉列表中，可以选择已经设置好的CSS样式或新建CSS样式。
　　位置和大小的默认单位为像素 (px)。也可以指定以下单位：pc
(pica)、pt（点）、in（英寸）、mm（毫米）、cm（厘米）或
%（父层相应值的百分比）。缩写必须紧跟在值之后，中间不留空格：
　　使用层制作特效我们在创建网页的时候，可以发现层可以在网页上随意改变位置，在设定层的属性的时，可以知道层有显示隐藏的功能，通过这两个特点可以实现很多令人激动的网页动态效果。
三、时间轴
　　时间轴实根据时间的流逝移动图层位置的方式显示动画效果的一种动画编辑界面，在时间轴中包含了制作动画时所必须的各种功能。
　　1、时间轴的各项功能
　　（1）时间轴弹出菜单：表示当前的时间轴名称。
　　（2）时间轴指针：在界面上显示当前位置的帧。
　　（3）不管时间轴在哪个位置，一直移动到第一帧。
　　（4）表示时间指针的当前位置。
　　（5）表示每秒显示的帧数。默认值时15帧。增加帧数值，则动画播放的速度将加快。
　　（6）自动不放：选中该项，则网页文档中应用动画后自动运行。
　　（7）LOOP（循环）：选中该项，则继续反复时间轴上的动画。
　　（8）行为通道：在指定帧中选选择要运行的行为。
　　（9）关键帧：可以变化的帧。
　　（10）图层条：意味着插入了“层”等对象。
　　（11）图层通道：它是用于编辑图层的空间。
　　2、在DW8中显示时间轴
　　选择菜单栏的窗口/时间轴或按快捷键Alt＋F9，则显示时间轴。
　　四、创建时间轴动画
　　时间线只能移动分层对象，如果想移动文本或图像之类的对象，可以将其放在层中。
　　1、打开09.html文件，把光标放到页面左上方的位置，在插入面板选择布局&绘制层，创建六个层。分别输入文字“小”、“木”、“web”、“欢”、“迎”、“你”，将图层排列在适当的位置。
　　2、打开时间轴。选择层1后，拖动到时间轴的第一行上。
　　3、用同样的方法，把包含有其它文字的层也根据文字的顺序拖动到时间轴的第2－6行上。
　　4、为了减慢文字移动的速度，把时间轴中的15帧全部扩展为25帧。
　　5、在时间轴中选择Layer1的第一帧，在属性面板的顶端坐标值（T）中输入（－50），这样，可以把文字放置到上侧。
　　6、用同样的方法选择其余层的第一帧后，把顶端坐标值（T）统一设定为（－50）。
　　7、为了每个一段时间下落一个文字，从第二个动画条开始向后移动5帧。勾选“自动播放选项”。
　　8、按F12浏览效果。文章来自于【学习无忧网】http://www.51study.net/article/ViewArticle.asp?ArticleID=1634
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。拒绝访问 |
| 百度云加速
请打开cookies.
此网站 () 的管理员禁止了您的访问。原因是您的访问包含了非浏览器特征(3c16b-ua98).
重新安装浏览器，或使用别的浏览器}