页面打开中,请稍候...
www.Gzu521.com
| 贵 州 学 习 网 |
|
本例中你要学到如何把一幅较大的图片切割成若干幅较小的图片，还要学习设置图像热点以及鼠标响应的方法，切割的图片和设置了热点的图片都可以通过自动生成的Javascript代码用于你的html文件中。
第一步：选择file > open，导入准备要切割的图片，如图1。在主菜单中选中view > guides，view > slice guides，view > guide option > snap to guides，如图2。
第二步：想把这副图片切割成三部分：咖啡杯、糕点和上面的空白区。选择工具箱中右下角的slice tool > rectagle（矩形切割工具），按住鼠标左键在图片上拖动，画出三个矩形（矩形之间不要重叠），它们就会被一层绿色蒙板所覆盖，并显示出红色导轨线（浏览器中不会显示蒙板和导轨线），这幅图片就切割完备，如图3，可以输出存盘以便将来使用到你的html中。输出时除了可以在export preview中调整一些属性外，按下export还会有一个输出项目设置栏，如图4，其中base name是存盘时的主文件名，使用gif格式，slicing选 use slice objects，style选择你将把它用于何种网页编辑工具，或存为dreamweaver 3 的模板文件（选择dreamweavwer 3 library.lbi），也可存为标准html格式文件（选择generic），location栏中选择存盘路径。存盘后有一个htm文件和三个gif文件，而htm文件主要是一段自动生成的JavaScript代码。
第三步：如果切割图片后，想要把它用于热点响应，就不忙着进行上面第二步的输出工作，而接着图片切割以后按下面的步骤继续。选择window > object，点击一下上面空白处的切片，在出现的属性面板中，清空 auto-name slices前面的选择框，在下面输入一个该切片的名字，例如show，见图5。重复进行以上步骤，把咖啡杯图像的切片命名为hotspot1，把糕点图像的切片命名为hotspot2,都不要取中文名。暂时停下目前的工作，做两个带有文字的图像文件，输出为text1.gif和text2.gif，见图6,存入一个目录中（将来完成的本例所有文件均存到同一目录）。继续前面的工作，点击图片中的咖啡杯切片，选择window > behaviors，在behaviors面板中点击 + 符号，在弹出的菜单中选择swap image，如图7。
第四步：在swap image的弹出菜单中，第一栏选择show，见图8。在下一栏的image file中，选择刚才所存盘的text1.gif文字图像的路径,见图9。下面的两栏均勾上。点击糕点切片，也在behaviors面板中点击 + 符号，再选择swap image，也选中弹出菜单的show，下一栏的image file中，要选text2.gif文字图像的路径，后面的两栏也要勾上。
第五步：点击“ok”后，在behaviors面板中就会出现鼠标的事件响应onmouseover一行字，见图10。下面该存盘了，输出设置如第二步所述，参见图4。完成后的切图在浏览器中如图11，当鼠标指向咖啡杯时，上方显示前述第一个文字图像，指向糕点时，上方显示第二个文字图像，鼠标移开时，不显示文字图像。以后在网页编辑软件中，可以为热点切片分别加上超链接。切图的事件响应常用来为网页内容作导航。
|
当前位置:
