设计好的网站全站图片一般不能在网页中直接使用。一般来说，应该根据布局的要求来将网页的大图分成多个小图块，即切片。

　　活动实施

　　这里所说的切片(Slice)就是将一幅大图像分割为一些小的图像切片，然后在网页中通过没有间距和宽度的表格重新将这些小的图像没有缝隙地拼接起来，成为一幅完整的图像。这样做可以缩减图像的大小，减少网页的下载时间，并且能创造交互的效果，如翻转图像等，还能将图像的一些区域用HTML来代替Photoshop,Fireworks在网页切片制作方面有很强的优势。本任务采用Photoshop软件进行首页切片。

　　1.网页切片前分析

　　根据网站主页的内容进行切片。

　　2.网页切片过程

　　(1)Photoshop的切片工具

　　①在Photoshop中打开网站首页效果图，在工具栏里找到切片工具组。②在工具组中找到切片工具，。

　　(2)打开主页效果图

　　(3)创建切片

　　在图像上拖动以分割图像(例如:一张图像切割2次就形成3个切片)。(4)设置切片选项(如大小、目标链接、图片说明等)

　　选择“切片选择”工具，在要设置的图像切片上双击，在弹出的面板进行具体设置

　　(5)储存切片为网页

　　①选择“文件”—“保存为Web和设备所用格式”命令，如图3.4.5所示。

　　②一般选择gif图片格式，图片边缘的背景色设置为“无”，单击“存储”按钮

　　③保存“HTML和图像”类型。如果要保存为Div+CSS布局，则设置“其他”

　　此时会弹出进一步设置面板，选择“切片”“生成CSS”，如图3.4.8所示。

　　这样，图像切片就被保存成Div+CSS的网页布局。

　　切割完成之后，会在保存的文件中找到这两个文件

　　小敏和小杰根据网站首页的版式，进行切片。

　　【要点提示】

　　PS切片的要点：

　　①根据颜色范围来切:如果一个区域中颜色对比的范围不是很大，只有几种颜色，就必须把它切出来。如果是单一的颜色，可以把它作为背景色。

　　②切片大小:切片的目的主要是提高下载速度，因此，在切片的时候要根据需要来进行切割，标题和Logo要在一起切。有些图片，在编制进DW的时候要注意，可能需要做成背景图片。

　　③切片区域:切片应该完整，以便日后修改。

　　栢塑杭州网站建设|网站设计小提示

　　①减少下载时间

　　②制作动态效果:利用切片可以制作出各种交互效果。

　　③优化图像:完整的图像只能使用一种文件格式、应用一种优化方式，而对于作为切片的各幅小图片，就可以分别对其优化，并根据各幅切片的情况还可以存为不同的文件格式。这样既能够保证图片质量，又能够使得图片变小。

　　④创建链接:切片制作好了之后，就可以对不同的切片制作不同的链接了，而不需要在大的图片上创建热区了。