第6章 层和时间轴.ppt

1、第六章 层和时间轴,6.1 使用层,“层”在Dreamweaver中是一个应用很广泛的对象，在网页中插入层，可以方便地确定该层中文本、图像等对象的位置。,6.1.1 层的作用,利用层也可以实现网页中的图文混排，由于各层的位置可以任意移动，所以层中的网页对象也可以出现在网页的任意位置。,可以这样理解层在网页中的作用：层就象是挂在墙壁上的油画，参观者看到的是墙壁和油画的整体，而挂画时画的位置并不受墙壁的制约，可以挂在墙壁的任意位置。,6.1.2 如何加入一个新层,光标定位在网页中,选择“插入”菜单中的“布局”中的“层”对象 在新增加的层中单击鼠标，出现光标后，单击“插入”面板 “常用”选项卡中的“

2、插入图像”按钮。在“选择图像源”对话框中，找到存放图片的文件夹，选中要插入的图像文件，单击，拖动鼠标指针，更改层的大小，使它与图像大小一致。,6.1.3 层的属性,1、层的编号：指定一个名称来标识层面板中的层。 2、左（L）、上（L）：左边和顶边距：指定层相对于页面或父层左上角的位置（以像素为单位）。 3、宽（W）、高（H）：宽度和高度：指定层的宽度和高度。,6.1.3 层的属性,4、溢出：指定如果层的内容超过了它的大小将发生的事件： Visible（可见）： 增加层的大小，以便层的所有内容都可见。层向下和向右扩大。 Hidden（隐藏）：保持层的大小，并剪栽掉与层大小不符的任何内容，不显示滚

3、动条。 Scroll（滚动）：给层添加滚动条，不管内容是否超过了层的大小。特别是通过提供滚动条来避免在动态环境中显示和不显示滚动条导致的混乱。 Auto（自动）：在层的内容超过它的边界时自动显示滚动条。,6.2层与时间轴配合使用动态效果,利用时间轴，通过改变层的位置、大小、可见性、重叠顺序等可以在页面中创建出各种类型的动态效果，所以说灵活使用时间轴和层对于制作动态网页非常重要。,6.2.1时间轴,时间轴在网页制作过程中主要用于动态效果的实现，它在网页中所获得的效果就是利用DHTML语言来实现的。DHTML语言，也就是动态的HTML，是一种能够使用脚本语言来改变样式或位置的语言。通过DHTML来

4、改变层的属性，或是通过时间轴各帧上的一系列图像可以实现动态的效果。,6.2.2创建页面浮动广告1,页面浮动广告自动在网页上漂浮着，给网页平添一些活泼的气息。,单击描绘层按钮。在网页编辑区中拖动鼠标，画出一个区域，在新增加的层中 ，插入图像 ，,拖动鼠标指针，更改层的大小，使它与图像大小一致。,6.2.2创建页面浮动广告2,打开“时间轴”面板。选中层，单击菜单栏上的“修改”，移动鼠标指针到下拉菜单的“时间轴”上，最后单击下一级菜单中的“录制层路径”命令，选中层，按照希望的路径拖动鼠标，可以看到一条粗灰线。,将层拖动到合适的位置，松开鼠标，可以看见沿刚才拖动鼠标的路径出现一条细线。,6.2.2创建

5、页面浮动广告3,选中时间轴上的 “自动播放”和“循环” 。,保存网页后，按下F12键，在IE浏览器中预览该网页，可以看到图片在网页上按照事先画出的路径移动。,6.2.3 创建弹出浏览器窗口1,1、新建一个网页（一般是正规的网页,注意要保存在同一个路径下) 2、设置公告页（同普通网页完全一样），注意比普通网页的大小要小一点。,6.2.3 创建弹出浏览器窗口2,2、打开“行为面板（Shift+F3）”，单击“+（添加行为）”按钮，选择“打开浏览器窗口”，在弹出的对话框中选择相应的参数：要显示的URL:链接广告页 窗口的宽度、高度：窗口的大小 属性：窗口的外观 窗口的名称：对象名（非标题名） 3、单击“确定”按钮。 4、修改事件为“onclick”事件,本章的学习要点:,1、重点：图层的属性 2、难点：图层中的行为面板的应用,