CN103777989A - 用于将视觉稿源文件生成html标记的方法及系统 - Google Patents

Abstract

本发明涉及一种用于将视觉稿源文件生成HTML标记的方法及系统。所述方法包括：使用解析器解析视觉稿源文件的图层；基于解析结果获取包含一个或多个单个图层的有效图层；选择用于生成HTML标记的规则，所述规则包括从具有多种页面模板的可配置模版方案中选择一种页面模板以确定要生成的HTML标记的结构；以及根据所述规则，将所述有效图层生成HTML标记。

Description

用于将视觉稿源文件生成HTML标记的方法及系统

技术领域

本申请涉及图像文件处理领域，尤其涉及一种用于将视觉稿源文件生成HTML标记的方法及系统。

背景技术

视觉稿就是通常所说的PSD文件，PSD文件是指adobe photoshop专用的图像文件格式，是目前唯一能够支持全部图像色彩模式的格式。PSD文件体积庞大，虽然在大部分平面设计软件（例如Adobe Illustrator、After Effect、Corel DRAW等）内部可以通用，但是PSD格式的图像文件很少被平面设计软件以外的其它软件和工具所支持。所以，在图像制作完成后，通常需要将PSD文件转化为一些比较通用的图像格式（例如jpg格式等）的文件，以便于将其输出到其它软件中继续编辑。

目前，由于网页设计的需求，促进了PSD2HTML相关技术的发展。PSD2HTML是指通过计算机（非人为地）解析PSD文件而生成HTML标记的过程。国际上关于PSD2HTML的网站很多，不过目前绝大多数的网站仍然是通过人工代码的模式来实现，也有通过服务器程序将PSD文件直接转化为HTML文件的网站。例如，俄罗斯互联网厂商的Psd2HtmlConverter网站（http://Psd2HtmlConverter.com/），从官方网站的“文档”部分了解到该网站主要采用约定名称的方式来识别特殊的页面元素要求。约定名称是指可被系统识别的PSD文件中图层属性字段。部分HTML标记的约定方式如图1所示。但是，Psd2HtmlConverter网站提供的技术存在以下问题。首先，Psd2htmlconverter的技术采用完全服务器端的语言生成，客户端需要将PSD文件提交到服务器进行转化操作，而一个普通的PSD文件的大小通常是几十M到几百M，如果在大量的转化操作并发的情况下，网络带宽和服务器的实时压力会比较大，将导致转化效率降低。其次，Psd2htmlconverter的技术不支持页面交互（即javascript交互），而在现代互联网的应用中javascript交互的应用甚至可以说是网页必备的能力。再有，Psd2htmlconverter的技术采用严格的XHTML规范来生成页面，主体采用div布局，虽然该技术应用在浏览器网页中非常合适，但是在邮件页面的开发中将完全失效。

发明内容

本申请的主要目的在于提供一种将视觉稿源文件生成HTML标记的方法及系统，以解决现有技术存在的在大量的转化操作并发的情况下转化效率降低、不支持页面交互、不适用于邮件页面的开发等问题，其中：

本申请提供的一种用于将视觉稿源文件生成HTML标记的方法，包括：使用解析器解析视觉稿源文件的图层；基于解析结果获取包含一个或多个单个图层的有效图层；选择用于生成HTML标记的规则；以及根据所述规则，将所述有效图层生成HTML标记。

根据本申请的实施例，该方法还包括：基于解析结果过滤无效图层。

根据本申请的实施例，在该方法中，所述基于解析结果过滤无效图层的步骤进一步包括：根据图层的属性去除不可见图层；以及根据图层的层级关系和透明程度去除被覆盖的图层。

根据本申请的实施例，在该方法中，所述有效图层还包括一个或多个图层组，将每一图层组作为整体进行标记，以使视觉稿中的图层组的结构与HTML标记的结构相匹配。

根据本申请的实施例，在该方法中，所述规则包括：从多种页面模板中选择一种页面模板以确定要生成的HTML标记的结构。

根据本申请的实施例，在该方法中，所述规则还包括：确定所述单个图层与所述HTML标记之间的映射关系以及所述图层组与所述HTML标记之间的映射关系。

根据本申请的实施例，在该方法中，所述确定所述单个图层与所述HTML标记之间的映射关系以及所述图层组与所述HTML标记之间的映射关系通过使用约定名称对所述有效图层进行标记以提供公用的javascript交互方案。

根据本申请的实施例，在该方法中，所述页面模板包括布局方式、图像展示方式、文本排版方式。

根据本申请的实施例，该方法还包括：将所生成的HTML标记存储为文本文件或者将所生成的HTML标记发送到客户端。

在本申请的另一方面，提供一种用于将视觉稿源文件生成HTML标记的系统，包括：解析模块，其用于使用解析器解析视觉稿源文件的图层；获取模块，其用于基于解析结果获取包含一个或多个单个图层的有效图层；选择模块，其用于选择用于生成HTML标记的规则；以及生成模块，其用于根据所述规则将所述有效图层生成HTML标记。

根据本申请的实施例，该系统还包括：过滤模块，其用于基于解析结果过滤无效图层。

根据本申请的实施例，在该系统中，所述过滤模块进一步包括：第一去除模块，其用于根据图层的属性去除不可见图层；以及第二去除模块，其用于根据图层的层级关系和透明程度去除被覆盖的图层。

根据本申请的实施例，在该系统中，所述有效图层还包括一个或多个图层组，所述系统还包括标记模块，其用于将每一图层组作为整体进行标记，以使视觉稿中的图层组的结构与HTML标记的结构相匹配。

根据本申请的实施例，在该系统中，所述规则包括从多种页面模板中选择一种页面模板以确定要生成的HTML标记的结构。

根据本申请的实施例，在该系统中，所述规则还包括：确定所述单个图层与所述HTML标记之间的映射关系以及所述图层组与所述HTML标记之间的映射关系。

根据本申请的实施例，在该系统中，所述确定所述单个图层与所述HTML标记之间的映射关系以及所述图层组与所述HTML标记之间的映射关系通过使用约定名称对所述有效图层进行标记以提供公用的javascript交互方案。

根据本申请的实施例，在该系统中，所述页面模板包括布局方式、图像展示方式、文本排版方式。

根据本申请的实施例，该系统还包括：处理模块，其用于将所生成的HTML标记存储为文本文件或者将所生成的HTML标记发送到客户端。

与现有技术相比，根据本申请的技术方案，能获得如下效果。

（1）Psd2htmlconverter采用完全服务端的语言生成，客户端需要提交PSD文件到服务器设备进行转化操作，而一个普通的PSD文件通常要几十兆到几百兆大小，如果大量并发的应用，网络带宽和服务器的实时压力会比较大。相对于此，本申请使用完全javascript语言完成，可以在客户端完成大部分转化操作，减少服务器压力并提高转化效率。

（2）目前Psd2htmlconverter不支持页面交互（javascript），而在现代互联网应用中javascript交互应用甚至可以说是网页必备的能力。相对于此，本申请将采用约定名称的方式实现常用的javascript交互，以使生成的网页具备javascript交互能力。

（3）Psd2htmlconverter采用严格的xhtml规范生成页面，主体采用div布局，虽然应用在浏览器网页中非常合适，但是在邮件页面开发中将完全失效。相对于此，本申请在生成HTML标记的过程中将采用可配置模板方案，可根据不同的HTML需求来完成生成标记的过程。

附图说明

此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：

图1是表示现有技术中涉及的基于约定名称方式的部分HTML标记的对照图；

图2是表示本申请实施例的基于将视觉稿源文件生成HTML标记的方法的流程图；

图3是表示图2中的步骤S202涉及的具体流程图；

图4A~图4C是表示本申请实施例的页面模板中包含的布局方式的示意图；

图5是表示本申请实施例的用于将视觉稿源文件生成HTML标记的系统的示意图；

图6是表示适于用来实现本申请实施方式的计算机系统的框图；

图7是表示本申请实施例的与标记图层组相关的示例。

具体实施方式

本申请的主要思想在于，通过对使用photoshop软件生成的PSD文件进行解析，并基于可配置模版方案生成需要的HTML标记后直接应用于浏览器页面、邮件页面等。换句话说，本申请是基于前端技术javascript语言实现的，需要通过解析器解析已加载的PSD文件来获取group（组）、layer（层）等的模块信息，并根据这些模块信息分析得出图层的可见性、分组、组合属性等信息，从而创建符合HTML规范的标准HTML文本，其中解析器可以是PSD.js解析器。所述的可配置模版方案是指，在将PSD文件生成HTML标记时所提供的可供选择的用于生成HTML标记的规则。该可配置模版方案中包括选择页面模板、确定PSD文件中的图层对象与HTML标记的映射关系等。换句话说，确定PSD文件中的图层对象与HTML标记的映射关系即是确定单个图层与HTML标记之间的映射关系以及图层组与HTML标记之间的映射关系。

