本發(fā)明涉及網(wǎng)絡技術，更為具體地，涉及提供web頁面的技術。

背景技術：

瀏覽器HTML頁面提供原始的坐標系，可在該坐標系上放置文檔中的所有元素。其中，所放置的各元素的大小與位置都可以設置。一旦設置，更改的話，就需要通過腳本JavaScript來實現(xiàn)。

已存在與腳本JavaScript類似的實現(xiàn)方式，如JQueryUI 及JQuery EasyUI。

JQueryUI 可參見：

http://jqueryui.com/draggable/,http://jqueryui.com/resizable/ ；

而JQuery EasyUI可參見：

http://www.jeasyui.com/demo/main/index.php?plugin=Resizable&theme=default&dir=ltr&pitem=。

但是，如上所提到的各方案，都是基于HEML頁面的原始坐標系實現(xiàn)。在瀏覽器所存在的顯示器發(fā)生變化，如大小或的分辨率發(fā)生變化時，頁面上顯示的元素的位置與大小有可能發(fā)生不期望的變化。這樣，會導致元素顯示出現(xiàn)重疊或混亂等問題。

技術實現(xiàn)要素：

有鑒于此，本發(fā)明提供web頁面提供方法，其包括以提供web頁面的原始坐標系作為基礎，建立第二坐標系接收用戶基于該第二坐標系進行的輸入，該輸入用于選擇呈現(xiàn)元素的區(qū)域；基于該第二坐標系確定所選擇的區(qū)域是否可用，并在用于顯示web頁面的顯示器上呈現(xiàn)所確定的結果。

根據(jù)本發(fā)明所述的web頁面提供方法，可選地，在確定所選擇的區(qū)域可用的情況下，接受用戶放置的要呈現(xiàn)的元素；在確定所選擇的區(qū)域不可用的情況下，以可見方式或語音方式提示該區(qū)域不可用。

根據(jù)本發(fā)明所述的web頁面提供方法，可選地，以提供web頁面的原始坐標系作為基礎，建立第二坐標系包括：預先設定第二坐標系的橫向軸所包括的橫向單元的數(shù)目N、縱向軸所包括的縱向單元的數(shù)目M；使第二坐標系的原點與原始坐標系的原點相對應；按照預先確定的橫向單元的數(shù)目N，在所述原始坐標系的橫向軸上產(chǎn)生N個橫向單元；按照預先確定的縱向單元的數(shù)目M，在所述原始坐標系的縱向軸上產(chǎn)生M個縱向單元；其中，所述橫向單元與所述縱向單元構成N*M個單元格。

根據(jù)本發(fā)明所述的web頁面提供方法，可選地，按照預先確定的橫向單元的數(shù)目N，在所述原始坐標系的橫向軸上產(chǎn)生該數(shù)目N個橫向單元包括將原始坐標系的橫向軸分成N個單元，從而產(chǎn)生N個橫向單元；以及按照預先確定的縱向單元的數(shù)目M，在所述原始坐標系的縱向軸上產(chǎn)生該數(shù)目M個縱向單元包括將原始坐標系的縱向軸分成M個單元，從而產(chǎn)生M個縱向單元。

根據(jù)本發(fā)明所述的web頁面提供方法，可選地，確定所選擇的區(qū)域是否可用包括：判斷用戶所選擇的區(qū)域覆蓋的單元格是否已被選擇用于其它元素，僅在所有單元格未被選擇用于其它元素的情況下，確定所選擇的區(qū)域可用；其中，單元格被選擇用于其它元素可以是單元格被全部選中，也可以是被部分選中用于其它元素。

根據(jù)本發(fā)明的示例，還提供web頁面提供系統(tǒng)。該系統(tǒng)包括坐標建立模塊、接收模塊以及判斷模塊。其中，該坐標建立模塊可用于以提供web頁面的原始坐標系為基礎，建立第二坐標系；該接收模塊接收用戶基于該第二坐標系進行的輸入，該輸入用于選擇呈現(xiàn)元素的區(qū)域；以及該判斷模塊基于該第二坐標系確定所選擇的區(qū)域是否可用，并在用于顯示web頁面的顯示器上呈現(xiàn)所確定的結果。

