一种智能生成前端静态页面的方法及系统技术方案

本发明专利技术提供一种智能生成前端静态页面的方法及系统，包括如下步骤：获取psd文件，并获取文件中的图层或组；选择需要切图的第一图层或组以及需要生成静态页面的第二图层或组；将需要切图的第一图层或组按照预定方式切图后以png格式文件保存于第一文件夹；将需要生成静态页面的第二图层或组按照预定规则命名后生成index.html文件和style.cssl文件，保存于第二文件夹；编辑并自动调取所述png格式文件、index.html文件和style.cssl文件，生成Web前端静态页面。通过优化的切图以及静态文件的准备，使得整体设计能够按照预定规则自动完成，针对目前前端开发过程中减少前端人员在切图、测量等工作中不必要的时间损耗，把更多的时间放在实际的开发工作中，以减少开发成本、提高开发效率。

【技术实现步骤摘要】
一种智能生成前端静态页面的方法及系统
本专利技术涉及网页制作领域，具体涉及一种智能生成前端静态页面的方法及系统。
技术介绍
随着互联网技术的发展，越来越多的人依赖互联网。而网页制作的精美性和智能性是决定一个网页成功的关键。在现有的web前端页面开发过程中，为了实现最终展示效果与设计图一致，前端开发人员需要通过测量或使用设计人员的标注来保证页面尺寸的正确性。但这种方式会造成时间的大量损耗。因此，开发一种简便的、智能的网页设计方法就变得十分迫切。
技术实现思路
有鉴于此，本专利技术提供一种智能生成前端静态页面的方法及系统，能够使设计人员设计完成PSD文件后，通过指定规则自动完成PSD文件的切图及HTML静态页面，实现了智能化，提高了工作效率。为了实现上述目的，本专利技术提供如下技术方案：第一方面，本专利技术提供一种智能生成前端静态页面的方法，包括如下步骤：获取psd文件，并获取文件中的图层或组；选择需要切图的第一图层或组以及需要生成静态页面的第二图层或组；将需要切图的第一图层或组按照预定方式切图后以png格式文件保存于第一文件夹；将需要生成静态页面的第二图层或组按照预定规则命名后生成index.html文件和style.cssl文件，保存于第二文件夹；编辑并自动调取所述png格式文件、index.html文件和style.cssl文件，生成Web前端静态页面。根据本专利技术的具体实施方式，优选的，所述步骤“将需要生成静态页面的第二图层或组按照预定规则命名后生成index.html文件和style.cssl文件，保存于第二文件夹”包括：将需要生成静态页面的第二图层或组按照预定规则生成class文件；引入html标签并与所述class文件绑定，生成index.html文件；按照第二图层或组的嵌套顺序获取其css样式并与所述class文件绑定，生成style.cssl文件；将index.html文件和style.cssl文件保存于第二文件夹。根据本专利技术的具体实施方式，优选的，所述步骤“选择需要切图的第一图层或组以及需要生成静态页面的第二图层或组”包括：弹出对话框以供用户选择需要切图的第一图层或组以及需要生成静态页面的第二图层或组；或者，勾选所述图层或组以供用户选择需要切图的第一图层或组以及需要生成静态页面的第二图层或组。根据本专利技术的具体实施方式，优选的，所述第一文件夹和第二文件夹位于同一文件夹内。根据本专利技术的具体实施方式，优选的，所述步骤“编辑并自动调取所述png格式文件、index.html文件和style.cssl文件，生成Web前端静态页面”包括：确定所需编辑文档的宽度和高度，分配所述文档的文件尺寸比例；系统自动调取所述png格式文件、index.html文件和style.cssl文件，生成Web前端静态页面。第二方面，本专利技术提供一种智能生成Web前端静态页面的系统，包括：获取模块，用于获取psd文件，并获取文件中的图层或组；选择模块，用于选择需要切图的第一图层或组以及需要生成静态页面的第二图层或组；第一保存模块，将需要切图的第一图层或组按照预定方式切图后以png格式文件保存于第一文件夹；第二保存模块，将需要生成静态页面的第二图层或组按照预定规则命名后生成index.html文件和style.cssl文件，保存于第二文件夹；生成模块，编辑并自动调取所述png格式文件、index.html文件和style.cssl文件，生成Web前端静态页面。根据本专利技术的具体实施方式，优选的，所述第二保存模块包括：将需要生成静态页面的第二图层或组按照预定规则生成class文件；引入html标签并与所述class文件绑定，生成index.html文件；按照第二图层或组的嵌套顺序获取其css样式并与所述class文件绑定，生成style.cssl文件；将index.html文件和style.cssl文件保存于第二文件夹。根据本专利技术的具体实施方式，优选的，所述选择模块包括：弹出对话框以供用户选择需要切图的第一图层或组以及需要生成静态页面的第二图层或组；或者，勾选所述图层或组以供用户选择需要切图的第一图层或组以及需要生成静态页面的第二图层或组。根据本专利技术的具体实施方式，优选的，所述第一文件夹和第二文件夹位于同一文件夹内。根据本专利技术的具体实施方式，优选的，所述生成模块包括：确定所需编辑文档的宽度和高度，分配所述文档的文件尺寸比例；系统自动调取所述png格式文件、index.html文件和style.cssl文件，生成Web前端静态页面。与现有技术相比，本专利技术实施例的有益效果是：通过优化的切图以及静态文件的准备，使得整体设计能够按照预定规则自动完成，针对目前前端开发过程中减少前端人员在切图、测量等工作中不必要的时间损耗，把更多的时间放在实际的开发工作中，以减少开发成本、提高开发效率。附图说明为了更清楚地说明本专利技术实施方式的技术方案，下面将对实施方式中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本专利技术的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。图1是本专利技术实施例提供的智能生成Web前端静态页面方法流程图。图2是本专利技术实施例提供的智能生成Web前端静态页面系统示意图。图3是本专利技术实施例提供的智能生成Web前端静态页面电子设备结构示意图。具体实施方式为使本专利技术实施例的目的、技术方案和优点更加清楚，下面将结合本专利技术实施例中的附图，对本专利技术实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本专利技术一部分实施例，而不是全部的实施例。基于本专利技术中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本专利技术保护的范围。在本专利技术实施例中使用的术语是仅仅出于描述特定实施例的目的，而非旨在限制本专利技术。在本专利技术实施例和所附权利要求书中所使用的单数形式的“一种”、“所述”和“该”也旨在包括多数形式，除非上下文清楚地表示其他含义，“多种”一般包含至少两种，但是不排除包含至少一种的情况。应当理解，本文中使用的术语“和/或”仅仅是一种描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。另外，本文中字符“/”，一般表示前后关联对象是一种“或”的关系。应当理解，尽管在本专利技术实施例中可能采用术语第一、第二、第三等来描述……，但这些……不应限于这些术语。这些术语仅用来将……区分开。例如，在不脱离本专利技术实施例范围的情况下，第一……也可以被称为第二……，类似地，第二……也可以被称为第一……。取决于语境，如在此所使用的词语“如果”、“若”可以被解释成为“在……时”或“当……时”或“响应于确定”或“响应于检测”。类似地，取决于语境，短语“如果确定”或“如果检测(陈述的条件或事件)”可以被解释成为“当确定时”或“响应于确定”或“当检测(陈述的条件或事件)时”或“响应于检测(陈述的条件或事件)”。还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的商品或者系统不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种商本文档来自技高网...

【技术保护点】
1.一种智能生成前端静态页面的方法，其特征在于，包括如下步骤：获取psd文件，并获取文件中的图层或组；选择需要切图的第一图层或组以及需要生成静态页面的第二图层或组；将需要切图的第一图层或组按照预定方式切图后以png格式文件保存于第一文件夹；将需要生成静态页面的第二图层或组按照预定规则命名后生成index.html文件和style.cssl文件，保存于第二文件夹；编辑并自动调取所述png格式文件、index.html文件和style.cssl文件，生成Web前端静态页面。

【技术特征摘要】
1.一种智能生成前端静态页面的方法，其特征在于，包括如下步骤：获取psd文件，并获取文件中的图层或组；选择需要切图的第一图层或组以及需要生成静态页面的第二图层或组；将需要切图的第一图层或组按照预定方式切图后以png格式文件保存于第一文件夹；将需要生成静态页面的第二图层或组按照预定规则命名后生成index.html文件和style.cssl文件，保存于第二文件夹；编辑并自动调取所述png格式文件、index.html文件和style.cssl文件，生成Web前端静态页面。2.如权利要求1所述的智能生成前端静态页面的方法，其特征在于，所述步骤“将需要生成静态页面的第二图层或组按照预定规则命名后生成index.html文件和style.cssl文件，保存于第二文件夹”包括：将需要生成静态页面的第二图层或组按照预定规则生成class文件；引入html标签并与所述class文件绑定，生成index.html文件；按照第二图层或组的嵌套顺序获取其css样式并与所述class文件绑定，生成style.cssl文件；将index.html文件和style.cssl文件保存于第二文件夹。3.如权利要求1所述的智能生成前端静态页面的方法，其特征在于，所述步骤“选择需要切图的第一图层或组以及需要生成静态页面的第二图层或组”包括：弹出对话框以供用户选择需要切图的第一图层或组以及需要生成静态页面的第二图层或组；或者，勾选所述图层或组以供用户选择需要切图的第一图层或组以及需要生成静态页面的第二图层或组。4.如权利要求1所述的智能生成前端静态页面的方法，其特征在于，所述第一文件夹和第二文件夹位于同一文件夹内。5.如权利要求1所述的智能生成前端静态页面的方法，其特征在于，所述步骤“编辑并自动调取所述png格式文件、index.html文件和style.cssl文件，生成Web前端静态页面”包括：确定所需编辑文档的宽度和高度，分配所述文档的文件尺寸...

【专利技术属性】
技术研发人员：米明光，程国艮，
申请(专利权)人：中译语通科技股份有限公司，
类型：发明
国别省市：北京,11