《图层与时间线》PPT课件.ppt

上传人:牧羊曲112 文档编号:5580830 上传时间:2023-07-30 格式:PPT 页数:22 大小:219KB
返回 下载 相关 举报
《图层与时间线》PPT课件.ppt_第1页
第1页 / 共22页
《图层与时间线》PPT课件.ppt_第2页
第2页 / 共22页
《图层与时间线》PPT课件.ppt_第3页
第3页 / 共22页
《图层与时间线》PPT课件.ppt_第4页
第4页 / 共22页
《图层与时间线》PPT课件.ppt_第5页
第5页 / 共22页
点击查看更多>>
资源描述

《《图层与时间线》PPT课件.ppt》由会员分享,可在线阅读,更多相关《《图层与时间线》PPT课件.ppt(22页珍藏版)》请在三一办公上搜索。

1、,第十章,DW中的层与时间线,图层创建图层 图层应用 用图层建构网页 图层总结 时间线时间线基础时间线实例时间线总结,创建图层:Insert/Layer 命令可以创建一个图层,网页编辑区域会出现一个灰色矩形块,它就是插入的图层。将鼠标移到矩形边框时会变成十字箭头,这时再单击鼠标就能选中该图层。如图,图层的属性面板(Window/Properties)如图Layer ID:图层的名称,不要用中文。L 与 T:图层左边界/上边界距离浏览器窗口左边界/上边界的距离,它决定了图层在网页中的显示位置,应该加以重视。W 与 H:图层的宽度与高度,输入数值可以精确控制其大小,如果不需很精确,也可以用鼠标拖动

2、图层边框改变其大小。,Z-Index:图层顺序号。前面我们说过,图层的一大功能在于多个图层的重叠,为了确定哪个图层在最上面,哪个图层在下面,就得给图层添加一个顺序。默认情况为,数值大的图层在上面。如图,提示:图层顺序可以不按 Z-Index 顺序进行显示,要改变其顺序,得通过图层面板(Window/Layer)来进行,操作方法很简单,只需在图层面板上点住要改变顺序的图层不放,然后将其拖上或拖下就行了。如图但是,我们强烈建议,图层顺序最好遵循 Z-Index 规律,它对于网页文件的可读性是非常重要的。,提示:图层面板上有个 Prevent Overlaps(图四中勾选出来的参数),这个选项旨在避

3、免图层重叠,常常用在将图层转换成表格的操作过程中,同时,对于精确的网页定位,也是很有帮助的。BG Image与 BG Color:图层的背景图片与背景色。VIS:共有三个重要的属性可供选择,Inherit(继承),本属性主要用于图层的嵌套,子图层可以继承父图层,当父图层发生位移,或者可见性发生改变等等情况时,子图层也跟着发生同样的变化;Visible(可见),将图层设为可见;Hidden(隐藏),将图层隐藏起来。,提示:图层 VIS 中的三个属性在制作网页特效时常常是非常重要的,最简单的例子就是,当鼠标移到某个对象上,则显示出另外的信息,这个另外的信息只不过是放在一个隐藏的层中,接到指定的触发

4、事件(鼠标移到对象上)后,图层的隐藏属性变为可见(Visible)就显示出来了。,Tag:图层中 HTML 源代码中的标记形式,有 Span/DIV/Layer/ILayer 四种,建议采用默认设置的 DIV,因为这种标记可以同时被两种主流浏览器即 IE 与 Netscape 所识别。Overflow:图层内容超过图层大小时的显示方式,共有四种参数。Visible:通过扩大图层大小将所有内容全部显示出来。Hidden:超过图层大小的内容隐藏,也就是说图层中只显示一部分内容。Scroll:不管内容是否超过图层的区域大小,图层右部与下部都会有卷栏条出现。如图,Auto:如果内容超过图层的区域才会出

