一种生成静态页面的方法及装置.pdf

摘要
申请专利号：	CN201310062812.4	申请日：	2013.02.28
公开号：	CN104020984A	公开日：	2014.09.03
当前法律状态：	授权	有效性：	有权
法律详情：	授权\|\|\|实质审查的生效IPC(主分类):G06F 9/44申请日:20130228\|\|\|公开
IPC分类号：	G06F9/44	主分类号：	G06F9/44
申请人：	阿里巴巴集团控股有限公司
发明人：	万先甲; 肖武明; 单丹; 史佳丽
地址：	英属开曼群岛大开曼资本大厦一座四层847号邮箱
优先权：
专利代理机构：	北京安信方达知识产权代理有限公司 11262	代理人：	栗若木
PDF下载：	PDF下载

内容摘要

本申请公开了一种生成静态页面的方法及装置；所述方法包括：将待生成静态页面的PSD文件进行切片获得一个或多个图片；解析所述PSD文件中的图层信息，获取各所述图片的属性信息，将各所述图片的属性信息封装成图层信息数据；将图层信息数据转换成文档对象模型DOM结构，根据该DOM结构生成用于描述页面结构的文件；导出所述图片，和所述用于描述页面结构的文件保存为一个静态页面。本申请能快速完成能兼容多种浏览器的静态页面的开发。

权利要求书

权利要求书
1.  一种生成静态页面的方法，其特征在于，包括：
将待生成静态页面的PSD文件进行切片获得一个或多个图片；
解析所述PSD文件中的图层信息，获取各所述图片的属性信息，将各所述图片的属性信息封装成图层信息数据；
将图层信息数据转换成文档对象模型DOM结构，根据该DOM结构生成用于描述页面结构的文件；
导出所述图片，和所述用于描述页面结构的文件保存为一个静态页面。

2.  如权利要求1所述的方法，其特征在于：
所述图层信息数据为json对象。

3.  如权利要求1所述的方法，其特征在于，所述属性信息包括：
位置、宽度、高度、颜色。

4.  如权利要求1所述的方法，其特征在于，还包括：
接收输入的配置信息；所述配置信息包括导出文件类型、导出图片格式、静态页面的保存路径；
所述根据DOM结构生成用于描述页面结构的文件的步骤包括：
按照所述配置信息中的导出文件类型，根据DOM结构生成相应类型的用于描述页面结构的文件；
所述导出所述图片的步骤包括：
导出图片并保存为所述配置信息中的导出图片格式。

5.  如权利要求4所述的方法，其特征在于，所述导出所述图片，和所述用于描述页面结构的文件保存为一个静态页面的步骤前还包括：
判断静态页面的保存路径是否存在，如果不存在则根据该静态页面的保存路径创建相应的目录。

6.  一种生成静态页面的装置，其特征在于，包括：
切片模块，用于将待生成静态页面的PSD文件进行切片获得一个或多个图片；
图层解析器，用于解析所述PSD文件中的图层信息，获取各所述图片的属性信息，将各所述图片的属性信息封装成图层信息数据；
网页生成器，用于将图层信息数据转换成DOM结构，根据该DOM结构生成用于描述页面结构的文件；
存储模块，用于导出所述图片，和所述用于描述页面结构的文件保存为一个静态页面。

7.  如权利要求6所述的装置，其特征在于：
所述图层信息数据为json对象。

8.  如权利要求6所述的装置，其特征在于，所述属性信息包括：
位置、宽度、高度、颜色。

9.  如权利要求6所述的装置，其特征在于，还包括：
配置模块，用于接收输入的配置信息；所述配置信息包括导出文件类型、导出图片格式、静态页面的保存路径；
所述网页生成器根据DOM结构生成用于描述页面结构的文件是指：
所述网页生成器按照所述配置信息中的导出文件类型，根据DOM结构生成相应类型的用于描述页面结构的文件；
所述存储模块导出所述图片是指：
所述存储模块导出图片并保存为所述配置信息中的导出图片格式。

10.  如权利要求9所述的装置，其特征在于：
所述图层解析器还用于判断静态页面的保存路径是否存在，如果不存在则根据该静态页面的保存路径创建相应的目录。

说明书

