切片工具的使用。
【切片工具】主要应用于网页设计,它能将文件尺寸比较大的图片切成若干张小图片,并能给小图片添加超链接,以提高网页的载入速度,给用户以良好的浏览体验。【切片工具】和【裁剪工具】位于同一个工具组,可以按“Shift”+“C”快捷键切换找到切片工具。【切片工具】属性栏如图 3.2.1 所示。
图3.2.1 【切片工具】的属性栏
1)创建切片
在【切片工具】属性栏的“样式”选项中选择“正常”,然后在图像中要切片的位置拖拉鼠标,即可创建一个用户切片,除了用户切片外的其他图像区域则生成自动切片。按照同样的操作,可以继续创建用户切片,且每一切片都用蓝色数字标识。如图 3.2.2 所示,蓝色数字标识的为用户切片,灰色数字标识的为自动切片。
图3.2.2 创建用户切片的效果
如果文件中有多个图层,想根据图层来自动切片,可以执行【图层】→【新建基于图层的切片】命令。
除此之外,如果文件中有参考线,还可以执行切片工具属性栏中的【基于参考线的切片】命令,将自动创建基于参考线的切片,如图 3.2.3 所示。
图3.2.3 基于参考线创建的切片
2)使用右拉菜单命令创建规则的切片
选择了切片工具之后,在图像上右击将弹出菜单列表,如图 3.2.4 所示。在菜单列表中选择“划分切片”命令,打开【划分切片】对话框,如图 3.2.5 所示,可以根据需要设定水平和垂直方向的切片划分数,创建规则的切片。图 3.2.6 是水平划分为 2 个纵向切片,垂直划分为 3个横向切片的效果。
图3.2.4 菜单列表
图3.2.5 【划分切片】对话框
图3.2.6 使用【划分切片】命令创建的切片
3)为切片添加超链接
在网页中,常常还要给创建好的切片添加超链接,以实现跳转,方便用户浏览。下面,我们以前面的航空广告图片为例,为“01”切片——吉祥航空添加超链接。
首先,右击要创建超链接的“01”切片,在弹出的右拉菜单中选择【编辑切片选项】命令,打开【编辑切片选项】对话框,如图 3.2.7 所示。在URL框中键入要链接的网址,在目标框中键入“_blank”,表示在新窗口打开超链接页面。输入后确认完成超链接的添加。
图3.2.7 为切片添加超链接
4)保存切片
执行【文件】→【存储为Web和设备所用格式】命令,在打开的【存储为Web和设备所用格式】对话框中单击【存储】,如图 3.2.8 所示;然后在【将优化结果存储为】对话框选取要保存的位置及格式即可,如图 3.2.9 所示。
图3.2.8 【存储为Web和设备所用格式】对话框
图3.2.9 【将优化结果存储为】对话框
1)打开素材
执行【文件】→【打开】命令(或按“Ctrl”+“O”快捷键)打开“\素材\3.2”下的“旅游推介. jpg”文件。
2)创建切片
选择【切片工具】,在图像中要切片的位置拖拉鼠标,创建用户切片,如图 3.2.10 所示,创建 4 个切片。
图3.2.10 创建用户切片
3)添加链接
①右键单击要创建超链接的“01”切片,在弹出的右拉菜单中选择【编辑切片选项】命令,打开【编辑切片选项】对话框。
②在【编辑切片选项】对话框中的URL框里,键入要链接的网址,在目标框中键入“_blank”,确认完成超链接的添加。
4)将切片保存为网页
执行【文件】→【存储为Web和设备所用格式】命令将切片保存为网页。图 3.2.11为保存后生成的html网页文件及images图片文件夹;图 3.2.12 为images文件夹中的图片。
图3.2.11 保存后生成的html网页文件及images文件夹
图3.2.12 images文件夹中的图片