第七讲层与行为PPT讲稿.ppt

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

1、第七讲层与行为第七讲层与行为第1页，共19页，编辑于2022年，星期二l l层的基本概念层的基本概念l l层的创建与管理层的创建与管理l l层的操作层的操作l l嵌套层嵌套层第2页，共19页，编辑于2022年，星期二层的基本概念层的基本概念l l标签与层的定义标签与层的定义该标签用来定义网页上一个特定区域该标签用来定义网页上一个特定区域区域里可以包含文字、图片和表格等网页元素区域里可以包含文字、图片和表格等网页元素区域可以重叠区域可以重叠常被用于网页布局常被用于网页布局l l标签所定义的对象称为一个标签所定义的对象称为一个“层层”；例例7-1第3页，共19页，编辑于2022年，星期二l l层的

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

3、准来设置层的位置以网页的左上角为基准来设置relativerelative层的位置以其原始值的位置来设置层的位置以其原始值的位置来设置staticstatic层的位置以层的位置以HTMLHTML默认的位置来设置默认的位置来设置例例7-2第4页，共19页，编辑于2022年，星期二l l图层的图层的“Z轴轴”图层可以重叠图层可以重叠为表示各图层的上下位置，故给每个图层一个为表示各图层的上下位置，故给每个图层一个序号，该序号称为序号，该序号称为“Z轴轴”序号值可取正、负和零。数值大的层在上面序号值可取正、负和零。数值大的层在上面“z-index”属性：改变层的重叠顺序。属性：改变层的重叠顺序。例例7

4、-4第5页，共19页，编辑于2022年，星期二l l层的特点：层的特点：层是可移动的，表格是不可移动的。层是可移动的，表格是不可移动的。层是三维的（层是三维的（x，y，z三轴），表格是二维的。三轴），表格是二维的。层具有可见性，可以隐藏。层具有可见性，可以隐藏。层的标签是层的标签是，也可以使，也可以使用用标签。其属性不写在标签中，标签。其属性不写在标签中，而是以而是以CSS样式的样式的id选择符写在选择符写在部分，部分，故在故在部分的代码十分简洁部分的代码十分简洁。第6页，共19页，编辑于2022年，星期二层的创建与管理层的创建与管理l l创建层的方法（创建层的方法（3种）：种）：“插入插入插

5、入插入”-“-“布局对象布局对象布局对象布局对象”-“-“层层层层”命令命令命令命令把把把把“绘制层绘制层绘制层绘制层”按钮从按钮从按钮从按钮从“插入插入插入插入”面板中拖到面板中拖到面板中拖到面板中拖到“文档文档文档文档”窗口窗口窗口窗口在在在在“插入插入插入插入”面板的面板的面板的面板的“布局布局布局布局”栏中单击栏中单击栏中单击栏中单击“绘制层绘制层绘制层绘制层”按钮，按钮，按钮，按钮，在在在在“文档文档文档文档”窗口中拖动鼠标即可窗口中拖动鼠标即可窗口中拖动鼠标即可窗口中拖动鼠标即可第7页，共19页，编辑于2022年，星期二l l“层层”面板面板改变层的可见性改变层的可见性改变层的可见

6、性改变层的可见性改变层的堆叠顺序改变层的堆叠顺序改变层的堆叠顺序改变层的堆叠顺序 在在在在“Z”Z”列中，单击要列中，单击要列中，单击要列中，单击要改变的层的数字改变的层的数字改变的层的数字改变的层的数字 选择层并上下拖动选择层并上下拖动选择层并上下拖动选择层并上下拖动禁止层重叠禁止层重叠禁止层重叠禁止层重叠选定一个或多个层：选定一个或多个层：选定一个或多个层：选定一个或多个层：按住按住按住按住shiftshift键拖动鼠标键拖动鼠标键拖动鼠标键拖动鼠标建立嵌套层：按住建立嵌套层：按住建立嵌套层：按住建立嵌套层：按住ctrlctrl键将其拖动到目标键将其拖动到目标键将其拖动到目标键将其拖动到目

7、标层层层层取消嵌套关系：将子取消嵌套关系：将子取消嵌套关系：将子取消嵌套关系：将子层拖离父层层拖离父层层拖离父层层拖离父层第8页，共19页，编辑于2022年，星期二层的操作层的操作l l选择层选择层在在“层层”面板中选择层面板中选择层在在“文档文档”窗口中选择层窗口中选择层 单击层左上角的选择柄单击层左上角的选择柄单击层左上角的选择柄单击层左上角的选择柄 单击一个层的边框单击一个层的边框单击一个层的边框单击一个层的边框 在一个层中按住在一个层中按住在一个层中按住在一个层中按住“Ctrl+Shift”Ctrl+Shift”组合键并单击组合键并单击组合键并单击组合键并单击 在在在在“设计设计设计设

