china.com
主页
新闻
体育
游戏
文化
教育
健康
财经
科技
旅游
军事
娱乐
商贸
  科技动态 硬件广场 下载基地 网络教室 网络冲浪 科学博览 移动时代 手机上网 桌面壁纸 科技商情  


用Fireworks 3快捷创建网页导航栏

2000-08-23 11:13:10

  Macromedia公司的网页图像制作软件Fireworks 3功能强大,使用它的网页按钮制作向导和现场效果,可以快速制作出漂亮的网页导航栏。网页导航栏一般是由一组按钮组成,而这一组按钮除了文本和链接不同外,其它外观特性一般都是相同的。我们可以通过复制的办法,轻而易举地获得一组相同的按钮,然后修改按钮的文本和链接,就可快捷完成导航栏的制作。下面以实例说明具体的制作步骤。

  1.在Fireworks 3主操作介面,单击工具栏的新建文档按钮,弹出新文档对话框。把画布的宽度和高度设置为合适的大小(本例设为400和200),单击该对话框中的OK按钮,打开一个新文档页面(图1)。
227695__0710-1.gif
图1

  2.从Insert(插入)菜单上选择New Button(新按钮)命令,启动按钮制作向导,弹出按钮编辑器窗口。从工具箱中选择矩形工具,在按钮编辑器窗口中拖动鼠标,画一个适当大小的矩形按钮(图2)。
227695__0710-2.gif
图2

  3.从填充面板(Fill)中选择想要的填充类型和填充色(如果填充面板没有显示,可以从Windows菜单上选择Fill命令,打开填充面板),制作漂亮的按钮图像,得到按钮的Up状态(正常状态)。方法是:单击填充类型(Fill Category)的下箭头按钮,从弹出的下拉列表中选择Ellipse(椭圆)图案;单击填充名称(Fill Name)的下箭头按钮,从弹出的下拉列表中选择Silver(银白色),结果如图3所示。
227695__0710-3.gif
图3

  4.单击按钮编辑器中的Over标签,按钮编辑器窗口的右下角增加了一个Copy Up Graphic(拷贝Up图像)按钮。单击该按钮,把按钮的Up状态复制过来。用箭头工具选取复制过来的按钮,按照上一步的方法,改变按钮的填充特效。本例选择Ellipse(椭圆)图案、Copper(黄铜色),如图4所示。此为按钮的Over状态(在制作完成的网页中鼠标指针掠过按钮时显示的状态)。
227695__0710-4.gif
图4

  5.单击Down标签,编辑器窗口右下角的按钮变为Copy Over Graphic(拷贝Over图像)。单击该按钮,把按钮的Over状态复制过来。依照上述方法,把填充色改为Spectrum(光谱色),如图5所示。此为按钮的Down状态(指在制作完成的网页中按下按钮时显示的状态)。
227695__0710-5.gif
图5

  6.单击Over While Down标签,编辑器窗口右下角的按钮变为Copy Down Graphic(拷贝Down图像)。单击该按钮,把按钮的Down状态复制过来。依照上述方法,把填充色改为Pastels(彩色蜡笔),如图6所示。此为按钮的Over While Down状态(指在制作完成的网页中,当按钮处在按下状态,鼠标掠过时显示的状态)。
227695__0710-6.gif
图6

  7.单击Active Area(激活区)标签,然后单击右下角的Link Wizard(链接向导),弹出Link Wizard对话框。单击Link(链接)标签,在对话框上部的文本框中输入URL(如http://www.infosea.126.com)(图7),最后单击OK按钮。本步操作的目的是为按钮建立链接。
227695__0710-7.gif
图7

  8.关闭按钮编辑器窗口,返回到文档编辑窗口。从工具栏中选择文本工具,在按钮编辑器中单击矩形按钮中心附近,弹出文本编辑对话框。从该对话框中的字体弹出菜单上选择一种字体,选择点大小,从颜色弹出菜单上选择一种颜色,单击居中对齐按钮(本例选用隶书,30点,蓝色,加粗,居中对齐)(图8),最后单击OK按钮。
227695__0710-8.gif
图8

  9.上步操作完毕,返回到文档编辑窗口。现在可以根据需要复制若干个按钮。操作方法是:首先从工具栏中选取箭头工具,然后按住Shift键,同时选择按钮图像和按钮文字。接着按住Alt键,用鼠标往下(也可往右)拖放编辑窗口中的按钮,即可完成按钮的复制。要几个按钮就复制几个。这样就可得到一个由完全相同的按钮组成的按钮组。本例为3个按钮。

  10.修改按钮文本:从工具栏中选取箭头工具,双击要修改按钮的文字,弹出文字编辑窗口,即可修改按钮文字。本例把第二和第三个按钮的文字分别修改为"电脑英语"和"网页设计"(图9)。
227695__0710-9.gif
图9

  11.修改按钮的链接:双击要修改按钮的图像,弹出一个对话框,询问要编辑所有按钮还是编辑当前按钮,此时请单击Current(当前)按钮。接着打开按钮编辑窗口,按第7步的说明操作,即可修改按钮的链接。

  12.剪裁画布:从Modify(修改)菜单上选择Trim Canvas(剪裁画布)命令,把与按钮组无关的画布剪除,得到由多个按钮组成的导航栏(本例为3个)(图10)。
227695__0710-10.gif
图10

  13.输出HTML文档:从File(文件)菜单上选择Export(输出)命令,弹出Export对话框,在Base Name文本框中输入文件名,选定HTML文档的风格(Style)和存放位置(Location),单击保存按钮(图11)。
227695__0710-11.gif
图11

  14.把导航栏插入网页中:启动网页编辑程序Dreamweaver 3,在对象面板上单击插入Fireworks HTML图标,弹出Insert Fireworks HTML对话框,单击其中的Browse(浏览)按钮,找到第13步生成的HTML文档,单击OK按钮,即可把导航栏插入到网页中。

  上面所述只说明了基本制作步骤。如果在按钮设计过程中能灵活运用Fireworks的特效(Effect),可以制作出更加美观的导航栏。

  摘自《赛迪网》 莫治雄/文

404 Not Found

404 Not Found


nginx


科技检索


中华网推荐

  • 1000名医生在线咨询

  • 中国足球队官方网站

  • 鸦片玫瑰(新版)

  • 精选股票天地

  • 闪光的flash教程

  • 中华网汽车世界

  • 为你的爱情出谋划策

  • 网文精选——野百合集

  • 世界文化遗产在中国

  • 历届香港小姐风姿集



  •  


    网络教室编辑信箱
    版权声明 | 本站检索 | 联系方法 | 刊登广告 | 使用说明 | 关于中华网 | 豁免条款

    版权所有 中华网