使用表格和Div布局网课件

上传人:鲁** 文档编号:567980459 上传时间:2024-07-22 格式:PPT 页数:93 大小:461.50KB
返回 下载 相关 举报
使用表格和Div布局网课件_第1页
第1页 / 共93页
使用表格和Div布局网课件_第2页
第2页 / 共93页
使用表格和Div布局网课件_第3页
第3页 / 共93页
使用表格和Div布局网课件_第4页
第4页 / 共93页
使用表格和Div布局网课件_第5页
第5页 / 共93页
点击查看更多>>
资源描述

《使用表格和Div布局网课件》由会员分享,可在线阅读,更多相关《使用表格和Div布局网课件(93页珍藏版)》请在金锄头文库上搜索。

1、第五章第五章 使用表格和使用表格和DivDiv布局网页布局网页1、创建与编辑表格2、创建AP3、编辑AP Div第五章第五章 使用表格和使用表格和Div布局网页布局网页5.1表格表格一、布局表格一、布局表格在网页的设计中,非常重要的一点就是在网页的设计中,非常重要的一点就是网页的布局,也就是网页中的文字、图网页的布局,也就是网页中的文字、图像与动画等对象如何安排像与动画等对象如何安排通常在插入对象以前先进行区域分割。通常在插入对象以前先进行区域分割。区域分割可以使用框架、层或表格,使区域分割可以使用框架、层或表格,使用最多的是表格。用最多的是表格。第五章第五章 使用表格和使用表格和Div布局网

2、页布局网页在在DW8“布局布局”栏提供了栏提供了“布局表格布局表格”和和“绘制布局单元格绘制布局单元格”两个布局工具。两个布局工具。使用它们可以方便地制作出网页布局的使用它们可以方便地制作出网页布局的表格。布局工具栏,如下图所示:表格。布局工具栏,如下图所示:第五章第五章 使用表格和使用表格和Div布局网页布局网页1、创建布局表格、创建布局表格2、创建布局单元格、创建布局单元格 如果没有绘制布局表格就绘制布局单元如果没有绘制布局表格就绘制布局单元格,则会自动产生一个布局表格。格,则会自动产生一个布局表格。第五章第五章 使用表格和使用表格和Div布局网页布局网页注意:注意: (1)不可以在布局单

3、元格内绘制布局表)不可以在布局单元格内绘制布局表格和布局单元格。格和布局单元格。 (2)不能将单元格移出所在的布局表格,)不能将单元格移出所在的布局表格,也不能将单元格移到其他单元格之上。也不能将单元格移到其他单元格之上。 (3)当一个行划分了若干单元格时,必须当一个行划分了若干单元格时,必须先用布局表格,后用布局单元格先用布局表格,后用布局单元格第五章第五章 使用表格和使用表格和Div布局网页布局网页3、布局表格属性、布局表格属性第五章第五章 使用表格和使用表格和Div布局网页布局网页4、布局单元格属性、布局单元格属性水平的默认值为左对齐水平的默认值为左对齐垂直的默认值为居中对齐垂直的默认值

4、为居中对齐第五章第五章 使用表格和使用表格和Div布局网页布局网页布局表格菜单和布局单元格菜单:布局表格菜单和布局单元格菜单:布局表格菜单布局表格菜单布局单元格菜单布局单元格菜单第五章第五章 使用表格和使用表格和Div布局网页布局网页清除所有高度:可以将布局表格内的单清除所有高度:可以将布局表格内的单元格的高(即单元格顶部与布局表格顶元格的高(即单元格顶部与布局表格顶部的间距)清除。如果布局表格内没有部的间距)清除。如果布局表格内没有单元格,则自动建立充满布局表格的单单元格,则自动建立充满布局表格的单元格。元格。第五章第五章 使用表格和使用表格和Div布局网页布局网页使所有宽度一致:使所有布局

5、单元格的使所有宽度一致:使所有布局单元格的宽度一样宽度一样移除所有分隔符图像:删除所有的间隔移除所有分隔符图像:删除所有的间隔图像图像第五章第五章 使用表格和使用表格和Div布局网页布局网页删除嵌套:删除选中的布局表格中的间删除嵌套:删除选中的布局表格中的间隔图像。隔图像。列设置为自动伸展:使选中的布局单元列设置为自动伸展:使选中的布局单元格的列自动适应布局表格的宽度。格的列自动适应布局表格的宽度。第五章第五章 使用表格和使用表格和Div布局网页布局网页添加间隔图像:在选中的布局单元格内添加间隔图像:在选中的布局单元格内添加间隔图像。间隔图像是透明图,在添加间隔图像。间隔图像是透明图,在浏览器

