生成html程序代码的方法和装置制造方法
【专利摘要】本发明公开了一种生成HTML程序代码的方法和装置；其中的方法主要包括：获取图片所包含的各图层，获取各图层的位置属性信息，并将所述各图层分别转换为图片格式；根据各图层中的非背景图层的位置属性信息确定页面宽度；根据各图层中的非背景图层的位置属性信息将各非背景图层划分为至少一组，且一组中的各图层之间具有区域包含关系；根据所述图片的设计宽度和所述页面宽度调整各组中各图层的位置属性信息；根据各图层的位置属性信息和各图片格式的图层的存储路径信息生成HTML程序代码，且一组图层对应HTML程序代码中的一个节点。
【专利说明】生成HTML程序代码的方法和装置
【技术领域】
[0001]本发明涉及WEB页面开发技术，具体涉及一种生成HTML程序代码的方法和装置。【背景技术】
[0002]在WEB页面开发过程中，通常是WEB页面设计人员针对产品项目的具体需求进行设计稿(即图片，如利用PHOTOSHOP设计的图片)的制作工作，之后，WEB代码开发人员对制作好的设计稿进行切图处理，并针对切图处理后形成的多个图片进行HTML程序代码的编写工作；WEB代码开发人员将编写完成的HTML程序代码上线(如设置到相应的网站服务器中)。
[0003]发明人在实现本发明过程中发现，除了大型的产品项目之外，还存在一些存活期较短(如一两天)的小产品项目(如举办活动类的产品等)，这种类型的产品项目的特点包括:通常是针对节日或者特殊事件、需求有时候比较紧急、产品对应的页面在上线后被使用的时间较短、对HTML程序代码质量要求不高以及不需要后期的维护和升级等。如果利用现有的WEB页面开发方式对上述类型的产品项目进行HTML程序代码编写，有时会存在不能快速响应开发需求的问题，因此，WEB页面开发效率有待于进一步提高。
【发明内容】
[0004]鉴于上述问题，提出了本发明以便提供一种克服上述问题或者至少部分地解决上述问题的生成HTML程序代码的方法以及相应的生成HTML程序代码的装置。
[0005]依据本发明的一个方面，提供了一种生成HTML程序代码的方法，该方法包括:获取图片所包含的各图层，获取各图层的位置属性信息，并将所述各图层分别转换为图片格式；根据各图层中的非背景图层的位置属性信息确定页面宽度；根据各图层中的非背景图层的位置属性信息将各非背景图层划分为至少一组，且一组中的各图层之间具有区域包含关系；根据所述图片的设计宽度和所述页面宽度调整各组中各图层的位置属性信息；根据各图层的位置属性信息和各图片格式的图层的存储路径信息生成HTML程序代码，且一组图层对应HTML程序代码中的一个节点。
[0006]根据本发明的另一方面，提供了一种生成HTML程序代码的装置，该装置包括:获取模块，适于获取图片所包含的各图层，获取各图层的位置属性信息，并将所述各图层分别转换为图片格式；确定页面宽度模块，适于根据各图层中的非背景图层的位置属性信息确定页面宽度；组划分模块，适于根据各图层中的非背景图层的位置属性信息将各非背景图层划分为至少一组，且一组中的各图层之间具有区域包含关系；调整模块，适于根据图片的设计宽度和所述页面宽度调整各组中各图层的位置属性信息；代码生成模块，适于根据各图层的位置属性信息和各图片格式的图层的存储路径信息生成HTML程序代码，且一组图层对应HTML程序代码中的一个节点。
[0007]本发明的生成HTML程序代码的方法以及装置通过获取WEB页面设计图片的各图层以及各图层的位置属性信息，对图层进行图片格式转换处理，并基于图层的位置属性信息进行图片格式的图层的分组处理以及位置调整处理等，使划分出的图层组与HTML程序代码中的节点相对应，且图片格式的各图层的位置能够较好的适应实际WEB页面的分辨率；从而本发明能够针对WEB页面设计人员设计出的图片自动生成HTML程序代码，在很大程度上提高了 WEB页面的开发效率。
[0008]上述说明仅是本发明技术方案的概述，为了能够更清楚了解本发明的技术手段，而可依照说明书的内容予以实施，并且为了让本发明的上述和其它目的、特征和优点能够更明显易懂，以下特举本发明的【具体实施方式】。
【专利附图】
【附图说明】
[0009]通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。说明书附图仅用于示出优选实施方式的目的，而并不认为是对本发明的限制。而且在整个附图中，用相同的参考符号表示相同的部件。在附图中:
[0010]图1示出了根据本发明实施例一的生成HTML程序代码的方法流程图；
[0011]图2示出了根据本发明实施例一的图片示意图；
[0012]图3示出了根据本发明实施例一的图层示意图；
[0013]图4A-图4H示出了根据本发明实施例一的图片格式的各图层示意图；
[0014]图5示出了根据本发明实施例二的生成HTML程序代码的装置示意图。
【具体实施方式】
[0015]下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本发明公开的示例性实施例，然而应当理解，可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本公开，并且能够将本公开的范围完整的传达给本领域的技术人员。
[0016]实施例一、生成HTML程序代码的方法。下面结合图1-图4对本实施例的方法进行详细说明。
[0017]图1中，S100、获取图片所包含的各图层，获取各图层的位置属性信息，并将上述各图层分别转换为图片格式。
[0018]具体的，本实施例中的图片可以是利用PHOTOSHOP工具设计的图片(如PSD图片等)，如针对举办活动类的产品而设计的图片，且该图片在通常情况下都会包括多个图层。PSD图片的一个具体例子如图2所示，且图2示出的PSD图片所包含的图层的相关信息如图3所示。当然，上述图片也可以是利用其他绘图工具(如AUTOCAD)设计的图片。
[0019]本实施例可以先利用PHOTOSHOP工具或者其他绘图工具所提供的接口获得图片中的各图层以及各图层的信息，然后，再根据上述获得的各图层的信息计算出各图层的位置属性信息。下面以PHOTOSHOP工具为例对本实施例进行说明。
[0020]本实施例中的图层的位置属性信息是用于描述图层在整个图片中的具体位置的信息，且图层的位置属性信息的具体内容可以根据HTML程序代码针对图片进行描述的具体需求来决定。
[0021]一个具体的例子，根据目前HTML程序代码针对图片进行描述需求，本实施例中的图层的位置属性信息包括:图层的宽度、图层的高度、图层的顶部与整个图片的顶部之间的距离信息以及图层的左侧与整个图片的左侧之间的距离信息。
[0022]针对图片中的一个图层而言，本实施例获得该图层的位置属性信息的一个具体实现方式可以为:先利用PHOTOSHOP工具所提供的接口获得该图层的四个顶点的坐标；然后，利用该图层的左上顶点或者右上顶点的水平坐标值计算该图层与整个图片的顶部之间的距离；利用该图层的左上顶点或者左下顶点的垂直坐标值计算该图层与整个图片的左侧之间的距离；计算该图层的左上顶点与右上顶点的水平坐标值之间的差值或者计算该图层的左下顶点与右下顶点的水平坐标值之间的差值，以获得该图层的宽度；计算该图层的左上顶点的垂直坐标值与左下顶点的垂直坐标值之间的差值或者计算该图层的右上顶点的垂直坐标值与右下顶点的垂直坐标值之间的差值，以获得该图层的高度。
[0023]本实施例可以将上述获取到的各图层分别转换为Png格式的图片(如转换为Png24格式的图片)；图2以及图3中的各图层转换为Png格式的图片如图4A-图4H所示。
[0024]需要说明的是，上述图片格式转换操作与上述各图层的位置属性信息的获取操作在本实施例中并没有必然的先后执行顺序的限制，即上述转换操作以及获取操作可以并行执行，也可以先后执行。
[0025]本实施例可以通过在PHOTOSHOP中设置插件来获取各图层以及各图层的位置属性信息，并将各图层转换为图片格式存储(如将各图层分别存储为Png24格式的图片);该插件的部分程序代码可以如下所示:
[0026]
【权利要求】
1.一种生成HTML程序代码的方法，其包括: 获取图片所包含的各图层，获取各图层的位置属性信息，并将所述各图层分别转换为图片格式； 根据各图层中的非背景图层的位置属性信息确定页面宽度； 根据各图层中的非背景图层的位置属性信息将各非背景图层划分为至少一组，且一组中的各图层之间具有区域包含关系； 根据所述图片的设计宽度和所述页面宽度调整各组中各图层的位置属性信息； 根据各图层的位置属性信息和各图片格式的图层的存储路径信息生成HTML程序代码，且一组图层对应HTML程序代码中的一个节点。
2.如权利要求1所述的方法，其中，所述获取各图层的位置属性信息包括: 获取各图层的四个顶点的坐标，并将所述各图层的四个顶点的坐标分别转换为各图层的位置属性信息； 其中，所述图层的位置属性信息包括:图层的宽度、图层的高度、图层的顶部与所述图片的顶部之间的距离信息以及图层的左侧与所述图片的左侧之间的距离信息。
3.如权利要求1所述的方法，其中，所述各图层的位置属性信息以具有层级关系的结构化数据的形式表示，且所述结 构化数据的层级关系与所述父子图层关系相对应。
4.如权利要求1或2或3所述的方法，其中，所述根据各图层中的非背景图层的位置属性信息确定页面宽度包括: 选取宽度超过预定宽度且高度超过预定高度的非背景图层； 合并上述选取出的各非背景图层的宽度，并将合并后获得的宽度确定为所述页面宽度。
5.如权利要求3所述的方法，其中，所述结构化数据包括:所述各图层的位置属性信息、图片格式的图层的图片名称和图层组的父子图层关系信息。
6.如权利要求3所述的方法，其中，所述根据各图层中的非背景图层的位置属性信息将各非背景图层划分为至少一组包括: 从所述结构化数据中提取各图层的位置属性信息，并根据所述位置属性信息将各图层按照预定排序顺序进行排序； 根据排序后相邻的两图层之间的空隙位置设置占位符，且所述占位符的位置属性信息为所述空隙位置的位置属性信息； 根据所述位置属性信息将包括占位符在内的非背景图层划分为至少一组。
7.如权利要求6所述的方法，其中，所述根据各图层中的非背景图层的位置属性信息将各非背景图层划分为至少一组还包括: 将与其他图层没有区域包含关系的所有单一图层合并为一个图片格式的图层。
8.如权利要求1所述的方法，其中，所述根据各图层的位置属性信息和各图片格式的图层的存储路径信息生成HTML程序代码包括: 将HTML程序代码中的Style信息提取到CSS代码中。
9.一种生成HTML程序代码的装置，其包括: 获取模块，适于获取图片所包含的各图层，获取各图层的位置属性信息，并将所述各图层分别转换为图片格式；确定页面宽度模块，适于根据各图层中的非背景图层的位置属性信息确定页面宽度；组划分模块，适于根据各图层中的非背景图层的位置属性信息将各非背景图层划分为至少一组，且一组中的各图层之间具有区域包含关系； 调整模块，适于根据所述图片的设计宽度和所述页面宽度调整各组中各图层的位置属性信息； 代码生成模块，适于根据各图层的位置属性信息和各图片格式的图层的存储路径信息生成HTML程序代码，且一组图层对应HTML程序代码中的一个节点。
10.如权利要求9所述的装置，其中，所述获取模块还适于: 获取各图层的四个顶点的坐标，并将所述各图层的四个顶点的坐标分别转换为各图层的位置属性信息； 其中，所述图层的位置属性信息包括:图层的宽度、图层的高度、图层的顶部与所述图片的顶部之间的距离信息以及图层的左侧与`所述图片的左侧之间的距离信息。
【文档编号】G06F9/44GK103744674SQ201410005255
【公开日】2014年4月23日 申请日期:2014年1月6日 优先权日:2014年1月6日
【发明者】李成银 申请人:北京奇虎科技有限公司, 奇智软件（北京）有限公司