论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > Fireworks教程
Tag:切片,gif,动画,文字,图标,照片,网页,效果图,表情,按钮,工作,8.0,cs,视频教程

活用Firework4制作下拉菜单

文章类别:Fireworks | 发表日期:2008-9-20 19:32:06

Firework4的一个新增加的功能就是能轻易地制作下拉菜单。下拉菜单是目前比较热门的一种网页交互方式之一。仿Windows界面的下拉菜单非常流行。但是由于制作菜单需要懂得一定的Javascript语言或者操作步骤比较麻烦。因此在一段时间内还很少有人制作这样的东东。现在有了Fireworks就简单了。

  闲话休提,言归正传。新版本的firework4.0,在界面上,跟firework3.0没有多大区别。打开firework4,新建一个文档,(记住页面大少要象素800×600)你利用一些基本作图技术,制作出几个按钮。如图1,我就搞了这样几个按钮。


  接着点击左边工具栏slice tool(小刀工具),将几个按钮割开。如图2:


右击“我的历程”按钮,选取add pop-up Menu选项;然后右击“我的历程”,选择“pop-up memu”于是调跳出一个新窗口,如图3:


  在文字栏中填上你菜单内容,连接在栏中填入你所要连接的页面,之后按加号添加。按类似的方法,再添加几个,在本文例子中填入四栏!之后,按next键继续。如图4


  在此,让我具体地介绍一下以上窗口的内容。Cell栏:那是菜单选项的格式,html是html文本格式,而image是指图片格式。选择不同,会有不同的效果。在此,本人较赞成用图片格式,因为那看起来较漂亮些。下面的是字体和字号的选择,这随你喜欢啦!up state是指鼠标放到按钮时的字体设置和菜单格的设置,overstate是指鼠标放到菜单栏时字体的设置和菜单格的设置。你可以选择一种你喜欢的格式。Preview是预览栏,因为该软件对中文支持不好,所以显示为不正确,你可以不管它,因为导出时是正常的。之后,按“finish”搞定。完成这些设置后,按“文件”菜单的export选项,导出html文件,这样你可以预览啦!哗,是不是很酷呢!如图5


  要说明一下的是,假如你制作图片时,图片的大少底于象素800×600的话,你的页面的按钮和图象就会靠到左上角了。你要校正这些又要花些时间了,不过很轻易的,你仔细研究一下代码就可以轻松搞定。我们这里用dreamweaver4.0将它打开,如图6。

  选中外面的大表格,在工具栏中的align中选取center,将表格居中。但是,你要注重,你把按钮的位置改变了,而下拉菜单的位置。 却没有改变,所以你务必将菜单的位置定位改过来。点击左上角的show code view按钮,进入代码编辑界面(如图7)。

  观察绿色代码,找到代码<a href="#" onMouseOut="FW_startTimeout();" onMouseOver="window.FW_showMenu(window.fw_menu_0,9,117);" >,9是菜单的横坐标位置,117是纵坐标位置。你可以作一些调试,本人这里把9改144就行了。嗯,一切就这样快捷,ok搞定!

  假如你再想改菜单格的宽和高的话,你可以改该页中head里的代码:window.fw_menu_0 = new Menu("root",113,25,"Times New Roman, Times, serif",18,"#0000ff","#ffffff","#666666","#000000");其中113,25两个数字分别指的是菜单的宽和高,你可以作些改正,再预览一下,直到你满足为止!
Ok,dreamweaver和firework的综合运用――制作下拉菜单篇就谈到这里,以后再见!

上一篇:Fireworks 4.0大内秘籍之——北冥神功 人气:1998
下一篇:fireworks制作送给心上人的礼物 人气:1666
Fireworks视频教程

Fireworks视频教程
Windows视频教程
Windows操作
[文]
WORD教程
Word教程
[文]
Excel教程
Excel教程
[文]
PowerPoint教程
PowerPoint
[文]
Dreamweaver
Dreamweaver
[文]
FIREWORKS
Fireworks
[文]
FLASH教程
Flash教程
[文]
photoshop平面设计
PhotoShop
[文]
CorelDraw
CorelDraw
[文]
C语言教程
C语言教程
[文]
html
Html教程
[文]
DivCss布局
Div+Css布局
[文]
Javascript
Javascript
[文]
ACCESS数据库
ACCESS数据库
[文]
ASP教程
ASP教程
[文]
SQLServer数据库
SQLServer
[文]
ASP.NET教程
ASP.NET教程
[文]
FlashAS
FlashAS
[文]
视频教程列表
计算机基础入门及办公自动化: 网页制作开发视频教程: 平面广告设计视频教程 初级程序设计及ASP动态网站开发 Asp.net动态网站开发视频教程 Flash 动画角本编程视频教程
文章教程搜索
 
Fireworks推荐教程
Fireworks热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058