Fireworks打造标签式网页导航条

现在标签式网页导航条效果在很多大网站都非常常见,本文告诉您如何使用fireworks打造此类标签式导航条效果。首先让我们来看下最后的效果:

1、打开FW 8.0 (笔者使用的是8.0版,当然其它版本也是可以的了)

2、新建一个稳当大小760X400

3、用矩形工具画一个渐变的矩形,这里这个矩形是要做为导航条的背景,所以你可以调配自己喜欢的颜色。

4、然后用直线工具画两条线;见下图,做为分隔线来用。

5、然后按住Shift+G把这两条线组合成对象,复制这个对象,从窗口对齐面板最后见下图:

6、下来这几部就比较关键了,按下快捷键Ctrl+f8,调出新建元件窗口选择“按钮”。

如果你看见这个对话框那么你这步是正确的的了。

7、来让我们在这里创作按钮吧!用圆角矩形工具画下图,渐变见下图,边框为一个像素。

8、然后复制这个图形去掉边框,调节大小使按钮有凸出的感觉。

9、现在我们来做下面那个三角形我用的是路径。

(1)在刚才那个图形的上面点右键选折取消组合

(2)选折钢笔工具在下面路径加三个节点见下图:

选择白箭头工具,向下拖拉中间的节点成三角形

时间: 2024-11-08 20:18:47

Fireworks打造标签式网页导航条的相关文章

Photoshop制作金属质感的网页导航条

本教程主要使用Photoshop设计金属质感的网页导航条,大部分都是在图层样式下完成的. 效果 1, 在PS中新建文件,宽度定义为1000px,实际上我们所要用到的宽度一般在950px-980px之间.为了方便更好的展示网站的整体效果.所以文件的宽度应大于网页实际的宽度.高度自定,但最好要大于整个页面的高度,在没有办法确定页面的高度范围时,我们可以把高度定到大于网页高度.这样,整个页面制作好了.我们可以使用裁切工具.将多余的部分裁切掉. 2, 这个实例,以网站实际宽度为800像素为例进行操作.为

CSS网页布局入门教程11:带当前标识的标签式横向导航图片美化版_基础教程

主页 DIV+CSS教程 常用代码 水晶图标 幻灯图片 软件下载 CSS2.0实用手册

CSS网页布局入门教程10:带当前标识的标签式横向导航_基础教程

主页 DIV+CSS教程 常用代码 水晶图标 幻灯图片 软件下载 CSS2.0实用手册

Photoshop制作透明风格的网页导航条

  放上一组大家先欣赏一下(第一次做原创不要喷哦!) 首先声明,这个透明的导航不是我发明的,我是借鉴和学习 其次,我在做的过程中遇到很多问题,是前辈们没有讲出来的.是通过我一点点研究出来的成果,所以解决的问题是原创 最后,希望把东西分享给更多的人,让大家少走弯路,多进步 最最后,加油! 那么接下来我们开始吧! 1. 新建一个画布(我的是1000*1000px,新手可以效仿) 背景颜色(个人喜好,我的背景是图片模糊处理过的,我会在专门发一篇关于背景的,这次先添加颜色就好) 新建一个你认为合适的导航

如何用Fireworks制作水晶效果的导航条?

制作(拿蓝色的作例子): 1.用路径做出如图中的形状 2.同样用用路径做出如图中的形状, 将它放入如图的地方 3.同样用用路径做出如图中的形状 将它放入如图的地方 ,透明度调为82 4. 路径做一个高约6的宽约532的圆角矩形 5. 选中最下面的路径 设置如下: 完成

如何打造标签式IE浏览器 (共享源码)(转)

http://files.cnblogs.com/zhouyinhui/Surfer.rar http://www.haogongju.net/art/731094  

Photoshop教程:打造实用网页导航

Photoshop设计教程:打造实用的网页导航菜单. 话不多说来看一下效果图是什么样的. 1.打开PS新建一个新文档,尺寸大小由你的网站规格决定.并填充背景#1a1a1a.(木木:在这一步你可以新建一个图层,这样好方便你以后的修改.) 2.双击该图层,弹出图层样式,选择颜色渐变.并设置如下: 3.为了增强效果,添加内阴影. 4.新建一个图层,并便用矩形选区工具,在导航上画出一个矩形大小约有原来的一半.填充#FFFFFF.透明度40%,更改混合模式:叠加. 5.现在来做一个光标滑过的效果.用矩形工

Bootstrap入门书籍之(五)导航条、分页导航_javascript技巧

导航条 导航条(navbar)和上一节介绍的Bootstrap入门书籍之(四)菜单.按钮及导航.导航(nav),就相差一个字,多了一个"条"字.其实在Bootstrap框架中他们还是明显的区别.在导航条(navbar)中有一个背景色.而且导航条可以是纯链接(类似导航),也可以是表单,还有就是表单和导航一起结合等多种形式.它们在移动设备上可以折叠(并且可开可关),且在视口(viewport)宽度增加时逐渐变为水平展开模式. 基础导航条 实际上,导航条和导航在外观上的差别并不是那么的大,但

邮件导航条的良好设计影响邮件营销的转化率

导读:如何设计邮件导航条?是否能和网页导航条采用相同的设计方式?我们有很多时候并不会仔细考虑这个问题,当然如果通过改换邮件导航条的设计可以提高邮件营销的转化率,那么许多企业都可能愿意去改变,通过阅读本文相信你就会有自己的答案. 你邮件顶部的导航条,可以是推动用户接洽的巨大来源.除了在邮件预览窗格几乎每次都能看到之外,导航条向你邮件订阅者展示一个清晰而熟悉的路径,以便与您接洽,即使他们对你邮件的主要内容并不感兴趣. 按照eROI最新的"邮件基础要素"调查,62%的包含导航条的邮件营销者表