Web标准网页设计原理与前端开发技术
上QQ阅读APP看书,第一时间看更新

2.3 制作导航栏按钮图片

导航栏是网页的重要组成部分,通常由一组具有按钮功能的图片组成。单击导航栏中的按钮图片,可以打开新的网页。

例2-2】 制作“课程简介”按钮图片。制作步骤如下:

(1)创建新画布。进入Fireworks后,在菜单栏中选择“文件”|“新建”命令。在弹出的“新建文档”对话框中将画布的宽度和高度分别设置为200像素和20像素。然后单击“确定”按钮,即可在舞台中创建新画布。

(2)添加矩形。在“工具”面板的“矢量”区域中选择“矩形”工具,然后在画布中插入一个“矩形”对象。如图2-5所示,以画布的宽度和高度为标准,在“属性”面板中设置“矩形”的宽度和高度,并将“矩形”的X和Y均设置为0,这样可以使“矩形”的大小和位置与画布完全吻合。最后设置矩形的填充类别。

图2-5 设置“矩形”的属性

(3)添加文本。在“工具”面板的“矢量”区域中选择“文本”工具,然后在画布中插入一个“文本”对象,并在其中输入文本“课程简介”。如图2-6所示,参照画布的宽度和高度,在“属性”面板中将“文本”的宽度和高度分别设置为160和16,再将“文本”的X和Y分别设置为20和2,这样可以使“文本”的中心与画布的中心完全一致。最后设置文本的颜色。

图2-6 设置“文本”的属性

(4)保存.png文件。将图像设计结果保存在.png格式的文件中,并将文件命名为2-2.png。

(5)生成.gif文件。在菜单栏中选择“文件”|“导出”命令,根据.png文件生成同名的.gif文件。