CN105022616B - 一种生成网页页面的方法及装置 - Google Patents

Abstract

本发明公开了一种生成网页页面的方法及装置，属于计算机技术领域。所述方法包括：获取设计原文件的尺寸以及设计原文件包括的图层的图层信息；获取图层包括的素材；根据设计原文件的尺寸、图层的图层信息和图层包括的素材，生成网页页面。所述装置包括：第一获取模块、第二获取模块和生成模块。本发明能够自动生成网页页面，提高了生成网页页面的效率，降低了生成网页页面的成本，同时保证了生成网页页面的质量。

Description

一种生成网页页面的方法及装置

技术领域

本发明涉及计算机技术领域，特别涉及一种生成网页页面的方法及装置。

背景技术

网页页面是由文字、图片或表格等素材组成的页面。布局合理且美观的网页页面更能够吸引用户。为了使网页页面的布局合理且美观，在制作网页页面之前首先通过图像处理工具对网页页面包括的所有素材进行排版布局并对每个素材进行美化，得到设计原文件。例如，对于一个素材，假设该素材为一个平面结构的按钮，可以对该按钮进行美化使该按钮立体化。然后根据得到的设计原文件生成网页页面，如此生成的网页页面布局合理且美观。

其中，设计师将网页页面包括的每个素材拖动到图像处理工具的处理面板中，并进行排版布局，然后利用图像处理工具中包括的美化工具对每个素材进行美化，得到网页页面的设计原文件。设计师将该设计原文件交付给网页开发人员，网页开发人员凭经验编写网页代码，将该设计原文件中包括的每个素材都编写到网页代码中，然后根据网页代码渲染网页页面，以将该设计原文件转换为一个网页页面。

在实现本发明的过程中，发明人发现现有技术至少存在以下问题：

由网页开发人员凭经验编写网页代码来生成网页页面，如此受网页开发人员的经验限制，生成网页页面的效率较低且生成的网页页面的质量较差，而且增加了生成网页页面的成本。

发明内容

为了提高生成网页页面的效率，降低生成网页页面的成本，同时保证生成网页页面的质量，本发明提供了一种生成网页页面的方法及装置。所述技术方案如下：

一种生成网页页面的方法，所述方法包括：

获取设计原文件的尺寸以及所述设计原文件包括的图层的图层信息；

获取所述图层包括的素材；

根据所述设计原文件的尺寸、所述图层的图层信息和所述图层包括的素材，生成网页页面。

一种生成网页页面的装置，所述装置包括：

第一获取模块，用于获取设计原文件的尺寸以及所述设计原文件包括的图层的图层信息；

第二获取模块，用于获取所述图层包括的素材；

生成模块，用于根据所述设计原文件的尺寸、所述图层的图层信息和所述图层包括的素材，生成网页页面。

在本发明实施例中，获取设计原文件的尺寸以及设计原文件包括的图层的图层信息；获取图层包括的素材；根据设计原文件的尺寸、图层的图层信息和图层包括的素材，生成网页页面。由于根据设计原文件的尺寸、设计原文件包括的图层的图层信息以及图层包括的素材，将设计原文件转换为网页页面，来自动生成网页页面，如此提高了生成网页页面的效率，降低了生成网页页面的成本，同时保证了生成网页页面的质量。

附图说明

图1是现有技术提供的一种图层面板的第一示意图；

图2是本发明实施例1提供的一种生成网页页面的方法流程图；

图3-1是本发明实施例2提供的一种生成网页页面的方法流程图；

图3-2是本发明实施例2提供的一种图层面板的第二示意图；

图3-3是本发明实施例2提供的一种最小区域的第一示意图；

图3-4是本发明实施例2提供的一种最小区域的第二示意图；

图3-5是本发明实施例2提供的一种网页页面的第一示意图；

图3-6是本发明实施例2提供的一种网页页面的第二示意图；

图3-7是本发明实施例2提供的一种网页页面的第三示意图；

图4是本发明实施例3提供的一种生成网页页面的装置结构示意图；

图5是本发明实施例4提供的一种终端的结构示意图。

具体实施方式

为使本发明的目的、技术方案和优点更加清楚，下面将结合附图对本发明实施方式作进一步地详细描述。

为了使生成的网页页面布局合理且美观，设计师首先通过图像处理工具对网页页面包括的所有素材进行排版布局并对每个素材进行美化，得到设计初稿，设计初稿由多个图层组成，每个图层包括至少一个素材。然后设计师通过图像处理工具的图层面板对设计初稿包括的图层进行整理，将整理后的设计初稿保存为设计原文件。

其中，对设计初稿包括的图层进行整理时，利用图像处理工具中包括的图层面板对设计初稿包括的图层划分层级，将位于同一层级的图层存放在该层级对应的图层文件夹中。其中，层级越大的图层文件夹包括的图层在设计初稿中排在越底层，且图层文件夹相互嵌套，层级大的图层文件夹嵌套在层级小的图层文件夹中。如图1所示，层级4对应的图层文件夹嵌套在层级3对应的图层文件夹中，层级3对应的图层文件夹嵌套在层级2对应的图层文件夹中，层级2对应的图层文件夹嵌套在层级1对应的图层文件夹中，且层级4对应的图层文件夹包括的图层1、2和3排在设计初稿的最底层。