说明书一种生成静态页面的方法及装置
技术领域
本发明涉及网络领域，尤其涉及一种生成静态页面的方法及装置。
背景技术
EDM(Email Direct Marketing，电子邮件直销)、论坛帖、活动页是产品运营最常使用的方式，在运营需求中占比很高。这类静态页面的共同点是生命周期短、复用性及语义化要求不高。静态页面是指无需经过服务器的编译，直接加载到客户浏览器上显示出来的页面。
目前，最常用的开发静态页面的方式有以下两种：
手动开发：人工编写代码，完成页面开发。
使用切片工具：使用photoshop自带的切片工具，完成开发。
但是，手动开发的时间成本较高，而切片工具导出的页面有浏览器兼容问题。
申请内容
本申请要解决的技术问题是提供如何快速完成能兼容多种浏览器的静态页面的开发。
为了解决上述问题，本申请提供了一种生成静态页面的方法，包括：
将待生成静态页面的PSD文件进行切片获得一个或多个图片；
解析所述PSD文件中的图层信息，获取各所述图片的属性信息，将各所述图片的属性信息封装成图层信息数据；
将图层信息数据转换成文档对象模型DOM结构，根据该DOM结构生成用于描述页面结构的文件；
导出所述图片，和所述用于描述页面结构的文件保存为一个静态页面。
进一步地，所述图层信息数据为json对象。
进一步地，所述属性信息包括：
位置、宽度、高度、颜色。
进一步地，所述的方法还包括：
接收输入的配置信息；所述配置信息包括导出文件类型、导出图片格式、静态页面的保存路径；
所述根据DOM结构生成用于描述页面结构的文件的步骤包括：
按照所述配置信息中的导出文件类型，根据DOM结构生成相应类型的用于描述页面结构的文件；
所述导出所述图片的步骤包括：
导出图片并保存为所述配置信息中的导出图片格式。
进一步地，所述导出所述图片，和所述用于描述页面结构的文件保存为一个静态页面的步骤前还包括：
判断静态页面的保存路径是否存在，如果不存在则根据该静态页面的保存路径创建相应的目录。
本申请还提供了一种生成静态页面的装置，包括：
切片模块，用于将待生成静态页面的PSD文件进行切片获得一个或多个图片；
图层解析器，用于解析所述PSD文件中的图层信息，获取各所述图片的属性信息，将各所述图片的属性信息封装成图层信息数据；
网页生成器，用于将图层信息数据转换成DOM结构，根据该DOM结构生成用于描述页面结构的文件；
存储模块，用于导出所述图片，和所述用于描述页面结构的文件保存为一个静态页面。
进一步地，所述图层信息数据为json对象。
进一步地，所述属性信息包括：
位置、宽度、高度、颜色。
进一步地，所述的装置还包括：
配置模块，用于接收输入的配置信息；所述配置信息包括导出文件类型、导出图片格式、静态页面的保存路径；
所述网页生成器根据DOM结构生成用于描述页面结构的文件是指：
所述网页生成器按照所述配置信息中的导出文件类型，根据DOM结构生成相应类型的用于描述页面结构的文件；
所述存储模块导出所述图片是指：
所述存储模块导出图片并保存为所述配置信息中的导出图片格式。
进一步地，所述图层解析器还用于判断静态页面的保存路径是否存在，如果不存在则根据该静态页面的保存路径创建相应的目录。
本申请的至少一个实施例能够根据PSD文件快速生成静态页面，且所生成的静态页面可兼容于多种浏览器。本申请的又一个实施例能够自行设置图片格式、导出文件类型、保存路径等。
附图说明
图1是实施例一的生成静态页面的方法的流程示意图；
图2是实施例一的一个备选方案的流程示意图；
图3是实施例二的生成静态页面的装置的示意框图；
图4是实施例二的一个备选方案中图层解析器的工作过程示意图；
图5是实施例二的一个备选方案中网页生成器的工作过程示意图。
具体实施方式
下面将结合附图及实施例对本申请的技术方案进行更详细的说明。
需要说明的是，如果不冲突，本申请实施例以及实施例中的各个特征可以相互结合，均在本申请的保护范围之内。另外，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。
实施例一，一种生成静态页面的方法，如图1所示，包括：
S101、将待生成静态页面的PSD文件进行切片获得一个或多个图片；
S102、解析所述PSD文件中的图层信息，获取各所述图片的属性信息，将各所述图片的属性信息封装成图层信息数据；
S103、将图层信息数据转换成DOM(Document Object Model，文档对象模型)结构，根据该DOM结构生成用于描述页面结构的文件；
S104、导出所述图片，和所述用于描述页面结构的文件保存为一个静态页面。
本实施例中可以根据PSD文件快速生成静态页面，所述PSD文件是adobe PhotoShop的专用文件格式，它保留了图层等图像文件的全部信息，其中步骤S101可以按照现有的切片技术实现。所述用于描述页面结构的文件可以为HTML(超文本标记语言)文件，也可以为XML(可扩展标记语言)文件，还可以是其它能够描述页面结构的语言所编写的文件。
现有的切片工具导出的页面一般是table布局的，由于不同浏览器对table标签的解析方式不尽相同，所以可能导致兼容问题；而本实施例是先转换为DOM结构，DOM结构中包括了页面的布局和样式等页面结构信息；再根据DOM结构生成HTML文件或其它能描述页面结构的文件；由于DOM结构符合惯常浏览器解析标准，因此生成的HTML文件和图片所组成的静态页面就可以兼容于各种浏览器。
本实施例的一个备选方案中，所述图层信息数据可以但不限于为json(JavaScript Object Notation，一种轻量级的数据交换格式)对象。
本实施例的一个备选方案中，所述属性信息可以但不限于包括：位置、宽度、高度、颜色等。
本实施例的一个备选方案中，将图层信息数据转换成DOM结构的步骤前还可以包括：去除所述图层信息数据中的冗余数据。
本实施例的一个备选方案中，所述方法还可以包括：
接收输入的配置信息；所述配置信息包括导出文件类型、导出图片格式、静态页面的保存路径。
该备选方案中，根据DOM结构生成用于描述页面结构的文件的步骤包括：
按照所述配置信息中的导出文件类型，根据DOM结构生成相应类型的用于描述页面结构的文件。
该备选方案中，导出所述图片的步骤包括：
导出图片并保存为所述配置信息中的导出图片格式。
导出文件类型包括HTML文件、XML文件等；导出图片格式包括jpg、png、gif等。
该备选方案中，所述步骤S104前还可以包括：
判断静态页面的保存路径是否存在，如果不存在则根据该静态页面的保存路径创建相应的目录。
本实施例一个具体备选方案中，通过一个插件来实现上述方法，其生成静态页面的流程如图2所示，包括步骤201～208。
201、用户使用Photoshop打开PSD文件，启动插件。
202、插件显示配置窗口。
203、用户设置导出图片格式、设计稿类型(比如是在浏览器中显示的页面或是在邮件中显示的页面)、静态页面的保存路径。
204、用户完成设置后点击运行。
205、插件将用户打开的PSD文件切片，获得多个图片；解析该PSD文件的图层信息，获取各图片的属性信息(包括该图片的位置、宽度、高度、颜色等)。
206、根据属性信息生成图层信息数据，将图层信息数据转换成DOM结构，根据该DOM结构生成页面，即生成所设置的导出图片格式的图片和 HTML文件，并保存到所设置的静态页面的保存路径中。
207、通知用户完成。
208、用户确认后该流程结束。
实施例二，一种生成静态页面的装置，如图3所示，包括：
切片模块31，用于将待生成静态页面的PSD文件进行切片获得一个或多个图片；
图层解析器32，用于解析所述PSD文件中的图层信息，获取各所述图片的属性信息，将各所述图片的属性信息封装成图层信息数据；
网页生成器33，用于将图层信息数据转换成DOM结构，根据该DOM结构生成用于描述页面结构的文件；
存储模块34，用于导出所述图片，和所述用于描述页面结构的文件保存为一个静态页面。
本实施例的一个备选方案中，所述图层信息数据为json对象。
本实施例的一个备选方案中，所述属性信息包括：
位置、宽度、高度、颜色。
本实施例的一个备选方案中，所述图层解析器32在将图层信息数据转换成DOM结构前，还用于去除所述图层信息数据中的冗余数据。
本实施例的一个备选方案中，所述装置还包括：
配置模块35，用于接收输入的配置信息；所述配置信息包括导出文件类型、导出图片格式、静态页面的保存路径。
该备选方案中，所述网页生成器33根据DOM结构生成用于描述页面结构的文件是指：
所述网页生成器33按照所述配置信息中的导出文件类型，根据DOM结构生成相应类型的用于描述页面结构的文件。
该备选方案中，所述存储模块34导出所述图片是指：
所述存储模块34导出图片并保存为所述配置信息中的导出图片格式。
该备选方案中，所述图层解析器32还用于判断静态页面的保存路径是否存在，如果不存在则根据该静态页面的保存路径创建相应的目录。
本实施例的一个备选方案中，图层解析器32的工作流程如图4所示，包括步骤401～405。
401、输入图层对象(PSD文件)。
402、检查静态页面的保存路径是否存在，如果不存在则进行步骤403；如果存在则进行步骤404。
403、创建目录，然后进行步骤404。
404、处理图层数据，包括解析属性信息和封装成图层信息数据；当所有图层处理完之后，进行步骤405。
405、输出图层信息数据；结束。
网页生成器33的工作流程如图5所示，包括步骤501～505。
501、输入图层信息数据。
502、去除所述图层信息数据中的冗余数据。
503、根据所述图层信息数据生成DOM结构。
504、根据DOM结构生成HTML文件。
505、输出HTML文件；结束。
本领域普通技术人员可以理解上述方法中的全部或部分步骤可通过程序来指令相关硬件完成，所述程序可以存储于计算机可读存储介质中，如只读存储器、磁盘或光盘等。可选地，上述实施例的全部或部分步骤也可以使用一个或多个集成电路来实现。相应地，上述实施例中的各模块/单元可以采用硬件的形式实现，也可以采用软件功能模块的形式实现。本申请不限制于任何特定形式的硬件和软件的结合。
当然，本申请还可有其他多种实施例，在不背离本申请精神及其实质的情况下，熟悉本领域的技术人员当可根据本申请作出各种相应的改变和变形，但这些相应的改变和变形都应属于本申请的权利要求的保护范围。

