fireworks网页制作技巧与实例

　　Fireworks是推出的网页图像编辑软件，它同时具有位图图像和矢量图像编辑功能势必使它成为网页图像设计的先锋。下面学习啦小编跟分享了更多关于fireworks网页制作技巧与实例，希望你喜欢。

　　fireworks网页制作技巧：

　　◆ JavaScript 按钮

　　Fireworks 可以让您不用写一行 Javascript 代码就可以轻松的创建一个交互式的按钮。您只需要将一个矩形区域转换为一个按钮并使用按钮编辑器(Button Editor)来完成这 ◆ 魔 幻 翻 转除了创建按钮之外，Fireworks 还可以让您轻松的创建一个奇异的 Javascript 翻 它改变在这一页中的其他区域的显示，在 Fireworks 中，这种翻转效果被称作不相交翻转( disjoint rollover)。 Fireworks 含有一些可用于路径和位图图像的特殊效果和图像调整命令。

　　◆ 自 动 操 作

　　在您工作的时候，Fireworks 将记录每一个步骤并将它们放到历史记录(History)面板中 历史记录面板来自动完成一些重复的步骤。 蒙板(Masks)覆盖对象是指只显示文档中某一对象的一部分。您将使用这个白色的矩形来

　　◆ 热 点 区

　　在 Fireworks 中，将图像的一部分连接到一个 URL 非常简单。当您想建立一个连接但又不想使用交互状态的按钮时可以建立一个热点区(hotspots)。在Fireworks中创建热点区(Hotspots)就是建立一个图像映射(Map)。 Fireworks可以让您优化一个文档中的不同部分。每一个文档有一个默认的优化设置，但 一个 GIF 文件，但这个咖啡杯部分如果优化为 JPEG 文件将得到更好的效果。 当导出您的文档的时候，Fireworks 把每一个分割区导出为一个单独的文件。同时生成在浏览器中显示这个文档所需的 HTML 和 Javascript 代码。Fireworks 可以很轻松的将图像、HTML 和 Javascript 导出到您用 Macromedia Dreamweaver 创建和管理的站点

　　◆ 动 画

　　我们在 Firworks 中创建动画是使用帧(Frame)的概念。每一个帧(Frame)含有一个不同 帧。帧排列的顺序也就是播放的顺序，由它来建立一个动作的过程。

　　1. 我的Fireworks4中为什么无法输入中文?

　　首先你要选中中文的字体，另外可以试试不同的输入法。但是使用Windows自带的输 2.用pointer工具仅可以大致定位对象，有什么办法可以准确地设置其x,y坐标?

　　你可以使用info 面板，在上面的小窗口中输入数值，然后按下enter键。

　　3.在Fireworks中想把多个文件联成动画，该怎么做?

　　Fireworks 可以基于一组图像文件来制作动画。例如，通过将每个图形文件打开，

　　1 选择 File > Open Multiple。 Open Multiple Files 对话框打开。

　　2 查找文件，将这些文件添加到作为动画帧打开的文件列表。

　　如果你要将文件添加到列表，点击 Add。 如果你要将当前文件夹中所有的文件都添加到列表上，点击 Add All。 如果你想从添加的文件列表上删除文件，从列表上选择文件，点击 Remove。

　　3 选择 Open as Animation，点击 OK。 Fireworks 会将所有这些文件在一个单独的文档中打开，每个文件放在一个不同的帧，其顺序就是你在 Open Multiple Files 对话框

　　4.怎么设置帧延迟?

　　答：帧延迟决定当前帧播放的时间长度。帧延迟是把一秒当作 100 来设置的。例如，如果你设定帧延迟为 50，就是表示半秒钟，如果你将帧延迟设定为 300，就是表示3 秒钟。

　　5.怎样给输入的位图加入描边的效果? 充，在object面板中选择最右方的 StrokePlacement 就可以了。

　　6.怎样才能将Fireworks输出的文件输入到Dreamweaver中?

　　选择Fireworks菜单File-> Export,选择html and image,输出文件后，打开Dreamweaver，点击object面板中的Fireworks html添加按钮，定位刚才fw输出的html文件就可 7.怎样在Fw4里调整圆角的度数?

　　选中圆角矩形，在object(对象)面板调整Roundness的数值。

　　8.请问Fireworks4能否使text沿path运动的动画?

