CN110032420A - 一种前端网页设计系统及其方法 - Google Patents
一种前端网页设计系统及其方法 Download PDFInfo
- Publication number
- CN110032420A CN110032420A CN201910312213.0A CN201910312213A CN110032420A CN 110032420 A CN110032420 A CN 110032420A CN 201910312213 A CN201910312213 A CN 201910312213A CN 110032420 A CN110032420 A CN 110032420A
- Authority
- CN
- China
- Prior art keywords
- layout
- interface
- module
- template
- design system
- 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.)
- Withdrawn
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/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
- 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)
- Information Transfer Between Computers (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本发明公开了一种前端网页设计系统及其方法，涉及网页制作领域。本发明包括如下步骤：步骤S1：用户登录系统界面；步骤S2：选择使用模板或者新建空白界面；步骤S3：拖拽已有示例组件，通过修改属性配置实现自己想要的界面；步骤S4：为文件取项目名称并保存；步骤S5：下载直接由于开发的压缩包。本发明通过提供的零编码拖拽式操作，可以将不同的可视化元素在界面上自由DIY，利用素材中心应用至通用示例，实现网页的快速开发，即使不会代码也能拖拽出自己想要的界面，并且能保存下载直接用于项目开发的压缩包，减轻设计及前端人员负担，大大缩短项目周期。
Description
技术领域
本发明属于网页制作领域，特别是涉及一种前端网页设计系统及其方法。
背景技术
互联网技术的快速发展，使得建立良好用户体验的要求越来越高，页面布局的可视化是一种趋势。互联网应用布局中，框架搭建、盒模型编写、浏览器兼容问题处理等方面工作量较大，且技术含量较高，一次改版，往往需要各类型专业人员全程参与。可视化，以“所见即所得”的思想为原则，界面展示与最终代码同步调整，用户通过可视化平台即可快速拖拽出自己想要的布局页面，操作过程中可反复回退，确定界面后通过点击下载即可保存为直接用于开发的压缩包。极大的缩短了项目开发周期，当大部分产品线同时应用时能为公司节省一笔可观的人力成本。
现世面上有小部分可视化拖拽的技术，但大多应用于简单的H5应用，模块比较单一，并且用户难以实现自定义布局、模块位置不能随意变换，本发明应用场景、逻辑处理更复杂，大屏、WEB端、H5等都会涉及，平台更灵活。针对不同用户提供多样解决方案，对于不懂视觉设计或者前端开发的人员可以应用模板，模板中框架布局已搭建好，用户不需要理解页面结构，只需"拖、拉、放"三步操作就能轻松实现各种您想要的界面。专业的视觉设计人员可以自定制，通过灵活布局、使用主流的素材库、更改示例属性替换为新示例等方法构建出主流页面模板。此平台颠覆了传统网站开发模式，功能简单易懂。
由于互联网界面主流风格不固定，这就需要可视化平台管理人员根据每年流行的风格上传相应的示例及模版，增大了操作人员负担，其次由于各人审美观不一样，导致最终的成果达不到专业人士设计水准。
发明内容
本发明的目的在于提供一种前端网页设计系统及其方法，通过提供的零编码拖拽式操作，可以将不同的可视化元素在界面上自由DIY，利用素材中心应用至通用示例，实现网页的快速开发，解决了现有的前端人员页面开发周期长、模板重复使用率低的问题。
为解决上述技术问题，本发明是通过以下技术方案实现的：
本发明为一种前端网页设计系统，包括页面拖拽子系统和素材中心；
所述页面拖拽子系统包括布局模块、属性编辑模块、代码调整模块、存储模块和打包下载模块；所述布局模块用于给用户提供不同样式的拖拽模板；所述属性编辑模块用于对模块属性进行编辑；所述代码调整模块用于对拖拽完成后的模块进行页面代码的调整；所述存储模块用于对拖拽完成的页面模板进行保存；所述打包下载模块用于对保存后模板进行打包提供给其他用户打包使用；所述素材中心用于提供多样化素材。
优选地，所述布局模块包括模板商城、专家布局和自定义布局；所述模板商城用于提供各类型模板给用户在界面的基础上进行替换、布局和拖拽；所述专家布局用于提供多种布局方式供用户拖拽至界面；所述自定义布局用于用于根据自己需求任意拖拽，对界面进行灵活布局。
本发明为一种前端网页设计系统的实现方法，包括如下步骤：
步骤S1：用户登录系统界面；
步骤S2：选择使用模板或者新建空白界面；
步骤S3：拖拽已有示例组件，通过修改属性配置实现自己想要的界面；
步骤S4：为文件取项目名称并保存；
步骤S5：下载直接由于开发的压缩包；
其中，步骤S3中拖拽具体的实现方法为：
步骤S31：将可视化空间存放在示例空间区并进行分类展示；
步骤S32：调整可视化示例控件的位置；
步骤S33：修改可视化空间的属性；
步骤S34：返回步骤S32,直至达到网页设计要求
优选地，所述步骤S31中，从示例控件区中拖动想要的示例到布局区域，在目标布局区域中，构造出一个示例控件div块，读取该可视化控件所对应的控件文件内容，将可视化控件div块的代码添加或替换到到目标布局区域中，目标布局区域就会展示出静态HTML字符串的效果，则生成的控件就存放于模板的布局位置中。
优选地，所述步骤S33，可视化空间属性包括文本、图片、背景、位置、高、宽。
本发明具有以下有益效果：
(1)本发明通过提供的零编码拖拽式操作，可以将不同的可视化元素在界面上自由DIY，利用素材中心应用至通用示例，实现网页的快速开发，即使不会代码也能拖拽出自己想要的界面，并且能保存下载直接用于项目开发的压缩包，减轻设计及前端人员负担，大大缩短项目周期。
(2)本发明通过采用自适应技术，在各分辨率下各模块都能根据屏幕大小自适应布局，WEB端项目使用响应式技术，提供的压缩包具备良好的浏览器兼容性，并且使用动画提升用户体验。
当然，实施本发明的任一产品并不一定需要同时达到以上所述的所有优点。
附图说明
为了更清楚地说明本发明实施例的技术方案，下面将对实施例描述所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1为本发明的一种前端网页设计系统结构框体；
图2为本发明的一种前端网页设计系统实现方法步骤图。
具体实施方式
下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其它实施例，都属于本发明保护的范围。
请参阅图1所示，本发明为一种前端网页设计系统，包括页面拖拽子系统和素材中心；
页面拖拽子系统包括布局模块、属性编辑模块、代码调整模块、存储模块和打包下载模块；布局模块用于给用户提供不同样式的拖拽模板；属性编辑模块用于对模块属性进行编辑；代码调整模块用于对拖拽完成后的模块进行页面代码的调整；存储模块用于对拖拽完成的页面模板进行保存；打包下载模块用于对保存后模板进行打包提供给其他用户打包使用；素材中心用于提供多样化素材。
优选地，布局模块包括模板商城、专家布局和自定义布局；模板商城用于提供各类型模板给用户在界面的基础上进行替换、布局和拖拽；专家布局用于提供多种布局方式供用户拖拽至界面；自定义布局用于用于根据自己需求任意拖拽，对界面进行灵活布局。
请参阅图2所示，本发明为一种前端网页设计系统的实现方法，包括如下步骤：
步骤S1：用户登录系统界面；
步骤S2：选择使用模板或者新建空白界面；
步骤S3：拖拽已有示例组件，通过修改属性配置实现自己想要的界面；
步骤S4：为文件取项目名称并保存；
步骤S5：下载直接由于开发的压缩包；
其中，步骤S3中拖拽具体的实现方法为：
步骤S31：将可视化空间存放在示例空间区并进行分类展示；
步骤S32：调整可视化示例控件的位置，同步骤S31，拖动其他可视化示例控件到想要的布局，就可以快速的实时展现出想要的效果，如果发现示例控件的位置不理想，可以拖动相应的控件到其他布局或者相同布局的其他位置；
步骤S33：修改可视化空间的属性,拖动后如果要修改可视化示例控件的展现效果，可以点击想编辑的示例部分，示例控件区会显示相关的编辑属性，调整后，编辑区会实时显示编辑后的效果，也可点击工具区的预览，查看展示时的真实效果；
步骤S34：返回步骤S32,直至达到网页设计要求。
其中，步骤S31中，从示例控件区中拖动想要的示例到布局区域，在目标布局区域中，构造出一个示例控件div块，读取该可视化控件所对应的控件文件内容，将可视化控件div块的代码添加或替换到到目标布局区域中，目标布局区域就会展示出静态HTML字符串的效果，则生成的控件就存放于模板的布局位置中。
其中，步骤S33，可视化空间属性包括文本、图片、背景、位置、高、宽。
值得注意的是，上述系统实施例中，所包括的各个单元只是按照功能逻辑进行划分的，但并不局限于上述的划分，只要能够实现相应的功能即可；另外，各功能单元的具体名称也只是为了便于相互区分，并不用于限制本发明的保护范围。
另外，本领域普通技术人员可以理解实现上述各实施例方法中的全部或部分步骤是可以通过程序来指令相关的硬件来完成，相应的程序可以存储于一计算机可读取存储介质中。
以上公开的本发明优选实施例只是用于帮助阐述本发明。优选实施例并没有详尽叙述所有的细节，也不限制该发明仅为所述的具体实施方式。显然，根据本说明书的内容，可作很多的修改和变化。本说明书选取并具体描述这些实施例，是为了更好地解释本发明的原理和实际应用，从而使所属技术领域技术人员能很好地理解和利用本发明。本发明仅受权利要求书及其全部范围和等效物的限制。
Claims (5)
1.一种前端网页设计系统，包括页面拖拽子系统和素材中心，其特征在于：
所述页面拖拽子系统包括布局模块、属性编辑模块、代码调整模块、存储模块和打包下载模块；所述布局模块用于给用户提供不同样式的拖拽模板；所述属性编辑模块用于对模块属性进行编辑；所述代码调整模块用于对拖拽完成后的模块进行页面代码的调整；所述存储模块用于对拖拽完成的页面模板进行保存；所述打包下载模块用于对保存后模板进行打包提供给其他用户打包使用；
所述素材中心用于提供多样化素材。
2.根据权利要求1所述的一种前端网页设计系统及其方法，其特征在于，所述布局模块包括模板商城、专家布局和自定义布局；所述模板商城用于提供各类型模板给用户在界面的基础上进行替换、布局和拖拽；所述专家布局用于提供多种布局方式供用户拖拽至界面；所述自定义布局用于用于根据自己需求任意拖拽，对界面进行灵活布局。
3.如根据权利要求1-2任意一所述的一种前端网页设计系统的实现方法，其特征在于，包括如下步骤：
步骤S1：用户登录系统界面；
步骤S2：选择使用模板或者新建空白界面；
步骤S3：拖拽已有示例组件，通过修改属性配置实现自己想要的界面；
步骤S4：为文件取项目名称并保存；
步骤S5：下载直接由于开发的压缩包；
其中，步骤S3中拖拽具体的实现方法为：
步骤S31：将可视化空间存放在示例空间区并进行分类展示；
步骤S32：调整可视化示例控件的位置；
步骤S33：修改可视化空间的属性；
步骤S34：返回步骤S32,直至达到网页设计要求。
4.根据权利要求3所述的一种前端网页设计系统的实现方法，其特征在于，所述步骤S31中，从示例控件区中拖动想要的示例到布局区域，在目标布局区域中，构造出一个示例控件div块，读取该可视化控件所对应的控件文件内容，将可视化控件div块的代码添加或替换到到目标布局区域中，目标布局区域就会展示出静态HTML字符串的效果，则生成的控件就存放于模板的布局位置中。
5.根据权利要求3所述的一种前端网页设计系统的实现方法，其特征在于，所述步骤S33，可视化空间属性包括文本、图片、背景、位置、高、宽。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910312213.0A CN110032420A (zh) | 2019-04-18 | 2019-04-18 | 一种前端网页设计系统及其方法 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910312213.0A CN110032420A (zh) | 2019-04-18 | 2019-04-18 | 一种前端网页设计系统及其方法 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN110032420A true CN110032420A (zh) | 2019-07-19 |
Family
ID=67238928
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201910312213.0A Withdrawn CN110032420A (zh) | 2019-04-18 | 2019-04-18 | 一种前端网页设计系统及其方法 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN110032420A (zh) |
Cited By (17)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110727493A (zh) * | 2019-09-30 | 2020-01-24 | 科大国创软件股份有限公司 | Ugc模式驱动ui可视化系统 |
| CN111240659A (zh) * | 2019-12-23 | 2020-06-05 | 福建亿能达信息技术股份有限公司 | 一种基于Vue的页面设计方法 |
| CN111597005A (zh) * | 2020-05-18 | 2020-08-28 | 深圳航天智慧城市系统技术研究院有限公司 | 一种大数据可视化三维gis云渲染项目生成系统与方法 |
| CN111930370A (zh) * | 2020-06-17 | 2020-11-13 | 石化盈科信息技术有限责任公司 | 可视化页面处理方法、装置、计算机设备和存储介质 |
| CN111966345A (zh) * | 2020-08-21 | 2020-11-20 | 西安寰宇卫星测控与数据应用有限公司 | 拖拽式网页设计方法、装置、计算机设备、存储介质 |
| CN112149034A (zh) * | 2020-09-17 | 2020-12-29 | 山谷网安科技股份有限公司 | 简化网页制作的通用方法及系统 |
| CN112199097A (zh) * | 2020-10-13 | 2021-01-08 | 深圳市广和通无线股份有限公司 | 安装包生成方法、装置、计算机设备和存储介质 |
| WO2021013226A1 (zh) * | 2019-07-25 | 2021-01-28 | 华为技术有限公司 | 一种界面生成方法及设备 |
| CN112328252A (zh) * | 2020-12-03 | 2021-02-05 | 江苏赛融科技股份有限公司 | 基于web网页的在线设计数据可视化大屏方法 |
| CN112947921A (zh) * | 2021-01-27 | 2021-06-11 | 长沙市到家悠享网络科技有限公司 | 快速搭建crud页面方法、装置、设备和存储介质 |
| CN113342249A (zh) * | 2021-06-29 | 2021-09-03 | 平安消费金融有限公司 | 可实时预览的内容管理方法、装置、设备及存储介质 |
| CN113626030A (zh) * | 2021-06-28 | 2021-11-09 | 大唐互联科技(武汉)有限公司 | 一种数据可视化大屏快速搭建方法和系统 |
| CN113835694A (zh) * | 2021-09-24 | 2021-12-24 | 上海宝康电子控制工程有限公司 | 一种自定义数据可视化展示平台 |
| CN114237599A (zh) * | 2021-12-17 | 2022-03-25 | 北京鸿合爱学教育科技有限公司 | 一种实现元素拖放的方法、装置及电子设备 |
| CN114661217A (zh) * | 2022-03-01 | 2022-06-24 | 北京思特奇信息技术股份有限公司 | 一种用于网页开发界面内元素的拖拽排序方法及系统 |
| CN115357239A (zh) * | 2022-10-21 | 2022-11-18 | 智者四海（北京）技术有限公司 | 一种运营活动页面快速搭建方法、装置及电子设备 |
| CN115618144A (zh) * | 2022-12-20 | 2023-01-17 | 冠骋信息技术(苏州)有限公司 | 基于网页的动态布局方法、系统、设备及介质 |
-
2019
- 2019-04-18 CN CN201910312213.0A patent/CN110032420A/zh not_active Withdrawn
Cited By (23)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| WO2021013226A1 (zh) * | 2019-07-25 | 2021-01-28 | 华为技术有限公司 | 一种界面生成方法及设备 |
| US11947781B2 (en) | 2019-07-25 | 2024-04-02 | Huawei Technologies Co., Ltd. | Automatically adjusting a layout of a visual element on a to-be-generated interface and quickly generating an interface |
| CN110727493A (zh) * | 2019-09-30 | 2020-01-24 | 科大国创软件股份有限公司 | Ugc模式驱动ui可视化系统 |
| CN111240659A (zh) * | 2019-12-23 | 2020-06-05 | 福建亿能达信息技术股份有限公司 | 一种基于Vue的页面设计方法 |
| CN111597005A (zh) * | 2020-05-18 | 2020-08-28 | 深圳航天智慧城市系统技术研究院有限公司 | 一种大数据可视化三维gis云渲染项目生成系统与方法 |
| CN111597005B (zh) * | 2020-05-18 | 2023-09-05 | 深圳航天智慧城市系统技术研究院有限公司 | 一种大数据可视化三维gis云渲染项目生成系统与方法 |
| CN111930370A (zh) * | 2020-06-17 | 2020-11-13 | 石化盈科信息技术有限责任公司 | 可视化页面处理方法、装置、计算机设备和存储介质 |
| CN111966345A (zh) * | 2020-08-21 | 2020-11-20 | 西安寰宇卫星测控与数据应用有限公司 | 拖拽式网页设计方法、装置、计算机设备、存储介质 |
| CN112149034A (zh) * | 2020-09-17 | 2020-12-29 | 山谷网安科技股份有限公司 | 简化网页制作的通用方法及系统 |
| CN112149034B (zh) * | 2020-09-17 | 2023-06-27 | 山谷网安科技股份有限公司 | 简化网页制作的通用方法及系统 |
| CN112199097A (zh) * | 2020-10-13 | 2021-01-08 | 深圳市广和通无线股份有限公司 | 安装包生成方法、装置、计算机设备和存储介质 |
| CN112199097B (zh) * | 2020-10-13 | 2024-01-05 | 深圳市广和通无线股份有限公司 | 安装包生成方法、装置、计算机设备和存储介质 |
| CN112328252A (zh) * | 2020-12-03 | 2021-02-05 | 江苏赛融科技股份有限公司 | 基于web网页的在线设计数据可视化大屏方法 |
| CN112947921A (zh) * | 2021-01-27 | 2021-06-11 | 长沙市到家悠享网络科技有限公司 | 快速搭建crud页面方法、装置、设备和存储介质 |
| CN113626030A (zh) * | 2021-06-28 | 2021-11-09 | 大唐互联科技(武汉)有限公司 | 一种数据可视化大屏快速搭建方法和系统 |
| CN113342249A (zh) * | 2021-06-29 | 2021-09-03 | 平安消费金融有限公司 | 可实时预览的内容管理方法、装置、设备及存储介质 |
| CN113342249B (zh) * | 2021-06-29 | 2022-11-11 | 平安消费金融有限公司 | 可实时预览的内容管理方法、装置、设备及存储介质 |
| CN113835694B (zh) * | 2021-09-24 | 2023-11-03 | 上海宝康电子控制工程有限公司 | 一种自定义数据可视化展示平台 |
| CN113835694A (zh) * | 2021-09-24 | 2021-12-24 | 上海宝康电子控制工程有限公司 | 一种自定义数据可视化展示平台 |
| CN114237599A (zh) * | 2021-12-17 | 2022-03-25 | 北京鸿合爱学教育科技有限公司 | 一种实现元素拖放的方法、装置及电子设备 |
| CN114661217A (zh) * | 2022-03-01 | 2022-06-24 | 北京思特奇信息技术股份有限公司 | 一种用于网页开发界面内元素的拖拽排序方法及系统 |
| CN115357239A (zh) * | 2022-10-21 | 2022-11-18 | 智者四海（北京）技术有限公司 | 一种运营活动页面快速搭建方法、装置及电子设备 |
| CN115618144A (zh) * | 2022-12-20 | 2023-01-17 | 冠骋信息技术(苏州)有限公司 | 基于网页的动态布局方法、系统、设备及介质 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN110032420A (zh) | 一种前端网页设计系统及其方法 | |
| CN102866886B (zh) | 一种基于Web的算法动画可视化开发系统 | |
| CN109117138B (zh) | 一种组态方法及装置、计算机可读存储介质 | |
| CN104933142B (zh) | 动画展示方法和装置 | |
| CN109597954A (zh) | 数据项展示方法、装置、计算设备和介质 | |
| CN104685466B (zh) | 用于提供多个视图的浏览器级背景页面 | |
| CN108664296A (zh) | 一种页面渲染方法和装置、一种页面处理方法和装置 | |
| Dwyer et al. | Dunnart: A constraint-based network diagram authoring tool | |
| WO2013108139A2 (en) | Designing website user controls | |
| CN114816189A (zh) | 一种基于云端的工业智能装备远程组态方法 | |
| CN110263281A (zh) | 一种数据可视化开发中页面分辨率自适应的装置及方法 | |
| CN109977335A (zh) | 一种面向工业设备的Web组态方法 | |
| CN108009145A (zh) | 报表生成方法及装置 | |
| CN107515748A (zh) | 报表管理界面生成方法及文件共享方法 | |
| CN112652371A (zh) | 一种用于智慧医疗领域的护理文书设计器及生成装置 | |
| CN112766920A (zh) | 一种列表与甘特图双向影响的方法 | |
| CN113255302A (zh) | 组织架构图操作方法、计算机设备及计算机存储介质 | |
| KR20000049456A (ko) | 홈페이지 자동생성 및 관리방법 | |
| CN110175026B (zh) | 一种网页可视化编辑方法、装置及存储介质 | |
| CN113468261B (zh) | 基于图形编辑引擎构建物联网实体关系的方法和系统 | |
| CN109213528A (zh) | Web前端界面集成方法及Web前端界面集成装置 | |
| CN114780005A (zh) | 图形绘制方法、装置、电子设备以及存储介质 | |
| CN111242736B (zh) | 产品分类展示方法及产品分类展示装置 | |
| CN108228139A (zh) | 基于html5浏览器框架的单片机开发系统及装置 | |
| CN112015410A (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 | ||
| WW01 | Invention patent application withdrawn after publication | ||
| WW01 | Invention patent application withdrawn after publication |
Application publication date: 20190719 |