主题:  控成网页

xidi1

职务:普通成员
等级:1
金币:0.0
发贴:3
注册:2011/10/31 10:22:55
#12011/10/31 10:57:09
Dreamweaver的初学者常常被页面中捉摸不定的元素搞得很困惑:在编辑器里明明好好的,在浏览时就变了样;最大化窗口时一切正常,缩小时页面又变得一团糟;用常规的表格(table)来实现排版吧,发现此表格不比Word里的表格,并非完全的“所见即所得”。这是因为用表格排版有两大局限性:首先,它不能精确控制对象间的相对位置;另一方面,网页中有不规则透明图片与文字犬牙交错混排时,就只能靠切割图片生成不规则表格来处理,极难控制。我想很多初学者都有被表格折磨得半死的经历。但这一切在应用了层技术后有了答案。通过利用Dreamweaver创造性的、精确创建的层(layer),可准确地控制页面中的任何对象。在层的控制下,制作网页就像是搭积木,且简单、准确、高效。

其中的Z-Index的概念很重要,不同层之间的前后关系,全靠该数值来确定。此时的层就象Photoshop的图层一样,上面的层可遮住下面的层。
层还有“父-子”的关系,即层之间的嵌套技术。即层里面可插入多个“子层”,“子层”里面又可插入“子层”...... 在通常情况下,在页面的某个(如一个表格单元或某个“父层”)光标位置插入层,总有些操作上的问题:插入的层总要跑到想要查插入的位置之外。这个问题Dreamweaver3的一个小BUG带来的。解决的一个办法是直接用鼠标把要插入层的标志 拖动至期望的光标位置即可。
层的可见性属性中,继承(Inherit)属性是一个较难理解的概念。但只有在某“父层”中的某“子层”被设为Inherit属性才会有效,此时,“子层”将继承“父层”的可见性。假如属性为隐藏(Hidden)的“父层”中插入的“子层”,无论它的Z-Index的数值设为多大,只要其可见性设置继承(Inherit),那该层将总不会被显示。
上述的关于层的嵌套关系、层的名称、层的可见性以及Z-Index的数值等,均可用F11打开层选项板(Layer Palette)来方便调节。如图。

层选项板的结构类似资源管理器,层的“子父”关系,可用鼠标直接拖动。层选项板实质就是“层管理器”,在编辑大量应用层的页面时,打开它是必须的。
层的一个重要特征之一就是绝对定位。层中的对象能实现纹丝不动。这在大多数时候正是我们所需要的。但有时我们需要用户在浏览器的窗口大小变化时,某些内容始终可见(如要求始终居中),在纯粹应用层的页面里,这是较难办到的。一个比较好的解决办法,就是在html中加入下列代码,限制窗口的大小的,确保页面能全部显示,并且窗口大小不会被用户改变。其中x,y为窗口的长和宽。

利用层,并结合时间线(Timeline)还可创造动态网页(DHTML),在页面上直接生成动画。可以说,在Dreamweaver中,层是创建动态网页的基础。用Dreamweaver创建的动画不会显著增加Web页面的大小,并且完全是交互的。虽然其效果不能与JAVA、FLASH或Director创建的动画片相比,但简单有效,不失为一种窄带网上的交互式动画页面的方法。但注意不要让大面积的层产生运动,这种运动很消耗本地资源,在配置较底的电脑上会产生类似“丢帧”的停顿现象,显得极不流畅。
层的绝对定位能力是我们使用它的主要原因,我们选择它的另一个动机还在于:http://www.gyxdsb.com/层的所有属性都可动态的、交互式的改变。最关键的是,所有这些改变,都不需令人望而生畏的javascript编程,只需应用Dreamweaver内建的Behavior即可完成。甚至一个非程序员,就可利用“Drag
layer”的Behavior作出一个基于页面的拼图游戏,或者一个类似“购物篮”功能的小东东。
利用层的“Show-Hide Layers”这一Behavior,我们可轻松的创造动态的下拉子菜单。思路就是:先把每个主菜单和各个子菜单分别放在不同的层里面,并把子菜单所在的层的可见性设为隐藏(Hidden),在各个主菜单所在的层设置下列行为(Behavior):当鼠标滑过(onMoveOver)时,把相应(要显示的)子菜单所在层的可见性设置为可见(Visible);当鼠标离开(onMoveOut)时,把相应子菜单所在层的可见性设置为隐藏(Hidden)。
当Web页面容量越来越大时,在网络上的传输时间会加长,其中的元素会一点点地显示。但浏览者往往希望能一次看到一个完整的页面。另一种情况,我们有时希望在页面下载完毕后,才响应用户的请求。此时,都需要一个Loaging页面。用层的可见性变化和相应的Behavior可轻易实现页面的Loading效果。其思路很简单:首先把页面上的所有内容放到层中(假设这些层称为“内容层”),并把其可见性设为Hidden;再创建一个“Loading层”(里面可插入“Loading...”或其它文字、图片等),把其可见性设为Normal。最后选择“body”标签,为onLoad事件加上Behavior(即页面onLoad时,让所有的“内容层”显示,同时让“Loading层”隐藏)即可。
使用层时,我们要牢记,层里可插入任何一个页面上可插入的对象,即任何一个元素都可用层来精确控制。层中的任何元素也同时可受CSS的控制。
层还可方便的转换为表格,这要求层不能被重叠。这重转换的唯一目的,是为了兼容老版本的浏览器。在现在的浏览器中,都提供了对层的全面支持,这种转换已没有意义。
层在网页中的显示过程中,页面内容是一层一层的载入,并且越上面的层越先显示。掌握了这一点,就可随意的控制网页元素的显示顺序,是不是很爽!当页面中有复杂图文混排时,可把图片和文字分别放在不同的层中,然后随意调整其相对位置;也可在图片上放上图片。
联系到笔者学电子时的“程控技术”,在Dreamweaver中采用层技术,一切尽在掌握中,是不是也有点“层控网页”的味道呢?