根據(jù)本發(fā)明所述的web頁面提供系統(tǒng)，可選地，該判斷模塊進一步設置成用于在確定所選擇的區(qū)域可用的情況下，接受用戶放置的要呈現(xiàn)的元素；以及用于在確定所選擇的區(qū)域不可用的情況下，以可見方式或語音方式提示該區(qū)域不可用。

根據(jù)本發(fā)明所述的web頁面提供系統(tǒng)，可選地，所述坐標建立模塊包括：預設子模塊，用于預先設定第二坐標系的橫向軸所包括的橫向單元的數(shù)目N、縱向軸所包括的縱向單元的數(shù)目M；原點對照子模塊，用于使第二坐標系的原點與原始坐標系的原點相對應；橫向單元生成子模塊，用于按照預先確定的橫向單元的數(shù)目N，在所述原始坐標系的橫向軸上產(chǎn)生N個橫向單元；縱向單元生成子模塊，用于按照預先確定的縱向單元的數(shù)目M，在所述原始坐標系的縱向軸上產(chǎn)生M個縱向單元。

根據(jù)本發(fā)明所述的web頁面提供系統(tǒng)，可選地，所述橫向單元生成子模塊設置成將原始坐標系的橫向軸分成所述數(shù)目N個單元，從而產(chǎn)生N個橫向單元；所述縱向單元生成子模塊設置成將原始坐標系的縱向軸分成所述數(shù)目M個單元，從而產(chǎn)生M個縱向單元。。

根據(jù)本發(fā)明所述的web頁面提供系統(tǒng)，可選地，所述判斷模塊設置成判斷用戶所選擇的區(qū)域覆蓋的單元格是否已被選擇用于顯示其它元素，并僅在所有單元格未被選擇用于其它元素的情況下，確定所選擇的區(qū)域可用；其中，單元格被選擇用于其它元素包括單元格被全部選中以及部分選中兩種情況。

在以上各示例中，該所要呈現(xiàn)的元素占用正整數(shù)個單元格。

執(zhí)行本發(fā)明所述的方法或采用本發(fā)明所述的系統(tǒng)，由于要呈現(xiàn)的元素的放置是以該第二坐標系的單元格作為基礎，因此例如在顯示設備分辨率變化的情況下，所呈現(xiàn)的元素與第二坐標系之間的相對位置保持不變。

附圖說明

圖1是根據(jù)本發(fā)明示例的web頁面提供方法的流程圖。

圖2是圖1中步驟10的一種示例性實現(xiàn)的流程示意圖。

圖3是根據(jù)本發(fā)明的示例產(chǎn)生的第二坐標系的示意圖。

圖4示出了選擇用于呈現(xiàn)元素的區(qū)域的示例。

圖5是框選區(qū)域中包含已用于其它元素的區(qū)域的示例。

圖6是包含呈現(xiàn)的元素的示例。

圖7示出了web頁面提供系統(tǒng)的結構示意圖。

具體實施方式

現(xiàn)在參照附圖描述本發(fā)明的示意性示例，相同的附圖標號表示相同的元件。下文描述的各實施例有助于本領域技術人員透徹理解本發(fā)明，且意在示例而非限制。圖中各元件、部件、單元、裝置的圖示不一定按比例繪制，僅示意性表明這些元件、部件、模塊、裝置之間的相對關系。流程圖中各步驟的順序亦為示例，并非一定要按照這樣的步驟執(zhí)行。

圖1是根據(jù)本發(fā)明示例的web頁面提供方法的流程圖。作為示例，該方法應用在可瀏覽web頁面的應用環(huán)境中。作為更具體的示例，該方法例如在可瀏覽web頁面的電子設備中執(zhí)行。