资源描述

《一种生成静态页面的方法及装置.pdf》由会员分享，可在线阅读，更多相关《一种生成静态页面的方法及装置.pdf（10页珍藏版）》请在专利查询网上搜索。

1、(10)申请公布号 CN 104020984 A(43)申请公布日 2014.09.03CN104020984A(21)申请号 201310062812.4(22)申请日 2013.02.28G06F 9/44(2006.01)(71)申请人阿里巴巴集团控股有限公司地址英属开曼群岛大开曼资本大厦一座四层847号邮箱(72)发明人万先甲肖武明单丹史佳丽(74)专利代理机构北京安信方达知识产权代理有限公司 11262代理人栗若木(54) 发明名称一种生成静态页面的方法及装置(57) 摘要本申请公开了一种生成静态页面的方法及装置；所述方法包括：将待生成静态页面的PSD文件进行切片获得一个或多个。

2、图片；解析所述PSD文件中的图层信息，获取各所述图片的属性信息，将各所述图片的属性信息封装成图层信息数据；将图层信息数据转换成文档对象模型DOM结构，根据该DOM结构生成用于描述页面结构的文件；导出所述图片，和所述用于描述页面结构的文件保存为一个静态页面。本申请能快速完成能兼容多种浏览器的静态页面的开发。(51)Int.Cl.权利要求书2页说明书5页附图2页(19)中华人民共和国国家知识产权局(12)发明专利申请权利要求书2页说明书5页附图2页(10)申请公布号 CN 104020984 ACN 104020984 A1/2页21.一种生成静态页面的方法，其特征在于，包括：将待生成静态。