6、中是看不见的,但它可以用来控浏览器中是看不见的,但它可以用来控制自动伸展表的间隔。间隔图像会维持制自动伸展表的间隔。间隔图像会维持页面上已经设置的表格和单元格的宽度。页面上已经设置的表格和单元格的宽度。第五章第五章 使用表格和使用表格和Div布局网页布局网页如何加快表格布局网页加载的速度?如何加快表格布局网页加载的速度? 要加快表格布局网页加载的速度,可以要加快表格布局网页加载的速度,可以在表格标签中添加在表格标签中添加及及实现,代码如下:实现,代码如下:第五章第五章 使用表格和使用表格和Div布局网页布局网页 第五章第五章 使用表格和使用表格和Div布局网页布局网页例题例题1: 如图所示,制

7、作该网页如图所示,制作该网页要求:要求:1、采用布局网页方式布局、采用布局网页方式布局 2、导航栏的宽度保持一致、导航栏的宽度保持一致 3、页面设计美观、合理、页面设计美观、合理第五章第五章 使用表格和使用表格和Div布局网页布局网页第五章第五章 使用表格和使用表格和Div布局网页布局网页例题例题2:利用表格布局制作网页:利用表格布局制作网页要求:要求:1、表格第一行:左边为登陆,右边为设、表格第一行:左边为登陆,右边为设为主页和收藏为主页和收藏2、表格第二行:主题和、表格第二行:主题和LOGO放置区放置区3、表格第三行:高度为、表格第三行:高度为30像素、宽度为像素、宽度为100%、红色的线

8、条、红色的线条4、表格第四行:左边为导航区,右边为、表格第四行:左边为导航区,右边为内容显示区内容显示区5、表格第五行:为图像滚动特效,图像、表格第五行:为图像滚动特效,图像向右滚动向右滚动6、表格第六行:版权声明区域、表格第六行:版权声明区域第五章第五章 使用表格和使用表格和Div布局网页布局网页作业:利用表格布局制作网页作业:利用表格布局制作网页要求:要求:1、表格第一行:主题和、表格第一行:主题和LOGO放置区放置区2、表格第二行:高度为、表格第二行:高度为30像素、宽度为像素、宽度为100%、红色的线条、红色的线条3、表格第三行:为导航栏、表格第三行:为导航栏4、表格第四行:左边上半部

9、分为登陆、表格第四行:左边上半部分为登陆、下半部分为友情链接,右边为内容显示下半部分为友情链接,右边为内容显示区区5、表格第五行:为图像滚动特效,图像、表格第五行:为图像滚动特效,图像向右滚动向右滚动6、表格第六行:版权声明区域、表格第六行:版权声明区域例题例题3:页面导航栏使用:页面导航栏使用FLASH导航导航例题例题4:页面导航栏使用:页面导航栏使用FLASH文本导航文本导航第五章第五章 使用表格和使用表格和Div布局网页布局网页5.2 创建创建Div Div是网页布局中一个非常重要的对是网页布局中一个非常重要的对象。在象。在DW中主要包括中主要包括Div标签及标签及Ap Div两种对象。

10、两种对象。第五章第五章 使用表格和使用表格和Div布局网页布局网页Div标签和标签和Ap Div严格意义上说是相同严格意义上说是相同的对象,即都是的对象,即都是标签,但由于采标签,但由于采用了不同的用了不同的CSS样式定义,两者在外观样式定义,两者在外观及属性上有了不同的表现。及属性上有了不同的表现。第五章第五章 使用表格和使用表格和Div布局网页布局网页AP Div是灵活性最大的网页元素,具有是灵活性最大的网页元素,具有可移植性,可以在网页内任意移动,也可移植性,可以在网页内任意移动,也可以在任意位置创建,可重叠或设置是可以在任意位置创建,可重叠或设置是否显示,因此否显示,因此AP Div常

