奇胜网络,邯郸网站建设,邯郸网站制作,邯郸网络公司

关于PHOTOSHOP切图的问题，其实不是什么大问题，可是近很多人都在问我。干脆写个教程吧~~（以下步骤均在PS7中进行，PS6版本和7略有不同，请自行琢磨）

 

切图的好处，，是要控制单张图片的大小。把大图片切割成几个小图片，有利于浏览者尽快看到你的网页。第二，为了使排版不受到网页制作软件的限制。

 

我们先用PS做好以下图片（这个你爱怎么做就怎么做啦，在PS里没有排版的限制，不用考虑太多的）

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

 

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

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

 

对于画面的切割，总体的原则是要保证每个切片控制在一定大小内（一般10K以内）。注意我上面切割的图，标号（1）的区域是菜单，标号（2）的区域是打算放内框架的部分。在下面的部分里，我们将学到这两个区域的用途。

切好图片之后，我们通过菜单的“文件”－“存储为web所用格式”，打开“存储为web所用格式”窗口。

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

 

中的“存储”，就跳出保存文件的窗口了。我们现在把文命名为example.html，存放在合适的位置。

 

好，现在关闭PS，打开DW。打开刚才保存的example.html文件。我们可以看到，其实这个图片是被保存在表格中的。现在我们需要重新回顾【图8.2】中的两个切割区域了。

区域（1），这个是菜单，是要在各个菜单选项上做上链接的。选择区域（1）的图片，在属性框里，我们选择“热点切割”工具，在图片上划出热点链接区域。见【图8.9】。

 

 

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

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