fireworks网页制作技巧与实例.docx

《fireworks网页制作技巧与实例.docx》由会员分享，可在线阅读，更多相关《fireworks网页制作技巧与实例.docx（21页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、fireworks网页制作技巧与实例fireworks网页制作技巧与实例Fireworks是推出的网页图像编辑软件，它同时具有位图图像和矢量图像编辑功能势必使它成为网页图像设计的先锋。下面学习啦我跟共享了更多关于fireworks网页制作技巧与实例，希望你喜欢。fireworks网页制作技巧：JavaScript按钮Fireworks能够让您不用写一行Javascript代码就能够轻松的创立一个交互式的按钮。您只需要将一个矩形区域转换为一个按钮并使用按钮编辑器(ButtonEditor)来完成这魔幻翻转除了创立按钮之外，Fireworks还能够让您轻松的创立一个奇异的Javascript翻它改

2、变在这一页中的其他区域的显示，在Fireworks中，这种翻转效果被称作不相交翻转(disjointrollover)。Fireworks含有一些可用于途径和位图图像的特殊效果和图像调整命令。自动操作在您工作的时候，Fireworks将记录每一个步骤并将它们放到历史记录(History)面板中历史记录面板来自动完成一些重复的步骤。蒙板(Masks)覆盖对象是指只显示文档中某一对象的一部分。您将使用这个白色的矩形来热点区在Fireworks中，将图像的一部分连接到一个URL非常简单。当您想建立一个连接但又不想使用交互状态的按钮时能够建立一个热门区(hotspots)。在Fireworks中创立热

3、门区(Hotspots)就是建立一个图像映射(Map)。Fireworks能够让您优化一个文档中的不同部分。每一个文档有一个默认的优化设置，但一个GIF文件，但这个咖啡杯部分假如优化为JPEG文件将得到更好的效果。当导出您的文档的时候，Fireworks把每一个分割区导出为一个单独的文件。同时生成在阅读器中显示这个文档所需的和Javascript代码。Fireworks能够很轻松的将图像、和Javascript导出到您用MacromediaDreamweaver创立和管理的站点动画我们在Firworks中创立动画是使用帧(Frame)的概念。每一个帧(Frame)含有一个不同帧。帧排列的顺序也

4、就是播放的顺序，由它来建立一个动作的经过。1.我的Fireworks4中为什么无法输入中文?首先你要选中中文的字体，另外能够试试不同的输入法。但是使用Windows自带的输2.用pointer工具仅能够大致定位对象，有什么办法能够准确地设置其x,y坐标?你能够使用info面板，在上面的小窗口中输入数值，然后按下enter键。3.在Fireworks中想把多个文件联成动画，该怎么做?Fireworks能够基于一组图像文件来制作动画。例如，通过将每个图形文件打开，1选择FileOpenMultiple。OpenMultipleFiles对话框打开。2查找文件，将这些文件添加到作为动画帧打开的文件列

5、表。假如你要将文件添加到列表，点击Add。假如你要将当前文件夹中所有的文件都添加到列表上，点击AddAll。假如你想从添加的文件列表上删除文件，从列表上选择文件，点击Remove。3选择OpenasAnimation，点击OK。Fireworks会将所有这些文件在一个单独的文档中打开，每个文件放在一个不同的帧，其顺序就是你在OpenMultipleFiles对话框4.怎么设置帧延迟?答：帧延迟决定当前帧播放的时间长度。帧延迟是把一秒当作100来设置的。例如，假如你设定帧延迟为50，就是表示半秒钟，假如你将帧延迟设定为300，就是表示3秒钟。5.如何给输入的位图参加描边的效果?充，在object

6、面板中选择最右方的StrokePlacement就能够了。6.如何才能将Fireworks输出的文件输入到Dreamweaver中?选择Fireworks菜单File-Export,选择andimage,输出文件后，打开Dreamweaver，点击object面板中的Fireworks添加按钮，定位刚刚fw输出的文件就可7.如何在Fw4里调整圆角的度数?选中圆角矩形，在object(对象)面板调整Roundness的数值。8.请问Fireworks4能否使text沿path运动的动画?你能够在Object面板上一帧帧设TextOffset途径文字的偏离量，文字偏移是使文字途径中文字的起始位置在

