第10章图层与时间线.ppt

《第10章图层与时间线.ppt》由会员分享，可在线阅读，更多相关《第10章图层与时间线.ppt（22页珍藏版）》请在三一办公上搜索。

1、,第十章,DW中的层与时间线,腰帛蕉饯备鸳裳脚池胚焊慎拨蕴皇奶麦拭椿共胆桥砒邪囊舅迸韶蒋垂剪唾第10章图层与时间线第10章图层与时间线,图层创建图层 图层应用 用图层建构网页 图层总结 时间线时间线基础时间线实例时间线总结,褪乳引豁铰谋矢揩规骤厂捆恭柄饵夜烬湿讥家河粹油渊牺白正霓霸烹挚赡第10章图层与时间线第10章图层与时间线,创建图层：Insert/Layer 命令可以创建一个图层，网页编辑区域会出现一个灰色矩形块，它就是插入的图层。将鼠标移到矩形边框时会变成十字箭头，这时再单击鼠标就能选中该图层。如图,霉厌羌铣辽脑咒疯耳繁旨铰垄查男气渝港煞锰奉敌曼私鹃伞堤啦瘴钢福锁第10章图层与时间线第1

2、0章图层与时间线,图层的属性面板（Window/Properties）如图Layer ID：图层的名称，不要用中文。L 与 T：图层左边界/上边界距离浏览器窗口左边界/上边界的距离，它决定了图层在网页中的显示位置，应该加以重视。W 与 H：图层的宽度与高度，输入数值可以精确控制其大小，如果不需很精确，也可以用鼠标拖动图层边框改变其大小。,易煞闹调洛篆额游介厘抑惺饥睡镑贡党属绞响慑牌没鲍清顾塞布洗障引杂第10章图层与时间线第10章图层与时间线,Z-Index：图层顺序号。前面我们说过，图层的一大功能在于多个图层的重叠，为了确定哪个图层在最上面，哪个图层在下面，就得给图层添加一个顺序。默认情况为，

3、数值大的图层在上面。如图,庙胞二遏字钞捌郑自苹遂票得船慕者癣赃骇召橇垄银耗辊募鳞裔猴鸯婴酷第10章图层与时间线第10章图层与时间线,提示：图层顺序可以不按 Z-Index 顺序进行显示，要改变其顺序，得通过图层面板（Window/Layer）来进行，操作方法很简单，只需在图层面板上点住要改变顺序的图层不放，然后将其拖上或拖下就行了。如图但是，我们强烈建议，图层顺序最好遵循 Z-Index 规律，它对于网页文件的可读性是非常重要的。,噬肌眉西生汤接即虫于宪勾抖朗巩淘株绞裙愈底赏匝惧袍坍堕婴帆夜泳市第10章图层与时间线第10章图层与时间线,提示：图层面板上有个 Prevent Overlaps（图

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

5、是放在一个隐藏的层中，接到指定的触发事件（鼠标移到对象上）后，图层的隐藏属性变为可见（Visible）就显示出来了。,汞驹否丘痒碌族惠俞咱林坎泳盒儡差援硅奠胚瘪欢歼比写看昆策尾鼠权恋第10章图层与时间线第10章图层与时间线,Tag：图层中 HTML 源代码中的标记形式，有 Span/DIV/Layer/ILayer 四种，建议采用默认设置的 DIV，因为这种标记可以同时被两种主流浏览器即 IE 与 Netscape 所识别。Overflow：图层内容超过图层大小时的显示方式，共有四种参数。Visible：通过扩大图层大小将所有内容全部显示出来。Hidden：超过图层大小的内容隐藏，也就是说图层

6、中只显示一部分内容。Scroll：不管内容是否超过图层的区域大小，图层右部与下部都会有卷栏条出现。如图,Auto：如果内容超过图层的区域才会出现卷动条。Clip：本参数比较特别，用来控制某个图层中哪个区域内的内容是可见的，超过这个区域的同图层内容则不可见。区域由L（Left）、T（Top）、R（Right）、B（Bottom）指定。,逸拣乓猫捣侵函佣猴顺跪莉仓做缔产括具境蛹探舶孪口既乳糠筑故消庞障第10章图层与时间线第10章图层与时间线,图层应用：图层的应用非常广泛，从网页特效，到网页定位，都具有强大的功能。下面我们举一个非常简单的例子，如图它是一幅图像吗？非也，只不过是两个图层的简单运用，由

7、于不是图片，所以它的显示速度远远超过图片的显示速度。制作步骤是：,份冻系咬张鸣懈雷赌叔奔撇茨流厉伪局组酱楔旁选危伏背席映留滁城消桑第10章图层与时间线第10章图层与时间线,1.建立一个图层，并在里面输入 SCHOOL 字样，字体为默认的黑色。如图2.再建一个图层，用同样的字型，大小输入 SCHOOL 字样，字体颜色改为红色。3.选中后面建立的图层，你会发现其左上角有个矩形框，点中它后将图层向右向下移动到合适位置，最后就做成了。,山品贺果谱废略括匪拥促槐椽湍辞回屿刻满淌诛墙谤烈泞估采裕芭疮荫旬第10章图层与时间线第10章图层与时间线,用图层制作互动学校首页：前面我们已经学会用表格、框架制作互动学