图像处理工具可以为PhotoShop、Dreamweaver或Flash等，利用PhotoShop对网页页面包括的每个素材进行处理得到的设计原文件为PSD文件，利用Dreamweaver对网页页面包括的每个素材进行处理得到的设计原文件可以为PHP文件或ASP文件等，以及利用Flash对网页页面包括的每个素材进行处理得到的设计原文件为FLA文件。

在得到设计原文件之后，可以通过如下本发明实施例提供的方法来自动地根据该设计原文件生成网页页面。

实施例1

参见图2，本发明实施例提供了一种生成网页页面的方法，包括：

步骤101：获取设计原文件的尺寸以及设计原文件包括的图层的图层信息；

步骤102：获取图层包括的素材；

步骤103：根据设计原文件的尺寸、图层的图层信息和图层包括的素材，生成网页页面。

优选地，图层信息至少包括图层的序号、类型、图层包括的素材的位置和尺寸；

获取设计原文件包括的图层的图层信息，包括：

获取图层中的包括所有素材的最小区域的位置和尺寸；

将最小区域的位置和尺寸确定为图层包括的素材的位置和尺寸；

为图层分配序号；

获取图层的类型属性，根据类型属性获取图层的类型。

进一步地，如果图层的类型为文字图层，则图层的图层信息还包括图层的样式信息；

获取设计原文件包括的图层的图层信息，还包括：

获取图层的样式属性，根据样式属性获取图层的样式信息。

优选地，获取图层包括的素材，包括：

如果图层的类型为文字图层，则获取图层中包括的文字内容，将获取的文字内容确定为图层包括的素材；

如果图层的类型为图像图层，则对图层中的包括所有素材的最小区域进行截图，得到图层对应的截图，将截图确定为图层包括的素材。

进一步地，获取设计原文件包括的图层的图层信息之前，还包括：

获取设计原文件包括的每个图层文件夹的层级，将层级大于预设数值的图层文件夹包括的所有图层合并为一个图层。

优选地，根据设计原文件的尺寸、图层的图层信息和图层包括的素材，生成网页页面，包括：

根据设计原文件的尺寸创建一个空白的网页页面，空白的网页页面包括一个内容区域，内容区域的尺寸与设计原文件的尺寸相等；

根据图层的图层信息包括的素材的位置和尺寸，在内容区域中创建图层对应的一个显示区域；

将图层包括的素材加载到图层对应的显示区域中，以生成网页页面。

优选地，将图层包括的素材加载到图层对应的显示区域中，包括：

如果图层的类型为文字图层，则将图层包括的文字内容加载到图层对应的显示区域中，并根据图层的图层信息包括的样式信息设置文字内容的样式；

如果图层的类型为图像图层，则将图层对应的截图加载到图层对应的显示区域中。

在本发明实施例中，获取设计原文件的尺寸以及设计原文件包括的图层的图层信息；获取图层包括的素材；根据设计原文件的尺寸、图层的图层信息和图层包括的素材，生成网页页面。由于根据设计原文件的尺寸、设计原文件包括的图层的图层信息以及图层包括的素材，将设计原文件转换为网页页面，来自动生成网页页面，如此提高了生成网页页面的效率，降低了生成网页页面的成本，同时保证了生成网页页面的质量。

实施例2

参见图3-1，本发明实施例提供了一种生成网页页面的方法，该方法包括：

步骤201：获取设计原文件，并进一步获取该设计原文件的尺寸；

本发明实施例的执行主体可以为生成网页页面的终端或是集成在图像处理工具中的功能模块。当该执行主体为终端时，用户可以将需要转换成网页页面的设计原文件输入给终端，终端接收设计原文件，以获取到设计原文件。当该执行主体为图像处理工具中的功能模块时，由于图像处理工具中包括设计原文件，所以该功能模块可以直接从图像处理工具中获取设计原文件。

获取设计原文件，可以为接收用户输入的设计原文件，或者在图像处理工具得到设计原文件之后，直接从图像处理工具中获取设计原文件。

其中，设计原文件的尺寸包括设计原文件的宽度和高度。设计原文件的属性信息至少包括宽度属性信息和高度属性信息，宽度属性信息至少包括设计原文件的宽度，高度属性信息至少包括设计原文件的高度。

对于设计原文件的尺寸，可以从设计原文件的属性信息中获取设计原文件的宽度属性信息和高度属性信息，从获取的宽度属性信息中获取设计原文件的宽度，从获取的高度属性信息中获取设计原文件的高度，从而得到设计原文件的尺寸。

