第七讲层与行为.pptVIP

第七讲　层与行为 层的基本概念 层的创建与管理 层的操作 嵌套层 层的基本概念 div标签与层的定义 该标签用来定义网页上一个特定区域 区域里可以包含文字、图片和表格等网页元素 区域可以重叠 常被用于网页布局 div标签所定义的对象称为一个“层”； 层的定位 “position”属性：指采用什么方式设定层的位置 “left”属性：设置层的左边缘到网页的左端的距离 “top”属性：设置层的上连缘到网页最顶端的距离 图层的“Z轴” 图层可以重叠 为表示各图层的上下位置，故给每个图层一个序号，该序号称为“Z轴” 序号值可取正、负和零。数值大的层在上面 “z-index”属性：改变层的重叠顺序。 层的特点： 层是可移动的，表格是不可移动的。 层是三维的（x，y，z三轴），表格是二维的。 层具有可见性，可以隐藏。 层的标签是div id=“层id”/div，也可以使用span/span标签。其属性不写在标签中，而是以CSS样式的id选择符写在head部分，故在body部分的代码十分简洁 。 层的创建与管理 创建层的方法（3种）： “插入”-“布局对象”-“层”命令 把“绘制层”按钮从“插入”面板中拖到“文档”窗口 在“插入”面板的“布局”栏中单击“绘制层”按钮，在“文档”窗口中拖动鼠标即可 “层”面板 改变层的可见性 改变层的堆叠顺序 在“Z”列中，单击要改变的层的数字 选择层并上下拖动 禁止层重叠 选定一个或多个层：按住shift键拖动鼠标 建立嵌套层：按住ctrl键将其拖动到目标层 取消嵌套关系：将子层拖离父层 层的操作 选择层 在“层”面板中选择层 在“文档”窗口中选择层 单击层左上角的选择柄 单击一个层的边框 在一个层中按住“Ctrl+Shift”组合键并单击 在“设计”视图中，单击层锚记 两者都可借助shift键选择多个层 调整层的大小 调整一个层的大小：拖拽层四周的控制柄 同时调整多个层的大小 在“设计”视图中选择两个或更多个层 “修改-排列顺序-设成高度相同”或宽度相同命令 在“属性”面板中输入“宽”和“高”的值 移动层 拖拽层左上角的方形标签 对齐层 选中欲对齐的多个层 执行菜单命令“修改”|“排列顺序”下左对齐、右对齐、对齐上缘和对齐下缘等子命令，以黑色控制柄的层作为对齐的标准。 设置层的属性 图4-14 单个层的属性面板 图4-15 多个层的属性面板 将层靠齐到网格 首先显示网格 选中“靠齐到网格”复选框 选择层并拖拽，当其靠近网格线一定距离时，会自动跳到最近的靠齐位置 层的简单应用 图片和文字的层次建立(16.5) 使用层实现文字特效(16.6) 把层转换为表格（17.1） 显示或隐藏图层（17.2） 浮动广告条（index.html) 时间轴 时间轴只能移动层： 创建一个层，在其内插入图片。 选择层，拖入时间线面板中。 选中动画对象条末尾的关键帧，把层移动到动画结束位置。 时间轴面板 时间轴面板 使用行为 关于行为(Behavior) ： 行为是事件(Event)和动作(JavaScript Action)的组合 它会在网页中设置一系列动作 事件：触发动态效果的条件。如：单击鼠标，加载页面等 动作：通常是一段JavaScript脚本程序，利用这段程序可完成相应的任务，如弹出信息、播放声音等。 添加和编辑行为 添加行为 为对象附加行为：选中对象 － 打开行为面板 － 选动作，改参数 － 默认事件出现，可修改事件及浏览器版本 为时间线附加行为 编辑行为 修改参数：双击行为面板上的一个行为。 删除行为：选中行为，点击减号框。 修改行为顺序：选中行为，点击▼▲按钮。 修改事件：点事件选择钮 Show Event For改浏览器版本 系统自带行为 实践与练习： 交换图像与恢复交换图像（20.1） 打开浏览器窗口（20.2） 控制Flash播放（20.3） 在状态栏显示消息（question.html) 显示隐藏层（7-11） 例7-1 层的位置以HTML默认的位置来设置 static 层的位置以其原始值的位置来设置 relative 层的位置以网页的左上角为基准来设置 absolute 说明 设置值 例7-2 例7-4