　　你可以在Object面板上一帧帧设Text Offset路径文字的偏离量，文字偏移是使文字路径中文字的起始位置在路径上发生偏移，最后在输出成动画格式。

　　【Fireworks】学习笔记FAQ

　　9.如何用Fireworks做突起效果的按扭?

　　选择Effect面板中的Bevel And Emboss的子菜单，例如inner bevel，好的按钮效果主要靠比较好的effect参数，细心调试一下就可以有好看的按钮。

　　10.请教在FW4中Copy→Paste，Duplicate，Clone三者区别?

　　1.Paste(粘贴)是针对Copy(拷贝)而言，点选或框选的图片目标经拷贝后可以被粘贴到当前图层或其他的应用图层上，如你在FW4打开一图片，想把它粘贴到Photoshop图 图片将以位图的形式同时被保留在WINDOWS的剪贴板上，根据需要你仍然可以把这个图片 2.FW4中的duplicate(复制)是把当前图层上已有的图片重新在新的图层上“复印 　　3.Clone(克隆)基本和复制一样，所不同的是克隆可以精确定位，克隆后的图片与原来的目标图片完全重合，可以利用光标上下左右键进行相对移动，FW4中可以设定移动 　　4.复制和克隆不能用框选，而拷贝则可以。

　　11.怎样用Fw4分割保存图片?

　　可以使用工具箱里的Slice工具。

　　12.怎样使用Fireworks画虚线?

　　1.先建立新文档，按住Shift键再用直线工具(Open tool)画一条直线。

　　2.选择Stroke面板：在面板中选择Random、Dots

　　3.选择右上角的三角形，选择Edit Stroke会出现面板，有Option、Shape和Sensitivity三个项目。

　　4.Option面板:

　　Ink Amout:100%; Spacing:300%(**注意:不要设为100%，必须大于。); 不要选Build-up，Tips:1

　　5.Shape面板:设置如图所示，可以不选Square，那么虚线的点就是圆的。

　　6.Sensitivity面板:

　　Brush Property:里面有以下几项：

　　Size、 angle、 Ink Amout、 Scatter、 Hue、 Lithtness、 Saturation

　　当每选取一项时，Affected By：里面的所有项的值都设为0。然后按应用-->确认。

　　7.制作完成后，点击右上角的三角形选取Save Sroke as，存为你要取的名字。

　　8.要在以后调用FW时使用这项命令时，必须再选取历史面板最后一项命令，存储为你要的名字，这里存为dashed line。

　　9.以后要调用时就选取Command-->dashed line就可以了。

　　13.怎样输入类似于网页中常见的9镑字?

　　输入文字时选择宋体，12px， no anti-alies。

　　14.怎样将两个位图对象合并位一个对象?

　　全选这二个位图对象，Modify>Convert to Bitmap。

　　15.怎样做出电视扫描线的效果?

　　打开或插入要处理的图片，然后画一个与图片大小、位置都相同的矩形(可用Info面板进行精确设置)，矩形填充类型为Solid，填充色为Black，纹理Texture选择Line-Horiz4，纹理量为100%，并选中Transparent选项。调整透明度，使效果更柔和些，可以设置为15左右。

　　16.怎么设置帧延迟?

　　帧延迟决定当前帧播放的时间长度。帧延迟是把一秒当作 100 来设置的。例如，如果你设定帧延迟为 50，就是表示半秒钟，如果你将帧延迟设定为 300，就是表示 3 秒 17.如何为每一帧输入帧延迟的设定值?

　　1 打开 Frame Properties 对话框： 双击帧面板上的帧的名字。 突出帧的名字，从帧面板的 Options 弹出菜单中选择 Properties。

　　2 在 Frame Delay 选项输入一个数字。

　　3 敲击回车，或者点击面板以外的地方关闭对话框。

　　18.FW预览以及输出时，HTML文件的左边和上边总有空隙，没有紧靠边。怎样时预览和 通常我们可以在DW中修改导出后的HTML文件，只要设置topmargin="0" leftmargin="0" marginheight="0" marginwidth="0"即可。

　　同理我们也可以修改FW的输出模板，使导出和预览时的文件直接就紧靠边，修改如 　　\Configuration\HTML Code\Dreamweaver\slices.htt