7、途径上发生偏移，最后在输出成动画格式。【Fireworks】学习笔记FAQ9.怎样用Fireworks做突起效果的按扭?选择Effect面板中的BevelAndEmboss的子菜单，例如innerbevel，好的按钮效果主要靠比拟好的effect参数，细心调试一下就能够有好看的按钮。10.请教在FW4中CopyPaste，Duplicate，Clone三者区别?1.Paste(粘贴)是针对Copy(拷贝)而言，点选或框选的图片目的经拷贝后能够被粘贴到当前图层或其他的应用图层上，如你在FW4打开一图片，想把它粘贴到Photoshop图图片将以位图的形式同时被保留在WINDOWS的剪贴板上，根据需

8、要你仍然能够把这个图片2.FW4中的duplicate(复制)是把当前图层上已有的图片重新在新的图层上复印3.Clone(克隆)基本和复制一样，所不同的是克隆能够准确定位，克隆后的图片与原来的目的图片完全重合，能够利用光标上下左右键进行相对移动，FW4中能够设定移动4.复制和克隆不能用框选，而拷贝则能够。11.如何用Fw4分割保存图片?能够使用工具箱里的Slice工具。12.如何使用Fireworks画虚线?1.先建立新文档，按住Shift键再用直线工具(Opentool)画一条直线。2.选择Stroke面板：在面板中选择Random、Dots3.选择右上角的三角形，选择EditStroke会

9、出现面板，有Option、Shape和Sensitivity三个项目。4.Option面板:InkAmout:100%;Spacing:300%(*注意:不要设为100%，必须大于。);不要选Build-up，Tips:15.Shape面板:设置如下图，能够不选Square，那么虚线的点就是圆的。6.Sensitivity面板:BrushProperty:里面有下面几项：Size、angle、InkAmout、Scatter、Hue、Lithtness、Saturation当每选取一项时，AffectedBy：里面的所有项的值都设为0。然后按应用-确认。7.制作完成后，点击右上角的三角形选取S

10、aveSrokeas，存为你要取的名字。8.要在以后调用FW时使用这项命令时，必须再选取历史面板最后一项命令，存储为你要的名字，这里存为dashedline。9.以后要调用时就选取Command-dashedline就能够了。13.如何输入类似于网页中常见的9镑字?输入文字时选择宋体，12px，noanti-alies。14.如何将两个位图对象合并位一个对象?全选这二个位图对象，ModifyConverttoBitmap。15.如何做出电视扫描线的效果?打开或插入要处理的图片，然后画一个与图片大小、位置都一样的矩形(可用Info面板进行准确设置)，矩形填充类型为Solid，填充色为Black，

11、纹理Texture选择Line-Horiz4，纹理量为100%，并选中Transparent选项。调整透明度，使效果更柔和些，能够设置为15左右。16.怎么设置帧延迟?帧延迟决定当前帧播放的时间长度。帧延迟是把一秒当作100来设置的。例如，假如你设定帧延迟为50，就是表示半秒钟，假如你将帧延迟设定为300，就是表示3秒17.怎样为每一帧输入帧延迟的设定值?1打开FrameProperties对话框：双击帧面板上的帧的名字。突出帧的名字，从帧面板的Options弹出菜单中选择Properties。2在FrameDelay选项输入一个数字。3敲击回车，或者点击面板以外的地方关闭对话框。18.FW预

