第7章 层与行为.

Presentation on theme: "第7章 层与行为."— Presentation transcript:

1 第7章 层与行为

2 第8章 样式表 内容提要 层的基本概念 层的基本操作 层的属性面板与参数设置 行为的基本概念 行为面板及其使用方法 添加和编辑行为

3 7.1层的基本概念 1、什么是层 网页中的层就好像一张张透明的画布，每张画布都画着一些独立的色彩，而一幅完整的画就是由许多张这样的画布叠加在一起组成的，每一个层的色彩都能够和其他层进行叠加，而修改其中的某一层却不会影响其他层的效果，这就是层的概念。 2 、层的标记 对于不同的浏览器，HTML语言规范定义了两种不同的层对象标志方法。 对于网景公司的Netscape Navigator浏览器，层对象使用<LAYER>和<ILAYER>两种标识符标志。这两种标识符只对Netscape Navigator有效。 对于微软公司的Microsoft Internet Explorer浏览器，层对象使用<DIV>和<SPAN>两种标识符标志。但这两种标识符对Netscape Navigator有效。 第8章 样式表

4 7.2层的基本操作 7.2.1创建新的层 在Dreamweaver中，有如下几种创建新层的方法：
（1）将光标移到要插入层的位置，单击“插入”→“布局对象”→“层”，即可在文档窗口当前插入点位置创建一个预定义大小的层。 （2）单击插入面板组布局面板上的绘制层按钮，将鼠标放到文档窗口中，此时鼠标的指针会变成十字形状，在想要创建层的位置上按下鼠标左键，拖动鼠标，绘制矩形，即创建一个新层。 （3）把插入面板组布局面板上的绘制层按钮直接拖动到文档区中，则可以在文档中创建一个预设定大小的层。 除了可以用以上三种方法创建新的层之外，如果需要一次创建多个层，则可以在按住Ctrl键的同时，单击插入面板组布局面板上的的绘制层按钮，然后在文档窗口中连续绘制多个层。 第8章 样式表

5 7.2.2激活和选中层 一个层在被激活后，才能将文本、图像、表格及多媒体等网页元素插入到层中，单击层中任意位置，就可以激活层，此时光标在层中闪烁，层的左上角出现选择柄，边框线由灰色变为蓝色，如图7.2所示。选中层后，才能对层设置属性和进行调整、移动等操作，如图7.3所示。 第8章 样式表

6 （1）先激活层，然后单击层左上角的选择柄，可选中该层。
选中层的多种方法如下： （1）先激活层，然后单击层左上角的选择柄，可选中该层。 （2）先把鼠标定位到层的内部，然后直接在文档区下方的状态栏中找到对应层的标记，单击后选中相应的层。层的标记名称定义为“div”+“#”+“层编号名”。如“div#layer1”。 （3）用鼠标单击层的边框部分，直接选中该层。 （4）按住Shift键的同时，用鼠标单击层中的任意位置，可选中该层。 （5）按F2键，在打开的层编辑器面板中，直接单击该层对应的名称，可选中该层。 （6）按住Shift键，然后在想要选择的多个层中依次单击鼠标，即可选择多个层。 第8章 样式表

7 无论使用以上哪种方法，被选中的层边框部分会以蓝色高亮显示，同时出现8个控制点，通过拖动他们可以改变层的大小。图7
无论使用以上哪种方法，被选中的层边框部分会以蓝色高亮显示，同时出现8个控制点，通过拖动他们可以改变层的大小。图7.4显示的是选中多个图层的情况，从图中可以看到，其中左边的层是最后选择的层，它的边框上的控制点是实心的，而先被选中的层边框上的控制点是空心的。在选择了多个层的情况下，可以一次性的改变多个被选中的层的相关属性。如改变位置和可见性，添加背景图片和颜色等。 第8章 样式表

8 （1）选中需要调整的层，此时在层的边框四周出现8个蓝色控制点，用鼠标拖曳某个控制点，即可调整层的大小。
7.2.3调整、移动和对齐层 1．调整层的大小尺寸 和其他许多网页元素一样，层的大小是可以随时改变的。除了可以在层的属性面板中修改它的宽和高属性来调整层的大小外，还可以用拖动的方式进行调整。创建层后，可通过以下方法调整层的大小尺寸。 （1）选中需要调整的层，此时在层的边框四周出现8个蓝色控制点，用鼠标拖曳某个控制点，即可调整层的大小。 （2）选中需要调整的层，在层“属性”面板的“宽”和“高”两个文本框中输入层的宽度和高度尺寸，可精确调整该层的尺寸。 （3）如果希望对层的大小进行细微调整，可以先选中层，然后在按下Ctrl键的同时，按键盘上的四个方向键，可在对应的方向上每次改变1像素大小。如果同时按下Ctrl和Shift键，再按下四个方向键，则可在对应方向上每次改变一个网格(10像素)的大小。 第8章 样式表

9 （1）选择想要移动的层，用鼠标拖动除控制点以外的边框部分或拖动左上方的控制柄，可对层进行自由移动。
2．移动层 移动层的2种方法如下。 （1）选择想要移动的层，用鼠标拖动除控制点以外的边框部分或拖动左上方的控制柄，可对层进行自由移动。 （2）如果要对层进行细微一些的移动，可以使用键盘来操作。选中想要移动的层，然后按下键盘的四个方向键，则该层每次可向对应的方向上移动1个像素的距离。在按下Shift键的同时，再按相应的方向键，每次移动一个网格(10像素)的距离。 第8章 样式表

10 3．对齐层 层的对齐是对层精确定位属性的重要体现，可以通过对齐命令进行相关的操作。首先选中多个要对齐的层，选择“修改”→“排列顺序”命令的下一级菜单中的“左对齐”、“右对齐”、“对齐上缘”、“对齐下缘”命令，可对齐选中的层。选择“设成宽度相同”和“设成高度相同”命令，可使选中的层具有相同的宽度和高度。 第8章 样式表

11 先在页面内创建一个新层，然后把插入点放在该层的内部，选择主菜单“插入”→“布局对象” →“层”，则在现有层中创建一个嵌套的子层。
7.2.4创建嵌套层 层是一个容器，可以放入各种元素，甚至可以放入另外一个层，这就是层的嵌套。当一个层嵌套在另一个层内部的时候，在内部的层就称为子层，而外部的层就是它的父层。要创建嵌套的层，可以使用以下几种方法。 先在页面内创建一个新层，然后把插入点放在该层的内部，选择主菜单“插入”→“布局对象” →“层”，则在现有层中创建一个嵌套的子层。 在页面内创建一个新层，然后从插入面板组“布局”面板中直接把绘制层按钮拖动到现有层的内部，可以创建现有层的嵌套子层。 在页面内创建两个层，然后打开层编辑器面板，按住Ctrl键的同时，把层编辑器面板中其中一个层的名称拖动到另一个层的上面，则可以实现把被拖动层创建成另一个层的子层。 第8章 样式表

12 无论使用以上哪种方法，创建的嵌套层均会在层编辑器面板中显示，如图7
无论使用以上哪种方法，创建的嵌套层均会在层编辑器面板中显示，如图7.5所示。从图中可以看到，嵌套的层不再是并列的关系，而是子层隶属于父层。层可以实现多级嵌套，一个子层内还可以再嵌套建立其它的子层。在创建了嵌套层以后，子层会随着父层的移动而移动，某些属性也会随着父层的属性改变而变化。此外，嵌套层的显示区域不一定是父层内部，子层可以浮动于父层之外的任意位置，且其大小不受父层的限制。 第8章 样式表

13 7.3层的参数设置 选择主菜单“编辑”→“首选参数”，打开参数设置对话框，选择分类列表中的层，即可对层的一些默认参数进行设置，如图所示。各个参数介绍如下： 显示：在该下拉列表中，可以设置 宽、高：用于设置新建层的默认大小。 背景颜色：用于设置创建层时默认的背景颜色。可以用右侧的拾色器直接选择喜欢的颜色，或者可在颜色框中输入相应颜色的十六进制数值。 背景图像：用于设置创建层时默认的背景图像。可以直接输入图像文件的URL，或者单击右侧的【浏览】按钮进行选择。 嵌套：如果选中该选项，则可以通过在一个层内部直接绘制层的方法，创建嵌套层，如果该选项未被选中，则在层内部绘制层时，会创建新的重叠层，而非嵌套层。 Netscape4兼容性：如果选中该选项，则会自动在文档的开头添加一段JavaScript代码，该代码会保证在Netscape浏览器中网页显示的正确性，不会因为重设浏览器大小而产生错误。 第8章 样式表