　　WRITE_HTML("bgcolor=\"#", exportDoc.backgroundColor.toString(16), "\"") 　　WRITE_HTML("topmargin=\"0\" leftmargin=\"0\" marginheight=\"0\"

　　marginwidth=\"0\" bgcolor=\"#",

　　exportDoc.backgroundColor.toString(16),

　　保存后，重新启动FW即可。

　　19.用Fw4打开psd，会提示缺少字体，而且psd中的文字走样?

　　Fw4现在可以很好的支持PSD多图层多格式文件，但是对汉字字体的支持是两套引挚，所以会出现不匹配的问题。这里的字体在FW4中打开还是可以编辑的，可以再次选中原有字体。 FW3虽然没有这个问题，但字体已转换为位图。

　　20.请介绍一下Fireworks中的对象混合模式。

　　Fireworks中有十三种对象混合模式，分别是

　　(Normal)普通模式

　　这是最基本的也是FW3默认的图像混合模式，在这种模式下位于上层的图像将覆盖掉(Multiply)累加模式 　果往往会产生亮度更低的颜色。用黑色叠加其他颜色的图像产生的结果永远是黑色， 图加立体效果。

　　(Screen)屏幕模式 图像的重叠处色彩的深度，因此结果往往会产生亮度更高的颜色。同样相反的是用黑色 是白色。

　　(Darken)暗模式 彩高度则将在显示结果中使用上层高度低的色彩代替下层高度高的色彩。

　　(Lighten)亮模式 图像同位置处色彩亮度则将在显示结果中使用上层高度高的色彩代替下层高度低的色彩

　　(Difference)交错模式 结果作为混合结果所显示的颜色，因此使用白色和底图进行交错模式混合产生的将是底

　　(Hue)色调模式示结果

　　(Stauration)饱和度模式 显示结果。因此如果上层图像的饱和度为0(灰色)，结果图像将保持底图色彩不变。

　　(Color)色彩模式 显示结果。这种模式保留了底图的灰度，因此可用于制作单色图像。

　　( Luminosity)亮度模式 一个新颜色作为显示结果。

　　(Invert)反色模式 　　(Tint)上色模式 　　(Erase)擦除模式

　　擦除模式是作用是将底图中被上层图像覆盖的部分擦除，和橡皮工具的作用相同。

　　21.优化面板上的Matte和Interlace有什么作用?

　　Matte是使图像在透明时，更好的与底色融合。Interlace交错的GIF，简单的说，就是下载GIF图时，是先模糊后清楚，不必一次全下载完

　　22.请介绍一些Fireworks中的小技巧

　　1、Brush工具特能的性能：按住shift键用brush工具画出一条水平或垂直线后，释放鼠标，但不要松开shift键，在brush光标附近会出现一个小加号，用brush再画一条线(仍按住shift键)，fireworks会把所画前一条线的终点和后一条线的起点连接起来。

　　2、Pencil工具的一个用途：在图象编辑模式下，当改变一个象素构成的图象时，pencil点到任何象素都会变成当前的描边颜色。

　　3、移动光标时，如果按住shift键不放，那么每移动一次为10个象素点。

　　4、选择工具：shift键除了可与矩形或椭圆形选框工具组合来选择正方形或圆形区 经选择好了一个矩形区域，发现应该选择的是正方形区域。这时，如果在矩形选择区域仍存在的情况下，按住shift，将得到矩形选择区域与正方形选择区域的叠加区域，而不是单独的正方形选择区域。为了避免这个问题，可在用shift键选择正方形或圆形之前，执行edit->selet none命令或者使用快捷键ctrl+d。也可以在选择区域外单击鼠标取消

　　23.如何修改渐变填充?

　　在Fill面板中使用了渐变填充后，如果想修改的话，开启并修改渐变图案的关键是

　　1、选择用渐变填充的图片。

　　2、超始点、漆桶工具，(Ctrl+K)。渐变控制出现。

　　3、要移动渐变的起始点，拖动圆形手柄。

　　4、要旋转渐变方向，将光标移动到控制手柄之外，直到出现Rotate光标，然后拖动

　　手柄到一个新的位置。在旋转渐变的时候，FW将渐变的起始点作为旋转的中心。

　　5、要改变渐变的大小，直接拖动正方形手柄到新的位置。

　　6、要修改椭圆渐变、矩形渐变、星爆渐变或者波纹渐变的斜切效果，沿某个方向拖 　　注：并不限制一定要将渐变控制保持在所选对象的内部。任何渐变控制——起始点、终止点或者大小/斜切控制手柄，都可以移动到对象之外 24.如何制作无缝平铺的背景图案?

　　制作新图案填充过程中最大的问题就是如何使图片拼接时无缝当FW在填充大于图案 边框，在重复拼接之后就非常明显;在大多数时候，这种情况是不满足要求的，有几种

　　首先，最简单的方法就是不要将图形无素放到图案图片的边缘。这就使得各个图片

　　当然，许多情况下图片已经覆盖了整个背景，画布的颜色完全被遮盖住。对这种类 运，fw 具有足够的图形编辑能力来完成这种操作。平铺放置图片的时候，图片的各个边 边缘进行混合，从而消除边界。下面是在fw中对图案边缘进行平滑处理的操作步骤：

　　1、打开要转换为图案的图片文件。

　　2、选择图片的某一部份作为图案的基础部分。使用扫描图片或者其他图形的一部份作为图案是一种常规方法。首先决定图案的大小(128*128就是不错的选择)，然后通过选项面板使用marquee(选框)工具的fixed size功能设置相应的尺寸。这样就可以方便

　　3、选择菜单命令edit->copy拷贝选择的区域。

　　4、选择菜单命令file->new创建一个新的文档。该文档应该至少是所选图片的三倍以上。如果选择128象素的正方形图片，那么新文档的最小尺寸为384*384。

　　5、为了准确定位，可以选择菜单命令view->grid option->edit grid来将网格线的尺寸设置为所选图片的尺寸，并且选中show grid和snap to grid选项。

　　6、选择菜单命令edit->paster，将剪贴板中的内容粘贴到文档的左上角。

　　7、使用alt+拖动方法复制图片，将复制的图片放到第一幅图片的右边。

　　8、重复第7步两次，在前两幅图片的下面再粘贴两幅图片。

　　9、关闭网格线显示，关闭snap to grid选项

　　10、选择所有四幅图片，使用命令modify->merge images。这一步是必须的，因为 之前选择了所有图片，所以四幅图片被合并到一个图片之中。

　　11、从工具箱中选择橡皮图章工具

　　12、首先处理左右两边图片之间垂直方面上的接缝。在边缘附近某一侧离边缘几个 的源点在边缘的哪一边)，将一个图片的边缘扩展到另一个图片的边缘。 按住alt键重新设置橡皮图章工具源点的位置。如果有必要，可以在选项面板中将橡皮图

