网页设计-页面布局、层、行为和时间轴的使用.ppt

《网页设计-页面布局、层、行为和时间轴的使用.ppt》由会员分享，可在线阅读，更多相关《网页设计-页面布局、层、行为和时间轴的使用.ppt（34页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、江西师范大学网页设计课程组网页设计江西师范大学网页设计课程组6.1 6.1 版版版版 式式式式6.2 6.2 布布布布 局局局局6.3 6.3 利用层精确定位网页元素利用层精确定位网页元素利用层精确定位网页元素利用层精确定位网页元素6.4 6.4 时时时时 间间间间 轴轴轴轴 的的的的 应应应应 用用用用6.56.5 行行行行 为为为为第第第第6 6章章章章 页面布局、层、行为和时间轴的使用页面布局、层、行为和时间轴的使用页面布局、层、行为和时间轴的使用页面布局、层、行为和时间轴的使用江西师范大学网页设计课程组 网网网网页页页页布布布布局局局局是是是是网网网网页页页页设设设设计计计计的的的的一

2、一一一个个个个重重重重要要要要组组组组成成成成部部部部分分分分，在在在在布布布布局局局局模模模模式式式式中中中中使使使使用用用用表表表表格格格格和和和和布布布布局局局局单单单单元元元元格格格格可可可可以以以以对对对对网网网网页页页页进进进进行行行行排排排排版版版版，利利利利用用用用布布布布局局局局表表表表格格格格的的的的嵌嵌嵌嵌套套套套可可可可以以以以设设设设计计计计复复复复杂杂杂杂的的的的版版版版面面面面，除此之外还可以使用层来布局版面。除此之外还可以使用层来布局版面。除此之外还可以使用层来布局版面。除此之外还可以使用层来布局版面。第第第第6 6章章章章 页面布局、层、行为和时间轴的使用页面

3、布局、层、行为和时间轴的使用页面布局、层、行为和时间轴的使用页面布局、层、行为和时间轴的使用江西师范大学网页设计课程组 设计一个网页，先要规划好版式，常用的版式为分栏式结构，比如二分栏、设计一个网页，先要规划好版式，常用的版式为分栏式结构，比如二分栏、设计一个网页，先要规划好版式，常用的版式为分栏式结构，比如二分栏、设计一个网页，先要规划好版式，常用的版式为分栏式结构，比如二分栏、三分栏、四分栏等，搜狐网就是一个三分栏结构，如图三分栏、四分栏等，搜狐网就是一个三分栏结构，如图三分栏、四分栏等，搜狐网就是一个三分栏结构，如图三分栏、四分栏等，搜狐网就是一个三分栏结构，如图6-16-1所示。所示。

4、所示。所示。6.1 6.1 版版版版 式式式式江西师范大学网页设计课程组 把搜狐网版式简化一下，如图把搜狐网版式简化一下，如图把搜狐网版式简化一下，如图把搜狐网版式简化一下，如图6-26-2所示，这是一个典型三分栏结构，所示，这是一个典型三分栏结构，所示，这是一个典型三分栏结构，所示，这是一个典型三分栏结构，第一行分两列，左边单元格放置第一行分两列，左边单元格放置第一行分两列，左边单元格放置第一行分两列，左边单元格放置LogoLogo图片。右边单元格放入导航菜单，图片。右边单元格放入导航菜单，图片。右边单元格放入导航菜单，图片。右边单元格放入导航菜单，由于栏目比较多，所以分成三行排放，第二行为

5、网页的主题部分，分为由于栏目比较多，所以分成三行排放，第二行为网页的主题部分，分为由于栏目比较多，所以分成三行排放，第二行为网页的主题部分，分为由于栏目比较多，所以分成三行排放，第二行为网页的主题部分，分为三栏，左边一栏为特色栏目导航，右边两栏分别放置不同的网页内容，三栏，左边一栏为特色栏目导航，右边两栏分别放置不同的网页内容，三栏，左边一栏为特色栏目导航，右边两栏分别放置不同的网页内容，三栏，左边一栏为特色栏目导航，右边两栏分别放置不同的网页内容，最下面一行放置版权信息。最下面一行放置版权信息。最下面一行放置版权信息。最下面一行放置版权信息。湖北省精品课程网页设计与制作就是一个典型的二分栏的

6、结构湖北省精品课程网页设计与制作就是一个典型的二分栏的结构湖北省精品课程网页设计与制作就是一个典型的二分栏的结构湖北省精品课程网页设计与制作就是一个典型的二分栏的结构,如图如图如图如图6-36-3所示，所示，所示，所示，Dreamweaver8.0 Dreamweaver8.0提供了丰富的布局模式提供了丰富的布局模式提供了丰富的布局模式提供了丰富的布局模式,下面我们就下面我们就下面我们就下面我们就利用利用利用利用Dreamweaver8.0Dreamweaver8.0提供的布局模式进行网页布局提供的布局模式进行网页布局提供的布局模式进行网页布局提供的布局模式进行网页布局-6.1 6.1 版版版