为使本申请的目的、技术方案和优点更加清楚，以下结合附图及具体实施例，对本申请作进一步地详细说明。

根据本申请的实施例，提供了一种用于将视觉稿源文件生成HTML标记的方法。

图2是本申请实施例的用于将视觉稿源文件生成HTML标记的方法的流程图。下面，结合图2来详细说明将视觉稿源文件生成HTML标记的方法。

在步骤S201中，使用解析器解析视觉稿源文件的图层。在此，视觉稿源文件是指使用photoshop软件生成的PSD文件。也就是说，使用PSD.js解析器对PSD文件进行解析，就能解析出group、layer等模块信息，然后通过group、layer等模块信息就能得到PSD文件中的各图层的属性、层级关系、透明程度、图像大小、颜色方式等这些信息。

在步骤S202中，基于解析结果过滤无效图层。也就是说，根据解析PSD文件而得到的图层的属性等信息来过滤无效图层。无效图层主要包括属性上不可见的图层和位置上不可见的图层这两部分。因此，需要通过执行如图3所示的步骤S301和步骤S302来完成无效图层的过滤。也就是说，步骤S202可以进一步包括用于去除属性上不可见的图层的步骤S301和用于去除位置上不可见的图层的步骤S302。具体来说，在步骤S301中，根据图层的属性去除不可见图层（即属性上不可见图层）。在步骤S302中，根据图层的层级关系和透明程度去除被覆盖的图层（即位置上不可见的图层，亦是层级较低的图层）。另一方面，在PSD文件不存在无效图层的情况下，也可以省略过滤无效图层（步骤S202）这一步骤。

在步骤S203中，基于解析结果获取包含一个或多个单个图层的有效图层。也就是说，在过滤掉无效图层以后，根据图层的属性等信息可以获得包含一个或多个单个图层的有效图层。另外，该有效图层还可能包含一个或多个图层组。该图层组是指将若干单个图层合并而成的上一级图层组。如果单个图层适合直接生成简单的HTML标记，则在解析PSD文件完成以后，已经可以直接获取图层的信息，这相当于已经完成了标记，不需要进行额外的逻辑处理。即，除图层组之外的单个图层通常可以直接生成HTML标记，不需要进行额外的处理。相对于此，由于PSD源文件中出现的大多数单个图层（即构成图层组的单个图层）不适合直接对应地生成HTML标记，例如如图7所示，在PSD文件中的“hao123.com”从颜色（虽然在图7中未示出，但该文字具有颜色）和字体可以判断出其至少包含“hao123”、“.com”以及颜色这三个图层，而且“hao123.com”还具有树叶等背景图片元素。在使用这种图片生成HTML标记时，只需要通过它们的上一级图层组生成完整的背景图片即可，所以在生成页面可用元素之前需要以组为单位进行标记。另外，对于非图片类型的图层组，也存在类似的问题，当处于同一图层组的多个文案的图层具有相似属性的时候，也可以作为一个整体来处理。因此，在有效图层既包含单个图层又包含图层组的情况下需要执行步骤S204。即，在步骤S204中，可以将每一图层组作为一个整体进行标记，以使PSD文件中的图层组的结构与要生成的HTML标记的结构尽量匹配。在此，使PSD文件中的图层组的结构与要生成的HTML标记的结构相匹配的原因在于，PSD文件作为传达视觉设计者设计思想的直接表现，不仅在视觉上，在结构上也有明确的体现，而HTML标记本质上是文本，因而在结构上使PSD文件中的图层组匹配合适的HTML结构，便于保留视觉设计初衷。另外，这里的“匹配”只能是尽量匹配，而不可能做到完全匹配。其原因是，PSD文件是设计用于网页/印刷/多媒体等多领域的图像应用，在设计用于生成网页的PSD文件时，除了支持简单的文档类型，还可以对图像进行如放大、缩小、旋转、倾斜、镜像、透视等这样的各种变换。此外，也可以进行去除斑点、修补、修饰图像的残损等。而HTML被称作是超文本标记语言，本质上还是文本，不能够体现全部图像效果。因此，只能使PSD文件中的图层组的结构与要生成的HTML标记的结构尽量匹配。当然，在有效图层不包含图层组的情况下，可以省略上述的标记图层组（步骤S204）的步骤。

