当前位置:首页 > 电子/通信 > 综合/其它 > 第九章Fireworks制作导航栏与弹出菜单
第9章制作导航栏与弹出菜单2本章目标掌握行为面板的基本操作掌握制作导航栏与弹出菜单的方法39.1行为面板9.1.1关于行为9.1.2行为面板的操作49.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文件中。59.1.1关于行为行为的添加,是Fireworks与其他图像图形软件最大的区别之一。由于Fireworks的这种行为添加的功能,使得我们在实际工作中,可以利用其制作演示网页,以便于公司的客户人员,更好地与客户沟通,通过演示网页,我们不仅能看到整个网页的界面结构、色彩方案等外观,更能让用户能够体验到点击的乐趣,使得整个网站的业务洽谈及客户沟通更为顺畅。Fireworks中的行为,实际上是分为事件与动作两部分。所谓事件,即行为触发的条件,比如鼠标点击或滑过、页面载入或载出等,通俗地说,用户在触发动作的时候,采用的是什么样的操作。有了事件,当然要有动作,用户在进行一个操作后,将会发生什么结果,这就是我们所说的动作,如弹出菜单、图像交换等。因此,动作就是,行为的事件执行后,所能够得到的交互效果。上面,是我们对行为、事件、动作三者间的简述,需要强调的是,行为包含着事件与动作,缺少了事件或动作的行为,在网页中,是不会有任何交互效果,事件与动作对于行为来说是缺一不可的。Fireworks中的行为添加主要通过行为面板来完成。69.1.2行为面板的操作(1)选择切片或热区,执行【窗口】→【行为】命令,或按快捷键【Shift+F3】,打开【行为】面板,可以看到,在面板的左边为显示事件,右边为显示动作,如图;(2)点击,即可弹出行为列表,从中选择一种行为,添加后的行为会出现在【行为】面板中,如图;79.1.2行为面板的操作(3)选择面板中的行为后,可以执行以下操作::用于删除行为;:显示隐藏的行为;:编辑行为;:删除动作。89.2制作轮替图效果9.2.1关于轮替图9.2.2简单交换9.2.3交换图像99.2.1关于轮替图所谓轮替图,就是当鼠标滑过一个图形时,该菜单将角发另一个图形的显示。动作的触发对象始终是一个网页对象:切片、热区或按钮。最简单的轮替图像是将第1帧中的一个图像与紧挨着它的下面第2帧中的图像轮替,也可以生成更复杂的轮替图像。轮替图像可以交换来自任何帧的图像,不相交轮替图像交换来自除触发对象切片之外的切片中的图像。当在Fireworks中选择一个使用行为手柄或【行为】面板创建的触发对象网页对象时,将显示它的所有行为关系。默认情况下,轮替图像交互由一条蓝色行为线表示。109.2.2简单交换创建简单交换图像是将两个重叠的帧进行交换,并且只涉及一个切片。具体操作如(1)执行【编辑】→【插入】→【切片】命令建立切片;(2)按【Shift+F2】组合键,打开【帧】面板,在【帧】面板中,单击【新建/重制帧】按钮创建一个新帧;(3)在新帧上,创建、粘贴或导入用作交换图像的图像,并将该图像放在刚才创建的切片的下方;(4)在【帧】面板中,选择第1帧,返回到包含原始图像的帧;(5)选择切片并将鼠标放在行为手柄上方,鼠标变成手形,单击行为手柄,并从菜单中选择(6)添加简单变换图像行为选项,如图;119.2.2简单交换(7)按【F12】在浏览器中预览效果。129.2.3交换图像在浏览网页时,常会发现一些效果,如当鼠标指向个网页图像时,在网页的另一个位置会出现一个图像,这是不相交变换图像效果。不相交变换图像交换的是另一个与其自身位置不同的网页图像。当鼠标滑过或单击一个触发器图像时,作为响应,在网页的另一个位置中出现一个图像。鼠标滑过的图像被视为触发器,发生更改的图像被视为目标。与仅使用一个切片的简单变换图像一样,首先必须对触发器、目标切片和交换图像所驻留的帧进行设置。然后,可以使用一条行为线将触发器链接到目标切片。其具体如下:提示不相交变换图像的触发器不一定必须是切片,热点和按钮也具有可用于创建不相交变换图像的行为手柄。提示如果所选对象是按钮.或者如果切片或热点已经覆盖图像,则无需执行以上操作。(1)若要将不相交变换图像附加到所选图像,首先执行【编辑】→【插入】→【切片】或【编辑】→【插入】→【热点】命令,将切片或热点附加到触发器图像。139.2.3交换图像(2)然后在【帧】面板中单击【新建/重制帧】按钮创建一个新帧。在画布上所需位置的新帧中再放置一个用作目标的图像.可将该图像放在不与刚创建的切片不重合的任何位置。选择图像,然后执行【编辑】→【插入】→【切片】命令将切片附加到图像。(3)在【帧】面板中选择第1帧,返回到包含原始图像的帧。选择覆盖触发器区域(原始图像)的切片、热点或按钮,然后将鼠标放在行为手柄上,鼠标随即变为手彤。将触发器切片或热点的行为手柄拖到第二次创建的目标切片,出现一条从触发器中心延伸到目标切片左上角的行为线,同时打开【交换图像】对话框,如图所示。149.2.3交换图像(4)从【交换图像】弹出菜单中,选择刚才创建的帧,然后单击【确定】按钮。(5)单击【预览】按钮以预览和测试不相交变换图像。(6)可以从单个切片中拖动多个行为手柄来创建多个变换行为。例如,可以从同一切片中触发一个变换目像和一个不相交变换图像。图9-5所示为用来触发变换图像行为和不相交变换图像行为的切片。159.2.3交换图像(7)若要将多个变换图像应用到所选切片,可以将行为手柄从所选切片拖到同一切片的边缘或其他切片上。将手柄拖动到同一切片的左上边缘时可创建一个交换图像,将手柄拖动到其他切片时可创建不相交变换图像。提示若要从所选同页对象或按钮中删除拖放变换图像,首先单击要删除的蓝色行为线,然后单击【确定】按钮即可删除交换图像行为。169.3制作导航栏179.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关于导出弹出菜单189.4.1关于弹出菜单编辑器弹出菜单编辑器是一个带有选项卡的对话框,它会引导用户完成整个创建弹出菜单的过程,如图所示。它的许多用于控制弹出菜单特征的选项被组织在以下4个选项卡中:内容:包含用于确定基本菜单结构以及每个菜单项的文本、URL链接和目标的选项。外观:包含可确定每个菜单单元格的【弹起】状态和【滑过】状态的外观,以及菜单的垂直和水平方向的选项。高级:包含可确定单元格尺寸、边距、间距、单元格边框宽度和颜色、菜单延迟以及文字缩进的选项。位置:包含可确定菜单和子菜单位置的选项:199.4.1关于弹出菜单编辑器【菜单位置】将相对于切片放置弹出菜单。预设位置包括切片的底部、右下部、顶部和右上部。【子菜单位置】将弹出子菜单放在父菜单的右侧或右下部,或放在其底部。根据弹出菜单的设计,可能不需要使用弹出菜单编辑器中所有的选项卡或选项。可以随时编辑任意选项卡中的设置,但至少应该在【内容】选项卡中添加一个菜单项,才能创建可在浏览器中预览的菜单。209.4.2创建基本弹出菜单在弹出菜单编辑器的【内容】选项卡上,可以确定弹出菜单的基本结构和内容。其他弹出菜单编辑器选项卡上的选项的当前或默认设置会在创建菜单时应用于该菜单。若要创建简单的弹出菜单,具体操作步骤如下:选择【修改】→【弹出菜单】→【添加弹出菜单】命令。单击切片中间的行为手柄,然后从菜单中选择【添加弹出菜单】命令。(1)选择一个热点或切片,它们将成为弹出菜单的触发器区域。(2)执行下列操作之一以打开弹出菜单编辑器:(3)单击【内容】选项卡,单击【添加菜单】按钮以添加一个空菜单项,可以随时添加、删除和编辑单元格。(4)双击每个单元格并输入或选择适当的信息,如图:219.4.2创建基本弹出菜单文本:指定该菜单项的文本。链接:确定该菜单项的URL。用户可以输入自定义链接,也可以从【链接】弹出菜单中选择一个链接(如果存在链接)。如果用户已经为文档中的其他网页对象输入了URL,则这些URL将出现在【链接】弹出菜单中。目标:指定URL的目标。可以输入自定义目标,也可以从【目标】弹出菜单中选择一个预设目标。229.4.2创建基本弹出菜单在窗口中的最后一行输入内容后,会在该行的下面增加一个空行。单击【继续】按钮移动到【外观】选项卡,或者选择另一个选项卡继续生成弹出菜单。创建弹出菜单的子菜单项目。单击【完成】按钮关闭弹出菜单编辑器,完成弹出菜单的创建工作。(5)重复(3)和(4),直到添加了所有菜单项。(6)可以随意地删除菜单项,方法是高亮显示该项,然后单击【删除菜单】按钮。(7)执行下列操作之一:提示若要从一个活动单元格定位到另一个单元格并继续输入信息,可按【Tab】键在单元格间移动,并使用向上箭头键和向下箭头键垂直滚动列表。239.4.2创建基本弹出菜单在工作区中,为其生成弹出菜单的热点或切片会显示一条蓝色行为线,该行为线附加在弹出菜单的顶级菜单轮廓上。提示若要查看弹出菜单,必须按【F12】键在浏览器中预览。Fireworks工作区中的预览不会显示弹出菜单。249.4.3创建弹出菜单内的子菜单1.创建弹出子菜单若要创建弹出子菜单,具体操作步骤如下:(1)打开弹出菜单编辑器的【内容】选项卡并创建菜单项。同时创建自己希望用作子菜单的菜单项,并将其直接放在将拥有它们的菜单项下。(2)单击以高亮显示要使其成为子菜单项的弹出菜单项。(3)单击【缩进菜单】按钮,将该项指定为菜单项列表中恰好位于其上面的菜单项下的子菜单项。(4)若要将下一项目添加到子菜单,先高亮显示它,再单击【缩进菜单】按钮。所有在同一级别上缩进的相邻项构成单个弹出子菜单。在弹出菜单编辑器中,使用【内容】选项卡上的【缩进菜单】和【左缩进菜单】按钮可以创建子菜单,即当用户将指针滑过或单击另一个弹出菜单项时显示的弹出菜单。用户可以根据需要创建足够多级子菜单。259.4.3创建弹出菜单内的子菜单(5)可以随时高亮显示一个菜单或子菜单项,然后单击【添加菜单】,在紧邻该高亮显示项的下方插入一个新项。(6)执行下列操作之一:单击【继续】按钮移动到下一个选项卡,或者选择其他选项卡继续生成弹出菜单。单击【完成】按钮关闭弹出菜单编辑器2.创建弹出子菜单的弹出子菜单若要创建弹出子菜单的弹出子菜单,具体操作步骤如下:(1)在弹出菜单编辑器的【内容】选项卡上,高亮显示一个子菜单项。(2)单击【缩进菜单】按钮将该项再次缩进,使其从上方的相邻子菜单项缩进可以继续缩进,以便根据需要创建任意多级嵌套的子菜269.4.3创建弹出菜单内的子菜单(1)在弹出菜单编辑器中,使所需弹出菜单处于显示状态,单击【内容】选项卡。(2)将该菜单项拖到列表中的新位置。(3)单击【完成】按钮。单击【继续】按钮移动到【外观】选项卡,或者选择另一个选项卡继续生成弹出菜单。单击【完成】按钮关闭弹出菜单编辑器。3.将菜单项移到较高
本文标题:第九章Fireworks制作导航栏与弹出菜单
链接地址:https://www.777doc.com/doc-4620437 .html