网页设计第17章

第17章 使用切片和热点如果网页中需要存放较大的图像，为了获取较高的下载速度，最好的办法是将图像分割成几个小部分。

在下载网页时，对整副图像的下载变为多幅小图像的下载，虽然图像本身看上去并不发生改变，但是下载速度会明显加快。

17．1 创建与编辑切片17．1．1 创建切片使用工具面板中的切片工具可以在Fireworks文档中创建矩形和多边形切片。

也可以使用插入切片命令在图像中创建切片。

1．用切片工具创建切片使用工具面板中的切片工具创建切片的方法如下：（1）打开一个包含图像的Fireworks文档。

（2）从工具面板中选择矩形【切片】工具。

（3）将光标移至文档中的图像中，光标变为“+”号形状。

单击矩形切片的左上角并拖动其到右下角的位置松开鼠标，完成矩形切片的创建。

继续拖动鼠标，在图像中创建其他的切片。

图17-1 在图像中创建切片图17-1所示为在一个图像中创建了四个切片的情况。

创建的矩形切片区域被半透明的绿2 网页制作技术—第二篇 Fireworks MX在进行切片操作时，如果对切片形状和大小没有特殊要求，并不需要所有的区域都进行切割，只需切割图像中的几块区域，Fireworks会自动切割其他的区域。

在图17-2中，只切割了一个矩形。

（半透明绿色覆盖区域），其他的部分被自动进行了切割。

图17-2 创建形状和大小无要求的切片2．使用菜单命令创建切片使用菜单命令创建切片的操作方法如下：（1）使用工具面板中的矩形工具在图像中创建一个矩形，如图17-3所示。

图17-3 在图像中绘制矩形（2）单击【编辑】菜单，在打开的菜单中选择【插入】/【切片】命令。

将选中的矩形对象绘制成切片，其他的部分被Fireworks自动进行了分割，如图17-4所示。

17．1．2 编辑切片对象第17章 使用切片和热点 3如果创建的切片对象不符合要求，例如尺寸过大或过小，形状不准确等。

Fireworks允许对创建的切片进行编辑，以使之最终符合要求。

图17-4 使用菜单命令创建切片1．选中切片对象切片对象与Fireworks中的其他对象一样，它们被放置在网页层上。

因此，选中切片对象的方法与选取其他对象的方法相同，在工具面板中选择【箭头】工具或【部分选定】工具，然后单击要选择的切片即可选中该切片对象。

2．移动切片对象选中切片对象，用鼠标拖动切片对象，即可移动切片在图像中的位置。

Fireworks按照切片的位置重新分割图像。

3．调整切片对象的大小形状和颜色选中切片对象后，在工具面板中选择【指针】工具或【部分选定】工具。

拖动切片边框上的控制点可以改变矩形切片的大小，对于多边形切片，则可以改变切片的形状。

选中切片对象后，使用属性面板也可以更改切片的大小。

其方法是在【属性】面板的【宽】、【高】文本框中输入切片高和宽的数值。

属性面板如图17-5所示。

在属性面板的【X】、【Y】文本框中输入数值，可以改变切片在图像中的位置。

图17-5 图像切片属性面板默认情况下，切片的颜色为绿色。

若要改变切片的颜色，在属性面板中单击选色按钮，4 网页制作技术—第二篇 Fireworks MX在弹出的选色板中选择一种新的颜色，即可改变切片的颜色。

4．为切片设置URL选中图像中的切片后，也可以为其设置切片链接的URL，在网页中单击图像中的切片区域，就可以实现跳转。

为切片设置URL的操作方法如下：（1）在文档中选中切片。

（2）属性面板如图17-5所示，通过属性面板可以给切片设置链接的URL。

① 在【链接】文本框中输入URL，如。

② 在【替代】文本框中输入光标指向切片区域时的提示信息。

③ 在【目标】下拉菜单中选择打开URL的窗口位置。

17．2 导出切片在Fireworks文档中将大图像分割成切片后，需要将包含切片的文档导出才能在Web页中使用。

17．2．1 切片的参数设置导出切片前要对切片的参数进行必要的设置。

1．命名切片切片将一个图像分割成多个部分，每个切片都将以单独的文件导出。

Fireworks在导出时会自动对每个切片文件进行命名，也可以不使用默认的文件名，为每一个切片定义一个自定义文件名。

（1）为切片自定义文件名为切片指定特殊的自定义文件名，有助于在网页站点文件结构中非常方便地标识切片文件。

例如，如果在导航栏上有一个返回主页的图像切片按钮，则可以将该切片命名为“Home”。

自定义切片文件名时，在如下操作方法中选择之一：在文档中选中切片，在属性面板中的【切片】文本框中输入切片的名称。

在文档中选中切片，该切片在层面板中将高亮显示。

在层面板中双击该切片名称，然后输入新的切片名称，按【Enter】键或在层面板外单击鼠标以确定输入的新名称。

（2）使用默认的切片名称若使用Fireworks默认的切片文件名，执行下列操作：在Fireworks文档窗口中，在主要工具栏中单击【导出】按钮，打开【导出】对话框，在【导出】对话框的【文件名】文本框中输入文件名，Fireworks在导出时会自动向每一个切片文件添加一个与输入的文件名有关联的默认名称。

2．导出的优化设置可以为文档中所有的切片设置相同的优化参数，也可以将切片设置成不同的优化参数。

为文档中的切片进行优化设置的操作方法如下：第17章 使用切片和热点5图17-6 【切片导出设置】下拉菜单 （1）若要使文档中的所有切片具有相同的优化参数，首先在文档中选中所有的切片。

