DW图层高级应用经典分析.doc

DW图层高级应用经典分析.txt如果青春的时光在闲散中度过，那么回忆岁月将是一场凄凉的悲剧。杂草多的地方庄稼少，空话多的地方智慧少。即使路上没有花朵，我仍可以欣赏荒芜。1 DW图层高级应用经典分析 在网页设计中，用来定位内容的元素大抵包括表格和图层两种，其中表格大家一定经常看到了，并且在网页的整体布局中它的使用应该是最广的，比较起来图层则更具灵活性，操作起来更方便，比如图层除了象表格一样可以设定背景，位置外，还可以自由移动，响应事件，控制显示等，因此在局部处理中图层的作用是不容小觑的，熟练使用他们以后，一定能给你的网页增色不少。下面是一些经典应用。特写出来与大家共同分享。 一、利用图层隐藏不可见内容 作网页时，可能经常需要一些元素或是内容在网页载入时，或是始终不显示出来，这时应用图层来处理应该是最明智的选择了，点击对象（Object）面板中的图层layer按钮插入新图层到指定的位置，此时鼠标会自动变成+形状,拖拽完成即可.然后将隐藏的内容放到图层中,需要隐藏时,在图层边角位置单击以选中它,调整相应的属性板上Vis为Hidden,现在该图层已经看不到了,并且在原来位置上已经不能通过鼠标探测到了,重新定义必须点击网页最上方的对应黄色方块才能使它显示出来. 图层隐藏比较典型的应用就是计数器作弊了,对一些访问量比较小的个人网站来说,确实是受益匪浅,当然本人并不提倡大家使用这种方法. 二、路径移动图层的制作 路径移动图层即在网页中按照指定路径（可以是任意的曲直线类型）移动的图层对象，现在比较多的用于网页广告显示，在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上代表桢的空心或实心圆圈即可. 通过上面的例子,你已经能够建立合适的移动图层了,不过考虑到实际情况,图层在移动中可能会挡住访问者想要浏览的内容,这时利用前面讲的可拖拉图层的创建就可以很好的解决这一弊端了,另外你还可以为图层添加更多的鼠标事件. 三、制作复杂下拉菜单 在网页中使用下拉菜单可以极大的节省网页空间，并能够使内容的分类显示更具条理性，下面以一个典型下拉菜单的制作过程为例说明一下，其中需要注意的是这里的事件激活对象不再是图层，而是相应的超级链接文字，当然你还可以根据实际需要换成图片或是其他的对象. 1,首先建立3个主菜单项目,分别赋予对应的链接指向,然后在每个链接下面放置一个图层对象,在图层中放入需要显示的子菜单内容,命名分别为caidan1,caidan2,caidan3,注意对应一定要整齐否则会影响以后的显示效果,关于具体的制作就不说了,完成后的效果如图. 2,因为菜单载入以后子菜单部分是完全隐藏的,所以将下面的3个子菜单图层均设为隐藏图层,这时下拉内容不可见,在例中我要起步链接上面鼠标双击以选中它,在behavior面板中点加号选Show-Hide Layers,在随后的窗口中设定caidan1图层为Show(显示),同时另外的两个图层caidan2,caidan3为Hide(隐藏) 这样才能保证只显示对应的子菜单.在behavior列表中点击3个动作事件的箭头按钮将默认的Onclick改为Onmouseover, 3,同样的方法设定另外两个链接,当然如果制作的是点击式的下拉菜单的话,上面的onlclick事件就不用更改了.F12查看浏览器中的显示效果. 四、静止浮动图层的效果 这里提到的静止并非图层不移动的意思,而是图层对象相对浏览器窗口的位置保持不变的效果,比如永远处在窗口的右上部分,当窗口内容跟随滚动条滑动时,他们会自动的飘到原来的位置上,好象浮在了网页上面一样.关于他们相信大家在各大网站上一定经常看到了. 1,在DW中并没有直接提供制作静止浮动层的工具,完成这些是通过相应的插件来实现的,所以你必须先下载stav插件,推荐地址:/download/dwplugbe/stav.zip,解压缩将里面的两个文件(其中包括图片文件Cross Browser Static Division.gif和网页文件Cross Browser Static Division.htm)都拷贝到DW安装目录ConfigurationObjectsCommon下. 2,重新启动DW,在Object(对象)面板中,你会看到最底部已经多了SI项,选中它在弹出的窗口中设定浮动层到上边和左边的距离,然后在图层中插入指定的内容(多为广告或宣传图片)以替换默认值.这时一个简单的浮动层就完成了. 3,需要调整图层在网页中的位置时,可以先选中它,然后在Properties(属性)板中更改L(左边),T(上边)值. 通过上面几个图层应用的制作分析,希望大家对DW图层的使用有一个更深的了解. 在DW中使层相对于居中的页面定位 实现层相对定位的关键是： 一、先赋予参照物（可以是 table,tr,td. ）一个 CSS 的属性 position:relative 。这样浏览器就会以它的左上角为原点，建立新的坐标系。 二、在参照物的下一级加入层，并赋予层绝对定位的 CSS 属性 positio