專利名稱：：一種基于網(wǎng)絡(luò)腳本語言的頁面布局方法
技術(shù)領(lǐng)域：
：本發(fā)明屬于計(jì)算機(jī)、通信領(lǐng)域，具體涉及一種基于網(wǎng)絡(luò)腳本語言的頁面布局方法。
背景技術(shù)：
：近年來，隨著網(wǎng)絡(luò)技術(shù)不斷發(fā)展，尤其是基于Web的信息發(fā)布和檢索技術(shù)、Java計(jì)算技術(shù)以及網(wǎng)絡(luò)分布式對(duì)象技術(shù)的飛速發(fā)展，導(dǎo)致了很多應(yīng)用系統(tǒng)的體系結(jié)構(gòu)從C/S結(jié)構(gòu)(Client/Server的簡稱，客戶機(jī)/服務(wù)器模式)向更加靈活的多級(jí)分布結(jié)構(gòu)演變，使得軟件系統(tǒng)的網(wǎng)絡(luò)體系結(jié)構(gòu)跨入一個(gè)新階段，即B/S體系結(jié)構(gòu)(Browser/Server的簡稱，瀏覽器/服務(wù)器模式)。這樣客戶任何時(shí)間、任何地點(diǎn)、任何系統(tǒng)，只要可以使用瀏覽器上網(wǎng)，就可以使用B/S系統(tǒng)的終端。早期的網(wǎng)頁布局技術(shù)主要使用Table方式，存在如下問題1).把格式數(shù)據(jù)混入內(nèi)容中。2).這使得文件的大小無謂地變大。3).重新設(shè)計(jì)現(xiàn)有頁面的布局極為消耗勞力，且昂貴。4).當(dāng)顯示屏分辨率變化時(shí)，影響頁面的布局效果。5).設(shè)計(jì)非常規(guī)布局比常規(guī)布局(如T型布局、口型布局、三型布局等)要困難的多。目前比較流行的DIV+CSS抽象設(shè)計(jì)，一定程序的解決了上述問題，但是仍然存在以下一些問題1).當(dāng)顯示屏分辨率變化時(shí)，影響頁面的布局效果。2).設(shè)計(jì)非常規(guī)布局比常規(guī)布局(如T型布局、口型布局、三型布局等)要困難的多。3).重新更換現(xiàn)有的頁面布局，需要對(duì)CSS文件做較大的修改和計(jì)算，尤其是采用絕對(duì)定位方式。
發(fā)明內(nèi)容本發(fā)明目的在于克服上述方法的不足，提出一種基于網(wǎng)絡(luò)腳本語言的頁面布局方法，通過引入?yún)⒄瘴锖途W(wǎng)絡(luò)腳本語言實(shí)現(xiàn)頁面的靈活布局，并可自適應(yīng)不同分辨率的屏幕，尤其是重新設(shè)計(jì)布局時(shí)，修改更加簡單。本發(fā)明的技術(shù)方案是一種基于網(wǎng)絡(luò)腳本語言的頁面布局方法，其特征在于頁面布局引入?yún)⒄瘴锖途W(wǎng)絡(luò)腳本語言進(jìn)行布局；參照物是頁面組件，或是非頁面組件，比如瀏覽區(qū)中心點(diǎn)、瀏覽區(qū)左上角等；頁面組件由頁面語言標(biāo)識(shí)，比如在HTML3.2中，可以使用div進(jìn)行標(biāo)識(shí)；頁面組件的樣式由頁面樣式語言標(biāo)識(shí)，比如在HTML語言中，使用CSS進(jìn)行標(biāo)識(shí)；頁面非參照物組件根據(jù)瀏覽區(qū)尺寸和布局規(guī)則計(jì)算出各自的實(shí)際布局位置，并做出相應(yīng)調(diào)整；頁面非參照物組件位置調(diào)整使用網(wǎng)絡(luò)腳本語言實(shí)現(xiàn)。如上所述的基于網(wǎng)絡(luò)腳本語言的頁面布局方法，其特征在于頁面布局時(shí)需要選定1個(gè)或者多個(gè)參照物。如上所述的基于網(wǎng)絡(luò)腳本語言的頁面布局方法，其特征在于頁面中參照物組件是顯示出來的，或者隱藏。如上所述的基于網(wǎng)絡(luò)腳本語言的頁面布局方法，其特征在于頁面中參照物組件的位置是絕對(duì)位置，或者是相對(duì)位置。如上所述的基于網(wǎng)絡(luò)腳本語言的頁面布局方法，其特征在于布局規(guī)則根據(jù)頁面布局需要進(jìn)行設(shè)計(jì)，不是一成不變的，比如按圓分布、按扇形分布、按正八邊形分布等。如上所述的基于網(wǎng)絡(luò)腳本語言的頁面布局方法，其特征在于根據(jù)布局規(guī)則在頁面中增加繪制一些輔助標(biāo)識(shí)以標(biāo)識(shí)關(guān)聯(lián)關(guān)系，比如在組件間繪制連線，輔助標(biāo)識(shí)的繪制使用網(wǎng)絡(luò)腳本語言實(shí)現(xiàn)；通過網(wǎng)絡(luò)腳本語言標(biāo)識(shí)出關(guān)聯(lián)關(guān)系時(shí)，采用調(diào)整后的組件位置信息。如上所述的基于網(wǎng)絡(luò)腳本語言的頁面布局方法，其特征在于頁面非參照物組件調(diào)整自己的實(shí)際布局位置是自動(dòng)完成方式，或是響應(yīng)用戶操作方式，比如鼠標(biāo)單擊等。如上所述的基于網(wǎng)絡(luò)腳本語言的頁面布局方法，其特征在于頁面非參照物組件調(diào)整自己的實(shí)際布局位置采用自動(dòng)完成方式時(shí)，調(diào)整過程應(yīng)在瀏覽區(qū)顯示頁面之前。如上所述的基于網(wǎng)絡(luò)腳本語言的頁面布局方法，其特征在于網(wǎng)頁組件自動(dòng)布局的流程如下1).瀏覽器根據(jù)輸入的頁面URL開始裝載頁面；2).使用網(wǎng)絡(luò)腳本語言獲取瀏覽器最大化時(shí)瀏覽區(qū)大小；3).使用網(wǎng)絡(luò)腳本語言計(jì)算出參照物組件的位置信息；4).使用網(wǎng)絡(luò)腳本語言根據(jù)瀏覽區(qū)尺寸和布局規(guī)則計(jì)算出頁面非參照物組件的位置；5).使用網(wǎng)絡(luò)腳本語言修改頁面非參照物組件的位置；6).瀏覽器在瀏覽區(qū)中顯示頁面。有益效果本發(fā)明的有益效果是，利用本發(fā)明提出的頁面布局方法，可以對(duì)頁面中組件靈活布局，并可自適應(yīng)不同分辨率的屏幕，尤其是重新設(shè)計(jì)布局時(shí)，修改更加簡單。圖1為本發(fā)明實(shí)施例的頁面布局示意圖。圖2為本發(fā)明實(shí)施例的網(wǎng)頁組件自動(dòng)布局示意流程圖。圖3為本發(fā)明實(shí)施例的網(wǎng)頁組件自動(dòng)布局實(shí)例圖。具體實(shí)施例方式本發(fā)明的實(shí)施例如圖1所示，其中瀏覽器1，頁面2，參照物組件3，非參照物組件4。頁面2顯示在瀏覽器1的瀏覽區(qū)，頁面2中的組件根據(jù)參照物方式進(jìn)行位置調(diào)整。非參照物組件4根據(jù)參照物組件3的位置進(jìn)行位置調(diào)整，在本例圖中，參照物組件3的位置為頁面內(nèi)容中央，布局規(guī)則是非參照物組件4分布在參照物組件3的圓周圍，間隔為45度，圓半徑為瀏覽區(qū)尺寸值中較小值的一半。例如1).屏幕分別率大小為1024×768；2).瀏覽區(qū)尺寸為1004×6203).布局規(guī)則中圓半徑為310。如圖2所示，網(wǎng)頁組件自動(dòng)布局示意流程圖。1)瀏覽器根據(jù)輸入的頁面URL開始裝載頁面；2)使用網(wǎng)絡(luò)腳本語言獲取瀏覽器最大化時(shí)瀏覽區(qū)大?。?)使用網(wǎng)絡(luò)腳本語言計(jì)算出參照物組件的位置信息；4)使用網(wǎng)絡(luò)腳本語言根據(jù)瀏覽區(qū)尺寸和布局規(guī)則計(jì)算出頁面非參照物組件的位置；5)使用網(wǎng)絡(luò)腳本語言修改頁面非參照物組件的位置；6)瀏覽器在瀏覽區(qū)中顯示頁面。例如在InternetExporer6.0中顯示九個(gè)圖片A和B1、B2、B3、B4、B5、B6、B7、B8，A圖片位于瀏覽區(qū)中央，B1、B2、B3、B4、B5、B6、B7、B8以圓方式分布在A圖片的周圍，偏轉(zhuǎn)角度分別是0°、45°、90°、135°、180°、225°、270°、315°、并且A圖片和B1、B2、B3、B4、B5、B6、B7、B8圖片分別通過一條連線動(dòng)態(tài)連接。采用HTML和javascript語言的實(shí)現(xiàn)過程如下1).在html頁面的<body></body>正文增加如下內(nèi)容<divid＝″map″style＝″position:absolute；z-index:1；background-color#ffffff；visibility:show；″></div><divid＝″Layer1″style＝″position:absolute；width:100px；height:100px；z-index5；visibilityshow；″><tablewidth＝″100％″border＝″1″cellspacing＝″0″cellpadding＝″0″><tr><！—增加圖片A--></tr></table></div><divid＝″Layer2″style＝″position:absolute；width:100px；height:100px；z-index5；visibilityshow；″><tablewidth＝″100％″border＝″1″cellspacing＝″0″cellpadding＝″0″><tr><！—增加圖片B1--></tr></table></div><divid＝″Layer3″style＝″position:absolute；width:100px；height:100px；z-index5；visibilityshow；″><tablewidth＝″100％″border＝″1″cellspacing＝″0″cellpadding＝″0″><tr><！—增加圖片B2--></tr></table></div><divid＝″Layer4″style＝″position:absolute；width:100px；height:100px；z-index5；visibilityshow；″><tablewidth＝″100％″border＝″1″cellspacing＝″0″cellpadding＝″0″><tr><！—增加圖片B3--></tr></table></div><divid＝″Layer5″style＝″position:absolute；width:100px；height:100px；z-index:5；visibility:show；″><tablewidth＝″100％″border＝″1″cellspacing＝″0″cellpadding＝″0″><tr><！—增加圖片B4--></tr></table></div><divid＝″Layer6″style＝″position:absolute；width:100px；height:100px；z-index5；visibilityshow；″><tablewidth＝″100％″border＝″1″cellspacing＝″0″cellpadding＝″0″><tr><！—增加圖片B5--></tr></table></div><divid＝″Layer7″style＝″position:absolute；width:100px；height:100px；z-index5；visibilityshow；″><tablewidth＝″100％″border＝″1″cellspacing＝″0″cellpadding＝″0″><tr><！—增加圖片B6--></tr></table></div><divid＝″Layer8″style＝″position:absolute；width:100px；height:100px；z-index:5；visibility:show；″><tablewidth＝″100％″border＝″1″cellspacing＝″0″cellpadding＝″0″><tr><！—增加圖片B7--></tr></table></div><divid＝″Layer9″style＝″position:absolute；width:100px；height:100px；z-index:5；visibility:show；″><tablewidth＝″100％″border＝″1″cellspacing＝″0″cellpadding＝″0″><tr><！—增加圖片B8--></tr></table></div><objectid＝maxclassid＝″clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11″><paramname＝″Command″value＝″Maximize″></object>2).編寫獲取組件左上角X坐標(biāo)的函數(shù)，示例代碼如下<SCRIPTlanguage＝″javascript″>functiongetLeftPos(cell){varpos；varl＝cell.offsetLeft；while(cell＝cell.offsetParent){l+＝cell.offsetLeft；}pos＝l；returnpos；}</SCRIPT>3).編寫獲取組件左上角Y坐標(biāo)的函數(shù)，示例代碼如下<SCRIPTlanguage＝″javascript″>functiongetTopPos(cell){varposT；vart＝cell.offsetTop；while(cell＝cell.offsetParent){t+＝cell.offsetTop；}posT＝t；returnposT；}</SCRIPT>4).編寫畫線代碼，示例代碼如下<STYLE>v\＊{behaviorurl(#default#VML)；}/＊聲明V為VML變量＊/</STYLE><SCRIPTlanguage＝″javascript″>functiondrawLine(fromX，fromY，toX，toY){varstrElement＝″<vLineid＝′line_″+fromX+″_″+fromY+″_″+toX+″_″+toY+″′from＝′″+fromX+″，″+fromY+″′to＝″′+toX+″，″+toY+″′strokecolor＝′black′></vLine>″；varnewPoint＝document.createElement(strElement)；document.getElementById(″map″).appendChild(newPoint)；}</SCRIPT>5).編寫組件位置修改的代碼，示例代碼如下<SCRIPTlanguage＝″javascript″>functionmodifyLocation(cell，num){varradius＝Math.min(document.body.clientWidth/2-60，document.body.clientHeight/2-60)；varfromX，fromY，toX，toY；cell.style.left＝getLeftPos(Layer1)+radius＊Math.sin(2＊Math.PI/8＊uum)；cell.style.top＝+getTopPos(Layer1)+radius＊Math.cos(2＊Math.PI/8＊num)；fromX＝getLeftPos(Layer1)+Layer1.clientWidth/2；fromY＝getTopPos(Layer1)+Layer1.clientHeight/2；toX＝getLeftPos(cell)+cell.clientWidth/2；toY＝getTopPos(cell)+cell.clientHeight/2；drawLine(fromX，fromY，toX，toY)；}</SCRIPT>6).編寫動(dòng)態(tài)布局的代碼，示例代碼如下<SCRIPTlanguage＝″javascript″″>functionlayout(){//將屏幕置于最大化狀態(tài)if(document.body.offsetWidth?。絯indow.screen.availWidth){max.Click()；}map.style.left＝0；map.style.top＝0；map.style.width＝document.body.clientWidth；map.style.height＝document.body.clientHeight；Layer1.style.left＝document.body.clientWidth/2-Layer1.clientWidth/2；；Layer1.style.top＝document.body.clientHeight/2-Layer1.clientHeight/2；modifyLocation(Layer2，1)；modifyLocation(Layer3，2)；modifyLocation(Layer4，3)；modifyLocation(Layer5，4)；modifyLocation(Layer6，5)；modifyLocation(Layer7，6)；modifyLocation(Layer8，7)；modifyLocation(Layer9，8)；</SCRIPT>7).在頁面加載時(shí)進(jìn)行動(dòng)態(tài)布局，示例代碼如下<bodyonload＝″layout()″>本發(fā)明的基于網(wǎng)絡(luò)腳本語言的頁面布局方法，頁面布局時(shí)需要選定1個(gè)或者多個(gè)參照物；頁面中參照物組件是顯示出來的，或者隱藏；頁面中參照物組件的位置是絕對(duì)位置，或者是相對(duì)位置；布局規(guī)則根據(jù)頁面布局需要進(jìn)行設(shè)計(jì)，不是一成不變的，比如按圓分布、按扇形分布、按正八邊形分布等；根據(jù)布局規(guī)則在頁面中增加繪制一些輔助標(biāo)識(shí)以標(biāo)識(shí)關(guān)聯(lián)關(guān)系，比如在組件間繪制連線，輔助標(biāo)識(shí)的繪制使用網(wǎng)絡(luò)腳本語言實(shí)現(xiàn)；通過網(wǎng)絡(luò)腳本語言標(biāo)識(shí)出關(guān)聯(lián)關(guān)系時(shí)，采用調(diào)整后的組件位置信息。本發(fā)明的基于網(wǎng)絡(luò)腳本語言的頁面布局方法，其頁面非參照物組件調(diào)整自己的實(shí)際布局位置可以是自動(dòng)完成方式，也可以是響應(yīng)用戶操作方式，比如鼠標(biāo)單擊等。頁面非參照物組件調(diào)整自己的實(shí)際布局位置采用自動(dòng)完成方式時(shí)，調(diào)整過程應(yīng)在瀏覽區(qū)顯示頁面之前。通過引入?yún)⒄瘴锖途W(wǎng)絡(luò)腳本語言進(jìn)行頁面布局，對(duì)頁面中組件靈活布局，并可自適應(yīng)不同分辨率的屏幕。雖然通過實(shí)施例子描述了本發(fā)明，本領(lǐng)域普通技術(shù)人員知道，本發(fā)明有許多變形和變化而不脫離本發(fā)明的精神，希望所附的權(quán)利要求包括這些變形和變化而不脫離本發(fā)明的精神。權(quán)利要求1.一種基于網(wǎng)絡(luò)腳本語言的頁面布局方法，其特征在于頁面布局引入?yún)⒄瘴锖途W(wǎng)絡(luò)腳本語言進(jìn)行布局；參照物是頁面組件，或是非頁面組件；頁面組件由頁面語言標(biāo)識(shí)，頁面組件的樣式由頁面樣式語言標(biāo)識(shí)；頁面非參照物組件根據(jù)瀏覽區(qū)尺寸和布局規(guī)則計(jì)算出各自的實(shí)際布局位置，并做出相應(yīng)調(diào)整；頁面非參照物組件位置調(diào)整使用網(wǎng)絡(luò)腳本語言實(shí)現(xiàn)。2.如權(quán)利要求1所述的基于網(wǎng)絡(luò)腳本語言的頁面布局方法，其特征在于頁面布局時(shí)需要選定1個(gè)或者多個(gè)參照物。3.如權(quán)利要求1所述的基于網(wǎng)絡(luò)腳本語言的頁面布局方法，其特征在于頁面中參照物組件是顯示出來的，或者是隱藏的。4.如權(quán)利要求1所述的基于網(wǎng)絡(luò)腳本語言的頁面布局方法，其特征在于頁面中參照物組件的位置是絕對(duì)位置，或者是相對(duì)位置。5.如權(quán)利要求1所述的基于網(wǎng)絡(luò)腳本語言的頁面布局方法，其特征在于布局規(guī)則根據(jù)頁面布局需要進(jìn)行設(shè)計(jì)，可以是圓分布、扇形分布或正八邊形分布。6.如權(quán)利要求1所述的基于網(wǎng)絡(luò)腳本語言的頁面布局方法，其特征在于根據(jù)布局規(guī)則在頁面中增加繪制一些輔助標(biāo)識(shí)以標(biāo)識(shí)關(guān)聯(lián)關(guān)系，輔助標(biāo)識(shí)的繪制使用網(wǎng)絡(luò)腳本語言實(shí)現(xiàn)；通過網(wǎng)絡(luò)腳本語言標(biāo)識(shí)出關(guān)聯(lián)關(guān)系時(shí)，采用調(diào)整后的組件位置信息。7.如權(quán)利要求1所述的基于網(wǎng)絡(luò)腳本語言的頁面布局方法，其特征在于頁面非參照物組件調(diào)整自己的實(shí)際布局位置是自動(dòng)完成方式，或是響應(yīng)用戶操作方式。8.如權(quán)利要求1所述的基于網(wǎng)絡(luò)腳本語言的頁面布局方法，其特征在于頁面非參照物組件調(diào)整自己的實(shí)際布局位置采用自動(dòng)完成方式時(shí)，調(diào)整過程應(yīng)在瀏覽區(qū)顯示頁面之前。9.如權(quán)利要求1或7或8所述的基于網(wǎng)絡(luò)腳本語言的頁面布局方法，其特征在于網(wǎng)頁組件自動(dòng)布局的流程如下1).瀏覽器根據(jù)輸入的頁面URL開始裝載頁面；2).使用網(wǎng)絡(luò)腳本語言獲取瀏覽器最大化時(shí)瀏覽區(qū)大?。?).使用網(wǎng)絡(luò)腳本語言計(jì)算出參照物組件的位置信息；4).使用網(wǎng)絡(luò)腳本語言根據(jù)瀏覽區(qū)尺寸和布局規(guī)則計(jì)算出頁面非參照物組件的位置；5).使用網(wǎng)絡(luò)腳本語言修改頁面非參照物組件的位置；6).瀏覽器在瀏覽區(qū)中顯示頁面。全文摘要一種基于網(wǎng)絡(luò)腳本語言的頁面布局方法，其特征在于頁面布局引入?yún)⒄瘴锖途W(wǎng)絡(luò)腳本語言進(jìn)行布局；參照物是頁面組件，或是非頁面組件；頁面組件由頁面語言標(biāo)識(shí)，頁面組件的樣式由頁面樣式語言標(biāo)識(shí)；頁面非參照物組件根據(jù)瀏覽區(qū)尺寸和布局規(guī)則計(jì)算出各自的實(shí)際布局位置，并做出相應(yīng)調(diào)整；頁面非參照物組件位置調(diào)整使用網(wǎng)絡(luò)腳本語言實(shí)現(xiàn)。本發(fā)明通過引入?yún)⒄瘴锖途W(wǎng)絡(luò)腳本語言實(shí)現(xiàn)頁面的靈活布局，并可自適應(yīng)不同分辨率的屏幕，尤其是重新設(shè)計(jì)布局時(shí)，修改更加簡單。文檔編號(hào)H04L29/06GK101146098SQ20071005373公開日2008年3月19日申請(qǐng)日期2007年11月1日優(yōu)先權(quán)日2007年11月1日發(fā)明者亮李,胡志勇,魏三川申請(qǐng)人:武漢虹旭信息技術(shù)有限責(zé)任公司