荔园在线
荔园之美，在春之萌芽，在夏之绽放，在秋之收获，在冬之沉淀
[回到开始]
[上一篇][下一篇]
发信人: gary (Love＆Peace!), 信区: Homepage
标 题: DW图层高级应用经典分析
发信站: 荔园晨风BBS站 (Fri Apr 13 10:01:33 2001), 转信
http://www.chinabyte.com/builder/detail.shtm?buiid=978&parid=1&cate=YMGC
导读
在网页设计中，用来定位内容的元素大抵包括表格和图层两种，其中表格大
家一定经常看到了，并且在网页的整体布局中它的使用应该是最广的，比较起来图
层则更具灵活性，操作起来更方便，比如图层除了象表格一样可以设定背景，位置
外，还可以自由移动，响应事件，控制显示等，因此在局部处理中图层的作用是不
容小觑的，熟练使用他们以后，一定能给你的网页增色不少。下面是一些经典应用
。特写出来与大家共同分享。
作者: 笨笨熊
1>利用图层隐藏不可见内容
作网页时，可能经常需要一些元素或是内容在网页载入时，或是始终不显示
出来，这时应用图层来处理应该是最明智的选择了，点击对象（Object）面板中的
图层layer按钮插入新图层到指定的位置，此时鼠标会自动变成"+"形状,拖拽完成
即可.然后将隐藏的内容放到图层中,需要隐藏时,在图层边角位置单击以选中它,调
整相应的属性板上"Vis"为"Hidden",现在该图层已经看不到了,并且在原来位置上
已经不能通过鼠标探测到了,重新定义必须点击网页最上方的对应黄色方块才能使
它显示出来.
图层隐藏比较典型的应用就是"计数器作弊"了,对一些访问量比较小的个人网
站来说,确实是受益匪浅,当然本人并不提倡大家使用这种方法.
2>拖动图层的使用
浏览网页时,经常会看到一些类似的图片或文字,可以通过鼠标点击拖拉任意
改变位置,这种效果很大一部分都是通过"拖动图层"(Drag layer)来完成的,而拖动
图层的实现需要鼠标事件的响应,比如:onclick,onmouseover等,下面以插入一个图
片拖动图层为例.
1,建立新图层,在里面插入指定图片.
2,点击选中图层,同时进入动作浮动面板(直接按SHIFT+F3即可),选取"+"号列
表中的"Drag Layer"项,如果这时该选项不可使用的话,可以调整一下动作事件支持
的浏览器类型和版本,如IE4.0,弹出Drag Layer编辑窗口.
整个编辑窗口包括两个标签"基础Basic"和"高级Advanced"
在Basic标签下:
Layer:网页中使用的所有图层的选择列表,默认即当前操作图层.
Movement:移动选项,Unconstrained(不受限制)可以在网页中任何位置拖动,
constrained(受限制)控制目标图层的拖动范围,选中以后在菜单后面自动产生的
Up,Down,Left,Right输入框中键入定位数字.
Drag Target:拖动图层在网页中的位置,点击Get Current Position获取当前
位置.
snap if within:允许的最大误差.单位px.
在Advanced标签下:
Drag Handle:指定拖动图层的响应范围,即鼠标在哪些位置才能拖动图层,
Entire Layer表示任何位置都可拖动,Area Within Layer指定拖动范围,选中以后
在后面的定位输入框中键入,注意这时是相对图层而言的.
while dragging:多个拖动图层时使用,决定显示关系.
3>确定以后,拖动图层即完成了,默认使用的事件为 onclick 鼠标点击后才能
响应拖动，点击动作面板中该动作的事件选择下拉菜单，改为onmouseover，这时
不需要点击激活只要滑动到图层上就可以拖动了。
4>按F12预览拖动效果.
3>路径移动图层的制作
路径移动图层即在网页中按照指定路径（可以是任意的曲直线类型）移动的
图层对象，现在比较多的用于网页广告显示，在DW中移动路径的确定和调整是通过
配合时间轴（TimeLine）完成的。
1,点击Object中图层按钮，在路径的起点位置拖拉插入new layer，并在图层
中插入需要移动显示的内容，这里以一图片为例.
2,标定图层为选中状态,点击快速启动板中的TimeLine按钮,默认情况下在
DW4的启动板中可能找不到TimeLine对象,这时可以通过菜单"Window"-"TimeLine"
调出时间轴编辑窗口,右键点击时间轴第一桢(即红色镜头方块所在的位置),在弹出
菜单中选"Add Object",此时会自动产生15桢的移动长度,将镜头移到15桢的位置,
拖拽图层到路径的终点位置释放,这时一个简单的移动路径就完成了.
3,如果你注意的话,会发现上面的移动路径是一条两点间的直线,那么怎样建
立符合要求的平滑曲线路径呢?在TimeLine中改变路径形状是通过添加关键桢
(keyframe)实现的,在需要添加keyframe的位置右击选"Add Keyframe"选项,同时向
指定方向拖动图层对象,这时路径已经弯曲了.如果想建立更复杂的曲线路径可以加
入多个keyframe.
4,改变两点之间的frame的数目可以调整图层的移动速度,操作上只需拖拉
TimeLine上代表桢的"空心或实心圆圈"即可.
通过上面的例子,你已经能够建立合适的移动图层了,不过考虑到实际情况,图
层在移动中可能会挡住访问者想要浏览的内容,这时利用前面讲的"可拖拉图层"的
创建就可以很好的解决这一弊端了,另外你还可以为图层添加更多的鼠标事件.
4>对象辅助说明的制作
通过指定的鼠标响应事件(Oclick,Onmouseover等)获取网页目标对象的说明
性文字在网页制作中是很重要的,当然这里的目标内容和解释内容都可以放在图层
中来圈定.
1,建立两个新图层,分别命名为content和explain,在content图层中插入目标
对象(以图片为例),在explain图层中键入需要说明的文字,相应的位置可以根据需
要来确定,如图
2,在属性板(properties)中设定explain层显示状态为Hidden,即当网页载入
时不显示该层内容,然后选中目标对象所在的content层,点击快速启动板中的
behavior按钮(或按SHFIT+F3快捷键)进入动作面板,选择"+"号下面的"Show Hide
Layers"选项,在"图层显示隐藏"窗口中设定explain为可见(show),并更改动作面板
中的鼠标事件为onmouseover,同理建立onmouseout下该图层不可见(hide),动作面
板如图:
3,按F12在浏览器中可以看到当鼠标滑动到图片上方时说明文字显示,滑出以
后自动消失.效果如图
注意:需要调整说明文字的位置时,可以直接拖拉说明explain层来实现.
5>制作复杂下拉菜单
在网页中使用下拉菜单可以极大的节省网页空间，并能够使内容的分类显示
更具条理性，下面以一个典型下拉菜单的制作过程为例说明一下，其中需要注意的
是这里的事件激活对象不再是图层，而是相应的超级链接文字，当然你还可以根据
实际需要换成图片或是其他的对象.
1,首先建立3个主菜单项目,分别赋予对应的链接指向,然后在每个链接下面放
置一个图层对象,在图层中放入需要显示的子菜单内容,命名分别为caidan1,
caidan2,caidan3,注意对应一定要整齐否则会影响以后的显示效果,关于具体的制
作就不说了,完成后的效果如图.
2,因为菜单载入以后子菜单部分是完全隐藏的,所以将下面的3个子菜单图层
均设为隐藏图层,这时"下拉"内容不可见,在例中"我要起步"链接上面鼠标双击以选
中它,在behavior面板中点加号选"Show-Hide Layers",在随后的窗口中设定
caidan1图层为Show(显示),同时另外的两个图层caidan2,caidan3为Hide(隐藏)
这样才能保证只显示对应的子菜单.在behavior列表中点击3个动作事件的箭头按钮
将默认的Onclick改为Onmouseover,动作面板如图:
3,同样的方法设定另外两个链接,当然如果制作的是点击式的下拉菜单的话,
上面的onlclick事件就不用更改了.F12查看浏览器中的显示效果.
6>静止浮动图层的效果
这里提到的静止并非图层不移动的意思,而是图层对象相对浏览器窗口的位置
保持不变的效果,比如永远处在窗口的右上部分,当窗口内容跟随滚动条滑动时,他
们会自动的"飘"到原来的位置上,好象浮在了网页上面一样.关于他们相信大家在各
大网站上一定经常看到了.
1,在DW中并没有直接提供制作静止浮动层的工具,完成这些是通过相应的插件
来实现的,所以你必须先下载stav插件,推荐地址:http://www.51step.
com/download/dwplugbe/stav.zip,解压缩将里面的两个文件(其中包括图片文件
Cross Browser Static Division.gif和网页文件Cross Browser Static
Division.htm)都拷贝到DW安装目录ConfigurationObjectsCommon下.
2,重新启动DW,在Object(对象)面板中,你会看到最底部已经多了SI项,选中它
在弹出的窗口中设定浮动层到上边和左边的距离,然后在图层中插入指定的内容(多
为广告或宣传图片)以替换默认值.这时一个简单的浮动层就完成了.
3,需要调整图层在网页中的位置时,可以先选中它,然后在Properties(属性)
板中更改L(左边),T(上边)值.
通过上面6个图层应用的制作分析,希望大家对DW图层的使用有一个更深的了
解.
--
Ｉ Ｂelieve Ｉ Ｃan ...
_____________________________________________________
欢迎光临我的主页 Ｎｅｔｄｒｅａｍｓ!
Http://netdreams.yeah.net
※ 来源:·荔园晨风BBS站 bbs.szu.edu.cn·[FROM: 192.168.28.85]
[回到开始]
[上一篇][下一篇]
荔园在线首页 友情链接：深圳大学 深大招生 荔园晨风BBS S-Term软件 网络书店