在步骤S205中，选择用于生成HTML标记的规则。具体来说，所述用于生成HTML标记的规则包括从多种页面模板中选择一种页面模板以确定要生成的HTML标记的结构；以及确定单个图层与HTML标记之间的映射关系以及图层组与HTML标记之间的映射关系等。

首先，需要选择页面模板，而针对不同的页面模板可以配置不同的参数。例如，页面模板可以包括布局方式、图像展示方式、文本排版方式等。其中，布局方式如图4A~图4C所示那样，可以包括左中右布局、上左右布局、瀑布流布局等。图像展示方式可以包括仅展示图片、将图片作为背景来展示、以及将图片和背景混合展示这三种情况，但在邮件中通常不能使用背景而需要直接使用图片。文本排版方式可以包括文本对齐、段落设置等。由于布局、图像展示、文本排版等方式均包含不同的参数，所以可以通过在模板中配置这些参数来确定页面的整体风格。

其次，确定单个图层与HTML标记之间的映射关系以及图层组与HTML标记之间的映射关系即是确定PSD文件中的图层对象与HTML标记的映射关系。具体来说，单个图层与HTML标记之间的映射关系是指单个图层适合直接生成简单的HTML标记的关系。例如，在PSD文件的图层中带下划线的文字图层对应于HTML标记中的链接A标签；PSD文件中的确定大小的矩形框对应于HTML标记中的输入框INPUT标签。而图层组与HTML标记之间的映射关系是指图层之间的关系反映到HTML标记的关系。例如，图层组A中包含具有相似属性的A1、A2、A3、A4这四个单个图层（或图层组），在生成HTML标记时，将生成图层组A所对应的A标记的ol标签中的四个li标签，即这四个li标签分别对应于图层A1、A2、A3、A4。另外，对于如何确定单个图层（或图层组）与HTML标记之间的映射关系，例如图层组与HTML标记之间的映射关系可以规定为已合并的图层组是否生成为单个的HTML标记；或者，也可以规定为已合并的图层组是否生成为分解而成的多个HTML标记。优选的是，确定PSD文件中的图层对象与HTML标记的映射关系可以通过使用约定名称对有效图层进行标记以提供公用的javascript交互方案。具体来说，PSD文件中的图层或图层组是可以命名的，约定名称就是指获取并判断在图层（或图层组）的名称中的出现的特殊字符串。例如，在某个图层的名称上加入#img#，表示通过标记当前图层来生成img标签，#input[id=mible,class=mible]#表示在生成的input标签中添加属性id=mible,class=mible。如果事先在模板方案中已经针对该id元素提供javascript交互动作，例如：

那么，在图层的名称上加入#input[id=mible,class=mible]#，这样生成的input标签就具有一个简单的交互行为，当失去焦点的时候，如果输入值不是11位的数字将出现错误提示。在这种情况下，若将使用本方法所生成的HTML标记应用于网页时就使得网页具备javascript交互能力。

在步骤S206中，根据所述规则将有效图层生成HTML标记。由此，完成用于将视觉稿源文件生成HTML标记的流程。

但是，有时需要根据客户端的需求对所生成的HTML标记进行步骤S207的处理。即，在步骤S207中，将所生成的HTML标记存储为文本文件或者将所生成的HTML标记发送到客户端。当然，此步骤S207也可以省略。

根据本申请的实施例，还提供一种用于将视觉稿源文件生成HTML标记的系统。

图5是表示本申请实施例的用于将视觉稿源文件生成HTML标记的系统500的示意图。

如图5所示，用于将视觉稿源文件生成HTML标记的系统500可以包括解析模块501、过滤模块502、获取模块503、标记模块504、选择模块505、生成模块506以及处理模块507。

解析模块501可以被配置成使用解析器解析视觉稿源文件的图层。

过滤模块502可以被配置成基于解析结果过滤无效图层。另外，在PSD文件不存在无效图层的情况下，该系统500也可以省略过滤模块502。

另外，过滤模块502可以进一步包括第一去除模块511和第二去除模块512。第一去除模块511可以被配置成根据图层的属性去除不可见图层。第二去除模块512可以被配置成根据图层的层级关系和透明程度去除被覆盖的图层。

获取模块503可以被配置成基于解析结果获取包含一个或多个单个图层的有效图层。

