《第6章 层和时间轴.ppt》由会员分享，可在线阅读，更多相关《第6章 层和时间轴.ppt（15页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、第六章第六章 层和时间轴层和时间轴第第六六章章 层层和和时时间间轴轴 6.1 使用层 “层”在Dreamweaver中是一个应用很广泛的对象，在网页中插入层，可以方便地确定该层中文本、图像等对象的位置。第第六六章章 层层和和时时间间轴轴 6.1.1 层的作用 利用层也可以实现网页中的图文混排，由于各层的位置可以任意移动，所以层中的网页对象也可以出现在网页的任意位置。可以这样理解层在网页中的作用：层就象是挂在墙壁上的油画，参观者看到的是墙壁和油画的整体，而挂画时画的位置并不受墙壁的制约，可以挂在墙壁的任意位置。第第六六章章 层层和和时时间间轴轴 6.1.2 如何加入一个新层光标定位在网页中,选择
2、“插入”菜单中的“布局”中的“层”对象在新增加的层中单击鼠标，出现光标后，单击“插入”面板“常用”选项卡中的“插入图像”按钮。在“选择图像源”对话框中，找到存放图片的文件夹，选中要插入的图像文件，单击，拖动鼠标指针，更改层的大小，使它与图像大小一致。第第六六章章 层层和和时时间间轴轴 6.1.3 层的属性1、层的编号：指定一个名称来标、层的编号：指定一个名称来标识层面板中的层。识层面板中的层。2、左（、左（L）、上（）、上（L）：左边和顶）：左边和顶边距：指定层相对于页面或父层边距：指定层相对于页面或父层左上角的位置（以像素为单位）。左上角的位置（以像素为单位）。3、宽（、宽（W）、高（）、高
3、（H）：宽度和）：宽度和高度：指定层的宽度和高度。高度：指定层的宽度和高度。第第六六章章 层层和和时时间间轴轴 6.1.3 层的属性4、溢出：指定如果层的内容超过了它的大小、溢出：指定如果层的内容超过了它的大小将发生的事件：将发生的事件：Visible（可见）：（可见）：增加层的大小，以便层的增加层的大小，以便层的所有内容都可见。层向下和向右扩大。所有内容都可见。层向下和向右扩大。Hidden（隐藏）：保持层的大小，并剪栽掉（隐藏）：保持层的大小，并剪栽掉与层大小不符的任何内容，不显示滚动条。与层大小不符的任何内容，不显示滚动条。Scroll（滚动）：给层添加滚动条，不管内容（滚动）：给层添加
4、滚动条，不管内容是否超过了层的大小。特别是通过提供滚动是否超过了层的大小。特别是通过提供滚动条来避免在动态环境中显示和不显示滚动条条来避免在动态环境中显示和不显示滚动条导致的混乱。导致的混乱。Auto（自动）：在层的内容超过它的边界时（自动）：在层的内容超过它的边界时自动显示滚动条。自动显示滚动条。第第六六章章 层层和和时时间间轴轴 6.2层与时间轴配合使用动态效果 利用时间轴，通过改变层的位置、大小、可见性、重叠顺序等可以在页面中创建出各种类型的动态效果，所以说灵活使用时间轴和层对于制作动态网页非常重要。第第六六章章 层层和和时时间间轴轴 6.2.1时间轴 时间轴在网页制作过程中主要用于动态
5、效果的实现，它在网页中所获得的效果就是利用DHTML语言来实现的。DHTML语言，也就是动态的HTML，是一种能够使用脚本语言来改变样式或位置的语言。通过DHTML来改变层的属性，或是通过时间轴各帧上的一系列图像可以实现动态的效果。第第六六章章 层层和和时时间间轴轴 6.2.2创建页面浮动广告1 页面浮动广告自动在网页上漂浮着，给网页平添一些活泼的气息。单击描绘层按钮。在网页编辑区中拖动鼠标，画出一个区域，在新增加的层中，插入图像，拖动鼠标指针，更改层的大小，使它与图像大小一致。第第六六章章 层层和和时时间间轴轴 6.2.2创建页面浮动广告2 打开“时间轴”面板。选中层，单击菜单栏上的“修改”
6、，移动鼠标指针到下拉菜单的“时间轴”上，最后单击下一级菜单中的“录制层路径”命令，选中层，按照希望的路径拖动鼠标，可以看到一条粗灰线。将层拖动到合适的位置，松开鼠标，可以看见沿刚才拖动鼠标的路径出现一条细线。第第六六章章 层层和和时时间间轴轴 6.2.2创建页面浮动广告3 选中时间轴上的“自动播放”和“循环”。保存网页后，按下F12键，在IE浏览器中预览该网页，可以看到图片在网页上按照事先画出的路径移动。第第六六章章 层层和和时时间间轴轴 6.2.3 创建弹出浏览器窗口11、新建一个网页（、新建一个网页（一般是正规的一般是正规的网页网页,注意要保存在同一个路径注意要保存在同一个路径下下)2、设
7、置公告页（同普通网页完全、设置公告页（同普通网页完全一样），注意比普通网页的大小一样），注意比普通网页的大小要小一点。要小一点。第第六六章章 层层和和时时间间轴轴 6.2.3 创建弹出浏览器窗口22、打开、打开“行为面板（行为面板（Shift+F3）”，单击单击“+（添加行为）（添加行为）”按钮，选择按钮，选择“打开浏览器窗口打开浏览器窗口”，在弹出的对话框，在弹出的对话框中选择相应的参数：要显示的中选择相应的参数：要显示的URL:链链接广告页接广告页窗口的宽度、高度：窗口的大小窗口的宽度、高度：窗口的大小属性：窗口的外观属性：窗口的外观窗口的名称：对象名（非标题名）窗口的名称：对象名（非标题名）3、单击、单击“确定确定”按钮。按钮。4、修改事件为、修改事件为“onclick”事件事件第第六六章章 层层和和时时间间轴轴 本章的学习要点:1、重点：、重点：图层的属性的属性 2、难点：点：图层中的行中的行为面板的面板的应用用第第六六章章 层层和和时时间间轴轴 上机实验:图层技术的应用1.为网页增加一个浮动广告,使广告出现一个曲线运动的效果.2.当点击广告时,出现“公告信息”浏览器窗口3.写出以上两个过程的操作步骤