CN105447096A - 网页生成方法及装置 - Google Patents

Abstract

本发明提供一种网页生成方法及装置。方法包括：获取待生成网页的图层文件；对图层文件进行解析处理，以获得图层文件中的图层及图层的属性信息；将图层映射为待生成网页上的元素，并将图层的属性信息映射为元素的属性信息；根据元素及元素的属性信息，生成待生成网页的源文件。本发明可以自动根据图层文件生成网页的源文件，与现有技术中手动编写源代码的方式相比，有利于提高网页生成效率，满足互联网的网页需求。

Description

网页生成方法及装置

【技术领域】

本发明涉及互联网技术领域，尤其涉及一种网页生成方法及装置。

【背景技术】

随着移动互联网的发展，出现了大量类似微信、微博等应用平台。用户可以在这些应用平台上分享一些网页，这些网页主要是超文本标记语言第五版本(简称为HTML5)网页。几乎所有内容都可以制作成HTML5网页，通过微信、微博等应用平台进行传播。由此可见，随着类似微信、微博等应用平台的发展，HTML5网页的需求量也越来越大。

在现有技术中，一般是由网页开发人员根据预先设计好的图层文件，例如PSD文件，手动编写网页源代码，进而根据网页源代码渲染出HTML5网页。这种生成网页的方式的效率较低，无法满足目前互联网对HTML5网页的需求。

【发明内容】

本发明的多个方面提供一种网页生成方法及装置，用以提高网页的生成效率。

本发明的一方面，提供一种网页生成方法，包括：

获取待生成网页的图层文件；

对所述图层文件进行解析处理，以获得所述图层文件中的图层及所述图层的属性信息；

将所述图层映射为所述待生成网页上的元素，并将所述图层的属性信息映射为所述元素的属性信息；

根据所述元素及所述元素的属性信息，生成所述待生成网页的源文件。

作为本发明的进一步改进，所述对所述图层文件进行解析处理，以获得所述图层文件中的图层及所述图层的属性信息，包括：

对所述图层文件进行切片处理，以获得所述图层，将所述图层保存为图片文件；

从所述图层文件的图层信息中获取所述图层的大小及所述图层在所述图层文件中的位置，并获取所述图层的存储路径作为所述图层的属性信息。

作为本发明的进一步改进，所述将所述图层映射为所述待生成网页上的元素，并将所述图层的属性信息映射为所述元素的属性信息，包括：

将所述图层映射为所述待生成网页上的元素，将所述图层的存储路径映射为所述元素的存储地址，并将所述图层的大小及所述图层在所述图层文件中的位置，映射为所述元素的大小以及所述元素在所述待生成网页上的位置。

作为本发明的进一步改进，所述将所述图层保存为图片文件，包括：

在内存中创建图片缓存区域；

按照从左至右、从上至下的顺序依次扫描所述图层中的像素点，将所述像素点的颜色信息存入所述图片缓存区域；

当所有像素点的颜色信息均存入所述图片缓存区域后，将所述图片缓存区域保存成图片文件。

作为本发明的进一步改进，所述根据所述元素及所述元素的属性信息，生成所述待生成网页的源文件之前，包括：

对所述元素及所述元素的属性信息进行预渲染，以在编辑器中展示所述待生成网页对应的可编辑网页；

接收用户操作所述可编辑网页上的所述元素所发出的网页样式调整指令；

根据所述网页样式调整指令，调整所述元素的属性信息中与网页样式相关的属性信息。

作为本发明的进一步改进，所述根据所述元素及所述元素的属性信息，生成所述待生成网页的源文件，包括：

根据所述元素及所述元素的属性信息，对预设的HTML文件模板进行具体化，以生成所述待生成网页的HTML文件。

本发明的另一方面，提供一种网页生成装置，包括：

获取模块，用于获取待生成网页的图层文件；

解析模块，用于对所述图层文件进行解析处理，以获得所述图层文件中的图层及所述图层的属性信息；

映射模块，用于将所述图层映射为所述待生成网页上的元素，并将所述图层的属性信息映射为所述元素的属性信息；

生成模块，用于根据所述元素及所述元素的属性信息，生成所述待生成网页的源文件。

作为本发明的进一步改进，所述解析模块具体用于：

对所述图层文件进行切片处理，以获得所述图层，将所述图层保存为图片文件；

从所述图层文件的图层信息中获取所述图层的大小及所述图层在所述图层文件中的位置，并获取所述图层的存储路径作为所述图层的属性信息。

作为本发明的进一步改进，所述映射模块具体用于：

