案例19 AIDE汽车有限公司

　　本例主要是为【AIDE汽车有限公司】设计的主页，如最终效果图1所示，制作该主页时，主要采用图片处理功能，对汽车的图片进行处理，并采用【Effect】效果和【Strok】填充，介绍了按钮的制作过程。

（1）基本绘图工具的使用
（2）效果功能的应用
（3）笔画功能的应用
（4）文本功能的应用

Image3.gif (21174 bytes)

最终效果图1 AIDE汽车有限公司

步骤1、

　　在Fireworks中，执行【File】(【New】菜单命令，出现如图19.1所示的对话框，在该对话框中设置【Width】700Pixels为【Height:500Pixels】为【Canvas Color】为【White】，设置完毕，单击【OK】按钮。

Image5.gif (8101 bytes)

图19.1 新建对话框

步骤2、

　　在Fireworks窗口中打开一张图片，如图19.2所示。

Image6.gif (39681 bytes)

图19.2 打开图片

步骤3、

　　在工具箱中双击工具，得到如图19.3所示的对话框，设置【Style】选项为【Normal】；【Edge】选项为【Feather 50】。

Image8.gif (4531 bytes)

图19.3 圈选对话框

步骤4、

　　用圆形选取工具在图片中按汽车的大小画一选区，然后按【Ctrl+Shift+I】键进行反选，再单击【Delete】键，删除汽车以外的像素。再按【Ctrl+Shift+I】键进行反选如图19.4所示，按【Ctrl+C】键进行拷贝，然后选择新建的文档，按【Ctrl+V】键进行粘贴，并调整其位置和大小，如图19.5所示。

Image9.gif (52590 bytes)

图19.4 反选效果

Image10.gif (20397 bytes)

图19.5 粘贴后的效果

步骤5、

　　在工具箱中选择工具，按住【Shift+Alt】键，在文档中画一个圆形，然后打开【Stroke】标签，对圆形边线进行设置，如图19.6所示，在【Fill】标签下拉列表中选择【None】，如图19.7所示，图形的最终效果如图19.8所示

Image11.gif (5011 bytes)

图19.6 【Stroke】标签

Image12.gif (3998 bytes)

图19.7 在【Fill】下拉菜单中选择【None】

Image13.gif (25874 bytes)

图19.8 填充效果

步骤6、

　　在工具箱中选择画椭圆的工具，按住【Shift+Alt】键，画一个与步履（5）中所绘的圆大小相同的圆形，对其边线进行设置，如图19.9所示，最终效果图19.10所示。

Image14.gif (4916 bytes)

图19.9 对新画圆边线进行设置

Image15.gif (24406 bytes)

图19.10 设置完成后效果

步骤7、

　　在工具箱中选择画直线工具，画一条较短的直线，并同时选中步骤（6）中生成的圆形，选择【Effect】标签中下拉列表框下的【Bevel and Emboss】中的【Inner Bevel】如图19.11所示，设置如图19.12所示，然后选择直线，按住【Alt】键拖动便复制了另一条直线，调整两条直线的位置，如效果图19.13所示。

Image16.gif (6521 bytes)

图19.11 【Effect】标签的下拉列表【Bevel and Emboss】

Image17.gif (5085 bytes)

图19.12 设置【Inner Bevel】

Image18.gif (27257 bytes)

图19.13 调整后的效果

步骤8、

　　在工具箱中选择文本工具，输入【AIDE CAR】并对其进行如图19.14所示的设置，设置完后单击【OK】按钮。按住【Alt】拖动（6）中的圆形，再复制一个圆形，并同时选中文本，打开【Text】菜单下的【Attach to Path】如图19.15所示，效果如图19.16所示。

Image19.gif (15460 bytes)

图19.14 输入“AIDE CAR”设置

Image20.gif (3545 bytes)

图19.15 打开【Text】菜单下的【Attach to Path】

Image21.gif (29071 bytes)

图19.16 设置后效果

步骤9、

　　制作按钮。执行【Insert】(【New Button】菜单命令，出现如图19.17所示对话框，在工具箱中双击画矩形工具，出现如图19.18所示的对话框，设置其中【Coner】选项为80，然后画两个矩形，一个为实心，进行如图19.19所示的操作；另一个为空心，填充为灰色，效果如图19.19所示。

Image22.gif (9532 bytes)

图19.17 执行【Insert】(【New Button】菜单命令

Image23.gif (3880 bytes)

图19.18 矩形工具对话框

Image24.gif (9086 bytes)

图19.19 矩形填充后的效果

步骤10、

　　执行【Insert】(【New Symbol】菜单命令如图19.20所示，将步骤（9）中生成的图形定义为符号。

Image25.gif (3592 bytes)

图19.20 执行【Insert】(【New Symbol】菜单命令

步骤11、

　　在选中【Up】标签状态下选择文本工具输入【公司简介】等文本，并适当调整其位置、字体和颜色，设置如图19.21所示，设置完成后单击【OK】按钮。按钮效果如图19.22所示。

Image26.gif (13558 bytes)

图19.21 设置字体和颜色

Image27.gif (12024 bytes)

图19.22 设置完成后的效果

步骤12、

　　在【Over】标签被选中的状态下，将用【Library】(【Symbol】命令选中的符号拖入文本框中如图19.23所示，打开【Effect】标签，在该标签的下拉列表中选择【Adjust Colot】(【Hue/Saturation】如图19.24所示，出现如图19.25所示的对话框。选择文本工具，再一次输入【公司简介】等文本，字体属性设置与图19.21相同，但要改变文字的颜色，如图19.26所示。

Image24.gif (8949 bytes)

图19.23 【Library】对话框

Image29.gif (6864 bytes)

图19.24 【Effect】标签

Image30.gif (6054 bytes)

图19.25 【Hue/Saturation】对话框

Image31.gif (10590 bytes)

图19.26 改变文字字体

步骤13、

　　在【Down】标签打开的状态，将【Library】中的【Symbol】符号拖入文本框中，使用文本工具输入【公司简介】，文本设置为黑色，其他设置同图19.23。得到效果如图19.27所示。

Image32.gif (13115 bytes)

图19.27 改变文本颜色

步骤14、

　　在【Over While Down】标签被选中状态下，将【Library】中的【Symbol】符号拖入文本框中，使用文本工具输入【公司简介】，在【Effect】标签的下拉列表框中选择【Adiast Colot】(【Hue/Saturation】调解其饱和度，如图19.28所示。

Image33.gif (12802 bytes)

图19.28 调解饱和度后的页面

步骤15、

　　关掉制作按钮对话框，一个按钮便出现在文档中。按住【Alt】键复制出另一个按钮，双击被复制的按钮，双击文本【公司简介】，得到文本对话框，改变文本为【产品介绍】，如图19.29所示，则该按钮所有状态下的文本都会改变，如图19.30所示。

Image34.gif (10080 bytes)

图19.29编辑按钮

Image35.gif (34499 bytes)

图19.30 【产品介绍】按钮状态下的文本

步骤16、

　　选择工具箱中的文本工具，输入【AIDE汽车制造有限公司】及【Email:www.aidecar.com】，然后调整其位置，如图19.31所示。

Image36.gif (36261 bytes)

图19.31 调整文本位置

步骤17、

　　为按钮添加【URL】。执行【Window】(【URL】命令打开【URL】标签，出现如图19.32所示的对话框，在对话框中选择按钮所要连接的【URL】地址即可。为了让文档尽量小，可以打开【Optimize】标签对其进行优化，如图19.33所示。然后进行保存。保存的方式为执行【File】(【Export】命令出现如图19.34的对话框。

Image37.gif (4935 bytes)

图19.32 【URL】标签

Image38.gif (5635 bytes)

图19.33 【Optimize】标签

Image39.gif (18495 bytes)

图19.34 优化设置

步骤18、

　　在浏览器中浏览整个效果，如图19.35所示。

Image3.gif (18792 bytes)

图19.35 最终效果图