7、版 式式式式江西师范大学网页设计课程组布局表格的绘制布局表格的绘制布局表格的绘制布局表格的绘制布局单元格的绘制布局单元格的绘制布局单元格的绘制布局单元格的绘制嵌套布局表格的绘制嵌套布局表格的绘制嵌套布局表格的绘制嵌套布局表格的绘制6.2.4 6.2.4 布局单元格和表格的调整布局单元格和表格的调整布局单元格和表格的调整布局单元格和表格的调整 6.2 6.2 布布布布 局局局局江西师范大学网页设计课程组 Dreamweaver8.0Dreamweaver8.0可以方便地在页面上创建层，并精确地定位层，可可以方便地在页面上创建层，并精确地定位层，可可以方便地在页面上创建层，并精确地定位层，可可以方

8、便地在页面上创建层，并精确地定位层，可以对层进行选择、移动、调整大小和对齐等操作。层主要有如下功能：以对层进行选择、移动、调整大小和对齐等操作。层主要有如下功能：以对层进行选择、移动、调整大小和对齐等操作。层主要有如下功能：以对层进行选择、移动、调整大小和对齐等操作。层主要有如下功能：有了层以后可以将元素置于层中，因为层可以重叠，所以就可以产生有了层以后可以将元素置于层中，因为层可以重叠，所以就可以产生有了层以后可以将元素置于层中，因为层可以重叠，所以就可以产生有了层以后可以将元素置于层中，因为层可以重叠，所以就可以产生许多重叠效果许多重叠效果许多重叠效果许多重叠效果 可以利用层来精确定位网页

9、元素。它可以包含文本、图像甚至其它层，可以利用层来精确定位网页元素。它可以包含文本、图像甚至其它层，可以利用层来精确定位网页元素。它可以包含文本、图像甚至其它层，可以利用层来精确定位网页元素。它可以包含文本、图像甚至其它层，凡是凡是凡是凡是HTMLHTML文件可包含的元素均可包含在层中。文件可包含的元素均可包含在层中。文件可包含的元素均可包含在层中。文件可包含的元素均可包含在层中。层还有非常特殊的功能，就是通过应用时间轴可以使其移动和变换。层还有非常特殊的功能，就是通过应用时间轴可以使其移动和变换。层还有非常特殊的功能，就是通过应用时间轴可以使其移动和变换。层还有非常特殊的功能，就是通过应用时

10、间轴可以使其移动和变换。这样在层中放置一些图片或文本，就能够实现动画效果。这样在层中放置一些图片或文本，就能够实现动画效果。这样在层中放置一些图片或文本，就能够实现动画效果。这样在层中放置一些图片或文本，就能够实现动画效果。层可以转换成表格，为不支持层的浏览器提供解决方法。层可以转换成表格，为不支持层的浏览器提供解决方法。层可以转换成表格，为不支持层的浏览器提供解决方法。层可以转换成表格，为不支持层的浏览器提供解决方法。层可以显示和隐藏，应用这一功能可以实现网页导航中的下拉菜单。层可以显示和隐藏，应用这一功能可以实现网页导航中的下拉菜单。层可以显示和隐藏，应用这一功能可以实现网页导航中的下拉菜

11、单。层可以显示和隐藏，应用这一功能可以实现网页导航中的下拉菜单。在在在在HTMLHTML中，层的描述如下所示。中，层的描述如下所示。中，层的描述如下所示。中，层的描述如下所示。div id=layerl style=position:absolute;left:162px;width:168px;height:94px;z.index:1 6.36.3利用层精确定位网页元素利用层精确定位网页元素利用层精确定位网页元素利用层精确定位网页元素江西师范大学网页设计课程组6.3.1 6.3.1 层的创建层的创建层的创建层的创建创建层有如下方法。创建层有如下方法。创建层有如下方法。创建层有如下方法。1.

12、1.使用插入菜单使用插入菜单使用插入菜单使用插入菜单2.2.使用插入栏使用插入栏使用插入栏使用插入栏 6.36.3利用层精确定位网页元素利用层精确定位网页元素利用层精确定位网页元素利用层精确定位网页元素江西师范大学网页设计课程组6.3.2 6.3.2 设置层属性设置层属性设置层属性设置层属性层属性面板主要有以下参数。层属性面板主要有以下参数。层属性面板主要有以下参数。层属性面板主要有以下参数。层编号：层的名称，用于识别不同的层。层编号：层的名称，用于识别不同的层。层编号：层的名称，用于识别不同的层。层编号：层的名称，用于识别不同的层。左：层的左边界距离浏览器窗口左边界的距离。左：层的左边界距离