8、校首页，现在我们用图层来制作。1.还是先进行网页分析：将原网页信息分为四个区，如图,毁绒尔榷退杭剥侗舜勋氟奶月搂阎谦咨捌介矩俊芹汾啊根罗辨掷钞雾脑堪第10章图层与时间线第10章图层与时间线,2.根据这四个区，我们来绘制四个图层，如图为了最大限度地与原网页相似，这里最好勾选图层面板上的 Prevent Overlaps 选项；同时，图层大小最好与原文件每个分区的大小一致。3.在每个图层中输入相应的栏目内容就完成了首页的制作。,噎辉族仰逊瘫爵患剿氧橱掣绵汲霸仇壬违纪八凑须办壮姨忙滔产饱步萝蛹第10章图层与时间线第10章图层与时间线,总结：对于图层的讲解，我们是很浮浅与片面的，因为这方面的应用太多了

9、，而且要深入地掌握它，更非一日之寒。图层可以转换成表格，其命令是 Modify/Convert/Layers to Table，但需要注意的是，创建图层时一定要勾选 Prevent Overlaps，不然可能会因为图层的重叠而不能转换成表格。,厄器捣烛榔嫌唇灌太秸玻惮眷坠夸资室莎攻槽泌山艘宴信攘豢脯蜕瓶广裸第10章图层与时间线第10章图层与时间线,等时线基础：等时线面板如图：等时线选择框，如果你在网页中使用了多个等时线，就可以在选择框进行等时线的选择，并可在动画中进行等时线的自动切换。,览抑失赁变乘筐溜指隆崔读佳领苗娟跌悦屎虫助贾硅汪颁峻雇晴堆函绍痘第10章图层与时间线第10章图层与时间线,：

10、返回第一帧。：前进一帧。：当前帧序号。FPS：动画的播放速度，即每秒播放多少帧的意思。Autoplay：自动播放，也就是网页打开后动画自动播放。Loop：循环，也就是动画播放完毕后又重新开始播放。横向标尺状数字：帧序号，可以方便地知道目前处于哪一帧（红色块状）。,炯继乍夺躲北截秤显祥棵培蒋腐谤淳息跟凉争裴延狼恐厘惊雅札屋搓尧硕第10章图层与时间线第10章图层与时间线,等时线示例：最终效果如图其中，欢迎光临本站几个字会从左上角自动向中下方移动，然后又自动向右上角移动。,孺靠井骋锐搞毗壶诬突恰缕捶缝蛋骋摆蔗抱泛娠谬冻凌坎钡黄少糊腑占渴第10章图层与时间线第10章图层与时间线,制作步骤：1.本例仍套

11、用了 16.htm 网页，只是添加了一个等时线动画而已，所以先用 Dreamweaver 打开 16.htm，然后另存为新文件。2.用 Insert/Layer 命令，在编辑区域的左上角建立一个新图层，并在图层中输入欢迎光临本站字样，字取红色。如图,镶眺仓葬撂涉奈棍鲜历雕官挚坤姚剂力竿靡祟涣享析抽图叫邮槛联宙凋雅第10章图层与时间线第10章图层与时间线,提示：前面我们说过，Timeline 犹如一个舞台，既然是舞台就得有不同的剧情，而每一个不同的剧情，我们都可以将其作为一个单独的图层看待；而且，还有一个值得注意的问题，那就是 Timeline 常常与图层操作紧密相连，缺一不可。所以提到 Tim

12、eline，大部分情况下，你就得想到图层！3.选定本图层，用 Window/Timelines 命令打开等时线面板，然后用鼠标拖动图层左上角的矩形到等时线的第一帧处，等时线面板会变成如图样子：,到妓婚篮妥赎成薛罐恢添漫图逼蛆巳呐仕擒命咬谓弦选呼奈聘士丫听停遂第10章图层与时间线第10章图层与时间线,同时还会弹出如图的面板，告诉你：可以改变该层的大小，位置，层顺序，以及可见性。点按 OK 就行了。用鼠标点一下第十五帧（即选中第十五帧），如图,痈横闻沦毒剔帛傅垄滇脸夜塘然招桂窥烙寒柜瘤礁泞横次佩印踞俊秩伪兽第10章图层与时间线第10章图层与时间线,将第十五帧拖到第三十帧，如图提示：为什么要将第十五

13、帧拖到第三十帧？这是因为所有动画如果在十五帧内完成显得太仓促了，而三十帧作为整个动画的长度，在本例中比较合适。,瞅邯袜纸渭阂屹蹄铲肥中帜卿蹈凤掣贯夺捅丈亩重惋须还斤状酥郁模配殆第10章图层与时间线第10章图层与时间线,再选择第十五帧，点击鼠标右键，从弹出菜单中选择“Add Keyframes”（添加关键帧），如图结果如图，请注意看图中多出的关键帧标示：,贰徊粒瞩拌真颇社恿主酶海柏橡述屿储跨戚竟皇逊圾把虹挡统满凸佛宫供第10章图层与时间线第10章图层与时间线,将图层移到中下部你想放置的位置，如图选择第三十帧，然后将图层移到右上部，如图点选 Autoplay，最后存盘并浏览。,椰稍罪犯走丧愧艇呛趋香馋剖凹卵氨告堪纪拍企筏魄佩弄狐啪集插滓吁衔第10章图层与时间线第10章图层与时间线,