CSS Sprites Generator是一款CSS Sprites生成工具,軟件可以幫助設(shè)計(jì)師對(duì)頁(yè)面的cs代碼快速設(shè)計(jì)生成,軟件界面設(shè)計(jì)簡(jiǎn)單,操作簡(jiǎn)單 ,只需要設(shè)計(jì)師將自己想要的頁(yè)面格式做一些簡(jiǎn)單的編輯,軟件就可以自動(dòng)生成cs代碼,有需要的小伙伴快來(lái)下載使用吧!
軟件特色
通過(guò)使用CSS Spries,當(dāng)您的網(wǎng)頁(yè)僅由一個(gè)組合的CSS Spries圖像加載時(shí),您可以顯著減少dns查詢和文件查詢。
這導(dǎo)致加載速度更快,搜索引擎更喜歡加載速度快的網(wǎng)頁(yè)。
用4點(diǎn)軟件的小精靈生成器,你只需點(diǎn)擊幾下鼠標(biāo)就可以輕松生成小精靈。
這個(gè)免費(fèi)工具將生成組合的CSS精靈圖像和所需的CSS、HTML代碼。
您也可以將您的工作另存為項(xiàng)目,稍后再打開(kāi)它。
也有免費(fèi)的源代碼。
使用說(shuō)明
1、添加圖像
首先,您必須添加要轉(zhuǎn)換為CSS Sprites的圖像。
只需按下“添加圖像”按鈕或從“圖像”菜單中選擇“添加”。
2、設(shè)置精靈屬性
在添加你的圖片后,你必須從左邊的列表中選擇每一張圖片,然后指定你想要的css類(lèi)名稱(chēng)和標(biāo)簽。標(biāo)簽只是幫助你識(shí)別CSS代碼中的圖像。
對(duì)于每個(gè)圖像,你添加一個(gè)新的CSS類(lèi)將在CSS代碼中生成。
3、設(shè)置組合圖像和圖像占位符網(wǎng)址和文件路徑
然后你必須指定要生成的組合精靈圖像文件路徑。您可以選擇GIF、PNG和JPG圖像文件類(lèi)型。
您還必須指定組合精靈圖像的網(wǎng)址,因?yàn)樗鼘⒊霈F(xiàn)在您的網(wǎng)頁(yè)上。
此外,占位符圖像是必要的,以便CSS精靈工作。
CSS精靈生成器已經(jīng)有一個(gè)默認(rèn)的占位符圖像,它將被復(fù)制到您指定的位置。
您必須指定要生成的占位符的文件路徑及其在網(wǎng)頁(yè)上的網(wǎng)址。
4、生成CSS精靈
然后,按下“生成”按鈕或從“工具”菜單中選擇“生成CSS精靈”,然后組合的精靈圖像將與CSS和HTML代碼一起生成。
小精靈生成器將生成一個(gè)組合的小精靈圖像,一個(gè)占位符圖像,一個(gè)css-sprites.html html文件和一個(gè)小精靈。
選定生成的css文件后,將打開(kāi)Windows資源管理器。
5、上傳文件
然后,您必須將生成的CSS圖像子畫(huà)面圖像上傳到您的網(wǎng)頁(yè),并將占位符圖像上傳到您的網(wǎng)頁(yè)和先前指定的位置。
6、編輯網(wǎng)頁(yè)的HTML、CSS代碼
最后,您必須根據(jù)生成的HTML和CSS文件來(lái)編輯您的網(wǎng)頁(yè)的HTML和CSS代碼。
必須用占位符圖像的URL替換每個(gè)圖像的源URL,并且必須向每個(gè)圖像的圖像標(biāo)簽添加CSS類(lèi)。在你的CSS代碼中,你必須粘貼生成的CSS代碼。