13、浏览器窗口左边界的距离。左：层的左边界距离浏览器窗口左边界的距离。左：层的左边界距离浏览器窗口左边界的距离。上：层的上边界距离浏览器窗口上边界的距离。上：层的上边界距离浏览器窗口上边界的距离。上：层的上边界距离浏览器窗口上边界的距离。上：层的上边界距离浏览器窗口上边界的距离。宽：层的宽。宽：层的宽。宽：层的宽。宽：层的宽。高：层的高度。高：层的高度。高：层的高度。高：层的高度。Z Z轴：层的轴：层的轴：层的轴：层的Z Z轴顺序。轴顺序。轴顺序。轴顺序。背景图像：层的背景图。背景图像：层的背景图。背景图像：层的背景图。背景图像：层的背景图。可见性：层的显示状态，包括可见性：层的显示状态，包括可见

14、性：层的显示状态，包括可见性：层的显示状态，包括defaultdefault、inheritinherit、visiblevisible和和和和hidden4hidden4个选项。个选项。个选项。个选项。背景颜色：层的背景颜色。背景颜色：层的背景颜色。背景颜色：层的背景颜色。背景颜色：层的背景颜色。剪辑：用来指定哪一部分是可见的，输出的数值是距离层剪辑：用来指定哪一部分是可见的，输出的数值是距离层剪辑：用来指定哪一部分是可见的，输出的数值是距离层剪辑：用来指定哪一部分是可见的，输出的数值是距离层4 4个边界的距离。个边界的距离。个边界的距离。个边界的距离。溢出：如果层里面的文字太多或图像太大，

15、层的大小不足以全部显示的时候，溢出：如果层里面的文字太多或图像太大，层的大小不足以全部显示的时候，溢出：如果层里面的文字太多或图像太大，层的大小不足以全部显示的时候，溢出：如果层里面的文字太多或图像太大，层的大小不足以全部显示的时候，有以下选项有以下选项有以下选项有以下选项:visiblevisible超出的部分照样显示。超出的部分照样显示。超出的部分照样显示。超出的部分照样显示。hiddenhidden超出的部分隐藏。超出的部分隐藏。超出的部分隐藏。超出的部分隐藏。scroolscrool不管是否超出，都显示滚动条。不管是否超出，都显示滚动条。不管是否超出，都显示滚动条。不管是否超出，都显示

16、滚动条。autoauto有超出时才出现滚动条。有超出时才出现滚动条。有超出时才出现滚动条。有超出时才出现滚动条。6.36.3利用层精确定位网页元素利用层精确定位网页元素利用层精确定位网页元素利用层精确定位网页元素江西师范大学网页设计课程组层的基本操作层的基本操作 利用层可以精确的定位网页元素，包括如何选择层，设置利用层可以精确的定位网页元素，包括如何选择层，设置层的背景颜色、改变层的可见性等基本操作。层的背景颜色、改变层的可见性等基本操作。6.36.3利用层精确定位网页元素利用层精确定位网页元素利用层精确定位网页元素利用层精确定位网页元素江西师范大学网页设计课程组6.3.4 应用层排版应用层排

17、版 虽然通过层定位网页元素比表格方便很多，但由于受到浏虽然通过层定位网页元素比表格方便很多，但由于受到浏览器版本的限制不是所有的浏览器都支持层，只有览器版本的限制不是所有的浏览器都支持层，只有IE4.0以以上的版本才能支持，上的版本才能支持，Dreamweaver8.0提供了层和表格相互提供了层和表格相互转换功能，可以最大程度方便网页设计，同时兼顾低版本浏转换功能，可以最大程度方便网页设计，同时兼顾低版本浏览器的访问者。览器的访问者。将层转换为表格将层转换为表格 2.将表格转换为层将表格转换为层 6.36.3利用层精确定位网页元素利用层精确定位网页元素利用层精确定位网页元素利用层精确定位网页元

18、素江西师范大学网页设计课程组给出网页的页面如下：给出网页的页面如下：实践技能训练实践技能训练1-利用层布局页面板面利用层布局页面板面江西师范大学网页设计课程组制作后的效果如下：制作后的效果如下：实践技能训练实践技能训练1-利用层布局页面板面利用层布局页面板面江西师范大学网页设计课程组给出的网页如下：给出的网页如下：6.3.6 实践技能训练实践技能训练2-利用层制作下拉菜单利用层制作下拉菜单江西师范大学网页设计课程组制作后的效果如下：制作后的效果如下：6.3.6 实践技能训练实践技能训练2-利用层制作下拉菜单利用层制作下拉菜单江西师范大学网页设计课程组时间轴的概念时间轴的概念 时间轴通过在不同的

19、时间改变层的位置、大小、可见时间轴通过在不同的时间改变层的位置、大小、可见性和叠放顺序可以实现动画效果。这就是动态性和叠放顺序可以实现动画效果。这就是动态HTML的表的表达方式，也是达方式，也是Dreamweaver8-0强于其它网页编辑器的强于其它网页编辑器的地方。地方。“时间轴时间轴”只能对只能对“层层”发生作用，因此，如果要产发生作用，因此，如果要产生动画效果，首先要创建层，再将图像、文本等内容插入生动画效果，首先要创建层，再将图像、文本等内容插入到层中，然后通过层来移动这些元素。到层中，然后通过层来移动这些元素。在在Dreamweaver8-0中为我们提供了时间轴的功中为我们提供了时间

