CSS Sprites Generator是一款CSS Sprites生成工具，可以幫助用戶(hù)進(jìn)行CSS Sprites的生成，在軟件中用戶(hù)只需要簡(jiǎn)單的幾個(gè)操作就能進(jìn)行CSS Sprites的生成，大大的提高了設(shè)計(jì)師的頁(yè)面設(shè)計(jì)效率，頁(yè)面加載速度得到提升，用戶(hù)可以通過(guò)VSS顏色更加表來(lái)進(jìn)行頁(yè)面的設(shè)計(jì)。

軟件介紹

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

軟件特色

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

這導(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è)和先前指定的位置。

第六步——編輯網(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代碼。