12、览以及输出时，文件的左边和上边总有空隙，没有紧靠边。如何时预览和通常我们能够在DW中修改导出后的文件，只要设置topmargin=0leftmargin=0marginheight=0marginwidth=0即可。同理我们可以以修改FW的输出模板，使导出和预览时的文件直接就紧靠边，修改如ConfigurationCodeDreamweaverslices.httWRITE_(bgcolor=#,exportDoc.backgroundColor.toString(16),)WRITE_(topmargin=0leftmargin=0marginheight=0marginwidth=0bgc

13、olor=#,exportDoc.backgroundColor.toString(16),保存后，重新启动FW即可。19.用Fw4打开psd，会提示缺少字体，而且psd中的文字走样?Fw4如今能够很好的支持PSD多图层多格式文件，但是对汉字字体的支持是两套引挚，所以会出现不匹配的问题。这里的字体在FW4中打开还是能够编辑的，能够再次选中原有字体。FW3固然没有这个问题，但字体已转换为位图。20.请介绍一下Fireworks中的对象混合形式。Fireworks中有十三种对象混合形式，分别是 (Normal)普通形式这是最基本的也是FW3默认的图像混合形式，在这种形式下位于上层的图像将覆盖掉(M

14、ultiply)累加形式果往往会产生亮度更低的颜色。用黑色叠加其他颜色的图像产生的结果永远是黑色，图加立体效果。 (Screen)屏幕形式图像的重叠处色彩的深度，因而结果往往会产生亮度更高的颜色。同样相反的是用黑色是白色。 (Darken)暗形式彩高度则将在显示结果中使用上层高度低的色彩代替下层高度高的色彩。 (Lighten)亮形式图像同位置处色彩亮度则将在显示结果中使用上层高度高的色彩代替下层高度低的色彩 (Difference)交织形式结果作为混合结果所显示的颜色，因而使用白色和底图进行交织形式混合产生的将是底 (Hue)色调形式示结果 (Stauration)饱和度形式显示结果。因而假

15、如上层图像的饱和度为0(灰色)，结果图像将保持底图色彩不变。 (Color)色彩形式显示结果。这种形式保留了底图的灰度，因而可用于制作单色图像。 (Luminosity)亮度形式一个新颜色作为显示结果。 (Invert)反色形式(Tint)上色形式(Erase)擦除形式擦除形式是作用是将底图中被上层图像覆盖的部分擦除，和橡皮工具的作用一样。21.优化面板上的Matte和Interlace有什么作用?Matte是使图像在透明时，更好的与底色融合。Interlace交织的GIF，简单的讲，就是下载GIF图时，是先模糊后清楚，不必一次全下载完22.请介绍一些Fireworks中的小技巧1、Brush

16、工具特能的性能：按住shift键用brush工具画出一条水平或垂直线后，释放鼠标，但不要松开shift键，在brush光标附近会出现一个小加号，用brush再画一条线(仍按住shift键)，fireworks会把所画前一条线的终点和后一条线的起点连接起来。2、Pencil工具的一个用处：在图象编辑形式下，当改变一个象素构成的图象时，pencil点到任何象素都会变成当前的描边颜色。3、移动光标时，假如按住shift键不放，那么每移动一次为10个象素点。4、选择工具：shift键除了可与矩形或椭圆形选框工具组合来选择正方形或圆形区经选择好了一个矩形区域，发现应该选择的是正方形区域。这时，假如在矩形

17、选择区域仍存在的情况下，按住shift，将得到矩形选择区域与正方形选择区域的叠加区域，而不是单独的正方形选择区域。为了避免这个问题，可在用shift键选择正方形或圆形之前，执行edit-seletnone命令或者使用快速键ctrl+d。可以以在选择区域外单击鼠标取消23.怎样修改渐变填充?在Fill面板中使用了渐变填充后，假如想修改的话，开启并修改渐变图案的关键是1、选择用渐变填充的图片。2、超始点、漆桶工具，(Ctrl+K)。渐变控制出现。3、要移动渐变的起始点，拖动圆形手柄。4、要旋转渐变方向，将光标移动到控制手柄之外，直到出现Rotate光标，然后拖动手柄到一个新的位置。在旋转渐变的时候