20、轴的功能，它是将动态的能，它是将动态的DHTM功能转换为类似动画编辑的时间功能转换为类似动画编辑的时间轴概念，可以非常方便地设定对象在页面中的运动。轴概念，可以非常方便地设定对象在页面中的运动。6.4时间轴的应用时间轴的应用江西师范大学网页设计课程组时间轴的概念时间轴的概念1、“时间轴时间轴”面板面板2、创建时间轴动画、创建时间轴动画3、修改时间轴、修改时间轴4、使用多个时间轴、使用多个时间轴5、拷贝和粘贴动画、拷贝和粘贴动画6、将动画序列应用于另一对象、将动画序列应用于另一对象7、重命名时间轴、重命名时间轴8、时间轴动画小技巧、时间轴动画小技巧 6.4时间轴的应用时间轴的应用江西师范大学网页

21、设计课程组1.“时间轴时间轴”面板面板 “时间轴时间轴”弹出式菜单：指定当前在弹出式菜单：指定当前在“时间轴时间轴”面板中显示文档的哪面板中显示文档的哪些时间轴。些时间轴。播放栏：显示当前在播放栏：显示当前在“文档文档”窗口中显示时间轴的哪一帧。窗口中显示时间轴的哪一帧。帧编号：指示帧的序号。帧编号：指示帧的序号。“后退后退”和和“播放播放”按钮之间的数字是当按钮之间的数字是当前帧编号。每秒前帧编号。每秒 15 帧这一默认设置是比较适当的平均速率，可用于帧这一默认设置是比较适当的平均速率，可用于在通常的在通常的 Windows 和和 Macintosh 系统上运行的大多数浏览器。系统上运行的大

22、多数浏览器。上下文菜单：包含各种与时间轴相关的命令。上下文菜单：包含各种与时间轴相关的命令。“行为行为”通道：是应该在时间轴中特定帧处执行的行为的通道。通道：是应该在时间轴中特定帧处执行的行为的通道。动画条：显示每个对象的动画的持续时间。一个行可以包含表示不动画条：显示每个对象的动画的持续时间。一个行可以包含表示不同对象的多个条。不同的条无法控制同一帧中的同一对象。同对象的多个条。不同的条无法控制同一帧中的同一对象。关键帧：是动画条中已经为对象指定属性（如位置）的帧。关键帧：是动画条中已经为对象指定属性（如位置）的帧。Dreamweaver 8会计算关键帧之间帧的中间值。小圆标记表示关键会计算

23、关键帧之间帧的中间值。小圆标记表示关键帧。帧。“动画动画”通道：显示用于制作层和图像动画的条。通道：显示用于制作层和图像动画的条。6.4时间轴的应用时间轴的应用-时间轴的概念时间轴的概念江西师范大学网页设计课程组 后退至起点：将播放栏移至时间轴中的第一帧。后退至起点：将播放栏移至时间轴中的第一帧。后退：将播放栏向左移动一帧。单击后退：将播放栏向左移动一帧。单击“后退后退”并按住鼠标按钮可向后播放时并按住鼠标按钮可向后播放时间轴。间轴。当前帧序号：当前帧序号：当前所在帧。当前所在帧。播放：将播放栏向右移动一帧。单击播放：将播放栏向右移动一帧。单击“播放播放”并按住鼠标按钮可向前播放时并按住鼠标按

24、钮可向前播放时间轴。间轴。自动播放：使时间轴于当前页在浏览器中加载时自动开始播放。自动播放：使时间轴于当前页在浏览器中加载时自动开始播放。“自动播自动播放放”将一个行为附加到页的将一个行为附加到页的 body 标签，该行为在页加载时执行标签，该行为在页加载时执行“播放时间轴播放时间轴”操作。操作。循环：使当前时间轴于页在浏览器中打开时无限地循环。循环：使当前时间轴于页在浏览器中打开时无限地循环。“循环循环”在动画在动画的最后一帧之后将的最后一帧之后将“转到时间轴帧转到时间轴帧”行为插入到行为插入到“行为行为”通道中。在通道中。在“行为行为”通道中双击该行为的标记可编辑此行为的参数并更改循环的次

25、数通道中双击该行为的标记可编辑此行为的参数并更改循环的次数。6.4时间轴的应用时间轴的应用-时间轴面板时间轴面板江西师范大学网页设计课程组 2.修改时间轴修改时间轴 定义完时间轴的基本组成部分后，可以进行一些更改，如添加和删除帧、定义完时间轴的基本组成部分后，可以进行一些更改，如添加和删除帧、更改动画开始时间等。要修改时间轴，请执行以下任一操作：更改动画开始时间等。要修改时间轴，请执行以下任一操作：若要使动画的播放时间更长，请将结束帧标记向右拖动。动画中的所若要使动画的播放时间更长，请将结束帧标记向右拖动。动画中的所有关键帧都会移动，以保持它们的相对位置不变。若要阻止其他关键帧移动，有关键帧都

