制作網(wǎng)頁圖標(biāo)方法及其系統(tǒng)的制作方法
【技術(shù)領(lǐng)域】
[0001]本發(fā)明涉及一種制作網(wǎng)頁的方法，尤其是關(guān)于制作網(wǎng)頁圖標(biāo)的方法。
【背景技術(shù)】
[0002]隨著互聯(lián)網(wǎng)的發(fā)展，互聯(lián)網(wǎng)產(chǎn)品的快速增長。為了使直接的互聯(lián)網(wǎng)產(chǎn)品能更簡潔明了、亮麗直觀些，網(wǎng)頁的圖形界面就顯得尤為重要，并且界面的加載的速度直接影響用戶的使用體驗。
[0003]目前的做法是，如果一個網(wǎng)頁的界面中有多個圖標(biāo)，多少個圖標(biāo)就多少張圖片，然后把圖片加載到指定位置。此方法，每張圖片在加載到界面中都會發(fā)一個http請求，如果圖片比較多，在一定程度上影響界面的加載性能。另外，如果顯示圖片的大小需要做更改的話又會影響圖片的質(zhì)量。
[0004]有多少個圖片就有多少次http的請求，這樣占用資源，影響加載速度。如果圖片需要放大或者縮小比例又會影響圖片顯示的質(zhì)量，影響視覺效果。

【發(fā)明內(nèi)容】

