网页设计第9讲.ppt

第九章 层与行为 内容提要 9.1 使用层 9.2 Dreamweaver中的时间轴 9.3 行为 9.1 使用层 什么是层？ 层提供一种对网页对象进行有效控制的手段，层可以包含文本、图像、表单等所有可直接用于文档的元素，层中还可以包含插件或其它层（嵌套使用）。 层提供了精确定位页面元素的方法，通过将页面元素放置在层中，用户可控制对象的叠放顺序、显示或隐藏，甚至可利用时间轴同时在屏幕上移动一个或多个层。 层参数设置 选择菜单“编辑”“首选参数”，打开“首选参数”对话框，在左侧的分类列表中选择“层”选项 创建层 若要创建层，请执行以下操作之一。 ? 若要绘制层，请单击插入栏上的“描绘层”按钮，然后在文档窗口的设计视图中通过拖动来绘制层。 ? 若要在文档中的特定位置插入层的代码，请将插入点放入文档窗口，然后选择“插入”“布局对象”“层”。 若要连续绘制多个层，请执行以下操作。 （1）单击“插入”栏上的“绘制层”按钮。 （2）通过按住 Ctrl 键并拖动鼠标来绘制各个层。 只要不松开 Ctrl键，就可以继续绘制新的层。 层面板 若要打开层面板，请选择“窗口”“其他”“层”。层显示为按z轴顺序排列的名称列表；首先创建的层出现在列表的底部，最新创建的层出现列表的顶部。 嵌套的层显示为连接到父层的名称。单击加号 (+) 或减号 (-) 图标显示或隐藏嵌套的层。 层的可见性 层的可见性分为以下三种： （1）睁开的眼睛表示层可见 （2）闭上的眼睛表示层不可见 （3）如果没有眼睛图标，表示该层继承其父层的可见性。 改变层的名称和叠放顺序 在打开的层面板中，名称为层的标识名，Z表示层的索引号。任意单击管理器中的某一层，即选中该层，按Delete键可以删除它。按住Shift键可同时选择多个层，然后可同时移动或删除它们。双击名称项可为层更改标识名。 在层面板中用鼠标拖动层的上下位置，可以改变层的叠放顺序，也可以双击层面板中某层的Z选项，直接输入新值以修改该层的位置顺序。当输入比当前值大的数值时，该层将向上移动，如果输入比当前值小的数值时，该层将向下移动。 对齐层 当页面中存在多个层时，可以使用层对齐命令对齐层。使用层对齐，可使多个层和最后选定的层在某一方向上对齐。操作步骤如下： （1）按住Shift键选取多个层。 （2）选择菜单命令“修改”|“排列顺序”，出现“排列顺序”子菜单，如图所示。 层属性面板 层属性面板 Z轴：在该文本框中输入层在Z方向上的索引值。 显示：该下拉列表框设置层的可见性。 背景图像：设置层的背景图像。 背景颜色：设置层的背景色。单击颜色框按钮，在色盘中选取合适的颜色，或者在文本框中直接输入背景颜色的十六进制数值。 类：将某种CSS样式应用到层中。 溢出：设置当层中的内容超出层的范围后产生的效果。 层和表格的转换 将层转换为表格 选择菜单命令“修改”“转换”“层到表格”，打开“转换层为表格”对话框。 层转换为表格示例 将表格转换为层 （1）选择菜单命令“修改”“转换”“表格到层”，打开“转换表格为层”对话框，如下图所示。 （2）设置好选项后，单击“确定”按钮，即可将表格转换为层。 嵌套层 1．插入法：把插入点放置于页面上已有层内，然后选择“插入”“层”菜单命令插入一个嵌套层。 2．描绘法：单击“插入”工具栏布局面板中的层按钮，然后在一个已有层中拖动，即画出一个嵌套层。如果在层的参数设置中关闭了层嵌套，请按住Ctrl键在已有层中描绘其子层。 关于嵌套层 关于嵌套层，需要特别注意的是嵌套层并不是页面上一层位于另一层内。嵌套层的本质应该是一层的HTML代码嵌套在另一层的HTML代码之内。 从图中可以看出，层“sub”的代码嵌套在层“main”的HTML代码之内，所以它是嵌套层。反过来，即使在页面上看，一个层位于另一层之内，如果它们的HTML代码互不包含，它们就不是嵌套层。当然最直观的方法还是通过层面板查看层间是不是存在嵌套关系。 在层中插入内容 在层中可以插入多种页面元素，包括文本、表格、图像、插件、按钮等。方法是先在某层内单击鼠标，将光标插入点置于层内，然后就可以采用与在页面中插入元素的相同方法将各种元素插入到层中。 9.2 时间轴 时间轴是Dreamweaver提供用于设计网页动态效果的工具，它通过设置不同时间段层的大小、位置、和可见性来创建动态网页。 在时间轴上显示的每一幅图片或文字称为一帧，整个时间轴由许多帧组成。播放时所有的帧按照设置好的时间和运动方式依次显示出来，好像放电影一样，一段动态效果画面就呈现在浏览者面前。 时间轴面板 时间轴面板提供了操作时间轴的便捷通道，在面板中可以查看和设置对象在各个时间点的属性。打开时间轴面板的方法有两种：选择菜单命令“窗口”“时间轴”或Alt+F9。