CN103744674A

CN103744674A - 生成html程序代码的方法和装置

Info

Publication number: CN103744674A
Application number: CN201410005255.7A
Authority: CN
Inventors: 李成银
Original assignee: Beijing Qihoo Technology Co Ltd; Qizhi Software Beijing Co Ltd
Current assignee: Beijing Qihoo Technology Co Ltd
Priority date: 2014-01-06
Filing date: 2014-01-06
Publication date: 2014-04-23
Anticipated expiration: 2034-01-06
Also published as: CN103744674B

Abstract

本发明公开了一种生成HTML程序代码的方法和装置；其中的方法主要包括：获取图片所包含的各图层，获取各图层的位置属性信息，并将所述各图层分别转换为图片格式；根据各图层中的非背景图层的位置属性信息确定页面宽度；根据各图层中的非背景图层的位置属性信息将各非背景图层划分为至少一组，且一组中的各图层之间具有区域包含关系；根据所述图片的设计宽度和所述页面宽度调整各组中各图层的位置属性信息；根据各图层的位置属性信息和各图片格式的图层的存储路径信息生成HTML程序代码，且一组图层对应HTML程序代码中的一个节点。

Description

生成HTML程序代码的方法和装置

技术领域

本发明涉及WEB页面开发技术，具体涉及一种生成HTML程序代码的方法和装置。

背景技术

在WEB页面开发过程中，通常是WEB页面设计人员针对产品项目的具体需求进行设计稿（即图片，如利用PHOTOSHOP设计的图片）的制作工作，之后，WEB代码开发人员对制作好的设计稿进行切图处理，并针对切图处理后形成的多个图片进行HTML程序代码的编写工作；WEB代码开发人员将编写完成的HTML程序代码上线（如设置到相应的网站服务器中）。

发明人在实现本发明过程中发现，除了大型的产品项目之外，还存在一些存活期较短（如一两天）的小产品项目（如举办活动类的产品等），这种类型的产品项目的特点包括：通常是针对节日或者特殊事件、需求有时候比较紧急、产品对应的页面在上线后被使用的时间较短、对HTML程序代码质量要求不高以及不需要后期的维护和升级等。如果利用现有的WEB页面开发方式对上述类型的产品项目进行HTML程序代码编写，有时会存在不能快速响应开发需求的问题，因此，WEB页面开发效率有待于进一步提高。

发明内容

鉴于上述问题，提出了本发明以便提供一种克服上述问题或者至少部分地解决上述问题的生成HTML程序代码的方法以及相应的生成HTML程序代码的装置。

依据本发明的一个方面，提供了一种生成HTML程序代码的方法，该方法包括：获取图片所包含的各图层，获取各图层的位置属性信息，并将所述各图层分别转换为图片格式；根据各图层中的非背景图层的位置属性信息确定页面宽度；根据各图层中的非背景图层的位置属性信息将各非背景图层划分为至少一组，且一组中的各图层之间具有区域包含关系；根据所述图片的设计宽度和所述页面宽度调整各组中各图层的位置属性信息；根据各图层的位置属性信息和各图片格式的图层的存储路径信息生成HTML程序代码，且一组图层对应HTML程序代码中的一个节点。

根据本发明的另一方面，提供了一种生成HTML程序代码的装置，该装置包括：获取模块，适于获取图片所包含的各图层，获取各图层的位置属性信息，并将所述各图层分别转换为图片格式；确定页面宽度模块，适于根据各图层中的非背景图层的位置属性信息确定页面宽度；组划分模块，适于根据各图层中的非背景图层的位置属性信息将各非背景图层划分为至少一组，且一组中的各图层之间具有区域包含关系；调整模块，适于根据图片的设计宽度和所述页面宽度调整各组中各图层的位置属性信息；代码生成模块，适于根据各图层的位置属性信息和各图片格式的图层的存储路径信息生成HTML程序代码，且一组图层对应HTML程序代码中的一个节点。

本发明的生成HTML程序代码的方法以及装置通过获取WEB页面设计图片的各图层以及各图层的位置属性信息，对图层进行图片格式转换处理，并基于图层的位置属性信息进行图片格式的图层的分组处理以及位置调整处理等，使划分出的图层组与HTML程序代码中的节点相对应，且图片格式的各图层的位置能够较好的适应实际WEB页面的分辨率；从而本发明能够针对WEB页面设计人员设计出的图片自动生成HTML程序代码，在很大程度上提高了WEB页面的开发效率。

上述说明仅是本发明技术方案的概述，为了能够更清楚了解本发明的技术手段，而可依照说明书的内容予以实施，并且为了让本发明的上述和其它目的、特征和优点能够更明显易懂，以下特举本发明的具体实施方式。

附图说明

通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。说明书附图仅用于示出优选实施方式的目的，而并不认为是对本发明的限制。而且在整个附图中，用相同的参考符号表示相同的部件。在附图中：

图1示出了根据本发明实施例一的生成HTML程序代码的方法流程图；

图2示出了根据本发明实施例一的图片示意图；

图3示出了根据本发明实施例一的图层示意图；

图4A-图4H示出了根据本发明实施例一的图片格式的各图层示意图；

图5示出了根据本发明实施例二的生成HTML程序代码的装置示意图。

具体实施方式

下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本发明公开的示例性实施例，然而应当理解，可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本公开，并且能够将本公开的范围完整的传达给本领域的技术人员。

实施例一、生成HTML程序代码的方法。下面结合图1-图4对本实施例的方法进行详细说明。

图1中，S100、获取图片所包含的各图层，获取各图层的位置属性信息，并将上述各图层分别转换为图片格式。

具体的，本实施例中的图片可以是利用PHOTOSHOP工具设计的图片（如PSD图片等），如针对举办活动类的产品而设计的图片，且该图片在通常情况下都会包括多个图层。PSD图片的一个具体例子如图2所示，且图2示出的PSD图片所包含的图层的相关信息如图3所示。当然，上述图片也可以是利用其他绘图工具（如AUTOCAD）设计的图片。

本实施例可以先利用PHOTOSHOP工具或者其他绘图工具所提供的接口获得图片中的各图层以及各图层的信息，然后，再根据上述获得的各图层的信息计算出各图层的位置属性信息。下面以PHOTOSHOP工具为例对本实施例进行说明。

本实施例中的图层的位置属性信息是用于描述图层在整个图片中的具体位置的信息，且图层的位置属性信息的具体内容可以根据HTML程序代码针对图片进行描述的具体需求来决定。

一个具体的例子，根据目前HTML程序代码针对图片进行描述需求，本实施例中的图层的位置属性信息包括：图层的宽度、图层的高度、图层的顶部与整个图片的顶部之间的距离信息以及图层的左侧与整个图片的左侧之间的距离信息。

针对图片中的一个图层而言，本实施例获得该图层的位置属性信息的一个具体实现方式可以为：先利用PHOTOSHOP工具所提供的接口获得该图层的四个顶点的坐标；然后，利用该图层的左上顶点或者右上顶点的水平坐标值计算该图层与整个图片的顶部之间的距离；利用该图层的左上顶点或者左下顶点的垂直坐标值计算该图层与整个图片的左侧之间的距离；计算该图层的左上顶点与右上顶点的水平坐标值之间的差值或者计算该图层的左下顶点与右下顶点的水平坐标值之间的差值，以获得该图层的宽度；计算该图层的左上顶点的垂直坐标值与左下顶点的垂直坐标值之间的差值或者计算该图层的右上顶点的垂直坐标值与右下顶点的垂直坐标值之间的差值，以获得该图层的高度。

本实施例可以将上述获取到的各图层分别转换为Png格式的图片（如转换为Png24格式的图片）；图2以及图3中的各图层转换为Png格式的图片如图4A-图4H所示。

需要说明的是，上述图片格式转换操作与上述各图层的位置属性信息的获取操作在本实施例中并没有必然的先后执行顺序的限制，即上述转换操作以及获取操作可以并行执行，也可以先后执行。

本实施例可以通过在PHOTOSHOP中设置插件来获取各图层以及各图层的位置属性信息，并将各图层转换为图片格式存储（如将各图层分别存储为Png24格式的图片）；该插件的部分程序代码可以如下所示：

其中，length表示图层的数量。

通过上述插件的程序代码，本实施例不仅可以获取到每个图层的宽度（width）、图层的高度（height）、图层的顶部与图片的顶部之间的距离信息（top）以及图层的左侧与图片的左侧之间的距离信息（left）；还可以将各图层转换为图片格式（如Png24格式的图片）的图层；而且，还可以获取到图层的名称（layer.name）、图层对应的转换后的图片格式的图层名称（ret.fileName）、图片格式的图层存储路径（pp.Config.htmlOutputPath+pp.Config.resourceDir.img）以及图层组中的父子图层关系信息（type）等。

本实施例可以将上述获取到的图片格式的各图层、各图层的位置属性信息以及图片格式的图层名称等内容一起打包并发送给执行后续S110-S140操作的网络设备，且上述获取到的图层的名称layer.name也可以一起打包，如基于ZIP压缩方式将图片格式的各图层、各图层的名称、各图层的位置属性信息以及图片格式的图层名称等内容压缩形成ZIP数据包，并将该ZIP数据包传输到相应的网络设备（如网站服务器）；如果本实施例中的所有步骤S100-S140均是在同一设备中执行，则可以不执行上述打包发送操作。

需要特别说明的是，为了方便后续处理，上述获取到的各图层的位置属性信息以及图片格式的图层名称等信息可以形成结构化数据，进一步的，该结构化数据可以为具有层级关系的结构化数据；该结构化数据的层级关系应与基于PHOTOSHOP的图片中的父子图层关系相对应；也就是说，本实施例的结构化数据不仅可以体现出基于PHOTOSHOP的图片中的图层组，而且，还可以体现出图层组中的父图层和子图层。当然，结构化数据不具有层级关系在本实施例中也是完全可行的。

本实施例利用各图层的位置属性信息、图片格式的图层的图片名称以及图层组的父子图层关系信息等所形成的具有层级关系的结构化数据的一个具体例子如下所示：

其中，filename为图片格式的图层名称，name为图层的名称（即图层在PHOTOSHOP中的名称），rect{}中的内容为图层的位置属性信息，layer表示图层，group表示图层组，children表示子图层，"安装浏览器.psd"为利用PHOTOSHOP设计的图片的名称,"width":1208表示整个图片的宽度，"height":856表示整体图片的高度，"time":8表示本插件获得上述信息的时间为8秒。

如果将上述结构化数据中的“children”（子图层）以及“group”（图层组）等表示层级关系的内容去除，则本实施例所形成的结构化数据为不具有层级关系的结构化数据。

S110、根据各图层中的非背景图层的位置属性信息确定页面宽度。

具体的，本实施例中的页面宽度是指除去整个图片的背景图层之后的其他图层所形成的页面宽度；该页面宽度可以称为WEB页面的真正宽度。为了避免一些因素对确定页面宽度准确性的影响，本实施例可以在确定页面宽度过程中将非背景图层中的比较小的图层暂时滤除，只利用宽度超过预定宽度或者高度超过预定高度的非背景图层来确定页面宽度；上述比较小的图层是指图片的宽度小于预定宽度且图层的高度小于预定高度的图层。

下面以一个具体的例子来说明本实施例中的WEB页面的真正宽度的具体所指：WEB页面设计师在利用PHOTOSHOP进行WEB页面设计时，通常会将WEB页面的整体宽度设计的比较大，如将WEB页面的整体宽度设计为1600px（像素）,然而，实际上该WEB页面中有实际内容部分的真正宽度只有960px，其余的640px（1600px-960px）这部分宽度通常会被均分后设置在页面的左右两侧，即每侧的宽度均为320px，而且，320px宽度这部分内容通常都为背景色；本步骤需要分析出WEB页面的真正宽度为960px，而不是图片的整个宽度1600px。