如圖1所示，在步驟10，以提供web頁面的原始坐標系作為基礎，建立第二坐標系。在本文所有示例中，采用超文本標記語HTML5的電子設備作為示例來闡述根據(jù)本發(fā)明的方法?；贖TML5的網(wǎng)頁自帶的坐標系為原始坐標系，由此來建立第二坐標系。在步驟14，接收用戶基于該第二坐標系進行的輸入，該輸入用于選擇呈現(xiàn)元素的區(qū)域。例如，用戶可通過鼠標在顯示該web頁面的顯示器上框選出呈現(xiàn)的元素的區(qū)域。本領域技術人員可以理解到，在顯示器上框選出呈現(xiàn)的元素的區(qū)域例如是通過在顯示器的顯示屏幕上框選了進行的。在步驟16，確定所選擇的區(qū)域是否可用，并在該顯示器上呈現(xiàn)所確定的結果。在本發(fā)明給出的所有示例中，要呈現(xiàn)的“元素”可以是圖表、本文框、圖片等。

根據(jù)本發(fā)明的一些示例，結合圖1所示的方法可選地，還包括在用戶進行框選之前，將所建立的第二坐標系以可見的方式呈現(xiàn)在顯示該web頁面的顯示器上；該呈現(xiàn)優(yōu)選為在色彩圖像等呈現(xiàn)的外觀方面以不影響所顯示的元素為準。

示例地，步驟10可以圖2所示的方法來實現(xiàn)。在步驟100，預先設定第二坐標系的橫向軸所包括的橫向單元的數(shù)目N、縱向軸所包括的縱向單元的數(shù)目M。橫向單元與縱向單元在此相當于長度單元。舉例來說，預先設定第二坐標系橫向軸包括8個橫向單元，即N為8，縱向軸包括6個縱向單元，即M為6。預先設置的數(shù)目可存儲在電子設備的相關存儲部件中。在步驟102，使第二坐標系的原點與原始坐標系的原點相對應。根據(jù)一個具體的示例，可以原始坐標系的原點作為第二坐標系的原點。在步驟104，按照預先確定的橫向單元的數(shù)目N，在原始坐標系的橫向軸上產(chǎn)生該數(shù)目N個橫向單元。例如，如在步驟100預先設定的橫向單元數(shù)目N為8，則在原始坐標系的橫向軸上產(chǎn)生8個單元格。在步驟106，按照預先確定的縱向單元的數(shù)目，在原始坐標系的縱向軸上產(chǎn)生該數(shù)目M個縱向單元。例如，如在步驟100預先設定的縱向單元的數(shù)目M為6，則在原始坐標系的縱向軸上產(chǎn)生6個單元格。

作為示例，步驟104中，可按照預先設定的橫向單元的數(shù)目N，將原始坐標系的橫向軸分成N份。例如，預先設定的數(shù)目為8，便可將原始坐標系的橫向軸分成8份，即，橫向軸依次有8個單元。類似地，步驟105中，可按照預先設定的縱向單元的數(shù)目M，將原始坐標系的縱向軸分成M份。例如，預先設定的數(shù)目為6，便可將原始坐標系的縱向軸分成6份，即，縱向軸依次有6個單元。由此，原點位于原始坐標系，橫向軸包括8個橫向單元，縱向軸包括6個縱向單元的坐標系形成，其中，橫軸的橫向單元與縱軸的縱向單元構成了48個單元格。

在此，要特別說明的是，按照預先設定的橫向單元的數(shù)目，將原始坐標系的橫向軸分成該數(shù)目份，所產(chǎn)生的橫向單元可以首尾相連，也可以是兩個相鄰的橫向單元之間有一定間隔。同樣地，各縱向單元之間可以首尾相連也可以有一定間隔。

圖3是根據(jù)本發(fā)明的示例產(chǎn)生的第二坐標系的示意圖，其中，橫向軸包括8個橫向單元，縱向軸包括6個縱向單元。在圖3所示的示意圖中，相鄰的橫向單元之間有間隔，相鄰的縱向單元之間也有間隔。

根據(jù)本發(fā)明的示例，圖1中所示的步驟16中確定所選擇的區(qū)域是否可用可包括判斷用戶所選擇的區(qū)域覆蓋的單元格是否已被選擇用于其它元素，僅在所有單元格未被選擇用于其它元素的情況下，確定所選擇的區(qū)域可用；其中，單元格被選擇用于其它元素包括單元格被全部選中以及部分選中兩種情況?？梢岳斫猓凑毡景l(fā)明的示例，要呈現(xiàn)的元素即使占用了某個單元格的一部分，該單元格也被標記為已選擇用于顯示該元素，因此，可以說，根據(jù)本發(fā)明，要呈現(xiàn)的元素占用正整數(shù)個單元格。

