当使用Fireworks设计了一幅完整的设计效果图之后,如果要将这份完美的网页放到网上,浏览器下载一幅较大的图像需要较长的时间,会造成用户不必要的等待。怎么使用fireworks切片呢?通下面小编给大家整理了关于使用fireworks切片的方法,希望大家喜欢。
使用fireworks切片的方法步骤:当使用Fireworks设计了一幅完整的设计效果图之后,如果要将这份完美的网页放到网上,浏览器下载一幅较大的图像需要较长的时间,会造成用户不必要的等待。通过将这个大的图像切割为多个容易下载的小块,可以加速网页的响应时间,提升网页的响应速度。
在Fireworks中,被切片的图形的每一部分都会作为一个单独的图像进行保存,切片输出时会保存为一个HTML文件以引用这些被切割的图形。举例来说,在Fireworks的模板的Web项中有一些设计好的网页原型,这些原型使用Fireworks的矢量绘图工具进行绘制,网页设计人员在需要保留布局的同时,又能去除图像中的文本部分,用HTML文本进行替代。例如图14.54就是一个完整设计的网页图像。
Fireworks两种切片类型:矩形切片:这是比较常用的切片方式,用于按矩形对图像进行切分。
多边形切片:用来创建不规则形状的切片,比如试图为非矩形的图形添加图像交互式效果时,可以通过非矩形切片来创建切片效果。
对于网页图像的切片来说,一般还是以矩形切片为主,要创建矩形切片,单击绘图工具栏中的工具,选择该工具后,在需要进行切片的地方绘制矩形,就可以创建一个切片对象。
注意:从切片对象延伸的线是切片辅助线,它确定导出时将文档拆分成的单独图像文件的边界。默认情况下,这些辅助线为红色。
切片的辅助线用于定位和对齐切片,这个功能非常实用,否则切片就会显示得比较混乱。当拖动以绘制切片时,可以调整切片的位置。在按住鼠标按钮的同时,只需按住空格键,然后将切片拖动到画布上的另一个位置。释放空格键以继续绘制切片,切片效果如图14.55所示。
除了直接绘制切片外,还可以选择某一个图像区域,比如选择文字内容,然后单击主菜单中的“编辑|插入|矩形切片”菜单项,来根据选择的区域创建一个矩形切片,这样就可以根据内容的大小来精确地创建切片区域。例如图14.56中根据选择工具创建了多个选择内容的切片。
如果选择了多个绘图区域,单击菜单中的插入矩形切片,Fireworks会弹出如图14.57所示的对话框,询问用户是创建单一的切片还是多重切片。
单一切片是指将所选的区域合并为单一的矩形,而多重切片将为每一个选区创建一个切片。在设置了切片之后,使用选择工具选择切片,在属性面板中可以设置切片的类型和链接,如图14.58所示。
默认情况下,切片显示为淡绿色,通过切片的属性面板,可以更改切片的颜色。切片的默认类型为前景图像,这是指切片在输出HTML时,HTML代码的编写方式。可以将其调整为HTML背景,比如对于颜色比较接近的图像,就可以调整为切片的背景图像。HTML类型的切片指定浏览器中出现普通HTML文本的区域。HTML切片不导出图像,它导出出现在由切片定义的表格单元格中的HTML文本。
多边形切片用来创建具有多边形效果的切片图像,它实际上是通过JavaScript代码来实现的多边形效果。选择多边形切片工具,在要创建多边形热点的图像上进行单击以创建多边形的点,多边形切片的创建效果如图14.59所示。
切片创建完成后,要查看和编辑网页上的切片,可以通过图层面板中的网页层实现。层面板上可以显示和隐藏切片,更改切片和切片辅助线,图层面板的显示如图14.60所示。