第七讲层与行为精选文档.ppt

《第七讲层与行为精选文档.ppt》由会员分享，可在线阅读，更多相关《第七讲层与行为精选文档.ppt（19页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第七讲层与行为第七讲层与行为本讲稿第一页，共十九页l l层的基本概念层的基本概念l l层的创建与管理层的创建与管理l l层的操作层的操作l l嵌套层嵌套层本讲稿第二页，共十九页层的基本概念层的基本概念l l标签与层的定义标签与层的定义该标签用来定义网页上一个特定区域该标签用来定义网页上一个特定区域区域里可以包含文字、图片和表格等网页元素区域里可以包含文字、图片和表格等网页元素区域可以重叠区域可以重叠常被用于网页布局常被用于网页布局l l标签所定义的对象称为一个标签所定义的对象称为一个“层层”；例例7-1本讲稿第三页，共十九页l l层的定位层的定位“position”position”属性：指采

2、用什么方式设定层的位置属性：指采用什么方式设定层的位置属性：指采用什么方式设定层的位置属性：指采用什么方式设定层的位置“left”left”属性：设置层的左边缘到网页的左端的距离属性：设置层的左边缘到网页的左端的距离属性：设置层的左边缘到网页的左端的距离属性：设置层的左边缘到网页的左端的距离“top”top”属性：设置层的上连缘到网页最顶端的距离属性：设置层的上连缘到网页最顶端的距离属性：设置层的上连缘到网页最顶端的距离属性：设置层的上连缘到网页最顶端的距离设置值设置值说明说明absoluteabsolute层的位置以网页的左上角为基准来设置层的位置以网页的左上角为基准来设置relativer

3、elative层的位置以其原始值的位置来设置层的位置以其原始值的位置来设置staticstatic层的位置以层的位置以HTMLHTML默认的位置来设置默认的位置来设置例例7-2本讲稿第四页，共十九页l l图层的图层的“Z轴轴”图层可以重叠图层可以重叠为表示各图层的上下位置，故给每个图层一个为表示各图层的上下位置，故给每个图层一个序号，该序号称为序号，该序号称为“Z轴轴”序号值可取正、负和零。数值大的层在上面序号值可取正、负和零。数值大的层在上面“z-index”属性：改变层的重叠顺序。属性：改变层的重叠顺序。例例7-4本讲稿第五页，共十九页l l层的特点：层的特点：层是可移动的，表格是不可移动

4、的。层是可移动的，表格是不可移动的。层是三维的（层是三维的（x，y，z三轴），表格是二维的。三轴），表格是二维的。层具有可见性，可以隐藏。层具有可见性，可以隐藏。层的标签是层的标签是，也可以使，也可以使用用标签。其属性不写在标签中，标签。其属性不写在标签中，而是以而是以CSS样式的样式的id选择符写在选择符写在部分，部分，故在故在部分的代码十分简洁部分的代码十分简洁。本讲稿第六页，共十九页层的创建与管理层的创建与管理l l创建层的方法（创建层的方法（3种）：种）：“插入插入插入插入”-“-“布局对象布局对象布局对象布局对象”-“-“层层层层”命令命令命令命令把把把把“绘制层绘制层绘制层绘制层”

5、按钮从按钮从按钮从按钮从“插入插入插入插入”面板中拖到面板中拖到面板中拖到面板中拖到“文档文档文档文档”窗口窗口窗口窗口在在在在“插入插入插入插入”面板的面板的面板的面板的“布局布局布局布局”栏中单击栏中单击栏中单击栏中单击“绘制层绘制层绘制层绘制层”按钮，在按钮，在按钮，在按钮，在“文档文档文档文档”窗口中拖动鼠标即可窗口中拖动鼠标即可窗口中拖动鼠标即可窗口中拖动鼠标即可本讲稿第七页，共十九页l l“层层”面板面板改变层的可见性改变层的可见性改变层的可见性改变层的可见性改变层的堆叠顺序改变层的堆叠顺序改变层的堆叠顺序改变层的堆叠顺序 在在在在“Z”Z”列中，单击要列中，单击要列中，单击要列中

6、，单击要改变的层的数字改变的层的数字改变的层的数字改变的层的数字 选择层并上下拖动选择层并上下拖动选择层并上下拖动选择层并上下拖动禁止层重叠禁止层重叠禁止层重叠禁止层重叠选定一个或多个层：选定一个或多个层：选定一个或多个层：选定一个或多个层：按住按住按住按住shiftshift键拖动鼠标键拖动鼠标键拖动鼠标键拖动鼠标建立嵌套层：按住建立嵌套层：按住建立嵌套层：按住建立嵌套层：按住ctrlctrl键将其拖动到目键将其拖动到目键将其拖动到目键将其拖动到目标层标层标层标层取消嵌套关系：将子取消嵌套关系：将子取消嵌套关系：将子取消嵌套关系：将子层拖离父层层拖离父层层拖离父层层拖离父层本讲稿第八页，共十

7、九页层的操作层的操作l l选择层选择层在在“层层”面板中选择层面板中选择层在在“文档文档”窗口中选择层窗口中选择层 单击层左上角的选择柄单击层左上角的选择柄单击层左上角的选择柄单击层左上角的选择柄 单击一个层的边框单击一个层的边框单击一个层的边框单击一个层的边框 在一个层中按住在一个层中按住在一个层中按住在一个层中按住“Ctrl+Shift”Ctrl+Shift”组合键并单击组合键并单击组合键并单击组合键并单击 在在在在“设计设计设计设计”视图中，单击层锚记视图中，单击层锚记视图中，单击层锚记视图中，单击层锚记两者都可借助两者都可借助shift键选择多个层键选择多个层本讲稿第九页，共十九页l