例如，接收用户输入的设计原文件F1，或者在图像处理工具得到设计原文件之后，直接从图像处理工具中获取设计原文件F1。从设计原文件F1的属性信息中获取设计原文件F1的宽度属性信息和高度属性信息，从获取的宽度属性信息中获取设计原文件F1的宽度为50，从获取的高度属性信息中获取设计原文件F1的高度为100，从而得到设计原文件F1的尺寸。

步骤202：获取设计原文件包括的每个图层文件夹的层级，将层级大于预设数值的图层文件夹包括的所有图层合并为一个图层；

其中，由于当设计原文件包括的图层数量较多时，直接根据设计原文件生成网页页面效率较低。所以需要对设计原文件中位于较底层的图层进行合并，以减少设计原文件包括的图层的数量，进而提高生成网页页面的效率。

本步骤具体为，获取设计原文件包括的每个图层文件夹的层级，将每个图层文件夹的层级与预设数值进行比较，获取层级大于预设数值的图层文件夹包括的所有图层，将获取的所有图层合并为一个图层。

例如，假设预设数值为2。获取设计原文件F1包括的图层文件夹1、2、3和4的层级分别为层级1、2、3和4，分别将图层文件夹1、2、3和4的层级与预设数值2进行比较，且比较出图层文件夹3和4的层级3和层级4大于预设数值2，获取图层文件夹3包括的图层，以及获取图层文件夹4包括的图层。假设获取的图层文件夹3包括的图层为图层1和2，获取的图层文件夹4包括的图层为图层3和4。如图3-2所示，将获取的图层1、2、3和4合并为一个图层0，且合并得到的图层0存放在图层文件夹2中。

其中，通过上述步骤202的操作对层级大于预设数值的图层文件夹包括的所有图层进行合并之后，通过如下步骤203和204的操作来获取图层的图层信息以及图层包括的素材。

步骤203：获取设计原文件包括的图层的图层信息，图层的图层信息至少包括图层的序号、类型、图层包括的素材的位置和尺寸；

其中，图层的类型包括文字图层和图像图层。当图层中包括的素材都是文字内容时，该图层的类型为文字图层。当图层中包括的素材都为图像或者既有图像素材又有文字内容时，该图层为图像图层。

本步骤具体为，从层级最大的图层文件夹包括的图层开始遍历，按照从最底层的图层到最顶层的图层的顺序对设计原文件包括的所有图层进行遍历，每遍历到一个图层，获取该图层对应的遍历顺序，将该图层对应的遍历顺序确定为该图层的序号。确定该图层中包括所有素材的最小区域，获取该最小区域的位置和尺寸，将该最小区域的位置和尺寸确定为该图层包括的素材的位置和尺寸。从该图层的属性信息中获取类型属性信息，从获取的类型属性信息中获取该图层的类型。对该图层的类型进行判断，如果该图层的类型为文字图层，则从该图层的属性信息中获取该图层的样式属性信息，从获取的样式属性信息中获取该图层的样式信息，将图层的序号、类型、图层包括的素材的位置和尺寸以及该图层的样式信息组成该图层的图层信息。如果该图层的类型为图像图层，则将该图层的序号、类型、图层包括的素材的位置和尺寸组成该图层的图层信息。判断当前遍历的图层是否为最顶层的图层，如果不是，继续遍历下一个图层，直到获取到最顶层的图层的图层信息为止。

其中，最小区域为一个矩形区域。最小区域的位置可以为最小区域的左上角顶点坐标、右上角顶点坐标或中心点坐标等。最小区域的尺寸为最小区域的宽度和高度。

例如，从层级2对应的图层文件夹包括的图层开始，按照从下到上的顺序对设计原文件F1包括的所有图层进行遍历，每遍历到一个图层，获取该图层对应的遍历顺序，假设图层1的遍历顺序为01，则将图层1对应的遍历顺序01确定为图层1的序号。确定图层1的最小区域A1，如图3-3所示，最小区域A1恰好包含图层1包括的素材“今日晴转多云，微风2-3级”。假设最小区域A1的位置为最小区域A1的左上角顶点坐标为(10,10)，最小区域A1的尺寸为宽度20和高度40。获取最小区域A1的左上角顶点坐标(10,10)，以及获取最小区域A1的宽度20和高度40，将最小区域A1的左上角顶点坐标(10,10)以及宽度20和高度40确定为图层1包括的素材的位置和尺寸。从图层1的属性信息中获取类型属性信息，从获取的类型属性信息中获取图层1的类型文字图层。对图层1的类型进行判断，且判断出图层1的类型为文字图层，则从图层1的属性信息中获取图层1的样式属性信息，从获取的样式属性信息中获取图层1的样式信息S1。将图层1的序号01、类型为文字图层，图层1的位置(10,10)和尺寸为宽度20和高度40，以及图层1的样式信息S1组成图层1的图层信息。判断当前遍历的图层1是否为最顶层的图层，且判断出不是，则继续遍历下一个图层，直到获取到最顶层的图层的图层信息为止。

