[发明专利]一种前端网页设计系统及其方法

说明书

本发明公开了一种前端网页设计系统及其方法，涉及网页制作领域。本发明包括如下步骤：步骤S1：用户登录系统界面；步骤S2：选择使用模板或者新建空白界面；步骤S3：拖拽已有示例组件，通过修改属性配置实现自己想要的界面；步骤S4：为文件取项目名称并保存；步骤S5：下载直接由于开发的压缩包。本发明通过提供的零编码拖拽式操作，可以将不同的可视化元素在界面上自由DIY，利用素材中心应用至通用示例，实现网页的快速开发，即使不会代码也能拖拽出自己想要的界面，并且能保存下载直接用于项目开发的压缩包，减轻设计及前端人员负担，大大缩短项目周期。

技术领域

本发明属于网页制作领域，特别是涉及一种前端网页设计系统及其方法。

背景技术

互联网技术的快速发展，使得建立良好用户体验的要求越来越高，页面布局的可视化是一种趋势。互联网应用布局中，框架搭建、盒模型编写、浏览器兼容问题处理等方面工作量较大，且技术含量较高，一次改版，往往需要各类型专业人员全程参与。可视化，以“所见即所得”的思想为原则，界面展示与最终代码同步调整，用户通过可视化平台即可快速拖拽出自己想要的布局页面，操作过程中可反复回退，确定界面后通过点击下载即可保存为直接用于开发的压缩包。极大的缩短了项目开发周期，当大部分产品线同时应用时能为公司节省一笔可观的人力成本。

现世面上有小部分可视化拖拽的技术，但大多应用于简单的H5应用，模块比较单一，并且用户难以实现自定义布局、模块位置不能随意变换，本发明应用场景、逻辑处理更复杂，大屏、WEB端、H5等都会涉及，平台更灵活。针对不同用户提供多样解决方案，对于不懂视觉设计或者前端开发的人员可以应用模板，模板中框架布局已搭建好，用户不需要理解页面结构，只需拖、拉、放三步操作就能轻松实现各种您想要的界面。专业的视觉设计人员可以自定制，通过灵活布局、使用主流的素材库、更改示例属性替换为新示例等方法构建出主流页面模板。此平台颠覆了传统网站开发模式，功能简单易懂。

由于互联网界面主流风格不固定，这就需要可视化平台管理人员根据每年流行的风格上传相应的示例及模版，增大了操作人员负担，其次由于各人审美观不一样，导致最终的成果达不到专业人士设计水准。

发明内容

本发明的目的在于提供一种前端网页设计系统及其方法，通过提供的零编码拖拽式操作，可以将不同的可视化元素在界面上自由DIY，利用素材中心应用至通用示例，实现网页的快速开发，解决了现有的前端人员页面开发周期长、模板重复使用率低的问题。

为解决上述技术问题，本发明是通过以下技术方案实现的：

本发明为一种前端网页设计系统，包括页面拖拽子系统和素材中心；

所述页面拖拽子系统包括布局模块、属性编辑模块、代码调整模块、存储模块和打包下载模块；所述布局模块用于给用户提供不同样式的拖拽模板；所述属性编辑模块用于对模块属性进行编辑；所述代码调整模块用于对拖拽完成后的模块进行页面代码的调整；所述存储模块用于对拖拽完成的页面模板进行保存；所述打包下载模块用于对保存后模板进行打包提供给其他用户打包使用；所述素材中心用于提供多样化素材。

优选地，所述布局模块包括模板商城、专家布局和自定义布局；所述模板商城用于提供各类型模板给用户在界面的基础上进行替换、布局和拖拽；所述专家布局用于提供多种布局方式供用户拖拽至界面；所述自定义布局用于用于根据自己需求任意拖拽，对界面进行灵活布局。

本发明为一种前端网页设计系统的实现方法，包括如下步骤：

步骤S1：用户登录系统界面；

步骤S2：选择使用模板或者新建空白界面；

步骤S3：拖拽已有示例组件，通过修改属性配置实现自己想要的界面；

步骤S4：为文件取项目名称并保存；

步骤S5：下载直接由于开发的压缩包；