怎么把图片切成HTML页面？

根据不同的设计图采取不同的方案。

你可以用table布局，可以用<map>+<area>标签，可以用CSS绝对或相对定位一个<a>的位置。

很久很久以前，人们喜欢大大的图放上去，再用map标签指定图片的可点击热点。

后来流行方块切图的方式，许多图片处理工具里面有，印象中Firework可以导出切片图片文件带html，核心考虑是加载速度。

现在一般分层分块，背景是背景，该平铺的平铺。另外哪里有图就放图，哪里有字就放字。该哪里有链接就放链接。

不推荐把所有东西做在图片里面然后想要把这个图片直接变成网页的想法，纯美工不会网页的常有此想法。

从网页角度这种做法不利于SEO，严重影响页面载入速度，文本信息无法复制。

1、在Adobe Photoshop CC中打开设计好的PS图片文件

2、按键盘快捷键Ctrl+R调出参考线功能

3、在标尺上按住鼠标左键拉出辅助线到相应位置

4、选择切片工具，或键盘快捷键C ，激活切片功能；点击基于参考线的切片，软件自动将辅助线条之间分割成若干切片（注：放大检查辅助线位置会更精准）

5、选择菜单【文件】>存储为web格式，调出web格式窗口

6、点击【存储】按钮，进入存储窗口

7、存储窗口中格式选择Html和图像，所有切片；然后保存

8、自动生成网页代码文件和图像；如图示：图片文件夹images和html代码文件。

1、首先，在ps中打开一张要处理的图片。

2、然后，在左侧的工具栏中点击切片工具。

3、接着，用切片工具把图片分成4份。

4、之后，再依次点击左上角的文件——存储为web所用格式。

5、在d出的窗口中点击存储的按钮。

6、最后，d出的保存窗口中把格式选择为HTML图像，再点击保存按钮即可。

---