11、在网页中实现一常在网页中实现一些特殊功能,如制作弹出菜单、漂浮图些特殊功能,如制作弹出菜单、漂浮图像等。像等。第五章第五章 使用表格和使用表格和Div布局网页布局网页Div标签默认状态下不能移动,也不具有标签默认状态下不能移动,也不具有重叠属性,因此常用于网页布局。重叠属性,因此常用于网页布局。第五章第五章 使用表格和使用表格和Div布局网页布局网页创建创建AP Div层层(AP Div)可以可以精确定位的网页元素。精确定位的网页元素。 层层是一个可以容纳文本、图像等网页是一个可以容纳文本、图像等网页元素的容器,是一个可以单独编辑处元素的容器,是一个可以单独编辑处理的对象,是一个可以进行三维精

12、确理的对象,是一个可以进行三维精确定位的元素。定位的元素。 利用层可以更灵活的完成网页布局以利用层可以更灵活的完成网页布局以及一些网页行为效果。及一些网页行为效果。1.插入层插入层第五章第五章 使用表格和使用表格和Div布局网页布局网页第五章第五章 使用表格和使用表格和Div布局网页布局网页在网页中插入一个层以后生成的代码为:在网页中插入一个层以后生成的代码为:第五章第五章 使用表格和使用表格和Div布局网页布局网页2.选择层选择层在网页中选择一个层有两种方法:在网页中选择一个层有两种方法:在设计窗口中选择一个层在设计窗口中选择一个层在代码窗口中选中层的代码在代码窗口中选中层的代码()后,则在

13、设计窗口会选)后,则在设计窗口会选中相应的层中相应的层第五章第五章 使用表格和使用表格和Div布局网页布局网页3.设置层的属性设置层的属性 “可见性可见性”属性一般选择属性一般选择default和和hidden。 hidden为隐藏的。该属性也为隐藏的。该属性也可以在可以在“层层”面板中单击层名称中的面板中单击层名称中的“可可见性见性”列来设置。列来设置。第五章第五章 使用表格和使用表格和Div布局网页布局网页 “溢出溢出”属性设置层内的内容超出了层的属性设置层内的内容超出了层的大小时的出来方式,其中选项如下所示:大小时的出来方式,其中选项如下所示: visible:自动向右下方扩展以显示所有

14、:自动向右下方扩展以显示所有的内容。的内容。 hidden:不显示溢出部分内容。:不显示溢出部分内容。 scroll:为层加上滚动条用于溢出浏览。:为层加上滚动条用于溢出浏览。 auto:在产生溢出时,自动添加滚动:在产生溢出时,自动添加滚动条用于溢出浏览。条用于溢出浏览。第五章第五章 使用表格和使用表格和Div布局网页布局网页 “剪辑剪辑”属性用于设置显示在层内的部分属性用于设置显示在层内的部分内容。内容。 其中其中“左左”、“上上”和和“右右”、“下下”指定显示区域相对于层的左上角坐标和右指定显示区域相对于层的左上角坐标和右下角坐标。下角坐标。第五章第五章 使用表格和使用表格和Div布局网

15、页布局网页4. 对齐层对齐层(1)使用多个层)使用多个层“属性属性”面板面板 按住按住Shift键键,单击多个层完成多,单击多个层完成多个层的选择,可在多个层个层的选择,可在多个层“属性属性”面面板中设置层的相关属性板中设置层的相关属性(2)使用菜单操作)使用菜单操作 按住按住Shift键选中多个层键选中多个层,在菜单,在菜单中使用中使用“修改修改排列顺序排列顺序”,可设置相,可设置相关属性。关属性。第五章第五章 使用表格和使用表格和Div布局网页布局网页 5. 层内容编辑:可以在层内插入文本、层内容编辑:可以在层内插入文本、图象、表格等。图象、表格等。第五章第五章 使用表格和使用表格和Div

16、布局网页布局网页习题习题1:如图所示,利用层进行布局,制:如图所示,利用层进行布局,制作该网页。作该网页。第五章第五章 使用表格和使用表格和Div布局网页布局网页行为行为1、行为、行为 “行为”是帮助用户编写是帮助用户编写JavaScript脚本脚本代码的工具,在用户不了解代码的工具,在用户不了解JavaScript脚脚本编程知识的情况下实现本编程知识的情况下实现DHTML动态网页动态网页的制作。的制作。第五章第五章 使用表格和使用表格和Div布局网页布局网页“行为行为”是面向是面向“事件驱动事件驱动”的脚本程序,的脚本程序,即当页面上发生某一即当页面上发生某一“事件事件”时,根据事时,根据事