5、现卷动条。Clip:本参数比较特别,用来控制某个图层中哪个区域内的内容是可见的,超过这个区域的同图层内容则不可见。区域由L(Left)、T(Top)、R(Right)、B(Bottom)指定。,图层应用:图层的应用非常广泛,从网页特效,到网页定位,都具有强大的功能。下面我们举一个非常简单的例子,如图它是一幅图像吗?非也,只不过是两个图层的简单运用,由于不是图片,所以它的显示速度远远超过图片的显示速度。制作步骤是:,1.建立一个图层,并在里面输入 SCHOOL 字样,字体为默认的黑色。如图2.再建一个图层,用同样的字型,大小输入 SCHOOL 字样,字体颜色改为红色。3.选中后面建立的图层,你会

6、发现其左上角有个矩形框,点中它后将图层向右向下移动到合适位置,最后就做成了。,用图层制作互动学校首页:前面我们已经学会用表格、框架制作互动学校首页,现在我们用图层来制作。1.还是先进行网页分析:将原网页信息分为四个区,如图,2.根据这四个区,我们来绘制四个图层,如图为了最大限度地与原网页相似,这里最好勾选图层面板上的 Prevent Overlaps 选项;同时,图层大小最好与原文件每个分区的大小一致。3.在每个图层中输入相应的栏目内容就完成了首页的制作。,总结:对于图层的讲解,我们是很浮浅与片面的,因为这方面的应用太多了,而且要深入地掌握它,更非一日之寒。图层可以转换成表格,其命令是 Mod

7、ify/Convert/Layers to Table,但需要注意的是,创建图层时一定要勾选 Prevent Overlaps,不然可能会因为图层的重叠而不能转换成表格。,等时线基础:等时线面板如图:等时线选择框,如果你在网页中使用了多个等时线,就可以在选择框进行等时线的选择,并可在动画中进行等时线的自动切换。,:返回第一帧。:前进一帧。:当前帧序号。FPS:动画的播放速度,即每秒播放多少帧的意思。Autoplay:自动播放,也就是网页打开后动画自动播放。Loop:循环,也就是动画播放完毕后又重新开始播放。横向标尺状数字:帧序号,可以方便地知道目前处于哪一帧(红色块状)。,等时线示例:最终效果

8、如图其中,欢迎光临本站几个字会从左上角自动向中下方移动,然后又自动向右上角移动。,制作步骤:1.本例仍套用了 16.htm 网页,只是添加了一个等时线动画而已,所以先用 Dreamweaver 打开 16.htm,然后另存为新文件。2.用 Insert/Layer 命令,在编辑区域的左上角建立一个新图层,并在图层中输入欢迎光临本站字样,字取红色。如图,提示:前面我们说过,Timeline 犹如一个舞台,既然是舞台就得有不同的剧情,而每一个不同的剧情,我们都可以将其作为一个单独的图层看待;而且,还有一个值得注意的问题,那就是 Timeline 常常与图层操作紧密相连,缺一不可。所以提到 Time

9、line,大部分情况下,你就得想到图层!3.选定本图层,用 Window/Timelines 命令打开等时线面板,然后用鼠标拖动图层左上角的矩形到等时线的第一帧处,等时线面板会变成如图样子:,同时还会弹出如图的面板,告诉你:可以改变该层的大小,位置,层顺序,以及可见性。点按 OK 就行了。用鼠标点一下第十五帧(即选中第十五帧),如图,将第十五帧拖到第三十帧,如图提示:为什么要将第十五帧拖到第三十帧?这是因为所有动画如果在十五帧内完成显得太仓促了,而三十帧作为整个动画的长度,在本例中比较合适。,再选择第十五帧,点击鼠标右键,从弹出菜单中选择“Add Keyframes”(添加关键帧),如图结果如图,请注意看图中多出的关键帧标示:,将图层移到中下部你想放置的位置,如图选择第三十帧,然后将图层移到右上部,如图点选 Autoplay,最后存盘并浏览。,

展开阅读全文
相关资源
猜你喜欢
相关搜索

当前位置:首页 > 生活休闲 > 在线阅读


备案号:宁ICP备20000045号-2

经营许可证:宁B2-20210002

宁公网安备 64010402000987号