3、页面的PSD文件进行切片获得一个或多个图片；解析所述PSD文件中的图层信息，获取各所述图片的属性信息，将各所述图片的属性信息封装成图层信息数据；将图层信息数据转换成文档对象模型DOM结构，根据该DOM结构生成用于描述页面结构的文件；导出所述图片，和所述用于描述页面结构的文件保存为一个静态页面。2.如权利要求1所述的方法，其特征在于：所述图层信息数据为json对象。3.如权利要求1所述的方法，其特征在于，所述属性信息包括：位置、宽度、高度、颜色。4.如权利要求1所述的方法，其特征在于，还包括：接收输入的配置信息；所述配置信息包括导出文件类型、导出图片格式、静态页面的保存路径；所述根据DOM结构生。

4、成用于描述页面结构的文件的步骤包括：按照所述配置信息中的导出文件类型，根据DOM结构生成相应类型的用于描述页面结构的文件；所述导出所述图片的步骤包括：导出图片并保存为所述配置信息中的导出图片格式。5.如权利要求4所述的方法，其特征在于，所述导出所述图片，和所述用于描述页面结构的文件保存为一个静态页面的步骤前还包括：判断静态页面的保存路径是否存在，如果不存在则根据该静态页面的保存路径创建相应的目录。6.一种生成静态页面的装置，其特征在于，包括：切片模块，用于将待生成静态页面的PSD文件进行切片获得一个或多个图片；图层解析器，用于解析所述PSD文件中的图层信息，获取各所述图片的属性信息，将各所述图。