14 7.4层的属性面板与控制面板的设置 7.4.1层的属性面板
创建了层以后，可利用层的属性面板设置层的名称、位置、大小尺寸、背景颜色或背景图像、层的可见性、堆栈顺序、层标记、当层内容溢出时的处理方法，以及层中可见区域的位置和尺寸等等。 选中层的以后，属性面板会默认显示在文档窗口的下方，如果未显示，可以通过选择主菜单“窗口”→“属性”打开。层的属性面板如图7.7所示。 第8章 样式表

15 宽、高：设置层的宽度和高度。单位同“左”和“上”。
其中各个参数说明如下： 层编号：用来标识一个层，每个层都有一个惟一的编号。输入层编号的时候，只能使用标准的字母和数字字符，而且不能使用空格、下划线等特殊字符。默认的层编号按插入顺序依次为layer1、layer2……layerN。 左、上：设置当前层的左上点相对于页面或上层容器左上角的位置，由于层都是规则矩形，通过设置“左”和“上”属性则可以对层进行精确定位。层的位置和大小的单位为px(像素)。也可以指定以下单位：pc(十二点活字)、pt(点)、in(英寸)、mm(毫米)、cm(厘米)、%(父值的百分比)。 宽、高：设置层的宽度和高度。单位同“左”和“上”。 Z轴：指定层的叠加顺序。“Z轴”的值越大，该层离我们越近，越在上层。对于“Z轴”的取值可以是正或负，也可以是0。假如有3个层layer1，layer2，layer3，“Z轴”的值分别是0，1，-3。则他们在Z轴方向的位置关系是：layer2在最上层，layer3在最下层，layer1在中间。 第8章 样式表

16 可见性：用来设置层的初始显示状态，有以下四个选项： Default(默认)：不指定显示状态，多数浏览器默认为inherit(继承)。
Visible(可见)：显示层，忽略父层的属性。 Hidden(隐藏)。隐藏层，忽略父层的属性。 背景图像：指定层的背景图像，当背景图像和背景颜色同时存在时，优先显示背景图像。 背景颜色：指定层的背景颜色，当没有指定颜色时，背景为透明。 类：用来设置层的CSS样式。 溢出：用来设定当层中的内容超过它本身大小时将产生的后果，有以下4种情况： Visible(可见)：根据超出层本身的范围增加层的大小，向右和向下拓展，以便能够将所有溢出部分可见。 第8章 样式表

17 Hidden(隐藏)：保持层本身的大小不变，对溢出部分进行裁剪。 Scroll(滚动)：无论层中的内容溢出与否，都在层右和下方添加滚动条。
Auto(自动)：自动判断层中的内容是否超出范围，超出则添加滚动条，否则不添加。 剪辑：定义层的可见区域。指定左侧、顶部、右侧和底部坐标，从而在层的坐标空间中定义一个矩形。经过剪辑的层，只有在指定区域内才是可见的。例如，若要使一个宽200像素、高200像素的层中，从左上角开始宽70像素高90像素的范围可见而其他部分均不可见，则可将剪辑属性设置为：左：0，上：0，右：70，下：90。 第8章 样式表

18 7.4.2层的控制面板 在设计层的时候，可以通过层编辑器，对层的相关属性进行修改。打开的方法是，选择主菜单“窗口”→“层”，或者直接按下F2键。层编辑器面板如图7.8所示。 第8章 样式表

19 修改层的名称时，可在层编辑器面板对应的层的名称上双击鼠标，从而激活命名选项进行修改名称的操作，如图7.9所示。
1．修改层的名称和可见性 修改层的名称时，可在层编辑器面板对应的层的名称上双击鼠标，从而激活命名选项进行修改名称的操作，如图7.9所示。 第8章 样式表

20 修改层的可见性时，可以先在层编辑器面板中找到想要改变可见性的层，在该行的左侧眼睛图标列下单击鼠标，其中眼睛睁开表示该层可见，眼睛闭合表示该层隐藏，没有眼睛图标则表示显示属性为默认或继承其父层的可见性。而通过点击列标题上的眼睛图标则可以同时改变所有层的可见性。如图7.10所示 第8章 样式表

