ITPub博客

第9天:第一个CSS布局实例(转)[@more@] 　　接下来开始要真正设计布局了。和传统的方法一样，你首先要在脑海里有大致的轮廓构想，然后用photoshop把它画出来。你可能看到有关web标准的站点大都很朴素，因为web标准更关注结构和内容，实际上它与网页的美观没有根本冲突，你想怎么设计就怎么设计，用传统表格方法实现的布局，用DIV也可以实现。技术有一个成熟的过程，把DIV看成和TABLE一样的工具，如何运用就看你的想象力了。 　　注：在实际应用过程中，DIV在有些地方的确不如表格方便，比如背景色的定义。但任何事情都有得有失，取舍在于

第10天:自适应高度(转)[@more@] 　　如果我们想在3列布局的最后加一行页脚，放版权之类的信息。就遇到必须对齐3列底部的问题。在table布局中，我们用大表格嵌套小表格的方法，可以很方便对齐三列；而用div布局，三列独立分散，内容高低不同，就很难对齐。其实我们完全可以嵌套div，把三列放进一个DIV中，就做到了底部对齐。下面是实现例子(白色背景框模拟一个页面)： 　　Body 这里是#header{ MARGIN: 0px; BORDER: 0px; BACKGROUND: #ccd2de; WIDTH: 580px; HEIGHT: 60px;} 　　这里是#mainbox { MARGIN: 0px; WIDTH: 580px; BACKGROU

在Fireworks中制作淡入淡出动画效果(转)[@more@] 　　淡入淡出动画效果 　　用fireworks做的淡入淡出效果，有人说看PNG格式看不出真正的步骤，所以在此补上这样一篇教程。 　　对象的淡入淡出效果是firewoks可以创建的普通效果之一，对两个链接对象进行插帧的时候，其中一个对象的不透明度设置为0%，一个对象的不透明度设置为100%，就可以获得淡入淡出效果。 　　制作步骤： 　　一、首先新建一个文件，画一个圆，在FILL面板中设置edge:feather:10，设feather的目的是在运动过程中边缘不至于太生硬，影响效果。点中圆，按F8键，选择t

Firewoks 营造残破纹理(转)[@more@] 　　刻意在物件和文字上营造残破的效果也是一种流行的表现方式。 　　让我们以Firewoks处理网页影像时，在简单的实例上来应用看看。 　　打开新文件，先来画个按钮。 　　Ctrl+Shift+D原位克隆一个。 　　网上找张纹路无序的素材图片，这里我们用的是张石纹。 　　导入正在Fireworks编辑的文件。 　　在属性面板上按下效果添加按钮， 　　进行两处特效设置。 　　亮度50，对比度100； 　　色相36，饱和度72，明亮度81，勾选彩色化。 　　图层混合模式设置为Multiply色彩增值。 　　将我们克

学用Fireworks中的特效（三）(转)[@more@] 　　二、效果栏的使用 　　在为图形对象添加各种特效后你会发现，在对象属性框中的效果栏内会将该对象所用到的所有特效一一罗列出来。如图31中，该椭圆对象即被添加了“内斜角”、“查找边”和“新增杂点”三个特效。图31 　　特效被添加进来后，若要再次修改其相关数值时，可点击该特效左侧的“编辑特效” 按钮，此时会再次启动该特效的设置窗口。但对一些原本就没有相关数值可供设置的特效，则不能通过这种方法启动其设置窗口，如图31中的“进一步模糊”特效。因此，“进一步模糊”左侧的

Fireworks MX 2004特效字系列---金属特效字(转)[@more@] 　　文字特效在网页或广告制作当中会被经常用到。因此在Fireworks中将制作好的文字特效保存为样式以便不时之需也是很有必要的。下面就为大家讲解在Fireworks中制作一款金属字的效果。 　　启动Fireworks后新建一个500*150大小的画布，然后用"文字"工具在画布上输入"金属效果"的字样，当然，你也可以根据自己的需要输入其它的文字。 　　然后选中文字对象并在下方的属性框中将这一文字对象的字体改为加粗的"华文新魏"，字号为96，填充色为#FF0000。其它的各项设置则不变。接着我们

