如何用PS切图和输出网页？

（全文内容转载自网易博客，针对上篇中提到的切图中的一种前端经常遇到的情况，更详细的介绍）

切图的好处，第一，是要控制单张图片的大小。把大图片切割成几个小图片，有利于浏览者尽快看到你的网页。第二，为了使排版不受到网页制作软件的限制。
我们先用PS做好以下图片（这个你爱怎么做就怎么做啦，在PS里没有排版的限制，不用考虑太多的）

【图8.1】 图片做好了，我们开始切图，使用PS中的切割工具：

【图8.2】
对于画面的切割，总体的原则是要保证每个切片控制在一定大小内（一般10K以内）。注意我上面切割的图，标号（1）的区域是菜单，标号（2）的区域是打算放内框架的部分。在下面的部分里，我们将学到这两个区域的用途。
切好图片之后，我们通过菜单的“文件”－“存储为web所用格式”，打开“存储为web所用格式”窗口。

【图8.3】

JPG格式一般适用于颜色较多，尤其是有渐变色的图片，一般品质为60就可以。GIF格式适用于颜色较少的图片，颜色可以选择128、64、32、16等。
选择切片格式和品质的原则，就是在浏览器中看起来和压缩前变化不大。点击【图8.6】中的小三角，选择弹出菜单中的“编辑输出设置”。弹出【图8.7】的输出设置窗口。

【图8.6】

【图8.7】
在【图8.7】中，其他的设置都不用管。点击“下一个”，切换到【图8.7】的页面， 注意这里的“将图像放进文件夹”。这个选项的意思就是，如果你把图片的html文件保存为example.html，那么切掉的小图片就保存在于example.html同目录的images文件夹中。大家试试看就知道了。 最后，点击【图8.3】中的“存储”，就跳出保存文件的窗口了。我们现在把文命名为example.html，存放在合适的位置。
好，现在关闭PS，打开DW。打开刚才保存的example.html文件。我们可以看到，其实这个图片是被保存在表格中的。现在我们需要重新回顾【图8.2】中的两个切割区域了。
区域（1），这个是菜单，是要在各个菜单选项上做上链接的。选择区域（1）的图片，在属性框里，我们选择“热点切割”工具，在图片上划出热点链接区域。见【图8.9】。

【图8.8】

【图8.9】

【图8.9】就是区域（1）被热点切割后在DW中显示的样子。选择蓝色的热点，就可以在属性中定义超级链接、替换文本等。

【图8.10】 然后我们看区域（2），我们注意到，其实这个区域图片是一张纯白色的图片，没有任何内容，我们可以直接把这张图片删去。删掉后就可以在单元格中直接输入文字了。这里要注意的是，不要轻易使用回车，否则可能会打乱整个表格的。

  【图8.11】
一般来说，我们习惯于在区域（2）做一个内框架，就是把一个网页嵌在内部，并且有滚动条。
查看example.html的源代码，找到区域（2）这里的代码部分， <TD ROWSPAN=5> <IMG SRC="images/example_4.gif" WIDTH=28 HEIGHT=250 ALT=""></TD> <TD ROWSPAN=4></TD> <TD ROWSPAN=5> <IMG SRC="images/example_6.gif" WIDTH=42 HEIGHT=250 ALT=""></TD> 在<TD ROWSPAN=4>和</TD>间插入内框架的代码： <iframe border=1 frameborder=0 framespacing=0 height=100％ marginheight=0 marginwidth=0 name=new_date noResize scrolling=yes src="news.html" width=100% vspale="0"></iframe>
其中，news.html就是内部框架要应用的网页。你可以按照实际情况来修改。内框架的边框大小、颜色、是否显示滚动条等都可以设置。对滚动条定义一下风格，就可以于这个图片统一了（IE5.5以上支持）。