将所述图层映射为所述待生成网页上的元素，将所述图层的存储路径映射为所述元素的存储地址，并将所述图层的大小及所述图层在所述图层文件中的位置，映射为所述元素的大小以及所述元素在所述待生成网页上的位置。

作为本发明的进一步改进，所述解析模块具体用于：

在内存中创建图片缓存区域；

按照从左至右、从上至下的顺序依次扫描所述图层中的像素点，将所述像素点的颜色信息存入所述图片缓存区域；

当所有像素点的颜色信息均存入所述图片缓存区域后，将所述图片缓存区域保存成图片文件。

作为本发明的进一步改进，所述装置还包括：

调整模块，用于对所述元素及所述元素的属性信息进行预渲染，以在编辑器中展示所述待生成网页对应的可编辑网页；接收用户操作所述可编辑网页上的所述元素所发出的网页样式调整指令；根据所述网页样式调整指令，调整所述元素的属性信息中与网页样式相关的属性信息。

作为本发明的进一步改进，所述生成模块具体用于：

根据所述元素及所述元素的属性信息，对预设的HTML文件模板进行具体化，以生成所述待生成网页的HTML文件。

由上述可知，本发明通过对待生成网页的图层文件进行解析处理，从而获得图层文件中的图层及图层的属性信息，进而将图层映射为待生成网页上的元素，将图层的属性映射为元素的属性信息，之后根据元素及元素的属性信息，生成待生成网页的源文件，可以自动根据图层文件生成网页的源文件，与现有技术中手动编写源代码的方式相比，有利于提高网页生成效率，满足互联网的网页需求。

【附图说明】

为了更清楚地说明本发明实施例中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作一简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。

图1为本发明一实施例提供的网页生成方法的流程示意图；

图2为本发明另一实施例提供的网页生成装置的结构示意图；

图3为本发明又一实施例提供的网页生成装置的结构示意图。

【具体实施方式】

为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

图1为本发明一实施例提供的网页生成方法的流程示意图。如图1所示，该方法包括：

101、获取待生成网页的图层文件。

102、对上述图层文件进行解析处理，以获得图层文件中的图层及图层的属性信息。

103、将上述图层映射为待生成网页上的元素，并将图层的属性信息映射为元素的属性信息。

104、根据上述元素及元素的属性信息，生成待生成网页的源文件。

本实施例提供一种网页生成方法，主要用于自动生成网页的源文件，从而实现网页的自动生成，不需要编程人员手动编写源代码，有利于提高网页生成效率，满足互联网的网页需求量。

值得说明的是，本实施例提供的方法适用于生成各种类型的网页，尤其适用于生成页面样式相对固定、简单的网页，例如HTML5网页。

在生成网页之前，可由网页设计人员预先生成待生成网页的图层文件，所述图层文件是指保留了图层等图像文件的全部信息的文件，根据图层文件可以快速生成相应网页。图层文件需要按照一定的规则制作，所述规则主要是指符合待生成网页需求的规则。所述图层文件可以是但不限于：PSD文件。PSD是图形设计软件PhotoShop的一种图形文件格式。

在生成图层文件之后，网页生成装置可以获取该图层文件。具体的，网页生成装置面向网页设计人员提供上传功能，这样网页设计人员在制作出图层文件之后，可以向网页生成装置上传图层文件。例如，可以采用HTML5的Ajax文件上传技术，实现图层文件的上传。Ajax文件上传技术可以适合单页应用，不刷新页面，并且可以实时读取上传进度，并将进度展现给用户，用户体验较好。当然，除了Ajax文件上传技术，也可以采用传统的form文件上传技术。关于采用Ajax文件上传技术或form文件上传技术上传图层文件的具体实现可参见现有技术，在此不再赘述。

网页生成装置获取待生成网页的图层文件之后，可以对图层文件进行解析处理，以获得图层文件中的图层及图层的属性信息，之后将图层映射为待生成网页上的元素，将图层的属性信息映射为相应元素的属性信息；进而根据待生成网页上的元素以及元素的属性信息，生成该待生成网页的源文件。值得说明的是，这里的源文件是指供浏览器或客户端渲染待生成网页所需的文件。例如，渲染待生成网页所需的文件可以是HTML文件，该HTML文件携带有表示网页上的元素的大小和位置等属性信息的代码。或者，渲染待生成网页所需的文件可以是HTML文件和级联样式表(CascadingStyleSheet，CSS)文件，该CSS文件主要包括独立于HTML文件主要表示网页上的元素的大小和位置等属性信息的代码。

上述网页生成装置对图层文件进行解析处理，以获得图层文件中的图层及图层的属性信息主要包括获取图层的操作和获取图层的属性信息的操作。

