CN105335154A - Multi-terminal-oriented self-adaptive webpage layout method and device - Google Patents
Multi-terminal-oriented self-adaptive webpage layout method and device Download PDFInfo
- Publication number
- CN105335154A CN105335154A CN201510679492.6A CN201510679492A CN105335154A CN 105335154 A CN105335154 A CN 105335154A CN 201510679492 A CN201510679492 A CN 201510679492A CN 105335154 A CN105335154 A CN 105335154A
- Authority
- CN
- China
- Prior art keywords
- layout
- node
- page
- pattern
- resolution
- 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.)
- Granted
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Software Systems (AREA)
- Databases & Information Systems (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Data Mining & Analysis (AREA)
- Human Computer Interaction (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The invention provides a multi-terminal-oriented self-adaptive webpage layout method. The method comprises the following steps: step 10, establishing and editing CSS (Cascading Style Sheets) of page layout and pre-setting a switching node for the CSS; step 20, setting a pattern layout framework of a page, and nesting an icon and a title into respective corresponding functional modules; step 30, writing a Java Script of node switching, judging the resolution ratio of a terminal screen, and automatically switching the node with a corresponding pattern for a global object on the outermost layer of the webpage according to the different resolution ratios so as to represent a corresponding webpage layout. The self-adaptive webpage layout method has the advantages that a webpage structure is planned, the switching node is arranged and a CSS simple and easy switching framework is constructed, so that the development time can be shortened, one webpage can be adapted to screens with the plurality of resolution ratios and good layout and visual effects with good user experiences can be represented.
Description
Technical field
The present invention relates to technical field of website design, more particularly, relate to a kind of self adaptive net layout method towards multiple terminals.
Background technology
Popular along with the universal of the handheld device such as smart mobile phone, IPAD and widescreen, the page layout of now conventional 960px width cannot meet the demand of various intelligent terminal different screen size, page layout's effect dazzling on PC end and the interaction design of hommization, the screen of hand-held device such as mobile phone but cannot show good page effect and visual experience, so, need a kind of page layout's framework of energy good conformity different screen size to meet consumers' demand.
Summary of the invention
One of the technical problem to be solved in the present invention, be to provide a kind of self adaptive net layout method towards multiple terminals, by planning page structure, switching node is set, build CSS (CSS, i.e. CSS (cascading style sheet) are a kind of computereses being used for showing the file patterns such as HTML or XML) simple and easy switching framework, can the development time be shortened, a webpage can be made again to adapt to multiple resolution screen and present the good layout of Consumer's Experience and visual effect.
One of the present invention is achieved in that a kind of self adaptive net layout method towards multiple terminals, comprises the steps:
Step 10, to create and the CSS of edit page layout, preset switching node to CSS;
Step 20, the pattern layout architecture (the pattern layout architecture of the described page, the i.e. layout structure of each functional module on webpage) of the page is set, by nested with title for icon enter in each self-corresponding functional module;
Step 30, write the JavaScript script that node switches, the resolution of terminal screen to be judged and according to different resolution automatically as the outermost global object of webpage switches the node of corresponding pattern, present the page layout of correspondence.
Further, the pattern layout architecture of the described page arranges displaying ratio with number percent, and wherein, the displaying ratio of icon and functional module corresponding to title is fixed.
Further, described step 30 also comprises, and provides the interface of User Defined node, and arranges default node.
Further, described step 30 also comprises, and triggers resize event, automatically switch the node of corresponding pattern according to the resolution of different web pages window size when web page windows size changes, and presents corresponding page layout.
The technical problem to be solved in the present invention two, be to provide a kind of self adaptive net placement device towards multiple terminals, by planning page structure, switching node is set, build the simple and easy switching framework of CSS, can the development time be shortened, a webpage can be made again to adapt to multiple resolution screen and present the good layout of Consumer's Experience and visual effect.
The present invention's two is achieved in that a kind of self adaptive net placement device towards multiple terminals, comprises presetting module, layout modules and handover module:
Described presetting module: for creating the CSS with edit page layout, preset switching node to CSS;
Described layout modules: for arranging the pattern layout architecture (the pattern layout architecture of the described page, the i.e. layout structure of each functional module on webpage) of the page, and by nested with title for icon enter in each self-corresponding functional module;
Described handover module: for writing the JavaScript script that node switches, judges the resolution of terminal screen and according to different resolution automatically as the outermost global object of webpage switches the node of corresponding pattern, presents corresponding page layout.
Further, the pattern layout architecture of the described page arranges displaying ratio with number percent, and wherein, the displaying ratio of icon and functional module corresponding to title is fixed.
Further, described handover module also comprises self-defined unit, for providing the interface of User Defined node, and arranges default node.
Further, described handover module also comprises adjustment unit, for triggering resize event when web page windows size changes, automatically switches the node of corresponding pattern according to the resolution of different web pages window size, presents corresponding page layout.
Tool of the present invention has the following advantages:
1, switched by different pattern nodes, make a kind of structure of web page can adapt to the resolution interface of multiple intelligent terminal, and present good page layout and visual effect;
2, by allowing User Defined node, and the stationary nodes of acquiescence being set, the hobby demand of user can be met, promote Consumer's Experience.
Accompanying drawing explanation
The present invention is further illustrated in conjunction with the embodiments with reference to the accompanying drawings.
Fig. 1 is the inventive method flowchart.
Fig. 2 is present system model calling schematic diagram.
Embodiment
Refer to Fig. 1, a kind of self adaptive net layout method towards multiple terminals of the present invention, comprises the steps:
Step 10, to create and the CSS of edit page layout, preset switching node to CSS;
Step 20, the pattern layout architecture (the pattern layout architecture of the described page, the i.e. layout structure of each functional module on webpage) of the page is set, by nested with title for icon enter in each self-corresponding functional module;
Step 30, write the JavaScript script that node switches, the resolution of terminal screen to be judged and according to different resolution automatically as the outermost global object of webpage switches the node of corresponding pattern, present the page layout of correspondence.
By step 10 to step 30, a kind of structure of web page can be made to adapt to the resolution interface of multiple intelligent terminal, and present good page layout and visual effect.
The pattern layout architecture of the described page arranges displaying ratio with number percent, and wherein, the displaying ratio of icon and functional module corresponding to title is fixed.
Described step 30 also comprises, and provides the interface of User Defined node, and arranges default node; By allowing User Defined node, and the stationary nodes of acquiescence being set, the hobby demand of user can be met, promote Consumer's Experience;
Such as, when intelligent terminal interface resolution is lower than 640 pixel, the partial function module on structure of web page will be hidden and not show, and user can by liking User-defined Node, select the functional module that is hidden mouse upwards/down/left/right slip time, this functional module is floated and is occurred.
Described step 30 also comprises, and triggers resize event, automatically switch the node of corresponding pattern according to the resolution of different web pages window size when web page windows size changes, and presents corresponding page layout; Even if when webpage is carried out window convergent-divergent by user like this, webpage also can present corresponding page layout's effect according to the resolution of different windows size.
As shown in Figure 2, based on said method, a kind of self adaptive net placement device towards multiple terminals of the present invention, comprises presetting module, layout modules and handover module:
Described presetting module: for creating the CSS with edit page layout, preset switching node to CSS;
Described layout modules: for arranging the layout structure of the page, and by nested with title for icon enter in each self-corresponding functional module;
Described handover module: for writing the JavaScript script that node switches, judges the resolution of terminal screen and according to different resolution automatically as the outermost global object of webpage switches the node of corresponding pattern, presents corresponding page layout.
The combination in any of above-mentioned module does not all affect the realization of the technical program.
The pattern layout architecture of the described page arranges displaying ratio with number percent, and wherein, the displaying ratio of icon and functional module corresponding to title is fixed.
Described handover module also comprises self-defined unit, for providing the interface of User Defined node, and arranges default node; By allowing User Defined node, and the stationary nodes of acquiescence being set, the hobby demand of user can be met, promote Consumer's Experience.
Described handover module also comprises adjustment unit, for triggering resize event when web page windows size changes, automatically switches the node of corresponding pattern according to the resolution of different web pages window size, presents corresponding page layout; Even if when webpage is carried out window convergent-divergent by user like this, webpage also can present corresponding page layout's effect according to the resolution of different windows size.
The present invention, by planning page structure, arranges switching node, builds the simple and easy switching framework of CSS, can shorten the development time, a webpage can be made again to adapt to multiple resolution screen and present the good layout of Consumer's Experience and visual effect.
Although the foregoing describe the specific embodiment of the present invention; but be familiar with those skilled in the art to be to be understood that; specific embodiment described by us is illustrative; instead of for the restriction to scope of the present invention; those of ordinary skill in the art, in the modification of the equivalence done according to spirit of the present invention and change, should be encompassed in scope that claim of the present invention protects.
Claims (8)
1., towards a self adaptive net layout method for multiple terminals, it is characterized in that: comprise the steps:
Step 10, to create and the CSS of edit page layout, preset switching node to CSS;
Step 20, the pattern layout architecture of the page is set, by nested with title for icon enter in each self-corresponding functional module;
Step 30, write the JavaScript script that node switches, the resolution of terminal screen to be judged and according to different resolution automatically as the outermost global object of webpage switches the node of corresponding pattern, present the page layout of correspondence.
2. a kind of self adaptive net layout method towards multiple terminals according to claim 1, is characterized in that: the pattern layout architecture of the described page arranges displaying ratio with number percent, and wherein, the displaying ratio of icon and functional module corresponding to title is fixed.
3. a kind of self adaptive net layout method towards multiple terminals according to claim 1, is characterized in that: described step 30 also comprises, provides the interface of User Defined node, and arrange default node.
4. a kind of self adaptive net layout method towards multiple terminals according to claim 1, it is characterized in that: described step 30 also comprises, resize event is triggered when web page windows size changes, automatically switch the node of corresponding pattern according to the resolution of different web pages window size, present corresponding page layout.
5. towards a self adaptive net placement device for multiple terminals, it is characterized in that: comprise presetting module, layout modules and handover module:
Described presetting module: for creating the CSS with edit page layout, preset switching node to CSS;
Described layout modules: for arranging the pattern layout architecture of the page, and by nested with title for icon enter in each self-corresponding functional module;
Described handover module: for writing the JavaScript script that node switches, judges the resolution of terminal screen and according to different resolution automatically as the outermost global object of webpage switches the node of corresponding pattern, presents corresponding page layout.
6. a kind of self adaptive net placement device towards multiple terminals according to claim 5, is characterized in that: the pattern layout architecture of the described page arranges displaying ratio with number percent, and wherein, the displaying ratio of icon and functional module corresponding to title is fixed.
7. a kind of self adaptive net placement device towards multiple terminals according to claim 5, is characterized in that: described handover module also comprises self-defined unit, for providing the interface of User Defined node, and arranging default node.
8. a kind of self adaptive net placement device towards multiple terminals according to claim 5, it is characterized in that: described handover module also comprises adjustment unit, for triggering resize event when web page windows size changes, automatically switch the node of corresponding pattern according to the resolution of different web pages window size, present corresponding page layout.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201510679492.6A CN105335154B (en) | 2015-10-19 | 2015-10-19 | A kind of self adaptive net layout method and device towards multiple terminals |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201510679492.6A CN105335154B (en) | 2015-10-19 | 2015-10-19 | A kind of self adaptive net layout method and device towards multiple terminals |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN105335154A true CN105335154A (en) | 2016-02-17 |
| CN105335154B CN105335154B (en) | 2019-09-20 |
Family
ID=55285721
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201510679492.6A Active CN105335154B (en) | 2015-10-19 | 2015-10-19 | A kind of self adaptive net layout method and device towards multiple terminals |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN105335154B (en) |
Cited By (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN106168959A (en) * | 2016-06-29 | 2016-11-30 | 合网络技术（北京）有限公司 | Page layout method and device |
| CN109254818A (en) * | 2018-08-28 | 2019-01-22 | 北京影谱科技股份有限公司 | For the Pixel-level localization method and device of browser different resolution |
| CN110020230A (en) * | 2017-09-30 | 2019-07-16 | 北京国双科技有限公司 | A kind of adaptive display method and device of navigation bar |
| CN111221530A (en) * | 2020-01-08 | 2020-06-02 | 北京市科学技术情报研究所 | Mobile terminal Web application interface construction method, Web application interface and operation method thereof |
| CN114237789A (en) * | 2021-11-24 | 2022-03-25 | 浙江大学 | Uni-app-based adaptive framework meeting appropriate aging and using method |
Citations (11)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101263490A (en) * | 2005-09-09 | 2008-09-10 | 微软公司 | Methods and systems for providing direct style sheet editing |
| CN101908076B (en) * | 2010-08-24 | 2012-09-12 | 北京世纪高通科技有限公司 | Page layout self-adaptive method and device |
| CN103064685A (en) * | 2012-12-27 | 2013-04-24 | 北京思特奇信息技术股份有限公司 | Method and device for configuring webpage in modularization mode |
| CN103473347A (en) * | 2013-09-24 | 2013-12-25 | 北京大学 | Web page similarity-based browser rendering optimization method |
| CN103488777A (en) * | 2013-09-30 | 2014-01-01 | 乐视网信息技术（北京）股份有限公司 | Method and system for adjusting webpage display effect |
| CN103593196A (en) * | 2013-11-25 | 2014-02-19 | 深信服网络科技（深圳）有限公司 | Page layout self-adaptation method and device |
| CN104123362A (en) * | 2014-07-18 | 2014-10-29 | 华中师范大学 | Multi-terminal-device-oriented webpage adaptation layout method |
| WO2015017222A1 (en) * | 2013-08-02 | 2015-02-05 | Moboom Ltd. | Methods and systems for generating server-side media queries |
| CN104537002A (en) * | 2014-12-15 | 2015-04-22 | 山东中创软件商用中间件股份有限公司 | CSS compatibility optimizing method and system |
| CN104866570A (en) * | 2015-05-22 | 2015-08-26 | 国云科技股份有限公司 | Method for implementing CSS multi-browser compatibility |
| CN105022667A (en) * | 2014-04-25 | 2015-11-04 | 中国科学院声学研究所 | Embedded browser CSS (Cascading Style Sheets) based engine parallelization method |
-
2015
- 2015-10-19 CN CN201510679492.6A patent/CN105335154B/en active Active
Patent Citations (11)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101263490A (en) * | 2005-09-09 | 2008-09-10 | 微软公司 | Methods and systems for providing direct style sheet editing |
| CN101908076B (en) * | 2010-08-24 | 2012-09-12 | 北京世纪高通科技有限公司 | Page layout self-adaptive method and device |
| CN103064685A (en) * | 2012-12-27 | 2013-04-24 | 北京思特奇信息技术股份有限公司 | Method and device for configuring webpage in modularization mode |
| WO2015017222A1 (en) * | 2013-08-02 | 2015-02-05 | Moboom Ltd. | Methods and systems for generating server-side media queries |
| CN103473347A (en) * | 2013-09-24 | 2013-12-25 | 北京大学 | Web page similarity-based browser rendering optimization method |
| CN103488777A (en) * | 2013-09-30 | 2014-01-01 | 乐视网信息技术（北京）股份有限公司 | Method and system for adjusting webpage display effect |
| CN103593196A (en) * | 2013-11-25 | 2014-02-19 | 深信服网络科技（深圳）有限公司 | Page layout self-adaptation method and device |
| CN105022667A (en) * | 2014-04-25 | 2015-11-04 | 中国科学院声学研究所 | Embedded browser CSS (Cascading Style Sheets) based engine parallelization method |
| CN104123362A (en) * | 2014-07-18 | 2014-10-29 | 华中师范大学 | Multi-terminal-device-oriented webpage adaptation layout method |
| CN104537002A (en) * | 2014-12-15 | 2015-04-22 | 山东中创软件商用中间件股份有限公司 | CSS compatibility optimizing method and system |
| CN104866570A (en) * | 2015-05-22 | 2015-08-26 | 国云科技股份有限公司 | Method for implementing CSS multi-browser compatibility |
Cited By (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN106168959A (en) * | 2016-06-29 | 2016-11-30 | 合网络技术（北京）有限公司 | Page layout method and device |
| CN106168959B (en) * | 2016-06-29 | 2019-12-17 | 合一网络技术(北京)有限公司 | Webpage layout method and device |
| CN110020230A (en) * | 2017-09-30 | 2019-07-16 | 北京国双科技有限公司 | A kind of adaptive display method and device of navigation bar |
| CN109254818A (en) * | 2018-08-28 | 2019-01-22 | 北京影谱科技股份有限公司 | For the Pixel-level localization method and device of browser different resolution |
| CN109254818B (en) * | 2018-08-28 | 2021-11-23 | 北京影谱科技股份有限公司 | Pixel-level positioning method and device for different resolutions of browser |
| CN111221530A (en) * | 2020-01-08 | 2020-06-02 | 北京市科学技术情报研究所 | Mobile terminal Web application interface construction method, Web application interface and operation method thereof |
| CN111221530B (en) * | 2020-01-08 | 2023-11-14 | 北京市科学技术情报研究所 | Mobile terminal Web application interface construction method, web application interface and operation method thereof |
| CN114237789A (en) * | 2021-11-24 | 2022-03-25 | 浙江大学 | Uni-app-based adaptive framework meeting appropriate aging and using method |
Also Published As
| Publication number | Publication date |
|---|---|
| CN105335154B (en) | 2019-09-20 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN105335154A (en) | Multi-terminal-oriented self-adaptive webpage layout method and device | |
| US9389759B2 (en) | Environment for responsive graphical designs | |
| CN102799350B (en) | Method and device for determining focal element | |
| CN101834938A (en) | Device and method for realizing horizontal/vertical screen switching of mobile terminal | |
| CN103561338B (en) | Instruction mode switching method and device based on intelligent television interface | |
| US20150082211A1 (en) | Terminal and method for editing user interface | |
| WO2014183661A1 (en) | Menu processing method and device | |
| CN104423879A (en) | Information processing apparatus, storage medium, and control method | |
| CN104978317A (en) | Webpage generating method, webpage generating device, website generating method and website building server | |
| US9946806B2 (en) | Exporting responsive designs from a graphical design tool | |
| CN103648055A (en) | Screen adaptive method of intelligent TV browser, device thereof and intelligent TV | |
| CN103902722B (en) | Webpage display methods and terminal based on B/S frameworks | |
| JP2012008686A (en) | Information processor and method, and program | |
| CN101025761A (en) | Main menu interface and its construcing method | |
| CN107391698A (en) | A kind of method, apparatus, medium and the computing device of Dynamic Announce webpage | |
| CN104750365A (en) | Interface display method and device | |
| CN103309589A (en) | Custom keyboard key arrangement method and device | |
| CN102841740A (en) | Information processing apparatus, information processing method, and program | |
| CN105677351A (en) | Multi-window compatible display method and device | |
| CN105094584A (en) | View scaling processing method and view scaling processing apparatus | |
| CN109189301A (en) | A kind of method and device of screenshot capture | |
| CN110381192B (en) | Virtual key control method and mobile terminal | |
| CN107861711A (en) | page adaptation method and device | |
| CN103207729A (en) | Method and system for setting head portraits of contact persons in batches | |
| CN103440123A (en) | Method and device for setting individualized space on mobile terminal |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| C10 | Entry into substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |