切片用来定义图稿中不同Web元素的边界，以便进行优化。图像映射能将图像的一个或多个区域（称为热区）链接到一个URL上。

13.2.1 切片的用途和种类

网页可以包含许多元素，如HTML文本、位图图像和矢量图等，如图13-18所示。切片能定义图稿中不同Web元素的边界。例如，如果图稿中包含需要以JPEG格式优化的位图，而其他部分更适合作为GIF文件进行优化，就可以用切片将位图与其他部分隔离开，之后再分别对它们进行优化。通过优化，可以减小文件的大小，让下载更加容易。

图13-18

切片分为子切片和自动切片两种，如图13-19所示。子切片是我们创建的，用于分割图像，带有编号并显示切片标记。创建子切片时，Illustrator会将周围的图稿切为自动切片，以使用基于Web的表格来保持布局。

图13-19

提示

执行“编辑>首选项>切片”命令，可以在打开的对话框中设置切片线条的颜色，以及是否显示切片的编号。

13.2.2 实战：创建与编辑切片

下面介绍切片的4种创建方法，以及如何移动和复制切片、调整切片大小。

01 打开素材。选择切片工具，在图稿上拖曳出一个矩形框（按住空格键可进行移动），如图13-20所示；放开鼠标左键后，可以创建一个切片，如图13-21所示。按住Shift键操作，可以创建正方形切片；按住Alt键，则可以从中心向外创建切片。

图13-20

图13-21

02 选择选择工具，按住Shift键单击两个对象，如图13-22所示，执行“对象>切片>建立”命令，可以为每一个对象创建一个切片，如图13-23所示。这种方法特别适合让切片的尺寸与图稿的边界匹配。执行“对象>切片>从所选对象创建”命令，则可将它们创建为一个切片。

图13-22

图13-23

03 执行“对象>切片>全部删除”命令，删除切片。按Ctrl+R快捷键显示标尺。从标尺上拖出参考线，如图13-24所示。执行“对象>切片>从参考线创建”命令，可以按照参考线的划分创建切片。按Ctrl+；快捷键隐藏参考线，如图13-25所示。

图13-24

图13-25

04 选择切片选择工具，单击一个切片，可将其选取。按住Shift键单击其他切片，能将它们一同选取。灰色的是自动切片，不能选择和编辑。拖曳切片可进行移动，此时Illustrator会重新生成子切片和自动切片，如图13-26所示。按住Shift键拖曳可以将移动限制在水平、垂直或45°的整数倍方向。按住Alt键拖曳鼠标，或执行“对象>切片>复制切片”命令，可以复制切片。如果要调整切片大小，可以拖曳它的定界框，如图13-27所示。

图13-26

图13-27

05 如果要将所有切片的边界调整到画板边界处，可以执行“对象>切片>剪切到画板”命令。超出画板边界的切片会被截断，画板内部的自动切片会扩展到画板边界处，而图稿保持原样不变。

提示

使用“文件>存储选中的切片”命令，可以单独保存图稿中选中的切片。

13.2.3 设置切片选项

使用切片选择工具选择一个切片，如图13-28所示，执行“对象>切片>切片选项”命令，打开“切片选项”对话框。切片的选项决定了切片内容如何在生成的网页中显示，以及如何发挥作用。

图13-28

图像

如果希望所选切片区域在网页中作为图像文件，可以在“切片类型”下拉列表中选择“图像”选项，如图13-29所示。

图13-29

如果希望图像是HTML链接，可以输入URL和目标框架。此后在浏览器中单击该切片位置的图像时，可以链接到URL选项中的网站上。

此外，还可以指定当鼠标指针位于图像上方时，浏览器的状态区域中所显示的信息、未显示图像时所显示的替代文本，以及表单元格的背景颜色。

无图像

如果希望切片区域在生成的网页中包含HTML文本和背景颜色，可以在“切片类型”下拉列表中选择“无图像”，如图13-30所示。

图13-30