一例特效文字的制作简介(转)[@more@] 　　1、打开FW，新建一个文件，文件的大小自定。用矩形绘制工具在编辑区绘制一个矩形对象，作为背景，本例背景如下图所示 　　2、在编辑区输入文字，字体采用了一种较粗的字体“Arial Black”，字号采用了“120”大小，字体颜色为黄色，具体效果如下图所示。 　　3、选中文本对象，按组合键“Ctrl+Shift+P”，将文字转化为路径对象。按组合键“Ctrl+J”将转化的文本对象接合为一个单独的路径对象，此刻编辑区效果如下图所示。 　　4、给文字添加Effect效果－－阴影和光晕－－投影，投影设定采用

Fireworks MX 2004特效字系列--金属字(转)[@more@] 　　开始第一步： 选择字体：04b-08 字体大小：125，填充如下： 　　第二步： 选效果/光晕和阴影/内侧发光........参数设置如下： 　　第三步： 选效果/斜角和浮雕/内斜角..........参数设置如下： 　　第四步： 选效果/调整颜色/曲线................参数设置如下： 　　 　　第五步： 选效果/调整颜色/亮度和对比度.....参数设置如下： 　　最后的效果如下： 　　终于完成了，可以松口气了，大家去试一试吧，只要努力一定会进步的。

用Fireworks泛起水波涟漪(转)[@more@] 　　我们在网上经常可以看到一些泛着水波涟漪的动画广告，效果非常的逼真。其实这只是巧妙地利用了动画软件中的遮照效果而制作出来的。在Fireworks里通过蒙版效果和对每帧的播放时间进行巧妙的调整后，也能做出这种有水波涟漪的GIF动画。 　　我们先将一张将要用来制作这种涟漪效果的图片导入Fireworks。这时Fireworks会自动生成一个背景层，如图01。图01 　　点击层面板右上角的下拉列表，将背景层设置为“共享此层”，如图02。 　　接着把背景层中的位图复制一份放到“层1”里面并用方向键使其

Fireworks MX 2004 制作远古兽皮卷轴(转)[@more@] 　　效果图： 　　1.新建一个500×400的画布 　　2.做一个500×400 填充：#74350C无边框矩形 　　3.给矩形添加效果Eye candy 4000LE－－>marble 设置如图 　　4.给矩形添加杂点 如图 　　5.此时的矩形已经有点兽皮的感觉了 　　6.我们给它一点磨损的感觉 给矩形添加 Alien Skin Splat LE-->Edage 设置如图 　　7.在这个矩形下层做500×400 填充#441E02无边框矩形 　　8.给新作的矩形添加Eye candy 4000LE－－>marble 设置如图 　　9.怎么样 是不是有点磨损的感觉了？

Fireworks 制作抽线图(转)[@more@] 　　 　　用PS制抽线图是很常见的,有没有想过用Fireworks制呢?难度及复杂度更低. 首先,新建一个背景透明,大小为 1x2 的文档,放大至1600%,使用pencil tools ,在上半部分点一下.颜色为黑.如图: 　　保存为line.png . 　　 打开另一个图形文件 　　使用 Rectangle Tools 在上面画一个比原图大的柜形. 　　 打开 fill 窗口 　　选择 Texture 中的other.选择刚保存的 line.png 填充.如图: 　　 打开layer窗口 　　调整其透明度.结果如图:

Fireworks制作云彩的效果(转)[@more@] 　　教程重点简述：描边和高斯模糊的配合 　　效果简介：说到云彩效果的制作，我们会马上想到用PS的滤镜，而且我还听闻FW4自带的滤镜Candy4也能够实现这类的效果，不过我从来都没有使用过。这个效果的完成非常的简单，描边-填充材质-高斯模糊，就这么三步。但是做这个教程的根本原因在于让大家了解结构安排上的无序性。整齐的安排结构是为了严谨，使人一目了然，随机的安排结构是为了增加视觉效果。这一点有很深的内涵，而且应用的也极为广泛。你可以把它视为设计上的一种理论。 　　 　　操作步

Fireworks制作电视雪花效果(转)[@more@] 　　教程重点简述：通过渐变选项的调整实现动画效果. 　　教程开始之前，首先请看如下所示动画效果： 　　如何才能产生这种类似电视雪花效果的动画呢？通过滤镜、插件？不用，FW4里面已经为我们准备好了这种效果，请看后面的详细步骤： 　　[注意]在开始本节的学习前，请大家首先参阅一下先前的文章“模拟条形码的制作”，因为我们后面的操作是对上一节操作的继续，相关的内容这里就不再赘述了。 　　第一步、首先我们先和“模拟条形码的制作”一文简单的接一下头，在“模拟-”一文中，通