5、片的属性信息封装成图层信息数据；网页生成器，用于将图层信息数据转换成DOM结构，根据该DOM结构生成用于描述页面结构的文件；存储模块，用于导出所述图片，和所述用于描述页面结构的文件保存为一个静态页面。7.如权利要求6所述的装置，其特征在于：所述图层信息数据为json对象。8.如权利要求6所述的装置，其特征在于，所述属性信息包括：位置、宽度、高度、颜色。9.如权利要求6所述的装置，其特征在于，还包括：配置模块，用于接收输入的配置信息；所述配置信息包括导出文件类型、导出图片格式、静态页面的保存路径；所述网页生成器根据DOM结构生成用于描述页面结构的文件是指：所述网页生成器按照所述配置信息中的导出文。

6、件类型，根据DOM结构生成相应类型的权利要求书CN 104020984 A2/2页3用于描述页面结构的文件；所述存储模块导出所述图片是指：所述存储模块导出图片并保存为所述配置信息中的导出图片格式。10.如权利要求9所述的装置，其特征在于：所述图层解析器还用于判断静态页面的保存路径是否存在，如果不存在则根据该静态页面的保存路径创建相应的目录。权利要求书CN 104020984 A1/5页4一种生成静态页面的方法及装置技术领域0001 本发明涉及网络领域，尤其涉及一种生成静态页面的方法及装置。背景技术0002 EDM(Email Direct Marketing，电子邮件直销)、论。

7、坛帖、活动页是产品运营最常使用的方式，在运营需求中占比很高。这类静态页面的共同点是生命周期短、复用性及语义化要求不高。静态页面是指无需经过服务器的编译，直接加载到客户浏览器上显示出来的页面。0003 目前，最常用的开发静态页面的方式有以下两种：0004 手动开发：人工编写代码，完成页面开发。0005 使用切片工具：使用photoshop自带的切片工具，完成开发。0006 但是，手动开发的时间成本较高，而切片工具导出的页面有浏览器兼容问题。0007 申请内容0008 本申请要解决的技术问题是提供如何快速完成能兼容多种浏览器的静态页面的开发。0009 为了解决上述问题，本申请提供了一种生成静态页面。

8、的方法，包括：0010 将待生成静态页面的PSD文件进行切片获得一个或多个图片；0011 解析所述PSD文件中的图层信息，获取各所述图片的属性信息，将各所述图片的属性信息封装成图层信息数据；0012 将图层信息数据转换成文档对象模型DOM结构，根据该DOM结构生成用于描述页面结构的文件；0013 导出所述图片，和所述用于描述页面结构的文件保存为一个静态页面。0014 进一步地，所述图层信息数据为json对象。0015 进一步地，所述属性信息包括：0016 位置、宽度、高度、颜色。0017 进一步地，所述的方法还包括：0018 接收输入的配置信息；所述配置信息包括导出文件类型、导出图片格式、静态。

9、页面的保存路径；0019 所述根据DOM结构生成用于描述页面结构的文件的步骤包括：0020 按照所述配置信息中的导出文件类型，根据DOM结构生成相应类型的用于描述页面结构的文件；0021 所述导出所述图片的步骤包括：0022 导出图片并保存为所述配置信息中的导出图片格式。0023 进一步地，所述导出所述图片，和所述用于描述页面结构的文件保存为一个静态页面的步骤前还包括：0024 判断静态页面的保存路径是否存在，如果不存在则根据该静态页面的保存路径创说明书CN 104020984 A2/5页5建相应的目录。0025 本申请还提供了一种生成静态页面的装置，包括：0026 切片模块，用于将待生成。

10、静态页面的PSD文件进行切片获得一个或多个图片；0027 图层解析器，用于解析所述PSD文件中的图层信息，获取各所述图片的属性信息，将各所述图片的属性信息封装成图层信息数据；0028 网页生成器，用于将图层信息数据转换成DOM结构，根据该DOM结构生成用于描述页面结构的文件；0029 存储模块，用于导出所述图片，和所述用于描述页面结构的文件保存为一个静态页面。0030 进一步地，所述图层信息数据为json对象。0031 进一步地，所述属性信息包括：0032 位置、宽度、高度、颜色。0033 进一步地，所述的装置还包括：0034 配置模块，用于接收输入的配置信息；所述配置信息包括导出文件类型、导。