17、先的定义去执行该事件的过程代码,在页先的定义去执行该事件的过程代码,在页面上产生某种效果的面上产生某种效果的“动作动作”。 所谓所谓“行为行为”就是根据发生的就是根据发生的“事件事件”而采取的而采取的“动作动作”。 第五章第五章 使用表格和使用表格和Div布局网页布局网页2、事件、事件 事件是网页中发生的某种动作。常用事件是网页中发生的某种动作。常用的事件如下所示:的事件如下所示: onLoad:页面或图像文件被打开时发:页面或图像文件被打开时发生的事件。生的事件。 onUnload:页面或图像文件关闭时发:页面或图像文件关闭时发生的事件。生的事件。第五章第五章 使用表格和使用表格和Div布局

18、网页布局网页onMouseOver:当鼠标移动到:当鼠标移动到对象上面时发生的事件。对象上面时发生的事件。 onMouseOut:当鼠标从对象上:当鼠标从对象上移开时发生的事件。移开时发生的事件。第五章第五章 使用表格和使用表格和Div布局网页布局网页 onMouseDown:当鼠标按下时发生:当鼠标按下时发生的事件。的事件。 onMouseUp:当鼠标放开时发生的事:当鼠标放开时发生的事件。件。 onClick:当单击对象时发生的事件。:当单击对象时发生的事件。 onDblClick:当双击对象时发生的事:当双击对象时发生的事件。件。第五章第五章 使用表格和使用表格和Div布局网页布局网页

19、onKeyDown:当键盘上有键按:当键盘上有键按下时发生的事件下时发生的事件 onKeyUp:当键盘按键放开时发:当键盘按键放开时发生的事件。生的事件。 onKeyPress:当键盘有按键时:当键盘有按键时发生的事件。发生的事件。第五章第五章 使用表格和使用表格和Div布局网页布局网页3 3、添加行为、添加行为第五章第五章 使用表格和使用表格和Div布局网页布局网页4 4、行为对象:一般是页面、行为对象:一般是页面、和层和层。文本的行为可以通过。文本的行为可以通过添加,添加, 但是有些行为不能为文本添加。但是有些行为不能为文本添加。 如果需要为文本添加这些行为,就需要如果需要为文本添加这些行

20、为,就需要将文本制作成一个将文本制作成一个“空链接空链接”,即将超链接,即将超链接的目标地址属性设置为的目标地址属性设置为“#”#”。第五章第五章 使用表格和使用表格和Div布局网页布局网页5 5、行为菜单、行为菜单 行为对象不能添加的行为在行为菜行为对象不能添加的行为在行为菜单中显示为灰色状态,表示该行为不能单中显示为灰色状态,表示该行为不能用于该对象。用于该对象。6 6、添加行为过程、添加行为过程7 7、编辑行为动作、编辑行为动作第五章第五章 使用表格和使用表格和Div布局网页布局网页1 1、交换图像、交换图像 交换图像行为一般用于图像对象。该交换图像行为一般用于图像对象。该行为的动作为:

21、当鼠标移动到图像上面时,行为的动作为:当鼠标移动到图像上面时,图像位置处显示另一幅图像;当鼠标从图图像位置处显示另一幅图像;当鼠标从图像上移开时,恢复原来图像显示。像上移开时,恢复原来图像显示。onMouseOver-交换图像交换图像onMouseOut-恢复交换图像恢复交换图像第五章第五章 使用表格和使用表格和Div布局网页布局网页习题:利用交换图像制作页面习题:利用交换图像制作页面2 2、弹出信息、弹出信息 弹出信息行为对象一般是页面弹出信息行为对象一般是页面标标签。签。当页面打开或关闭时弹出一个信息框。当页面打开或关闭时弹出一个信息框。 onClick-onClick-在页面打开时弹出信

