html 怎样将一张图片切割成多张图片之后设置这些图片的位置

如果不想使用PS来编辑图片，可以在网页中直接用多个DIV+CSS实现，先设置好各个DIV的位置和大小，然后用CSS指定该图片为背景图片，只要把background-position的值计算好，就可以使DIV显示图片的不同部位，实现拼图效果。

是将一张完整的图片切成N小块，然后拼在一块

具体步骤：

下面举例说明如何在Photoshop中切割图片。

1. 打开一张图片，选择工具栏上的“切片工具”，样式有三种选择，为了便于图片的管理，通常选择“固定大小”。普通网页宽度通常是760px，所以选择五分之一宽度，也就是152px作为切割图片的宽度。宽度和高度都可根据图片大小随意调整。

2. 选中“切片工具”后，在图片上任意点击一下左键，或者按住左键拖拽一个方形，就出现一个切片。

3. 如果变换切片的位置和大小，选择工具栏上的“切片选择工具”，再点击某个切片即可选中。用左键按住某个已选中的切片，可以随意挪动切片位置。用左键按住切片四周的小黑点，也可随意伸展或收缩切片大小。如果在某个切片上单击右键，d出的菜单上可以选择删除切片或者编辑切片。

4. 以此类推，再次选择“切片工具”在图片上切出更多切片，并排列位置

5.如果需要，还可以把某个切片细分成更多小切片。方法是，选择工具栏上的“切片选择工具”，选中某个切片，单击顶上的“划分”按钮，可任意选择分割切片的方式，可以按切片个数划分，也可以按精确像素划分，不一而足。

6. 点击顶部的“为当前切片设置选项”按钮，设置切片类型、名称、网络上定位的URL地址、目标（即加载URL时的桢，此项仅针对动画图片）、信息文本（即鼠标指向网页上的图片时，出现在浏览器底部状态栏的文字信息）、Alt标记（即鼠标放置在网页上的图片上时，自动出现在图片周围的解释文字）。设置这些选项后，将来生成的HTML页面上，图片就会被设置好链接。可对每个切片分别选中，分别设置这些选项。

7. 点击菜单：文件–>存储为Web所用格式。选择“双联”，左侧为图片原稿，右侧为将来在网页上出现的图像，可以用鼠标选中右侧任意一个切片，设置每个小切片图片的类型等等，同时可以设置图片品质用于压缩图片大小

8.点击“存储”按钮，选择保存文件类型为“HTML和图像”

9.保存完成后，电脑上就会出现一个名叫index.html的文件和一个名叫images的图片目录，切分后的图片就保存在这里。index.html就是用切分后的小图片组成的网页文件。

网页图片切小是为了让人们打开网页时更快，读取小块图片是并列进行了，比读取大图片快

二 按网页的结构和图片的特点进行切片切片的大水上和位置可以通过切片选项来进行调整三 选择文件菜单 另存为WEB格式命令，保存时会生成index.html 图片文件会存放在images文件夹中(CS3要选择存储为html和图片)四 使用Dreamweaver软件打开刚刚保存生成的html文件进行编辑，删除不必须的图片和进行内容的填充。切片原则和常见问题：一 切片是生成表格的依据，切片的过程要先总体后局部，即先把网页整体切分成几个大部分，再细切其中的小部分。二 对于渐变的效果或圆角等图片特殊效果，需要在页面中表现出来的，要单独切出来三 在DW中进行编辑时，少用图片，如果能用背景颜色代替的就使用背景颜色 能使用图案的也尽可能使用图案平铺来形成背景删除图片的时候记住图片的长宽，再插入一个相同长宽的表格。使用表格长宽一样的图片做为单元格的背景。

---