仓酷云

标题: 给大家带来CssGaga教程:AutoSprite(CSS Sprite Generator) [打印本页]

作者: 透明 时间: 2015-1-15 23:15
标题: 给大家带来CssGaga教程:AutoSprite(CSS Sprite Generator)
如果单独使用DIV而不加任何CSS,那么它在网页中的效果和使用是一样的。
破洛洛文章简介：CssGagaCAutoSprite(CSSSpriteGenerator).
市情上有一些sprite天生器，要末是要野生调剂图片地位，要末要拷贝粘贴代码，用起来老是以为不敷爽，CssGaga利用了分歧的思绪，但愿能束缚你的双手:)利用时选中AutoSprite便可开启此功效，上面经由过程一个例子来讲明：好比HTML：

<sclass="i1"></s><sclass="i2"></s><sclass="i3"></s><sclass="i4"></s><sclass="i5"></s><sclass="i6"></s>

复制代码

css源文件：

body{background-color:black;}s{display:inline-block;width:16px;height:16px;overflow:hidden;background-repeat:no-repeat;}.i1{background-image:url(slice/1.png);}.i2{background-image:url(slice/2.png);}.i3{background-image:url(slice/3.png);}.i4{width:64px;height:64px;background-image:url(slice/4.png);}.i5{background-image:url(slice/3.png);}.i6{width:64px;height:64px;background-image:url(slice/6.gif);}.i11{width:60px;height:60px;background-image:url(slice/1.jpg);}.i12{width:60px;height:60px;background-image:url(slice/2.jpg);}.i13{width:60px;height:60px;background-image:url(slice/3.jpg);}.i14{width:60px;height:60px;background-image:url(slice/4.jpg);}

复制代码

CssGaga天生后：

body{background-color:black}s{display:inline-block;width:16px;height:16px;overflow:hidden;background-repeat:no-repeat}.i1{background-image:url(sprite/style.png);background-position:-128px0}.i2{background-image:url(sprite/style.png);background-position:-128px-16px}.i3{background-image:url(sprite/style.png);background-position:-128px-32px}.i4{width:64px;height:64px;background-image:url(sprite/style.png);background-position:00}.i5{background-image:url(sprite/style.png);background-position:-128px-32px}.i6{width:64px;height:64px;background-image:url(sprite/style.png);background-position:-64px0}.i11{width:60px;height:60px;background-image:url(sprite/style.jpg);background-position:00}.i12{width:60px;height:60px;background-image:url(sprite/style.jpg);background-position:-60px0}.i13{width:60px;height:60px;background-image:url(sprite/style.jpg);background-position:-120px0}.i14{width:60px;height:60px;background-image:url(sprite/style.jpg);background-position:-180px0}

复制代码

同时天生sprite图片sprite/style.png和sprite/style.jpg

给大家带来CssGaga教程:AutoSprite(CSS Sprite Generator)

文件对照：
beforeafterhtmlbefore.htmafter.htmcssstyle.source.cssstyle.cssimagepng/gif总巨细：10.2KB
jpg总巨细：8.69KB
slice/1.png

slice/2.png

slice/3.png

slice/4.png

slice/6.gif

slice/1.jpg

slice/2.jpg

slice/3.jpg

slice/4.jpg

5.83KB
sprite/style.png
7.19KB
sprite/style.jpg详解

碎图片放在slice文件夹，slice文件夹与css同级且援用时为绝对路径
css挪用图片的语句不克不及缩写，要写完全
1. background-image:url(slice/1.png)
复制代码
引号写单双无所谓，不写也行，最初城市被紧缩失落，上面这类写法不会失效
1. background:url(slice/1.png)
复制代码
可处置png、gif（不撑持静态gif，看成png8处置）和jpg格局，若为png32则天生的sprite会转换为png8，倡议全体利用png8格局
CssGaga天生的sprite安排于与slice同级的sprite文件夹中，天生后会主动举行紧缩，文件名为该css文件名+图片后缀（png/jpg），每一个css最多天生2个sprite（png/jpg），png为带alpha通明的png8（fireworks有这个功效，photoshop没有），可用来完成渐进加强
天生sprite后主动交换css中background-image的url，并主动天生对应的backgroud-position
利用同步功效可同时把css和天生的sprite拷贝已往，选中天生当地文件可保存在当地sprite目次中，不然会在同步后删往
今后会慢慢优化尽量削减sprite的面积，利用者只需更新CssGaga便可，不用变动代码

CssGaga–AutoSpritehttp://static.slidesharecdn.com/swf/playerv.swf?doc=autosprite-110224061026-phpapp02-video&stripped_title=cssgaga-autosprite&autoplay=0&userName=ytzong
Viewmorevideosfromytzong</p>
可以增加更多的用户而不需要建立独立的版本。可以一次设计，随处发布。

作者: 精灵巫婆 时间: 2015-1-17 21:01
使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。

作者: 柔情似水 时间: 2015-2-1 08:38
以上大概就是文字图片的一些链接方法，通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识，他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。

作者: 谁可相欹 时间: 2015-2-7 03:30
俗话说：兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中，我们难免会遇到各种各样的问题。

作者: 分手快乐 时间: 2015-2-20 14:06
还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。

作者: 飘灵儿 时间: 2015-3-6 18:30
由CS4 版本开始，则转用WebKit 排版引擎（亦即Google Chrome和Apple Safari浏览器所用的排版引擎）作为网页预览。

作者: 活着的死人 时间: 2015-3-13 07:08
技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。

作者: 兰色精灵 时间: 2015-3-20 16:32
帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。

欢迎光临仓酷云 (http://ckuyun.com/)