对于获取图层的操作，网页生成装置可以借助Photoshop的切片工具或者触发人工手动对图层文件进行切片处理，以获得该图层文件中的图层，将所获得的图层保存为图片文件。所述图片文件可以是但不限于png格式。

进一步，一种将图层保存为图片文件的方式包括：首先，在内存中创建图片缓存区域；按照从左至右、从上至下的顺序依次扫描图层中的像素点，将像素点的颜色信息依次存入该图片缓存区域；当所有像素点的颜色信息均存入该图片缓存区域后，将该图片缓存区域保存成图片文件。

对于获取图层的属性信息的操作，网页生成装置可以读取图层文件的图层信息，从图层信息中获取每个图层的大小及图层在图层文件中的位置，并获取图层的存储路径等作为图层的属性信息。该图层信息包括图层文件中各图层的定义，这里所述图层的定义主要是指图层的相关信息，例如可以包括图层顶边距、左边距、宽度、高度，以及图层类型等，所述图层类型分为图像和分组两种。其中，图层的定义中只有部分信息对本实施例有用，例如，图层顶边距、左边距、宽度、高度，以及图层类型等。其中，图层的宽度、高度可表示图层的大小，图层的顶边距、左边距可表示图层在图层文件中的位置。图层的大小可作为图层的大小属性，图层在图层文件中的位置可作为图层的位置属性，图层的存储路径可作为图层的路径属性。

在获得图层及图层的属性信息之后，网页生成装置可以将图层映射为待生成网页上的元素，将图层的存储路径映射为元素的存储地址，并将图层的大小及图层在所述图层文件中的位置，映射为元素的大小以及元素在待生成网页上的位置。

可选的，网页生成装置可以维护一套标准数据格式，例如可以是JSON格式。该标准数据格式可以按照网页上元素的属性信息进行定义。例如，对于HTML5网页，该标准数据格式可以定义HTML5网页上每个元素的属性信息，如位置、大小等。基于此，网页生成装置将图层的属性信息映射为元素的属性信息，主要是指将图层的属性信息转换为网页生成装置所支持的标准数据格式，即按照网页生成装置所支持的标准数据格式对图层的属性信息进行存储。例如，可以将每个图层映射为一个元素，并将该图层的顶边距、左边距、宽度、高度以及存储路径等信息，分别对应存储成由该标准数据格式定义的相应元素的位置、大小、src等属性值。

值得说明的是，上述处理流程可以由网页生成装置自动完成，整个过程只需要十几秒，较慢的情况也只需2分钟左右，与以往开发人员手工切图的方式相比，极大地提升了效率，为提高网页生成效率提供了条件。

可选的，本实施例的网页生成装置可提供编辑器，用以在真正生成待生成网页之前，生成处于可编辑状态的网页，以供用户对网页的样式格局进行调整，主要是指调整网页上元素的大小、位置以及层叠顺序等。

基于上述，在完成映射之后，且在生成源文件之前，网页生成装置可以对映射出的元素及元素的属性信息进行预渲染，以在编辑器中展示待生成网页对应的可编辑网页，即将待生成网页以可编辑状态渲染在网页生成装置提供的编辑器中。此时，用户可以通过可视化的方式对可编辑网页进行编辑，例如可以通过操作该可编辑网页而发出网页样式调整指令，例如可以拖动元素来调整元素位置，或者可以缩放元素来调整元素的大小，或者也可以改变元素之间的层叠顺序，甚至也可以调整网页的大小。网页生成装置接收用户通过操作可编辑网页上的所述元素所发出的网页样式调整指令，根据该网页样式调整指令，调整元素的属性信息中与网页样式有关的属性信息，例如元素的大小、元素在待生成网页上的位置以及元素之间的层叠关系等。在该实施方式中，用户可以在编辑器中对上述元素进行二次编辑，实现对网页样式的调整，有利于保证待生成网页生成以后的页面效果。

当获得待生成网页上的元素及元素的属性信息之后，可以根据待生成网页上的元素及元素的属性信息，生成待生成网页的源文件。值得说明的是，若在生成待生成网页的源文件之前，对元素的属性信息进行了调整，则在生成待生成网页的源文件时，使用的是待生成网页上的元素以及经过调整的元素的属性信息。