22、息在页面打开时弹出信息 onUnload-onUnload-在页面退出时弹出信息在页面退出时弹出信息 第五章第五章 使用表格和使用表格和Div布局网页布局网页习题:制作一页面,要求在该页面打开习题:制作一页面,要求在该页面打开单击页面任一位置时弹出一信息框显示单击页面任一位置时弹出一信息框显示“欢迎您的光临!欢迎您的光临!”,当关闭该页面时弹,当关闭该页面时弹出一信息框显示出一信息框显示“欢迎您的再次光临!欢迎您的再次光临!”。第五章第五章 使用表格和使用表格和Div布局网页布局网页3 3、设置状态栏文本、设置状态栏文本 设置状态栏文本行为可以用于超链接、设置状态栏文本行为可以用于超链接、图像

23、或页面。图像或页面。当发生当发生onLoadonLoad、onUnloadonUnload、onMouseOveronMouseOver、onMouseOutonMouseOut事件时,在状事件时,在状态栏中显示特定的提示信息。态栏中显示特定的提示信息。第五章第五章 使用表格和使用表格和Div布局网页布局网页习题:制作一页面,要求当鼠标放在网习题:制作一页面,要求当鼠标放在网页中某一对象上时,在页面的状态栏显页中某一对象上时,在页面的状态栏显示相应的说明信息,当鼠标从该对象上示相应的说明信息,当鼠标从该对象上移开时说明信息消失。移开时说明信息消失。第五章第五章 使用表格和使用表格和Div布局网

24、页布局网页4 4、打开浏览器窗口、打开浏览器窗口 打开浏览器窗口行为对象一般是超链打开浏览器窗口行为对象一般是超链接标记,在单击超链接时在新的浏览器窗接标记,在单击超链接时在新的浏览器窗中显示超链接目标文档。中显示超链接目标文档。打开浏览器窗口打开浏览器窗口行为和在超链接标记中使用行为和在超链接标记中使用TargetTarget属性值属性值_blank_blank的不同之处是,的不同之处是,打开浏览器窗口行打开浏览器窗口行为可以定义新窗口的外观。为可以定义新窗口的外观。第五章第五章 使用表格和使用表格和Div布局网页布局网页习题:制作一页面,要求当单击页面中习题:制作一页面,要求当单击页面中某

25、一超链接时,链接内容在另外一个自某一超链接时,链接内容在另外一个自定义的浏览器窗口中打开。定义的浏览器窗口中打开。5 5、显示、显示- -隐藏层隐藏层 显示显示- -隐藏层行为对象一般是超链接隐藏层行为对象一般是超链接标记或图像标记。标记或图像标记。显示显示- -隐藏层行为是利用隐藏层行为是利用鼠标移到对象之上或从对象上移开的事件鼠标移到对象之上或从对象上移开的事件来触发对层来触发对层“可见性可见性”属性的修改,从而属性的修改,从而形成层内容的动态显示效果。形成层内容的动态显示效果。第五章第五章 使用表格和使用表格和Div布局网页布局网页例如:例如:制作制作一图像浏览网页,当选一图像浏览网页,

26、当选择择“1”1”时打开第一幅图像,当选时打开第一幅图像,当选择择“2”2”时打开第二幅图像。时打开第二幅图像。习题:制作一网页,打开该网页时在该习题:制作一网页,打开该网页时在该页面中只显示页面中只显示3个超链接,分别是蜘蛛侠、个超链接,分别是蜘蛛侠、后天、北极熊三个电影名称,当鼠标放后天、北极熊三个电影名称,当鼠标放在其中一个链接上时,则在某一位置显在其中一个链接上时,则在某一位置显示该链接对应的电影图片。示该链接对应的电影图片。第五章第五章 使用表格和使用表格和Div布局网页布局网页6 6、设置层文本、设置层文本 设置层文本是通过设置一个层的不设置层文本是通过设置一个层的不同内容来形成页

27、面内容的动态效果。设同内容来形成页面内容的动态效果。设置层文本行为的对象一般是超链接。通置层文本行为的对象一般是超链接。通过编写过编写HTMLHTML代码及代码及HTMLHTML文本来实现动态文本来实现动态效果。效果。第五章第五章 使用表格和使用表格和Div布局网页布局网页例如:当鼠标放在超链接上时显示例如:当鼠标放在超链接上时显示相应内容,当鼠标移开时恢复原始相应内容,当鼠标移开时恢复原始显示状态。显示状态。第五章第五章 使用表格和使用表格和Div布局网页布局网页7 7、制作弹出式菜单、制作弹出式菜单 弹出式菜单一般用于超链接、图片,弹出式菜单一般用于超链接、图片,在在DWDW中制作弹出式菜

