專利名稱：一種Web軟件UI界面的換膚方法
一種Web軟件Ul界面的換膚方法技術領域
本發(fā)明屬于UI界面換膚方法，尤其是一種Web軟件UI界面的換膚方法。
背景技術：
隨著個性化社會的發(fā)展和Web設計技術的不斷發(fā)展，現(xiàn)在很多基于Web的軟件都支持換膚功能，允許用戶根據(jù)自己實際需要來定制軟件的外觀。現(xiàn)有的設計方法一般都是通過動態(tài)改變所需要的CSS樣式文件實現(xiàn)，其原理如下在設計Web界面時，首先通過HTML標簽來設計界面要顯示的內容及布局，然后通過CSS 樣式文件的設計來實現(xiàn)界面的顯示效果和風格，包括標簽的高度、寬度，字體大小及顏色、 背景圖片等。針對Web界面所要提供的每一種膚色風格，設計一套樣式表，即CSS文件，并將其放在不同的文件夾中。同時，針對每一種膚色風格，設計相應的背景圖片，也放到相應 CSS文件對應的文件夾下面。在用戶選擇某一種目標膚色時，瀏覽器重新刷新加載相應的 CSS樣式文件和背景圖片，進而實現(xiàn)膚色風格的更換。
該方法雖然能夠實現(xiàn)精致的Web界面換膚效果，但其在實際使用中存在如下明顯缺點第一，需要針對每一種膚色效果設計相應的CSS樣式文件和背景圖片，設計開發(fā)工作量較大，尤其是對于復雜的Web軟件；第二，在進行膚色更換時，需要瀏覽器重新進行刷新， 加載相應的CSS樣式文件和背景圖片，效率較低。而且需要相應的設計來保存Web界面當時的數(shù)據(jù)狀態(tài)，進一步增加了設計開發(fā)的難度。發(fā)明內容
為了克服現(xiàn)有技術的缺陷，本發(fā)明提出了一種Web軟件Π界面的換膚方法，以簡化現(xiàn)有軟件UI界面換膚方法的實現(xiàn)方式。
為了實現(xiàn)上述目的，本發(fā)明的技術方案為一種Web軟件UI界面的換膚方法，包括以下步驟O制作圖形Π界面，并切割好貼圖；2)設置貼圖的透明度，并保存為PNG格式圖片；3)采用HTML容器標簽將PNG格式圖片應用到UI界面上；4)根據(jù)用戶選擇的顏色，UI界面將顏色動態(tài)應用到HTML容器標簽，UI界面生成不同色調的皮膚。
步驟I)中首先制作好圖形Π界面，通過圖像處理軟件，將Π界面布局中需要進行貼圖的部分進行逐一剪貼，將切割好的貼圖對應于相應的HTML容器標簽。在Π界面中提供了顏色選擇功能，用于用戶選擇不同的顏色。貼圖采用PNG格式的透明效果更強，PNG 格式的透明不限于僅為完全透明或不透明，還存在不同層次的透明。
更進一步的，步驟I)貼圖的色調通過背景圖片、標簽底色或背景圖片和標簽底色混合實現(xiàn)。
更進一步的，所述貼圖的透明度為09Γ100%。即有些地方完全不需要底色色調，僅需背景圖片上的效果，而有些地方則完全不需要背景圖片效果，僅僅使用標簽底色。更準確的說，將需要實現(xiàn)色調變換的部分勾選出來，設置一定的透明度，而其余地方則可設置為完全透明或不透明。將該貼圖的其余部分的透明度設置為0%，即完全透明，完全透明處僅采用標簽底色來實現(xiàn)色調效果；透明度設置為100%，即不透明，不透明處僅保留背景圖片上的色調效果。
更進一步的，所述透明貼圖的透明度為50%。
更進一步的，所述步驟3)為采用HTML容器標簽制作CSS文件，利用HTML容器標簽及CSS文件將PNG格式圖片應用到Π界面上。
更進一步的，所述步驟4)的用戶利用瀏覽器進入Π界面。用戶通過瀏覽器進入 UI界面，從而選擇不同的顏色。
本發(fā)明的有益效果通過背景圖片和標簽底色的混合色調來實現(xiàn)Web軟件Π界面換膚的效果。在本法中，只需要一組背景圖片，通過利用其透明度來實現(xiàn)背景圖片和HTML 標簽底色的混合來最終實現(xiàn)各種不同色調的界面皮膚的效果；利用本法降低了 Web軟件開發(fā)和維護的難度。