另外，该有效图层可以还包括一个或多个图层组，在这种情况下，所述系统可以还包括标记模块504，该标记模块504可以被配置成将每一图层组作为整体进行标记，以使视觉稿中的图层组的结构与HTML标记的结构相匹配。当然，在有效图层仅包含单个图层的情况下，该系统500可以省略标记模块504。

选择模块505可以被配置成选择用于生成HTML标记的规则。所述规则包括从多种页面模板中选择一种页面模板以确定要生成的HTML标记的结构；以及确定单个图层与HTML标记之间的映射关系以及图层组与HTML标记之间的映射关系。对于确定单个图层与HTML标记之间的映射关系以及图层组与HTML标记之间的映射关系，优选通过使用约定名称对有效图层进行标记以提供公用的javascript交互方案。上述的页面模板可以包括布局方式、图像展示方式、文本排版方式等。

生成模块506可以被配置成根据所述规则将所述有效图层生成HTML标记。

处理模块507可以被配置成将所生成的HTML标记存储为文本文件或者将所生成的HTML标记发送到客户端。该处理模块507可以根据客户端的需要而设置。

本申请的系统500所包括的各个模块的具体实施与本申请的方法中的步骤的具体实施是相对应的，为了不模糊本申请，在此省略对各个模块的具体细节进行描述。

本申请的方法和系统使用灵活的javascript代码来实现，因此只要能够运行javascript语言的平台都能够进行应用。由于Node.js是基于Google-V8引擎高效执行javascript代码的服务端语言平台，PSD.js在Google-V8引擎下的执行效果最佳，因此本申请在node.js平台下运行效果最佳，客户端的实现可以在最新版的Chrome浏览器中得到最好的体验。当然，本申请的方法和系统也可以在其他浏览器中得到良好的体验。另外，本申请使用完全javascript语言完成，可以在客户端完成大部分转化操作，从而减少服务器压力并提高转化效率。另外，本申请在生成HTML标记的过程中采用可配置模板方案，就可以根据不同的HTML需求来完成生成标记的过程。

本申请还可以通过软件来实现，所述软件能够在其中执行的计算机系统如图6所示。

图6示出了适于用来实现本申请实施方式的计算机系统的框图。如图7所示，计算机系统可以包括：CPU（中央处理单元）601、RAM（随机存取存储器）602、ROM（只读存储器）603、系统总线604、硬盘控制器605、键盘控制器606、串行接口控制器607、并行接口控制器608、显示控制器609、硬盘610、键盘611、串行外部设备612、并行外部设备613和显示器614。在这些部件中，与系统总线604相连的有CPU 601、RAM 602、ROM 603、硬盘控制器605、键盘控制器606、串行控制器607、并行控制器608和显示控制器609。硬盘610与硬盘控制器605相连，键盘611与键盘控制器606相连，串行外部设备612与串行接口控制器607相连，并行外部设备613与并行接口控制器608相连，以及显示器613与显示控制器609相连。

应当理解，图6所述的结构框图仅仅为了示例的目的而示出的，而不是对本申请范围的限制。在某些情况下，可以根据具体情况而增加或者减少某些设备。

特别地，除硬件实施方式之外，本申请的实施方式可以通过计算机程序产品的形式实现。例如，参考图2~图5描述的方法可以通过计算机程序产品来实现。该计算机程序产品可以存储在例如图6所示的RAM 604、ROM 604、硬盘610和/或任何适当的存储介质中，或者通过网络从适当的位置下载到计算机系统上。计算机程序产品可以包括计算机代码部分，其包括可由适当的处理设备（例如，图6中示出的CPU 601）执行的程序指令。所述程序指令至少可以包括用于实现上文描述的方法的指令。

应当注意，本申请的实施方式可以通过硬件、软件或者软件和硬件的结合来实现。硬件部分可以利用专用逻辑来实现；软件部分可以存储在存储器中，由适当的指令执行系统，例如微处理器或者专用设计硬件来执行。本领域的普通技术人员可以理解上述的设备和方法可以使用计算机可执行指令和/或包含在处理器控制代码中来实现，例如在诸如磁盘、CD或DVD-ROM的载体介质、诸如只读存储器（固件）的可编程的存储器或者诸如光学或电子信号载体的数据载体上提供了这样的代码。本申请的设备及其模块可以由诸如超大规模集成电路或门阵列、诸如逻辑芯片、晶体管等的半导体、或者诸如现场可编程门阵列、可编程逻辑设备等的可编程硬件设备的硬件电路实现，也可以用由各种类型的处理器执行的软件实现，也可以由上述硬件电路和软件的结合例如固件来实现。

