[工学]网页制作教程第05课.ppt

第5章 使用层和行为 学习目标 本章要点 上机练习 习 题 学习目标 在Dreamweaver中可以通过层来设计页面的布局，可以将网页元素置于不同的层中，以产生层叠效果，也可以利用层来精确定位网页元素；Dreamweaver中的行为可以使用户不用编写JavaScript代码便可实现多种动态网页效果，从而使页面更具动感和吸引力。本章就将详细讲解层和行为的使用方法。 本章要点 层的创建和设置 层的操作 行为的概念 内置行为动作的应用 层的创建和设置 层是一种HTML页面元素，可以将它定位于页面上的任意位置。层可以包含文本、图像或其他任何可以在HTML文档正文中放入的内容。 创建层 嵌套层 层的“属性”面板 “层”面板 应用举例——创建嵌套层 创建层 在Dreamweaver 8中，层的创建可通过描绘层和插入层两种方法进行，下面分别讲解。 描绘层 插入层 描绘层 通过描绘层创建一个新层。 插入层 插入层是通过菜单命令直接在光标处插入一个预定大小的层，其操作方法较简单，只需在页面中将光标放置到需要插入层的位置，选择“插入/布局对象/层”命令即可在光标处插入一个预定大小的层。 插入层 嵌套层 嵌套层是指包含在其他层中的层，通常情况下将嵌套层称为子层，将嵌套层外部的层称为父层。一个嵌套层继承其父层的可见性，并能随父层的移动而移动，因此可以通过移动层来判断层之间的嵌套关系。 嵌套层之间存在着继承关系。继承就是使子层的可见性与父层保持一致，并且保持子层与父层的相对位置不变。这在制作动态网页时非常有用，因为动态网页的很多效果是通过JavaScript控制层的可见性及位置变化来实现的。 层的“属性”面板 选择创建的单个层时，层的“属性”面板。 层的“属性”面板 其中各项参数含义分别如下： “层编号”下拉列表框：在该下拉列表框中输入当前层的名称，便于在“层”面板和JavaScript代码中标识该层。 “左”文本框：用于指定层相对于页面或相对于父层左边界的位置。 “上”文本框：用于指定层相对于页面或相对于父层上边界的位置。 “宽”文本框：用于指定层的宽度，默认单位是像素。 层的“属性”面板 “高”文本框：用于指定层的高度，默认单位是像素。 “Z轴”文本框：在垂直平面方向上确定层的排列顺序。在浏览器中，编号较大的层出现在编号较小的层的前面，值可以为正，也可以为负。 层的“属性”面板 “可见性”下拉列表框：在该下拉列表框中指定该层最初是否是可见的。包括default、inherit、visible、hidden 4个选项。default（默认）表示不指定层的可见性，当未指定可见性时，大多数浏览器都会默认为inherit；inherit（继承）表示继承该层父级的可见性属性；visible（可见）表示显示该层的内容，无论其父级层是否可见；hidden（隐藏）表示隐藏层的内容，无论其父级层是否可见。 “背景图像”文本框：设置当前层的背景图像。 “背景颜色”颜色框：设置当前层的背景颜色。 层的“属性”面板 “溢出”下拉列表框：在该下拉列表框中选择当层中的内容超过层的指定大小时的显示方式。包括visible、hidden、scroll和auto 4项。选择visible（可见）选项后，当层的内容超过层的指定大小时，该层会通过延伸来显示额外的内容；选择hidden（隐藏）选项后，当层的内容超过层的指定大小时，该层的尺寸保持不变，超出部分的内容不会显示；选择scroll（滚动）选项后，不管层的内容超没超过层的指定大小，都在该层上添加滚动条；选择auto（自动）选项后，当层的内容超过层的指定大小时，将显示层的滚动条。 层的“属性”面板 “剪辑”栏：定义层的可见区域。在“左”、“上”、“右”、“下”文本框中输入的数值表示可见区域与层各个边界的距离。 “层”面板 通过“层”面板可以管理文档中的层，控制层的重叠顺序，更改层的可见性，以及选择多个层等。选择“窗口/层”命令或按F2键打开 “层”面板。 控制层的重叠顺序 控制层的可见性 控制层的重叠顺序 层的重叠顺序即层的显示顺序。在“层”面板中改变层的重叠顺序有以下两种方法： 在“层”面板中选择某个层，单击“Z”的属性列，出现设置框，在设置框中输入相应的数值即可改变层的重叠顺序。 在“层”面板中选择要改变重叠顺序的层，按住鼠标左键拖动层到相应的重叠位置。在移动层时将出现一条线，当该线显示在想要的重叠顺序时释放鼠标即可改变层的顺序。 “层”面板、设置“Z”轴值和拖动层改变层叠顺序 控制层的可见性 设置层的可见性 应用举例——创建嵌套层 下面在网页文档中创建层，设置层的背景颜色并创建嵌套层。创建完成后效果（光盘:\源文件\第5章\index.h