div+css切图工具(Cyotek Spriter)是用来方便快速的切图的自动化工具,即便对CSS网页设计一窍不通也可以做到快速方便的切图处理。
制作网页除了要会基本的 HTML 语法之外,透过 CSS 更能设计网页风格,而一般人载入小图档时都是插入贴图标签,或是透过 CSS 载入图片,若是一个网站有数十个小图档,那用户端就必须对伺服器有数十个请求,对伺服器也算是小小的负担,CSS Sprites 的技术就是在解决这的问题,将所有小图档合并成一张图,透过 CSS 来切图,让载入图档更快更有效率,对站长来说也是省资源的一种方式。这次所介绍的懒人工具 Cyotek Spriter 就替你轻松达成 CSS Sprites 的效果唷!
使用方式非常的简单,若你已经有既有的网站,就将所有的图档一并拉入 Cyotek Spriter 之中,图档就会自动整齐的排列,之后透过输出的方式会产出 css 与 png 图档,打开 css 档案之后就会看到编排好的图片内容,这时候大家再对应到自己的网站之中使用即可,合并图档案与计算图档位置都已经搞定了,也算省了一大半的功,接下来就靠大家自己啰!