26、会移动，以保持它们的相对位置不变。若要阻止其他关键帧移动，请按住请按住 Ctrl 键并拖动结束帧标记。键并拖动结束帧标记。若要使层更早或更晚地到达某一关键帧位置，请在动画条中将关键帧若要使层更早或更晚地到达某一关键帧位置，请在动画条中将关键帧向左或向右移动。向左或向右移动。若要更改动画的开始时间，请选择一个或多个与该动画关联的动画条若要更改动画的开始时间，请选择一个或多个与该动画关联的动画条（按（按 Shift 可一次选择多个动画条），然后向左或向右移动。可一次选择多个动画条），然后向左或向右移动。若要移动整个动画轨迹的位置，请选择整个动画条，然后在页面上拖若要移动整个动画轨迹的位置，请选择整

27、个动画条，然后在页面上拖动该对象。动该对象。Dreamweaver 会调整所有关键帧的位置。在整个动画条上所做会调整所有关键帧的位置。在整个动画条上所做出的任何更改将更改所有关键帧。出的任何更改将更改所有关键帧。若要在时间轴上添加或删除帧，请选择若要在时间轴上添加或删除帧，请选择“修改修改”“时间轴时间轴”“添加添加帧帧”或或“修改修改”“时间轴时间轴”“删除帧删除帧”。若要使时间轴于页在浏览器中打开时自动播放，请单击若要使时间轴于页在浏览器中打开时自动播放，请单击“自动播放自动播放”。“自动播放自动播放”会向页附加一个行为，该行为将在页加载时执行会向页附加一个行为，该行为将在页加载时执行“播

28、放时间轴播放时间轴”操操作。作。若要使时间轴连续循环，请单击若要使时间轴连续循环，请单击“循环循环”。“循环循环”将将“转到时间轴帧转到时间轴帧”操作插入到动画最后一帧后的操作插入到动画最后一帧后的“行为行为”通道。您可以编辑此行为的参数以定通道。您可以编辑此行为的参数以定义循环的次数。义循环的次数。6.4时间轴的应用时间轴的应用-时间轴的概念时间轴的概念江西师范大学网页设计课程组 3.使用多个时间轴使用多个时间轴 若要管理多个时间轴，请执行以下任一操作：若要管理多个时间轴，请执行以下任一操作：若要新建时间轴，请选择若要新建时间轴，请选择“修改修改”“时间轴时间轴”“添加时间轴添加时间轴”。若

29、要删除选定的时间轴，请选择若要删除选定的时间轴，请选择“修改修改”“时间时间轴轴”“删除时间轴删除时间轴”。这将永久删除选定时间轴中的所。这将永久删除选定时间轴中的所有动画。有动画。若要重命名选定时间轴，请选择若要重命名选定时间轴，请选择“修改修改”“时间时间轴轴”“重命名时间轴重命名时间轴”，或者在，或者在“时间轴时间轴”面板的面板的“时时间轴间轴”弹出式菜单中输入新的名称。弹出式菜单中输入新的名称。若要在若要在“时间轴时间轴”面板中查看另一个时间轴，请从面板中查看另一个时间轴，请从“时间轴时间轴”面板的面板的“时间轴时间轴”弹出式菜单中选择一个新的弹出式菜单中选择一个新的时间轴。时间轴。6

30、.4时间轴的应用时间轴的应用-时间轴的概念时间轴的概念江西师范大学网页设计课程组 4.拷贝和粘贴动画拷贝和粘贴动画 若要剪切（或拷贝）并粘贴动画序列，请执行以下操若要剪切（或拷贝）并粘贴动画序列，请执行以下操作：作：单击一个动画条以选择一个序列。若要选择多个序单击一个动画条以选择一个序列。若要选择多个序列，请按住列，请按住 Shift 键并单击多个动画条；若要选择所有序键并单击多个动画条；若要选择所有序列，请按列，请按 Ctrl+A 键键(Windows)或或 Command+A 键键(Macintosh)。拷贝或剪切选定内容。拷贝或剪切选定内容。执行下列操作之一：执行下列操作之一：将播放栏移

31、至当前时间轴中的另一处。将播放栏移至当前时间轴中的另一处。从从“时间轴时间轴”弹出式菜单中选择另一个时间轴。弹出式菜单中选择另一个时间轴。打开另一个文档或创建一个新文档，然后在打开另一个文档或创建一个新文档，然后在“时时间轴间轴”面板中单击。面板中单击。6.4时间轴的应用时间轴的应用-时间轴的概念时间轴的概念江西师范大学网页设计课程组 将选定内容粘贴到时间轴中。将选定内容粘贴到时间轴中。同一对象的动画条不能同一对象的动画条不能重叠，因为一个层不能同时处于两个位置（一个图像也不重叠，因为一个层不能同时处于两个位置（一个图像也不能同时具有两个不同的源）。如果您所粘贴的动画条与同能同时具有两个不同的