11、出图片格式、静态页面的保存路径；0035 所述网页生成器根据DOM结构生成用于描述页面结构的文件是指：0036 所述网页生成器按照所述配置信息中的导出文件类型，根据DOM结构生成相应类型的用于描述页面结构的文件；0037 所述存储模块导出所述图片是指：0038 所述存储模块导出图片并保存为所述配置信息中的导出图片格式。0039 进一步地，所述图层解析器还用于判断静态页面的保存路径是否存在，如果不存在则根据该静态页面的保存路径创建相应的目录。0040 本申请的至少一个实施例能够根据PSD文件快速生成静态页面，且所生成的静态页面可兼容于多种浏览器。本申请的又一个实施例能够自行设置图片格式、导出文件。

12、类型、保存路径等。附图说明0041 图1是实施例一的生成静态页面的方法的流程示意图；0042 图2是实施例一的一个备选方案的流程示意图；0043 图3是实施例二的生成静态页面的装置的示意框图；0044 图4是实施例二的一个备选方案中图层解析器的工作过程示意图；0045 图5是实施例二的一个备选方案中网页生成器的工作过程示意图。具体实施方式0046 下面将结合附图及实施例对本申请的技术方案进行更详细的说明。0047 需要说明的是，如果不冲突，本申请实施例以及实施例中的各个特征可以相互结合，均在本申请的保护范围之内。另外，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所。

13、示出或描述的步骤。0048 实施例一，一种生成静态页面的方法，如图1所示，包括：说明书CN 104020984 A3/5页60049 S101、将待生成静态页面的PSD文件进行切片获得一个或多个图片；0050 S102、解析所述PSD文件中的图层信息，获取各所述图片的属性信息，将各所述图片的属性信息封装成图层信息数据；0051 S103、将图层信息数据转换成DOM(Document Object Model，文档对象模型)结构，根据该DOM结构生成用于描述页面结构的文件；0052 S104、导出所述图片，和所述用于描述页面结构的文件保存为一个静态页面。0053 本实施例中可以根据PSD文件。

14、快速生成静态页面，所述PSD文件是adobe PhotoShop的专用文件格式，它保留了图层等图像文件的全部信息，其中步骤S101可以按照现有的切片技术实现。所述用于描述页面结构的文件可以为HTML(超文本标记语言)文件，也可以为XML(可扩展标记语言)文件，还可以是其它能够描述页面结构的语言所编写的文件。0054 现有的切片工具导出的页面一般是table布局的，由于不同浏览器对table标签的解析方式不尽相同，所以可能导致兼容问题；而本实施例是先转换为DOM结构，DOM结构中包括了页面的布局和样式等页面结构信息；再根据DOM结构生成HTML文件或其它能描述页面结构的文件；由于DOM结构符合惯。

15、常浏览器解析标准，因此生成的HTML文件和图片所组成的静态页面就可以兼容于各种浏览器。0055 本实施例的一个备选方案中，所述图层信息数据可以但不限于为json(JavaScript Object Notation，一种轻量级的数据交换格式)对象。0056 本实施例的一个备选方案中，所述属性信息可以但不限于包括：位置、宽度、高度、颜色等。0057 本实施例的一个备选方案中，将图层信息数据转换成DOM结构的步骤前还可以包括：去除所述图层信息数据中的冗余数据。0058 本实施例的一个备选方案中，所述方法还可以包括：0059 接收输入的配置信息；所述配置信息包括导出文件类型、导出图片格式、静态页面的。

16、保存路径。0060 该备选方案中，根据DOM结构生成用于描述页面结构的文件的步骤包括：0061 按照所述配置信息中的导出文件类型，根据DOM结构生成相应类型的用于描述页面结构的文件。0062 该备选方案中，导出所述图片的步骤包括：0063 导出图片并保存为所述配置信息中的导出图片格式。0064 导出文件类型包括HTML文件、XML文件等；导出图片格式包括jpg、png、gif等。0065 该备选方案中，所述步骤S104前还可以包括：0066 判断静态页面的保存路径是否存在，如果不存在则根据该静态页面的保存路径创建相应的目录。0067 本实施例一个具体备选方案中，通过一个插件来实现上述方法，其生。

