CN113419724A - 一种可视化页面布局方法 - Google Patents
一种可视化页面布局方法 Download PDFInfo
- Publication number
- CN113419724A CN113419724A CN202110721359.8A CN202110721359A CN113419724A CN 113419724 A CN113419724 A CN 113419724A CN 202110721359 A CN202110721359 A CN 202110721359A CN 113419724 A CN113419724 A CN 113419724A
- Authority
- CN
- China
- Prior art keywords
- page layout
- layout
- column
- visual
- page
- 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
- 230000000007 visual effect Effects 0.000 title claims abstract description 35
- 238000000034 method Methods 0.000 title claims abstract description 17
- 239000012634 fragment Substances 0.000 claims description 11
- 230000005540 biological transmission Effects 0.000 claims description 6
- 238000004590 computer program Methods 0.000 claims description 4
- 238000012800 visualization Methods 0.000 abstract description 7
- 230000000694 effects Effects 0.000 abstract description 3
- 101100328895 Caenorhabditis elegans rol-8 gene Proteins 0.000 description 2
- 230000009286 beneficial effect Effects 0.000 description 1
- 230000008676 import Effects 0.000 description 1
- 230000010354 integration Effects 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/34—Graphical or visual programming
-
- 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/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Databases & Information Systems (AREA)
- Human Computer Interaction (AREA)
- Data Mining & Analysis (AREA)
- Management, Administration, Business Operations System, And Electronic Commerce (AREA)
Abstract
本发明公开了一种可视化页面布局方法，首先定义一种页面布局规范，开发人员可以基于此中页面布局规范编写页面布局文件传输至服务器，形成可视化的页面布局模板；同时提供页面布局设计器，支持可视化页面布局设计，依据页面布局规范形成布局文件及模板；本发明通过将页面布局形成一套页面布局规范，大大缩减的进行页面布局调整的工作量，开始人员可以依据页面布局规范，快速定义页面布局，形成布局文件；同时对于实施人员，此类非专业开发出身人员，可以进行可视化的页面布局调整；可视化的将是此页面布局技术的一大亮点，通过可视化页面布局设计器，简单、快速、完成设计整体页面布局，快速提交及呈现效果。大大降低门槛和极大提升了产品的体验。
Description
技术领域
本发明涉及可视化页面布局技术领域，具体为一种可视化页面布局方法。
背景技术
Web技术的发展，使得管理系统的开发更方便、功能更强大，在此系统的开发过程中，Web技术起了一个骨架式的支持作用；与此同时组件技术的发展为系统的开放性、集成性提供了便利，有效合理地引入组件技术是当前Web系统开发与发展的一个方向；通过对系统的开发进行建模，形象直观的图形化表示，可以显示系统的流程与功能。选择有效的建模方法，充分利用Web技术与组件技术，提高软件的开发效率，提高的软件的可靠性和可维护性，是每个软件开发人员所关心的问题。
目前的页面布局无法实现可视化操作，页面布局效率低，因此，有必要能够改进。
发明内容
本发明的目的在于提供一种可视化页面布局方法，以解决上述背景技术中提出的问题。
为实现上述目的，本发明提供如下技术方案：一种可视化页面布局方法,包括以下步骤：
A、首先定义一种页面布局规范；
B、开发人员基于此中页面布局规范编写页面布局文件传输至服务器，形成可视化的页面布局模板；
C、同时提供页面布局设计器，支持可视化页面布局设计，依据页面布局规范形成布局文件及模板。
优选的，所述布局设计器预置不同的页面布局模板，将页面布局可视化，通过不同的页面布局模板，及基于页面布局规范的布局文件，将页面布局可视化，进行页面布局的可视化调整。
优选的，每一个不同的页面布局由布局容器、通栏容器、盒子容器、栏目片段集合四部分组成；其中，布局容器：一个栏目布局有且只有一个栏目容器；通栏容器：其中一个栏目容器中可以包含一个或多个栏目通栏；盒子容器：其中一个栏目通栏可以包含一个或多个栏目盒子；栏目片段集合：其中一个盒子容器可以包含一个或多个栏目片段。
优选的，一种可视化页面布局系统，包括定义模块、传输模块和布局设计器，其中，定义模块用于定义一种页面布局规范；传输模块用于将页面布局文件传输至服务器，形成可视化的页面布局模板；布局设计器依据页面布局规范形成布局文件及模板。
优选的，一种计算机存储介质，所述计算机存储介质上存储有计算机程序，所述计算机程序被处理器执行时，使得处理器执行上述所述可视化页面布局方法的步骤。
与现有技术相比，本发明的有益效果是：本发明通过将页面布局形成一套页面布局规范，大大缩减的进行页面布局调整的工作量，开始人员可以依据页面布局规范，快速定义页面布局，形成布局文件；同时对于实施人员，此类非专业开发出身人员，可以进行可视化的页面布局调整，大大降低了实施成本和提升了产品体验；可视化的将是此页面布局技术的一大亮点，通过可视化页面布局设计器，简单、快速、完成设计整体页面布局，快速提交及呈现效果。大大降低门槛和极大提升了产品的体验。
附图说明
图1为本发明流程图；
图2为本发明布局设计示意图；
图3为本发明页面布局的可视化调整示意图。
具体实施方式
下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
在本发明的描述中，需要说明的是，术语“上”、“下”、“内”、“外”“前端”、“后端”、“两端”、“一端”、“另一端”等指示的方位或位置关系为基于附图所示的方位或位置关系，仅是为了便于描述本发明和简化描述，而不是指示或暗示所指的装置或元件必须具有特定的方位、以特定的方位构造和操作，因此不能理解为对本发明的限制。此外，术语“第一”、“第二”仅用于描述目的，而不能理解为指示或暗示相对重要性。
在本发明的描述中，需要说明的是，除非另有明确的规定和限定，术语“安装”、“设置有”、“连接”等，应做广义理解，例如“连接”，可以是固定连接，也可以是可拆卸连接，或一体地连接；可以是机械连接，也可以是电连接；可以是直接相连，也可以通过中间媒介间接相连，可以是两个元件内部的连通。对于本领域的普通技术人员而言，可以具体情况理解上述术语在本发明中的具体含义。
请参阅图1-3，本发明提供一种技术方案：一种可视化页面布局方法,包括以下步骤：
A、首先定义一种页面布局规范；
B、开发人员基于此中页面布局规范编写页面布局文件传输至服务器，形成可视化的页面布局模板；
C、同时提供页面布局设计器，支持可视化页面布局设计，依据页面布局规范形成布局文件及模板。
本发明中，布局设计器预置不同的页面布局模板，将页面布局可视化，通过不同的页面布局模板，及基于页面布局规范的布局文件，将页面布局可视化，进行页面布局的可视化调整。
本发明中，每一个不同的页面布局由布局容器、通栏容器、盒子容器、栏目片段集合四部分组成；
布局容器：用下述html描述，一个栏目布局有且只有一个栏目容器；
<div class＝"container">
</div>
通栏容器：用下述html结构描述，其中一个栏目容器中可以包含一个或多个栏目通栏；
<div class＝"row">
</div>
盒子容器：用下述html结构描述，其中一个栏目通栏可以包含一个或多个栏目盒子；
<div class＝"col-6col">
</div>
<div class＝"col-6col">
</div>
其中col-6和col-6表示这两个盒子容器的宽度占整个通栏的比例，系统提供了下述的宽度样式提供给定义盒子容器时使用：
通栏容器中的所有盒子容器的宽度样式中col-w中的w相加要等于12。
栏目片段集合：用下述html结构描述，其中一个盒子容器可以包含一个或多个栏目片段(栏目片段集合)；
<div class＝'fragment'x＝"0"y＝"0"id＝"fragment_0_0"sWidth＝"10"cellAdd＝"true"maxSection＝"-1"></div>
<div class＝'fragment'x＝"0"y＝"1"id＝"fragment_1_0"sWidth＝"3"cellAdd＝"true"maxSection＝"-1"></div>
<div class＝'fragment'x＝"0"y＝"2"id＝"fragment_2_0"sWidth＝"5"cellAdd＝"true"maxSection＝"-1"></div>
开发人员基于上述页面布局规范，按照页面布局要求编写代码形成布局文件，导入服务器中即可；通过栏目布局设计工具生成出符合栏目布局规范的布局文件，并将布局文件保存到数据库中。
本发明还公开了一种可视化页面布局系统，包括定义模块、传输模块和布局设计器，其中，定义模块用于定义一种页面布局规范；传输模块用于将页面布局文件传输至服务器，形成可视化的页面布局模板；布局设计器依据页面布局规范形成布局文件及模板。
此外，本发明还公开了一种计算机存储介质，所述计算机存储介质上存储有计算机程序，所述计算机程序被处理器执行时，使得处理器执行上述所述可视化页面布局方法的步骤。
综上所述，本发明通过将页面布局形成一套页面布局规范，大大缩减的进行页面布局调整的工作量，开始人员可以依据页面布局规范，快速定义页面布局，形成布局文件；同时对于实施人员，此类非专业开发出身人员，可以进行可视化的页面布局调整，大大降低了实施成本和提升了产品体验；可视化的将是此页面布局技术的一大亮点，通过可视化页面布局设计器，简单、快速、完成设计整体页面布局，快速提交及呈现效果。大大降低门槛和极大提升了产品的体验。
对于本领域技术人员而言，显然本发明不限于上述示范性实施例的细节，而且在不背离本发明的精神或基本特征的情况下，能够以其他的具体形式实现本发明。因此，无论从哪一点来看，均应将实施例看作是示范性的，而且是非限制性的，本发明的范围由所附权利要求而不是上述说明限定，因此旨在将落在权利要求的等同要件的含义和范围内的所有变化囊括在本发明内。不应将权利要求中的任何附图标记视为限制所涉及的权利要求。
Claims (5)
1.一种可视化页面布局方法,其特征在于：包括以下步骤：
A、首先定义一种页面布局规范；
B、开发人员基于此中页面布局规范编写页面布局文件传输至服务器，形成可视化的页面布局模板；
C、同时提供页面布局设计器，支持可视化页面布局设计，依据页面布局规范形成布局文件及模板。
2.根据权利要求1所述的一种可视化页面布局方法，其特征在于：所述布局设计器预置不同的页面布局模板，将页面布局可视化，通过不同的页面布局模板，及基于页面布局规范的布局文件，将页面布局可视化，进行页面布局的可视化调整。
3.根据权利要求1所述的一种可视化页面布局方法，其特征在于：每一个不同的页面布局由布局容器、通栏容器、盒子容器、栏目片段集合四部分组成；其中，布局容器：一个栏目布局有且只有一个栏目容器；通栏容器：其中一个栏目容器中可以包含一个或多个栏目通栏；盒子容器：其中一个栏目通栏可以包含一个或多个栏目盒子；栏目片段集合：其中一个盒子容器可以包含一个或多个栏目片段。
4.一种可视化页面布局系统，其特征在于：包括定义模块、传输模块和布局设计器，其中，定义模块用于定义一种页面布局规范；传输模块用于将页面布局文件传输至服务器，形成可视化的页面布局模板；布局设计器依据页面布局规范形成布局文件及模板。
5.一种计算机存储介质，其特征在于，所述计算机存储介质上存储有计算机程序，所述计算机程序被处理器执行时，使得处理器执行权利要求1至3中任一项权利要求所述可视化页面布局方法的步骤。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110721359.8A CN113419724A (zh) | 2021-06-28 | 2021-06-28 | 一种可视化页面布局方法 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110721359.8A CN113419724A (zh) | 2021-06-28 | 2021-06-28 | 一种可视化页面布局方法 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN113419724A true CN113419724A (zh) | 2021-09-21 |
Family
ID=77717797
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110721359.8A Pending CN113419724A (zh) | 2021-06-28 | 2021-06-28 | 一种可视化页面布局方法 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113419724A (zh) |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110007917A (zh) * | 2019-03-08 | 2019-07-12 | 国电南瑞科技股份有限公司 | 一种基于浏览器的可视化页面生成和浏览方法 |
| CN110007999A (zh) * | 2019-04-15 | 2019-07-12 | 成都四方伟业软件股份有限公司 | 页面布局方法、装置及计算机可读存储介质 |
| CN110059278A (zh) * | 2019-03-12 | 2019-07-26 | 平安普惠企业管理有限公司 | Web页面配置方法、服务器及计算机可读存储介质 |
| US20210081606A1 (en) * | 2019-09-18 | 2021-03-18 | Microsoft Technology Licensing, Llc | Data model for page layouts |
| CN112835576A (zh) * | 2021-01-18 | 2021-05-25 | 北京致远互联软件股份有限公司 | 一种页面封装方法 |
-
2021
- 2021-06-28 CN CN202110721359.8A patent/CN113419724A/zh active Pending
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110007917A (zh) * | 2019-03-08 | 2019-07-12 | 国电南瑞科技股份有限公司 | 一种基于浏览器的可视化页面生成和浏览方法 |
| CN110059278A (zh) * | 2019-03-12 | 2019-07-26 | 平安普惠企业管理有限公司 | Web页面配置方法、服务器及计算机可读存储介质 |
| CN110007999A (zh) * | 2019-04-15 | 2019-07-12 | 成都四方伟业软件股份有限公司 | 页面布局方法、装置及计算机可读存储介质 |
| US20210081606A1 (en) * | 2019-09-18 | 2021-03-18 | Microsoft Technology Licensing, Llc | Data model for page layouts |
| CN112835576A (zh) * | 2021-01-18 | 2021-05-25 | 北京致远互联软件股份有限公司 | 一种页面封装方法 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CA2517409C (en) | Method, system, and computer-readable medium for creating and laying out a graphic within an application program | |
| US9430459B2 (en) | Automated table transformations from examples | |
| KR100898476B1 (ko) | 스키마 기반의 계층적 데이터 구조를 단층적 데이터구조로 변환하기 위한 방법 및 시스템 | |
| US20050183008A1 (en) | Method and system for separation of content and layout definitions in a display description | |
| WO2018023933A1 (zh) | 一种生成思维导图的方法和装置 | |
| US20080134019A1 (en) | Processing Data And Documents That Use A Markup Language | |
| US20090198714A1 (en) | Document processing and management approach for reflecting changes in one representation of a document to another representation | |
| WO2005098665A1 (en) | Apparatus for processing documents that use a mark up language | |
| JPWO2006085455A1 (ja) | 文書処理装置および文書処理方法 | |
| JPWO2006051958A1 (ja) | 情報配信システム | |
| CN110874367A (zh) | 结构化查询语言语句的可视化方法和装置 | |
| US20100100807A1 (en) | Data processing device, and data processing method | |
| JPWO2006051960A1 (ja) | 文書処理装置及び文書処理方法 | |
| EP1821219A1 (en) | Document processing device and document processing method | |
| US20070283246A1 (en) | Processing Documents In Multiple Markup Representations | |
| EP1830274A1 (en) | Server device and name space issuing method | |
| JPWO2006051959A1 (ja) | 文書処理装置及び文書処理方法 | |
| EP1744253A1 (en) | Document processing device and document processing method | |
| CN113419724A (zh) | 一种可视化页面布局方法 | |
| CN112835576A (zh) | 一种页面封装方法 | |
| CN109583068B (zh) | 基于主接线图的智能变电站二次系统快速建模系统及方法 | |
| US20080005085A1 (en) | Server Device and Search Method | |
| EP1821220A1 (en) | Data processing device, document processing device, and document processing method | |
| JPWO2007105364A1 (ja) | 文書処理装置及び文書処理方法 | |
| JP2007183849A (ja) | 文書処理装置 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| RJ01 | Rejection of invention patent application after publication | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20210921 |