文档介绍：第10章层、行为和时间线
创建层
设置层属性
用层布局版面
行为概述
应用行为
Dreamweaver的内置行为
时间线
时间线行为
思考与练习
创建层
如果把一幅图画的不同部分画在不同的透明胶片上,然后把这些胶片叠放在一起,通过适当调整相对位置,又可以组合出一幅完整的画面,如果哪个部分画得不合适,可以单独将相应的那张胶片抽出来重画,每张胶片就是一个层。
层的基本概念
层(Layer)就是网页内容的容器,在层中可以放置文本、图像、表单、对象插件,甚至还可以放入其他层,可以这么说,所有可以放置于网页中的内容,都可以放置于层之中。
层最主要的特性是可以在网页内容之上(或之下)浮动。换句话说,可以在网页上任意改变层的位置,实现对层的精确定位,从而实现了对层中网页内容的精确定位。
层除了具有绝对定位的特性之外,还有一些其他的重要特性。例如,层可以重叠,因此可以在网页中实现文档内容的重叠效果;层可以被显示或隐藏,通过程序在网页中控制层的显示或隐藏,实现层内容的动态交替显示,实现一些特殊的显示效果。
在Dreamweaver中,可以创建两种形式的层: scape层。
CSS层是利用<Div>或<Span>标记构建的层,是W3C组织建议使用的层方式,scape层是使用<Layer>和</Layer>标记构建的层,是Netscape公司自行定义的层标准。大多数较新版本的浏览器, Explorer 和Netscape Navigator 都能够识别<Div>标记和<Span>标记,因此CSS层具有很好的兼容性,可以在大多数的浏览器中被正确浏览;scape Navigator 浏览器浏览。
默认状态下,Dreamweaver使用<Div>标记实现层,可以通过Edit|Preferences(参数)命令,在Preferences对话框的Layers(层)类中设置层使用的HTML标记。
如果浏览器的版本较低,则可能不能识别<Div>和<Span>标记,这时浏览器仍会显示分层中的文档内容,但是不能正确显示内容在文档中的定位和其他一些层特性。
下面的代码设置了一个层,它的名称是Layer1,距浏览器窗口左端217个像素,距离浏览器窗口上端120个像素,宽度为240个像素,高度为160个像素,其中带有“红楼梦”3 个字:
<div id=″Layer1″ style=″position:absolute; left:217px; top:120px; width:240px;
height:160px; z\|index:1″>红楼梦</div>
插入层
【】插入层
①单击普通对象面板上Draw Layer(绘制层)按钮();
②在文档窗口中,鼠标指针会变为十字形状,在希望放置分层的位置上按下鼠标左键并拖动,即可绘制希望大小的层,释放鼠标,层就被插入到当前位置()。
,“层”周围的方框表示层的范围,左上角的图标表示这是一个层。
提示:
执行Insert|Layer(层)命令,或将普通对象面板中的Draw Layer图标拖入文档窗口,可以插入默认大小的层;
按住Ctrl键,单击普通对象面板上的Draw Layer按钮,可以在文档窗口中连续绘制多个层(要一直按住Ctrl键);
插入层后可以用 Window|Layers命令打开Layers(层)浮动面板(),其中显示了文档窗口中插入层的名称、显示/隐藏性质、重叠次序,可以通过层浮动面板修改层的这些属性;