21 在层的编辑器面板上方，还可以看到一个防止重叠的选项，一旦选中该项，则所有层在网页中不能叠加显示。
2．改变层的叠加顺序和防止重叠 在层的编辑器面板右侧，有个名为“Z”的列，和修改层名称一样，通过单击每一层在该列下的数字可以修改其叠放次序。输入一个比当前数字大的数会把层的叠放顺序向上层移；输入一个较小的数，则下移。即Z列的数字越大，该层离我们越近(越在上层)。 在层的编辑器面板上方，还可以看到一个防止重叠的选项，一旦选中该项，则所有层在网页中不能叠加显示。 第8章 样式表

22 7.5层制作实例 本实例主要利用Z轴性质实现重叠效果。例如在两个层中输入不同颜色的文字，将两个层重叠后稍做错位移动就可以实现阴影文字效果。具体操作步骤如下： （1）将光标放置在要插入层的位置，单击“布局”插入栏中的“绘制层”按钮，在页面编辑窗口中绘制一个层Layer1，选中该层，在属性面板中设置层的宽为px，高为px。 （2）在层中插入一个几行几列的表格，在表格的1、3、5、7单元格中输入文字：“”。并在“属性”面板中设置文字的颜色、大小、字体。 （3）再绘制一个与Layer1相同大小的层Layer2，并在第2步制作好的表格及内容复制到此Layer2层中，设置表格里的文字颜色为黑色。 （4）选中层Layer2，在“属性”面板中设置“上”、“左”的坐标值与Layer1相同，让这两层重叠。接下来按向左的方向键两次，向下的方向键一次，这样两个层的位置就错开了一定的距离。 （5）按F12键预览，页面效果如图7.11所示。 第8章 样式表

23 7.6行为的概述 在Dreamweaver中，行为(behavior)是事件(event)和动作(action)的组合。这就相当于把行为看做一个因果关系，其中事件是触发器，是产生动作的原因，而动作是最终产生的结果。这里的事件包括很多情况，例如单击鼠标，单击按钮，关闭窗口，复制图片等等。对于不同的对象，所对应的事件有所不同。选定一个事件，再选择当该事件触发时发生的动作(如弹出信息、发出声音、调用函数等等)，这样就形成了一个完整的行为。 事件的产生有两种：用户触发和系统触发。用户操作会触发事件并产生动作；有时候系统会定时触发事件而产生动作。一个事件可以与一个动作相关联，也可以与许多动作相关联，即一个事件会触发很多动作，这时，还需要指定这些动作的发生顺序，以达到预期的要求。 第8章 样式表

24 7.7行为面板及其使用方法 在Dreamweaver中，对行为的添加和控制主要通过“行为”面板来实现。选择“窗口”→“行为”菜单命令，或按快捷键Shift+F4,即可打开“行为”面板，如图所示。 第8章 样式表

25 （2）按钮：选中一个现有行为，点击该按钮可以把相应的行为删除。 （3）按钮：单击该按钮，在事件列表中只显示已设置的事件内容。
在行为面板上可以进行如下操作。 （1）按钮：单击该按钮会弹出“添加行为”菜单，如图7.13所示。其中包含可以附加在当前所选元素上的可用动作列表(在行为面板的上方会显示出当前所选元素的标签，如图7.12中的<img>标签)。当从此列表中选择某个动作时，会出现一个对话框，可以在其中指定该动作的参数。 （2）按钮：选中一个现有行为，点击该按钮可以把相应的行为删除。 （3）按钮：单击该按钮，在事件列表中只显示已设置的事件内容。 （4）按钮：单击该按钮，在事件列表中显示所有事件内容。 （5）按钮：用来调整行为面板中已有行为的顺序。 （6）按钮：点击该按钮可以打开行为编辑菜单，对行为中相关属性以及行为面板进行编辑。 （7）事件列表：显示当前行为的触发事件或所有事件。与显示事件的设置有关。 （8）动作列表：显示所选元素上的行为最终产生的动作。 第8章 样式表

26 7.8添加和编辑行为 利用“行为”面板可在网页中添加、修改行为，给网页对象添加行为的步骤如下。
（1）选中网页中的一个对象，该对象可以是图像、文本或层。 （2）选择“窗口”→“行为”命令，打开“行为”面板。 （3）单击“行为”面板上的按钮，屏幕显示行为菜单，如图 7.13所示。根据需要选择其中一种动作，并在对话框中设置该动作的参数。 （4）在如图7.13所示的菜单中， 选择“显示事件”命令，并在级联菜 单中选择一种合适的浏览器，如图7.14所示。 第8章 样式表