　　13、在对垂直接缝进行模糊处理结束之后，按此法对水平接缝进行模糊处理，根据 　　当完成垂直方向和水平方向的接缝模糊处理之后，应该得到无缝图案，这一步完成 25.Fireworks中如何在不同的图中使用同一种切割方法?

　　拷贝WEB层，把别的层锁定，全选拷贝，打开另一个图，粘贴就可以了。

　　26.PNG格式有什么特点?

　　PNG格式的全称为“Portable Network Graphics (移植的网络图象文件格式 )”

　　优点：

　　1. 压缩比率高，并且是无损压缩，适合在网络中传播;

　　2. 具有8位、24位和32位三中色彩深度; 3.支持Alpha通道透明( 32位)和色彩索引透明( 8位);

　　缺点：

　　1) 没有动画功能;

　　2) 浏览器支持不理想，只有最新的主流浏览器才支持 目前最新的版本是于1996年10月W3C组织制定的。

　　27.FW中可不可以将彩色位图转成灰度图?

　　Xtras->Adjust color->Hue/Salution，或者Effect面板 Adjust Color->Hue/Salution

　　将Salution选项调为0，或者在优化面板GIf的色彩setting中选Grayscale，可以输出灰度图(Jpeg不支持)

　　28.怎样把在FW4里做的网页中一部分做成GIF格式，一部分做成JPG格式?

　　在Optimize面板中将一部分设置为gif格式，另一部分设置为jpg格式。

　　29.历史记录默认的是只有20条，在哪里设置增加呢?

　　打开Edit>refereces，在General选项中有undo steps选项，调整即可，不过太大了，对内存和硬盘都有要求，一般40-50即可。

　　30.如何使文字按照一定的路径排列?

　　同时选择文字和路径，然后Text/Attach to Path。

　　31.如何矢量图转化为位图?

　　用Modify-Convet to Bitmap可以将矢量图转化为位图。