圖I為本發(fā)明的流程圖；圖2為本發(fā)明的效果圖。
具體實施方式
如圖I所示，一種Web軟件Π界面的換膚方法，包括以下步驟O制作圖形Π界面，并切割好貼圖；2)設置貼圖的透明度，并保存為PNG格式圖片；3)采用HTML容器標簽制作CSS文件；采用HTML容器標簽及CSS文件將PNG格式圖片應用到UI界面上；5)在Π界面中提供顏色選擇功能；6)利用瀏覽器進圖Π界面；7)用戶選擇顏色，UI界面將顏色動態(tài)應用到CSS文件，UI界面生成不同色調的皮膚。
Π界面工程師制作出Web軟件Π界面的布局圖，并通過Photoshop圖像處理軟件處理，將Π界面布局中需要進行貼圖的部分逐一剪貼出來，對應于相應的HTML容器標簽， 繼而確定出需要通過背景圖片或圖片中的一部分和標簽底色混合實現(xiàn)色調效果的貼圖；對貼圖進行透明度設置，并將其保存為PNG-24格式圖片帶透明度屬性的PNG文件。對貼圖進行透明度設置時，對貼圖全部或部分的透明度設置為50%，對于只需部分設置為透明的貼圖，其余部分設置為不透明，即透明度設置為100%，如某公司的LOGO作為背景圖片，為了保證公司LOGO可以清楚體現(xiàn)，則該LOGO處貼圖的透明度設置100%，即不透明，即此處只是通過背景圖片來實現(xiàn)色調效果。如某處只需要通過標簽底色來實現(xiàn)色調效果，則將此處的透明度設置0%。
設置貼圖全部或部分的透明度，是根據(jù)所需要的效果確定，當需要突出背景圖片和標簽底色混合實現(xiàn)色調效果時，如果需要突出現(xiàn)出背景圖片，則貼圖透明度的設置可以稍高，如60%或80% ;如果需要突出標簽底色，則貼圖透明度的設置稍低，如20%或40% ;—般情況，貼圖的透明度設置為50%，即貼圖的效果采用背景圖片和標簽底色均等實現(xiàn)。
根據(jù)UI界面布局圖，通過HTML容器標簽涉及UI界面要顯示的內容及其布局，同時制作相應的CSS文件來實現(xiàn)UI界面的顯示效果和風格，并采用HTML容器標簽及CSS文件將PNG格式圖片放于同一個目錄，在Π界面上提供若干種色彩供用戶選擇。啟動瀏覽器時，將通過加載HTML文件和CSS文件來生成相應的UI界面，并根據(jù)CSS樣式文件中的標簽底色及每個標簽的背景圖片來生成界面的色調，如圖2所示。
本發(fā)明的工作過程在用戶根據(jù)實際需要或個人愛好更換一種UI界面顏色時，瀏覽器調用該顏色來調整Π界面中的標簽底色，并根據(jù)標簽底色與背景圖片及其透明度重新生成相應的界面色調，從而達到實現(xiàn)換膚的效果。
權利要求
1.一種Web軟件Π界面的換膚方法，其特征在于包括以下步驟O制作圖形Π界面，并切割好貼圖；2)設置貼圖的透明度，并保存為PNG格式圖片；3)采用HTML容器標簽將PNG格式圖片應用到UI界面上；4)根據(jù)用戶選擇的顏色，UI界面將顏色動態(tài)應用到HTML容器標簽，UI界面生成不同色調的皮膚。
2.根據(jù)權利要求I所述Web軟件Π界面的換膚方法，其特征在于所述步驟I)貼圖需要通過背景圖片、或背景圖片和標簽底色混合實現(xiàn)色調效果。
3.根據(jù)權利要求I所述Web軟件Π界面的換膚方法，其特征在于所述步驟2)中貼圖的透明度為0% 100%。
4.根據(jù)權利要求3所述Web軟件Π界面的換膚方法，其特征在于所述透明貼圖的透明度為50%。
5.根據(jù)權利要求I所述Web軟件Π界面的換膚方法，其特征在于所述步驟3)為采用 HTML容器標簽制作CSS文件，利用HTML容器標簽及CSS文件將PNG格式圖片應用到UI界面上。
6.根據(jù)權利要求I所述Web軟件Π界面的換膚方法，其特征在于所述步驟4)的用戶利用瀏覽器進入Π界面。
全文摘要
本發(fā)明公開一種Web軟件UI界面的換膚方法，包括以下步驟1)制作圖形UI界面，并切割好貼圖；2)設置貼圖的透明度，并保存為PNG格式圖片；3)采用HTML容器標簽將PNG格式圖片應用到UI界面上；4)根據(jù)用戶選擇的顏色，UI界面將顏色動態(tài)應用到CSS文件，UI界面生成不同色調的皮膚。本發(fā)明通過背景圖片和標簽底色的混合色調來實現(xiàn)Web軟件UI界面換膚的效果。在本法中，一個標簽其背景圖片只需一個，通過利用其透明度來實現(xiàn)背景圖片和標簽底色的混合來最終實現(xiàn)換膚的效果；利用本法降低了Web軟件開發(fā)和維護的難度。
文檔編號G06F9/44GK102929617SQ20121039701
公開日2013年2月13日 申請日期2012年10月18日 優(yōu)先權日2012年10月18日
發(fā)明者江均豐, 康曉林, 梁炯生 申請人:廣東威創(chuàng)視訊科技股份有限公司