28、单有两种方法:中制作弹出式菜单有两种方法: (1 1)使用显示)使用显示- -隐藏层行为,在层内设隐藏层行为,在层内设置超链接标记。置超链接标记。 (2 2)使用)使用“显示弹出式菜单显示弹出式菜单”行为。行为。第五章第五章 使用表格和使用表格和Div布局网页布局网页第五章第五章 使用表格和使用表格和Div布局网页布局网页8、播放声音、播放声音 播放声音行为对象可以是播放声音行为对象可以是(onload事件)、超链接事件)、超链接(onClick事件)或图像。在事件发生时,事件)或图像。在事件发生时,打开播放器,自动播放指定的声音文件。打开播放器,自动播放指定的声音文件。第五章第五章 使用表格

29、和使用表格和Div布局网页布局网页9 9、控制播放、控制播放flashflash动画动画 控制播放控制播放flashflash动画行为对象一般是超动画行为对象一般是超链接标记或链接标记或flashflash按钮。按钮。注意注意:(1)Flash:(1)Flash动画必须命名后才能控制动画必须命名后才能控制 (2)(2)播放控制只能控制播放控制只能控制FlashFlash主时间主时间轴动画,对于影片剪辑不能控制。轴动画,对于影片剪辑不能控制。第五章第五章 使用表格和使用表格和Div布局网页布局网页时间轴时间轴 时间轴用于在网页中制作一些简单的时间轴用于在网页中制作一些简单的“层层”移动动画。如图

30、像、文字的简单移动,移动动画。如图像、文字的简单移动,常见的网页飘动广告等。常见的网页飘动广告等。 所谓所谓“层层”移动动画就是说时间轴只能移动动画就是说时间轴只能移动层。若要使图像或文本移动,就必须移动层。若要使图像或文本移动,就必须将图像、文本等内容插入到一个层内。将图像、文本等内容插入到一个层内。第五章第五章 使用表格和使用表格和Div布局网页布局网页时间轴面板时间轴面板第五章第五章 使用表格和使用表格和Div布局网页布局网页简单时间轴面板简单时间轴面板1、直线时间轴动画 可以实现层的直线移动。层内放置图片或文字时,形成图像、文字移动效果第五章第五章 使用表格和使用表格和Div布局网页布

31、局网页习题:制作一网页,实现图片从左到右习题:制作一网页,实现图片从左到右(从上到下)的移动效果。(从上到下)的移动效果。注意:当时间轴的探头放在不同位置时,注意:当时间轴的探头放在不同位置时,所达到的动画效果不一样。所达到的动画效果不一样。第五章第五章 使用表格和使用表格和Div布局网页布局网页2、曲线时间轴动画、曲线时间轴动画 可以实现层的元素沿着某一预先定可以实现层的元素沿着某一预先定义的曲线运动。义的曲线运动。制作方法制作方法:(1)在直线动画的时间轴中添加若干关)在直线动画的时间轴中添加若干关键帧,然后拖动层键帧,然后拖动层(2)在时间轴快捷菜单中选择)在时间轴快捷菜单中选择“录制层

32、录制层路径路径”,然后拖动层,然后拖动层第五章第五章 使用表格和使用表格和Div布局网页布局网页习题:制作一页面,在该页面层内插入习题:制作一页面,在该页面层内插入网页元素,利用时间轴面板,制作该层网页元素,利用时间轴面板,制作该层的曲线移动动画。的曲线移动动画。第五章第五章 使用表格和使用表格和Div布局网页布局网页思考:思考:1、在曲线时间轴动画(或直线时间轴动画)、在曲线时间轴动画(或直线时间轴动画)中,如何限定动画播放的时间。中,如何限定动画播放的时间。2、在曲线时间轴动画(或直线时间轴动画)、在曲线时间轴动画(或直线时间轴动画)中,当页面打开中,当页面打开3s后,动画才开始播放,后,