再如，继续遍历图层2，图层2的遍历顺序为02，将图层2的遍历顺序02确定为图层2的序号。确定图层2的最小区域A2，如图3-4所示，最小区域A2恰好包含图层2包括的两幅图像。假设最小区域A2的位置为最小区域的左上角顶点坐标为(10,60)，最小区域A2的尺寸为宽度30和高度20。获取最小区域A2的左上角顶点坐标(10,60)，以及获取最小区域A2的宽度30和高度20，将最小区域A2的左上角顶点坐标(10,60)以及宽度30和高度20确定为图层2包括的素材的位置和尺寸。从图层2的属性信息中获取类型属性信息，从获取的类型属性信息中获取图层2的类型图像图层。对图层2的类型进行判断，且判断出图层2的类型为图像图层，则将图层2的序号02、类型图像图层、图层2包括的素材的位置(10,60)以及宽度30和高度20组成图层2的图层信息。

其中，图层的序号可以表示图层在设计原文件包括的所有图层中的排列位置。

其中，图层具有属性信息，图层的属性信息至少包括类型属性信息，图层的类型属性信息至少包括图层的类型。对于类型为文字图层的图层的属性信息还包括样式属性信息，样式属性信息中至少包括该图层的样式信息。

其中，按照上述步骤201-203的操作获取设计原文件的尺寸和设计原文件中的图层的图层信息之后，将设计原文件的尺寸和设计原文件中的图层的图层信息保存为数据文件。可以以json(Javascript Object Notation，轻量级数据交换语言)或xml(eXtensibleMarkup Language，可扩展标记语言)方式将设计原文件的尺寸和设计原文件中的图层的图层信息保存为数据文件。

其中，按照上述步骤203的操作获取设计原文件包括的图层的图层信息后，按照如下步骤204的操作获取图层包括的素材。

步骤204：获取设计原文件中的图层包括的素材；

其中，对于设计原文件包括的每个图层，根据该图层的类型的不同，本步骤可以通过如下第一和第二两者方式来实现，具体为：

第一，如果该图层的类型为文字图层，则获取该图层中包括的文字内容，将获取的文字内容确定为该图层包括的素材。

例如，图层1的类型为文字图层，获取图层1中包括的文字内容“今日晴转多云，微风2-3级”，将获取的文字内容“今日晴转多云，微风2-3级”确定为图层1包括的素材。

第二，如果该图层的类型为图像图层，则对该图层中的包括所有素材的最小区域进行截图，得到该图层对应的截图，将该截图确定为该图层包括的素材；

例如，图层2的类型为图像图层。对图层2中的包括所有素材的最小区域A2进行截图，得到图层2对应的截图P1，将该截图P1确定为图层2包括的素材。

其中，得到该图层对应的截图后，还保存该图层对应的截图。

其中，对于设计原文件包括的其他每个图层，同该图层按照上述操作获取其他每个图层包括的素材。

其中，通过上述步骤203和204的操作分别获取设计原文件包括的图层的图层信息和图层包括的素材之后，通过如下步骤205-207的操作来生成网页页面。

步骤205：根据设计原文件的尺寸创建一个空白的网页页面，该空白的网页页面包括一个内容区域，该内容区域的尺寸与设计原文件的尺寸相等；

其中，内容区域用于显示网页页面包括的所有素材。

本步骤具体为，创建一个空白的网页页面，根据设计原文件的尺寸在该空白的网页页面中创建一个内容区域，该内容区域的宽度和高度分别与设计原文件的宽度和高度相等。

例如，如图3-5所示，创建一个空白的网页页面，根据设计原文件的尺寸，即设计原文件的宽度50和高度100在该空白的网页页面中创建一个内容区域，该内容区域的宽度为50和高度为100。

进一步地，在空白的网页页面中创建一个内容区域之后，还将该内容区域在空白的网页页面中的位置设置为居中。

其中，在空白的网页页面中创建一个内容区域之前，首先建立一个HTML(HyperText Markup Language，超文本标记语言)文档，将对设计原文件的尺寸和设计原文件中的图层的图层信息进行保存得到的数据文件输入给该HTML文档，该HTML文档对数据文件进行解析，以获得设计原文件的尺寸和设计原文件中的图层的图层信息。

步骤206：根据设计原文件中的图层的图层信息包括的素材的位置和尺寸，在内容区域中创建该图层对应的一个显示区域；

其中，每个图层对应的一个显示区域用于显示每个图层包括的素材。

本步骤具体为，对于设计原文件包括的每个图层，根据该图层包括的素材的位置和尺寸，在内容区域中创建该图层对应的一个显示区域。对于设计原文件包括的其他每个图层，同该图层按照上述操作在内容区域分别创建其他每个图层对应的显示区域。

例如，根据图层1的图层信息包括的素材的位置(10,10)，以及宽度为20和高度为40，在如图3-5所示的内容区域中创建图层1对应的显示区域1。根据图层2的图层信息包括的素材的位置为(10,60)，以及宽度为30和高度为20，在如图3-5所示的内容区域中创建图层2对应的显示区域2，如图3-6所示。