然后在【属性】面板中打开【切片导出设置】下拉菜单，如图17-6所示。

从菜单中选择一种优化的预设效果。

如果不进行设置，Fireworks MX 为图像切片命名的文件名格式为：“doc.nam-rn-cn”。

其中“doc.nam”是导出时输入的文件名称。

“-”是下划线，“rn”表示切片所在的行数，“cn”表示切片所在的列数。

如导出文件名为“图像切片”中第3行第5列的切片文件名为：“图像切片-r3-c4”。

根据需要可以更改Fireworks MX 为图像切片自动命名的规则，其操作方法如下：① 单击【文件菜单】中的【html 设置】命令，打开【html 设置】对话框，如图17-7所示。

图17-7 【html 设置】对话框② 在对话框中选择【文档特定信息】选项卡。

③ 在【文件名称】选项部分，从所需对应选项下拉菜单中进行选择确定新的命名规则。

例如，在对话框中设置为如图17-7所示的情况，即命名规则为：doe.nam+“切片”+切片编号（01、02、03、…）。

④ 若要将新的设置作为Fireworks 新文档的默认值，单击【设为默认值】按钮。

若只在本文档中使用时不单击该按钮。

⑤ 设置完成后，单击【确定】按钮。

（2）若要为切片设置不同的优化参数，在文档中分别选中不同的图像切片。

然后，在【属性】面板中进行设置，其方法与所有切片具有相同优化参数的设置方法相同。

6 网页制作技术—第二篇 Fireworks MX17．2．2 导出切片图像在Fireworks文档中创建并编辑好图像切片后，下一步就是将图像切片导出，以供创建网页文件时使用。

Fireworks将每个切片都以单独的文件导出，并创建一个包含表格代码的HTML文件，以便在浏览器中重新装配图像。

导出图像切片的方法步骤如下：（1）打开包含切片图像的Fireworks文档。

（2）执行下列操作之一，打开【导出】对话框，如图17-8所示。

图17-8 【导出】对话框单击【文件】菜单中的【导出】命令。

单击【主要工具栏】中的【导出】按钮。

（3）设置【导出】对话框中的多个选项：① 在【保存在】文本框中选择保存文件的文件夹。

② 在【保存类型】下拉菜单中选择【HTML和图像】。

③ 在【HTML】下拉菜单中选择【导出HTML文件】。

④ 在【切片】下拉菜单中选择【导出切片】。

⑤ 在下部三个复选项中进行选择：【仅已选切片】：选中该复选框，仅导出选中的切片。

【包括无切片区域】：选中该复选框，包括切片以外的所有区域全部导出。

【将图像放入文件夹】：选中该复选框，并通过【浏览】按钮选择一个文件夹。

切片图像文件保存在HTML文件所在文件夹的images子文件夹中。

（4）设置完成后，单击【确定】按钮。

第17章 使用切片和热点7 17．3 使用热点和图像映射在Fireworks 中可以直接在图像上绘制热点，并将热点同相应的URL 相链接。

所有的热点坐标、链接地址以及相应的代码，都会保存在Fireworks 文档中。

要在Fireworks文档中创建热点，按照以下方法和步骤操作。

图17-9 建立热点的图像（1）打开或创建包含图像的文档，如图17-9所示。

（2）在【工具】面板中按下热点工具，弹出热点工具选项菜单，如图17-10所示。

在热点选项菜单中包括【矩形热点】、【圆形热点】以及【多边形热点】工具。

图17-10 热点工具选项菜单（3）从工具菜单中选择所需形状的热点工具，将光标移至文档中，光标形状变为“+”号形状，拖动鼠标绘制热点的形状。

选择矩形工具，可以创建矩形热点。

选择圆形工具，可以绘制圆形热点。

拖动时按下【Alt】键，可以以单击点为圆心绘制圆形热点。

选择多边表工具，在图像上依次单击多边形的各个端点，即可创建多边形热点。

图17-11 图像中创建的矩形、圆形和三角形热点图17-11所示为使用热点工具分别在图像中创建的矩形、圆形和三角形热点。

（4）使用【指针工具】或【部分选定】工具，在热点上单击即可选中该热点。

热8 网页制作技术—第二篇 Fireworks MX点选中后，属性面板如图17-12所示。

（5）在属性面板中设置热点的各项属性：在【热点】文本框中输入热点的名称。

在【宽】和【高】文本框中输入确定热点大小的准确数值。

图17-12 热点属性面板在【X】和【Y】文本框中输入确定热点位置的X、Y坐标数值。

在【形状】下拉菜单中，可以重新设置热点的形状。

例如，选中矩形热点后，在【形状】下拉菜单中选择【圆形】，则热点将变为以原矩形为外切边的圆形。

单击颜色按钮，在打开的选色板中可以更改热点的颜色（默认为天蓝色）。

在【链接】文本框中，输入该热点所链接的URL。

在【替代】文本框中，输入在Web页中，当指针指向该热点时显示的提示信息。

在【目标】下拉菜单中，选择打开该热点所链接文件的窗口位置。

17．4 编辑热点对已经创建的热点，若需要修改热点的属性，可以对该热点进行编辑。

对热点的编辑包括热点的选中、删除、移动、修改链接的URL、提示信息以及打开URL的窗口位置等。

1．选中热点在工具面板中选择【指针】工具或【部分选定】工具，然后单击热点，即可选中该热点，选中后的热点在顶角上会出现控制点。

2．热点的移动、删除以及改变尺寸大小选中热点后，可以对热点进行多种编辑操作① 选择【指针】工具，用鼠标拖动可以移动热点的位置。

② 选择【指针】工具，拖动热点的控制点可以更改热点的大小。