本实施例是将宽度超过预定宽度以及高度超过预定高度的所有非背景图层的宽度进行合并，从而获得页面宽度的。一个具体的例子如下：

首先，从结构化数据中读取第一个图层的位置属性信息，并根据位置属性信息判断第一个图层的宽度是否为图片的整个宽度（如判断图层的宽度是否为1600px）、第一个图层的宽度是否超过预定宽度或者第一个图层的高度是否超过预定高度，如果第一个图层的宽度是图片的整个宽度、或者宽度没有超过预定宽度且高度没有超过预定高度，则从结构化数据中顺序读取第二个图层的位置属性信息；如果第一个图层的宽度不是图片的整个宽度、且宽度超过预定宽度或者高度超过预定高度，则将第一个图层的位置属性信息作为当前合并区域的位置属性信息，然后，继续从结构化数据中读取第二个图层的位置属性信息。

其次，根据位置属性信息判断第二个图层的宽度是否为图片的整个宽度（如判断图层的宽度是否为1600px）、第二个图层的宽度是否超过预定宽度或者第二个图层的高度是否超过预定高度，如果第二个图层的宽度是图片的整个宽度、或者宽度没有超过预定宽度且高度没有超过预定高度，则从结构化数据中顺序读取第三个图层的位置属性信息；如果第二个图层的宽度不是图片的整个宽度、且宽度超过预定宽度或者高度超过预定高度，则将第二个图层的区域（通过图层的宽度、高度、left以及top等值确定出的区域）与当前合并区域进行合并，将本次合并后的区域的位置属性信息作为当前合并区域的位置属性信息，并继续从结构化数据中顺序读取第三个图层的位置属性信息。

以此类推，直到针对该图片的最后一个图层进行了上述的判断以及合并操作；最终本实施例可以将最后的当前合并区域作为合并后的总区域，该总区域的宽度即为上述页面宽度。

S120、根据各图层中的非背景图层的位置属性信息将各非背景图层划分为至少一组，且一组中的各图层之间具有区域包含关系。

具体的，HTML程序代码中通常包含有多个节点，本步骤即是针对HTML程序代码具有节点这一特点而对非背景图层进行分组的，这样，一组非背景图层对应HTML程序代码中的一个节点。

WEB页面设计人员在设计WEB页面的图片时，为了使图片具有清晰的图层结构，通常会将相关的图层设置在一个图层组中；对应的，在通过PHOTOSHOP中的插件来获取各图层的信息时，可以很方便的形成具有层级结构的结构化数据，如在上述描述中具有Children字段的部分表示图层组。然而，WEB页面设计人员设计的图层组有时并不合理，如WEB页面设计人员在设计图层组时并没有遵守一定的规范，而将完全不相关的两个或者多个图层分配在同一个图层组中；因此，本实施例需要对非背景图层进行分组，以使相关的图层设置在同一图层组中，避免了WEB页面设计人员在设计图层组时存在的不合理现象。

在上述步骤S100中形成的结构化数据为具有层级关系的结构化数据的情况下，本实施例需要先将具有层级关系的结构化数据打平，然后，针对打平后的图层的信息进行分组；也就是说，本实施例应先去除上述结构化数据中图层的层级关系，使所有的图层变为同级的图层，再重新组织图层的层级关系，以去除图层组设置不合理的现象，使图层的层级关系变得更加合理。

本实施例将具有层级关系的结构化数据打平的一个具体例子为：从结构化数据中提取各图层的信息，如提取图层的位置属性信息、图层的名称、图层对应的转换后的图片格式的图层名称以及图片格式的图层存储路径等，然后，并以表或者数据库的形式存储各图层的信息。

在将具有层级关系的结构化数据打平后，可以根据各图层的位置属性信息对各图层进行排序，以方便图层的分组；本实施例对各图层进行排序的一个具体的例子为，根据图层的宽度、图层的高度、图层的顶部与图片的顶部之间的距离信息以及图层的左侧与图片的左侧之间的距离信息确定各图层在整个图片中所处的位置区域，然后，按照各图层所处的位置区域基于预定顺序对各图层进行排序，例如，按照从上到下以及从左到右的顺序对各图层进行排序。在对各图层进行重新排序后可以使图层有序化，如在排序前，第五个图层对应的top或者left值小于第二个图层对应的top或者left值，而在排序后，原来的第五个图层会排在原来的第二个图层之前，使各图层的位置区域具有规律性。

在上述步骤S100中形成的结构化数据为不具有层级关系的结构化数据的情况下，本实施例可以不进行上述打平处理，而是直接利用从结构化数据中提取出的各图层的位置属性信息对各图层按照预定排序顺序进行排序。

另外，在上述排序过程中，会进一步发现两个相邻的图层之间是否存在空隙区域，在发现两个相邻的图层之间存在空隙区域的情况下，本实施例可以在该空隙区域处填补占位图层，该占位图层并没有对应的实际图片，而对应有一个占位符，该占位符对应有位置属性信息，以表示该占位图层的区域大小。本实施例中的占位图层也应参与后续的图层分组处理。

在针对各图层进行排序后，可以针对排序后的图层顺序读取图层的位置属性信息，并利用该位置属性信息判断非背景图层之间的区域包含关系，以便于将具有区域包含关系的非背景图层划分为一组，如在图层1的区域包含了图层2的位置区域的情况下，将图层1和图层2划分为一组，且图层2是图层1的子集。

本实施例对非背景图层进行分组的一个具体的例子为：

首先，读取图层序列中第一个图层的位置属性信息，并根据位置属性信息判断第一个图层的宽度是否为图片的整个宽度（如判断图层的宽度是否为1600px），如果第一个图层的宽度是图片的整个宽度，则从排序后的图层序列中顺序读取第二个图层的位置属性信息；如果第一个图层的宽度不是图片的整个宽度，则将第一个图层的位置属性信息作为第一图层组的区域范围，并继续从排序后的图层序列中顺序读取第二个图层的位置属性信息。