8、l调整层的大小调整层的大小调整一个层的大小：拖拽层四周的控制柄调整一个层的大小：拖拽层四周的控制柄同时调整多个层的大小同时调整多个层的大小 在在在在“设计设计设计设计”视图中选择两个或更多个层视图中选择两个或更多个层视图中选择两个或更多个层视图中选择两个或更多个层“修改修改修改修改-排列顺序排列顺序排列顺序排列顺序-设成高度相同设成高度相同设成高度相同设成高度相同”或宽度相同命或宽度相同命或宽度相同命或宽度相同命令令令令 在在在在“属性属性属性属性”面板中输入面板中输入面板中输入面板中输入“宽宽宽宽”和和和和“高高高高”的值的值的值的值本讲稿第十页，共十九页l l移动层移动层拖拽层左上角的方形

9、标签拖拽层左上角的方形标签l l对齐层对齐层选中欲对齐的多个层选中欲对齐的多个层执行菜单命令执行菜单命令“修改修改”|“排列顺序排列顺序”下左对下左对齐、右对齐、对齐上缘和对齐下缘等子命令，齐、右对齐、对齐上缘和对齐下缘等子命令，以黑色控制柄的层作为对齐的标准。以黑色控制柄的层作为对齐的标准。本讲稿第十一页，共十九页l l设置层的属性设置层的属性图图图图4-14 4-14 单个层的属性面板单个层的属性面板单个层的属性面板单个层的属性面板图图图图4-15 4-15 多个层的属性面板多个层的属性面板多个层的属性面板多个层的属性面板本讲稿第十二页，共十九页l l将层靠齐到网格将层靠齐到网格首先显示网

10、格首先显示网格选中选中“靠齐到网格靠齐到网格”复选框复选框选择层并拖拽，当其靠近网格线一定距离时，选择层并拖拽，当其靠近网格线一定距离时，会自动跳到最近的靠齐位置会自动跳到最近的靠齐位置本讲稿第十三页，共十九页l l层的简单应用层的简单应用图片和文字的层次建立图片和文字的层次建立(16.5)使用层实现文字特效使用层实现文字特效(16.6)把层转换为表格（把层转换为表格（17.1）显示或隐藏图层（显示或隐藏图层（17.2）浮动广告条（浮动广告条（index.html)本讲稿第十四页，共十九页时间轴时间轴时间轴只能移动层：时间轴只能移动层：l l创建一个层，在其内插入图片。创建一个层，在其内插入图

11、片。l l选择层，拖入时间线面板中。选择层，拖入时间线面板中。l l选中动画对象条末尾的关键帧，把层移选中动画对象条末尾的关键帧，把层移动到动画结束位置。动到动画结束位置。本讲稿第十五页，共十九页时间轴面板时间轴面板时间轴面板时间轴面板时间轴面板时间轴面板本讲稿第十六页，共十九页使用行为使用行为l l关于行为关于行为(Behavior)：行为是事件行为是事件行为是事件行为是事件(Event)(Event)和动作和动作和动作和动作(JavaScript Action)(JavaScript Action)的组合的组合的组合的组合它会在网页中设置一系列动作它会在网页中设置一系列动作它会在网页中设置

12、一系列动作它会在网页中设置一系列动作l l事件：事件：触发动态效果的条件。如：单击鼠标，加载页面触发动态效果的条件。如：单击鼠标，加载页面触发动态效果的条件。如：单击鼠标，加载页面触发动态效果的条件。如：单击鼠标，加载页面等等等等l l动作：动作：通常是一段通常是一段通常是一段通常是一段JavaScriptJavaScript脚本程序，利用这段程脚本程序，利用这段程脚本程序，利用这段程脚本程序，利用这段程序可完成相应的任务，如弹出信息、播放声音等。序可完成相应的任务，如弹出信息、播放声音等。序可完成相应的任务，如弹出信息、播放声音等。序可完成相应的任务，如弹出信息、播放声音等。本讲稿第十七页，

13、共十九页添加和编辑行为添加和编辑行为l l 添加行为添加行为为对象附加行为：为对象附加行为：选中对象选中对象 打开行为面板打开行为面板 选动作选动作，改参数改参数 默认事件出现默认事件出现，可修改事可修改事件及浏览器版本件及浏览器版本 为时间线附加行为为时间线附加行为l l 编辑行为编辑行为修改参数：双击行为面板上的一个行为。修改参数：双击行为面板上的一个行为。删除行为：选中行为，点击减号框。删除行为：选中行为，点击减号框。修改行为顺序：选中行为，点击修改行为顺序：选中行为，点击按钮。按钮。修改事件：点事件选择钮修改事件：点事件选择钮 Show Event For改浏览改浏览器版本器版本l l 系统自带行为系统自带行为本讲稿第十八页，共十九页l l实践与练习：实践与练习：交换图像与恢复交换图像（交换图像与恢复交换图像（20.1）打开浏览器窗口（打开浏览器窗口（20.2）控制控制Flash播放（播放（20.3）在状态栏显示消息（在状态栏显示消息（question.html)显示隐藏层（显示隐藏层（7-11）本讲稿第十九页，共十九页