網頁背景圖像生成方法和系統的制作方法
【技術領域】
[0001]本發明涉及計算機技術領域，特別是涉及一種網頁背景圖像生成方法和系統。
【背景技術】
[0002]在網頁背景圖像制作中，一般自適應模塊功能的實現方法是把設計好的內容樣式模塊，按照井字的形狀切割成9張圖片，再通過編寫CSS (層疊樣式表，一種用來表現HTML或XML等文件樣式的計算機語言)代碼，把它們組成一個可以自適應寬高的模塊，目的是為了將上下左右四個方向中間的內容，能夠通過CSS的背景屬性來實現內容樣式模塊的自適應內容寬高，當要加載這個背景圖像時，在網頁所顯示的圖片都是需要通過網絡連接來請求，單獨每一張圖片是一個請求，因此要加載這些圖片，需要請求的數量一般為9次，這就導致了圖片傳輸速度慢，頁面加載速度慢。
[0003]為了減少請求數量，還有方法是按照三字的形狀將背景圖像分別切割成上中下3張單獨圖片，這樣請求圖片的數量一般為3次，雖然減少了請求數量，但內容模塊不夠靈活缺，無法自適應內容的寬度，擴展性差。
[0004]綜上所述，現有的網頁背景圖像制作方案，一般都是以增加請求圖片的數量保證自適應模塊功能，以降低自適應模塊功能來減少請求圖片的數量，難以在保證內容模塊自適應功能情況下降低加載圖片請求的數量。
【發明內容】
[0005]基于此，有必要針對上述問題，提供一種在保證內容模塊自適應功能的同時也能有效降低加載圖片請求的數量的網頁背景圖像生成方法和系統。
[0006]一種網頁背景圖像生成方法，包括如下步驟:
[0007]根據自適應模塊的樣式內容將原始背景圖像進行切割，并將切割后得到的各個圖片按照十字型方式進行排版；
[0008]將排版后獲得的組合背景圖像應用到兩個HTML標簽中，并將兩個HTML標簽中的背景圖像進行錯位排列；
[0009]根據自適應寬度或高度分別對兩個所述HTML標簽中的背景圖像進行重復延伸；
[0010]將兩個所述HTML標簽進行疊加獲得網頁背景圖像。
[0011]—種網頁背景圖像生成系統，包括:
[0012]排版模塊，用于根據自適應模塊的樣式內容將原始背景圖像進行切割，并將切割后得到的各個圖片按照十字型方式進行排版；
[0013]錯位模塊，用于將排版后獲得的組合背景圖像應用到兩個HTML標簽中，并將兩個HTML標簽中的背景圖像進行錯位排列；
[0014]重復模塊，用于根據自適應寬度或高度分別對兩個所述HTML標簽中的背景圖像進行重復延伸；
[0015]疊加模塊，用于將兩個所述HTML標簽進行疊加獲得網頁背景圖像。
[0016]上述網頁背景圖像生成方法和系統，對背景圖像切割后以十字型方式進行排版；通過兩個HTML標簽作為背景圖像載體，將錯位排列背景圖像進行重復延伸后疊加獲得網頁背景圖像，通過背景圖像錯位排列和雙HTML標簽疊加方式，實現了以最少的圖像請求數量得到網頁的背景圖像，同時保留了背景圖像自適應模塊的靈活性，提高了頁面加載速度。
【附圖說明】
[0017]圖1為本發明實施例網頁背景圖像生成方法應用系統結構示意圖；
[0018]圖2為一個實施例的網頁背景圖像生成方法流程圖；
[0019]圖3為一個實施例的背景圖像示意圖；
[0020]圖4為十字方式排版的背景圖像示意圖；
[0021 ]圖5為兩個HTML標簽的不意圖；
[0022]圖6為兩個HTML標簽錯位排列的7K意圖；
[0023]圖7為圖6所的兩個HTML標簽置加后得到的背景圖像部分7K意圖；
[0024]圖8為疊加得到的背景圖像效果圖；
[0025]圖9為一個實施例的網頁背景圖像生成系統結構示意圖；
[0026]圖10為另一個實施例的網頁背景圖像生成系統結構示意圖；
[0027]圖11為能實現本發明實施例的一個計算機系統的模塊圖。
【具體實施方式】
[0028]為了使本發明的目的、技術方案及優點更加清楚明白，以下結合附圖及實施例，對本發明進行進一步詳細說明。應當理解，此處所描述的具體實施例僅僅用以解釋本發明，并不用于限定本發明。
[0029]本發明實施例所提供的網頁背景圖像生成方法可應用于如圖1所示的系統中，請參考圖1所示，終端設備02可以是諸如個人電腦、智能手機、平板電腦、個人數字助理等設備，但并不局限于此。終端設備02可以通過有線或無線方式等方式接入公共網絡，如Internet網等，與服務器04進行通信。終端設備02上可運行瀏覽器等網頁訪問工具，用戶利用瀏覽器等可以通過internet網絡訪問服務器04，并獲取所需的背景圖像數據；終端設備02的瀏覽器加載到背景圖像數據后，經過相應處理后最終顯示為用戶所需的網頁。
[0030]所述終端設備02可以是指一個設備也可以是指多個設備；服務器04是指實現各種后臺功能的服務器設備，可以是指一個設備也可以是指多個設備，在本申請中，更多的是指多個設備。
[0031]參見圖2所示，圖2為一個實施例的網頁背景圖像生成方法流程圖，包括如下步驟:
[0032]步驟S10，根據自適應模塊的樣式內容將原始背景圖像進行切割，并將切割后得到的各個圖片按照十字型方式進行排版。
[0033]在此步驟中，為實現自適應模塊功能，首先對背景圖像進行圖像切割處理，然后以十字型方式進行排版，以確保排版后的圖像中需要重復的邊緣圖片在同一個方向上的180°范圍內沒有任何遮擋的圖像，使得對圖像進行重復延伸時不會遇到沖突的圖像。
[0034]在一個實施例中，步驟S10的處理過程，具體可以包括如下:
[0035](1)根據自適應內容樣式模塊將原始背景圖像按照井字形劃分為9張圖片；其中，圖像頂部和底部的高度和值為圖像高度的二分之一，圖像左部和右部的寬度和值為圖像寬度的二分之一。
[0036]參考圖3，圖3為一個實施例的背景圖像示意圖，將背景圖像按照井字形劃分為9張圖片，每張圖片對應自適應的模塊，分別為:mdl_t_c, mdl_b_c, mdl_c_r, mdl_c_l, mdl_t_l, mdl_b_l, mdl_t_r, mdl_b_r,中心圖像(空白)部分。其中，mdl = module (模塊)，t = top (頂部邊緣)，c = content (內容)，b = bottom(底部邊緣)，r = right (右側邊緣)，1 = left(左側邊緣)，中心圖像屬于純色的部分，這里劃分有個要求，就是La+Lc =Lb，Ha+Hc = Hb。
[0037](2)通過CSS工具將9張圖片按照十字型方式進行排版并組合在一起；其中，左上、右上、左下、右下部分的圖片排列到圖像的中心區域。
[0038]參考圖4所示，圖4為十字方式排版的背景圖像示意圖，利用CSS sprites圖像排版，將mdl_t_l, mdl_b_l, mdl_t_r, mdl_b_r部分的圖像組合在背景圖像的中心圖像上，在此可以定義為Sprites圖像錯位排列。可以看出，排版后的背景圖像，每個需要重復的邊緣圖片mdl_t_c, mdl_b_c, mdl_c_r, mdl_c_l在同一個方向上180°范圍內沒有任何遮擋的圖像，從而可以方便使用 CSS 屬性 background-1mage:repeat_x ;或 background-1mage:repeat-y進行縱向或橫向上的重復；重復過程中就不會遇到沖突的圖像；而原來四個角的圖片mdl_b_l, mdl_t_r, mdl_b_r切割后放到中間屬于純色的部分,不影響這部分圖像的元素，同時四個角的圖像可以在圖像重復后用于后續調用，在自適應調整中恢復出四個角的圖像。
[0039]步驟S20，將排版后獲得的組合背景圖像應用到兩個HTML (HyperText Markuplanguage，超級文本標記語言)標簽中，并將兩個HTML標簽中的背景圖像進行錯位排列。
[0040]在此步驟中，利用兩個HTML標簽作為背景圖像的載體并進行錯位排列，作為一個實施例，步驟S20可以具體包括如下:
[0041]首先創建兩個HTML標簽作為背景圖像的載體；參考圖5所示，兩個標簽分別為標簽1、標簽2，可以將背景圖像的模塊應用到標簽1、標簽2中，例如，將mdl_t_c部分的圖片分別應用到標簽1、標簽2中，可以實現頂部邊緣的錯位排列。
[0042]然后通過CSS工具將排版后的組合背景圖