CSS Sprites Generator是一款CSS Sprites生成工具，用戶只需要點(diǎn)擊幾下鼠標(biāo)就可以非常容易地生成CSS Sprites。有效提高了設(shè)計(jì)師的頁面加載效率，操作簡(jiǎn)單方便，十分實(shí)用。

基本簡(jiǎn)介

　　CSS Sprites Generator可為你自動(dòng)地快速生成引用圖像較多的CSS樣式表，而無須手寫代碼。為設(shè)計(jì)師提高頁面加載效率提供了簡(jiǎn)單快速的解決方案。為了讓你的網(wǎng)頁加載速度更快，你可以對(duì)你的網(wǎng)頁圖像使用CSS Sprites Generator，這意味著您不需要在您的HTML代碼中插入很多圖像，而是將它們組合成一個(gè)，然后用適當(dāng)?shù)腃SS代碼顯示它們。

軟件特色

　　通過使用CSS Spries，當(dāng)您的網(wǎng)頁僅由一個(gè)組合的CSS Spries圖像加載時(shí)，您可以顯著減少dns查詢和文件查詢。

　　這導(dǎo)致加載速度更快，搜索引擎更喜歡加載速度快的網(wǎng)頁！

　　用4點(diǎn)軟件的小精靈生成器，你只需點(diǎn)擊幾下鼠標(biāo)就可以輕松生成小精靈！

　　這個(gè)免費(fèi)工具將生成組合的CSS精靈圖像和所需的CSS、HTML代碼。

　　您也可以將您的工作另存為項(xiàng)目，稍后再打開它。

　　也有免費(fèi)的源代碼。

使用方法

　　步驟1 -添加圖像

　　首先，您必須添加要轉(zhuǎn)換為CSS Sprites的圖像。

　　只需按下“添加圖像”按鈕或從“圖像”菜單中選擇“添加”。

　　步驟2 -設(shè)置精靈屬性

　　在添加你的圖片后，你必須從左邊的列表中選擇每一張圖片，然后指定你想要的css類名稱和標(biāo)簽。標(biāo)簽只是幫助你識(shí)別CSS代碼中的圖像。

　　對(duì)于每個(gè)圖像，你添加一個(gè)新的CSS類將在CSS代碼中生成。

　　步驟3 -設(shè)置組合圖像和圖像占位符網(wǎng)址和文件路徑

　　然后你必須指定要生成的組合精靈圖像文件路徑。您可以選擇GIF、PNG和JPG圖像文件類型。

　　您還必須指定組合精靈圖像的網(wǎng)址，因?yàn)樗鼘⒊霈F(xiàn)在您的網(wǎng)頁上。

　　此外，占位符圖像是必要的，以便CSS精靈工作。

　　CSS精靈生成器已經(jīng)有一個(gè)默認(rèn)的占位符圖像，它將被復(fù)制到您指定的位置。

　　您必須指定要生成的占位符的文件路徑及其在網(wǎng)頁上的網(wǎng)址。

　　步驟4 -生成CSS精靈

　　然后，按下“生成”按鈕或從“工具”菜單中選擇“生成CSS精靈”，然后組合的精靈圖像將與CSS和HTML代碼一起生成。

　　小精靈生成器將生成一個(gè)組合的小精靈圖像，一個(gè)占位符圖像，一個(gè)css-sprites.html html文件和一個(gè)小精靈。

　　選定生成的css文件后，將打開Windows資源管理器。

　　步驟5 -上傳文件

　　然后，您必須將生成的CSS圖像子畫面圖像上傳到您的網(wǎng)頁，并將占位符圖像上傳到您的網(wǎng)頁和先前指定的位置。

　　第六步——編輯網(wǎng)頁的HTML、CSS代碼

　　最后，您必須根據(jù)生成的HTML和CSS文件來編輯您的網(wǎng)頁的HTML和CSS代碼。

　　必須用占位符圖像的URL替換每個(gè)圖像的源URL，并且必須向每個(gè)圖像的圖像標(biāo)簽添加CSS類。在你的CSS代碼中，你必須粘貼生成的CSS代碼。

更新日志

　　修復(fù)BUG，新版體驗(yàn)更佳

　　更改了部分頁面