32、源）。如果您所粘贴的动画条与同一对象的另一动画条重叠，一对象的另一动画条重叠，Dreamweaver 会自动将选定会自动将选定内容移至第一个不重叠的帧。内容移至第一个不重叠的帧。在将动画序列粘贴到另一文档时，应牢记两条原则：在将动画序列粘贴到另一文档时，应牢记两条原则：如果您拷贝层的动画序列且新文档包含同名的层，如果您拷贝层的动画序列且新文档包含同名的层，Dreamweaver 会将动画属性应用于新文档中的现有层。会将动画属性应用于新文档中的现有层。如果您拷贝层的动画序列且新文档不包含同名的层，如果您拷贝层的动画序列且新文档不包含同名的层，Dreamweaver会将层和它的内容随动画序列一起从

33、初始会将层和它的内容随动画序列一起从初始文档中拷贝下来。若要将粘贴的动画序列应用于新文档中文档中拷贝下来。若要将粘贴的动画序列应用于新文档中的另一个层，请从上下文菜单中选择的另一个层，请从上下文菜单中选择“更改对象更改对象”并从弹并从弹出式菜单中选择第二个层的名称。如果需要，删除所粘贴出式菜单中选择第二个层的名称。如果需要，删除所粘贴的层。的层。6.4时间轴的应用时间轴的应用-拷贝和粘贴动画拷贝和粘贴动画江西师范大学网页设计课程组 时间轴的概念时间轴的概念 5.将动画序列应用于另一对象将动画序列应用于另一对象 为了节约时间，您可以只创建一次动画序列，然后将其应用为了节约时间，您可以只创建一次动

34、画序列，然后将其应用于文档中剩余的每个层。若要将现有动画序列应用于其他对象，于文档中剩余的每个层。若要将现有动画序列应用于其他对象，请执行以下操作：请执行以下操作：在在“时间轴时间轴”面板中，选择动画序列并将其拷贝。面板中，选择动画序列并将其拷贝。单击单击“时间轴时间轴”面板的任一帧，然后在该帧处粘贴动画面板的任一帧，然后在该帧处粘贴动画序列。序列。右键单击右键单击(Windows)或按住或按住 Control 键并单击键并单击(Macintosh)粘贴的动画序列，然后从上下文菜单中选择粘贴的动画序列，然后从上下文菜单中选择“更更改对象改对象”。在出现的对话框中，从弹出式菜单中选择另一对象并单

35、在出现的对话框中，从弹出式菜单中选择另一对象并单击击“确定确定”。对于要遵循同一动画序列的其他所有对象，重复第对于要遵循同一动画序列的其他所有对象，重复第 2 步到步到第第 4 步。步。创建动画序列后，您也可以改变关于制作哪一个层的创建动画序列后，您也可以改变关于制作哪一个层的动画的决定；只需执行上面的第动画的决定；只需执行上面的第 3 步和第步和第 4 步即可（不必进行步即可（不必进行拷贝或粘贴）。拷贝或粘贴）。6.4时间轴的应用时间轴的应用江西师范大学网页设计课程组 6.重命名时间轴重命名时间轴 若要重命名当前在若要重命名当前在“时间轴时间轴”面板中显示的时间轴，请执面板中显示的时间轴，请

36、执行以下操作：行以下操作：选择选择“修改修改”、“时间轴时间轴”、“重命名时间轴重命名时间轴”。在在“重命名时间轴重命名时间轴”对话框中输入新的名称。对话框中输入新的名称。如果您的文档包含如果您的文档包含“播放时间轴播放时间轴”行为操作（例如，如果行为操作（例如，如果它包含访问者必须单击才能启动时间轴的按钮），则必须它包含访问者必须单击才能启动时间轴的按钮），则必须编辑该行为以反映新的时间轴名称。编辑该行为以反映新的时间轴名称。6.4时间轴的应用时间轴的应用-时间轴的概念时间轴的概念江西师范大学网页设计课程组7.时间轴动画小技巧时间轴动画小技巧通过以下方法可以提高动画的性能并使动画更易于创建：

37、通过以下方法可以提高动画的性能并使动画更易于创建：显示和隐藏层，而不是更改多图像动画的源文件。由于新的图像必须进行下载，显示和隐藏层，而不是更改多图像动画的源文件。由于新的图像必须进行下载，所以切换图像的源文件会降低动画的速度。如果所有图像都在动画运行前在隐所以切换图像的源文件会降低动画的速度。如果所有图像都在动画运行前在隐藏层中同时下载，将不会出现明显的停顿，并且不会缺少图像。藏层中同时下载，将不会出现明显的停顿，并且不会缺少图像。扩展动画条以创建更顺畅的动作。如果动画断断续续并且图像在不同位置之间扩展动画条以创建更顺畅的动作。如果动画断断续续并且图像在不同位置之间跳动，请拖动该层动画条的结