以待生成网页为HTML5网页，HTML5网页的源文件为HTML文件为例，可以预先配置HTML文件模板。在该HTML文件模板中固化一些与网页上的元素及元素的属性信息无关的代码，这部分代码主要用于实现HTML网页上通用的一些内容，例如整个网页的大小的定义，加载(loading)图标，以及整体网页的背景色(如为白色)，元素的绝对定位，以及设定每一屏都是铺满窗口大小的等内容；而与网页上的元素及元素的属性信息有关的一些内容需要根据待生成网页上的元素及元素的属性信息进行具体化，这部分内容主要是与这些元素相关代码，例如实现元素的动画以及一些效果的代码都需要在网页上的元素及元素的属性信息确定后才能确定。基于上述，网页生成装置可以根据待生成网页上的元素及元素的属性信息，对预先生成的HTML文件模板进行具体化，以生成待生成网页的HTML文件。

在生成待生成网页的HTML文件后，可以存储待生成网页的HTML文件。当浏览器或客户端需要展现该待生成网页时，可以向网页生成装置发送资源获取请求，网页生成装置将待生成网页的HTML文件发送给浏览器或客户端，使得浏览器或客户端在本地渲染出待生成网页。

本实施例通过对待生成网页的图层文件进行解析处理，从而获得图层文件中的图层及图层的属性信息，进而将图层映射为待生成网页上的元素，将图层的属性映射为元素的属性信息，之后根据元素及元素的属性信息，生成待生成网页的源文件，可以自动根据图层文件生成网页的源文件，与现有技术中手动编写源代码的方式相比，提高了网页生成效率，满足了互联网的网页需求。

需要说明的是，对于前述的各方法实施例，为了简单描述，故将其都表述为一系列的动作组合，但是本领域技术人员应该知悉，本发明并不受所描述的动作顺序的限制，因为依据本发明，某些步骤可以采用其他顺序或者同时进行。其次，本领域技术人员也应该知悉，说明书中所描述的实施例均属于优选实施例，所涉及的动作和模块并不一定是本发明所必须的。

在上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其他实施例的相关描述。

图2为本发明另一实施例提供的网页生成装置的结构示意图。如图2所示，该装置包括：获取模块21、解析模块22、映射模块23和生成模块24。

获取模块21，用于获取待生成网页的图层文件。

解析模块22，用于对获取模块21获取的图层文件进行解析处理，以获得图层文件中的图层及图层的属性信息。

映射模块23，用于将解析模块22获得的图层映射为所述待生成网页上的元素，并将解析模块22获得的图层的属性信息映射为元素的属性信息。

生成模块24，用于根据映射模块23确定的元素及元素的属性信息，生成待生成网页的源文件。

在一可选实施方式中，解析模块22具体可用于：

对图层文件进行切片处理，以获得图层文件中的图层，将所获得的图层保存为图片文件；

从所述图层文件的图层信息中获取所述图层的大小及所述图层在所述图层文件中的位置，并获取所述图层的存储路径作为所述图层的属性信息。

在一可选实施方式中，解析模块22用于将所获得的图层保存为图片文件时，具体可用于：

在内存中创建图片缓存区域；

按照从左至右、从上至下的顺序依次扫描图层中的像素点，将像素点的颜色信息存入所述图片缓存区域；

当所有像素点的颜色信息均存入图片缓存区域后，将图片缓存区域保存成图片文件。

在一可选实施方式中，映射模块23具体可用于：将上述图层映射为待生成网页上的元素，将图层的存储路径映射为元素的存储地址，并将图层的大小及图层在图层文件中的位置，映射为元素的大小以及元素在待生成网页上的位置。

进一步，如图3所示，该装置还包括：调整模块25。

调整模块25，用于对元素及元素的属性信息进行预渲染，以在编辑器中展示待生成网页对应的可编辑网页；接收用户操作可编辑网页上的元素所发出的网页样式调整指令；根据网页样式调整指令，调整元素的属性信息中与网页样式相关的属性信息。

在一可选实施方式中，生成模块24具体可用于：

根据元素及元素的属性信息，对预设的HTML文件模板进行具体化，以生成待生成网页的HTML文件。

本实施例提供的网页生成装置，通过对待生成网页的图层文件进行解析处理，从而获得图层文件中的图层及图层的属性信息，进而将图层映射为待生成网页上的元素，将图层的属性映射为元素的属性信息，之后根据元素及元素的属性信息，生成待生成网页的源文件，可以自动根据图层文件生成网页的源文件，与现有技术中手动编写源代码的方式相比，有利于提高网页生成效率，满足互联网的网页需求。

所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的系统，装置和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

在本发明所提供的几个实施例中，应该理解到，所揭露的系统，装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本发明各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用硬件加软件功能单元的形式实现。

上述以软件功能单元的形式实现的集成的单元，可以存储在一个计算机可读取存储介质中。上述软件功能单元存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)或处理器(processor)执行本发明各个实施例所述方法的部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(Read-OnlyMemory，ROM)、随机存取存储器(RandomAccessMemory，RAM)、磁碟或者光盘等各种可以存储程序代码的介质。