33、动画才开始播放,即页面打开的前即页面打开的前3s动画处于静止状态动画处于静止状态第五章第五章 使用表格和使用表格和Div布局网页布局网页 时间轴行为包括针对时间轴的行为和时时间轴行为包括针对时间轴的行为和时间轴行为通道中的帧行为。间轴行为通道中的帧行为。1 1、播放时间轴和停止时间轴行为、播放时间轴和停止时间轴行为 针对时间轴行为的一般动作是针对时间轴行为的一般动作是播放时间播放时间轴和停止时间轴轴和停止时间轴。行为对象一般是行为对象一般是标标签,签,标签和层。标签和层。时间轴行为时间轴行为时间轴行为时间轴行为例如:当鼠标停在飘动的广告上及例如:当鼠标停在飘动的广告上及移开时所引发的事件。移开

34、时所引发的事件。2 2、行为通道帧行为、行为通道帧行为 选中时间轴面板行为通道中的某个帧,选中时间轴面板行为通道中的某个帧,就可以在就可以在“行为行为”面板中为该帧添加行为。面板中为该帧添加行为。帧对象的行为事件一般是帧对象的行为事件一般是“onFrameonFrame帧编帧编号号”,即执行到该帧时发生的动作。,即执行到该帧时发生的动作。 行为动作一般是显示行为动作一般是显示- -隐藏层,转到隐藏层,转到时间轴时间轴n n帧等。一个帧中添加了行为之后,帧等。一个帧中添加了行为之后,该帧上将出现该帧上将出现“-”-”。 时间轴行为时间轴行为时间轴行为习题习题: 制作一网页制作一网页,要求在该页面

35、中有一闪要求在该页面中有一闪动的图片,时间间隔为动的图片,时间间隔为2秒钟。(例如:秒钟。(例如:在夜空中一些星星一闪一闪)在夜空中一些星星一闪一闪)时间轴行为习题习题 :在网页中制作一飘动的广告,当:在网页中制作一飘动的广告,当鼠标放在该广告上时,图片停止运动,鼠标放在该广告上时,图片停止运动,当鼠标移开时,图片继续运行。当鼠标移开时,图片继续运行。 网页上有多个对象的动画分成两种情况:网页上有多个对象的动画分成两种情况:分时移动和同时移动。分时移动和同时移动。 在制作方式上有同一动画层、不同动画层在制作方式上有同一动画层、不同动画层和不同时间轴三种方法。和不同时间轴三种方法。多对象移动动画

36、多对象移动动画1、多对象分时移动动画、多对象分时移动动画 多对象分时移动动画是在同一时间轴内,多对象分时移动动画是在同一时间轴内,各个对象分时移动的动画。各个对象分时移动的动画。 多对象移动动画多对象移动动画多对象移动动画例如:制作一个网页,一个图象从例如:制作一个网页,一个图象从窗口左方移动到窗口右方,然后其窗口左方移动到窗口右方,然后其图像区域由大变小(或由小变大),图像区域由大变小(或由小变大),最后消失。最后消失。多对象移动动画分析:分析:1、图像从左到右移动、图像从左到右移动2、图片由大到小:注意设置层的溢出属性,、图片由大到小:注意设置层的溢出属性,且由大到小必须是拖动层的左上角且

37、由大到小必须是拖动层的左上角。3、图片最后消失:设置层的、图片最后消失:设置层的显示显示-隐藏层隐藏层行为行为2、多对象同时运动、多对象同时运动 当多个对象层需要同时运动,或者在时当多个对象层需要同时运动,或者在时间上有重叠时只能使用多个动画通道层完间上有重叠时只能使用多个动画通道层完成。成。多对象移动动画多对象移动动画多对象移动动画例如:制作时间动画让文字例如:制作时间动画让文字“欢迎欢迎光临光临”从右边从右边同一位置同一位置向左拉开。向左拉开。每个字的动作时间为两秒,动作相每个字的动作时间为两秒,动作相互间间隔为互间间隔为1秒,最后一字区域原秒,最后一字区域原地从小到大展开。地从小到大展开

