第6章层和时间轴VIP专享VIP免费

第六章层和时间轴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重复上一步的操...