好了,现在我们的任务就是往表格里面加图加内容了!这里就不再赘述了!(其实已经赘述得够多了!)
还要提醒大家注意的是在加图片和内容时,表格单元格的align,valign这两个属性非常重要,要不遗余力的运用它们来帮你做事!OK,自己实践一下!
不用切图的页面圆角
首先看样式表文件:
.b1 {height:1px; font-size:1px; overflow:hidden; display:block; background:#000; margin:0 5px;}
.b2 {height:1px; font-size:1px; overflow:hidden; display:block; background:#fff; border-right:2px solid #000; border-left:2px solid #000; margin:0 3px;}
.b3 {height:1px; font-size:1px; overflow:hidden; display:block; background:#fff; border-right:1px solid #000; border-left:1px solid #000; margin:0 2px;}
.b4 {height:2px; font-size:1px; overflow:hidden; display:block; background:#fff; border-right:1px solid #000; border-left:1px solid #000; margin:0 1px;}
接着看页面代码:
用Fireworks制作具有动态效果的切图
在上一章中,我们说到用fireworks2进行切图,可以将一个大图片分割成不同色深的多个小图片,并且生成相应的网页文件或代码,从而减小网页的重量。今天我要接着告诉您的是,功能强大的fireworks2不仅可以制作静态切图,更能够导出javascript动态特效!
打开monitor.gif 件后你可以看到那上面画的是一个电视机,现在我们要做的是将这个电视机放入一个网页,并且当浏览者的鼠标按下电视机上的开关后,会在屏幕中播放内容。
第一步,要在图象上制作用来调用javascript的热区,制作热区的方和上一章中切割图象的方法一样,都是使用工具栏最右下方的切割工具 (
SliceTool)。由于我们设想中的这个javascript是通过按下电视机开
关后在屏幕上出现变化,所以需要定义两个热区,分别是电视机开关和电视机屏幕。
然后选择“windows > Object”(Ctrl+I)选项,打开Object面板。先选中电视屏幕的热区,Object面板即将显示这个热区的属性,其中的连接地址默认为“No URL(noHREF)”也就是当前网页的连接(#);项内容为鼠标放到图片上时显示的提示;这下面那个红色的靶心
是
target , 用来确定连接标签的目标的,在这儿就不多说了;最关键的是:不要激活 target下的“Auto-Name Slices”功能,而需手动给这个切割热区起一个名字,这样做是为了在指定behavior时能够方便的辨认目标。还要注意的是在给slice命名时,不能使用中文,否则生成的javascript 代码会在浏览器中长时间报错。在这个例子中我给屏幕热区起的名字是“screen”, 再以同样的方法给电视开关取名为“button”。
接着做一个电视上要显示的图象,选择“File > New”(Ctrl+N) 命令新建一个和屏幕热区大小相同的图片(注意:尺寸过大或过小都会被 javascript缩放到屏幕热区的大小)。新建文件后,您可以使用工具栏上各类工具随心所欲地画出自己喜欢的东东(工具栏中各个绘图工具的使用 方法将在以后的教程中做详细介绍)。对自己的作品满意了吗?您画完后 请选择“File > Export”(Ctrl+Shift+R)将图象导出为网络图形。
Fireworks的图象导出功能非常强大,但现在您只要一路NEXT就可以了,并将生成的gif文件保存到指定的目录下。
然后回到我们刚才编辑的电视机画面,选定开关热区,再选择
“ Windows > Behaviors”(Ctrl+Alt+H)选项,打开behaviors面板。
按下添加按钮,选择“Swap Image”,在随后弹出的Swap Image对话框
中的“ Swap Image in Slice”选项中选择“screen”热区(也可以在右边的热区画面中直接选择screen热区,这样做就可以让button热区调用一个使screen 热区产生变化的javascript);在“Source of
Swap”中选择“Image File”并在浏览面板中指定刚才制作的那个gif
图象。最后激活“Restor Image onMouseOut”(激活这个功能后,浏览者将鼠标离开调用javascript 的热区后,发生变化的图象将恢复正常。
当上面这步完成后,behaviors面板中将出现一个“OnMouseOver”的件处理器,这就说明刚才做的热区已经成功调用了javascript。但我们期的效果是当鼠标按下开关后才在电视屏幕中显示内容,所以请按下
“ OnMouseOver”旁的下拉菜单按钮,在弹出的菜单中选择“OnClick”。好,到这儿基本上该完工了。想看看作品的效果如何吗?选择“File > Preview in Browser > Preview in ...”(F12)命令,就可以在新窗口 中预览刚才的作品了。
达到预期效果了吗?满意的话就可以导出成品了,这儿有个小技巧, 由于fireworks的预览功能已经生成了临时的图形和HTML文件,所以如您使用IE5行预览的话,可以直接在自己满意的预览窗口中将所以文另存,就可以免去导出步骤而得到完整的作品了。如果您没有IE,那只能乖乖地使用导出功能,具体地导出方法和我们在上一章中所说的静 态切图的导出方法相同,在这儿就步重复了。
Fireworks使用技巧
迄今为止,Fireworks在一阵又一阵的喝彩声中经历了4个成长阶段,目前已经推出了4.0版本。最初,Fireworks同时又是互联网的新生儿,它非常诚恳地吸收了众家的长处。不管是平面设计软件的图层和色彩,还是动画制作的帆要领不管是它的Flash图符和库面析,还是Dreamweaver的快速启动栏;不管是矢量绘图软件中的工具,还是位图图像编辑软件的面析,只要它们有优点,它都学来。Fireworks在学习中创新,从而一步一步走向成熟,也越来越受大家的青睐。 第一篇 用Fireworks切割图形
但传统的切图工作十分繁琐,许多设计者都是使用Photoshop类软件将图一片片分好,然后在分别保存为不同色深的gif图象,虽然可以使用action之类的自动执行命令集,但实际工作量依旧十分惊人,而且非常容易切错尺寸。
现在用了Fireworks就可以非常轻松地切割图片了,首先用Fireworks 打开要切割地图形文件(File > Open),当图片打开后选择工具栏最右下方的切割工具(SliceTool),在图中按住鼠标左键任意画出想要的切割效果(注意不要将选区重叠),图中那些红线表示就是最后生成的表格分栏情况。
等全部的切割区域完成后选择“FILE > EXPORT”进入导出,在Format 中选择gif,再根据图象的具体情况设置色深、调色板和透明色,然后按下 “Next”。
最后再导出成HTML文件的对话框中指定保存的目录,在“slicing:” 选项中选择“Use Slice Objects:”按照刚才划分出的切割情况来切图, 并分别保存。在“Style选项”中选择“Generic”导出成标准的HTML源码。 OK,如果要和Dreamwever一同使用的话,可以选择“Dreamweaver Libra- ry.lbi”将导出为DREAMWEAVER2的一个模板,而“Dreamweaver” 选项将 导出成DREAMWEAVER作出来的网页源码。
就这样,仅几秒种的时间,就完成了一个非常专业的图形切割。怎么样,您是不是感受到了Fireworks的强大功能。
第二章 用Fireworks制作具有动态效果的切图
在上一章中,我们说到用fireworks2进行切图,可以将一个大图片分割成不同色深的多个小图片,并且生成相应的网页文件或代码,从而减小网页的重量。今天我要接着告诉您的是,功能强大的fireworks2不仅可以制作静态切图,更能够导出javascript动态特效!
打开monitor.gif 件后你可以看到那上面画的是一个电视机,现在我们要做的是将这个电视机放入一个网页,并且当浏览者的鼠标按下电视机上的开关后,会在屏幕中播放内容。
第一步,要在图象上制作用来调用javascript的热区,制作热区的方和上一章中切割图象的方法一样,都是使用工具栏最右下方的切割工具 (
SliceTool)。由于我们设想中的这个javascript是通过按下电视机开
关后在屏幕上出现变化,所以需要定义两个热区,分别是电视机开关和电视机屏幕。
然后选择“windows > Object”(Ctrl+I)选项,打开Object面板。先选中电视屏幕的热区,Object面板即将显示这个热区的属性,其中的连接地址默认为“No URL(noHREF)”也就是当前网页的连接(#);项内容为鼠标放到图片上时显示的提示;这下面那个红色的靶心
是target , 用来确定连接标签的目标的,在这儿就不
多说了;最关键的是:不要激活 target下的“Auto-Name Slices”功能,而需手动给这个切割热区起一个名字,这样做是为了在指定behavior时能够方便的辨认目标。还要注意的是在给slice命名时,不能使用中文,否则生成的javascript 代码会在浏览器中长时间报错。在这个例子中我给屏幕热区起的名字是“screen”, 再以同样的方法给电视开关取名为“button”。
第三章 下面告诉你如何做动画,COOL!
用Fireworks2制作动画一共有三中方法,由简到难的排列起来分别是: 合并图象形成动、使用符号(Symbol )生成画效果和手工绘制。
合并图象形成动画,顾名思义就是将一系列图片按序排列生成不同的帧而形成动画(很象Director中的Space to time功能),不过这种排列完全是程序自动执行的,免去了大量的手工操作。 具体的方法是这样的(当然使用这种方法的前提是必须有一连串连续 的图片):选择“File > Open Multiple ”命令。进入系列图片所在的目录,然后按次序将一连串的图片加入(“Add”命令)对话框左下部的窗口,并且激活“Open as Animatio”选项,再按下“Done”按钮就OK了。
在动画生成后,按下“Windows > Frame”(Ctrl+ Alt+K)命令,您就看到原来的一系列图片都按次序地从Frame1往下排到底。按下屏幕右下角的播放键就可以浏览动画效果了。这种纯粹的懒办法最合适我这样画不来线条的人了,一次有只用了10 秒钟就搞定了一个小鸟飞飞的图片,效果棒极了!
不过,要是手头没有现 成的连续图片,那只能劳驾,自己亲自动手了。而许多图画中有规则的动态效果若是用手工制作,既费时间也未必能够达到理想的效果。所以Fireworks2提供了一个Tween功能,使用户可以指定程序生成动态过度效果( 感觉就更Flash里的一样)。
在绘制动画前,我们事先必须明确动画的工作原理。我想简单的说, 动画是有不变的物件(object)和会变的物件两部分组成。通常不变的物是只如背景之类始终在动画中显示的物件,而会变的物件是指通过变化 形成动画的物件。所以在制作动画之前得先制作不变的物件,为此Fire- works2提供了一个共享层的概念(Share Layer )。
我们都知道,动画是由一个个不同的帧(Frame)组成的,而共享层就是在所有帧中都显示的一个层,这样我们只要将动画中不变的物件全放在这个层中,以后只需要修改一个帧的共享层中内容就可以使所有的帧都达到相应变化,大大减少了工作量。设置共享层的命令是Layer 面版的弹 出菜单中的“Share Layer”命令,设置为共享的层在Layer面版中都有一 个特定的共享符号(Wegb Layer是系统自动设置的共享层,用于放置热点、 切割区)。
在完成不变的物件(object)后就可以使用Tween 功能制作动画效果 了。Tween功能的原理是将物件(object )转化为符号(symbol),然后 确定符号的初始和结束样例(instance),再将这些样例转换为具有过度 效果的连续帧(frame)。Tween功能支持物件的位移、旋转、缩放、扭曲、 以及透明度和层效果(effect)的过度。下面我来举个实例:通过十个帧 让我的名字“Arky”从图象的左上角移动到右下角同时逐渐变深。
第三章 下面告诉你如何做动画,COOL!
用Fireworks2制作动画一共有三中方法,由简到难的排列起来分别是: 合并图象形成动、使用符号(Symbol )生成画效果和手工绘制。
合并图象形成动画,顾名思义就是将一系列图片按序排列生成不同的帧而形成动画(很象Director中的Space to time功能),不过这种排列完全是程序自动执行的,免去了大量的手工操作。 具体的方法是这样的(当然使用这种方法的前提是必须有一连串连续 的图片):选择“File > Open Multiple ”命令。进入系列图片所在的目录,然后按次序将一连串的图片加入(“Add”命令)对话框左下部的窗口,并且激活“Open as Animatio”选项,再按下“Done”按钮就OK了。
在动画生成后,按下“Windows > Frame”(Ctrl+ Alt+K)命令,您就看到原来的一系列图片都按次序地从Frame1往下排到底。按下屏幕右下角的播放键就可以浏览动画效果了。这种纯粹的懒办法最合适我这样画不来线条的人了,一次有只用了10 秒钟就搞定了一个小鸟飞飞的图片,效果棒极了!
不过,要是手头没有现 成的连续图片,那只能劳驾,自己亲自动手了。而许多图画中有规则的动态效果若是用手工制作,既费时间也未必能够达到理想的效果。所以Fireworks2提供了一个Tween功能,使用户可以指定程序生成动态过度效果( 感觉就更Flash里的一样)。
在绘制动画前,我们事先必须明确动画的工作原理。我想简单的说, 动画是有不变的物件(object)和会变的物件两部分组成。通常不变的物是只如背景之类始终在动画中显示的物件,而会变的物件是指通过变化 形成动画的物件。所以在制作动画之前得先制作不变的物件,为此Fire- works2提供了一个共享层的概念(Share Layer)。
我们都知道,动画是由一个个不同的帧(Frame)组成的,而共享层就是在所有帧中都显示的一个层,这样我们只要将动画中不变的物件全放在这个层中,以后只需要修改一个帧的共享层中内容就可以使所有的帧都达到相应变化,大大减少了工作量。设置共享层的命令是Layer 面版的弹 出菜单中的“Share Layer”命令,设置为共享的层在Layer面版中都有一 个特定的共享符号(Wegb Layer是系统自动设置的共享层,用于放置热点、 切割区)。
在完成不变的物件(object)后就可以使用Tween 功能制作动画效果 了。Tween功能的原理是将物件(object )转化为符号(symbol),然后 确定符号的初始和结束样例(instance),再将这些样例转换为具有过度 效果的连续帧(frame)。Tween功能支持物件的位移、旋转、缩放、扭曲、 以及透明度和层效果(effect)的过度。下面我来举个实例:通过十个帧 让我的名字“Arky”从图象的左上角移动到右下角同时逐渐变深。
第五章 文字工具以及文字特效
这章教程,我想单单给你介绍Fireworks的文字工具以及文字特效, 之所以要将对文字功能版块的介绍独立成
一章,是因为Fireworks中的文字以及相关功能,是目前我所见的图象编辑软件中最强大,最完善! #完整的文字格式化功能,支持双字节文字
教程网页设计+入门+切图
![](/skin/haowen/images/icon_star.png)
![](/skin/haowen/images/icon_star.png)
![](/skin/haowen/images/icon_star.png)
![](/skin/haowen/images/icon_star.png)