根据不同的设计图采取不同的方案。
你可以用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代码文件。
用 ImageReady其次打开你想做切片的图片
在英文输入法下，在程序界面中按 K切换到切片工具
在图片上随意进行切片
按CTRL+ALT+SHIFT+S 将优化结果存储为
保存类型下拉框拉下来选择“HTML和图像”
进行保存
或者使用photoshop的 切片工具 操作！
这是教程
http://wenku.baidu.com/view/9e74cd23af45b307e871971a.html
http://wenku.baidu.com/view/9d79cb7f27284b73f2425056.html
希望帮到你
