MIS2000 Lab. is MVP 2008-2017/7/1 for ASP/ASP.NET.
透過 NuGet安裝下面的套件，可以將您的小圖示（icon）合併成一張圖
透過 CSS Sprites的方式，減少瀏覽器跟Web Server之間的圖檔傳遞，藉此增加效率。
您常看見的 Google 塗鴉（特定節日，Google的標示會有一段動畫）
也會用到這樣的效果喔！
關於 CSS Sprites可以參閱下面兩篇中文文章的說明：
在 NuGet裡面，搜尋關鍵字「aspnetsprites」即可
這個套件可以用在 Web Form 或是 ASP.NET MVC
（文末有 Demo分享的文章，就是介紹在MVC裡面使用之）
安裝完成後，會出現一個 App_Sprites目錄
然後，我把幾個「小圖示」的圖片，複製到這個新的 App_Sprites目錄裡面
（不要把你所有的圖檔，尤其是 "大圖檔" 通通擺進去。您還是回頭把 CSS Sprites的觀念釐清吧）
記得喔！要建置您的網站或專案，才會幫您處理
完成後，您可以看見 App_Sprites目錄裡面 多了一張新圖片與CSS檔。
我放進去的十張小圖示，被結合成一張大圖檔
以下使用 Web Form 說明
我們可以使用一個新的控制項，名為
建議圖片的路徑，必須使用 ASP.NET的根目錄，寫完整，
從～符號寫起，不然的話，結果可能出不來！
上圖我刻意採用兩種比對方法：
上方，使用傳統HTML的 ![]()
標籤與 來展示圖片。
下方，則使用新的
從執行結果來看，您可以發現兩者的差異（如下圖）
相關文章：
使用ASP.NET MVC的朋友 請看 Demo的大作 --
這裡有 YouTube教學影片（不過，因為版本略有小差異，僅供參考）
沒有留言:
張貼留言