27 （5）在“事件”列表中显示当前动作的默认事件，单击该事件后，“行为”面板的当前事件中会出现一个下拉三角形按钮，单击该下拉三角形按钮，屏幕显示“事件”菜单，如图7.15所示。设计者可从该菜单中选择一种事件来代替默认事件。 第8章 样式表

28 网页中一个对象附加了行为后，可以根据需要利用“行为”面板修改触发动作的事件，添加、删除及修改动作的参数。修改行为的操作步骤如下。
（1）选定某个附加了行为的对象。 （2）按快捷键Shift+F4，打开“行为”面板。 （3）根据需要完成如下操作： 要删除一个行为，可先将其选中，然后单击按钮或接Delete键。 要改变一个动作的参数，可双击这个行为，在弹出的对话框中修改各参数项，然后单击“确定”按钮。 要改变一个事件，可选中该行为，并单击事件列表的下拉三角形按钮，在下拉式菜单中选择需要的事件。 要更改已设定事件的动作顺序，可先选定这个行为，然后单击“行为”面板上的向上或向下的按钮，就可更改某事件的动作顺序。 第8章 样式表

29 7.9 Dreamweaver内置的动作与事件 Dreamweaver 8内置的了很多行为，使用它们可以在网页中设计出各种效果。在本节中列出的行为是IE6.0以及以后版本。在“行为”面板中动作菜单中各项的意义如下： （1）交换图像：交换图像是通过更改img标记的src属性将一个图像和另一个图像交换。 （2）弹出信息：些动作可以很方便地在网页上显示带指定信息的JavaScript对话框。 （3）恢复交换图像：利用“恢复交换图像”动作，可以把所有被替换显示的图像恢复成原始图像。 （4）打开浏览器窗口：此动作可以在一个新窗口中打开URL。同时可以指定新窗口的大小、属性和窗口名称。如果不指定新窗口的任何属性，则打开时其大小和属性都与原窗口相同。指定新窗口的任何属性都会自动关闭所有其他未打开的属性。 （5）拖动层：此动作允许用户在浏览网页时拖动层。 （6）控制Shockwave或Flash：利用该动作可以控制页面中Shockwave或Flash的播放、停止、后退或前往某一帧等操作。 （7）播放声音：此动作可以在页面中特定条件下播放声音。例如，可以在点击某张图片时播放一段欢快的音乐等等。 第8章 样式表

30 （9）时间轴：时间轴级联菜单中有3个命令，分别为：播放时间轴、停止时间轴和转到时间轴帧。
（8）改变属性：此动作可以更改某个对象属性的值。例如，更改层的背景色等。可以更改的属性由浏览器决定，浏览器版本越高，通过该行为可更改的属性也越多。 （9）时间轴：时间轴级联菜单中有3个命令，分别为：播放时间轴、停止时间轴和转到时间轴帧。 （10）显示隐藏层：此动作用来显示、隐藏、恢复一个或多个层的可见性。多用于用户的交互，该行为除了可以添加到图片、按钮等多种常见页面元素外，还可以添加到时间轴的行为通道上。 （11）显示/隐藏弹出式菜单：此动作可以创建和编辑下拉式菜单，或打开和编辑已插入到文档中的Fireworks下拉式菜单。 （12）检查插件：动作可以根据访问者是否安装相应的插件，从而转向不同的URL。例如，可以把安装有FLASH插件的访问者转到一页，把未安装的访问者转到另外的页。 第8章 样式表

