二、创建切片
使用Fireworks工具箱上的切片工具可以为已经制作好的图片创建切片。如图1所示,切片工具有两类,分别为“矩形切片”工具(Slice tool)和“多边形切片”工具(Polygon Slice tool)。
下面我们分别就这两类热区工具的使用作介绍。
图1 两类切片工具
图2 绘制矩形切片
图3 提示对话框
图4 制作多个切片
图5打开图像
图6 创建多边形切片
由上图可见,图像中的切片向导仍然是水平和垂直的,生成的切片文件也还是矩形的。实际上多边形切片的外形主要是用于设置相应的行为触发区域的。假如切片对象被设置了链接,那么在浏览器中显示的时候,只有点击到多边形区域时才会实现链接跳转,而在这个切片的其他区域则不会出现链接跳转。
同理,假如切片和对象区域完全符合或者说用户是基于路径对象制作切片,只需点击“编辑”菜单,再选择“Insert”->“Slice”即可。
三、编辑切片
和热区的编辑非常类似,假如要选取切片,可以利用指针工具、部分选定工具来选中它,也可以使用层面板来进行;选中切片之后,若要移动切片可以利用鼠标、方向键或者属性面板的位置值。
默认情况下热区是透明的绿色,假如需要改变热切片的颜色,只需要在图7所示的切片属性面板中的切片颜色框中选择所需要的颜色即可。
在切片属性面板中,类型栏的下拉菜单中有图像和HTML两项,选择HTML会出现图8所示的面板,点击按钮,在图9所示的弹出窗口中设置HTML代码可以创建一个文本链接。
图9 Edit HTML Slice对话框
此外,在属性面板的优化下拉列表中还有几类优化方式,我们可以依据实际情况选择一种优化方式,如图10所示。
可以利用工具箱上的隐藏切片和热点工具来将选中的切片隐藏起来,需要显示切片的时候单击显示切片和热点工具即可将切片显示出来。如同热区的显示和隐藏一样,我们同样还可以利用层面板上的眼睛图标显示和隐藏该切片。
四、添加链接
为切片添加链接同样有两种方法,一是利用属性面板,二是利用URL面板。当我们选定某个切片之后,我们可以在这两个面板中为该热区设置链接地址和链接属性。方法和热区的链接方法类似,这里不再重复了。
五、命名切片
在Fireworks中命名切片有如下三种方式:自动命名切片文件、自定义命名切片文件和更改默认的自动命名惯例。
1. 自动命名切片文件
假如用户没有在属性面板或层面板中输入切片名称,则Fireworks 会为切片自动命名。自动命名将根据默认的命名惯例自动为每个切片文件指定一个唯一的名称。在导出经过切片的图像时,于“Export”对话框的“文件名”文本框中输入一个名称。注重不要添加文件扩展名,因为Fireworks 会在导出时自动向切片文件添加文件扩展名。
2. 自定义命名切片文件
为了能够在站点文件结构中轻松地标识切片文件,用户可以为切片自行命名。自定义命名切片有两种方法:在画布上选择切片,在属性面板的Slice框中输入一个名称,然后按回车键;在层面板中双击切片的名称,输入一个新名称,然后按回车键。
3. 更改默认的自动命名惯例
还可以在“HTML Setup”对话框的“Document Specific”(文档特定信息)选项栏中更改切片的命名惯例。点击“File”菜单,选择下拉菜单的“HTML Setup”,如图11所示在弹出的对话框中选择“Document Specific”选项栏。我们可以用多种多样的的命名选项来生成自己的命名惯例,创建的命名惯例最多可包含六个元素。每个元素具体解释如下:
图11 文档特定信息项目栏
* None:元素钚应用任何名称。
* doc.name:元素采用文档的名称。
* slice:可以向命名惯例中插入“slice”一词
* Slice(1、2、3...)/Slice(01、02、03...)/Slice(A、B、C...)/Slice(a、b、c...): 根据所选择的特定样式,按数字顺序或字母顺序对元素进行标记。
* row/column(r3_c2、r4_c7...): row (r##) 和column (c##) 指定 Web 浏览器用来重建切片图像的表的行和列。
* Underscore/Period/Space/Hyphen:下划线/句号/空格/连字符,通常使用这些字符作为与其它元素的分隔符。
例如,假如文档名为index,则命名惯例doc.name + "slice"+Slice(A、B、C...)所产生的切片名称就是indexsliceA。实际上,不需要使用包含全部六个元素的命名惯例。假如一个切片包含多个帧,则默认情况下 Fireworks 将为每个帧的文件添加一个数字。我们也可以使用“HTML Setup”对话框为包含多个帧的切片创建自己的命名惯例。例如,假如为一个包含三种状态的按钮输入自定义切片文件名 home,则Fireworks 将“Up”状态图形命名为 home.gif,将“Over”状态图形命名为 home_f2.gif,将“Down”状态图形命名为 home_f3.gif。
六、导出切片
介绍完了命名原则之后,我们来说一下切片导出的具体步骤:
第一步:如图12所示打开切片图像。
Word教程网 | Excel教程网 | Dreamweaver教程网 | Fireworks教程网 | PPT教程网 | FLASH教程网 | PS教程网 |
HTML教程网 | DIV CSS教程网 | FLASH AS教程网 | ACCESS教程网 | SQL SERVER教程网 | C语言教程网 | JAVASCRIPT教程网 |
ASP教程网 | ASP.NET教程网 | CorelDraw教程网 |