8、计”视图中，单击层锚记视图中，单击层锚记视图中，单击层锚记视图中，单击层锚记两者都可借助两者都可借助shift键选择多个层键选择多个层第9页，共19页，编辑于2022年，星期二l l调整层的大小调整层的大小调整一个层的大小：拖拽层四周的控制柄调整一个层的大小：拖拽层四周的控制柄同时调整多个层的大小同时调整多个层的大小 在在在在“设计设计设计设计”视图中选择两个或更多个层视图中选择两个或更多个层视图中选择两个或更多个层视图中选择两个或更多个层“修改修改修改修改-排列顺序排列顺序排列顺序排列顺序-设成高度相同设成高度相同设成高度相同设成高度相同”或宽度相同命或宽度相同命或宽度相同命或宽度相同命令令

9、令令 在在在在“属性属性属性属性”面板中输入面板中输入面板中输入面板中输入“宽宽宽宽”和和和和“高高高高”的值的值的值的值第10页，共19页，编辑于2022年，星期二l l移动层移动层拖拽层左上角的方形标签拖拽层左上角的方形标签l l对齐层对齐层选中欲对齐的多个层选中欲对齐的多个层执行菜单命令执行菜单命令“修改修改”|“排列顺序排列顺序”下左对下左对齐、右对齐、对齐上缘和对齐下缘等子命令，齐、右对齐、对齐上缘和对齐下缘等子命令，以黑色控制柄的层作为对齐的标准。以黑色控制柄的层作为对齐的标准。第11页，共19页，编辑于2022年，星期二l l设置层的属性设置层的属性图图图图4-14 4-14 单

10、个层的属性面板单个层的属性面板单个层的属性面板单个层的属性面板图图图图4-15 4-15 多个层的属性面板多个层的属性面板多个层的属性面板多个层的属性面板第12页，共19页，编辑于2022年，星期二l l将层靠齐到网格将层靠齐到网格首先显示网格首先显示网格选中选中“靠齐到网格靠齐到网格”复选框复选框选择层并拖拽，当其靠近网格线一定距离时，选择层并拖拽，当其靠近网格线一定距离时，会自动跳到最近的靠齐位置会自动跳到最近的靠齐位置第13页，共19页，编辑于2022年，星期二l l层的简单应用层的简单应用图片和文字的层次建立图片和文字的层次建立(16.5)使用层实现文字特效使用层实现文字特效(16.6

11、)把层转换为表格（把层转换为表格（17.1）显示或隐藏图层（显示或隐藏图层（17.2）浮动广告条（浮动广告条（index.html)第14页，共19页，编辑于2022年，星期二时间轴时间轴时间轴只能移动层：时间轴只能移动层：l l创建一个层，在其内插入图片。创建一个层，在其内插入图片。l l选择层，拖入时间线面板中。选择层，拖入时间线面板中。l l选中动画对象条末尾的关键帧，把层移选中动画对象条末尾的关键帧，把层移动到动画结束位置。动到动画结束位置。第15页，共19页，编辑于2022年，星期二时间轴面板时间轴面板时间轴面板时间轴面板时间轴面板时间轴面板第16页，共19页，编辑于2022年，星期

12、二使用行为使用行为l l关于行为关于行为(Behavior)：行为是事件行为是事件行为是事件行为是事件(Event)(Event)和动作和动作和动作和动作(JavaScript Action)(JavaScript Action)的组合的组合的组合的组合它会在网页中设置一系列动作它会在网页中设置一系列动作它会在网页中设置一系列动作它会在网页中设置一系列动作l l事件：事件：触发动态效果的条件。如：单击鼠标，加载触发动态效果的条件。如：单击鼠标，加载触发动态效果的条件。如：单击鼠标，加载触发动态效果的条件。如：单击鼠标，加载页面等页面等页面等页面等l l动作：动作：通常是一段通常是一段通常是一段

13、通常是一段JavaScriptJavaScript脚本程序，利用这段程脚本程序，利用这段程脚本程序，利用这段程脚本程序，利用这段程序可完成相应的任务，如弹出信息、播放声音等。序可完成相应的任务，如弹出信息、播放声音等。序可完成相应的任务，如弹出信息、播放声音等。序可完成相应的任务，如弹出信息、播放声音等。第17页，共19页，编辑于2022年，星期二添加和编辑行为添加和编辑行为l l 添加行为添加行为为对象附加行为：为对象附加行为：选中对象选中对象 打开行为面板打开行为面板 选动作选动作，改参数改参数 默认事件出现默认事件出现，可修改事可修改事件及浏览器版本件及浏览器版本 为时间线附加行为为时间

14、线附加行为l l 编辑行为编辑行为修改参数：双击行为面板上的一个行为。修改参数：双击行为面板上的一个行为。删除行为：选中行为，点击减号框。删除行为：选中行为，点击减号框。修改行为顺序：选中行为，点击修改行为顺序：选中行为，点击按钮。按钮。修改事件：点事件选择钮修改事件：点事件选择钮 Show Event For改浏览改浏览器版本器版本l l 系统自带行为系统自带行为第18页，共19页，编辑于2022年，星期二l l实践与练习：实践与练习：交换图像与恢复交换图像（交换图像与恢复交换图像（20.1）打开浏览器窗口（打开浏览器窗口（20.2）控制控制Flash播放（播放（20.3）在状态栏显示消息（在状态栏显示消息（question.html)显示隐藏层（显示隐藏层（7-11）第19页，共19页，编辑于2022年，星期二