Fireworks圆角矩形之深入探索(转)[@more@] 　　首先声明，这个教程仅仅可以作为一个讨论的话题来进行，讨论话题的中心是由一个问题引起的，希望大家能够通过多种角度、思路考虑同一个问题。问题如下： 　　问题：如何才能制作出这样一个矩形框--有两个圆角，两个直角？比如下面的效果图所示： 　　如果上面的效果图你感到烦乱的话，那么就来看看这个单一的效果图吧： 　　制作的方法有很多，你可以想到有几种呢？ 　　我们的答案是：6种！ 　　[第一种方案：Mask（遮罩）的灵活运用] 　　如果是刚刚通过遮罩教程学习的朋友看到这个

做个心形动画送给心上人(转)[@more@] 　　给最亲密的MM送什么礼物呢？当然是献上一颗赤诚的红心了，一路上就可以永远心心相印！^_^，下面就请跟我来吧！为你心爱的MM献上这份神秘的礼物。 　　制作心形图案 　　1、启动Fireworks 4.0，执行“File→New”命令，设定宽度为800Pixels，高度500Pixels，然后单击确定按钮。 　　2、在左侧的工具箱中，设定Color填充色为红色，然后选择椭圆工具，按住Shift键的同时，拖动鼠标画出一个红色的圆形。执行“Edit→Clone”命令，完成后使用箭头工具选择圆形，向右侧平移，为了使两个圆形中心点保

巧用Fireworks制作精彩Banner(转)[@more@] 　　当你驾着爱机在网上冲浪时，是否注意到网页上形形色色的动态Banner呢？一个好的Banner会给人一种耳目一新的感觉，一张好的Banner会给网页添色不少。那么，你是否也想制作这么一张漂亮的Banner呢？现在我们就用Fireworks来制作出一张Banner吧！ 　　1、“巧妇难为无米之炊”，首先要收集好适合你网页的图片，如果自己能够制作出这些图片那就更好了！注意要把这些图片调好尺寸，并且转化成为GIF或JPG等格式，并保存好。 　　2、启动Fireworks，点击“File→New”(或按组合键“Ctrl+N”)新建

用Fireworks制作神秘的“魔术球”(转)[@more@] 　　该效果的制作步骤非常的简单,在这里我们需要注意的事是培养观察力,为什么以往我们制作的那些所谓的球体都感觉很生硬,甚至不像个球体呢?最大的原因就是我们没有经过仔细的观察,对于各种光源的角度掌握的不好.不具备光感的圆形又怎么能算是球体呢! 　　一、创建透明球体 　　1、新建宽高各200像素的场景，底色白。 　　2、选择Effipse Tool（椭圆工具），按住Shift键在场景中画出一个正圆形，填充颜色深蓝。选定该圆，然后打开Fill（填充）面板，在填充种类下拉列表中选择Linear（直线

用Fireworks制作3D网格(转)[@more@] 　　教程难易级别：初级 　　重点工具及命令：Edit Grid、Rectangel、Delete point 　　说明：打开网格功能绘制多个间距相差一个网格的矩形，然后删除矩形的同一个顶点后，就能出现类似于3D网格效果的图案，效果出来后您可以给它填充上各种渐变色，应用一些实时特效，使之改头换面，变成另外一个样子…… 　　图1 　　具体制作方法 　　使用过Freehand的朋友可能都知道，在Freehand中有个现成的3D网格工具，您可以使用它来创建三维对象的排列效果。虽然Fireworks中没有这个工具，但是您可以自己

用Fireworks“肢解”gif动画(转)[@more@] 　　我们看到了许多(当然也学会了很多)关于如何制作Gif动画。有时候（这样的时候不多，但真的有。今天我就碰到了。没准你下次就碰上了）我们还不得不讲Gif动画拆开，我们要的是其中的图片。当然，你可以用抓屏的办法来实现（不知道你的反应速度是不是足够的快，反正我是不行！），我们这里用Fireworks来解决。 　　1、 打开你所要“肢解”的gif动画，打开帧（Frames）浮动面板。帧（Frames）浮动面板上显示有3帧。我们要的就是这3帧！ 　　2、 打开优化（Optimize）浮动面板。将Animated Gi

Fireworks MX 两头半圆矩形(转)[@more@] 　　1.在“工具”面板的“矢量”部分中选择“圆角矩形”工具。 　　2. 在属性检查器中，单击矩形圆度旁边的滑块，拖动滑块到100。 　　3.在工作区画一个两头半圆的矩形。