第六章层和时间轴6.1使用层“层”在Dreamweaver中是一个应用很广泛的对象,在网页中插入层,可以方便地确定该层中文本、图像等对象的位置。第六章层和时间轴6.1.1层的作用利用层也可以实现网页中的图文混排,由于各层的位置可以任意移动,所以层中的网页对象也可以出现在网页的任意位置。可以这样理解层在网页中的作用:层就象是挂在墙壁上的油画,参观者看到的是墙壁和油画的整体,而挂画时画的位置并不受墙壁的制约,可以挂在墙壁的任意位置。第六章层和时间轴6.1.2使用层实现图文混排1使光标出现在编辑区中,移动鼠标指针到“插入”面板的“常用”选项卡中,单击描绘层按钮。在网页编辑区中拖动鼠标,画出一个区域,该区域即为插入层的大小。注意,每插入一个新层,在网页顶端就会增加一个层标记,第六章层和时间轴6.1.2使用层实现图文混排2重复上述操作,再次插入两个新层。这样在该单元格中共插入三个层,我们将图片移到在左上方的层中,文字移到右上方和下面的层中。单击该标记可以选中其所对应的层。单击层的外围框线,选中层。将鼠标指针移动到框线上,拖动鼠标,更改层的大小为图像大小。调整文字的字号和字体,以及层的位置,实现图文混排。第六章层和时间轴6.2层与时间轴配合使用动态效果利用时间轴,通过改变层的位置、大小、可见性、重叠顺序等可以在页面中创建出各种类型的动态效果,所以说灵活使用时间轴和层对于制作动态网页非常重要。第六章层和时间轴6.2.1时间轴时间轴在网页制作过程中主要用于动态效果的实现,它在网页中所获得的效果就是利用DHTML语言来实现的。DHTML语言,也就是动态的HTML,是一种能够使用脚本语言来改变样式或位置的语言。通过DHTML来改变层的属性,或是通过时间轴各帧上的一系列图像可以实现动态的效果。第六章层和时间轴6.2.2实现文字跑马灯效果1单击描绘层按钮。在网页编辑区中拖动鼠标,画出一个区域。在该层中单击鼠标,出现光标后输入要滚动的文字。设置字体、字号、颜色、风格等。单击菜单栏上的“窗口”,移动鼠标指针到下拉菜单的“其它”上,最后单击下一级菜单中的“时间轴”命令。这时在编辑窗口下部出现“时间轴”面板。第六章层和时间轴6.2.2实现文字跑马灯效果2选中有滚动文本的层,拖动该层到时间轴上第一行的最左端,在该行上出现一个紫色的长条,并写有“Layer1”字样表明是第一层。松开鼠标后,Dreamweaver弹出一个警告框,告诉制作者关于时间轴检查器的信息,在弹出的警告框中单击“确定”,关闭该对话框。长条中每一个格称为一帧。动画是由一帧帧静止的图片组成,其中重要的是关键帧,它决定了动画的走向。一般情况下,动画有15帧画面组成,如果感觉动画的速度过快,可以拉大关键帧之间的距离,这样可以使动画变慢些。第六章层和时间轴6.2.2实现文字跑马灯效果3将鼠标指针移动到第15帧上,拖动鼠标,将第15帧,即最后一帧关键帧拖动到第30帧处。即将动画长度由15帧变成30帧,这样文字的滚动速度会变慢。单击第一帧,使该帧变成红色。拖动有滚动文本的层到网页的最右侧,即确定第一帧的位置,单击最后一帧,使该帧变成红色。拖动有滚动文本的层到网页的最左侧,即确定最后一帧的位置。可以发现有一条直线从网页右侧指到网页左侧。第六章层和时间轴6.2.2实现文字跑马灯效果4在时间轴浮动面板中选中“自动播放”和“循环”,弹出对话框时,单击“确定”。保存网页后,预览该网页,可以看到跑马灯效果。第六章层和时间轴6.2.3实现幻灯片效果1我们制作幻灯片效果的思路是:创建三个图层,三个图层应该大小一致,并且与插入的图片大小相同,利用时间轴来隐藏图层,实现最终效果。三个图层的坐标必须一致,这样可以避免图片的跳动,所以,我们在制作时仅仅插入一个图层,然后用复制图层的方法,实现另外两个图层的插入。单击“插入”菜单,在其下拉菜单中选择“层”命令,插入图像,并调整层的大小恰好为图像的大小,将鼠标指针移动到层标记上,单击鼠标右键,在快捷菜单中选择“拷贝”命令,单击“编辑”菜单,在弹出的菜单中选择“粘贴”命令,复制一个相同大小的层。第六章层和时间轴6.2.3实现幻灯片效果2重复上一步的操...