CN102243633A - Webpage layout method and device - Google Patents
Webpage layout method and device Download PDFInfo
- Publication number
- CN102243633A CN102243633A CN2010101730747A CN201010173074A CN102243633A CN 102243633 A CN102243633 A CN 102243633A CN 2010101730747 A CN2010101730747 A CN 2010101730747A CN 201010173074 A CN201010173074 A CN 201010173074A CN 102243633 A CN102243633 A CN 102243633A
- Authority
- CN
- China
- Prior art keywords
- sub
- panel
- developed width
- display panel
- width
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Images
Landscapes
- User Interface Of Digital Computer (AREA)
Abstract
The invention discloses a webpage layout method and device, belonging to the field of Internet. The method comprises the following steps of: calculating the actual width of a display panel, and calculating the actual width of each sub-panel according to the actual width of the display panel and the relative percentage set for each sub-panel; flooring the actual width of each sub-panel, and calculating the residual actual width of the display panel according to the flooring results of all the sub-panels; and allocating the residual actual width of the display panel to one or more sub-panels according to a preset rule, and setting the width attribute of each sub-panel according to a layout result determined after allocation. According to the invention, by flooring the actual width of each sub-panel through calculation and allocating the residual actual width of the display panel, which is obtained according to the flooring results, to one or more sub-panels, the webpage layout can change along with the changes of the actual size of the display panel, and the effects of improving webpage layout aesthetics and being compatible to various browsers are achieved.
Description
Technical field
The present invention relates to internet arena, particularly a kind of method of page layout and device.
Background technology
In the Web system, usually use the div label will show HTML (HyperText Mark-up Language, HTML (Hypertext Markup Language) or HTML) display panel of element is divided into the multiple row sub-panel, each sub-panel display part html element element, and there is a relative percentage in display panel relatively.When carrying out page layout, the relative percentage that most of browsers multiply by each sub-panel with the developed width of display panel obtains the developed width of each sub-panel, the developed width of the sub-panel that this kind mode calculates may have decimal, but, therefore need handle the decimal that calculates because the developed width of html element element when showing should be integer.
When prior art is handled the decimal that aforementioned calculation draws in the page layout process, adopt the mode that rounds up, or directly the developed width of each sub-panel of calculating is rounded (fractions omitted part).
In realizing process of the present invention, the inventor finds that there is following shortcoming at least in prior art:
The mode that rounds up and round, the developed width sum that will cause sub-panel less than or exceed the developed width of display panel, and then influence the attractive in appearance of layout; In addition, when carrying out page layout by the mode of above-mentioned processing decimal, if the mode of the processing decimal that different browsers is suitable for is also different, then the page layout mode that provides of prior art can't compatible various browsers.
Summary of the invention
In order to improve the aesthetic property of page layout, the page layout mode of the various browsers of a kind of compatibility is provided, the embodiment of the invention provides a kind of method and device of page layout.Described technical scheme is as follows:
On the one hand, provide a kind of method of page layout, described method comprises:
Calculate the developed width of display panel, and calculate the developed width of described each sub-panel according to the relative percentage that developed width and each sub-panel of described display panel is set up;
Round under the developed width to described each sub-panel, and, calculate the residue developed width of described display panel according to the result that rounds of all sub-panels;
According to preset rules the residue developed width of described display panel is distributed to one or more sub-panel, and the width attribute of each sub-panel is set by the layout result of distributing the back to determine.
On the other hand, provide a kind of device of page layout, described device comprises:
First computing module is used to calculate the developed width of display panel;
Second computing module is used for the developed width that the developed width of the display panel that calculates according to described first computing module and relative percentage that each sub-panel is set up calculate described each sub-panel;
Round module, be used for rounding under the developed width of each sub-panel that described second computing module is calculated;
The 3rd computing module is used for the result that rounds that rounds module to all sub-panels according to described, and calculates the residue developed width of described display panel;
Distribution module, the residue developed width that is used for the described display panel that described the 3rd computing module calculated according to preset rules is distributed to one or more sub-panel;
Module is set, is used for being provided with the width attribute of each sub-panel according to the layout result of determining after the described module assigns.
The beneficial effect of the technical scheme that the embodiment of the invention provides is:
By rounding under the developed width to each sub-panel of calculating, and will distribute to one or more sub-panel according to the residue developed width that rounds the display panel that the result obtains, page layout can be changed according to the actual size of display panel, thereby can improve the aesthetic property of page layout, and compatible various browser.
Description of drawings
In order to be illustrated more clearly in the technical scheme in the embodiment of the invention, the accompanying drawing of required use is done to introduce simply in will describing embodiment below, apparently, accompanying drawing in describing below only is some embodiments of the present invention, for those of ordinary skills, under the prerequisite of not paying creative work, can also obtain other accompanying drawing according to these accompanying drawings.
Fig. 1 is the method flow diagram of the page layout that provides of the embodiment of the invention one;
Fig. 2 is the method flow diagram of the page layout that provides of the embodiment of the invention two;
Fig. 3 is the relative width synoptic diagram of the sub-panel that provides of the embodiment of the invention two;
Fig. 4 is the apparatus structure synoptic diagram of the page layout that provides of the embodiment of the invention three;
Fig. 5 is the apparatus structure synoptic diagram of the another kind of page layout that provides of the embodiment of the invention three.
Embodiment
For making the purpose, technical solutions and advantages of the present invention clearer, embodiment of the present invention is described further in detail below in conjunction with accompanying drawing.
Embodiment one
Referring to Fig. 1, present embodiment provides a kind of method of page layout, and this method flow is specific as follows:
101: calculate the developed width of display panel, and calculate the developed width of each sub-panel according to the relative percentage that developed width and each sub-panel of display panel is set up;
102: round under the developed width to each sub-panel, and, calculate the residue developed width of display panel according to the result that rounds of all sub-panels;
103: according to preset rules the residue developed width of display panel is distributed to one or more sub-panel, and the width attribute of each sub-panel is set by the layout result of distributing the back to determine.
Wherein,, calculate the residue developed width of display panel, specifically comprise according to the result that rounds of all sub-panels:
Calculate through under the integer developed width sum of all sub-panels after rounding, and, calculate the residue developed width of display panel according to the integer developed width sum of all sub-panels and the developed width of display panel.
Further, after rounding under the developed width to each sub-panel, also comprise:
Each decimal cast out after will descending to round to the developed width of described each sub-panel and the corresponding relation of described each decimal and sub-panel are stored.
Particularly, the residue developed width of display panel is distributed to one or more sub-panel, specifically comprises according to preset rules:
According to each decimal cast out and the corresponding relation of sub-panel, and the putting in order of each decimal of casting out, the residue developed width of display panel is distributed to one or more sub-panel.
The method that present embodiment provides, by rounding under the developed width to each sub-panel of calculating, and will distribute to one or more sub-panel according to the residue developed width that rounds the display panel that the result obtains, page layout can be changed according to the actual size of display panel, thereby can improve the aesthetic property of page layout, and compatible various browser.
Embodiment two
Present embodiment provides a kind of method of page layout, this method is after rounding under the developed width to each sub-panel of calculating, with the residue developed width of all the decimal sums after rounding as display panel, and the residue developed width of this display panel distributed to one or more sub-panel, page layout can be changed according to the actual size of display panel, not only can improve the aesthetic property of page layout, can also make all browsers can adopt identical processing mode, and then can solve prior art and use relative percentage to carry out the problem that page layout can't compatible various browsers the decimal after rounding.Referring to Fig. 2, this method flow is specific as follows:
201: calculate the developed width of display panel, and calculate the developed width of each sub-panel according to the relative percentage that developed width and each sub-panel of display panel is set up;
Wherein, present embodiment does not specifically limit the developed width that how to calculate display panel, the browser difference, and the developed width of display panel is also with difference.The developed width of display panel, and the width that each html element element is presented on the display panel all is unit with the pixel, and the relative percentage that is set up for each sub-panel, because being to use the div label has cut apart well, therefore, for same html element element, the relative percentage that each sub-panel is set up is fixed.But because the developed width difference of display panel, the developed width of each sub-panel that the relative percentage that is set up according to developed width and each sub-panel of display panel calculates not is what fix.For the number of sub-panel and concrete relative percentage, present embodiment is not done concrete qualification, in the actual application, and can be by the plain decision of concrete html element.
For convenience of explanation, present embodiment is 1024 pixels with the developed width of display panel, the number of sub-panel is 3, these 3 sub-panels are respectively sub-panel A, sub-panel B and sub-panel C, the relative percentage of each sub-panel correspondence be respectively display panel 32%, 53% and 15% for example describes, as shown in Figure 3.When calculating the developed width of sub-panel, the developed width of sub-panel is the product of the relative percentage of the developed width of display panel and sub-panel, and then the developed width of sub-panel A is a 1024*32%=327.68 pixel; The developed width of sub-panel B is a 1024*53%=542.72 pixel; And the developed width of sub-panel C is a 1024*15%=153.60 pixel.
202: round under the developed width to each sub-panel, obtain the result that rounds of all sub-panels;
At this step, the developed width of each sub-panel that calculates based on above-mentioned steps 201, after under developed width, rounding to each sub-panel, the integer developed width of sub-panel A is 327 pixels, the integer developed width of sub-panel B is 542 pixels, and the integer developed width of sub-panel C is 153 pixels.
203: according to the residue developed width that the result calculates display panel that rounds of all sub-panels;
Wherein, the residue developed width of display panel is poor between the developed width of the integer developed width sum of all sub-panels and display panel, then according to all sub-panels round the result when calculating the residue developed width of display panel, specifically comprise:
Calculate through under the integer developed width sum of all sub-panels after rounding, and, calculate the residue developed width of display panel according to the integer developed width sum of all sub-panels and the developed width of display panel.
For example, the integer developed width of each sub-panel that obtains based on above-mentioned steps 202, the integer developed width sum of all sub-panels is a 327+542+153=1022 pixel, then the residue developed width of display panel is a 1024-1022=2 pixel.By the aforementioned calculation result as can be seen, poor between the integer developed width sum of all sub-panels and the developed width of display panel, be all decimal sums of casting out after developed width to each sub-panel descends to round, then the residue developed width of this display panel also can obtain by 0.68+0.72+0.60=2.In addition, can be drawn by this step, the residue developed width of display panel is similarly integer, and the integer of the residue developed width correspondence of this display panel is less than the number of sub-panel.
204: according to preset rules the residue developed width of display panel is distributed to one or more sub-panel, and the width attribute of each sub-panel is set by the layout result of distributing the back to determine.
Particularly, present embodiment does not limit concrete preset rules, the residue developed width of display panel can be distributed to one or more sub-panel arbitrarily.But in order to make full use of display panel, make page layout more attractive in appearance, the method that present embodiment provides provides following preferred steps when according to preset rules the residue developed width of display panel being distributed to one or more sub-panel:
Each decimal cast out after descending to round according to the developed width to each sub-panel and the corresponding relation of sub-panel, and the putting in order of each decimal of casting out are distributed to one or more sub-panel with the residue developed width of display panel.
Wherein, when the residue developed width of display panel is distributed to one or more sub-panel, the residue developed width of this display panel can be distributed according to width unit.That is to say,, then need the residue developed width N of this display panel is distributed to the sub-panel of ordering in the decimal correspondence of preceding N position, and the width that each sub-panel is assigned with is a width unit if the absolute width of the residue of display panel is a N width unit.The residue developed width of the display panel that calculates with above-mentioned steps 203 is that 2 pixels are example, the decimal of casting out 0.68,0.72 and 0.60 is corresponding sub-panel A, sub-panel B and sub-panel C respectively, if distribute according to the decimal of casting out putting in order from big to small, then need these 2 pixel wide are distributed to ordering at the decimal 0.72 of front two and the sub-panel B and the sub-panel A of 0.68 correspondence.
Need to prove, because the preferred steps that provides of step 204 has been used the decimal of casting out after developed width to each sub-panel descends to round, therefore, after under the developed width of above-mentioned steps 203, rounding to each sub-panel, also need each decimal that to cast out and the corresponding relation of each decimal and sub-panel to store, and when needed, each decimal is sorted, present embodiment does not limit ordering rule, can be according to rank order from big to small, also can be according to rank order from small to large.
The method that present embodiment provides, by rounding under the developed width to each sub-panel of calculating, and will distribute to one or more sub-panel according to the residue developed width that rounds the display panel that the result obtains, page layout can be changed according to the actual size of display panel, thereby can improve the aesthetic property of page layout, and compatible various browser.
Embodiment three
Referring to Fig. 4, present embodiment provides a kind of device of page layout, and this device comprises:
The 3rd computing module 404 is used for calculating the residue developed width of display panel according to the result that rounds who rounds 403 pairs of all sub-panels of module;
Wherein, the 3rd computing module 404, specifically be used to calculate through rounding the integer developed width sum of all sub-panels after module rounds for 403 times,, calculate the residue developed width of display panel according to the integer developed width sum of all sub-panels and the developed width of display panel.
Referring to Fig. 5, further, the device of this page layout also comprises:
Particularly, distribution module 405 specifically is used for according to each decimal cast out and the corresponding relation of sub-panel, and the putting in order of each decimal of casting out, and the residue developed width of display panel is distributed to one or more sub-panel.
In sum, the device that present embodiment provides, by rounding under the developed width to each sub-panel of calculating, and will distribute to one or more sub-panel according to the residue developed width that rounds the display panel that the result obtains, page layout can be changed according to the actual size of display panel, thereby can improve the aesthetic property of page layout, and compatible various browser.
Need to prove: the device of the page layout that the foregoing description provides is when carrying out page layout, only the division with above-mentioned each functional module is illustrated, in the practical application, can as required the above-mentioned functions distribution be finished by different functional modules, the inner structure of the equipment of being about to is divided into different functional modules, to finish all or part of function described above.In addition, the device of the page layout that the foregoing description provides and the method embodiment of page layout belong to same design, and its specific implementation process sees method embodiment for details, repeats no more here.
The invention described above embodiment sequence number is not represented the quality of embodiment just to description.
All or part of step in the embodiment of the invention can utilize software to realize that corresponding software programs can be stored in the storage medium that can read, as CD or hard disk etc.
The above only is preferred embodiment of the present invention, and is in order to restriction the present invention, within the spirit and principles in the present invention not all, any modification of being done, is equal to replacement, improvement etc., all should be included within protection scope of the present invention.
Claims (8)
1. the method for a page layout is characterized in that, described method comprises:
Calculate the developed width of display panel, and calculate the developed width of described each sub-panel according to the relative percentage that developed width and each sub-panel of described display panel is set up;
Round under the developed width to described each sub-panel, and, calculate the residue developed width of described display panel according to the result that rounds of all sub-panels;
According to preset rules the residue developed width of described display panel is distributed to one or more sub-panel, and the width attribute of each sub-panel is set by the layout result of distributing the back to determine.
2. method according to claim 1 is characterized in that, the described result that rounds according to all sub-panels calculates the residue developed width of described display panel, specifically comprises:
Calculate through under the integer developed width sum of all sub-panels after rounding, and, calculate the residue developed width of described display panel according to the integer developed width sum of described all sub-panels and the developed width of described display panel.
3. method according to claim 1 is characterized in that, after rounding under the described developed width to described each sub-panel, also comprises:
Each decimal cast out after will descending to round to the developed width of described each sub-panel and the corresponding relation of described each decimal and sub-panel are stored.
4. method according to claim 3 is characterized in that, describedly according to preset rules the residue developed width of described display panel is distributed to one or more sub-panel, specifically comprises:
According to each decimal cast out and the corresponding relation of sub-panel, and the putting in order of described each decimal of casting out, the residue developed width of described display panel is distributed to one or more sub-panel.
5. the device of a page layout is characterized in that, described device comprises:
First computing module is used to calculate the developed width of display panel;
Second computing module is used for the developed width that the developed width of the display panel that calculates according to described first computing module and relative percentage that each sub-panel is set up calculate described each sub-panel;
Round module, be used for rounding under the developed width of each sub-panel that described second computing module is calculated;
The 3rd computing module is used for the result that rounds that rounds module to all sub-panels according to described, and calculates the residue developed width of described display panel;
Distribution module, the residue developed width that is used for the described display panel that described the 3rd computing module calculated according to preset rules is distributed to one or more sub-panel;
Module is set, is used for being provided with the width attribute of each sub-panel according to the layout result of determining after the described module assigns.
6. device according to claim 5, it is characterized in that, described the 3rd computing module, specifically be used to calculate the integer developed width sum that rounds all sub-panels after module is descended to round through described, according to the integer developed width sum of described all sub-panels and the developed width of described display panel, calculate the residue developed width of described display panel.
7. device according to claim 5 is characterized in that, described device also comprises:
Memory module, be used for described round round under the developed width of module to described each sub-panel after, the corresponding relation of each decimal that will cast out and described each decimal and sub-panel is stored.
8. device according to claim 7, it is characterized in that described distribution module specifically is used for according to each decimal cast out and the corresponding relation of sub-panel, and the putting in order of described each decimal of casting out, the residue developed width of described display panel is distributed to one or more sub-panel.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN2010101730747A CN102243633A (en) | 2010-05-11 | 2010-05-11 | Webpage layout method and device |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN2010101730747A CN102243633A (en) | 2010-05-11 | 2010-05-11 | Webpage layout method and device |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN102243633A true CN102243633A (en) | 2011-11-16 |
Family
ID=44961696
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN2010101730747A Pending CN102243633A (en) | 2010-05-11 | 2010-05-11 | Webpage layout method and device |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN102243633A (en) |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103353889A (en) * | 2013-07-03 | 2013-10-16 | 大连亿联科技股份有限公司 | FEEB double-array gridding system |
| CN104794116A (en) * | 2014-01-16 | 2015-07-22 | 阿里巴巴集团控股有限公司 | Layout method and device for elements in page |
| CN110020291A (en) * | 2017-09-30 | 2019-07-16 | 北京国双科技有限公司 | The processing method and processing device of page layout |
Citations (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN1797403A (en) * | 2004-12-30 | 2006-07-05 | 微软公司 | Methods and apparatus for the evaluation of aspects of a web page |
-
2010
- 2010-05-11 CN CN2010101730747A patent/CN102243633A/en active Pending
Patent Citations (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN1797403A (en) * | 2004-12-30 | 2006-07-05 | 微软公司 | Methods and apparatus for the evaluation of aspects of a web page |
Non-Patent Citations (1)
| Title |
|---|
| 匿名: "百分比的细节--容器大小篇", 《HTTP://WWW.BLUEIDEA.COM/TECH/WEB/2007/4651.ASP》, 18 April 2007 (2007-04-18), pages 1 * |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103353889A (en) * | 2013-07-03 | 2013-10-16 | 大连亿联科技股份有限公司 | FEEB double-array gridding system |
| CN104794116A (en) * | 2014-01-16 | 2015-07-22 | 阿里巴巴集团控股有限公司 | Layout method and device for elements in page |
| CN110020291A (en) * | 2017-09-30 | 2019-07-16 | 北京国双科技有限公司 | The processing method and processing device of page layout |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN102929603B (en) | Interface control arrangement device and interface control arrangement method | |
| CN104679906B (en) | The method and system of link are generated using picture | |
| CN103064685B (en) | A kind of method of modular arrangements Webpage and device | |
| CN101763234B (en) | Method and device for simulating various screen resolutions | |
| CN105392065A (en) | Method and system for arranging page content of intelligent television | |
| Joost | Chariots and other wheeled vehicles in Italy before the Roman Empire | |
| CN103914464B (en) | Streaming media based interactive display method and system of accompanied comments | |
| CN105224769A (en) | A kind of CAE data processing method of sing on web browser and system | |
| CN105095442A (en) | Multimedia data recommendation method and device | |
| CN105224564A (en) | A kind of webpage adapts to screen composition method and device | |
| CN106354490A (en) | Dynamic layout method for EPG page | |
| CN102243633A (en) | Webpage layout method and device | |
| CN108604389A (en) | continuous depth ordering image synthesis | |
| CN103699614B (en) | A kind of method and apparatus for determining Default saving path when downloading resource | |
| CN105045464A (en) | Method and device for prompting of form filling progress | |
| CN104978184A (en) | Dynamic user interface layout algorithm | |
| CN103426096A (en) | User recommending method and device | |
| CN104331429B (en) | The method and device of multiple features dimension quantization is carried out to network object | |
| CN113779040A (en) | Progressive online high-precision map service engine system | |
| CN102929636A (en) | Method and device for creating human-computer interaction interface | |
| CN104615794B (en) | For the mathematical model construction method in three-dimensional electric wiring software | |
| CN103136669A (en) | Product display method and product display system based on product model base | |
| CN205562958U (en) | PCB winding displacement structure of virtual reality glasses | |
| CN106878760A (en) | Draw and parse the method and device of present | |
| CN106919946B (en) | A kind of method and device of audience selection |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| C10 | Entry into substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| C12 | Rejection of a patent application after its publication | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20111116 |