其中，在内容区域中创建该图层对应的一个显示区域时，将该显示区域的位置属性设置为绝对定位，然后将图层包括的素材的位置设置为该显示区域的位置。该显示区域可以为网页页面中的一个DOM(Document Object Model，节点)。

步骤207：将该图层包括的素材加载到该图层对应的显示区域中，以生成网页页面。

具体地，对于设计原文件包括的每个图层，根据该图层的图层信息中包括的类型，对该图层进行判断；如果该图层的类型为文字图层，则将该图层包括的文字内容加载到该图层对应的显示区域中，并根据该图层的图层信息包括的样式信息设置文字内容的样式；如果该图层的类型为图像图层，则将该图层对应的截图加载到该图层对应的显示区域中。

其中，对于设计原文件包括的其他每个图层，同该图层按照上述操作将其他每个图层包括的素材分别加载到其他每个图层对应的显示区域中。

例如，根据图层1的图层信息中包括的类型文字图层，对图层1进行判断，且判断出图层1的类型为文字图层，则将图层1包括的文字内容“今日晴转多云，微风2-3级”加载到图层1对应的显示区域1中。根据图层2的图层信息中包括的类型图像图层，对图层2进行判断，且判断出图层2的类型为图像图层，则将图层2对应的截图P1加载到图层2对应的显示区域2中，如图3-7所示。

在本发明实施例中，获取设计原文件的尺寸以及设计原文件包括的图层的图层信息；获取图层包括的素材；根据设计原文件的尺寸、图层的图层信息和图层包括的素材，生成网页页面。由于根据设计原文件的尺寸、设计原文件包括的图层的图层信息以及图层包括的素材，将设计原文件转换为网页页面，来自动生成网页页面，如此提高了生成网页页面的效率，降低了生成网页页面的成本，同时保证了生成网页页面的质量。

实施例3

参见图4，本发明实施例提供了一种生成网页页面的装置，包括：

第一获取模块301，用于获取设计原文件的尺寸以及设计原文件包括的图层的图层信息；

第二获取模块302，用于获取图层包括的素材；

生成模块303，用于根据设计原文件的尺寸、图层的图层信息和图层包括的素材，生成网页页面。

其中，图层信息至少包括图层的序号、类型、图层包括的素材的位置和尺寸；

第一获取模块301包括：

第一获取单元，用于获取图层中的包括所有素材的最小区域的位置和尺寸；

确定单元，用于将最小区域的位置和尺寸确定为图层包括的素材的位置和尺寸；

分配单元，用于为图层分配序号；

第二获取单元，用于获取图层的类型属性，根据类型属性获取图层的类型。

进一步地，如果图层的类型为文字图层，则图层的图层信息还包括图层的样式信息；

第一获取模块301，还用于获取图层的样式属性，根据样式属性获取图层的样式信息。

其中，第二获取模块302包括：

第三获取单元，用于如果图层的类型为文字图层，则获取图层中包括的文字内容，将获取的文字内容确定为图层包括的素材；

第四获取单元，用于如果图层的类型为图像图层，则对图层中的包括所有素材的最小区域进行截图，得到图层对应的截图，将截图确定为图层包括的素材。

进一步地，该装置还包括：

合并模块，用于获取设计原文件包括的每个图层文件夹的层级，将层级大于预设数值的图层文件夹包括的所有图层合并为一个图层。

其中，生成模块303包括：

第一创建单元，用于根据设计原文件的尺寸创建一个空白的网页页面，空白的网页页面包括一个内容区域，内容区域的尺寸与设计原文件的尺寸相等；

第二创建单元，用于根据图层的图层信息包括的素材的位置和尺寸，在内容区域中创建图层对应的一个显示区域；

加载单元，用于将图层包括的素材加载到图层对应的显示区域中，以生成网页页面。

其中，加载单元包括：

第一加载子单元，用于如果图层的类型为文字图层，则将图层包括的文字内容加载到图层对应的显示区域中，并根据图层的图层信息包括的样式信息设置文字内容的样式；

第二加载子单元，用于如果图层的类型为图像图层，则将图层对应的截图加载到图层对应的显示区域中。

在本发明实施例中，获取设计原文件的尺寸以及设计原文件包括的图层的图层信息；获取图层包括的素材；根据设计原文件的尺寸、图层的图层信息和图层包括的素材，生成网页页面。由于根据设计原文件的尺寸、设计原文件包括的图层的图层信息以及图层包括的素材，将设计原文件转换为网页页面，来自动生成网页页面，如此提高了生成网页页面的效率，降低了生成网页页面的成本，同时保证了生成网页页面的质量。

实施例4

请参考图5，其示出了本发明实施例所涉及的具有触敏表面的终端结构示意图，该终端可以用于实施上述实施例中提供的生成网页页面的方法。具体来讲：