　　32.FW4做的下拉菜单在鼠标离开后消失得不太灵敏，怎么办?

　　这个问题可以通过修改fw_menu.js文件来解决，首先找到控制菜单显示速度的以下 setTimeout("fwDoHide()", 1000)

　　(elapsed < 1000)

　　setTimeout("fwDoHide()", 1100-elapsed)

　　默认的数值1000表示当前的延迟时间是1秒，如果想将延迟时间修改为原来的一半， setTimeout("fwDoHide()", 500)

　　(elapsed < 500)

　　setTimeout("fwDoHide()", 550-elapsed) 以避免浏览者还没有看清菜单内容，菜单就消失了。 33.如何调用photoshop的滤镜?

　　选择Edit > Preferences 点Folders标签 ，选取photoshop_plug-ins，点Browse按钮，选择photoshop安装目录下的plug-in目录，重新起动fw4后， photoshop滤镜就会出现在xtra菜单和effect面板中。

　　如果没安装PS的话，可以将插件解压到X:……\macromedia\fireworks 4\configuration\xtras目录下，重新启动FW4即可。不过FW4只是支持部分PS的插件，我知道的主要有KPT6、KPT3、Eye Candy 4000、AVBrosPageCurl(用来卷页的)。

　　34.如何改变颜色模式?

　　点Mixer面板右上角小箭头的弹出菜单，可以选择色彩模式，RGB为基本色，Hexademical是RGB的十六进制，CMYK为印刷色(RGB的补色+纯黑)，HSB是色相/饱和度/亮度模式，Grayscale是灰级模式

　　35.在位图模式下，选中一些像素，如何实现反向选择?

　　Modify->Marquee->Select Inverse。

　　36.怎样才能画出圆角三角形?

　　1.用多边形工具画一个三角形.

　　2.选中这个三角形

　　3.选择菜单Modify--Alter Path--Inset Path--将Direction选为Outside，宽度自己修改一个合适得值---Coner选为中间的那个圆角形---OK!

　　37.怎么样才能实现跨帧共享图层，一般用在什么地方?

　　图层将 Fireworks 文档分成了不同的平面，就如同不同的描摹图纸重叠了一样. 如果你需要一些对象的出现贯穿动画的始终，就可以把这些对象放到一个图层上，然后选择SHARE THIS LAYER即可。 得到反映。

　　提示：Web 层上只包含有切割对象和热区对象，永远是跨帧共享的。

　　38.如何制作Commands?

　　firework中的commands都是由javascript编写的。可以有三种制作方法

　　1.用“History"浮动面板生成commands:：在历史面板上，将有用的步骤选中，单击右下角的保存按钮，将文件保存为*.jsf文件，放在“command”目录下的“creative“

　　2.用“batch process"生成批处理命令： 设置好批处理内容后，但机对话框右下角的“script"按钮，将文件保存。

　　3.自己编写自己的commands命令：可以用"Ultraedit"打开*.jsf文件，了解firework中正确的编程方式。

　　做好了commands命令，就可以用“commands"菜单下的“batch a commad..."对大批的文件进行你自己操作了。

　　fireworks网页制作的实例：

　　曾经使用过很多方法来实现。一种方法是在图片上画一个黑色的矩形，增加一个有织纹的白色边框，然后创建一个整个物体的遮罩组(mask group)。它的效果很好，只是当有很多线条时，成型图像的

　　将画布的高和宽至少增加20像素。把它的颜色改为你所需要的背景色。

　　沿深青色图片外边画第一个矩形，什么颜色bing并不重要，因为它将被剪裁掉。按照画布大小绘制第二个矩形，颜色与画布背景色相同。将第二个矩形移到第一个矩形的后面。同时选中两个矩形然后选择修改(Modify)>联合(Combine)>打孔(Punch)。这样将在大矩形的中央得到一个与原图形尺寸相同的孔。

　　如果你使用过Fireworks中打孔功能，你会知道任何一个加在图形上的实时特效都会加在所打孔的边框上。这包括笔触(stroke)，材质(texture)，及两者的组合。我们正是利用这一特点来创建装饰性边框。

　　这样一来线条的位置就非常重要。为确保其置于打孔区域之内，点选对象面板 (Object panel)上三个控制按钮中的第一个。

　　以下示例可以使你对此法有些初步理解：