Fireworks MX 2004 网页工具-创建按钮和导航栏
Fireworks MX 2004 网页工具-创建按钮和导航栏
在 Fireworks 中,可以使用按钮编辑器快速创建一个按钮元件,从库面板中,克隆多个按钮元件,就可以制作成导航栏。
创建带有样式的按钮
使用“按钮按钮编辑器”创建按钮,为了美化按钮,可以应用样式面板中的样式,还可以应用“属性面板”上的各种效果。
1.打开 Fireworks,通过“文件”>“新建”,新建一个文档。
2.“编辑” >“插入”>“新建按钮”。
3.在按钮编辑器中,选择“释放”状态,画一个宽69像素,高20像素,x,y坐标都为0的矩形。
4.选中矩形,然后打开样式面板,点击并且应用一种样式;之后在属性面板上点击填充颜色块,实例中选择红色。
5. 也可以选中按钮,点属性面板上的+增加各种效果。
输入清晰的按钮文字
在网页图象中,如果使用较小的中文字体,例如12象素,可以使用“不消除锯齿”的宋体。使用更大的其它字体时,就需要消除锯齿了。
1.在“按钮按钮编辑器”的释放状态下,使用工具面板上的“文本工具”,在按钮上输入文字,在属性面板上,选择宋体,12像素,不消除锯齿。
输入文字后的按钮:
使“滑过”状态的按钮颜色相对“释放”状态变亮。
1.选中“滑过”状态,点击“复制弹起时的图形”。
2.点击属性面板上的“+”, 添加效果“调整颜色”>“色相/饱和度”。
3.在弹出的“色相/饱和度”对话框中,向右拖动亮度滑块。这时就增加了按钮的亮度。
重复上面的过程,调整“按下”状态和“按下时滑过”状态的颜色。
为按钮增加链接。
1.选中“活动区域 ”,在属性面板的“链接”项中,输入#作为链接,以后可以修改。
一个按钮就做好了。
创建导航栏
1. 创建按钮元件后,可以从库面板中,将该元件的一个实例拖到工作区域中,重复这个过程,创建多个按钮。
2. 为了对齐各个按钮,需要先作出引导线。选中“视图”>“标尺”。
3.从标尺上,拖出水平和垂直的引导线。
4.反复从库面板中,把按钮的实例拖到文档中,并且对齐到引导线。
5.选中不同的按钮实例,在属性面板上,修改文本和链接地址。
6.使用“文件”>“导出”,保存类型“HTML和图像”,输出导航条。
相关内容
-
基于模板生成的网页如何修改标题
基于模板生成的网页如何修改标题,网页,修改,模板,更新,选项,...
-
Dreamweaver教程:使用空链接
Dreamweaver教程:使用空链接,链接,教程,属性,对象,文档,输入,...
-
Dreamweaver教程: 创建导航链接
Dreamweaver教程: 创建导航链接,导航,链接,文件,文档,教程,站...
-
Dreamweaver教程:基于网页创建模板
Dreamweaver教程:基于网页创建模板,网页,模板,名称,区域,教程...
-
Dreamweaver教程:创建电子邮件链接
Dreamweaver教程:创建电子邮件链接,链接,电子邮件,教程,选取,...
-
Dreamweaver教程: 定义CSS样式链接状态(1)
Dreamweaver教程: 定义CSS样式链接状态(1),链接,状态,鼠标,下...
-
Dreamweaver教程: 定义CSS样式链接状态(2)
Dreamweaver教程: 定义CSS样式链接状态(2),链接,状态,用于,鼠...
-
dreamweaver CSS使用教程:FLIPV 属性
dreamweaver CSS使用教程:FLIPV 属性,属性,使用教程,垂直翻...
-
Dreamweaver网页表格被撑大的解决方法
Dreamweaver网页表格被撑大的解决方法,解决方法,网页,复制,原...
-
手机移动网页制作:表单输入框、单选框、复选框
手机移动网页制作:表单输入框、单选框、复选框,输入框,单选框,...
-
Dreamweaver网页有CSS时使用个别样式的方法
Dreamweaver网页有CSS时使用个别样式的方法,网页,方法,命令,...
-
手机移动网页制作:用Dreamweaver软件工具
手机移动网页制作:用Dreamweaver软件工具,制作,软件工具,移动...
-
手机移动网页制作:WML的基础知识和基础语法
手机移动网页制作:WML的基础知识和基础语法,制作,基础语法,标...
-
手机移动网页制作:插入图片、标题、文字链接
手机移动网页制作:插入图片、标题、文字链接,插入图片,文字,制...
-
dreamweaver CSS使用教程:扩展属性
dreamweaver CSS使用教程:扩展属性,扩展,属性,对象,滤镜,使用...