做网页的第一步就是从美工那边获取到网页的模板（*.PSD文件），在网页页面的制作之前，我们需要对其进行切片处理。
为什么要切片？可能很多人一开始都会有这样的疑问，网页上的图片最后要呈现给用户的就是一个完整的样子，为什么要浪费大量时间和精力，又承担着排版布局极容易出错的风险来做这项“无用功”？最主要的问题是效率。大家都知道，页面的呈现过程是先有客户端（用户浏览器输入URL）向服务器递交浏览申请，然后服务器获取URL相对应的资源在通过网络返还给客户端。这中间就存在了一个下载资源的过程。而整张图片或者大块图片的下载很显然可能导致下载过程中页面出现难看的条痕等影响界面友好度的问题，而小图片的下载效率在多年来的测试中已经被所有网页设计者认可。除此之外，切片后的页面能更好的对页面元素进行定位，你能想象用类似坐标定位的方法在一整张图片上面去定位每一个页面元素的位置是一个什么样的工程吗？
切片时很重要的环节。切片的时候是一个意识上对整个页面进行布局分析的过程，同样的一张模板，不同的人会有不同的切法，理由很简单，因为每个人都有自己的布局习惯，有些人习惯table布局，有些人则擅长div+css，也有人习惯介于两者之间的布局方式（关于table和div+css的对比，暂且放下不谈）。由于两者对布局设计思想的要求完全不同，切片时就可能出现很多细节上的不同。由此也就能推断，网页的切片会影响整个页面的排布，只有在切片阶段仔细考虑到后期排布的问题，才能使后面的工作有条不紊的展开。
具体切片的方法，我在这里只是说一下我一直以来用的方法。
1.拿到一个模板，先尽可能用最简单的一个table把它的各个板块划开，然后直接用PS生成一个页面1。
2.用DW打开生成的HTML，把图片全部转为背景（有技巧可以偷懒的哦，别傻傻的一个一个去换啊）
3.在用PS打开相应的一小块一小块的gif图片进行最终的切片并生成一个个html，复制里面的table放置到页面1相应的td中就能达到最终拼完页面的效果了。
可能整个过程看来简单，但具体的操作还是需要多联系才能真正体会到拼图的技巧。希望这篇文章能对大家学习切片拼页面有所帮助。也希望有更有效直接的方法能说出来哦。
关注公众号 
进入手机版 
点击咨询
4006-234-116
返回顶部