GOLIVE5.0教程（五十八）

来源： 作者： 出处：综艺读书 2006-01-10 

关 键 词：效果  图层  设计  html  golive  

5.3创建动画

　　在GoLive 5中应用浮动框(Floating　Boxes)即可创建动画。

浮动框与DreamWeaver 3/4中的图层非常相似，也是基于HTML　DIV元素而存在的，由于HTML 3.2与HTML 4.0增强了DIV元素的功能，因而使得GoLive 5能很好的应用它，并允许放置和堆栈接受背景图像或者背景颜色。又由于DIV是DHTML (Dynamic(动态) HTML)的核心元素，以及放置CSS的Major Building Blocks(主营造块)，所以使用浮动框能在Web页面上放置任何物件，并创建透明与动画和分层效果。在需要的时候，还能将它转换成文本框。从技术上来看，浮动框正是DIV元素的可视化表现，通常由CSS ID风格格式化，而ID 风格指定了其宽度，并控制可见性与绝对位置，GoLive 5也能为一个细节而建立标准的HTML代码。

　　GoLive 5的DHTML动画工具能创建全比例的动画，让Web页面得到最大化的可视效果，其突出的特点如下所列。

　　1.支持各种Web浏览器

　　目前，国内流行的Web浏览器都能很好的支持并显示浮动框，只是较早期的Web浏览器有些问题，但这不会影响在Web页面中设计与使用它。因为这种局面是不会持续多久的，Web浏览器与HTML的中任何一方稍稍提升一点点功能就能清除一切障碍。

　　2.分层是一个关键特征

　　实际上浮动框就是以层的形式重叠或者并排在Web页面中，控制重叠顺序的是名为(Z-索引)的属性。Z表示Z坐标系统，拥有较高Z-Index值的浮动框将显示在较低Z-Index值的浮动框前面。

　　3.轻易制作出动画效果

　　作为Web页面中的独立单元，一个浮动框能接受任何HTML元素，如图像或者简单格式化HTML文本。还可拥有与Web页面相同的背景图像与属性，并可在背景中表现不透明性与透明性。利用这个特性，可以在Web页面中创造出各种引人入神的动画效果。

　　GoLive 5允许在当前Web页面中的任何一个地方添加浮动框。一旦创建了浮动框，就能将所有可用的HTML元素应用于其中。包括文本、图像、标尺等都能自由地插入在浮动框。您可以基于放置在浮动框中的图像、文本，以及任何其它的物件来创建DHTML动画，所使用的主要工具包括TimeLine Editor、浮动框与Inspector，TimeLine Editor用于控制浮动框的移动位置，Inspector则控制移动的初始位置。例如，下面的操作就将应用文本与图像。

　　步骤一、从Objects面板中将Floating Box图标拖至图8中手势所指的地方?

图8将Floating Box图标拖至此处

　　结束拖动后，一个浮动框就将显示在指定的地方，GoLive 5 也将在该浮动框的左上方放置一个黄色的小图标，并标记为SB。这个图标在Web页面的设计与制作中很有用处，除了能标识该浮动框的存在外，还能在多个浮动框存在时，通过它选定当前要操作的那一个。

　　操作结束时，浮动框的Z-Index值为0，并显示在浮动框内的右下角处内。

　　步骤二、单击浮动框内部某处，让它显示为白色。此时，Z-Index值将变成1，当前插入点光标也将显示在浮动框内的左上角，并与边框线重叠在一起，接着就可以输入文本，或者插入图像了。 更多内容请看ASP.NET教程  FreeBSD使用教程专题，或进入讨论组讨论。

【收藏此文】【大 中 小】【打印】【关闭】

较早的文章：GOLIVE5.0教程（六十）

较新的文章：GOLIVE5.0教程（四十七）