最后应说明的是：以上实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。

Claims (12)

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

获取待生成网页的图层文件；

对所述图层文件进行解析处理，以获得所述图层文件中的图层及所述图层的属性信息；

将所述图层映射为所述待生成网页上的元素，并将所述图层的属性信息映射为所述元素的属性信息；

根据所述元素及所述元素的属性信息，生成所述待生成网页的源文件。

2.根据权利要求1所述的方法，其特征在于，所述对所述图层文件进行解析处理，以获得所述图层文件中的图层及所述图层的属性信息，包括：

对所述图层文件进行切片处理，以获得所述图层，将所述图层保存为图片文件；

从所述图层文件的图层信息中获取所述图层的大小及所述图层在所述图层文件中的位置，并获取所述图层的存储路径作为所述图层的属性信息。

3.根据权利要求2所述的方法，其特征在于，所述将所述图层映射为所述待生成网页上的元素，并将所述图层的属性信息映射为所述元素的属性信息，包括：

将所述图层映射为所述待生成网页上的元素，将所述图层的存储路径映射为所述元素的存储地址，并将所述图层的大小及所述图层在所述图层文件中的位置，映射为所述元素的大小以及所述元素在所述待生成网页上的位置。

4.根据权利要求2所述的方法，其特征在于，所述将所述图层保存为图片文件，包括：

在内存中创建图片缓存区域；

按照从左至右、从上至下的顺序依次扫描所述图层中的像素点，将所述像素点的颜色信息存入所述图片缓存区域；

当所有像素点的颜色信息均存入所述图片缓存区域后，将所述图片缓存区域保存成图片文件。

5.根据权利要求1所述的方法，其特征在于，所述根据所述元素及所述元素的属性信息，生成所述待生成网页的源文件之前，包括：

对所述元素及所述元素的属性信息进行预渲染，以在编辑器中展示所述待生成网页对应的可编辑网页；

接收用户操作所述可编辑网页上的所述元素所发出的网页样式调整指令；

根据所述网页样式调整指令，调整所述元素的属性信息中与网页样式相关的属性信息。

6.根据权利要求1-5任一项所述的方法，其特征在于，所述根据所述元素及所述元素的属性信息，生成所述待生成网页的源文件，包括：

根据所述元素及所述元素的属性信息，对预设的超文本标记语言HTML文件模板进行具体化，以生成所述待生成网页的HTML文件。

7.一种网页生成装置，其特征在于，包括：

获取模块，用于获取待生成网页的图层文件；

解析模块，用于对所述图层文件进行解析处理，以获得所述图层文件中的图层及所述图层的属性信息；

映射模块，用于将所述图层映射为所述待生成网页上的元素，并将所述图层的属性信息映射为所述元素的属性信息；

生成模块，用于根据所述元素及所述元素的属性信息，生成所述待生成网页的源文件。

8.根据权利要求7所述的装置，其特征在于，所述解析模块具体用于：

对所述图层文件进行切片处理，以获得所述图层，将所述图层保存为图片文件；

从所述图层文件的图层信息中获取所述图层的大小及所述图层在所述图层文件中的位置，并获取所述图层的存储路径作为所述图层的属性信息。

9.根据权利要求8所述的装置，其特征在于，所述映射模块具体用于：

将所述图层映射为所述待生成网页上的元素，将所述图层的存储路径映射为所述元素的存储地址，并将所述图层的大小及所述图层在所述图层文件中的位置，映射为所述元素的大小以及所述元素在所述待生成网页上的位置。

10.根据权利要求8所述的装置，其特征在于，所述解析模块具体用于：

在内存中创建图片缓存区域；

按照从左至右、从上至下的顺序依次扫描所述图层中的像素点，将所述像素点的颜色信息存入所述图片缓存区域；

当所有像素点的颜色信息均存入所述图片缓存区域后，将所述图片缓存区域保存成图片文件。

11.根据权利要求7所述的装置，其特征在于，还包括：

调整模块，用于对所述元素及所述元素的属性信息进行预渲染，以在编辑器中展示所述待生成网页对应的可编辑网页；接收用户操作所述可编辑网页上的所述元素所发出的网页样式调整指令；根据所述网页样式调整指令，调整所述元素的属性信息中与网页样式相关的属性信息。

12.根据权利要求7-11任一项所述的装置，其特征在于，所述生成模块具体用于：

根据所述元素及所述元素的属性信息，对预设的超文本标记语言HTML文件模板进行具体化，以生成所述待生成网页的HTML文件。