38、。多对象移动动画分析:分析:1、文字从、文字从同一位置同一位置从右到左运动,运行时从右到左运动,运行时间为间为2秒,每个字之间的时间间隔为秒,每个字之间的时间间隔为1秒秒2、 最后一字原地从小到大展开最后一字原地从小到大展开3、多时间轴动画、多时间轴动画 在多对象动画中,如果使用播放时间轴在多对象动画中,如果使用播放时间轴和停止时间轴行为,停止时间轴后所有对象和停止时间轴行为,停止时间轴后所有对象的移动都被停止。如果需要避免这种干扰,的移动都被停止。如果需要避免这种干扰,就需要使用多时间轴动画。就需要使用多时间轴动画。多对象移动动画多对象移动动画例如:与飘动广告结合在一起,并例如:与飘动广告结

39、合在一起,并且当鼠标移动到飘动的广告上面时,且当鼠标移动到飘动的广告上面时,广告图像停止移动;当鼠标移开时,广告图像停止移动;当鼠标移开时,广告图像继续飘动,但不影响网页广告图像继续飘动,但不影响网页中文本从左到右逐渐变大的移动动中文本从左到右逐渐变大的移动动画画多对象移动动画多对象移动动画第五章第五章 使用表格和使用表格和Div布局网页布局网页创建创建Div Div是网页布局中一个非常重要的对是网页布局中一个非常重要的对象。在象。在DW中主要包括中主要包括Div标签及标签及Ap Div两种对象。两种对象。第五章第五章 使用表格和使用表格和Div布局网页布局网页Div标签和标签和Ap Div严

40、格意义上说是相同严格意义上说是相同的对象,即都是的对象,即都是标签,但由于采标签,但由于采用了不同的用了不同的CSS样式定义,两者在外观样式定义,两者在外观及属性上有了不同的表现。及属性上有了不同的表现。第五章第五章 使用表格和使用表格和Div布局网页布局网页Div标签默认状态下不能移动,也不具有标签默认状态下不能移动,也不具有重叠属性,因此常用于网页布局。重叠属性,因此常用于网页布局。第五章第五章 使用表格和使用表格和Div布局网页布局网页例题:如图所示,利用例题:如图所示,利用Div+CSS制作该制作该网页网页使用表格和使用表格和Div布局网页布局网页分析:分析:1、内容显示区域:宽度、内

41、容显示区域:宽度640像素,高度像素,高度200像素,内容居中像素,内容居中价格:右对齐,字体颜色为红色价格:右对齐,字体颜色为红色2、每个图像显示区域:宽度、每个图像显示区域:宽度150像素,像素,高度高度100像素,浮动效果为左对齐,边像素,浮动效果为左对齐,边界均为界均为5像素,边框样式均为实线、像素,边框样式均为实线、1像像素、颜色为蓝色,对于溢出区域隐藏素、颜色为蓝色,对于溢出区域隐藏使用表格和使用表格和Div布局网页布局网页3、价格:行高为、价格:行高为20像素,字体颜色为红色,像素,字体颜色为红色,文本左对齐,方框宽文本左对齐,方框宽80、高、高20像素,浮动像素,浮动效果为左对

42、齐,清除两者,溢出部分隐藏效果为左对齐,清除两者,溢出部分隐藏4、已售:字体大小、已售:字体大小18像素,行高像素,行高20像素,像素,字体颜色为红色,背景颜色为黄色,文本居字体颜色为红色,背景颜色为黄色,文本居中对齐,方框宽中对齐,方框宽60%、高、高20像素,浮动为像素,浮动为右对齐,清除两者,溢出部分隐藏右对齐,清除两者,溢出部分隐藏使用表格和使用表格和Div布局网页布局网页5、图像:宽度和高度为、图像:宽度和高度为100像素,清除两像素,清除两者,上下边界为者,上下边界为15像素像素第五章第五章 使用表格和使用表格和Div布局网页布局网页练习:利用练习:利用Div+CSS布局,制作一考试布局,制作一考试网站网站练习:利用练习:利用Div+CSS布局,根据自己主布局,根据自己主题制作一网站题制作一网站第五章第五章 使用表格和使用表格和Div布局网页布局网页

展开阅读全文
相关资源
正为您匹配相似的精品文档
相关搜索

最新文档


当前位置:首页 > 办公文档 > 教学/培训

电脑版 |金锄头文库版权所有
经营许可证:蜀ICP备13022795号 | 川公网安备 51140202000112号