其次，根据位置属性信息判断第二个图层的宽度是否为图片的整个宽度且第二个图层的区域是否在第一图层组的区域范围内，如果宽度是图片的整个宽度，则从排序后的图层序列中顺序读取第三个图层的位置属性信息，如果第二个图层的宽度不是图片的整个宽度且第二个图层的区域在第一图层组的区域范围内，则将第二个图层划分在第一图层组内，并继续从排序后的图层序列中读取第三个图层的位置属性信息；如果第二个图层的宽度不是图片的整个宽度且第二个图层的区域不在第一图层组的区域范围内，则将第二个图层的位置属性信息作为第二图层组的区域范围，并从排序后的图层序列中顺序读取第三个图层的位置属性信息；以此类推，直到针对最后一个图层进行了上述的判断分组操作；最终本实施例可以得到多个分组，而且，有的分组中可能仅包含有一个图层，而有的分组中可能会包含有多个图层。

针对仅包含有一个图层的所有分组（也可以称为单一图层），可以将所有的单一图层合并为一个图片格式的图层，从而可以减少图片格式的图层的数量。

需要特别说明的是，由于排序后的图层中包括占位图层，因此，在上述非背景图层的分组过程中，占位图层也会被分在某个组中，且在占位图层为单一图层时，占位图层应参与上述单一图层合并操作。

S130、根据上述基于PHOTOSHOP的图片的设计宽度和上述页面宽度调整各组中各图层的位置属性信息。

具体的，由于WEB页面设计人员在设计图片时的分辨率与实际WEB页面的分辨率会有所差异，因此，本实施例需要对各组中各图层的位置属性信息进行调整（或者说修正），以使最终展示出的WEB页面不会出现位置偏移。

针对背景图层而言，应根据图片的设计宽度来调整背景图层的位置属性信息，如调整背景图层的左侧与图片的左侧之间的距离信息；而针对非背景图层而言，应根据页面宽度调整非背景图层的位置属性信息，如调整非背景图层的左侧与图片的左侧之间的距离信息。

根据页面宽度调整非背景图层的位置属性信息的一个具体的例子为：设定在设计图片时图片的宽度为1600px，而通过本实施例识别出的页面宽度为960px；设定某一个非背景图层的位置属性信息为：{top:100，left:400，width:100，height:100}，那么，该非背景图层距离页面左侧的边距为400-（1600-960）/2=80px；而在最终生成的WEB页面的分辨率为1280×800的情况下，该非背景图层距离左侧的边距为(1280-960)/2+80=240px；而在最终生成的WEB页面的分辨率为1490×1024的情况下，该非背景图层距离左侧的边距为(1490-960)/2+80=345px。

S140、根据各图层的位置属性信息和各图层的存储路径信息生成HTML程序代码，且一组图层对应HTML程序代码中的一个节点。

具体的，由于在分组处理后，各非背景图层已经形成了具有层级关系的图层结构，因此，利用所有的图层组中的最外层图层（即宽度以及高度均最大的图层）所对应的位置属性信息就可以形成WEB页面的页面布局，也即形成HTML程序代码的布局；由于具有层级关系的图层的信息类似于HTML程序代码中的节点，因此，在HTML程序代码转换过程中，将一个层级的图层（即一个分组的图层）的信息转化为一个HTML程序代码中节点的描述信息。

一个具体的例子，一个分组中的图层的信息如下：

{name:“”,rect:{top:xxx,left:xxx,width:xxx,height}

children:[]//包含的子图层数据

}

将上述图层的信息转化为对应的HTML程序代码的节点的描述信息如下：

<div style=””></div>//子节点

</div>

为了使HTML程序代码具有更好的阅读性，可以将HTML程序代码中的Style信息提取到CSS代码中，如上述HTML程序代码的节点的描述信息被提取到CSS代码中之后，CSS代码和HTML程序代码如下：

CSS代码：

.c1{top:xxx,left:xxx,width:xxx,height:xxx}

HTML程序代码:

<div class=”c2”></div>//子节点

</div>

本实施例可以通过递归的方式将所有的分组的图层分别转化为HTML节点，进而生成完整的HTML程序代码。在HTML程序代码中节点的描述信息中还应包括图片格式的图层的存储路径信息以及图片格式的图层的名称。

另外，对于图片的背景图层生成的CSS代码的一个具体的例子如下：

.c1{

position:absolute;

width:100%;

top:0px;

left:0px;

z-index:930;

height:52px;

background:url(../img/40.png)top center no-repeat;

}

.c2{

position:absolute;

width:100%;

top:52px;

left:0px;

z-index:928;

height:370px;

background:url(../img/42.png)top center no-repeat;

}