[0005]本發(fā)明需解決的技術(shù)問題是提供一種能提升頁面加載速度的制作網(wǎng)頁圖標(biāo)方法。
[0006]為解決上述的技術(shù)問題，本發(fā)明設(shè)計了一種制作網(wǎng)頁圖標(biāo)方法，包括包括以下步驟:步驟1:將圖標(biāo)轉(zhuǎn)化為字體格式；步驟2:將轉(zhuǎn)化為字體格式的圖標(biāo)嵌入網(wǎng)頁的界面中。
[0007]作為本發(fā)明進(jìn)一步改進(jìn)，還包括創(chuàng)建一文件夾的步驟；將圖標(biāo)轉(zhuǎn)化為字體格式后再存放在該文件夾中。
[0008]作為本發(fā)明進(jìn)一步改進(jìn)，將轉(zhuǎn)化后的圖標(biāo)均命名。
[0009]作為本發(fā)明進(jìn)一步改進(jìn)，在網(wǎng)頁的界面中需要顯示圖標(biāo)的位置定義一個唯一的ID名稱，再設(shè)置該ID名稱的樣式值，在樣式值中用content屬性來對應(yīng)要顯示圖標(biāo)的名稱，從而使圖標(biāo)嵌入網(wǎng)頁的界面中。
[0010]作為本發(fā)明進(jìn)一步改進(jìn)，通過設(shè)置ID名稱的樣式值的字體大小來實現(xiàn)縮放圖標(biāo)的大小。
[0011]本發(fā)明還提供一種制作網(wǎng)頁圖標(biāo)的系統(tǒng)，其包括:轉(zhuǎn)化模塊，用于將圖標(biāo)轉(zhuǎn)化為字體格式；嵌入模塊，用于將轉(zhuǎn)化為字體格式的圖標(biāo)嵌入網(wǎng)頁的界面中。
[0012]作為本發(fā)明進(jìn)一步改進(jìn)，制作網(wǎng)頁圖標(biāo)的系統(tǒng)還包括:保存模塊，用于保存轉(zhuǎn)化為字體格式的圖標(biāo)于一文件夾中。
[0013]作為本發(fā)明進(jìn)一步改進(jìn)，制作網(wǎng)頁圖標(biāo)的系統(tǒng)還包括:命名模塊，為各轉(zhuǎn)化為字體格式的圖標(biāo)命名。
[0014]作為本發(fā)明進(jìn)一步改進(jìn)，制作網(wǎng)頁圖標(biāo)的系統(tǒng)還包括:設(shè)置模塊，設(shè)置在網(wǎng)頁的界面中需要顯示圖標(biāo)的位置的樣式值，在樣式值中用content屬性來對應(yīng)要顯示圖標(biāo)的名稱。
[0015]本發(fā)明將圖標(biāo)轉(zhuǎn)化成字體格式嵌入到網(wǎng)頁的界面中，可以減少網(wǎng)頁加載時http請求的次數(shù)，從而提升了網(wǎng)頁的界面加載速度。
【具體實施方式】
[0016]為了使本領(lǐng)域相關(guān)技術(shù)人員更好地理解本發(fā)明的技術(shù)方案，下面將結(jié)合本發(fā)明實施方式，對本發(fā)明實施方式中的技術(shù)方案進(jìn)行清楚、完整地描述，顯然，所描述的實施方式僅僅是本發(fā)明一部分實施方式，而不是全部的實施方式。
[0017]本發(fā)明提供一種制作網(wǎng)頁圖標(biāo)方法，將單獨的圖標(biāo)轉(zhuǎn)化成字體格式嵌入到網(wǎng)頁的界面中，從而可以減少http請求的次數(shù)，提升了網(wǎng)頁的加載速度。
[0018]在網(wǎng)頁的界面中，存在很多圖標(biāo)，本發(fā)明制作界面時，將各個圖標(biāo)轉(zhuǎn)化為字體格式在界面中顯示出來。
[0019]本發(fā)明具體的操作方法包括以下步驟:
[0020]將單獨的各個圖標(biāo)均轉(zhuǎn)化為字體格式，再創(chuàng)建一文件夾，將轉(zhuǎn)化為字體格式后的圖標(biāo)存放在該文件夾中。在本發(fā)明實施過程中，還將文件夾命名為*.ttf ;并且，還將存放在*.ttf文件夾中的各個圖標(biāo)--命名，比如:某個圖標(biāo)命名后的名稱為\e618。
[0021]當(dāng)將各個圖標(biāo)轉(zhuǎn)化為字體格式后，再將轉(zhuǎn)化為字體格式的圖標(biāo)嵌入網(wǎng)頁的界面中。具體的實現(xiàn)方式是:在網(wǎng)頁的界面中需要顯示圖標(biāo)的位置定義一個唯一的ID名稱，比如定義一個“headerPost”的ID名稱，再設(shè)置該ID名稱的樣式值，在“headerPost”的樣式值中用content屬性來對應(yīng)要顯示圖標(biāo)的名稱，S卩:content: “\e618”，這樣指定名稱為“\e618”的圖標(biāo)在ID名稱為“headerPost”的界面位置中顯示出來，即實現(xiàn)使圖標(biāo)嵌入網(wǎng)頁的界面中。
[0022]為了使圖標(biāo)需要放大或者縮小而又不影響圖片的顯示質(zhì)量，本發(fā)明通過設(shè)置ID名稱的樣式值的字體大小來實現(xiàn)縮放圖標(biāo)的大小，像設(shè)置字體大小一樣，無論怎樣縮放都不會影響圖片的顯示質(zhì)量。如果還要改變圖標(biāo)的圖像顏色，可以直接設(shè)置樣式值的顏色屬性值。
[0023]本發(fā)明還提供了一種制作網(wǎng)頁圖標(biāo)的系統(tǒng)，將單獨的圖標(biāo)轉(zhuǎn)化成字體格式嵌入到網(wǎng)頁的界面中。本發(fā)明制作網(wǎng)頁圖標(biāo)的系統(tǒng)包括轉(zhuǎn)化模塊、嵌入模塊、保存模塊、命名模塊和設(shè)置模塊。
[0024]轉(zhuǎn)化模塊用于將圖標(biāo)轉(zhuǎn)化為字體格式，然后通過嵌入模塊將轉(zhuǎn)化為字體格式的圖標(biāo)嵌入網(wǎng)頁的界面中。在本發(fā)明實施例中，在將圖標(biāo)轉(zhuǎn)化為字體格式后，還通過保存模塊將轉(zhuǎn)化為字體格式的圖標(biāo)保存于一 *.ttf文件夾中，再由命名模塊為各轉(zhuǎn)化為字體格式的圖標(biāo)一一命名。在將圖標(biāo)嵌入界面中時，通過設(shè)置模塊設(shè)置在網(wǎng)頁的界面中需要顯示圖標(biāo)的位置的樣式值，在樣式值中用content屬性來對應(yīng)要顯示圖標(biāo)的名稱，這樣指定圖標(biāo)在界面需要顯示的位置中顯示出來，即實現(xiàn)使圖標(biāo)嵌入網(wǎng)頁的界面中。
[0025]以上僅表達(dá)了本發(fā)明的一種實施方式，其描述較為具體和詳細(xì)，但并不能因此而理解為對本發(fā)明專利范圍的限制。應(yīng)當(dāng)指出的是，對于本領(lǐng)域的普通技術(shù)人員來說，在不脫離本發(fā)明構(gòu)思的前提下，還可以做出若干變形和改進(jìn)，這些都屬于本發(fā)明的保護(hù)范圍。因此，本發(fā)明專利的保護(hù)范圍應(yīng)以所附權(quán)利要求為準(zhǔn)。
【主權(quán)項】
1.一種制作網(wǎng)頁圖標(biāo)方法，其特征在于，包括以下步驟: 步驟1:將圖標(biāo)轉(zhuǎn)化為字體格式； 步驟2:將轉(zhuǎn)化為字體格式的圖標(biāo)嵌入網(wǎng)頁的界面中。2.根據(jù)權(quán)利要求1所述的制作網(wǎng)頁圖標(biāo)方法，其特征在于，還包括創(chuàng)建一文件夾的步驟；將圖標(biāo)轉(zhuǎn)化為字體格式后再存放在該文件夾中。3.根據(jù)權(quán)利要求2所述的制作網(wǎng)頁圖標(biāo)方法，其特征在于，將轉(zhuǎn)化后的圖標(biāo)均命名。4.根據(jù)權(quán)利要求3所述的制作網(wǎng)頁圖標(biāo)方法，其特征在于，在網(wǎng)頁的界面中需要顯示圖標(biāo)的位置定義一個唯一的ID名稱，再設(shè)置該ID名稱的樣式值，在樣式值中用content屬性來對應(yīng)要顯示圖標(biāo)的名稱，從而使圖標(biāo)嵌入網(wǎng)頁的界面中。5.根據(jù)權(quán)利要求4所述的制作網(wǎng)頁圖標(biāo)方法，其特征在于，通過設(shè)置ID名稱的樣式值的字體大小來實現(xiàn)縮放圖標(biāo)的大小。6.一種制作網(wǎng)頁圖標(biāo)的系統(tǒng)，其特征在于，包括: 轉(zhuǎn)化模塊，用于將圖標(biāo)轉(zhuǎn)化為字體格式； 嵌入模塊，用于將轉(zhuǎn)化為字體格式的圖標(biāo)嵌入網(wǎng)頁的界面中。7.根據(jù)權(quán)利要求6所述的制作網(wǎng)頁圖標(biāo)的系統(tǒng)，其特征在于，還包括: 保存模塊，用于保存轉(zhuǎn)化為字體格式的圖標(biāo)于一文件夾中。8.根據(jù)權(quán)利要求7所述的制作網(wǎng)頁圖標(biāo)的系統(tǒng)，其特征在于，還包括: 命名模塊，為各轉(zhuǎn)化為字體格式的圖標(biāo)命名。9.根據(jù)權(quán)利要求8所述的制作網(wǎng)頁圖標(biāo)的系統(tǒng)，其特征在于，還包括: 設(shè)置模塊，設(shè)置在網(wǎng)頁的界面中需要顯示圖標(biāo)的位置的樣式值，在樣式值中用content屬性來對應(yīng)要顯示圖標(biāo)的名稱。
【專利摘要】本發(fā)明提出了一種制作網(wǎng)頁圖標(biāo)方法及其系統(tǒng)，本發(fā)明將圖標(biāo)轉(zhuǎn)化為字體格式；再將轉(zhuǎn)化為字體格式的圖標(biāo)嵌入網(wǎng)頁的界面中。本發(fā)明將圖標(biāo)轉(zhuǎn)化成字體格式嵌入到網(wǎng)頁的界面中，可以減少網(wǎng)頁加載時http請求的次數(shù)，從而提升了網(wǎng)頁的界面加載速度。
【IPC分類】G06F9/44
【公開號】CN104915207
【申請?zhí)枴緾N201510328892
【發(fā)明人】唐芬芬
【申請人】上海斐訊數(shù)據(jù)通信技術(shù)有限公司
【公開日】2015年9月16日
【申請日】2015年6月15日