圖4示出了選擇用于呈現(xiàn)元素的區(qū)域的示例，其中，該第二坐標系是圖3所示的坐標系，即，橫向單元8個而縱向單元6個。如圖3所示，用戶框選了區(qū)域30。區(qū)域30占據(jù)4個完整的單元格305、306、309及310，以及12個單元格300、301、302、303、304、308、312、313、314、315、311、307中每個單元格的一部分。按照本發(fā)明，只要單元格中有部分被選擇為框選區(qū)域的一部分，則該單元格便不能再用于呈現(xiàn)其它單元格。如果如上所述的單元格300到315均沒有被選擇用于其它單元格，則區(qū)域30可用于呈現(xiàn)元素。按照本發(fā)明的示例，則例如可將該框選區(qū)域呈現(xiàn)為綠色，以使用戶獲悉可在其中放置要呈現(xiàn)的元素。如果如上所述的單元格300到315中有已經(jīng)被用于顯示其它元素，則例如可通過將該已用于其它元素的區(qū)域呈現(xiàn)為紅色來警示用戶。圖5的示例即給出了框選區(qū)域中包含已用于其它元素的區(qū)域的示例。如圖5所示，框選區(qū)域32與區(qū)域30部分重合，因此，重合單元格310、311、314與315可呈現(xiàn)為紅色。更進一步，可確定出框選區(qū)域32可就近向哪個方向移動、以及移動幾個單元格便可與區(qū)域30不再重合。

在此要說明的是，在本文的示例中，向用戶告知該區(qū)域可用或向用戶告知該區(qū)域不可用，均是通過以可見（例如以不同顏色示意的）方式，實際應用中，該可見方式還可包括文字提醒方式。此外，該告知方式并不排除使用其它方式，例如使用以語音告知的方式等。

在框選的區(qū)域30可用的情況下，用戶可將要呈現(xiàn)的元素放置在其中，例如圖6所示的圖表。

當在第二坐標系中放置了元素之后，還可調(diào)整所放置的元素的位置。在調(diào)整的過程中，同樣執(zhí)行確定后續(xù)要放置的區(qū)域是否能放置該元素，確定方法與上文所描述的一致。在不能放置的情況下，提示用戶。

用戶可放大或縮小已放置的元素的大小。在放大該元素之后，如果呈現(xiàn)該元素的區(qū)域會與已經(jīng)放置了其它元素的區(qū)域重合，則提示用戶。

根據(jù)本發(fā)明所示的方法設置的第二坐標系，在用戶的電子設備的顯示分辨率發(fā)生變化時，該第二坐標系相應地發(fā)生變化。但是，該變化僅在于橫向單元與縱向單元的單元長度的變化，單元的數(shù)量并不會發(fā)生變化。亦即，由縱向單元與橫向單元所構成的單元格并不發(fā)生變化。放置在該第二坐標系中的元素其所在的區(qū)域是以單元格作為基礎，因此，各元素之間的位置保持不變，且相對于該第二坐標系，各元素的大小及位置均保持不變。

根據(jù)本發(fā)明所示的web頁面提供方法例如可實現(xiàn)為軟件，從而執(zhí)行在用戶的設備中，也可在以硬件的方式實現(xiàn)，或?qū)崿F(xiàn)為軟件與硬件結合的方式。

根據(jù)本發(fā)明，還提供web頁面提供系統(tǒng)。圖7示出了web頁面提供系統(tǒng)的結構示意圖。如圖所示，該系統(tǒng)包括坐標建立模塊60、接收模塊64以及判斷模塊66。坐標建立模塊60用以提供web頁面的原始坐標系作為基礎，建立第二坐標系。接收模塊64用于接收用戶于該第二坐標系進行的輸入，該輸入用于選擇呈現(xiàn)元素的區(qū)域。例如，用戶可通過鼠標在所呈現(xiàn)的第二坐標系上框選出呈現(xiàn)的元素的區(qū)域。判斷模塊66用于確定所選擇的區(qū)域是否可用，并在用于顯示web頁面的顯示器上呈現(xiàn)所確定的結果。