31 （14）检查表单：检查指定的文本框中的内容，以确保浏览者输入的数据格式正确无误。
（13）检查浏览器：此动作可以根据访问者不同类型和版本的浏览器把他们转到不同的URL。例如可以把安装有IE4.0以上版本的访问者转到一页，其他访问者转到另外的页。 （14）检查表单：检查指定的文本框中的内容，以确保浏览者输入的数据格式正确无误。 （15）设置导航栏图像：此动作可以把某个图像转换为导航条图像，或修改已有导航条的相关属性。 （16）设置文本：此动作包括4个子菜单，分别是：设置层文本、设置框架文本，设置文本域文字和设置状态栏文本。它们的使用方法大致相同，作用都是替换目标中的HTML内容。 （17）调用JavaScript：可以执行标准或自定义的JavaScript函数。 （18）跳转菜单：设计者通过选择“插入”→“表单对象”→“跳转菜单”命令，可在网页上创建一个跳转菜单。若要编辑修改这个跳转菜单，可在“行为”面板中双击“跳转菜单”动作，在“跳转菜单”对话框中修改跳转菜单的各项参数。 （19）转到URL：利用转到URL动作，可以在当前浏览器窗口或指定的框架窗口载入指定的页面。 （20）预先载入图像：此动作可以预先下载那些即将在页面中显示的图片，存放在浏览器缓存中，方便随时使用。 第8章 样式表

32 ① onKeyDown：按下键盘上某个键，触发该事件。 ② onKeyPress：按下键盘上某个键后又释放掉该键，触发该事件。
动作是执行某个特定任务的一段JavaScript的程序，事件则是指明了执行动作的方法。在“行为”面板中单击按钮，选择“显示事件”命令，在“显示事件”的级联菜单中选定能浏览网页的浏览器版本。选定的浏览器版本不同，事件列表中的事件选项也不同，在设计的过程中，如果选择高版本的浏览器，如IE6.0，则所有的事件都是可用的。以下是一些常用事件。 1．键盘类事件 ① onKeyDown：按下键盘上某个键，触发该事件。 ② onKeyPress：按下键盘上某个键后又释放掉该键，触发该事件。 ③ onKeyUp：释放被按下的键时，触发该事件。 第8章 样式表

33 ① onClick：鼠标单击页面元素时触发。 ② onDblClick：鼠标双击页面元素时触发。
2．鼠标类事件 ① onClick：鼠标单击页面元素时触发。 ② onDblClick：鼠标双击页面元素时触发。 ③ onMouseDown：按下鼠标左键触发该事件。 ④ onMouseMove：鼠标指针在特定页面元素上移动时，触发该事件。 ⑤ onMouseOut：鼠标指针移出了特定页面元素的范围时，触发该事件。 ⑥ onMouseOver：鼠标指针第一次移到特定页面元素范围内时，触发该事件。 ⑦ onMouseUp：把按下的鼠标左键释放时触发该事件。 第8章 样式表

34 ① onAfterPrint：打印结束时触发该事件。 ② onBeforePrint：打印开始前触发该事件。
3．其他常用事件 ① onAfterPrint：打印结束时触发该事件。 ② onBeforePrint：打印开始前触发该事件。 ③ onFocus：当指定元素通过用户的交互行为获得焦点时，触发该事件。例如在一个文本框上点击时，该文本框就会产生一个onFocus事件。 ④ onBlur：与onFocus事件相反，当指定元素停止从用户的交互行为上获得焦点时，触发该事件。例如在文本框中点击之后，再点击文本框以外的部分，则会在文本框上产生一个onBlur事件。 ⑤ onDrag：用鼠标拖动网页中选定的对象时，触发该事件，弹出一个信息窗口。 ⑥ onHelp：单击浏览器的帮助按钮或选择了浏览器中的帮助菜单项时，触发该事件。 ⑦ onLoad：当图像或页面被完全载入之后，触发该事件。 ⑧ onUnLoad：当用户离开当前页面时，触发该事件。例如从一个页面切换到其他页面。 ⑨ onResize：重设浏览器窗口或框架大小时，触发该事件。 ⑩ onScroll：使用滚动条或键盘上的方向键上下滚动文档内容时，触发该事件。 第8章 样式表

35 7.10行为的应用实例 使用交换图像动作可以创建“鼠标经过图像”和其他图像效果，例如一次交换多个图像等等。由于该动作只有图像的src属性受影响，所以在选择替换图片时，图片大小一般应该和原图像相同，如果不相同，替换后的图像会进行压缩（拓展）以保持和原图像等大。 本实例使用交换图像制作一个轮替广告，操作步骤如下： ① 在页面中插入一张图片。 ② 选中图片，在属性面板的“名称”文本框中给图片命名。对准备进行交换的图像一般应该命名，以方便操作。 ③ 选择该图像，选择主菜单“窗口”→“行为”打开“行为”面板。 ④ 在“行为”面板中单击(添加行为)打开行为动作下拉菜单，选择“交换图像”，弹出如图7.16所示的对话框。 第8章 样式表

