热点、图像映射和变换图像

2216 阅读 0 点赞

Web 设计人员可以使用热点来使较大图形中的各个小部分产生交互，并将网页图形的区域链接到 URL。通过从包含热点的文档中导出 HTML，您可以在 Fireworks 中创建图像映射。

包含热点的图像映射

热点和图像映射通常要比切片图形要求的资源少。切片需要更多处理能力，因为下载和重新组合切片的图形需要附加的 HTML 代码。

注：可以创建切片图像映射。在导出切片图像映射时，通常会生成许多图形文件。有关切片的详细信息，请参阅创建矩形切片。

创建热点

创建矩形或圆形热点

从“工具”面板的“Web”部分选择“矩形热点”工具或“圆形热点”工具。
拖动热点工具，在图形的某个区域上绘制热点。按住 Alt（在 Windows 中）或 Option（在 Mac OS 中）键可从中心点开始绘制。
注：可以在拖动以绘制热点的同时调整热点的位置。在按住鼠标按钮的同时，按住空格键，然后将热点拖动到画布上的另一个位置。释放空格键可继续绘制热点。

创建非常规形状热点

通过跟踪一个或多个选定对象来创建热点

将所选热点转换为矩形、圆形或多边形热点

在“属性”检查器的“热点形状”弹出菜单中选择“矩形”、“圆形”或“多边形”。

准备导出的热点

在“属性”检查器中指定 URL 和替换文本等热点属性，方法与指定切片属性相同。

创建图像映射

在图形上插入热点后，请将该图形导出为图像映射，以使其可以在 Web 浏览器中发挥作用。导出图像映射时，将生成包含有关热点及相应 URL 链接的映射信息的图形和 HTML。Fireworks 在导出时只产生客户端图像映射。

或者，将图像映射复制到剪贴板，然后将其粘贴到 Dreamweaver 或其它 HTML 编辑器中。

有关将导出的 Fireworks 内容置入 Dreamweaver 的信息，请参阅使用 Dreamweaver

对图形进行优化，以使其做好导出准备。
选择“文件”>“导出”。
如果要导出图像，请定位到要放置 HTML 文件的文件夹，然后为该文件命名。
如果已经为网站生成了一个本地文件结构，则可以在此将图形保存到网站的适当文件夹中。
在“保存类型”弹出菜单中，选择“HTML 和图像”。
从“HTML”弹出菜单中选择一个选项：
导出 HTML 文件
生成所需的 HTML 文件和相应的图形文件，以便导入到 Dreamweaver 或其它 HTML 编辑器中。

复制到剪贴板
将所有必需的 HTML（如果文档经过切片，则包括表格）复制到剪贴板中，以便将其粘贴到 Dreamweaver 或其它 HTML 编辑器中。
注：对于切片，只有在文档不包含切片时才选择“无”。
（仅限导出）如有必要，选择“将图像放入子文件夹”，然后浏览到适当的文件夹。
单击“保存”。
在导出文件时，Fireworks 可以使用 HTML 注释来标记图像映射和其它网页功能代码的开头和结尾。默认情况下，HTML 注释不包括在代码中。若要包括注释，请在“HTML 设置”对话框的“常规”选项卡中选择“包含 HTML 注释”。

用热点创建变换图像

使用拖放变换图像方法向热点附加不相交的变换图像效果。目标区域必须由切片定义。将变换图像效果应用于热点的方式与将其应用于切片的方式是相同的。

注：一个热点只能触发一个不相交的变换图像。它不能是来自其它热点或切片的变换图像的目标。

用热点创建变换图像

在用热点创建了不相交的变换图像之后，只有在选择该热点时才能够看到蓝色的连接线。

在切片上使用热点

如果图形很大，而您只希望将其中很小一部分用作某个动作的触发器，请将热点放在切片上以触发操作或行为。

您还可以将一个切片放在图形上，然后在文本上放置一个热点。只需滑过文本即可触发变换图像效果，但在发生变换图像效果时，切片下的整个图形都会被交换出去。

注：避免创建覆盖多个切片的热点。

在切片上使用热点