相信大部分使用PhotoShop的同学都知道,使用PhotoShop会产生分隔符,那么这个分隔符为什么会产生呢?
为什么PhotoShop切图会有分隔符?――工具/原料PhotoShopDreamweaver为什么PhotoShop切图会有分隔符?――方法/步骤
为什么PhotoShop切图会有分隔符? 1、
存储为Web格式的时候用了默认的设置:
出现这个问题,那至少能确定一点――肯定是在存储为Web格式的时候用了PhotoShop(后面简称PS)默认的设置,也就是说使用了默认的table布局设置,看下你的代码中,肯定会有table标签。
然后再检查下你在存储为Web格式的时候,设置应该也是默认设置。
为什么PhotoShop切图会有分隔符? 2、
这个问题要从表格(table)的结构来说
为了便于理解,这里不从html中的table标签的具体结构讲解。个人还是比较喜欢使用面向对象的编程思想去理解这些问题的。
表格布局table的结构类似于格子模型,所以我们就可以把一个table看做是一个格子框,table的tr就是格子框的行,table的td就是格子框中每一个格子。那么下面就用格子模型来说明分隔符在切片中是如何产生的。
为什么PhotoShop切图会有分隔符?_切图
为什么PhotoShop切图会有分隔符? 3、
标准的表格不会产生分隔符:
表格由行和列组成,行和列标准的表格是我们平时说的横平竖直,每一行中的单元格高度都相等,每一列中的单元格宽度也相等,如图。
标准的表格都是可以用格子框架框起来的,这样的话,table所有的的边框都和格子框的边框重合,每一个单元格就是格子框的格子,是table的最小结构元素,因此这种规则的图片在PS切图的时候是不会产生分隔符的。
为什么PhotoShop切图会有分隔符? 4、
不规则的表格可能会产生分隔符:
如下图,如果图片布局不规则,上下切片的边界不在一条线上。按照表格的结构,最基本的框架是要做到横平竖直的格子结构的,那么不规则布局怎么适应这个格子模型呢?如图,要做这样的切片:
为什么PhotoShop切图会有分隔符?_切图
为什么PhotoShop切图会有分隔符? 5、
用格子模型搭建表格基本结构
如果一定要这么不规则,那就只有用这种方式,才能使用格子模型把表格内的所有结构都框起来,也就是说表格的每一条边框都要与格子模型的边框重合。
为什么PhotoShop切图会有分隔符? 6、
占据两个以上格子的切片采用合并单元格的方式
那么这样的话,切片1就占据了7个格子的(格子宽度不急,以最小个数计数),切片2占据2个格子,切片3占据2个格子……切片7占据1个格子,切片8占据2个格子……
假设:如果没有合并单元格功能的话,那这个页面应该怎么样table布局呢?是不是要把所有切片都分割成一个个占据的格子呢?
表格中合并单元格的使用就可以将占据多个格子的切片作为合并单元格存在,就不用再把切片分隔了。那这样的话,上边的每一个切片就可以作为一个合并单元格了,占据几个格子合并几个单元格就好了。
这样的话,那图片中切片8要合并两个单元格,图片9要合并两个单元格,图片10也要合并两个单元格。下面就该分隔符出场了。
为什么PhotoShop切图会有分隔符? 7、
分隔符支撑着合并单元格:
分隔符的作用就起到了格子模型最小结构元素的作用,有了分隔符,才能有跨多个“格子”的合并单元格,才能是PS在切图,导出table结构的代码时,能够保证每张切片的完整。
为什么PhotoShop切图会有分隔符?_切图
为什么PhotoShop切图会有分隔符? 8、
分隔符可能带来的问题:
如果切图时出现了分隔符,一定要把分隔符上传,并替换掉代码中的分隔符处的图片路径。如果没有把分隔符上传替换,那么很有可能在有些浏览器中,就会出现图片错位、有空隙,也就是常说的散屏现象。
如果遇到这个问题,可以参考本人另外一篇经验:PS导出代码上传淘宝店铺图片错位有空隙散屏。