36 ⑤ 从对话框图像列表中，选择想要交换的图片。 ⑥ 在“设定原始档为”文本框中输入新图片的路径或点击“浏览”按钮选择新图片。
⑦ 选择“预先载入图像”选项可在载入页面时把新图像载入到浏览器缓存中。防止图像在显示时由于下载出现延迟。 ⑧ 选择“鼠标滑开时恢复图像”则在鼠标离开图片范围时恢复到原始图片。实质上是添加了一个“onMouseOut”事件触发时恢复图像的行为。 　“交换图像”设置完成后默认的行为事件如图7.17所示。当“onMouseOver”时交换图像，“onMouseOut”时恢复交换图像。 第8章 样式表

37 7.11 层与行为制作实例 本实例主要制作一个下拉菜单，下拉菜单是网上最常见的效果之一，下拉菜单不仅节省了网页排版上的空间，使网页布局简洁有序，而且一个新颖美观的下拉菜单还可以为网页增色不少。在这个实例中要求我们不但要熟练层的操作，还要灵活运用行为中“显示-隐藏”层的方法。具体操作步骤如下。 （1）新建一个网页，插入一个1行3列的表格，根据图7.18所示输入主菜单名并修饰建立好一个导航条。 （2）下面以第一个主菜单“教学指南”建立下拉菜单。选择“插入”→“布局对象”→“层”菜单命令，插入层layer1，在“属性”面板中设置层的相关参数，使它的上边线紧贴导航条的下边线，如图7.19所示。 第8章 样式表

38 （3）在层layer1中插入一个3行1列的表格，调整表格属性，并在单元格中分别输入子菜单名，如图7.20所示。
（4）按住ctrl键不放单击导航条中的第一个单元格，然后选择“窗口”→“行为”菜单命令，打开“行为”面板，在“行为”面板中单击按钮，在下拉列表中选中“显示-隐藏层”命令，如图7.21所示。 （5）在弹出的“显示-隐藏层”对话框中，在“命名的层”后的文本框中会列出当前网页所有的层，选中“层’layer1’”，因为想要layer1这个层对“教学指南”有响应，所以单击下面的“显示”按钮，再单击“确定”按钮，如图7.22所示。 （6）回到“行为”窗口，窗口中出现如图7.23所示的字样，单击行为下的文字onFocus，会出现一个向下的小箭头，单击它，在下拉列表中选中onMouseOver选项。这一步的作用是实现当鼠标移至第一个单元格时，下拉菜单layer1的状态变为显示。 第8章 样式表

39 （7）下面的操作是让下拉菜单layer1在鼠标移至第二个单元格时再变成隐藏状态。单击“行为”面板中的按钮，在下拉列表中选中“显示-隐藏层”选项，在弹出的“显示-隐藏层”对话框中，选中“层’layer1’”，单击下面的“隐藏”按钮，再单击“确定”按钮，如图7.24所示；在回到的“行为”窗口中单击行为下的文字onFocus，在下拉列表中选中onMouseOut选项，如图7.25所示。 （8）选择“窗口”→“层”菜单命令，打开“层”面板，在“层”面板中选中层layer1，用为导航条中第一个单元格的方法在“行为”窗口中为层layer1再添加显示和隐藏自己的命令。这样做的效果是当鼠标称出层layer1时，层layer1会自动隐藏。添加命令后层layer1的状态如图7.26所示。 第8章 样式表

40 （10）第一个主菜单的下拉菜单制作完毕，按F12键在浏览器中预览，效果如图7.28所示。使用同样的方法可以为导航条的其他主菜单建立下拉菜单。
（9）为下拉菜单中各项子菜单建立好超链接。再在“层”面板中，单击层layer1的前面一格，出现闭着的眼睛图标，如图7.27所示。操作这一步的目的是让下拉菜单的初始状态是不可见的。 （10）第一个主菜单的下拉菜单制作完毕，按F12键在浏览器中预览，效果如图7.28所示。使用同样的方法可以为导航条的其他主菜单建立下拉菜单。 第8章 样式表

41 Thanks！ 第8章 样式表