终端900可以包括RF(Radio Frequency，射频)电路110、包括有一个或一个以上计算机可读存储介质的存储器120、输入单元130、显示单元140、传感器150、音频电路160、WiFi(wireless fidelity，无线保真)模块170、包括有一个或者一个以上处理核心的处理器180、以及电源190等部件。本领域技术人员可以理解，图5中示出的终端结构并不构成对终端的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。其中：

RF电路110可用于收发信息或通话过程中，信号的接收和发送，特别地，将基站的下行信息接收后，交由一个或者一个以上处理器180处理；另外，将涉及上行的数据发送给基站。通常，RF电路110包括但不限于天线、至少一个放大器、调谐器、一个或多个振荡器、用户身份模块(SIM)卡、收发信机、耦合器、LNA(Low Noise Amplifier，低噪声放大器)、双工器等。此外，RF电路110还可以通过无线通信与网络和其他设备通信。所述无线通信可以使用任一通信标准或协议，包括但不限于GSM(Global System of Mobile communication，全球移动通讯系统)、GPRS(General Packet Radio Service，通用分组无线服务)、CDMA(CodeDivision Multiple Access，码分多址)、WCDMA(Wideband Code Division MultipleAccess,宽带码分多址)、LTE(Long Term Evolution,长期演进)、电子邮件、SMS(ShortMessaging Service，短消息服务)等。

存储器120可用于存储软件程序以及模块，处理器180通过运行存储在存储器120的软件程序以及模块，从而执行各种功能应用以及数据处理。存储器120可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序(比如声音播放功能、图像播放功能等)等；存储数据区可存储根据终端900的使用所创建的数据(比如音频数据、电话本等)等。此外，存储器120可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他易失性固态存储器件。相应地，存储器120还可以包括存储器控制器，以提供处理器180和输入单元130对存储器120的访问。

输入单元130可用于接收输入的数字或字符信息，以及产生与用户设置以及功能控制有关的键盘、鼠标、操作杆、光学或者轨迹球信号输入。具体地，输入单元130可包括触敏表面131以及其他输入设备132。触敏表面131，也称为触摸显示屏或者触控板，可收集用户在其上或附近的触摸操作(比如用户使用手指、触笔等任何适合的物体或附件在触敏表面131上或在触敏表面131附近的操作)，并根据预先设定的程式驱动相应的连接装置。可选的，触敏表面131可包括触摸检测装置和触摸控制器两个部分。其中，触摸检测装置检测用户的触摸方位，并检测触摸操作带来的信号，将信号传送给触摸控制器；触摸控制器从触摸检测装置上接收触摸信息，并将它转换成触点坐标，再送给处理器180，并能接收处理器180发来的命令并加以执行。此外，可以采用电阻式、电容式、红外线以及表面声波等多种类型实现触敏表面131。除了触敏表面131，输入单元130还可以包括其他输入设备132。具体地，其他输入设备132可以包括但不限于物理键盘、功能键(比如音量控制按键、开关按键等)、轨迹球、鼠标、操作杆等中的一种或多种。

显示单元140可用于显示由用户输入的信息或提供给用户的信息以及终端900的各种图形用户接口，这些图形用户接口可以由图形、文本、图标、视频和其任意组合来构成。显示单元140可包括显示面板141，可选的，可以采用LCD(Liquid Crystal Display，液晶显示器)、OLED(Organic Light-Emitting Diode,有机发光二极管)等形式来配置显示面板141。进一步的，触敏表面131可覆盖显示面板141，当触敏表面131检测到在其上或附近的触摸操作后，传送给处理器180以确定触摸事件的类型，随后处理器180根据触摸事件的类型在显示面板141上提供相应的视觉输出。虽然在图5中，触敏表面131与显示面板141是作为两个独立的部件来实现输入和输入功能，但是在某些实施例中，可以将触敏表面131与显示面板141集成而实现输入和输出功能。

终端900还可包括至少一种传感器150，比如光传感器、运动传感器以及其他传感器。具体地，光传感器可包括环境光传感器及接近传感器，其中，环境光传感器可根据环境光线的明暗来调节显示面板141的亮度，接近传感器可在终端900移动到耳边时，关闭显示面板141和/或背光。作为运动传感器的一种，重力加速度传感器可检测各个方向上(一般为三轴)加速度的大小，静止时可检测出重力的大小及方向，可用于识别手机姿态的应用(比如横竖屏切换、相关游戏、磁力计姿态校准)、振动识别相关功能(比如计步器、敲击)等；至于终端900还可配置的陀螺仪、气压计、湿度计、温度计、红外线传感器等其他传感器，在此不再赘述。

音频电路160、扬声器161，传声器162可提供用户与终端900之间的音频接口。音频电路160可将接收到的音频数据转换后的电信号，传输到扬声器161，由扬声器161转换为声音信号输出；另一方面，传声器162将收集的声音信号转换为电信号，由音频电路160接收后转换为音频数据，再将音频数据输出处理器180处理后，经RF电路110以发送给比如另一终端，或者将音频数据输出至存储器120以便进一步处理。音频电路160还可能包括耳塞插孔，以提供外设耳机与终端900的通信。

