CN112464128A - 一种使用鼠标动态切分网页显示区域的方法 - Google Patents
一种使用鼠标动态切分网页显示区域的方法 Download PDFInfo
- Publication number
- CN112464128A CN112464128A CN201910839810.9A CN201910839810A CN112464128A CN 112464128 A CN112464128 A CN 112464128A CN 201910839810 A CN201910839810 A CN 201910839810A CN 112464128 A CN112464128 A CN 112464128A
- Authority
- CN
- China
- Prior art keywords
- mouse
- line
- clicking
- area
- webpage
- 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
- 238000000034 method Methods 0.000 title claims abstract description 21
- 230000011218 segmentation Effects 0.000 claims abstract description 14
- 238000009826 distribution Methods 0.000 claims abstract description 9
- 238000005192 partition Methods 0.000 claims description 12
- 238000010276 construction Methods 0.000 claims description 6
- 238000003780 insertion Methods 0.000 claims description 6
- 230000037431 insertion Effects 0.000 claims description 6
- 238000005520 cutting process Methods 0.000 claims description 4
- 238000000926 separation method Methods 0.000 claims description 3
- 230000001960 triggered effect Effects 0.000 claims description 3
- 238000003825 pressing Methods 0.000 claims description 2
- 238000011161 development Methods 0.000 abstract description 6
- 230000018109 developmental process Effects 0.000 abstract description 6
- 238000007726 management method Methods 0.000 abstract description 5
- 230000002950 deficient Effects 0.000 description 3
- 238000004519 manufacturing process Methods 0.000 description 3
- 230000001737 promoting effect Effects 0.000 description 3
- 238000010008 shearing Methods 0.000 description 3
- 238000010586 diagram Methods 0.000 description 2
- 230000000007 visual effect Effects 0.000 description 2
- 230000007547 defect Effects 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 230000004069 differentiation Effects 0.000 description 1
- 230000000694 effects Effects 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 238000004880 explosion Methods 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000012545 processing Methods 0.000 description 1
- 238000000638 solvent extraction Methods 0.000 description 1
Images
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/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
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
- G06F3/04812—Interaction techniques based on cursor appearance or behaviour, e.g. being affected by the presence of displayed objects
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
- G06F3/0483—Interaction with page-structured environments, e.g. book metaphor
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Databases & Information Systems (AREA)
- Data Mining & Analysis (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本发明公开了一种使用鼠标动态切分网页显示区域的方法，具体涉及网页显示区域分割技术领域，包括步骤一：合理规划显示区域布局，将显示屏网页显示区域模块化构图，画出预调模块版式和模块分界线坐标；步骤二：在显示屏上新建一个网页模板，单击右键触发打开命令栏，点击清空画布，建立一个空白区域模板；步骤三：移动鼠标将光标放置在空白区域模板内，单击右键触发打开命令栏。本发明通过基于HTML5鼠标事件，即鼠标点击、鼠标拖动和鼠标释放，能够简化网页分布操作，通过鼠标点击切分区域让普通人员拥有了设计看板的技能，从而降低了技术门槛，使网页化管理得到推广，能够提高工作效率，促进社会的进步和经济的发展。
Description
技术领域
本发明涉及网页显示区域分割技术领域，更具体地说，本发明涉及一种使用鼠标动态切分网页显示区域的方法。
背景技术
在信息化发达的今天，信息爆炸的时代，网页数量数以百亿计。网页上呈现的内容从匮乏到丰富。除了内容的生动，网页也以各种形式得以展现。但不管如何展现，都逃离不了从上到下，或者从左到右的分区。这种分区是从开发网页的时候就已经被程序者设计好的，这种设计也是需要专业的技术人员才可以实现的。所以没有专业技术的普通人员要实现这种分区，是难以想象的。
由于网页布局的专业性，使网页化管理不能推广化，这就导致了普通人员不能很好地利用网页生产和生活，降低了工作效率，阻碍了社会的进步和经济的发展。
因此，发明一种使用鼠标动态切分网页显示区域的方法来解决上述问题很有必要。
发明内容
为了克服现有技术的上述缺陷，本发明的实施例提供一种使用鼠标动态切分网页显示区域的方法，通过基于HTML5鼠标事件，即鼠标点击、鼠标拖动和鼠标释放，能够简化网页分布操作，通过鼠标点击切分区域让普通人员拥有了设计看板的技能，从而降低了技术门槛，使网页化管理得到推广，能够提高工作效率，促进社会的进步和经济的发展，以解决背景技术中所提出问题。
为实现上述目的，本发明提供如下技术方案：一种使用鼠标动态切分网页显示区域的方法，具体操作步骤为：
步骤一：合理规划显示区域布局，将显示屏网页显示区域模块化构图，画出预调模块版式和模块分界线坐标；
步骤二：在显示屏上新建一个网页模板，单击右键触发打开命令栏，点击清空画布，建立一个空白区域模板；
步骤三：移动鼠标将光标放置在空白区域模板内，单击右键触发打开命令栏，点击插入纵线或插入横线；
步骤四：使用纵线和横线对空白区域模板进行横向或者纵向切分，切分后利用分隔线插入空白区域分隔各切面；
步骤五：移动鼠标使光标与分割线重合后，按下左键选定分割线并拖动，改变分割线的位置，分割线位置调节满意后，松开鼠标左键，根据步骤一中图纸和数据构建分割线集；
步骤六：分割线规划完全后，右键触发出命令栏，点击刷新布局，使显示区域刷新，自适应并自动保存格式，确定被分割区域的最终大小；
步骤七：对各部分分割区域进行编辑，命名各区域名称，并将各类信息归类放入与之对应的分割区域内，再次右键触发出命令栏，点击刷新布局，使区域内容刷新，自适应并自动保存网页样板分布。
优选的，所述命令栏中还包括隐藏网格命令，所述隐藏网格命令用于开启和关闭空白区域模板内的构建辅助网格，所述空白区域模板边框设置有构建辅助刻度。
优选的，所述纵线和横线均设置为正交模式线，所述纵线和横线两端分别与空白区域模板边框相匹配。
优选的，所述步骤五中分割线调节基于HTML5鼠标事件，即鼠标点击、鼠标拖动和鼠标释放。
优选的，所述步骤五中改变分割线的位置时使用捕捉单元，所述捕捉单元用于正交模式线捕捉辅助网格线，所述辅助网格线与辅助刻度相匹配。
优选的，所述步骤六中利用剪切单元对分割线节点外侧多余线段进行剪切修饰。
本发明的技术效果和优点：
1、通过基于HTML5鼠标事件，即鼠标点击、鼠标拖动和鼠标释放，能够简化网页分布操作，通过鼠标点击切分区域让普通人员拥有了设计看板的技能，从而降低了技术门槛，使网页化管理得到推广，能够提高工作效率，促进社会的进步和经济的发展；
2、通过设置构建辅助网格和构建辅助刻度，提高网页显示区域的分切精度，能够制作标准化的显示分区，捕捉单元和正交模式线配合保证显示分区的方正，剪切单元对分割线节点外侧多余线段剪切后完成显示分区规划，提高显示分区的整洁，保证其视觉效果。
附图说明
图1为本发明的初始空白区域模板图。
图2为本发明的分割网页样板分布图。
具体实施方式
下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
本发明提供了一种使用鼠标动态切分网页显示区域的方法，具体操作步骤为：
步骤一：合理规划显示区域布局，将显示屏网页显示区域模块化构图，画出预调模块版式和模块分界线坐标；
步骤二：在显示屏上新建一个网页模板，单击右键触发打开命令栏，点击清空画布，建立一个空白区域模板；
步骤三：移动鼠标将光标放置在空白区域模板内，单击右键触发打开命令栏，点击插入纵线或插入横线；
步骤四：使用纵线和横线对空白区域模板进行横向或者纵向切分，切分后利用分隔线插入空白区域分隔各切面；
步骤五：分割线调节基于HTML5鼠标事件，即鼠标点击、鼠标拖动和鼠标释放，移动鼠标使光标与分割线重合后，按下左键选定分割线并拖动，改变分割线的位置，改变分割线的位置时使用捕捉单元，所述捕捉单元用于正交模式线捕捉辅助网格线，所述辅助网格线与辅助刻度相匹配，分割线位置调节满意后，松开鼠标左键，根据步骤一中图纸和数据构建分割线集；
步骤六：分割线规划完全后，利用剪切单元对分割线节点外侧多余线段进行剪切修饰，右键触发出命令栏，点击刷新布局，使显示区域刷新，自适应并自动保存格式，确定被分割区域的最终大小；
步骤七：对各部分分割区域进行编辑，命名各区域名称，并将各类信息归类放入与之对应的分割区域内，再次右键触发出命令栏，点击刷新布局，使区域内容刷新，自适应并自动保存网页样板分布；
进一步的，所述命令栏中还包括隐藏网格命令，所述隐藏网格命令用于开启和关闭空白区域模板内的构建辅助网格，所述空白区域模板边框设置有构建辅助刻度；
进一步的，所述纵线和横线均设置为正交模式线，所述纵线和横线两端分别与空白区域模板边框相匹配。
通过该技术可以让普通的人员实现页面区域的划分，在某些专业的技术领域降低操作人员的技术门槛，实现网页的功能区分化，能够显示不同内容信息，例如在工厂使用看板显示该工厂的产出和质量标准信息，使用本方法步骤如下：
S1：根据需求将显示屏看板进行模块分区和尺寸规划，分别设置产品良好率、不良品个数、产品生产进度和产品品质等级等信息，工作人员画出规划草图；
S2：首先新建一个网页模板，进行栅格化处理，点击清空画布，建立一个空白区域模板；
S3：根据规划草图，工作人员插入纵线和横线对空白区域切分，绘制大致轮廓，进行横向或者纵向切分，并根据各区域尺寸对纵线和横线位置进行调整，调整出预设的产品良好率、不良品个数、产品生产进度和产品品质四大板块；
S4：分割线规划完全后，右键触发出命令栏，点击刷新布局，使显示区域刷新，自适应并自动保存格式，确定被分割区域的最终大小；
S5：对各部分分割区域进行编辑，命名各区域名称，并将各类信息归类放入与之对应的分割区域内，再次右键触发出命令栏，点击刷新布局，使区域内容刷新，自适应并自动保存网页样板分布；
S6：在不同区域版块内显示不同信息，分化显示层次，使视觉效果更佳。
本发明提供了一种使用鼠标动态切分网页显示区域的方法，基于HTML5 鼠标事件，即鼠标点击、鼠标拖动和鼠标释放，能够简化网页分布操作，通过鼠标点击切分区域让普通人员拥有了设计看板的技能，从而降低了技术门槛，使网页化管理得到推广，能够提高工作效率，促进社会的进步和经济的发展。
最后应说明的是：以上所述仅为本发明的优选实施例而已，并不用于限制本发明，凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。
Claims (6)
1.一种使用鼠标动态切分网页显示区域的方法，其特征在于：具体操作步骤为：
步骤一：合理规划显示区域布局，将显示屏网页显示区域模块化构图，画出预调模块版式和模块分界线坐标；
步骤二：在显示屏上新建一个网页模板，单击右键触发打开命令栏，点击清空画布，建立一个空白区域模板；
步骤三：移动鼠标将光标放置在空白区域模板内，单击右键触发打开命令栏，点击插入纵线或插入横线；
步骤四：使用纵线和横线对空白区域模板进行横向或者纵向切分，切分后利用分隔线插入空白区域分隔各切面；
步骤五：移动鼠标使光标与分割线重合后，按下左键选定分割线并拖动，改变分割线的位置，分割线位置调节满意后，松开鼠标左键，根据步骤一中图纸和数据构建分割线集；
步骤六：分割线规划完全后，右键触发出命令栏，点击刷新布局，使显示区域刷新，自适应并自动保存格式，确定被分割区域的最终大小；
步骤七：对各部分分割区域进行编辑，命名各区域名称，并将各类信息归类放入与之对应的分割区域内，再次右键触发出命令栏，点击刷新布局，使区域内容刷新，自适应并自动保存网页样板分布。
2.根据权利要求1所述的一种使用鼠标动态切分网页显示区域的方法，其特征在于：所述命令栏中还包括隐藏网格命令，所述隐藏网格命令用于开启和关闭空白区域模板内的构建辅助网格，所述空白区域模板边框设置有构建辅助刻度。
3.根据权利要求2所述的一种使用鼠标动态切分网页显示区域的方法，其特征在于：所述纵线和横线均设置为正交模式线，所述纵线和横线两端分别与空白区域模板边框相匹配。
4.根据权利要求1所述的一种使用鼠标动态切分网页显示区域的方法，其特征在于：所述步骤五中分割线调节基于HTML5鼠标事件，即鼠标点击、鼠标拖动和鼠标释放。
5.根据权利要求3所述的一种使用鼠标动态切分网页显示区域的方法，其特征在于：所述步骤五中改变分割线的位置时使用捕捉单元，所述捕捉单元用于正交模式线捕捉辅助网格线，所述辅助网格线与辅助刻度相匹配。
6.根据权利要求1所述的一种使用鼠标动态切分网页显示区域的方法，其特征在于：所述步骤六中利用剪切单元对分割线节点外侧多余线段进行剪切修饰。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910839810.9A CN112464128A (zh) | 2019-09-06 | 2019-09-06 | 一种使用鼠标动态切分网页显示区域的方法 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910839810.9A CN112464128A (zh) | 2019-09-06 | 2019-09-06 | 一种使用鼠标动态切分网页显示区域的方法 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN112464128A true CN112464128A (zh) | 2021-03-09 |
Family
ID=74806811
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201910839810.9A Pending CN112464128A (zh) | 2019-09-06 | 2019-09-06 | 一种使用鼠标动态切分网页显示区域的方法 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112464128A (zh) |
Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103246433A (zh) * | 2013-05-06 | 2013-08-14 | 苏州三星电子电脑有限公司 | 屏幕自定义分窗口显示控制方法 |
| CN103941963A (zh) * | 2014-04-29 | 2014-07-23 | 福建星网视易信息系统有限公司 | 一种自动调整页面布局的方法及其装置 |
| CN104093058A (zh) * | 2014-06-27 | 2014-10-08 | 张�林 | 平板显示屏的多窗口显示系统及一种智能电视 |
| CN107798084A (zh) * | 2017-10-17 | 2018-03-13 | 广东广业开元科技有限公司 | 一种web前端页面的可视化编辑生成系统及装置 |
| CN109901906A (zh) * | 2019-02-28 | 2019-06-18 | 禾多科技（北京）有限公司 | 应用于自动驾驶的允许用户任意定义子窗口布局的方式 |
| CN110162288A (zh) * | 2019-06-03 | 2019-08-23 | 北京淳中科技股份有限公司 | 一种确定显示区域的方法、装置、设备和介质 |
-
2019
- 2019-09-06 CN CN201910839810.9A patent/CN112464128A/zh active Pending
Patent Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103246433A (zh) * | 2013-05-06 | 2013-08-14 | 苏州三星电子电脑有限公司 | 屏幕自定义分窗口显示控制方法 |
| CN103941963A (zh) * | 2014-04-29 | 2014-07-23 | 福建星网视易信息系统有限公司 | 一种自动调整页面布局的方法及其装置 |
| CN104093058A (zh) * | 2014-06-27 | 2014-10-08 | 张�林 | 平板显示屏的多窗口显示系统及一种智能电视 |
| CN107798084A (zh) * | 2017-10-17 | 2018-03-13 | 广东广业开元科技有限公司 | 一种web前端页面的可视化编辑生成系统及装置 |
| CN109901906A (zh) * | 2019-02-28 | 2019-06-18 | 禾多科技（北京）有限公司 | 应用于自动驾驶的允许用户任意定义子窗口布局的方式 |
| CN110162288A (zh) * | 2019-06-03 | 2019-08-23 | 北京淳中科技股份有限公司 | 一种确定显示区域的方法、装置、设备和介质 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US9671950B2 (en) | Sample data computation for rendering of graph elements | |
| CN103699953B (zh) | 项目管理系统及其数据处理方法和装置 | |
| Seely et al. | The application of a hierarchical, decision-support system to evaluate multi-objective forest management strategies: a case study in northeastern British Columbia, Canada | |
| CN101794280B (zh) | 一种基于表格模板集的表格自动生成方法及系统 | |
| CN107192393B (zh) | 一种道路地图数据的维护系统及方法 | |
| CN108228183A (zh) | 前端界面代码生成方法、装置、电子设备及存储介质 | |
| JPH07160827A (ja) | 手書きストローク編集装置及び方法 | |
| CN104599024A (zh) | 一种结构件焊接工艺指导系统的生成方法 | |
| CN108255489A (zh) | 前端界面代码生成方法、装置、电子设备及存储介质 | |
| CN110362927A (zh) | 一种多层逐级优化的bim模型轻量化处理方法及系统 | |
| CN110158818A (zh) | 一种基于bim模型的平面幕墙的快速建造方法 | |
| CN104866567A (zh) | 一种业务数据呈现方法及装置 | |
| CN103279455A (zh) | 电子表格的样式处理方法和装置 | |
| CN110263281A (zh) | 一种数据可视化开发中页面分辨率自适应的装置及方法 | |
| CN115017569A (zh) | 一种二、三维联动的桥梁参数化建模、出图方法、装置、设备及介质 | |
| CN109446506B (zh) | 一种电子表单表格自动再造的方法和装置 | |
| US7716578B2 (en) | Display method, computer program product and computer system | |
| GB2394154A (en) | Presenting information by displaying a list of items and attributes | |
| DE112010005294T5 (de) | Bildanzeigevorrichtung | |
| CN112464128A (zh) | 一种使用鼠标动态切分网页显示区域的方法 | |
| CN115375795A (zh) | 一种洪水频率分析的快速出图方法 | |
| CN102981842A (zh) | 一种生成可交互横道图的方法 | |
| CN102402549A (zh) | 可定制层次二维表的图形展现方法 | |
| CN104794300A (zh) | 一种iec 61850逻辑节点图形符号自动生成方法 | |
| CN107203553B (zh) | 一种实现网页表格行/列锁定的方法和装置 |
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 |