18、，FW将渐变的起始点作为旋转的中心。5、要改变渐变的大小，直接拖动正方形手柄到新的位置。6、要修改椭圆渐变、矩形渐变、星爆渐变或者波纹渐变的斜切效果，沿某个方向拖注：并不限制一定要将渐变控制保持在所选对象的内部。任何渐变控制起始点、终止点或者大小/斜切控制手柄，都能够移动到对象之外24.怎样制作无缝平铺的背景图案?制作新图案填充经过中最大的问题就是怎样使图片拼接时无缝当FW在填充大于图案边框，在重复拼接之后就非常明显;在大多数时候，这种情况是不知足要求的，有几种首先，最简单的方法就是不要将图形无素放到图案图片的边缘。这就使得各个图片当然，很多情况下列图片已经覆盖了整个背景，画布的颜色完全被遮盖

19、住。对这种类运，fw具有足够的图形编辑能力来完成这种操作。平铺放置图片的时候，图片的各个边边缘进行混合，进而消除边界。下面是在fw中对图案边缘进行平滑处理的操作步骤：1、打开要转换为图案的图片文件。2、选择图片的某一部份作为图案的基础部分。使用扫描图片或者其他图形的一部份作为图案是一种常规方法。首先决定图案的大小(128*128就是不错的选择)，然后通过选项面板使用marquee(选框)工具的fixedsize功能设置相应的尺寸。这样就能够方便3、选择菜单命令edit-copy拷贝选择的区域。4、选择菜单命令file-new创立一个新的文档。该文档应该至少是所选图片的三倍以上。假如选择128象

20、素的正方形图片，那么新文档的最小尺寸为384*384。5、为了准确定位，能够选择菜单命令view-gridoption-editgrid来将网格线的尺寸设置为所选图片的尺寸，并且选中showgrid和snaptogrid选项。6、选择菜单命令edit-paster，将剪贴板中的内容粘贴到文档的左上角。7、使用alt+拖动方法复制图片，将复制的图片放到第一幅图片的右边。8、重复第7步两次，在前两幅图片的下面再粘贴两幅图片。9、关闭网格线显示，关闭snaptogrid选项10、选择所有四幅图片，使用命令modify-mergeimages。这一步是必须的，由于之前选择了所有图片，所以四幅图片被合并

21、到一个图片之中。11、从工具箱中选择橡皮图章工具12、首先处理左右两边图片之间垂直方面上的接缝。在边缘附近某一侧离边缘几个的源点在边缘的哪一边)，将一个图片的边缘扩展到另一个图片的边缘。按住alt键重新设置橡皮图章工具源点的位置。假如有必要，能够在选项面板中将橡皮图13、在对垂直接缝进行模糊处理结束之后，按此法对水平接缝进行模糊处理，根据当完成垂直方向和水平方向的接缝模糊处理之后，应该得到无缝图案，这一步完成25.Fireworks中怎样在不同的图中使用同一种切割方法?拷贝WEB层，把别的层锁定，全选拷贝，打开另一个图，粘贴就能够了。26.PNG格式有什么特点?PNG格式的全称为Portabl

22、eNetworkGraphics(移植的网络图象文件格式)优点：1.压缩比率高，并且是无损压缩，合适在网络中传播;2.具有8位、24位和32位三中色彩深度;3.支持Alpha通道透明(32位)和色彩索引透明(8位);缺点：1)没有动画功能;2)阅读器支持不理想，只要最新的主流阅读器才支持目前最新的版本是于1996年10月W3C组织制定的。27.FW中可不能够将彩色位图转成灰度图?Xtras-Adjustcolor-Hue/Salution，或者Effect面板AdjustColor-Hue/Salution将Salution选项调为0，或者在优化面板GIf的色彩setting中选Graysca

23、le，能够输出灰度图(Jpeg不支持)28.如何把在FW4里做的网页中一部分做成GIF格式，一部分做成JPG格式?在Optimize面板中将一部分设置为gif格式，另一部分设置为jpg格式。29.历史记录默认的是只要20条，在哪里设置增加呢?打开Editrefereces，在General选项中有undosteps选项，调整即可，不过太大了，对内存和硬盘都有要求，一般40-50即可。30.怎样使文字根据一定的途径排列?同时选择文字和途径，然后Text/AttachtoPath。31.怎样矢量图转化为位图?用Modify-ConvettoBitmap能够将矢量图转化为位图。32.FW4做的下拉菜

24、单在鼠标离开后消失得不太灵敏，怎么办?这个问题能够通过修改fw_menu.js文件来解决，首先找到控制菜单显示速度的下面setTimeout(fwDoHide(),1000) (elapsed1000)setTimeout(fwDoHide(),1100-elapsed)默认的数值1000表示当前的延迟时间是1秒，假如想将延迟时间修改为原来的一半，setTimeout(fwDoHide(),500) (elapsed500)setTimeout(fwDoHide(),550-elapsed)以避免阅读者还没有看清菜单内容，菜单就消失了。33.怎样调用photoshop的滤镜?选择EditPre

25、ferences点Folders标签，选取photoshop_plug-ins，点Browse按钮，选择photoshop安装目录下的plug-in目录，重新起动fw4后，photoshop滤镜就会出如今xtra菜单和effect面板中。假如没安装PS的话，能够将插件解压到X:macromediafireworks4configurationxtras目录下，重新启动FW4即可。不过FW4只是支持部分PS的插件，我知道的主要有KPT6、KPT3、EyeCandy4000、AVBrosPageCurl(用来卷页的)。34.怎样改变颜色形式?点Mixer面板右上角小箭头的弹出菜单，能够选择色彩形式

26、，RGB为基本色，Hexademical是RGB的十六进制，CMYK为印刷色(RGB的补色+纯黑)，HSB是色相/饱和度/亮度形式，Grayscale是灰级形式35.在位图形式下，选中一些像素，怎样实现反向选择?Modify-Marquee-SelectInverse。36.如何才能画出圆角三角形?1.用多边形工具画一个三角形.2.选中这个三角形3.选择菜单Modify-AlterPath-InsetPath-将Direction选为Outside，宽度本人修改一个适宜得值-Coner选为中间的那个圆角形-OK!37.怎么样才能实现跨帧分享图层，一般用在什么地方?图层将Fireworks文档分

27、成了不同的平面，就好像不同的描摹图纸重叠了一样.假如你需要一些对象的出现贯穿动画的始终，就能够把这些对象放到一个图层上，然后选择SHARETHISLAYER即可。得到反映。提示：Web层上只包含有切割对象和热区对象，永远是跨帧分享的。38.怎样制作Commands?firework中的commands都是由javascript编写的。能够有三种制作方法1.用History浮动面板生成commands:：在历史面板上，将有用的步骤选中，单击右下角的保存按钮，将文件保存为*.jsf文件，放在command目录下的creative2.用batchprocess生成批处理命令：设置好批处理内容后，但机

28、对话框右下角的script按钮，将文件保存。3.本人编写本人的commands命令：能够用Ultraedit打开*.jsf文件，了解firework中正确的编程方式。做好了commands命令，就能够用commands菜单下的batchacommad.对大批的文件进行你本人操作了。fireworks网页制作的实例：曾经使用过很多方法来实现。一种方法是在图片上画一个黑色的矩形，增加一个有织纹的白色边框，然后创立一个整个物体的遮罩组(maskgroup)。它的效果很好，只是当有很多线条时，成型图像的将画布的高和宽至少增加20像素。把它的颜色改为你所需要的背景色。沿深青色图片外边画第一个矩形，什么颜

29、色bing并不重要，由于它将被剪裁掉。根据画布大小绘制第二个矩形，颜色与画布背景色一样。将第二个矩形移到第一个矩形的后面。同时选中两个矩形然后选择修改(Modify)联合(Combine)打孔(Punch)。这样将在大矩形的中央得到一个与原图形尺寸一样的孔。假如你使用过Fireworks中打孔功能，你会知道任何一个加在图形上的实时特效都会加在所打孔的边框上。这包括笔触(stroke)，材质(texture)，及两者的组合。我们正是利用这一特点来创立装饰性边框。这样一来线条的位置就非常重要。为确保其置于打孔区域之内，点选对象面板(Objectpanel)上三个控制按钮中的第一个。下面示例能够使你对此法有些初步理解：