WiFi属于短距离无线传输技术，终端900通过WiFi模块170可以帮助用户收发电子邮件、浏览网页和访问流式媒体等，它为用户提供了无线的宽带互联网访问。虽然图5示出了WiFi模块170，但是可以理解的是，其并不属于终端900的必须构成，完全可以根据需要在不改变发明的本质的范围内而省略。

处理器180是终端900的控制中心，利用各种接口和线路连接整个手机的各个部分，通过运行或执行存储在存储器120内的软件程序和/或模块，以及调用存储在存储器120内的数据，执行终端900的各种功能和处理数据，从而对手机进行整体监控。可选的，处理器180可包括一个或多个处理核心；优选的，处理器180可集成应用处理器和调制解调处理器，其中，应用处理器主要处理操作系统、用户界面和应用程序等，调制解调处理器主要处理无线通信。可以理解的是，上述调制解调处理器也可以不集成到处理器180中。

终端900还包括给各个部件供电的电源190(比如电池)，优选的，电源可以通过电源管理系统与处理器180逻辑相连，从而通过电源管理系统实现管理充电、放电、以及功耗管理等功能。电源190还可以包括一个或一个以上的直流或交流电源、再充电系统、电源故障检测电路、电源转换器或者逆变器、电源状态指示器等任意组件。

尽管未示出，终端900还可以包括摄像头、蓝牙模块等，在此不再赘述。具体在本实施例中，终端900的显示单元是触摸屏显示器，终端900还包括有存储器，以及一个或者一个以上的程序，其中一个或者一个以上程序存储于存储器中，且经配置以由一个或者一个以上处理器执行述一个或者一个以上程序包含用于进行以下操作的指令：

获取设计原文件的尺寸以及设计原文件包括的图层的图层信息；

获取图层包括的素材；

根据设计原文件的尺寸、图层的图层信息和图层包括的素材，生成网页页面。

优选地，图层信息至少包括图层的序号、类型、图层包括的素材的位置和尺寸；

获取设计原文件包括的图层的图层信息，包括：

获取图层中的包括所有素材的最小区域的位置和尺寸；

将最小区域的位置和尺寸确定为图层包括的素材的位置和尺寸；

为图层分配序号；

获取图层的类型属性，根据类型属性获取图层的类型。

进一步地，如果图层的类型为文字图层，则图层的图层信息还包括图层的样式信息；

获取设计原文件包括的图层的图层信息，还包括：

获取图层的样式属性，根据样式属性获取图层的样式信息。

优选地，获取图层包括的素材，包括：

如果图层的类型为文字图层，则获取图层中包括的文字内容，将获取的文字内容确定为图层包括的素材；

如果图层的类型为图像图层，则对图层中的包括所有素材的最小区域进行截图，得到图层对应的截图，将截图确定为图层包括的素材。

进一步地，获取设计原文件包括的图层的图层信息之前，还包括：

获取设计原文件包括的每个图层文件夹的层级，将层级大于预设数值的图层文件夹包括的所有图层合并为一个图层。

优选地，根据设计原文件的尺寸、图层的图层信息和图层包括的素材，生成网页页面，包括：

根据设计原文件的尺寸创建一个空白的网页页面，空白的网页页面包括一个内容区域，内容区域的尺寸与设计原文件的尺寸相等；

根据图层的图层信息包括的素材的位置和尺寸，在内容区域中创建图层对应的一个显示区域；

将图层包括的素材加载到图层对应的显示区域中，以生成网页页面。

优选地，将图层包括的素材加载到图层对应的显示区域中，包括：

如果图层的类型为文字图层，则将图层包括的文字内容加载到图层对应的显示区域中，并根据图层的图层信息包括的样式信息设置文字内容的样式；

如果图层的类型为图像图层，则将图层对应的截图加载到图层对应的显示区域中。

在本发明实施例中，获取设计原文件的尺寸以及设计原文件包括的图层的图层信息；获取图层包括的素材；根据设计原文件的尺寸、图层的图层信息和图层包括的素材，生成网页页面。由于根据设计原文件的尺寸、设计原文件包括的图层的图层信息以及图层包括的素材，将设计原文件转换为网页页面，来自动生成网页页面，如此提高了生成网页页面的效率，降低了生成网页页面的成本，同时保证了生成网页页面的质量。

本领域普通技术人员可以理解实现上述实施例的全部或部分步骤可以通过硬件来完成，也可以通过程序来指令相关的硬件完成，所述的程序可以存储于一种计算机可读存储介质中，上述提到的存储介质可以是只读存储器，磁盘或光盘等。

以上所述仅为本发明的较佳实施例，并不用以限制本发明，凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (14)

1.一种生成网页页面的方法，其特征在于，所述方法包括：

获取设计原文件的尺寸以及所述设计原文件包括的图层的图层信息；

