基于Web标准的网页设计

第五章Fireworks5.1Fireworks基础5.1.1矢量图和位图的概念5.1.2认识Fireworks的界面5.1.3新建、打开和导入文件1.新建文档在开始页中点击“新建Fireworks文件”，或执行菜单命令“文件”→“新建”都能新建文档。2.打开文件选择“文件”→“打开”菜单项，Fireworks可打开其可读的任何图像文件格式。包括Photoshop格式（psd）和Freehand、Illustrator，CorelDraw等大部分图像处理软件创建的文件格式3.导入文件导入文件是把一张图片导入到另一张图片里面去，1）选择“文件”→“导入”命令；（2）在导入文件对话框中选择需要导入的文件；（3）在文档窗口拖动鼠标指针，出现一个虚线矩形框，如图5-5所示，虚线矩形框总是等比例放大，保证导入的图片不会变形。松开鼠标，图片就被导入到矩形框中。导入图片大小、位置由拖动产出的矩形框决定，如图5-6所示。在步骤（3）中，也可以直接在文档编辑窗口单击鼠标，图片也会被导入。单击的位置即为图片左上角的位置，但图片的大小将保持原有的尺寸不变。导入文件还可以通过将要导入的文件拖动到图像文件的编辑窗口中实现，图片的大小也会保持原有的尺寸不变。导入文件的步骤5.1.4画布和图像的调整1.修改画布2.符合画布3.修剪画布4.改变画布的显示比例5.修改图像大小6.裁剪图像5.1.5辅助设计工具的使用1.标尺“视图”→“显示标尺”或“隐藏标尺”命令，可以显示或隐藏标尺2.辅助线3.网格5.2操作对象5.2.1对象和图层的概念在Fireworks中，只要我们向画布中添加内容，例如画一个矩形，插入一段文字，导入一个图像，这些都被看作是添加了一个对象。每插入一个对象，Fireworks就插入了一个图层，可以在窗口右侧的“层”面板中看到画布中具有的图层图层示意5.2.2选择、移动和对齐对象5.2.3变形和扭曲“缩放”工具：可以放大或缩小图像。“倾斜”工具：可以将对象沿指定轴倾斜。“扭曲”工具：可以通过拖动选择手柄的方向来移动对象的边或角。旋转对象。使用变形工具组中的任何一样工具，都可以旋转对象，将鼠标指针移动到变换框之外的区域，2.数值变形5.2.4改变对象的叠放次序5.2.5设置对象的不透明度5.2.6操作对象的快捷键1）当使用全选箭头选中对象后，使用键盘的方向键可以移动对象，每按一次方向键就使对象在该方向上移动一个像素，这在对对象进行精确位置调节时很方便。如果按住“Shift”键不放，再按方向键移动，可每次移动10像素。（2）如果要选中多个对象，需要按住“Shift”键（多选键），再用全选箭头就可以同时选中多个对象了，此时多个对象外围都会出现选择框，这样可同时对多个对象进行移动等操作。（3）如果要复制某个对象，可先选中再按住“Alt”键不放拖动某个对象，即可对其进行复制，这比选中对象再用“Ctrl+C”、“Ctrl+V”复制快多了。（4）对于所有形状绘制工具而言，按住“Shift”键不放进行绘制，可以保证其宽、高比始终为原始比例。这对于绘制圆形或正方形是必要的5.3编辑位图在Fireworks中，用户处理的对象主要分为两类，一类是位图图像，另一类是矢量图形。无论是处理位图还是矢量图像，用户都应该了解一个基本原则，就是“先选择，后操作”，就是说要先选中一个对象，这个对象可以是一个多边形对象，也可以是一些像素组成的位图区域，然后才能对它进行操作5.3.1创建和取消选区“选取框”工具（）：在图像中选择一个矩形像素区域；“椭圆选取框”工具（）：在图像中选择一个椭圆形像素区域；“套索”工具（）：在图像中选择一个不规则曲线形状像素的区域；“多边形套索”工具（）：在图像中选择一个直边的自由变形像素区域；“魔术棒”工具（）：在图像中选择一个像素颜色相似的区域。1.“选取框”或“椭圆选取框”工具“选取框”工具和“椭圆选取框”工具位于工具箱的同一个按钮位置，选取框工具用于创建矩形的选区，而“椭圆选取框”工具用于选择“椭圆形”选区“边缘”选项“边缘”选项有三种选择，它们的功能如下：“实边”创建的选取框将严格按照鼠标操作产生区域。“消除锯齿”防止选取框中出现锯齿边缘。“羽化”可以柔化像素选区的边缘。4.“套索”和“多边形套索”工具“套索”工具用于创建曲线形的选区，而“多边形套索”工具是以直线为边界的多边形选区4.魔术棒工具魔术棒工具可以在图像中选择一个像素相似的区域。5.3.2编辑选区中的像素区域1.“滴管”工具2.调整颜色3.模糊效果5.4绘制矢量图形1.矢量图形的基本构成矢量图形可分为笔触和填充两个部分。而要认识矢量图形，就必须了解另一个几何概念——路径。“路径”是用矢量数据来描述的线条，它本身是看不见的，但是在Fireworks中，为了便于编辑，将会使用彩色线条来表示它；沿着路径添加某种颜色样式，得到的线状结果就是“笔触”；而在路径围成的区域中应用某种颜色样式，得到的块状结果就是“填充”。2.“直线”、“矩形”和“椭圆”工具使用“直线”工具（）、“矩形”工具（）或“椭圆”工具（），可以快速绘制基本矢量形状。绘制好形状后，可以在属性面板中对它进行进一步设置。先使用“全选箭头”工具选中画布上的矢量形状，就会出现它的属性面板，3.填充属性的设置矢量图形的填充方式主要有三种，即“实心”、“渐变”和“图案”，（2）渐变方式填充渐变引导线的使用。用全选箭头选中矢量图形，这时图形上会自动出现渐变引导线，如图5-56所示；如果要旋转渐变引导线，可以单击渐变线一头的方点拖动，或将鼠标移动到渐变线上方，此时光标会变成旋转形状，可按住鼠标拖动旋转，如果按住Shift键旋转，可保证渐变引导线以45度增量为单位旋转；如果要改变渐变线的长度，可以拖动渐变线一头的方点延长或缩短；如果要改变渐变线的位置，则需要拖动另一头的菱形点，渐变线将发生平移4.笔触属性设置选中需要设置笔触的对象，在属性面板中将显示用于笔触设置的各种属性（图5-62），其中用得最多的是描边颜色、描边粗细和描边类型选项。5.自由形状以圆角矩形为例6.钢笔工具（1）绘制点：使用钢笔工具在画布上单击一下，即绘制了一个点，接下来不要移动鼠标，在这个点附近（光标右下角带有“^”形时）双击鼠标结束或按住Ctrl键单击结束。（2）绘制直线：使用钢笔工具在画布上单击一下，即放置了第一个点，然后移动鼠标，再单击一下即放置了第二个点，一条直线段会将这两个点连接起来。继续绘制点，直线段将连接每个节点。执行下列操作之一可以结束绘制：在最后一个点处双击完成绘制一条开放路径；在所绘制的第一个点处单击完成绘制一条封闭路径。（3）绘制曲线：使用钢笔工具在绘制点按住鼠标并拖动；或者单击绘制第一个点后，移动鼠标，在绘制第二个点时按住鼠标并拖动，继续绘制点，在绘制最后一个点之前松开鼠标，单击绘制最后一个点，接着在最后一个点处双击完成绘制一条曲线，如图5-66所示。（4）绘制直线和曲线的混合曲线：在直线节点后绘制曲线，点击并拖动鼠标即可。在曲线节点后绘制直线，点击即可，如图5-67所示。其中路径上的空心圆点表示曲线节点，空心方形点表示直线节点。将鼠标移动到曲线节点上单击鼠标可将其转换为直线节点；将鼠标移动到直线节点上时，光标右下角会出现“-”号，此时单击可将该直线节点删除（7）修改路径：对于已经绘制好的路径，可以用“部分选定”箭头单击路径上的某个节点，此时该节点会变为实心，表示被选中，此时按住并拖动鼠标，即可调整路径的形状，也可使用键盘上的方向箭头以1像素为单位精确移动节点。提示：①钢笔工具可对任何矢量路径进行修改，例如矩形、圆等矢量图形的路径，方法是先用“部分选定”箭头选中路径，再选择钢笔工具就能对路径进行修改了。②钢笔工具绘制完路径后一般要使用“部分选定”箭头对路径进行调整。很多路径不一定非得使用钢笔绘制，利用现有的矢量路径（例如矩形、圆等工具）绘制后再调整可能事半功倍。5.4.2调整矢量线条5.4.3路径的切割和组合“刀子”工具（）用于切割矢量图形的路径2.路径组合（1）联合（2）相交（3）打孔（4）裁切5.4.4路径和选区的相互转换1.路径转换为选区2.选区转换为路径5.5文本对象的使用在Fireworks中修饰文本的一般步骤如下：①选择合适的字体，有时只要选择一款漂亮的字体，无须太多修饰也能显得很美观。②书写文字，并调整间距。③对文本进行填充和描边处理。④对文本应用滤镜效果，如投影、发光等。5.5.1文本编辑和修饰的过程举例（1）新建一个画布。选择工具箱中的文本工具（）。（2）在文本起始处单击左键，将会弹出一个小文本框；或者拖动鼠标绘制一个宽度固定的文本框。（3）在其中输入文本，也可以粘贴文本。（4）单击文本框外的任何地方，或在工具面板中选择其他工具，或按下Esc键都将结束文本的输入。如果要修改文本，则首先要使用全选箭头（）选中这个文本对象，此时文本对象周围会出现带顶点的蓝色矩形框，如图5-103所示。然后用文本工具（）点击并拖动选中其中的文字，就可以对选中的文字进行修改了，如图5-104所示。例如调整大小，水平间距，颜色等3.给文字描边4.添加投影5.5.3将文本附加到路径5.6蒙版5.6.1使用“粘贴于内部”创建矢量蒙版4.制作图像背景的文字由于文本也是一种矢量，所以也能将位图图像粘贴于文本内部，达到图像背景文字的效果，其制作步骤如下5.6.2创建位图蒙版1.位图蒙版创建的步骤2.利用位图蒙版技术制作网页Banner5.7简单GIF动画的制作5.7.1使用补间实例制作动画（1）选择“直线”工具按住Shift键绘制一条水平直线，将直线的笔触颜色设置为黑色。（2）用全选箭头选中直线，执行菜单命令：“修改”→“元件”→“转换为元件”（快捷键为F8），在弹出的元件属性对话框中保持默认设置即可，此时可发现直线上多了一个箭头，表示它已转换为元件了。（3）按“Ctrl+Shift+D”将直线“克隆”出一个新的，这样就有两个直线元件了。（4）选中新克隆出的直线，执行菜单命令：“修改”→“变形”→“数值变形”，在数值变形对话框中选择“旋转”，输入角度为255度，再使用缩放工具，将直线缩短一些，然后移动到如图5-162所示的位置。（5）接下来在“层”面板中同时选中两个元件，执行菜单命令“修改”→“元件”→“补间实例”，在图5-163所示的对话框中，输入步骤为15，把“分散到帧”前面的勾去掉。点击确定后效果如图5-164所示。5.7.2制作遮罩动画（2）用文本工具输入一段文字，执行菜单命令“文本”→“编辑器”，在文本编辑器中将文本的方向改为“垂直文本”和“文本自右至左流向”，如图5-166所示。（3）按F8键将文本对象转换为图形元件。（4）在文本上方绘制一个和文本对象一样大的矩形作为遮罩层，设置该矩形的填充方式为“线性渐变”，渐变颜色从左至右为“黑色－白色－黑色”，如图5-167所示。图5-166文本编辑器图5-167矩形遮罩层（5）在“层”面板中选中文本对象和矩形，执行菜单命令“修改”→“蒙版”→“组合为蒙版”。（6）将蒙版层中间的铁链图标去掉，选中蒙版层左边的文本对象，将其拖动到矩形的左边，使文本均看不见。（7）在“层”面板中选中蒙版层，按“Ctrl+C”和“Ctrl+V”复制一个，这时可以把原来的蒙版层先隐藏。选中新蒙版层左边的文本对象，将其拖动到矩形的右边，使文本均看不见。（8）文本排列好后将这两个蒙版层的铁链图标都点上。（9）在“层”面板中选中这两个蒙版层，执行菜单命令“修改”→“元件”→“补间实例”，输入步骤为25，把“分散到帧”前面的勾选上。这样整个实例就制作完毕了。最终效果如图5-168所示。5.8切片及导出5.8.1切片的作用切片就是将一幅大图像分割为一些小的图像切片，并将每部分导出为单独的文件①网页中有很多边边角角的小图片，如果对这些小图片一张张单独绘制