可選地，如圖7所示的web頁面提供系統(tǒng)還包括輸出模塊，其將所建立的第二坐標系呈現(xiàn)在顯示該web頁面的顯示器上。該呈現(xiàn)優(yōu)選為在色彩圖像等呈現(xiàn)的外觀方面以不影響所顯示的元素為準。

示例地，坐標建立模塊60還可包括預設子模塊601、原點對照子模塊602、橫向單元生成子模塊603以及縱向單元生成子模塊604。預設子模塊601預先設定第二坐標系的橫向軸所包括的橫向單元的數(shù)目N、縱向軸所包括的縱向單元的數(shù)目M。舉例來說，可預先設定第二坐標系橫向軸包括8個橫向單元，即N為8，縱向軸包括6個縱向單元，即M為6。原點對照子模塊602用于使第二坐標系的原點與原始坐標系的原點相對應。根據(jù)一個具體的示例，可以原始坐標系的原點作為第二坐標系的原點。橫向單元生成子模塊603用于按照預先確定的橫向單元的數(shù)目N，在原始坐標系的橫向軸上產(chǎn)生N個橫向單元。例如，如在步驟100預先設定的橫向單元的目為8，則在原始坐標系的橫向軸上產(chǎn)生8個單元格?？v向單元生成子模塊604用于按照預先確定的縱向單元的數(shù)目M，在原始坐標系的縱向軸上產(chǎn)生M個縱向單元。例如，如在步驟100預先設定的縱向單元的目為6，則在原始坐標系的縱向軸上產(chǎn)生6個單元格。

作為示例，橫向單元生成子模塊603可按照預先設定的橫向單元的數(shù)目N，將原始坐標系的橫向軸分成N份。例如，預先設定的數(shù)目為8，便可將原始坐標系的橫向軸分成8份，即，橫向軸依次有8個單元。類似地，縱向單元生成子模塊604可按照預先設定的縱向單元的數(shù)目M，將原始坐標系的縱向軸分成M份。例如，預先設定的數(shù)目為6，便可將原始坐標系的縱向軸分成6份，即，縱向軸依次有6個單元。由此，原點位于原始坐標系，橫向軸包括8個橫向單元，縱向軸包括6個縱向單元的坐標系形成，其中，橫軸的橫向單元與縱軸的縱向單元構成了48個單元格。

判斷模塊66進一步設置成用于在確定所選擇的區(qū)域可用的情況下，接受用戶放置的要呈現(xiàn)的元素；以及用于在確定所選擇的區(qū)域不可用的情況下，以可見方式或語音方式提示該區(qū)域不可用。

由根據(jù)本發(fā)明所述的該web提供系統(tǒng)所構建的第二坐標的示例如圖3所示，選擇用于呈現(xiàn)元素的區(qū)域的示例如圖4所示，而框選區(qū)域中包含已用于其它元素的區(qū)域的示例如圖5所示，不再贅述。

根據(jù)本發(fā)明所述的提供web頁面提供系統(tǒng)可實現(xiàn)為軟件，也可實現(xiàn)為硬件。如圖7所示的各模塊可實現(xiàn)在用戶電子設備中，例如，如果選擇設置了輸出模塊62，則可將其實現(xiàn)在用戶電子設備的輸出接口中。

如上文所述的用戶電子設備可以是計算機、便攜式電子設備等可進行網(wǎng)絡訪問的設備。

此外，圖3中以虛線示出了單元格，但在實際應用中，單元格可以用戶不易察覺的方式顯示，或并不在顯示器的屏幕上顯示出這些單元格，當前圖3的以虛線示出單元格，意在使本發(fā)明更易于理解。在圖4到圖6中，為了使附圖更為清楚，僅示意了附圖示意涉及到的單元格。

本發(fā)明各示例中，第二坐標系的橫向長度與web頁面的橫向長度對應，縱向長度與web頁面的縱向長度向相對應。

盡管已結合附圖在上文的描述中，公開了本發(fā)明的具體實施例，但是本領域技術人員可以理解到，可在不脫離本發(fā)明精神的情況下，對公開的具體實施例進行變形或修改。本發(fā)明的實施例僅用于示意并不用于限制本發(fā)明。