分享
 
 
 

Fireworks MX制作下拉菜单

王朝other·作者佚名  2006-11-23
窄屏简体版  字體: |||超大  

随着网站页面极其功能的复杂化,越来越多的网站使用下拉菜单进行导航。熟悉javascript的朋友都知道,所谓下拉菜单其实是通过Javascript控制每一个元素的可见属性实现的,当然这需要专门编写大段的代码。但是要是使用fireworksMX就不需要这么麻烦,所有的代码都是由Fireworks MX自动生成的,你要做的只是美化一下界面,再简单的设置一下下拉菜单的选项就可以了。

下面就来看看怎样使用Fireworks MX增强的下拉菜单功能制作出让人羡慕的下拉菜单。

步骤1:

打开一个卡通人物图形,在工具栏上选择Text Tool写入文字:Click。并将其放置在图形的左上角(如图1)。

步骤2:

在工具栏上选择Slice Tool(切片工具),在文字上画一个矩形。切片工具的功能是制作小图片,以及将一张大图切成数张小图后以表格的形式进行发布,以增快下载的速度。每一个切片都可以添加链接或者是做为按钮。切片后的区域以绿色表示,我们可以在下方的PRoperties面板上精确调整切片的位置与大小(如图2)。

步骤3:

鼠标右键单击切片的绿色区域,在弹出的菜单中选择Add Pop-Up Menu(添加下拉菜单)(如图3)。

步骤4:

弹出的Pop-up Menu Editor(下拉菜单编辑器)对话框包含四个标签,分别对应不同的功能(如图4)。

单击Text标签下的区域,输入菜单的名称,例如:选项一。再单击加号,重复以上操作,即可添加所有的菜单选项,如果输入错误的话,点击减号就可以删除这一个选项(如图5)。

同样在Link标签下的区域可以输入此菜单选项的链接地址。

由于只是个练习,我们输入"#"符号,在Html标记语言中,链接地址为"#"代表链接到自身,也就是说是这样一个链接不论你如何点击你看到的都将是当前的页面,不会出现"页面不存在"的错误,很适合测试使用。

步骤5:

但是有的时候我们将使用到不止一级的菜单,可能在一级菜单的某个选项下还有二级菜单,甚至还会有三级菜单的存在,该如何面对如此复杂的情况呢?很简单,在此面板上有两个按钮分别是:Outdent Menu与Indent Menu,可以用来设置某一菜单选项下的子选项。你只需要先选择一个选项,再点击Indent Menu就可以将其设置为二级菜单,再点击Outdent Menu就可以将其恢复为一级菜单(如图6)。

以这样的方法你可以做出结构非常复杂的下拉菜单来。

步骤6:

在输入并设置好菜单选项后,选择Appearance选项卡。在这里,我们可以设置下拉菜单的外观属性。大家自己试一下就会熟悉,而值得注意的是Up State与Over State代表的是菜单的两种状态。在正常显示时是UP State而当鼠标移动到菜单选项上时就以Over State状态显示。我们可以分别在Style中为这两种状态设置不同的显示风格(如图7)。

步骤7:

选择Advanced选项卡,在这里可以进一步设置菜单的外观风格,主要是表格的属性,如边框的宽度,颜色,以及菜单内容与边框的距离等。请按照你自己的喜好进行修改(如图8)。

步骤8:

最后选择Position选项卡,在这里可以调整菜单弹出的位置与方向。你可以在Fireworks MX提供的效果中直接选择,也可以自己输入数值。注意Menu Position是一级菜单弹出的位置,而Submenu Position则是次级菜单的弹出位置设置(如图9)。

步骤9:

所有的设置都完成后,点击ok按钮,即可看到如图所示效果(如图10)。

我们可以直接从图上看出此下拉菜单弹出的位置,选项的个数等基本情况。在工具栏上选择Slice Tool ,在图形上拖曳鼠标就可以拉出绿色区域,每一个绿色区域在输出时将单独成为一个小图片,这样可以加快下载的速度(如图11)。

不断的切割图片,直至效果如图所示(如图12)。

步骤10:

Fireworks MX具有非常优良的效果预览功能,我们只要按下F12键就它就会自动生成一张网页让我们参看效果(如图13)。

步骤11:

现在我们已经完成了下拉菜单的制作,但是该怎样将其发布为网页的形式或者是直接输出到Dreamweaver中进行下一步的编辑呢?我们可以使用菜单命令File->Export来输出制作好的效果(如图14)。

但是更方便的是直接点击打开图形框上的Quick Export按钮,在这里你可以将文件输出到Dreamweaver、Flash乃至Director。

步骤12:

我们选择输出到Dreamweaver并且Export Html…(如图15)。

将弹出一个文件保存对话框,尤其要注意的是在保存类型的选择框中我们应当选择Html and Images,这样才会即输出网页也输出切割好的图片。如果在Include Area without Slice前的选择框打钩,可以将没有进行切片的图形部分一起输出。不打钩就只输出图形的切片(如图16)。

总结:

Fireworks MX的特点使其大大的方便了图形设计师制作复杂的网页效果,你不需要懂得程序语言就可以轻松的驾驭它,得到满意的效果。另外Fireworks、Flash、Dreamweaver被称为网页制作三剑客,它们功能相辅相成。每一种软件都可以轻松的与其它两种软件配合使用,而且都具有另外两种软件的一些常用功能,这一点,在Macromedia这一次推出的MX系列可以更明显的感觉到。我们可以用Fireworks MX制作网页,用Dreamweaver MX制作简单的Flash,用Flash MX加工Fireworks的Png格式图片,以制作动画。 因此如果我们能熟练掌握这三款软件的使用方法,那么我们的网页制作将非常方便。

练习:

使用Fireworks MX制作一个带有三层子菜单的弹出菜单,并且设置子菜单的弹出方向。

提示:

在content选项卡中使用Outdent与Indent来实现三级菜单功能,而在Position选项卡中来调节菜单弹出的位置。

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有