应当注意，尽管在上文详细描述中提及了设备的若干模块或子模块，但是这种划分仅仅并非强制性的。实际上，根据本申请的实施方式，上文描述的两个或更多模块的特征和功能可以在一个模块中具体化。反之，上文描述的一个模块的特征和功能可以进一步划分为由多个模块来具体化。

此外，尽管在附图中以特定顺序描述了本申请方法的操作，但是，这并非要求或者暗示必须按照该特定顺序来执行这些操作，或是必须执行全部所示的操作才能实现期望的结果。相反，流程图中描绘的步骤可以改变执行顺序。附加地或备选地，可以省略某些步骤，将多个步骤合并为一个步骤执行，和/或将一个步骤分解为多个步骤执行。

本领域内的技术人员应明白，本申请的实施例可提供为方法、系统、或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质（包括但不限于磁盘存储器、CD-ROM、光学存储器等）上实施的计算机程序产品的形式。

以上所述仅为本申请的实施例而已，并不用于限制本申请，对于本领域的技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本申请的权利要求范围之内。

Claims (16)

1.一种用于将视觉稿源文件生成HTML标记的方法，包括：

使用解析器解析视觉稿源文件的图层；

基于解析结果获取包含一个或多个单个图层的有效图层；

选择用于生成HTML标记的规则；以及

根据所述规则，将所述有效图层生成HTML标记。

2.根据权利要求1所述的方法，还包括：

基于解析结果过滤无效图层。

3.根据权利要求2所述的方法，其中，所述基于解析结果过滤无效图层的步骤进一步包括：

根据图层的属性去除不可见图层；以及

根据图层的层级关系和透明程度去除被覆盖的图层。

4.根据权利要求1所述的方法，其中，所述有效图层还包括一个或多个图层组，将每一图层组作为整体进行标记，以使视觉稿中的图层组的结构与HTML标记的结构至少部分相匹配。

5.根据权利要求4所述的方法，其中，所述规则还包括：确定所述单个图层与所述HTML标记之间的映射关系以及所述图层组与所述HTML标记之间的映射关系。

6.根据权利要求5所述的方法，其中，所述确定所述单个图层与所述HTML标记之间的映射关系以及所述图层组与所述HTML标记之间的映射关系通过使用约定名称对所述有效图层进行标记以提供公用的javascript交互方案。

7.根据权利要求1所述的方法，其中，所述规则包括：从多种页面模板中选择一种页面模板以确定要生成的HTML标记的结构。

8.根据权利要求7所述的方法，其中，所述页面模板包括布局方式、图像展示方式、文本排版方式。

9.根据权利要求1~7中任意一项所述的方法，还包括：

将所生成的HTML标记存储为文本文件或者将所生成的HTML标记发送到客户端。

10.一种用于将视觉稿源文件生成HTML标记的系统，包括：

解析模块，其用于使用解析器解析视觉稿源文件的图层；

获取模块，其用于基于解析结果获取包含一个或多个单个图层的有效图层；

选择模块，其用于选择用于生成HTML标记的规则；以及

生成模块，其用于根据所述规则将所述有效图层生成HTML标记。

11.根据权利要求10所述的系统，还包括：

过滤模块，其用于基于解析结果过滤无效图层。

12.根据权利要求11所述的系统，其中，所述过滤模块进一步包括：

第一去除模块，其用于根据图层的属性去除不可见图层；以及

第二去除模块，其用于根据图层的层级关系和透明程度去除被覆盖的图层。

13.根据权利要求10所述的系统，其中，所述有效图层还包括一个或多个图层组，

所述系统还包括标记模块，其用于将每一图层组作为整体进行标记，以使视觉稿中的图层组的结构与HTML标记的结构至少部分相匹配。

14.根据权利要求13所述的系统，其中，所述规则还包括：确定所述单个图层与所述HTML标记之间的映射关系以及所述图层组与所述HTML标记之间的映射关系。

15.根据权利要求14所述的系统，其中，所述确定所述单个图层与所述HTML标记之间的映射关系以及所述图层组与所述HTML标记之间的映射关系通过使用约定名称对所述有效图层进行标记以提供公用的javascript交互方案。

16.根据权利要求10所述的系统，其中，所述规则包括从多种页面模板中选择一种页面模板以确定要生成的HTML标记的结构，所述页面模板包括布局方式、图像展示方式、文本排版方式。

Images