论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > Fireworks教程
Tag:切片,gif,动画,文字,图标,照片,网页,效果图,表情,按钮,工作,8.0,cs,视频教程

使用热区和切割(Hotspots and Slices)<下>

文章类别:Fireworks | 发表日期:2008-9-20 19:30:53

使用热区和切割(Hotspots and Slices)(下)

\接下来,我们来讲切割。前面已经说过,设计师为了加快页面加载的速度把大图片分割成小图片放在表格中,这在以前是一件费时又费力的事,现在使用了切割Fireworks会按照你的切割自动生成HTML的表格代码,你只需要将生成的代码放在页面的相应位置就可以了。

可能有的朋友要问,难道图片切割之后下载速度就加快了吗?对,假如合理的切割的话,确实可以减小下载量,因为将同样颜色的大色块切割成一个单独的文件并使用较少的颜色输出就会得到尺寸较小的文件。另一个切割图片的理由是可以减少浏览者的心理等待时间。当你等待一副大图片出来时会觉得速度很慢,因为这时你什么也不能做,但是当图片切割后,小图片很快就能出来并且一张接着一张,在下载的过程中浏览者就能够先看到图片的一部分,因此他不会有等待的感觉,这就是为什么我们要使用切割的道理。其实道理和之后使用在网络多媒体播放中的流式技术是异曲同工的,虽然可能这个比较不是很恰当。

除了用来分割图片,在Fireworks中翻转图、按钮、导航条等带有交互动作的对象都是基于切割的。

创建切割非常轻易,只要使用切割工具如同画矩形一样就可以创建出需要的切割,使用多边形切割工具(Polygon Slice Tool)更可以创建出任意外形的切割,如图:


图上绿色的区域就是切割的区域(Fireworks默认使用绿色表示切割,蓝色表示热区,当然你可以通过修改设置来改变他们的颜色,但是我不建议你们这样做),红色的线条是图片输出后生成的表格的线条,这些红色的线条组成的一个个矩形就对应了表格的每个单元格。

你可能注重到了,当使用不规则外形做切割时,Fireworks会沿着这个多边形的最边缘建立一个矩形,这是因为表格和图片只接受矩形这种外形,输出后的结果将会被处理成在一张矩形的图片上有一个多边形的热区这种形式。

说了这么多,我们来动手做一下,我们的目标是要创建一个圆形的切割,虽然没有圆形的切割工具,但是我们可以把一个圆形的热区转换成切割(这也是创建精确切割图形的方法)。先用圆形工具(Ellipse Tool)在画板上画一个圆,然后选择Insert->Hotspot创建一个和圆形一样外形的热区,最后选择Insert->Slice把热区转换为切割。假如中间没有经过热区这一步,而直接选择Insert->Slice,那么Fireworks将创建一个矩形的切割。


选中这个切割,打开Object面版(Window->Object),可以看到和切割相关的属性:链接的URL地址,alt的文字,打开链接的方式(Target)这些都和热区一样,Auto-Name Slices是用来设置是否自动为切割的图片命名。


在Type菜单里可以看到2项:Image和Text。选择Image切割就会被输出成图片保存;选择Text后,可以在Object面版中输入文本格式的文字,输出后这部分切割会留出空白的单元格用文本填写。这个功能对于需要经常更改消息的页面相当方便,这样就不用每次都创建图片。


在最后输出之前,选择File->HTML Setup来到Document Specific这项可以设置Fireworks自动命名文件名的规律,一般没有非凡要求就使用默认设置吧。


然后就可以输出HTML代码了,选择File->Export完成最后的工作。最后我要说的是,在输出时选择Include Areas without Slices的话,那么画板上没有切割的部分也将被输出成等同大小的图片,假如不选择此项,那么Fireworks只会把有切割的部分生成图片,没有切割的部分用一张1x1的透明gif图片(pacer.gif)撑开,使得表格在不同的浏览器中看起来一样。我的建议是使用spacer.gif撑开表格,至于道理嘛,我想我不说你也应该明白。
 
上一篇:Fireworks4.0的新特性 人气:1431
下一篇:使用热区和切割(Hotspots and Slices)(上) 人气:2583
Fireworks视频教程

Fireworks视频教程
Windows视频教程
Windows操作
[文]
WORD教程
Word教程
[文]
Excel教程
Excel教程
[文]
PowerPoint教程
PowerPoint
[文]
Dreamweaver
Dreamweaver
[文]
FIREWORKS
Fireworks
[文]
FLASH教程
Flash教程
[文]
photoshop平面设计
PhotoShop
[文]
CorelDraw
CorelDraw
[文]
C语言教程
C语言教程
[文]
html
Html教程
[文]
DivCss布局
Div+Css布局
[文]
Javascript
Javascript
[文]
ACCESS数据库
ACCESS数据库
[文]
ASP教程
ASP教程
[文]
SQLServer数据库
SQLServer
[文]
ASP.NET教程
ASP.NET教程
[文]
FlashAS
FlashAS
[文]
视频教程列表
计算机基础入门及办公自动化: 网页制作开发视频教程: 平面广告设计视频教程 初级程序设计及ASP动态网站开发 Asp.net动态网站开发视频教程 Flash 动画角本编程视频教程
文章教程搜索
 
Fireworks推荐教程
Fireworks热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058