网页制作技术（第二版）-电子教案-许莉15.任务十五应用层与行为.pptVIP

网页制作技术（第二版） 主编 许莉 中国水利水电出版社 网页设计与制作 学习目标 理解层的含义和特点 掌握插入层、设置层属性的方法 利用层进行排版布局 理解行为和事件的概念 掌握行为面板的使用 掌握行为的应用方法 本章结束 尚辅网 / 任务十五 应用层与行为 任务十五 应用层与行为 目录： 知识1 层的特点 知识2 插入层 知识3 设置层的属性 知识4 改变层的次序 知识5 删除层 知识6 层与表格的转换 知识7 行为 任务十五 应用层与行为 任务1 应用层制作网页 任务2 制作弹出信息 任务3 设置状态栏文本 任务4 打开浏览器窗口 任务5 交换图像 任务6 控制Shockwave或Flash 任务7 播放声音 任务8 检查表单 知识1 层的特点 层是一种 HTML 页面元素，可以将它定位在页面上的任意位置。层可以包含文本、图像、动画、视频等任何可在 HTML 文档正文中插入的内容。Dreamweaver CS4可以方便地在页面上创建层并精确地将层进行定位，还可以创建嵌套层。 层在网页的定位中使用非常广泛，也十分方便。但用层设计的网页在不同分辨率的显示器上显示时有时会出现错位现象，不容易准确定位。因此层常作为附属工具配合表格、框架等技术来对网页进行设计。 知识2 插入层 在编辑窗口的“设计视图”中可直接绘制一个或多个层。 在“插入栏”的“布局”选项卡中单击“描绘层”按钮，拖动鼠标即可绘制一个层，如按住【Ctrl】键并拖动可连续绘制多个层。 知识3 设置层的属性 “层编号”列表框设置层的名称。 “左”数值框设置层左边相对于页面左边或父图层左边的距离。 “上”数值框设置层顶端相对于页面顶端或父图层顶端的距离。 “宽”和“高”数值框分别设置层的宽度和高度。 “Z轴”数值框中设置层在Z方向上的值，设置嵌套层在文档中的重叠顺序，较高值的子层位于较低值的子层上方。 “可见性”下拉列表设置层的可见性：“default”为默认值，表示层的可见性由浏览器决定，“inherit”为继承其父层的可见性，“visible”为显示层，“hidden”为隐藏层。 “背景图像”文本框设置背景图像的路径。 “背景颜色”设置层的背景颜色。 知识4 插入层 选择【窗口】|【层】命令按【F2】键，显示“层”面板。 在“层”面板中，文档中的层都会显示在层列表中，如果存在嵌套层，则以树状结构显示层的嵌套。 第1列处中如显示了一个睁开的眼睛图标，表示显示该层；如果是闭合的眼睛图标，表示隐藏该层；如果没有显示任何图标，表示该层的可见性继承其父层的显示属性（缺省）；如果未指定可见性，则不会显示眼睛图标。 在层名称处双击可以修改层的名称。 在Z列单击可修改层的层次属性值，数值大的将位于上层。 还可采用在层面板中直接拖动相关层的方法改变其次序 知识5 删除层 在“层”面板或编辑窗口中选择要删除的层，执行下列操作方法之一，即可删除图层。 方法1：按【Del】键； 方法2：选择【编辑|【清除】命令； 方法3：在所选层上单击鼠标右键，在弹出的快捷菜单中选择【删除标签】命令。 注意：如果删除父层，则其下的所有子层将同时被删除。 知识6 层与表格的转换 1.层转换为表格 在设计视图中选择【修改】|【转换】|【层到表格】命令，打开“转换层为表格”对话框。 知识6 层与表格的转换 2.表格转换为层 将层转换为表格后，如果需要重新调整层在页面中的位置，可以将表格转换为层。 在设计视图中选中需转换的表格，选择【修改】|【转换】|【表格到层】命令，打开“转换表格为层”对话框。 知识7 行为 行为是由事件和动作组成的，每个行为都包含事件和动作两个部分。事件是动作被触发的结果，而动作是用于完成特殊任务的预先编好的Javascript代码。利用行为能够使网页具备交互功能，即根据访问者鼠标的不同动作来让网页执行相应操作。 选中需添加行为的对象，选择【窗口】 |【行为】命令或按【Shift+F4】键打开“行为” 面板，添加行为。 任务1 应用层制作网页 任务2 制作弹出信息 在首页打开的同时，弹出了一个提示消息“欢迎光临本站点！”。实际上这是一个Javascript的警告信息。 任务3 设置状态栏文本 任务4 打开浏览器窗口 任务5 交换图像 任务6 控制Shockwave或Flash 任务7 播放声音 使用“播放声音”行为可以播放声音，而且可以在每次鼠标光标滑过某个链接时播放一段声音效果或在页面