Fireworks 应用（2）.ppt

第15章Fireworks应用,4.3.4制作弹出菜单,4.4绘制图形4.4.1绘图工具概览,图4.39绘制矢量图形工具,返回目录,4.4.2绘制页面草图1什么是页面草图2页面草图实例轮廓图在Fireworks中使用各种绘图工具可以轻松地进行网页草图的绘制，例如，图4.43所示的就是一个用Fireworks绘制的草图。该草图是一个网页的轮廓，可以作为进一步设计的基础，也可直接作为“跟踪图像”来指导网页制作。,图4.43页面草图最终效果,绘制该页面草图的步骤如下。（1）新建一个宽度为750像素、高度为700像素、画布颜色为白色的文档。（2）单击“工具”面板中的“矩形”工具，设置“笔触”颜色为“黑色”，“填充”为“无”，拖动绘制一个宽为740像素，高为690像素的矩形。（3）拖出两条竖向引导线（注意左右对称），然后单击“工具”面板中的“刀子”工具，沿引导线切割，删除中间切割掉的部分，如图4.44所示。,图4.44切割矩形路径,（4）拖出两条竖向引导线（注意左右对称），再拖出一条水平引导线。单击“工具”面板中的“钢笔”工具，先在左边的切割点上单击鼠标，然后在第3条和第5条引导线的交点上单击鼠标左键，此时按住鼠标拖出节点的控制柄，拖动控制柄，当两控制柄处在第5条引导线上时释放鼠标左键，一条曲线路径就绘制出来了，如图4.45所示。,图4.45用“钢笔”工具绘制弧线路径,（5）用与步骤（4）相同的方法绘制另一条曲线路径。（6）先用引导线确定中间摆放“标志图案”的位置，然后单击“工具”面板中的“矩形”工具，在引导线中间绘制一个矩形，并用“文本”工具在矩形内输入文字“标志图案”。（7）单击“工具”面板中的“线条”工具，在标志图案顶端两边绘制两条直线，直到曲线路径终点，如图4.46所示。,图4.46用工具绘制图形并输入文字,（8）用“矩形”工具在画布左边绘制一个矩形，并用“线条”工具在矩形右侧绘制一条横着的直线和一条竖着的直线，用“钢笔”工具在竖着直线的上端和矩形右上顶点绘制一条曲线路径，用“指针”工具框选该步骤绘制的图形后按【Ctrl+G】键将其组合，如图4.47所示。,图4.47用绘图工具绘制图形,图4.48用绘图工具绘制图形,（9）在组合图形内输入文字“welcome”。（10）用“矩形”工具在刚组合的图形下绘制一个宽度与组合图形相同，高度到底的矩形，在矩形内绘制几条直线（代表文字），并在矩形右小角绘制两条曲线路径（作为修饰性花边），如图4.48所示。,（11）按【Ctrl+S】键保存文件。（12）用“线条”工具绘制4条直线，摆放在如图4.49所示的位置。,图4.49绘制直线并摆放,（13）选择“椭圆”工具按住【Shift】键在上图两条横着的直线中间绘制一个圆，再用“刀子”工具从圆中间切割，将其左半部分放在如图4.50所示的位置，右半部分删除。,图4.50切割正圆并摆放,（14）用“钢笔”工具绘制一条曲线路径，将其起点放置在上图第1条直线上，终点与上图的第2条直线终点对齐。（15）绘制一个矩形，在矩形内输入文字“图片”，再绘制几条直线，摆放在如图4.51所示的位置。,图4.51绘制图形并摆放,（16）绘制一个矩形，在矩形内绘制几个由两条短直线构成的“十字”图形，用“文本”工具在“十字”图形后分别输入“项目1”、“项目2”等，此时的画布如图4.52所示。,图4.52绘制图形并输入文字,（17）绘制一条直线将其与下面剩下部分分开。（18）重复步骤（15）（17）再绘制下面两部分，最后得到的效果如图4.43所示。（19）按【Ctrl+S】键保存文件。（20）绘制完