在上述程序代码中，“position:absolute”表示该背景图层采用绝对定位方式，width:100%表示该背景图层会自适应屏幕的宽度，top表示该背景图层的顶部距离整个图片顶部的距离，left表示该背景图层的左侧距离整个图片左侧的距离，z-index表示Z轴索引值，height表示该背景图层的高度，“background:url(../img/**.png)top center no-repeat”表示该背景图层的存储路径、图片格式的图层名称以及该背景图层居中设置且不被重复使用。

本实施例针对图2生成的HTML程序代码的一个具体的例子如下：

<!DOCTYPE html>

<html>

<head>

charset=UTF-8">

rel="stylesheet"/>

</head>

<body>

</div>

</div>

<!--[if IE6]>

<script

src="http://s6.qhimg.com/static/f54f2caa703115b3/DD_belatedPNG.js"></script>

<![endif]-->

其中，<!DOCTYPE html>、<html>、<head>、<meta>、<title>、<body>、<script>以及<div>为HTML中的通用标签；Title表示页面的标题；link表示引用了2个外部的CSS文件；Div标签为HTML程序代码中的节点，Div标签通过class=“xxx”可以引用CSS文件对应的样式；Script标签引用了一个外部的JS文件，JS文件主要用来修复生成的图片在IE6浏览器下的显示问题，如在图片格式为Png24时，该图片格式的图层在IE6浏览器下可能会出现蓝色的背景，利用JS文件可以消除该现象。

对于简单的WEB页面，利用本实施例的方法自动转换后的HTML程序代码可以直接进行上线处理。对于复杂一些的WEB页面，可以根据上述具有层级关系的结构化数据对自动转换后的HTML程序代码进行简单的人工修改，然后，将人工修改后的HTML程序代码进行上线处理。

实施例二、生成HTML程序代码的装置。该装置可以设置于页面开发设备或者网站服务器中，也可以设置于页面开发设备以及网站服务器中。下面结合图5对本实施例的装置进行详细说明。

图5中示出的装置主要包括：获取模块500、确定页面宽度模块510、组划分模块520、调整模块530以及代码生成模块540。

获取模块500与确定页面宽度模块510、组划分模块520、调整模块530以及代码生成模块540分别连接。获取模块500主要适于获取基于PHOTOSHOP的图片所包含的各图层，获取各图层的位置属性信息，并将各图层分别转换为图片格式。上述图片可以是基于PHOTOSHOP的图片，也可以是基于其他绘图工具（如AUTOCAD）而绘制的图片，下面以基于PHOTOSHOP的图片为例对本实施例进行说明。

具体的，获取模块500可以先利用PHOTOSHOP工具所提供的接口获得图片中的各图层以及各图层的信息，然后，再根据上述获得的各图层的信息计算出各图层的位置属性信息。

根据目前HTML程序代码针对图片进行描述需求，获取模块500计算出的图层的位置属性信息可以包括：图层的宽度、图层的高度、图层的顶部与整个图片的顶部之间的距离信息以及图层的左侧与整个图片的左侧之间的距离信息。

针对图片中的一个图层而言，获取模块500获得该图层的位置属性信息的一个具体实现方式可以为：获取模块500先利用PHOTOSHOP工具所提供的接口获得该图层的四个顶点的坐标；然后，获取模块500利用该图层的左上顶点或右上顶点的水平坐标值计算该图层与整个图片的顶部之间的距离；获取模块500利用该图层的左上顶点或者左下顶点的垂直坐标值计算该图层与整个图片的左侧之间的距离；获取模块500计算该图层的左上顶点与右上顶点的水平坐标值之间的差值或者计算该图层的左下顶点与右下顶点的水平坐标值之间的差值，以获得该图层的宽度；获取模块500计算该图层的左上顶点的垂直坐标值与左下顶点的垂直坐标值之间的差值或者计算该图层的右上顶点的垂直坐标值与右下顶点的垂直坐标值之间的差值，以获得该图层的高度。

获取模块500可以将上述获取到的各图层分别转换为Png格式的图片（如转换为Png24格式的图片）。

获取模块500可以通过在PHOTOSHOP中设置插件来获取各图层以及各图层的位置属性信息，并将各图层转换为图片格式存储（如将各图层分别存储为Png24格式的图片）；该插件的部分程序代码如上述实施例中的描述，在此不再详细说明。

获取模块500可以将上述获取到的图片格式的各图层、各图层的位置属性信息以及图片格式的图层名称等内容一起打包并发送给预定网络设备，且上述获取到的图层的名称layer.name也可以一起打包，如基于ZIP压缩方式获取模块500将图片格式的各图层、各图层的名称、各图层的位置属性信息以及图片格式的图层名称等内容压缩形成ZIP数据包，并将该ZIP数据包传输到相应的网络设备（如网站服务器）；如果本装置中的各模块均设置在同一设备中，则获取模块500可以不执行上述打包发送操作。

需要特别说明的是，为了方便后续处理，获取模块500获取到的各图层的位置属性信息以及图片格式的图层名称等信息可以形成结构化数据，进一步的，该结构化数据可以为具有层级关系的结构化数据；该结构化数据的层级关系应与基于PHOTOSHOP的图片中的父子图层关系相对应。当然，获取模块500所形成的结构化数据不具有层级关系也是完全可行的。

获取模块500利用各图层的位置属性信息、图片格式的图层的图片名称以及图层组的父子图层关系信息等所形成的具有层级关系的结构化数据的一个具体例子如上述方法实施例中的描述，在此不再详细说明。

确定页面宽度模块510除了与获取模块500连接之外，还与调整模块530连接。确定页面宽度模块510主要适于根据各图层中的非背景图层的位置属性信息确定页面宽度。

具体的，本实施例中的页面宽度是指除去整个图片的背景图层之后的其他图层所形成的页面宽度；该页面宽度可以称为WEB页面的真正宽度。为了避免一些因素对确定页面宽度准确性的影响，确定页面宽度模块510在确定页面宽度过程中将非背景图层中的比较小的图层暂时滤除，只利用宽度超过预定宽度或者高度超过预定高度的非背景图层来确定页面宽度；上述比较小的图层是指图片的宽度小于预定宽度且图层的高度小于预定高度的图层。

确定页面宽度模块510可以将宽度超过预定宽度以及高度超过预定高度的所有非背景图层的宽度进行合并，从而获得页面宽度。一个具体的例子如下：

首先，确定页面宽度模块510从结构化数据中读取第一个图层的位置属性信息，并根据位置属性信息判断第一个图层的宽度是否为图片的整个宽度（如判断图层的宽度是否为1600px）、第一个图层的宽度是否超过预定宽度或者第一个图层的高度是否超过预定高度，如果第一个图层的宽度是图片的整个宽度、或者宽度没有超过预定宽度且高度没有超过预定高度，则确定页面宽度模块510从结构化数据中顺序读取第二个图层的位置属性信息；如果第一个图层的宽度不是图片的整个宽度、且宽度超过预定宽度或者高度超过预定高度，则确定页面宽度模块510将第一个图层的位置属性信息作为当前合并区域的位置属性信息，然后，确定页面宽度模块510继续从结构化数据中读取第二个图层的位置属性信息。

其次，确定页面宽度模块510根据位置属性信息判断第二个图层的宽度是否为图片的整个宽度（如判断图层的宽度是否为1600px）、第二个图层的宽度是否超过预定宽度或者第二个图层的高度是否超过预定高度，如果第二个图层的宽度是图片的整个宽度、或者宽度没有超过预定宽度且高度没有超过预定高度，则确定页面宽度模块510从结构化数据中顺序读取第三个图层的位置属性信息；如果第二个图层的宽度不是图片的整个宽度、且宽度超过预定宽度或者高度超过预定高度，则确定页面宽度模块510将第二个图层的区域（通过图层的宽度、高度、left以及top等值确定出的区域）与当前合并区域进行合并，确定页面宽度模块510将本次合并后的区域的位置属性信息作为当前合并区域的位置属性信息，并继续从结构化数据中顺序读取第三个图层的位置属性信息。

以此类推，直到针对该图片的最后一个图层确定页面宽度模块510进行了上述的判断以及合并操作；最终确定页面宽度模块510可以将最后的当前合并区域作为合并后的总区域，该总区域的宽度即为上述页面宽度。

组划分模块520主要适于根据各图层中的非背景图层的位置属性信息将各非背景图层划分为至少一组，且一组中的各图层之间具有区域包含关系。

具体的，在获取模块500形成的结构化数据为具有层级关系的结构化数据的情况下，组划分模块520需要先将具有层级关系的结构化数据打平，然后，组划分模块520针对打平后的图层的信息进行分组；也就是说，组划分模块520应先去除上述结构化数据中图层的层级关系，使所有的图层变为同级的图层，组划分模块520再重新组织图层的层级关系，以去除图层组设置不合理的现象，使图层的层级关系变得更加合理。

组划分模块520将具有层级关系的结构化数据打平的一个具体例子：组划分模块520从结构化数据中提取各图层的信息，如提取图层的位置属性信息、图层的名称、图层对应的转换后的图片格式的图层名称以及图片格式的图层存储路径等，然后，组划分模块520以表或者数据库的形式存储各图层的信息。

在将具有层级关系的结构化数据打平后，组划分模块520可以根据各图层的位置属性信息对各图层进行排序，以方便图层的分组；组划分模块520对各图层进行排序的一个具体的例子：组划分模块520根据图层的宽度、图层的高度、图层的顶部与图片的顶部之间的距离信息以及图层的左侧与图片的左侧之间的距离信息确定各图层在整个图片中所处的位置区域；然后，组划分模块520按照各图层所处的位置区域基于预先设定的顺序对各图层进行排序，例如，组划分模块520按照从上到下以及从左到右的顺序对各图层进行排序。在对各图层进行重新排序后可以使图层有序化。

在获取模块500所形成的结构化数据为不具有层级关系的结构化数据的情况下，组划分模块520可以不进行上述打平处理，而是直接利用从结构化数据中提取出的各图层的位置属性信息对各图层按照预定排序顺序进行排序。

另外，在上述排序过程中，组划分模块520会进一步发现两个相邻的图层之间是否存在空隙区域，在发现两个相邻的图层之间存在空隙区域的情况下，组划分模块520可以在该空隙区域处填补占位图层，该占位图层并没有对应的实际图片，而对应有一个占位符，该占位符对应有位置属性信息，以表示该占位图层的区域大小。本实施例中的占位图层也应参与后续的图层分组处理。

在针对各图层进行排序后，组划分模块520可以针对排序后的图层顺序读取图层的位置属性信息，并利用该位置属性信息判断非背景图层之间的区域包含关系，以便于将具有区域包含关系的非背景图层划分为一组，如在图层1的区域包含了图层2的位置区域的情况下，组划分模块520将图层1和图层2划分为一组，且图层2是图层1的子集。

组划分模块520对非背景图层进行分组的一个具体的例子为：

首先，组划分模块520读取图层序列中第一个图层的位置属性信息，组划分模块520根据位置属性信息判断第一个图层的宽度是否为图片的整个宽度（如判断图层的宽度是否为1600px），如果第一个图层的宽度是图片的整个宽度，则组划分模块520从排序后的图层序列中顺序读取第二个图层的位置属性信息；如果第一个图层的宽度不是图片的整个宽度，则组划分模块520将第一个图层的位置属性信息作为第一图层组的区域范围，并继续从排序后的图层序列中顺序读取第二个图层的位置属性信息。

其次，组划分模块520根据位置属性信息判断第二个图层的宽度是否为图片的整个宽度且第二个图层的区域是否在第一图层组的区域范围内，如果宽度是图片的整个宽度，则组划分模块520从排序后的图层序列中顺序读取第三个图层的位置属性信息，如果第二个图层的宽度不是图片的整个宽度且第二个图层的区域在第一图层组的区域范围内，则组划分模块520将第二个图层划分在第一图层组内，并继续从排序后的图层序列中读取第三个图层的位置属性信息；如果第二个图层的宽度不是图片的整个宽度且第二个图层的区域不在第一图层组的区域范围内，则组划分模块520将第二个图层的位置属性信息作为第二图层组的区域范围，并从排序后的图层序列中顺序读取第三个图层的位置属性信息；以此类推，直到组划分模块520针对最后一个图层进行了上述的判断分组操作；最终组划分模块520可以得到多个分组，而且，有的分组中可能仅包含有一个图层，而有的分组中可能会包含有多个图层。

针对仅包含有一个图层的所有分组（也可以称为单一图层），组划分模块520可以将所有的单一图层合并为一个图片格式的图层，从而可以减少图片格式的图层的数量。

需要特别说明的是，由于排序后的图层中包括占位图层，因此，在上述非背景图层的分组过程中，占位图层会被组划分模块520分在某个组中，且在占位图层为单一图层时，组划分模块520应针对该占位图层进行单一图层合并操作。

调整模块530除了与上述获取模块500以及确定页面宽度模块510连接之外，还与代码生成模块540连接。调整模块530主要适于根据图片的设计宽度和页面宽度调整各组中各图层的位置属性信息。

具体的，由于WEB页面设计人员在设计图片时的分辨率与实际WEB页面的分辨率会有所差异，因此，调整模块530需要对各组中各图层的位置属性信息进行调整（或者说修正），以使最终展示出的WEB页面不会出现位置偏移。

针对背景图层而言，调整模块530应根据图片的设计宽度来调整背景图层的位置属性信息，例如，调整模块530调整背景图层的左侧与图片的左侧之间的距离信息；而针对非背景图层而言，调整模块530应根据页面宽度调整非背景图层的位置属性信息，例如，调整模块530调整非背景图层的左侧与图片的左侧之间的距离信息。

调整模块530根据页面宽度调整非背景图层的位置属性信息的一个具体的例子如上述方法实施例的描述，在此不再详细说明。

代码生成模块540除了与上述获取模块500连接之外，还与调整模块530连接。代码生成模块540主要适于根据各图层的位置属性信息和各图层的存储路径信息生成HTML程序代码，且一组图层对应HTML程序代码中的一个节点。

具体的，由于组划分模块520在分组处理后，各非背景图层已经形成了具有层级关系的图层结构，因此，代码生成模块540利用所有的图层组中的最外层图层（即宽度以及高度均最大的图层）所对应的位置属性信息就可以形成WEB页面的页面布局，也即形成HTML程序代码的布局；由于具有层级关系的图层的信息类似于HTML程序代码中的节点，因此，在HTML程序代码转换过程中，代码生成模块540将一个层级的图层（即一个分组的图层）的信息转化为一个HTML程序代码中节点的描述信息。

为了使HTML程序代码具有更好的阅读性，代码生成模块540可以将HTML程序代码中的Style信息提取到CSS代码中。代码生成模块540可以通过递归的方式将所有的分组的图层分别转化为HTML节点，进而生成完整的HTML程序代码。

另外，在代码生成模块540生成的HTML程序代码中节点的描述信息中还应包括图片格式的图层的存储路径信息以及图片格式的图层的名称。

对于简单的WEB页面，利用本实施例的装置自动转换后的HTML程序代码可以直接进行上线处理。对于复杂一些的WEB页面，可以根据获取模块500生成的具有层级关系的结构化数据对自动转换后的HTML程序代码进行简单的人工修改，然后，将人工修改后的HTML程序代码进行上线处理。

A1、一种生成HTML程序代码的方法，其包括：

获取图片所包含的各图层，获取各图层的位置属性信息，并将所述各图层分别转换为图片格式；

根据各图层中的非背景图层的位置属性信息确定页面宽度；

根据各图层中的非背景图层的位置属性信息将各非背景图层划分为至少一组，且一组中的各图层之间具有区域包含关系；

根据所述图片的设计宽度和所述页面宽度调整各组中各图层的位置属性信息；

根据各图层的位置属性信息和各图片格式的图层的存储路径信息生成HTML程序代码，且一组图层对应HTML程序代码中的一个节点。

A2、如A1所述的方法，其中，所述获取各图层的位置属性信息包括：

获取各图层的四个顶点的坐标，并将所述各图层的四个顶点的坐标分别转换为各图层的位置属性信息；

其中，所述图层的位置属性信息包括：图层的宽度、图层的高度、图层的顶部与所述图片的顶部之间的距离信息以及图层的左侧与所述图片的左侧之间的距离信息。

A3、如A1所述的方法，其中，所述各图层的位置属性信息以具有层级关系的结构化数据的形式表示，且所述结构化数据的层级关系与所述父子图层关系相对应。

A4、如A1或A2或A3所述的方法，其中，所述根据各图层中的非背景图层的位置属性信息确定页面宽度包括：

选取宽度超过预定宽度且高度超过预定高度的非背景图层；

合并上述选取出的各非背景图层的宽度，并将合并后获得的宽度确定为所述页面宽度。

A5、如A3所述的方法，其中，所述结构化数据包括：所述各图层的位置属性信息、图片格式的图层的图片名称和图层组的父子图层关系信息。

A6、如A3所述的方法，其中，所述根据各图层中的非背景图层的位置属性信息将各非背景图层划分为至少一组包括：

从所述结构化数据中提取各图层的位置属性信息，并根据所述位置属性信息将各图层按照预定排序顺序进行排序；

根据排序后相邻的两图层之间的空隙位置设置占位符，且所述占位符的位置属性信息为所述空隙位置的位置属性信息；

根据所述位置属性信息将包括占位符在内的非背景图层划分为至少一组。

A7、如A6所述的方法，其中，所述根据各图层中的非背景图层的位置属性信息将各非背景图层划分为至少一组还包括：

将与其他图层没有区域包含关系的所有单一图层合并为一个图片格式的图层。

A8、如A1所述的方法，其中，所述根据各图层的位置属性信息和各图片格式的图层的存储路径信息生成HTML程序代码包括：

将HTML程序代码中的Style信息提取到CSS代码中。

B9、一种生成HTML程序代码的装置，其包括：

获取模块，适于获取图片所包含的各图层，获取各图层的位置属性信息，并将所述各图层分别转换为图片格式；

确定页面宽度模块，适于根据各图层中的非背景图层的位置属性信息确定页面宽度；

组划分模块，适于根据各图层中的非背景图层的位置属性信息将各非背景图层划分为至少一组，且一组中的各图层之间具有区域包含关系；

调整模块，适于根据所述图片的设计宽度和所述页面宽度调整各组中各图层的位置属性信息；

代码生成模块，适于根据各图层的位置属性信息和各图片格式的图层的存储路径信息生成HTML程序代码，且一组图层对应HTML程序代码中的一个节点。

B10、如B9所述的装置，其中，所述获取模块还适于：

B11、如B9所述的装置，其中，所述各图层的位置属性信息以具有层级关系的结构化数据的形式表示，且所述结构化数据的层级关系与所述父子图层关系相对应。

B12、如B9或B10或B11所述的装置，其中，所述确定页面宽度模块还适于：

选取宽度超过预定宽度且高度超过预定高度的非背景图层；

B13、如B11所述的装置，其中，所述结构化数据包括：所述各图层的位置属性信息、图片格式的图层的图片名称和图层组的父子图层关系信息。

B14、如B11所述的装置，其中，所述组划分模块还适于：

B15、如B14所述的装置，其中，所述组划分模块还适于：

B16、如B9所述的装置，其中，所述代码生成模块还适于：

将HTML程序代码中的Style信息提取到CSS代码中。

在此提供的算法和显示不与任何特定计算机、虚拟系统或者其它设备固有相关。各种通用系统也可以与基于在此的示教一起使用。根据上面的描述，构造这类系统所要求的结构是显而易见的。此外，本发明也不针对任何特定编程语言。应当明白，可以利用各种编程语言实现在此描述的本发明的内容，并且上面对特定语言所做的描述是为了披露本发明的最佳实施方式。

在此处所提供的说明书中，说明了大量具体细节。然而，能够理解，本发明的实施例可以在没有这些具体细节的情况下实践。在一些实例中，并未详细示出公知的方法、结构和技术，以便不模糊对本说明书的理解。

类似地，应当理解，为了精简本公开并帮助理解各个发明方面中的一个或多个，在上面对本发明的示例性实施例的描述中，本发明的各个特征有时被一起分组到单个实施例、图、或者对其的描述中。然而，并不应将该公开的方法解释成反映如下意图：即所要求保护的本发明要求比在每个权利要求中所明确记载的特征更多的特征。更确切地说，如下面的权利要求书所反映的那样，发明方面在于少于前面公开的单个实施例的所有特征。因此，遵循具体实施方式的权利要求书由此明确地并入该具体实施方式，其中每个权利要求本身都作为本发明的单独实施例。

本领域那些技术人员可以理解，可以对实施例中的设备中的模块进行自适应性地改变并且把它们设置在与该实施例不同的一个或多个设备中。可以把实施例中的模块或单元或组件组合成一个模块或单元或组件，以及此外可以把它们分成多个子模块或子单元或子组件。除了这样的特征和/或过程或者单元中的至少一些是相互排斥之外，可以采用任何组合对本说明书（包括伴随的权利要求、摘要和附图）中公开的所有特征以及如此公开的任何方法或者设备的所有过程或单元进行组合。除非另外明确陈述，本说明书（包括伴随的权利要求、摘要和附图）中公开的每个特征可以由提供相同、等同或相似目的的替代特征来代替。

此外，本领域的技术人员能够理解，尽管在此所述的一些实施例包括其它实施例中所包括的某些特征而不是其它特征，但是不同实施例的特征的组合意味着处于本发明的范围之内并且形成不同的实施例。例如，在下面的权利要求书中，所要求保护的实施例的任意之一都可以以任意的组合方式来使用。

本发明的各个部件实施例可以以硬件实现，或者以在一个或者多个处理器上运行的软件模块实现，或者以它们的组合实现。本领域的技术人员应当理解，可以在实践中使用微处理器或者数字信号处理器（DSP）来实现根据本发明实施例的生成HTML程序代码的装置中的一些或者全部部件的一些或者全部功能。本发明还可以实现为用于执行这里所描述的方法的一部分或者全部的设备或者装置程序（例如，计算机程序和计算机程序产品）。这样的实现本发明的程序可以存储在计算机可读介质上，或者可以具有一个或者多个信号的形式。这样的信号可以从因特网网站上下载得到，或者在载体信号上提供，或者以任何其他形式提供。

应该注意的是，上述实施例对本发明进行说明而不是对本发明进行限制，并且本领域技术人员在不脱离所附权利要求的范围的情况下可设计出替换实施例。在权利要求中，不应将位于括号之间的任何参考符号构造成对权利要求的限制。单词“包含”不排除存在未列在权利要求中的元件或步骤。位于元件之前的单词“一”或“一个”不排除存在多个这样的元件。本发明可以借助于包括有若干不同元件的硬件以及借助于适当编程的计算机来实现。在列举了若干装置的单元权利要求中，这些装置中的若干个可以是通过同一个硬件项来具体体现。单词第一、第二以及第三等的使用不表示任何顺序。可将这些单词解释为名称。

Claims

1.一种生成HTML程序代码的方法，其包括：

根据各图层中的非背景图层的位置属性信息确定页面宽度；

2.如权利要求1所述的方法，其中，所述获取各图层的位置属性信息包括：

3.如权利要求1所述的方法，其中，所述各图层的位置属性信息以具有层级关系的结构化数据的形式表示，且所述结构化数据的层级关系与所述父子图层关系相对应。

4.如权利要求1或2或3所述的方法，其中，所述根据各图层中的非背景图层的位置属性信息确定页面宽度包括：

选取宽度超过预定宽度且高度超过预定高度的非背景图层；

5.如权利要求3所述的方法，其中，所述结构化数据包括：所述各图层的位置属性信息、图片格式的图层的图片名称和图层组的父子图层关系信息。

6.如权利要求3所述的方法，其中，所述根据各图层中的非背景图层的位置属性信息将各非背景图层划分为至少一组包括：

7.如权利要求6所述的方法，其中，所述根据各图层中的非背景图层的位置属性信息将各非背景图层划分为至少一组还包括：

8.如权利要求1所述的方法，其中，所述根据各图层的位置属性信息和各图片格式的图层的存储路径信息生成HTML程序代码包括：

将HTML程序代码中的Style信息提取到CSS代码中。

9.一种生成HTML程序代码的装置，其包括：

10.如权利要求9所述的装置，其中，所述获取模块还适于：