HTML和中文DreamweaverMX2004实用第5章.ppt

第5章 样式表与时间线 本章要点 5.1 重做“卡通青蛙”网页 5.2 再做“俏皮歇后语”网页 5.3 “霸道的文字”网页 5.4 再做“心情随笔”网页 5.5 “射门”网页 5.6 再做“射门”网页 5.7 “风景幻灯”网页 5.8 “浮动图像”网页 习题 5 5.1 重做“卡通青蛙”网页 5.1 重做“卡通青蛙”网页 5.1 重做“卡通青蛙”网页 5.1 重做“卡通青蛙”网页 5.1 重做“卡通青蛙”网页 5.1 重做“卡通青蛙”网页 5.1 重做“卡通青蛙”网页 5.2 再做“俏皮歇后语”网页 5.2 再做“俏皮歇后语”网页 5.2 再做“俏皮歇后语”网页 5.2 再做“俏皮歇后语”网页 5.2 再做“俏皮歇后语”网页 5.2 再做“俏皮歇后语”网页 5.3 “霸道的文字”网页 5.3 “霸道的文字”网页 5.3 “霸道的文字”网页 5.3 “霸道的文字”网页 5.3 “霸道的文字”网页 5.3 “霸道的文字”网页 5.4 再做“心情随笔”网页 5.4 再做“心情随笔”网页 5.4 再做“心情随笔”网页 5.4 再做“心情随笔”网页 5.4 再做“心情随笔”网页 5.4 再做“心情随笔”网页 5.4 再做“心情随笔”网页 5.5 “射门”网页 5.5 “射门”网页 5.5 “射门”网页 5.5 “射门”网页 5.5 “射门”网页 5.5 “射门”网页 5.5 “射门”网页 5.6 再做“射门”网页 5.6 再做“射门”网页 5.6 再做“射门”网页 5.6 再做“射门”网页 5.6 再做“射门”网页 5.7 “风景幻灯”网页 5.7 “风景幻灯”网页 5.7 “风景幻灯”网页 5.7 “风景幻灯”网页 5.8 “浮动图像”网页 5.8 “浮动图像”网页 5.8 “浮动图像”网页 5.8 “浮动图像”网页 5.8 “浮动图像”网页 5.8 “浮动图像”网页 2．通道 （1）行为通道：其左边标有字母“B”，可以在该通道的特定帧使用行为事件。 （2）行为帧：加入了行为事件的帧，它在“行为通道”内。 （3）时间标尺：给出了与时间对应的帧数。 （4）回放头：播放动画时，回放头在时间标尺上移动，好像放像机的磁头一样。用鼠标拖曳回放头在时间标尺上移动，当它移到某一时间单位处时，相应的动画画面会出现在文档窗口内。 （5）动画条：表示一个动画所占的帧数，上面标有该动画所在层的名称。它的起始处和终止处各有一个小圆，表示首帧和终止帧。如果设置了关键帧，则关键帧也会有一个小圆。 （6）动画通道：由许多图层组成，表示可以在一个页面内加入多个时间轴动画，但最多可以加32个，它的左边标有图层的编号。图层编号大的动画在图层编号小的动画之上。 5.5.2 制作直线移动动画 （1）在页面内插入一个层，给该层起一个名字，例如，Layer1。然后在层内插入一个图像或输入一些文字等。此处层中插入的是图像，如图5-5-4所示。图5-5-4 在层中插入图像并移到动画的起始位置 （2）将插有图像或文字的层移到动画的起始位置。 （3）调出“时间轴”面板。 （4）用鼠标将层拖曳到“时间轴”面板的动画通道内，或执行“修改”→“时间轴”→“增加对象到时间轴”菜单命令。这时，“时间轴”面板的动画通道内会出现一个动画条，如图5-5-5所示。如果选中了“循环”复选框，则在动画通道中，会同时出现一个“动作帧”。 图5-5-5 动画通道内出现一个动画条 （5）选中动画条的终止帧。默认的动画帧数是15帧，如果要调整动画的帧数，可用鼠标将动画条终止帧拖曳到希望结束的帧上面。在改变了终止帧的位置之后，如果要编辑行为，则应该双击动画通道中最后一帧的下一帧。 图5-5-4 在层中插入图像并移到动画的起始位置 图5-5-5 动画通道内出现一个动画条 （6）用鼠标拖曳动画层到目标处，当松开鼠标左键时，会看到一条直线，表示图像移动的路径，如图5-5-6所示。 图5-5-6 表示图像移动路径的一条直线 （7）按住“播放”按钮不放，即可在网页编辑窗口内看到动画了。 在上一节的“射门”网页中，足球是以直线运动射入球门。其实，更精彩的射门应该是沿曲线射出的“香蕉球”，在修改后的“射门”网页中，足球变为曲线向球门移动，直到移到球门内，效果如图5-6-1所示。 图5-6-1 再做的“射门”网页的显示效果 5.6.1 加入关键帧 “时间轴”面板可以在用户给出起始帧