如果所述图层的类型为图像图层，则对所述图层中的包括所有素材的最小区域进行截图，得到所述图层对应的截图，将所述截图确定为所述图层包括的素材；

根据所述设计原文件的尺寸创建一个空白的网页页面，所述空白的网页页面包括一个内容区域；

根据所述图层的图层信息包括的素材的位置和尺寸，在所述内容区域中创建所述图层对应的一个显示区域；

将所述图层包括的素材加载到所述图层对应的显示区域中，以生成所述网页页面。

2.如权利要求1所述的方法，其特征在于，所述图层信息至少包括图层的序号、类型、所述图层包括的素材的位置和尺寸；

所述获取所述设计原文件包括的图层的图层信息，包括：

获取所述图层中的包括所有素材的最小区域的位置和尺寸；

将所述最小区域的位置和尺寸确定为所述图层包括的素材的位置和尺寸；

为所述图层分配序号；

获取所述图层的类型属性，根据所述类型属性获取所述图层的类型。

3.如权利要求2所述的方法，其特征在于，如果所述图层的类型为文字图层，则所述图层的图层信息还包括所述图层的样式信息；

所述获取所述设计原文件包括的图层的图层信息，还包括：

获取所述图层的样式属性，根据所述样式属性获取所述图层的样式信息。

4.如权利要求1所述的方法，其特征在于，所述获取所述图层包括的素材，包括：

如果所述图层的类型为文字图层，则获取所述图层中包括的文字内容，将所述获取的文字内容确定为所述图层包括的素材。

5.如权利要求1所述的方法，其特征在于，所述获取所述设计原文件包括的图层的图层信息之前，还包括：

获取所述设计原文件包括的每个图层文件夹的层级，将所述层级大于预设数值的图层文件夹包括的所有图层合并为一个图层。

6.如权利要求1所述的方法，其特征在于，所述内容区域的尺寸与所述设计原文件的尺寸相等。

7.如权利要求1所述的方法，其特征在于，所述将所述图层包括的素材加载到所述图层对应的显示区域中，包括：

如果所述图层的类型为文字图层，则将所述图层包括的文字内容加载到所述图层对应的显示区域中，并根据所述图层的图层信息包括的样式信息设置所述文字内容的样式；

如果所述图层的类型为图像图层，则将所述图层对应的截图加载到所述图层对应的显示区域中。

8.一种生成网页页面的装置，其特征在于，所述装置包括：

第一获取模块，用于获取设计原文件的尺寸以及所述设计原文件包括的图层的图层信息；

第二获取模块包括：第四获取单元，用于如果所述图层的类型为图像图层，则对所述图层中的包括所有素材的最小区域进行截图，得到所述图层对应的截图，将所述截图确定为所述图层包括的素材；

生成模块的第一创建单元，用于根据所述设计原文件的尺寸创建一个空白的网页页面，所述空白的网页页面包括一个内容区域；

所述生成模块的第二创建单元，用于根据所述图层的图层信息包括的素材的位置和尺寸，在所述内容区域中创建所述图层对应的一个显示区域；

所述生成模块的加载单元，用于将所述图层包括的素材加载到所述图层对应的显示区域中，以生成所述网页页面。

9.如权利要求8所述的装置，其特征在于，所述图层信息至少包括图层的序号、类型、所述图层包括的素材的位置和尺寸；

所述第一获取模块包括：

第一获取单元，用于获取所述图层中的包括所有素材的最小区域的位置和尺寸；

确定单元，用于将所述最小区域的位置和尺寸确定为所述图层包括的素材的位置和尺寸；

分配单元，用于为所述图层分配序号；

第二获取单元，用于获取所述图层的类型属性，根据所述类型属性获取所述图层的类型。

10.如权利要求9所述的装置，其特征在于，如果所述图层的类型为文字图层，则所述图层的图层信息还包括所述图层的样式信息；

所述第一获取模块，还用于获取所述图层的样式属性，根据所述样式属性获取所述图层的样式信息。

11.如权利要求8所述的装置，其特征在于，所述第二获取模块包括：

第三获取单元，用于如果所述图层的类型为文字图层，则获取所述图层中包括的文字内容，将所述获取的文字内容确定为所述图层包括的素材。

12.如权利要求8所述的装置，其特征在于，所述装置还包括：

合并模块，用于获取所述设计原文件包括的每个图层文件夹的层级，将所述层级大于预设数值的图层文件夹包括的所有图层合并为一个图层。

13.如权利要求8所述的装置，其特征在于，所述内容区域的尺寸与所述设计原文件的尺寸相等。

14.如权利要求8所述的装置，其特征在于，所述加载单元包括：

第一加载子单元，用于如果所述图层的类型为文字图层，则将所述图层包括的文字内容加载到所述图层对应的显示区域中，并根据所述图层的图层信息包括的样式信息设置所述文字内容的样式；

第二加载子单元，用于如果所述图层的类型为图像图层，则将所述图层对应的截图加载到所述图层对应的显示区域中。