專利名稱：一種頁面布局的方法和裝置的制作方法
技術領域：
本發明涉及互聯網網頁設計領域，尤其涉及一種頁面布局的方法和裝置。
背景技術：
柵格結構是最簡單最直接的空間數據結構，是指將地球表面劃分為大小均勻緊密相鄰的柵格陣列，每個柵格作為一個像元或像素由行、列定義，并包含一個代碼表示該像素的屬性類型或量值，或僅僅包括指向其屬性記錄的指針，因此，柵格結構是以規則的陣列來表示空間或現象分布的數據組織，組織中的每個數據表示地物或現象的非幾何屬性特征。
柵格具有以下特點屬性明顯，即數據直接記錄屬性本身，柵格單元的屬性可以由網頁中某種元素的尺寸，例如圖片的大小，標題的高度等來表示；定位隱含，柵格單元所在的位置是根據行列號轉換為相應的坐標，即定位是根據數據在數據集中的位置得到的。在柵格結構中，點用一個柵格單元表示；線狀地物用沿線走向的一組相鄰柵格單元表示，每個柵格單元最多只有兩個相鄰單元在線上；面或區域用記有區域屬性的相鄰柵格單元的集合表示，每個柵格單元可有多于兩個的相鄰單元同屬一個區域。因此，柵格可以作為可視化空間、比例和距離的輔助對象，例如用于字體設計；可以作為在場景中創建和對齊對象的構造平面，例如用于雜志版式設計、網頁版面設計等；也可以作為使用捕捉功能對齊對象的參考系統。
在實現本發明的過程中，發明人發現現有技術至少存在以下問題現有技術中，網頁版面的設計通常是通過設計者的經驗以及業內的通則來設計的，從而導致一個網站中每個頁面的區塊的尺寸都是不規則的，從而使可復用的模塊或信息內容不能直接應用到別的頁面上，增加了設計成本，也加大了設計者的工作量。
發明內容
本發明提供了一種頁面布局的方法和裝置，以實現基于柵格頁面的網頁設計更加合理，布局更加規范，讓整個網站看起來更加統一，減少設計者的工作量。
為了達到上述目的，本發明一方面提供一種頁面布局的方法，包括 設置由柵格單元組成的柵格頁面； 將所述柵格頁面按照網頁內容進行柵格區域劃分； 應用所述劃分的柵格區域進行頁面布局。
其中，所述設置由柵格單元組成的柵格頁面包括 已知柵格單元的寬度和所述柵格單元與所述柵格單元之間間隙的寬度； 所述柵格單元的寬度與所述間隙的寬度之和為一個最小柵格單元的寬度，根據所述最小柵格單元與所述間隙的寬度，確定網頁頁面的寬度或高度。
其中，所述設置由柵格單元組成的柵格頁面具體為 W＝A*n-i； 其中A＝a+i，a為柵格單元的寬度； i為所述柵格單元與柵格單元之間間隙的寬度； A為最小柵格單元的寬度； n為所述最小柵格單元的個數，n為正整數； W為所述網頁頁面的寬度或高度。
其中，所述設置由柵格單元組成的柵格頁面還包括 已知網頁頁面的寬度或高度和所述柵格單元與所述柵格單元之間間隙的寬度； 根據所述頁面的寬度或高度與所述間隙的寬度，確定柵格單元的寬度，進而確定最小柵格單元的寬度。
其中，所述設置由柵格單元組成的柵格頁面具體表示為 A＝(W+i)/n； 其中W為所述網頁頁面的寬度或高度； a為柵格單元的寬度； i為所述柵格單元與柵格單元之間間隙的寬度； n為所述最小柵格單元的個數，n為正整數； A＝a+i，為最小柵格單元的寬度。
其中，將所述柵格頁面按照網頁內容進行柵格區域劃分包括 將整數倍個數的最小柵格單元分配給不同的區域。
另一方面，本發明還提供一種頁面布局的裝置，包括 設置模塊，用于設置由柵格單元組成的柵格頁面； 區域劃分模塊，用于將所述設置模塊設置的由柵格單元組成的柵格頁面按照網頁內容進行區域劃分； 應用模塊，用于將所述區域劃分模塊劃分的柵格區域進行頁面布局。
其中，所述設置模塊進一步包括 第一設置子模塊，用于設置已知所述柵格單元的寬度和所述柵格單元與所述柵格單元之間間隙的寬度； 所述柵格單元的寬度與所述間隙的寬度之和為一個最小柵格單元，根據所述最小柵格單元與所述間隙的寬度，確定網頁頁面的寬度或高度； 另外，所述設置模塊還進一步包括 第二設置子模塊，用于設置已知所述網頁頁面的寬度或高度和所述柵格單元與所述柵格單元之間間隙的寬度； 根據所述頁面的寬度或高度與所述間隙的寬度，確定所述柵格單元的寬度，進而確定最小柵格單元的寬度。
與現有技術相比，本發明具有以下優點 通過運用本發明，將柵格單元應用于多維的網頁頁面設計中，對于網頁設計者來說，柵格單元的應用不僅可以讓網頁的信息呈現得更加美觀易讀，統一頁面布局，相同信息內容的布局更具有可復用性，并且，對于前端的軟件開發者來說，應用由柵格單元組成的柵格頁面，使得頁面的設計更加規范、靈活。
為了更清楚地說明本發明實施例或現有技術中的技術方案，下面將對實施例或現有技術描述中所需要使用的附圖作一簡單地介紹，顯而易見地，下面描述中的附圖僅僅是本發明的一些實施例，對于本領域普通技術人員來講，在不付出創造性勞動性的前提下，還可以根據這些附圖獲得其他的附圖。
圖1為本發明頁面布局的方法的流程圖； 圖2為柵格單元排列布局示意圖； 圖3為本發明由柵格單元組成的柵格頁面結構示意圖； 圖4為本發明柵格頁面具體結構的示意圖； 圖5為本發明柵格頁面具體結構的另一示意圖； 圖6為本發明頁面布局的操作示意圖； 圖7為本發明頁面布局的結構示意圖； 圖8為本發明頁面布局的最終結構示意圖； 圖9為本發明頁面布局的裝置的結構示意圖。
具體實施例方式 為了使本發明的目的、技術方案及優點更加清楚明白，以下結合附圖及實施方式，對本發明進行進一步詳細說明。應當理解，此處所描述的具體實施方式
僅僅用以解釋本發明，并不用于限定本發明。
如圖1所示，為本發明頁面布局的方法的流程圖，具體包括以下幾個步驟 步驟S101，設置由柵格單元組成的柵格頁面。
柵格的設置根據設計師具體的工作環境以及使用的工具而定，設計師可以根據具體的工作環境采用適當的軟件和工具把格子“畫”出來。如，網頁設計師會在photoshop之類的圖形設計軟件中，利用參考線或者在“畫布”中事先畫出這樣的格子，柵格單元按指定的行間距和列間距進行排列，如圖2所示，就像在屏幕上鋪了一張坐標紙，因此可方便設計師的繪圖過程，輔助設計師進行網頁的內容規劃和視覺設計。
如果已知柵格單元的寬度和柵格單元與柵格單元之間間隙的寬度，在本發明中，將柵格單元的寬度與間隙的寬度之和稱為一個最小柵格單元的寬度，則可以根據已知的最小柵格單元與間隙的寬度，確定網頁頁面的寬度或高度。
如圖3所示，為本發明由柵格單元組成的柵格頁面結構示意圖。如圖所示，設置柵格單元的寬度為a，柵格單元與柵格單元之間間隙的寬度設置為i，將最小柵格單元寬度設置為A，其中A＝a+i，設置網頁頁面的寬度或高度為W，此時，柵格頁面可以用公式表示為。
W＝(a*n)+(n-1)*i (1) 由于A＝a+i，將A代入上述公式(1)中，可得 W＝(A*n)-i(2) 式中: A最小柵格單元的寬度； a柵格單元的寬度； i柵格單元與柵格單元之間間隙的寬度； n最小柵格單元的個數，n為正整數，取值1、2、3、4......； W頁面的寬度或高度。
在實際應用中，網頁設計者在建立柵格頁面時，根據公式(2)的表述，首先設定A與i的值，A為最小柵格單位的寬度，單位選取可以為網頁中某種元素的尺寸，比如圖片的大小，標題的高度等，例如可以預先設定最小柵格單元的寬度為80px，則A的值為80px，然后，預設i的取值，對于i的取值，設計者可以根據自身的設計經驗或是借鑒其他網站的數據任意取值，一般i的值取為最小柵格單元A的約數，即能被最小柵格單位A整除的整數。在本發明中，假設i的取值為5px，而由于A＝a+i，即可得到柵格單元a的值為75px。
將A＝80，i＝5這兩個數值代入公式(2)中可得 W＝(80*n)-5(3) 上述得到的公式(3)即為本次網頁設計的柵格頁面。
根據公式(3)，頁面的寬度或高度W的數值，取決于最小柵格單元總數n的值，其中，n為正整數，n的取值為1、2、...，n取不同的值，對應W會得到不同的取值，表1為n與W(寬度)之間的關系，表2為n與W(高度)之間的關系。
表1 表2 設計者根據屏幕的不同分辨率(例如1024*768px、800*600px)，取不同的n值。當屏幕的分辨率為800*600px，此時頁面可進行設計的寬度W的最大取值約為780px(去除瀏覽器的一些邊框以及下拉框)，而n能取到的最大正整數值為9，當n＝9時，W(寬度)＝715px。頁面可進行設計的高度W的最大取值約為550px(去除瀏覽器的頭部以及系統欄等高度)，而n能取到的最大正整數為6，當n＝6時，W(高度)＝475px。基于上述W與n的取值，柵格頁面具體結構的示意圖如圖4所示。
繼續參考圖3，如果已知網頁頁面的寬度或高度和柵格單元與柵格單元之間間隙的寬度，則可以根據已知的頁面的寬度或高度與柵格單元之間間隙的寬度，確定最小柵格單元的寬度，從而建立一個柵格頁面。
設置網頁頁面的寬度為W，柵格單元與柵格單元之間的間隙的寬度為i，此時，柵格頁面可以用公式表示為 A＝(W+i)/n， 公式(4) W頁面的寬度或高度； i柵格單元與柵格單元之間間隙的寬度； a柵格單元的寬度； A最小柵格單元的寬度，A＝a+i； n最小柵格單元的個數，n為正整數，取值1、2、3、4......。
將W+i的值平均分成若干份，每份的寬度即為最小柵格單元，當設定屏幕的分辨率為800*600px時，此時，去除瀏覽器的一些邊框以及下拉框頁面的寬度，可進行設計的頁面寬度W的最大取值約為780px，去除瀏覽器的頭部以及系統欄等高度，可進行設計的頁面高度W可取到的最大值為550px，由于i為柵格單元之間間隙的寬度，因此，i的取值不應太大，在本發明中，取i＝5，若已知頁面的寬度為635px，由公式(4)可知，A＝(635+5)/n，n的不同取值，決定A的不同取值。n一般選取為偶數，并且能被若干個質數整除的數。例如n取值為8，或取值為16，將n＝8代入公式A＝(W+i)/n中，可得A＝80，此時，也可得到(80*n)-5＝W公式(3)的表述，根據上述數值，也可得到如圖4的柵格頁面。
步驟S102，將柵格頁面按照網頁內容進行柵格區域劃分。
如圖5所示，為本發明柵格頁面具體結構的另一示意圖。在建立好的柵格頁面中，根據預先設定的網頁內容，將柵格頁面進行區域劃分，不同的網頁內容分配不同數量的最小柵格單元。將整數倍個數的最小柵格單元分配給不同的區域。網頁內容可以包括網頁LOGO、廣告、網頁內容文本、導航菜單、網址鏈接、圖片等，不同的網頁內容分配不同大小的柵格區域。例如，頁面的最上方包含網頁LOGO和頁面頭部區域內容，并且網頁LOGO與頁面頭部區內容屬于同行，可以橫向分配網頁LOGO2個最小柵格單元，縱向分配網頁LOGO2個最小柵格單元，即橫向或縱向n的值取都為2，將n＝2代入公式中，可得網頁的橫向寬度和縱向高度W＝80*2-5＝155。即網頁LOGO的寬度和高度均為155px，在縱向n＝9的柵格頁面中，減掉網頁LOGO占據的2個最小柵格單元，其他7個最小柵格單元分配給頁面頭部區，頁面頭部區的寬度W＝80*7-5＝555px；由于頁面頭部區與網頁LOGO位于同行，因此，頁面頭部區的高度與網頁LOGO的高度相同，也為155px。假設頁面中部的網頁內容為導航菜單、網絡文本內容和廣告，那么可以將頁面中的柵格頁面劃分為導航菜單區、內容區和廣告區。設置導航菜單區、內容區和廣告區位于同行，高度為占據3個最小柵格單元，那么三個不同的網頁內容區的高度W均為W＝80*3-5＝235。按照實際情況的需要，可以縱向劃分2個最小柵格單元分配給導航菜單區，導航菜單區的寬度為W＝80*2-5＝155；劃分4個最小柵格單元分配給內容區，內容區寬度為W＝80*4-5＝315；劃分2個最小柵格單元分配給廣告區，廣告區的寬度W＝80*2-5＝155。設置頁面的最底層為頁面底部區，可以將9個最小柵格單元全部分配給頁面底部區，頁面底部區的寬度為W＝80*9-5＝715。
在本發明中，不同的網頁內容分配不同大小的柵格區域，在柵格頁面中，具體的柵格區域的劃分，由實際情況決定，已劃分好的柵格區域具有規范性。
步驟S103，應用劃分的柵格區域進行頁面布局。在劃分好的柵格區域中，將不同的網頁內容添加到不同的區域中，進而對各個區域中的網頁內容進行視覺上的布局和設計。
設計師在設計網頁時，在設計的區域產生一層輔助的柵格，如圖6所示的柵格層，這些輔助的柵格用以規范和引導設計師進行網頁的內容規劃和視覺設計。設計師將不同的網頁內容以柵格為參照分配到網頁不同的設計區域中，規范不同的網頁內容在頁面中的布局，如圖7所示。
柵格作為設計師輔助的設計框架存在，其實它是一個實際存在但沒有任何表現形式的輔助格子系統。當設計師參照柵格層完成網頁的內容規劃和視覺設計以后，移去柵格層即可，最終形成一個完整的網頁，如圖8所示。
通過運用本發明，網頁的布局設計完全是規范的、可重用的，設計者在設計多個網頁時，當多個網絡頁面出現多個相同的網頁內容(例如廣告)時，設計者不需要為每個頁面設計不同尺寸的廣告圖，只需要將廣告添加到相應的廣告柵格區域即可，從而降低了設計成本，減輕了工作人員的工作量。
如圖9所示，為本發明頁面布局的裝置的結構示意圖，具體包括 設置模塊91，用于設置由柵格單元組成的柵格頁面； 區域劃分模塊92，用于將設置模塊91設置的由柵格單元組成的柵格頁面按照網頁內容進行區域劃分； 應用模塊93，用于將區域劃分模塊92劃分的柵格區域進行頁面布局。
其中，設置模塊91還可以包括 第一設置子模塊911，用于設置已知所述柵格單元的寬度和所述柵格單元與所述柵格單元之間間隙的寬度； 所述柵格單元的寬度與所述間隙的寬度之和為一個最小柵格單元的寬度，根據所述最小柵格單元與所述間隙的寬度，確定網頁頁面的寬度或高度。
第二設置子模塊912，用于設置已知所述網頁頁面的寬度或高度和所述柵格單元與所述柵格單元之間間隙的寬度； 根據所述頁面的寬度或高度與所述間隙的寬度，確定所述柵格單元的寬度，進而確定最小柵格單元的寬度。
通過本發明實施例，設計者可以應用由柵格單元組成的柵格頁面進行網頁設計，使得頁面設計更加合理、靈活，布局更加規范，讓整個網站看起來更加統一，減少了設計者的工作量。
本領域技術人員可以理解附圖只是一個優選實施例的示意圖，附圖中的模塊或流程并不一定是實施本發明所必須的。
本領域技術人員可以理解實施例中的裝置中的模塊可以按照實施例描述進行分布于實施例的裝置中，也可以進行相應變化位于不同于本實施例的一個或多個裝置中。上述實施例的模塊可以合并為一個模塊，也可以進一步拆分成多個子模塊。
上述本發明實施例序號僅僅為了描述，不代表實施例的優劣。
通過以上的實施方式的描述，本領域的技術人員可以清楚地了解到本發明可以通過硬件實現，也可以借助軟件加必要的通用硬件平臺的方式來實現基于這樣的理解，本發明的技術方案可以以軟件產品的形式體現出來，該軟件產品可以存儲在一個非易失性存儲介質(可以是CD-ROM，U盤，移動硬盤等)中，包括若干指令用以使得一臺計算機設備(可以是個人計算機，服務器，或者網絡設備等)執行本發明各個實施例所述的方法。
以上所述僅是本發明的優選實施方式，應當指出，對于本技術領域的普通技術人員來說，在不脫離本發明原理的前提下，還可以做出若干改進和潤飾，這些改進和潤飾也應視為本發明的保護范圍。
權利要求
1、一種頁面布局的方法，其特征在于，包括
設置由柵格單元組成的柵格頁面；
將所述柵格頁面按照網頁內容進行柵格區域劃分；
應用所述劃分的柵格區域進行頁面布局。
2、如權利要求1所述頁面布局的方法，其特征在于，所述設置由柵格單元組成的柵格頁面包括
設置柵格單元的寬度和所述柵格單元與所述柵格單元之間間隙的寬度；
所述柵格單元的寬度與所述間隙的寬度之和為一個最小柵格單元的寬度，根據所述最小柵格單元與所述間隙的寬度，確定網頁頁面的寬度或高度。
3、如權利要求2所述頁面布局的方法，其特征在于，所述設置由柵格單元組成的柵格頁面具體為
W＝A*n-i；
其中A＝a+i，a為柵格單元的寬度；
i為所述柵格單元與柵格單元之間間隙的寬度；
A為最小柵格單元的寬度；
n為所述最小柵格單元的個數，n為正整數；
W為所述網頁頁面的寬度或高度。
4、如權利要求1所述頁面布局的方法，其特征在于，所述設置由柵格單元組成的柵格頁面還包括
設置網頁頁面的寬度或高度和所述柵格單元與所述柵格單元之間間隙的寬度；
根據所述頁面的寬度或高度與所述間隙的寬度，確定最小柵格單元的寬度，進而確定柵格單元的寬度。
5、如權利要求4所述頁面布局的方法，其特征在于，所述設置由柵格單元組成的柵格頁面具體表示為
A＝(W+i)/n；
其中W為所述網頁頁面的寬度或高度；
a為柵格單元的寬度；
i為所述柵格單元與柵格單元之間間隙的寬度；
n為所述最小柵格單元的個數，n為正整數；
A＝a+i，為最小柵格單元的寬度。
6、如權利要求1所述頁面布局的方法，其特征在于，將所述柵格頁面按照網頁內容進行柵格區域劃分包括
將整數倍個數的最小柵格單元分配給不同的區域。
7、一種頁面布局的裝置，其特征在于，包括
設置模塊，用于設置由柵格單元組成的柵格頁面；
區域劃分模塊，用于將所述設置模塊設置的由柵格單元組成的柵格頁面按照網頁內容進行區域劃分；
應用模塊，用于將所述區域劃分模塊劃分的柵格區域進行頁面布局。
8、如權利要求7所述頁面布局的裝置，其特征在于，所述設置模塊進一步包括
第一設置子模塊，用于設置已知所述柵格單元的寬度和所述柵格單元與所述柵格單元之間間隙的寬度；
所述柵格單元的寬度與所述間隙的寬度之和為一個最小柵格單元，根據所述最小柵格單元與所述間隙的寬度，確定網頁頁面的寬度或高度；
9、如權利要求8所述頁面布局的裝置，其特征在于，所述設置模塊還進一步包括
第二設置子模塊，用于設置已知所述網頁頁面的寬度或高度和所述柵格單元與所述柵格單元之間間隙的寬度；
根據所述網頁頁面的寬度或高度與所述間隙的寬度，確定所述柵格單元的寬度，進而確定最小柵格單元的寬度。
全文摘要
本發明公開了一種頁面布局的方法和裝置，該頁面布局的方法包括設置由柵格單元組成的柵格頁面；將所述柵格頁面按照網頁內容進行柵格區域劃分；應用所述劃分的柵格區域進行頁面布局。通過運用本發明，采用柵格單元的網頁設計更加合理，布局更加規范，讓整個網站看起來更加統一，減少了設計者的工作量。
文檔編號G06F17/30GK101388037SQ20081017196
公開日2009年3月18日 申請日期2008年10月27日 優先權日2008年10月27日
發明者光 楊 申請人:阿里巴巴集團控股有限公司