17、成静态页面的流程如图2所示，包括步骤201208。0068 201、用户使用Photoshop打开PSD文件，启动插件。0069 202、插件显示配置窗口。0070 203、用户设置导出图片格式、设计稿类型(比如是在浏览器中显示的页面或是在说明书CN 104020984 A4/5页7邮件中显示的页面)、静态页面的保存路径。0071 204、用户完成设置后点击运行。0072 205、插件将用户打开的PSD文件切片，获得多个图片；解析该PSD文件的图层信息，获取各图片的属性信息(包括该图片的位置、宽度、高度、颜色等)。0073 206、根据属性信息生成图层信息数据，将图层信息数据转换成DOM结。

18、构，根据该DOM结构生成页面，即生成所设置的导出图片格式的图片和HTML文件，并保存到所设置的静态页面的保存路径中。0074 207、通知用户完成。0075 208、用户确认后该流程结束。0076 实施例二，一种生成静态页面的装置，如图3所示，包括：0077 切片模块31，用于将待生成静态页面的PSD文件进行切片获得一个或多个图片；0078 图层解析器32，用于解析所述PSD文件中的图层信息，获取各所述图片的属性信息，将各所述图片的属性信息封装成图层信息数据；0079 网页生成器33，用于将图层信息数据转换成DOM结构，根据该DOM结构生成用于描述页面结构的文件；0080 存储模块34，用于导。

19、出所述图片，和所述用于描述页面结构的文件保存为一个静态页面。0081 本实施例的一个备选方案中，所述图层信息数据为json对象。0082 本实施例的一个备选方案中，所述属性信息包括：0083 位置、宽度、高度、颜色。0084 本实施例的一个备选方案中，所述图层解析器32在将图层信息数据转换成DOM结构前，还用于去除所述图层信息数据中的冗余数据。0085 本实施例的一个备选方案中，所述装置还包括：0086 配置模块35，用于接收输入的配置信息；所述配置信息包括导出文件类型、导出图片格式、静态页面的保存路径。0087 该备选方案中，所述网页生成器33根据DOM结构生成用于描述页面结构的文件是指：0。

20、088 所述网页生成器33按照所述配置信息中的导出文件类型，根据DOM结构生成相应类型的用于描述页面结构的文件。0089 该备选方案中，所述存储模块34导出所述图片是指：0090 所述存储模块34导出图片并保存为所述配置信息中的导出图片格式。0091 该备选方案中，所述图层解析器32还用于判断静态页面的保存路径是否存在，如果不存在则根据该静态页面的保存路径创建相应的目录。0092 本实施例的一个备选方案中，图层解析器32的工作流程如图4所示，包括步骤401405。0093 401、输入图层对象(PSD文件)。0094 402、检查静态页面的保存路径是否存在，如果不存在则进行步骤403；如果存在。

21、则进行步骤404。0095 403、创建目录，然后进行步骤404。说明书CN 104020984 A5/5页80096 404、处理图层数据，包括解析属性信息和封装成图层信息数据；当所有图层处理完之后，进行步骤405。0097 405、输出图层信息数据；结束。0098 网页生成器33的工作流程如图5所示，包括步骤501505。0099 501、输入图层信息数据。0100 502、去除所述图层信息数据中的冗余数据。0101 503、根据所述图层信息数据生成DOM结构。0102 504、根据DOM结构生成HTML文件。0103 505、输出HTML文件；结束。0104 本领域普通技术人员可以理。

22、解上述方法中的全部或部分步骤可通过程序来指令相关硬件完成，所述程序可以存储于计算机可读存储介质中，如只读存储器、磁盘或光盘等。可选地，上述实施例的全部或部分步骤也可以使用一个或多个集成电路来实现。相应地，上述实施例中的各模块/单元可以采用硬件的形式实现，也可以采用软件功能模块的形式实现。本申请不限制于任何特定形式的硬件和软件的结合。0105 当然，本申请还可有其他多种实施例，在不背离本申请精神及其实质的情况下，熟悉本领域的技术人员当可根据本申请作出各种相应的改变和变形，但这些相应的改变和变形都应属于本申请的权利要求的保护范围。说明书CN 104020984 A1/2页9图1图2图3说明书附图CN 104020984 A2/2页10图4图5说明书附图CN 104020984 A10。

展开阅读全文