用Fireworks同Dreamweaver创建背景透明的弹出菜单
?牐?1.首先我们在Fireowrks创建一个弹出菜单,在Fireworks中选择你要创建弹出菜单的按钮或是其他对象,给它们添加热区或切片对象来触发弹出菜单,点击中心的白色圆点按钮,从其下拉菜单中选择“Add Pop-up Menu”命令(^33040701a^1)。
?牐?2.当“Set Pop-Up Menu”对话窗口显示时,输入弹出菜单中所有需要的菜单项和链接,点击Next按钮。紧接着在显示的对话窗口Cells选项中选择HTML,设置文字字体选项、文字尺寸以及样式,在“Up State”和“Over State”这两个选项中设置初始状态和当鼠标移到菜单上时文字的颜色和单元格颜色。设置完这些,点击Finish按钮,回到Fireworks文档状态,并调节弹出菜单的位置。
?牐?3.使用菜单命令File\Save,保存这个PNG文件到你的站点文件夹或是硬盘上相关的文件夹中,以便将来需要修改这个弹出菜单时可以利用Fireworks和Dreamweaver互相关链的特性进行HTML往返编辑。
?牐?4.接下来我们输出这个Fireworks文件,使用菜单命令File\Export,当Export对话窗口显示时,选择你的站点文件夹保存该文件,从保存类型下拉列表中选择“HTML and Image”选项,点击“保存”按钮。此时这个Fireworks文件将会转换成网页文件保存到你的站点指定的文件夹中,同时将有一个JavaScript文件(fw_menu.js)与HTML文件和图像同时输出,因而这个JavaScript文件会和你的HTML文件位于同一级目录中(^33040701b^2)。
?牐?5.启动Dreamweaver软件修改这个JavaScript文件,从站点管理器或使用菜单命令File\Open查找并打开这个后缀名为js的文件。
?牐?6.接下来将查找fw_meun.js这个文件中的一些单词,这些单词分别是:bgcolor、bgColor、backgroudColor。
?牐犇憧梢栽贒reamweaver中使用菜单命令“Edit\Find and Replace”或快捷方式“Ctrl+F”打开“Find and Replace”对话窗口进行查找。
?牐?7.你将会找到很多个这样的单词,接下来有两种方法可以对它们进行处理:
?牐?1)你找到上述单词后,删除包括该单词的整行语句,注意是整行,而不仅仅只是这个单词。
?牐?2)包含该单词的整行语句前面加二条“/”,将它注释掉,这样浏览器就会忽略掉前面放置了“//”的语句。
?牐?8.保存并且关闭这个fw_meun.js文件。
?牐?9.在Dreamweaver文件中插入这个Fireworks的HTML文件,你可以使用菜单命令“Insert\Interactive Images\Fireworks HTML”或点击对象面板中的“Insert Fireworks HTML”按钮,当Insert Fireworks HTML对话窗口被打开,查找这个HTML文件,点击OK按钮。然后在Dreamweaver中保存这个文件。
?牐?10.接下来我们就可以在浏览器中预览了,使用菜单命令“File>Preview in Browser”预览这个弹出菜单就可以看到效果了(^33040701c^3)。