Fireworks制作导航栏与弹出菜单.ppt

第9章制作导航栏与弹出菜单,2,本章目标,掌握行为面板的基本操作掌握制作导航栏与弹出菜单的方法,3,9.1行为面板,9.1.1关于行为9.1.2行为面板的操作,4,9.1.1关于行为,Fireworks作为网页设计专业软件，使其不仅可以用于网页效果图的制作、网页动画的制作、切片与热区的快速操作，同时，可以为切片、按钮或热区添加交互行为，这些交互行为，使得Fireworks在网页制作方面也有很强的辅助优势。在Fireworks中，我们称这些交互为行为，实际上，Fireworks中的行为，就是利用JavaScript和CSS代码实现图像交换、弹出菜单这些网页中常用的交互效果，只是Fireworks利用其【行为】面板，为网页设计师在进行这些交互效果的实现时，更为便利，不必再书写大量的代码，所有的交互添加，都采用可视化操作。用户即使对JavaScript和CSS代码一无所知，也可以在Fireworks8中创建多种JavaScript按钮和CSS或JavaScript弹出菜单。在导出按钮或弹出菜单时，Fireworks会自动生成在Web浏览器中显示所必需的CSS代码或JavaScript。在MacromediaDreamweaver中，可以轻松地将Fireworks中的CSS代码、JavaScript和HTML代码插入到网页中，也可以将这些代码剪切后粘贴到任何HTML或CSS文件中。,5,9.1.1关于行为,行为的添加，是Fireworks与其他图像图形软件最大的区别之一。由于Fireworks的这种行为添加的功能，使得我们在实际工作中，可以利用其制作演示网页，以便于公司的客户人员，更好地与客户沟通，通过演示网页，我们不仅能看到整个网页的界面结构、色彩方案等外观，更能让用户能够体验到点击的乐趣，使得整个网站的业务洽谈及客户沟通更为顺畅。Fireworks中的行为，实际上是分为事件与动作两部分。所谓事件，即行为触发的条件，比如鼠标点击或滑过、页面载入或载出等，通俗地说，用户在触发动作的时候，采用的是什么样的操作。有了事件，当然要有动作，用户在进行一个操作后，将会发生什么结果，这就是我们所说的动作，如弹出菜单、图像交换等。因此，动作就是，行为的事件执行后，所能够得到的交互效果。上面，是我们对行为、事件、动作三者间的简述，需要强调的是，行为包含着事件与动作，缺少了事件或动作的行为，在网页中，是不会有任何交互效果，事件与动作对于行为来说是缺一不可的。Fireworks中的行为添加主要通过行为面板来完成。,6,9.1.2行为面板的操作,（1）选择切片或热区，执行【窗口】【行为】命令，或按快捷键【Shift+F3】，打开【行为】面板，可以看到，在面板的左边为显示事件，右边为显示动作，如图；,（2）点击，即可弹出行为列表，从中选择一种行为，添加后的行为会出现在【行为】面板中，如图；,7,9.1.2行为面板的操作,（3）选择面板中的行为后，可以执行以下操作：,：用于删除行为；：显示隐藏的行为；：编辑行为；：删除动作。,8,9.2制作轮替图效果,9.2.1关于轮替图9.2.2简单交换9.2.3交换图像,9,9.2.1关于轮替图,所谓轮替图，就是当鼠标滑过一个图形时，该菜单将角发另一个图形的显示。动作的触发对象始终是一个网页对象：切片、热区或按钮。最简单的轮替图像是将第1帧中的一个图像与紧挨着它的下面第2帧中的图像轮替，也可以生成更复杂的轮替图像。轮替图像可以交换来自任何帧的图像，不相交轮替图像交换来自除触发对象切片之外的切片中的图像。当在Fireworks中选择一个使用行为手柄或【行为】面板创建的触发对象网页对象时，将显示它的所有行为关系。默认情况下，轮替图像交互由一条蓝色行为线表示。,10,9.2.2简单交换,创建简单交换图像是将两个重叠的帧进行交换，并且只涉及一个切片。具体操作如,（1）执行【编辑】【插入】【切片】命令建立切片；（2）按【Shift+F2】组合键，打开【帧】面板，在【帧】面板中，单击【新建/重制帧】按钮创建一个新帧；（3）在新帧上，创建、粘贴或导入用作交换图像的图像，并将该图像放在刚才创建的切片的下方；（4）在【帧】面板中，选择第1帧，返回到包含原始图像的帧；（5）选择切片并将鼠标放在行为手柄上方，鼠标变成手形，单击行为手柄，并从菜单中选择（6）添加简单变换图像行为选项，如图；,11,9.2.2简单交换,（7）按【F12】在浏览器中预览效果。,12,9.2.3交换图像,在浏览网页时，常会发现一些效果，如当鼠标指向个网页图像时，在网页的另一个位置会出现一个图像，这是不相交变换图像效果。不相交变换图像交换的是另一个与其自身位置不同的网页图像。当鼠标滑过或单击一个触发器图像时，作为响应，在网页的另一个位置中出现一个图像。鼠标滑过的图像被视为触发器，发生更改的图像被视为目标。与仅使用一个切片的简单变换图像一样，首先必须对触发器、目标切片和交换图像所驻留的帧进行设置。然后，可以使用一条行为线将触发器链接到目标切片。其具体如下：,（1）若要将不相交变换图像附加到所选图像，首先执行【编辑】【插入】【切片】或【编辑】【插入】【热点】命令，将切片或热点附加到触发器图像。,13,9.2.3交换图像,（2）然后在【帧】面板中单击【新建/重制帧】按钮创建一个新帧。在画布上所需位置的新帧中再放置一个用作目标的图像可将该图像放在不与刚创建的切片不重合的任何位置。选择图像，然后执行【编辑】【插入】【切片】命令将切片附加到图像。（3）在【帧】面板中选择第1帧，返回到包含原始图像的帧。选择覆盖触发器区域(原始图像)的切片、热点或按钮，然后将鼠标放在行为手柄上，鼠标随即变为手彤。将触发器切片或热点的行为手柄拖到第二次创建的目标切片，出现一条从触发器中心延伸到目标切片左上角的行为线，同时打开【交换图像】对话框，如图所示。,14,9.2.3交换图像,（4）从【交换图像】弹出菜单中，选择刚才创建的帧，然后单击【确定】按钮。（5）单击【预览】按钮以预览和测试不相交变换图像。（6）可以从单个切片中拖动多个行为手柄来创建多个变换行为。例如，可以从同一切片中触发一个变换目像和一个不相交变换图像。图9-5所示为用来触发变换图像行为和不相交变换图像行为的切片。,15,9.2.3交换图像,（7）若要将多个变换图像应用到所选切片，可以将行为手柄从所选切片拖到同一切片的边缘或其他切片上。将手柄拖动到同一切片的左上边缘时可创建一个交换图像，将手柄拖动到其他切片时可创建不相交变换图像。,16,9.3制作导航栏,17,9.4制作弹出菜单,9.4.1关于弹出菜单编辑器9.4.2创建基本弹出菜单9.4.3创建弹出菜单内的子菜单9.4.4设计弹出菜单的外观9.4.5添加弹出菜单样式9.4.6设置高级弹出菜单属性9.4.7控制弹出菜单和子菜单的位置9.4.8编辑弹出菜单9.4.9关于导出弹出菜单,18,9.4.1关于弹出菜单编辑器,弹出菜单编辑器是一个带有选项卡的对话框，它会引导用户完成整个创建弹出菜单的过程，如图所示。它的许多用于控制弹出菜单特征的选项被组织在以下4个选项卡中：,内容：包含用于确定基本菜单结构以及每个菜单项的文本、URL链接和目标的选项。外观：包含可确定每个菜单单元格的【弹起】状态和【滑过】状态的外观，以及菜单的垂直和水平方向的选项。高级：包含可确定单元格尺寸、边距、间距、单元格边框宽度和颜色、菜单延迟以及文字缩进的选项。位置：包含可确定菜单和子菜单位置的选项：,19,9.4.1关于弹出菜单编辑器,【菜单位置】将相对于切片放置弹出菜单。预设位置包括切片的底部、右下部、顶部和右上部。【子菜单位置】将弹出子菜单放在父菜单的右侧或右下部，或放在其底部。根据弹出菜单的设计，可能不需要使用弹出菜单编辑器中所有的选项卡或选项。可以随时编辑任意选项卡中的设置，但至少应该在【内容】选项卡中添加一个菜单项，才能创建可在浏览器中预览的菜单。,20,9.4.2创建基本弹出菜单,在弹出菜单编辑器的【内容】选项卡上，可以确定弹出菜单的基本结构和内容。其他弹出菜单编辑器选项卡上的选项的当前或默认设置会在创建菜单时应用于该菜单。若要创建简单的弹出菜单，具体操作步骤如下：,选择【修改】【弹出菜单】【添加弹出菜单】命令。单击切片中间的行为手柄，然后从菜单中选择【添加弹出菜单】命令。,（1）选择一个热点或切片，它们将成为弹出菜单的触发器区域。（2）执行下列操作之一以打开弹出菜单编辑器：,（3）单击【内容】选项卡，单击【添加菜单】按钮以添加一个空菜单项，可以随时添加、删除和编辑单元格。（4）双击每个单元格并输入或选择适当的信息，如图：,21,9.4.2创建基本弹出菜单,文本：指定该菜单项的文本。链接：确定该菜单项的URL。用户可以输入自定义链接，也可以从【链接】弹出菜单中选择一个链接（如果存在链接）。如果用户已经为文档中的其他网页对象输入了URL，则这些URL将出现在【链接】弹出菜单中。目标：指定URL的目标。可以输入自定义目标，也可以从【目标】弹出菜单中选择一个预设目标。,22,9.4.2创建基本弹出菜单,在窗口中的最后一行输入内容后，会在该行的下面增加一个空行。,单击【继续】按钮移动到【外观】选项卡，或者选择另一个选项卡继续生成弹出菜单。创建弹出菜单的子菜单项目。单击【完成】按钮关闭弹出菜单编辑器，完成弹出菜单的创建工作。,（5）重复（3）和（4），直到添加了所有菜单项。（6）可以随意地删除菜单项，方法是高亮显示该项，然后单击【删除菜单】按钮。（7）执行下列操作之一：,23,9.4.2创建基本弹出菜单,在工作区中，为其生成弹出菜单的热点或切片会显示一条蓝色行为线，该行为线附加在弹出菜单的顶级菜单轮廓上。,24,9.4.3创建弹出菜单内的子菜单,1创建弹出子菜单,若要创建弹出子菜单，具体操作步骤如下：,（1）打开弹出菜单编辑器的【内容】选项卡并创建菜单项。同时创建自己希望用作子菜单的菜单项，并将其直接放在将拥有它们的菜单项下。（2）单击以高亮显示要使其成为子菜单项的弹出菜单项。（3）单击【缩进菜单】按钮，将该项指定为菜单项列表中恰好位于其上面的菜单项下的子菜单项。（4）若要将下一项目添加到子菜单，先高亮显示它，再单击【缩进菜单】按钮。所有在同一级别上缩进的相邻项构成单个弹出子菜单。,在弹出菜单编辑器中，使用【内容】选项卡上的【缩进菜单】和【左缩进菜单】按钮可以创建子菜单，即当用户将指针滑过或单击另一个弹出菜单项时显示的弹出菜单。用户可以根据需要创建足够多级子菜单。,25,9.4.3创建弹出菜单内的子菜单,（5）可以随时高亮显示一个菜单或子菜单项，然后单击【添加菜单】，在紧邻该高亮显示项的下方插入一个新项。（6）执行下列操作之一：,单击【继续】按钮移动到下一个选项卡，或者选择其他选项卡继续生成弹出菜单。单击【完成】按钮关闭弹出菜单编辑器,2创建弹出子菜单的弹出子菜单,若要创建弹出子菜单的弹出子菜单，具体操作步骤如下：,（1）在弹出菜单编辑器的【内容】选项卡上，高亮显示一个子菜单项。（2）单击【缩进菜单】按钮将该项再次缩进，使其从上方的相邻子菜单项缩进,可以继续缩进，以便根据需要创建任意多级嵌套的子菜,26,9.4.3创建弹出菜单内的子菜单,（1）在弹出菜单编辑器中，使所需弹出菜单处于显示状态，单击【内容】选项卡。（2）将该菜单项拖到列表中的新位置。（3）单击【完成】按钮。,单击【继续】按钮移动到【外观】选项卡，或者选择另一个选项卡继续生成弹出菜单。单击【完成】按钮关闭弹出菜单编辑器。,3将菜单项移到较高级别的菜单中,若要将菜单项移到较高级别的子菜单或主弹出菜单中，具体操作步骤如下：,（1）在弹出菜单编辑器的【内容】选项卡上，高亮显示该菜单项。（2）单击【左缩进菜单】按钮。（3）执行下列操作之一完成弹出菜单的创建或继续生成它：,4在弹出菜单中移动项目,若要在弹出菜单中移动项目，具体操作步骤如下：,27,9.4.4设计弹出菜单的外观,（1）在弹出菜单编辑器中，使所需弹出菜单处于打开状态，单击【外观】选项卡。（2）从【对齐方式】下拉列表框中选择【垂直菜单】或【水平菜单】。,在创建了基本菜单和可选子菜单之后，即可在弹出菜单编辑器的【外观】选项卡上，对文本进行格式设置，对【滑过状态】和【弹起状态】应用图形样式，并选择垂直或水平方向，如图。,1设置弹出菜单的对齐方式,若要在弹出菜单中移动项目，具体操作步骤如下：,28,9.4.4设计弹出菜单的外观,（1）在弹出菜单编辑器中，使所需弹出菜单处于打开状态，单击【外观】选项卡。（2）选择【单元格】选项：,2设置弹出菜单的背景,若要设置弹出菜单的背景，具体操作步骤如下：,HTML：仅使用HTML代码设置菜单的外观。该设置产生的页面具有较小的文件大小。图像：为你提供一组精选的图形图像样式，可用作单元格的背景。该设置产生的页面具有较大的文件大小。,3设置弹出菜单的文本格式,若要在当前弹出菜单中设置文本格式，具体操作步骤如下：,29,9.4.4设计弹出菜单的外观,（1）在弹出菜单编辑器中，使所需弹出菜单处于打开状态，单击【外观】选项卡。（2）从【大小】下拉列表框中选择预设大小，或在【大小】文本框中输入一个值。,若要在当前弹出菜单中设置文本格式，具体操作步骤如下：,（4）可以随时单击文本样式按钮以应用粗体或斜体样式。（5）单击对齐按钮使文本左对齐、右对齐或居中对齐。（6）从【文本颜色】框中选择文本颜色。,（3）从【字体】下拉列表框中选择一个系统字体组，或者输入自定义字体的名称。,30,9.4.4设计弹出菜单的外观,若要设置菜单单元格的外观，具体操作步骤如下：（1）在弹出菜单编辑器中，使所需弹出菜单处于打开状态，单击【外观】选项卡。（2）针对【弹起状态】和【滑过状态】选择文本和单元格颜色。（3）如果已选择【图像】作为单元格类型，针对每种状态选择一种图形样式。,4设置菜单单元格的外观,31,9.4.5添加弹出菜单样式,可以向弹出菜单编辑器中添加自定义单元格样式。当选择【图像】选项作为单元格类型（这将设置弹出菜单使其在它们的单元格中使用图形背景）时，自定义单元格样式可以与预设选择项一起显示在【外观】选项卡上。若要向弹出菜单编辑器中添加自定义单元格样式，具体操作步骤如下：（1）将笔触、填充、纹理和动态滤镜的任意组合应用于对象，然后使用【样式】面板将该组合保存为样式。（2）在【样式】面板中选择该新样式，然后从【样式】面板的【选项】菜单中选择【导出样式】命令。（3）选择样式的保存位置，并输入样式名称，然后单击【保存】按钮。当返回到弹出菜单编辑器的【外观】选项卡并选择了【图像单元格】背景选项时，就可以将该新样式与弹出菜单单元格的【弹起状态】和【滑过状态】的预设样式一起使用了。,32,9.4.6设置高级弹出菜单属性,弹出菜单编辑器的【高级】选项卡提供了用于控制以下各项的附加设置：单元格大小、边距和间距，文字缩进，菜单消失延时，以及边框宽度、颜色、阴影和高亮，如图。若要为当前弹出菜单设置高级单元格属性，具体操作步骤如下：（1）在弹出菜单编辑器中，使所需弹出菜单处于打开状态，单击【高级】选项卡。（2）从【单元格宽度】和【单元格高度】右端的下拉列表框中宽度或高度约束：,自动：强制单元格高度符合在弹出菜单编辑器的【外观】选项卡中设置的文本大小，并强制单元格宽度符合包含最长文本的菜单项。像素：允许以像素为单位在【单元格宽度】和【单元格高度】文本框中输入特定尺寸。,33,9.4.6设置高级弹出菜单属性,（3）在【单元格边距】文本框中输入一个值，用以确定弹出菜单文本和单元格边缘之间的距离。（4）在【单元格边距】文本框中输入一个值，用以设置菜单单元格之间的间距。（5）在【文字缩进】文本框中输入一个值，用于设置弹出菜单文本的缩进量。（6）在【菜单延迟】文本框中输入一个值，用以设置当指针从菜单移开后，菜单仍保持可见的时间量（单位为毫秒）。（7）设置弹出边框属性：,显示边框：允许显示或隐藏弹出菜单边框。如果该选项未选定，则将禁用下列选项。边框宽度：设置弹出菜单边框的宽度。边框颜色、阴影和高亮：允许修改弹出菜单边框的颜色。,34,9.4.6设置高级弹出菜单属性,（8）执行下列操作之一完成弹出菜单的创建或继续生成它：,单击【继续】按钮以移动到【位置】选项卡，或者选择其他选项卡继续生成弹出菜单。单击【完成】按钮关闭弹出菜单编辑器。,35,9.4.7控制弹出菜单和子菜单的位置,弹出菜单编辑器的【位置】选项卡使你可以指定弹出菜单的位置，如图。当【网页层】可见时，还可以通过在工作区中拖动顶级弹出菜单的轮廓来调整其位置。,单击【位置】按钮以相对于触发弹出菜单的切片来调整菜单的位置。输入X和Y坐标。如果坐标为（0，0），则使弹出菜单的左上角和触发它的切片或热点的左上角对齐。,1设置弹出菜单的位置,若要使用弹出菜单编辑器设置弹出菜单的位置，具体操作步骤如下：（1）在弹出菜单编辑器中，使所需弹出菜单处于打开状态，单击【位置】选项卡。（2）执行下列操作之一定义菜单位置：,36,9.4.7控制弹出菜单和子菜单的位置,单击【子菜单位置】按钮以相对于触发该子菜单的弹出菜单项调整子菜单的位置。输入X和Y坐标。如果坐标为（0，0），则会将弹出子菜单的左上角和触发它的菜单或菜单项的右上角对齐。,2设置弹出子菜单的位置,若要使用弹出菜单编辑器设置弹出子菜单的位置，具体操作步骤如下：（1）在弹出菜单编辑器中，使所需弹出菜单处于打开状态，单击【位置】选项卡。（2）执行下列操作之一定义子菜单的位置：,若要相对于触发子菜单的父菜单项来排列每个子菜单的位置，为子菜单位置取消选择【放在同一位置】复选框。若要相对于父弹出菜单来排列每个子菜单的位置，选择【放在同一位置】复选框。,（3）执行下列操作之一：,37,9.4.7控制弹出菜单和子菜单的位置,3拖动弹出菜单设置位置,（4）单击【完成】按针关闭弹出菜单编辑器，或者单击【后退】按钮修改其他选项卡中的属性。,单击【工具】面板中的【显示切片和热点】按钮。在【层】面板中，单击包含眼睛图案的列。,若要通过拖动弹出菜单来为其设置位置，具体操作步骤如下：（1）如果需要，执行下列操作之一以显示【网页层】：,（2）选择作为弹出菜单的触发器的网页对象。（3）将弹出菜单的轮廓拖到工作区中的其他位置。,38,9.4.8编辑弹出菜单,1在弹出菜单编辑器编辑弹出菜单,在弹出菜单编辑器中，可以编辑或更新弹出菜单的内容，重新排列菜单项，或者更改4个选项卡中任一选项卡上的其他属性。,单击【工具】面板中的【显示切片和热点】按钮。在【层】面板中，单击包含眼睛图案的列。,若要在弹出菜单编辑器中编辑弹出菜单，具体操作步骤如下：（1）如果需要，执行下列操作之一以显示【网页层】：,（2）选择弹出菜单所附加到的切片。（3）在工作区中双击弹出菜单的蓝色轮廓，打开弹出菜单编辑器，并显示弹出菜单项。（4）在4个选项卡中的任一选项卡上进行所需修改，单击【完成】按钮。,39,若要更改弹出菜单项，具体操作步骤如下：（1）在弹出菜单编辑器中，使所需弹出菜单处于显示状态，单击【内容】选项卡。（2）双击【文本】、【链接】或【目标】文本框并编辑菜单文本。（3）在项目列表外单击以应用所做更改。（4）单击【完成】按钮。,9.4.8编辑弹出菜单,2更改弹出菜单项,若要在弹出菜单中移动项目，具体操作步骤如下：（1）在弹出菜单编辑器中，使所需弹出菜单处于显示状态，单击【内容】选项卡。（2）将该菜单项拖到列表中的新位置。（3）单击【完成】按钮。,3在弹出菜单中移动项目,40,9.4.9关于导出弹出菜单,Fireworks会自动生成在Web浏览器中查看弹出菜单所必需的CSS代码或JavaScript（具体取决于选择哪个选项）。如果选择对弹出菜单使用CSS代码，则包含弹出菜单的Fireworks文档会导出为使用CSS代码的HTML。也可以选择将CSS写入到一个外部.css文件，并将此文件与mm_css_menu.js文件一起导出到与HTML文件相同的位置。如果没有选择对弹出菜单使用CSS代码，则会使用JavaScript。在这种情况下，包含弹出菜单的Fireworks文档会导出为HTML，同时会将一个名为mm_menu.js的JavaScript文件导出到与该HTML文件相同的位置。在上传文件时，应该将mm_css_menu.js（或针对JavaScript的mm_menu.js）上传到与包含该弹出菜单的网页相同的位置。如果希望将该文件发布到其他位置，必须在FireworksHTML代码中更新引用mm_css_menu.js和.css文件（或mm_menu.js）的超级链接，以便反映自定义位置。对于每个包含CSS弹出菜单的文档，在从Fireworks中导出为HTML和图像时，会导出唯一的.css文件。例如，假如fred.png和frida.png,41,9.4.9关于导出弹出菜单,都包含弹出菜单，并且对弹出菜单使用CSS代码将这两个文件导出到同一个文件夹。结果会得到单一的mm_css_menu.js文件和两个css文件：一个名为fred.css，另一个名为frida.css。当弹出菜单包含子菜单时，Fireworks会生成一个名为arrows.gif的图像文件。该图像是一个出现在菜单项旁边的小箭头，它告诉用户存在一个子菜单。无论文档中包含多少个子菜单，Fireworks总是使用同一个arrows.gif文件。,42,本章总结,掌握行为面板的基本操作掌握制作导航栏的两种方法掌握弹出菜单的制作及控制弹出菜单外观的方法,