“显示在单元格中的文本”用来输入所需的文本。但要注意，文本不要超过切片区域可以显示的长度。如果输入了太多的文本，将扩展到邻近的切片中并影响网页布局。然而，因为我们无法在画板上看到文本，所以只有用Web浏览器查看网页时，文本才会变得一目了然。设置“水平”和“垂直”选项，可以修改表格单元格中文本的对齐方式。

HTML文本

当选取文本对象，并使用“对象>切片>建立”命令创建切片后，便可在“切片类型”下拉列表中选择“HTML文本”选项，如图13-31所示。这样可以通过生成的网页中基本的格式属性，将Illustrator文本转换为HTML文本。如果要编辑文本，可更新图稿中的文本。设置“水平”和“垂直”选项，可以修改表格单元格中文本的对齐方式。在“背景”选项中可以选择表格单元格的背景颜色。

图13-31

13.2.4 划分/组合切片

如果要将一个切片划分为多个切片，可以使用切片选择工具将其选取，如图13-32所示，执行“对象>切片>划分切片”命令，打开“划分切片”对话框进行设置，如图13-33所示。

图13-32

图13-33

以水平划分为例。如果希望水平划分为4个切片，可以在“水平划分为”选项组中选取“个纵向切片，均匀分隔”单选钮，并输入“4”，效果如图13-34所示。如果想按照一定的间隔划分切片，可以选取“像素/切片”单选钮，并在它前方的文本框中输入间距值，这样Illustrator就会自动划分切片。图13-35所示是设置间距为10像素的划分结果。垂直划分也是同理。

图13-34

图13-35

如果要将多个切片组合为一个切片，可以选择切片选择工具，按住Shift键单击它们，然后执行“对象>切片>组合切片”命令。需要注意的是，如果被组合的切片并不相邻，或者具有不同的比例和对齐方式，则新切片可能与其他切片重叠。

13.2.5 显示/隐藏/锁定切片

执行“视图>隐藏切片”命令，可以隐藏画板中的切片。如果要重新显示切片，可以执行“视图>显示切片”命令。如果想避免由于操作不当而调整切片大小或移动切片，可以在切片图层的眼睛图标缩览图右侧单击，将图层锁定，如图13-36所示。如果要锁定所有切片，可以执行“视图>锁定切片”命令。再次执行该命令，则解除锁定。

图13-36

13.2.6 释放/删除切片

使用切片选择工具单击切片，执行“对象>切片>释放”命令，可以释放该切片。选取切片后，按Delete键，则可将其删除。如果要删除当前文档中所有的切片，可以执行“对象>切片>全部删除”命令。

13.2.7 创建图像映射

图像映射可以将图像的一个或多个区域（称为热区）链接到一个URL地址上，当用户单击热区时，Web浏览器就会载入所链接的文件。

创建图像映射时，首先使用选择工具选择要链接到URL的对象，如图13-37所示；打开“特性”面板，单击面板顶部的，显示全部选项；在“图像映射”下拉列表中选择图像映射的形状，如图13-38所示；在URL文本框中输入一个相关或完整的URL链接地址；设置好之后，便可单击面板中的浏览器按钮启动计算机中的浏览器，链接到URL位置进行验证。如果要将图稿导出，并在Web浏览器中查看，可以使用“SVG交互”面板将交互内容添加到图稿中。

图13-37

图13-38

技术看板　切片链接与图像映射的区别

使用切片也可以创建链接（参考此处），它与图像映射的主要区别在于将图稿导出为网页的方式。使用图像映射时，图稿作为单个图像文件保持原样；而使用切片时，图稿被划分为多个单独的文件。此外，图像映射可以链接多边形（该多边形近似于图像的形状）和矩形区域，切片只能链接矩形区域。例如，如果为一个三角形对象创建链接，使用切片创建链接时，鼠标指针在对象的映射区域内都会显示为状（此时浏览器下面会显示出链接的URL地址，单击可链接到该URL），而使用图像映射时，只有将鼠标指针移至图像的区域内才能显示链接，移出图像区域，就不会显示链接。