fireworks 使用热区和切割教程

网络时代的图片设计革命：Web Layer、Hotspots与Slices的魔力

在数字世界中，每一个png文件背后都隐藏着一个神奇的层——Web Layer。这个特殊的层像一本故事的书籍，记录着热区和切割的信息。这些信息不仅仅是简单的数据，它们带有HTML语言的独特特性，被人们亲切地称为网络层（Web Layer）。

热区（Hotspots），是图片中的神秘之地。当一张图片包含多个超链接时，热区就派上了用场。它们指定了图片中的哪个区域链接到哪个超链接地址。在标准的HTML语言中，这些热区被表示为尖括号内的标签。设计师们可以通过fireworks提供的可视化工具轻松创建热区，无论是矩形、圆形还是不规则形状，都能得心应手。

让我们更深入地探索一下热区的创建过程。除了基本的矩形和圆形热区工具外，设计师们还可以使用多边形工具（Polygon Tool）在画板上绘制任何形状的多边形。然后，通过简单的操作，就可以将这个多边形转化为一个精确的热区。这意味着设计师们可以创建任何形状的热区，以满足设计需求。如果你对某个节点的位置不满意，可以使用节点工具（Subselection Tool）进行调整。

在完成了热区和切割的创建后，就可以输出HTML格式的代码了。这就像狼蚁网站SEO优化的成果一样，你可以在浏览器的状态栏中看到一个星型的形状，这是通过添加热区实现的特殊效果。你还可以增加一些交互效果，比如在鼠标悬停时显示文字等。

那么，为什么我们要进行图片切割呢？除了提高加载速度外，合理的切割还可以减小图片的文件大小，这是因为将块切割成单独的文件并使用较少的颜色输出会生成尺寸较小的文件。切割还可以减少浏览者的心理等待时间。当你等待一幅大图片加载时，可能会觉得时间过得很慢。而将图片切割成小块后，每块都可以迅速加载并显示出来，让浏览者感觉加载速度更快。

在fireworks中，除了用于分割图片外，翻转图、按钮、导航条等带有交互动作的对象也是基于切割的。创建切割非常简单，只需使用切割工具就像画矩形一样即可。使用多边形切割工具更可以创建任意形状的切割。在fireworks中，默认使用绿色表示切割区域，蓝色表示热区。

Web Layer、Hotspots和Slices是图片设计中的关键元素。它们不仅提高了网页的交互性和加载速度，还带来了设计的无限可能性。通过使用这些工具和技术，设计师们可以创造出更富有创意和吸引力的网页设计。在图形设计领域，Fireworks工具为我们提供了强大的功能，让我们能够创建和管理网页元素。当我们跳过热区步骤，直接选择Insert菜单下的Slice功能时，Fireworks会生成一个矩形切割。当我们选中这个切割，通过Window菜单下的Object面板，可以深入探索与切割相关的属性。

在这个面板中，我们能看到与热区相似的设置选项，如链接的URL地址、ALT文本以及链接打开方式（Target）。还有一个名为Auto-Name Slices的选项，用于设置是否自动为切割的图片命名。在Type菜单中，我们可以选择Image或Text类型。选择Image时，切割将作为图片保存；选择Text后，我们可以在Object面板中输入文本格式的内容，这样，部分切割将留出空白单元格以供填写文本。这一功能对于那些需要频繁更新消息的网页来说，无疑是一大福音，因为它省去了每次都创建图片的繁琐步骤。

在输出工作之前，我们可以通过File菜单下的HTML Setup来设置文档特定的选项。在这里，我们可以设置Fireworks自动命名文件的规则。如果没有特殊需求，使用默认设置即可。完成设置后，我们就可以导出HTML代码了，通过File菜单下的Export即可完成。