38、束帧，使动作延伸到更多的帧。通过延长动画条，跳动，请拖动该层动画条的结束帧，使动作延伸到更多的帧。通过延长动画条，可以在运动的开始点和结束点之间创建更多的数据点，同时也会使对象更为缓可以在运动的开始点和结束点之间创建更多的数据点，同时也会使对象更为缓慢地移动。请尝试增加每秒帧数慢地移动。请尝试增加每秒帧数(fps)以提高速度，但应注意在普通系统上运以提高速度，但应注意在普通系统上运行的大多数浏览器都不能支持超过行的大多数浏览器都不能支持超过 15 fps 的动画速度。请在不同的系统上用的动画速度。请在不同的系统上用不同的浏览器对动画进行测试，以找到最佳的设置。不同的浏览器对动画进行测试，以找到

39、最佳的设置。不要制作大型位图的动画。制作大型图像的动画会导致动画速度减慢。相反，不要制作大型位图的动画。制作大型图像的动画会导致动画速度减慢。相反，应创建合成图像，并移动图像中较小的部分。例如，可以通过仅制作汽车轮胎应创建合成图像，并移动图像中较小的部分。例如，可以通过仅制作汽车轮胎的动画来显示汽车的运动。的动画来显示汽车的运动。创建简单的动画。不要创建对当前浏览器要求过高的动画。即使在系统或创建简单的动画。不要创建对当前浏览器要求过高的动画。即使在系统或 Internet 性能降低时，浏览器始终会播放时间轴动画中的每一帧。性能降低时，浏览器始终会播放时间轴动画中的每一帧。6.4时间轴的应用时

40、间轴的应用-时间轴的概念时间轴的概念江西师范大学网页设计课程组 使用时间轴改变图像属性使用时间轴改变图像属性 除了可以利用时间轴移动层制作动画以外，还可以除了可以利用时间轴移动层制作动画以外，还可以用时间轴在不同的关键帧改变图像的源文件、层的属性，用时间轴在不同的关键帧改变图像的源文件、层的属性，制作动画效果。下面以一实例说明使用时间轴改变图像属制作动画效果。下面以一实例说明使用时间轴改变图像属性的制作过程：性的制作过程：(1)新建网页。在本地站点下新建一个空白网页文档新建网页。在本地站点下新建一个空白网页文档并保存为为并保存为为picture1-html。(2)插入第一幅图像。设置网页对齐方

41、式为居中对齐，插入第一幅图像。设置网页对齐方式为居中对齐，执行执行“插入插入”“图像图像”命令，在命令，在“选择图像源文件选择图像源文件”对对话框中，选择第一幅图像话框中，选择第一幅图像car1.jpg，将图像插入到页面中。，将图像插入到页面中。(3)选取插入的图像，然后将其拖到时间轴面板。选取插入的图像，然后将其拖到时间轴面板。(4)改变动画帧数。用鼠标拖动动画条右端结束关键改变动画帧数。用鼠标拖动动画条右端结束关键帧标记，将第帧标记，将第15帧拖动到第帧拖动到第30帧，改变动画长度。帧，改变动画长度。(5)添加关键帧并设置关键帧的图像来源。添加关键帧并设置关键帧的图像来源。(6)预览网页。

42、预览网页。6.4时间轴的应用时间轴的应用江西师范大学网页设计课程组6.4.3 使用时间轴改变图层属性使用时间轴改变图层属性 在时间轴中除了可以移动层之外，还可以改变层的可见性、在时间轴中除了可以移动层之外，还可以改变层的可见性、大小以及叠放次序等。大小以及叠放次序等。(1)选择一个包含图像或文字，然后拖到时间轴中。选择一个包含图像或文字，然后拖到时间轴中。(2)在时间轴面板中选择一个已存在的关键帧或建立一在时间轴面板中选择一个已存在的关键帧或建立一个关键帧。个关键帧。(3)在在“属性属性”面板中的面板中的“显示显示”下拉列表中选择层下拉列表中选择层的显示属性为的显示属性为visible。为达到

43、动态效果而改变层的属性，。为达到动态效果而改变层的属性，可以设置层的可见性，还可以改变层的大小等属性。可以设置层的可见性，还可以改变层的大小等属性。(4)再选择另一个已存在的关键帧或建立一个关键帧，再选择另一个已存在的关键帧或建立一个关键帧，然后在然后在“属性属性”面板中选择层的显示属性为面板中选择层的显示属性为hidden。(5)选中自动播放和循环复选框，按选中自动播放和循环复选框，按键预览可键预览可以看到间隔一段时间层就循环出现和消失的动画效果。以看到间隔一段时间层就循环出现和消失的动画效果。6.4时间轴的应用时间轴的应用江西师范大学网页设计课程组6.4.4 实践技能训练实践技能训练-层与

44、时间轴动画制作综合实层与时间轴动画制作综合实例例 制作一个小天使沿直线运动、简单曲线制作一个小天使沿直线运动、简单曲线运动和任意路径运动的时间轴动画。运动和任意路径运动的时间轴动画。6.4时间轴的应用时间轴的应用江西师范大学网页设计课程组6.5.1 行为概念行为概念 行为（行为（Behavior）指某个事件发生时浏览器执行的动作，其实质是在）指某个事件发生时浏览器执行的动作，其实质是在Dreamweaver 8中预置的中预置的JavaScript程序，由事件（程序，由事件（event）和对应动作）和对应动作（actions）组成。它能实现用户与网页间的交互，通过某个动作来触发某项）组成。它能实

45、现用户与网页间的交互，通过某个动作来触发某项事件。如当用户在页面中将鼠标移动并单击某一个链接后，载入了一幅图像，事件。如当用户在页面中将鼠标移动并单击某一个链接后，载入了一幅图像，这就产生了两个事件这就产生了两个事件onMouseOver和和onClick，同时触发了一个动作载入图，同时触发了一个动作载入图像。像。事件事件是由浏览器为每个页面元素定义的，通常是由浏览器为每个页面元素定义的，通常浏览器都会提供一组事件，浏览器都会提供一组事件，如如onMouseOver、onMouseOut和和onClick等，事件总是与动作相关联。当等，事件总是与动作相关联。当访问者与网页进行交互时，浏览器生成

46、事件，但并非所有的事件都是交互的，访问者与网页进行交互时，浏览器生成事件，但并非所有的事件都是交互的，如设置网页每如设置网页每10s自动重新载入。自动重新载入。根据所选对象和在根据所选对象和在“显示事件显示事件”子菜单中指定的浏览器的不同，显示子菜单中指定的浏览器的不同，显示在在“事件事件”下拉列表框中的事件将有所不同。下拉列表框中的事件将有所不同。Internet Explorer和和Netscape Navigator是当今主流浏览器。是当今主流浏览器。IE4表明此事件适用于表明此事件适用于Internet Explorer 4-0浏览器，浏览器，NE4表明此事件适用于表明此事件适用于Ne

47、tscape Navigator 4-0浏浏览器。览器。动作动作是由预先写好的可以执行指定任务的是由预先写好的可以执行指定任务的JavaScript代码，如打开浏览代码，如打开浏览器窗口、显示或隐藏层、播放声音等。器窗口、显示或隐藏层、播放声音等。6.5行为行为江西师范大学网页设计课程组6.5.2 行为面板行为面板1、打开行为面板、打开行为面板2、行为菜单、行为菜单3、设置行为面板选项、设置行为面板选项 (1)显示设置事件显示设置事件:仅显示附加到当前文档的那些事件。每个类别的事仅显示附加到当前文档的那些事件。每个类别的事件都包含在一个可折叠的列表中，您可以单击类别名称旁边的加号件都包含在一个

48、可折叠的列表中，您可以单击类别名称旁边的加号/减减号按钮展开或折叠该列表。号按钮展开或折叠该列表。“显示设置事件显示设置事件”是默认的视图。是默认的视图。(2)显示所有事件显示所有事件:按字母降序显示给定类别的所有事件。按字母降序显示给定类别的所有事件。(3)添加动作添加动作(+):是一个弹出菜单，其中包含可以附加到当前所选对象是一个弹出菜单，其中包含可以附加到当前所选对象的动作。当从该列表中选择一个动作时，将出现一个对话框，您可以的动作。当从该列表中选择一个动作时，将出现一个对话框，您可以在该对话框中指定该动作的参数。如果所有动作都灰显，则没有所选在该对话框中指定该动作的参数。如果所有动作都

49、灰显，则没有所选对象可以生成的事件。对象可以生成的事件。(4)删除删除(-):从行为列表中删除所选的事件和动作。从行为列表中删除所选的事件和动作。(5)上下箭头按钮：将特定事件的所选动作在行为列表中向上或向下移上下箭头按钮：将特定事件的所选动作在行为列表中向上或向下移动，但只在相同事件多个动作时才会显示。给定事件的动作是以特定动，但只在相同事件多个动作时才会显示。给定事件的动作是以特定的顺序执行的。可以为特定的事件使用上下箭头按钮更改动作的顺序。的顺序执行的。可以为特定的事件使用上下箭头按钮更改动作的顺序。对于不能在列表中上下移动的动作，箭头按钮将被禁用。对于不能在列表中上下移动的动作，箭头按

50、钮将被禁用。6.5行为行为江西师范大学网页设计课程组行为基本操作行为基本操作1.添加行为添加行为2.修改行为修改行为3.删除行为删除行为4.选择事件选择事件 5.调整顺序调整顺序6.获取更多的行为获取更多的行为 6.5行为行为江西师范大学网页设计课程组 6.5.4 常见行为与事件常见行为与事件 常见行为可以通过在行为面板中单击加号常见行为可以通过在行为面板中单击加号()按钮中弹按钮中弹出，主要有弹出信息、打开浏览器窗口、交换图像、拖动出，主要有弹出信息、打开浏览器窗口、交换图像、拖动层、显示弹出式菜单、设置文本、显示层、显示弹出式菜单、设置文本、显示-隐藏层、检查表单、隐藏层、检查表单、控制控