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

Abstract

本发明公开了一种网页的生成方法及装置。其中，该方法包括：从第一格式文件中获取配置信息，其中，第一格式文件为初始的图像编辑类文件；根据配置信息确定对应的模板，其中，模板用于描述配置信息在网页上显示时的页面结构；按照模板加载配置信息，生成网页。本发明解决了相关技术中无法直接将图像编辑类文件转化为在浏览器中显示的网页的技术问题。

Description

网页的生成方法及装置

技术领域

本发明涉及互联网领域，具体而言，涉及一种网页的生成方法及装置。

背景技术

PSD是Adobe公司的图形设计软件Photoshop的专用格式。PSD文件可以存储成RGB或CMYK格式，其不仅能够自定义颜色数并加以存储，还可以保存Photoshop的图层、通道、路径等信息，是目前唯一能够支持全部图像色彩模式的格式。

Node.js是一个基于Chrome JavaScript运行时建立的平台，用于搭建响应速度快、易于扩展的网络应用。Node.js使用事件驱动，非阻塞I/O模型而得以轻量和高效，非常适合在分布式设备上运行数据密集型的实时应用。

在网页开发过程中，需要根据设计师提供的PSD设计稿来完成素材的提取工作，然后才能开始html、css、js等代码的编写，整个流程需要掌握很多的技术要点，更不用说项目开发中每一个细节的沟通问题，所以每一个拥有丰富经验的前端工程师都是各个互联网公司非常珍惜的人才。

那么是否可能颠覆这种传统的项目开发流程，将网页开发变得更为简单。考虑到项目最终的效果是由设计师和产品决定的，所以能否让网页开发脱离编码范畴，以便直接让设计师和产品经理产出网页。

相关技术中，如果希望开发一个完整的网页，则需要经历以下处理步骤：

第一步、产品经理提出开发需求并绘制项目原型；

第二步、设计师根据项目原型设计出指定风格的网页效果图；

第三步、前端开发工程师根据设计师设计出的网页效果图完成编码工作，并与设计师反复确认设计效果，直至将最终呈现的网页效果发布到线上。

然而，上述操作流程存在如下缺陷：

为了能够将最终呈现的网页效果发布到线上，首先必须由前端工程师来完成代码编写工作，该工作复杂且繁重，同时又需要前端工程师实时地、反复地与设计师和产品经理沟通研发需求，其可以包括但不限于：在网页中需要呈现的动画效果样式、需要呈现的点击事件样式。这些主观性的成本，在较小的研发项目中，浪费尤为明显。

以游戏类门户网站(参考网址：http://game.XXX.com/)为例，在开启官方网站首页后，可以发现伴随着鼠标移动到页面的不同位置，会产生多种不同的动态效果。而这些动态效果在PSD设计稿内是无法存在的，其需要前端工程师面对面的与设计师进行沟通，每一个动画的播放效果、播放持续时间以及播放速度都是需要与设计师进行详细地沟通并通过实时调整后得到的。

针对上述的问题，目前尚未提出有效的解决方案。

发明内容

本发明实施例提供了一种网页的生成方法及装置，以至少解决相关技术中无法直接将图像编辑类文件转化为在浏览器中显示的网页的技术问题。

根据本发明实施例的一个方面，提供了一种网页的生成方法，包括：

从第一格式文件中获取配置信息，其中，第一格式文件为初始的图像编辑类文件；根据配置信息确定对应的模板，其中，模板用于描述配置信息在网页上显示时的页面结构；按照模板加载配置信息，生成网页。

可选地，从第一格式文件中获取配置信息包括：对第一格式文件中包含的每个元素进行预处理，生成待使用的图层信息，其中，预处理用于将每个元素对应的多个拼接图层简化为单一图层，单一图层用于表征对应元素的属性信息；通过读取第一格式文件的文件头信息获取待使用的图层信息；将待使用的图层信息存储至指定文件，并根据待使用的图层信息中的图片数据生成第二格式文件，其中，第二格式文件为待显示在网页上的图像类配置文件。

可选地，在对第一格式文件中包含的每个元素进行预处理，生成待使用的图层信息之后，还包括：为第一格式文件中的一个或多个元素设置图层标识，其中，图层标识用于调用预先封装的功能函数以执行对应的操作。

可选地，在通过读取文件头信息获取待使用的图层信息之前，还包括：采用预设方式读取文件头信息，其中，预设方式用于读取二进制数据内容。

可选地，当第一格式文件中包含的元素为文本时，属性信息至少包括以下其中之一：文字大小、文字字体、文字颜色、文字对齐方式；当第一格式文件中包含的元素为图片时，属性信息至少包括以下其中之一：图片名称、图片高度、图片宽度、图片位置、图片透明度。

可选地，按照模板加载配置信息，生成网页包括：将待使用的图层信息和第二格式文件存储至与加载页面对应的预设存储区域；按照模板从预设存储区域提取待使用的图层信息和第二格式文件，生成网页。

根据本发明实施例的另一方面，还提供了一种网页的生成装置，包括：

获取模块，用于从第一格式文件中获取配置信息，其中，第一格式文件为初始的图像编辑类文件；确定模块，用于根据配置信息确定对应的模板，其中，模板用于描述配置信息在网页上显示时的页面结构；生成模块，用于按照模板加载配置信息，生成网页。

可选地，获取模块包括：第一处理单元，用于对第一格式文件中包含的每个元素进行预处理，生成待使用的图层信息，其中，预处理用于将每个元素对应的多个拼接图层简化为单一图层，单一图层用于表征对应元素的属性信息；获取单元，用于通过读取第一格式文件的文件头信息获取待使用的图层信息；第二处理单元，用于将待使用的图层信息存储至指定文件，并根据待使用的图层信息中的图片数据生成第二格式文件，其中，第二格式文件为待显示在网页上的图像类配置文件。

可选地，获取模块还包括：设置单元，用于为第一格式文件中的一个或多个元素设置图层标识，其中，图层标识用于调用预先封装的功能函数以执行对应的操作。

可选地，获取单元，用于采用预设方式读取文件头信息，其中，预设方式用于读取二进制数据内容。

可选地，当第一格式文件中包含的元素为文本时，属性信息至少包括以下其中之一：文字大小、文字字体、文字颜色、文字对齐方式；当第一格式文件中包含的元素为图片时，属性信息至少包括以下其中之一：图片名称、图片高度、图片宽度、图片位置、图片透明度。

可选地，生成模块包括：存储单元，用于将待使用的图层信息和第二格式文件存储至与加载页面对应的预设存储区域；生成单元，用于按照模板从预设存储区域提取待使用的图层信息和第二格式文件，生成网页。

在本发明实施例中，采用从初始的图像编辑类文件获取配置信息并根据配置信息确定用于描述配置信息在网页上显示时的页面结构的模板的方式，通过按照模板加载配置信息，生成网页，达到了直接将图像编辑类文件转化为网页的目的，从而实现了降低网页生成过程的操作复杂度和人力资本，加快网页生成进度的技术效果，进而解决了相关技术中无法直接将图像编辑类文件转化为在浏览器中显示的网页的技术问题。

附图说明

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

图1是根据本发明实施例的网页的生成方法的流程图；

图2是根据本发明实施例的网页的生成装置的结构框图；

图3是根据本发明优选实施例的网页的生成装置的结构框图。

具体实施方式

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

需要说明的是，本发明的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本发明的实施例能够以除了在这里图示或描述的那些以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、***、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

根据本发明实施例，提供了一种网页的生成方法的实施例，需要说明的是，在附图的流程图示出的步骤可以在诸如一组计算机可执行指令的计算机***中执行，并且，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。

图1是根据本发明实施例的网页的生成方法的流程图，如图1所示，该方法包括如下步骤：

步骤S12，从第一格式文件中获取配置信息，其中，第一格式文件为初始的图像编辑类文件；

步骤S14，根据配置信息确定对应的模板，其中，模板用于描述配置信息在网页上显示时的页面结构；

步骤S16，按照模板加载配置信息，生成网页。

通过上述步骤，可以采用从初始的图像编辑类文件获取配置信息并根据配置信息确定用于描述配置信息在网页上显示时的页面结构的模板的方式，通过按照模板加载配置信息，生成网页，达到了直接将图像编辑类文件转化为网页的目的，从而实现了降低网页生成过程的操作复杂度和人力资本，加快网页生成进度的技术效果，进而解决了相关技术中无法直接将图像编辑类文件转化为在浏览器中显示的网页的技术问题。

在优选实施过程中，上述第一格式文件可以为PSD文件，上述模板可以采用超文本标记语言(HTML)、可扩展标记语言(XML)、或者其他能够描述页面结构的语言来编写。

可选地，在步骤S12中，从第一格式文件中获取配置信息可以包括以下执行步骤：

步骤S121，对第一格式文件中包含的每个元素进行预处理，生成待使用的图层信息，其中，预处理用于将每个元素对应的多个拼接图层简化为单一图层，单一图层用于表征对应元素的属性信息；

步骤S122，通过读取第一格式文件的文件头信息获取待使用的图层信息；

步骤S123，将待使用的图层信息存储至指定文件，并根据待使用的图层信息中的图片数据生成第二格式文件，其中，第二格式文件为待显示在网页上的图像类配置文件，例如：png文件、gif文件、jpg文件。

设计师提供的PSD设计稿通常会引用大量外部素材来形成最终预览效果。例如：在页面A的背景图片中存在漂亮的烟花、飞舞的花瓣，这些素材通常都是由设计师在专门的素材网站上搜索得到的，因此，对于普通用户而言，该背景图片仅为一张简单的jpg图片，但是在开发过程中，该背景图片则是一个包含有多个图层的PSD文件。而在PSD文件中，通常都会存在大量的干扰性图层，例如：一个按钮，可能存在十多个图层叠加。为此，需要将多余的图层进行格栅化(用于将文字修改为普通图层，其益处在于：假设用户A将PSD文件发给至用户B，如果用户B所使用的终端上缺少用户A所使用的文字字体，由于文字已经经历过删格化处理，因此，用户B仍然可以在其所用的终端上查看文字；其缺陷在于：无法对文字进行修改)、删除、合并等操作，最终得到处理后的PSD文件，其中，在该PSD文件中应当是一个图层对应一个元素，例如：页面http://my.XXX.com/m/2016/qdy4/的背景图片通常被当做一张jpg格式的图片，但是在PSD设计稿中，该背景图片实际上是由多个图层拼合而成的，而经过前端工程师处理后，展现在用户眼前的仅为一张背景图片。同理，在处理后的PSD文件中，一个完整的按钮便是一个独立图层，一个文本段落也是一个独立图层。

通过读取PSD文件专有的文件头数据可以获取整个PSD文件图层信息(包括但不限于：文件结构、图层名字、透明度、大小信息、文字大小、颜色、字体、区域信息、彩色模式、位数、图片数据)，并将文件头数据和PSD文件图层信息提取到至指定文件中。同时，自动渲染每个图层的图片数据，生成PNG文件(即，对PSD文件图层内置的图片数据进行提取并按照PNG格式加以存储)，以便后续使用。

可选地，在步骤S121，对第一格式文件中包含的每个元素进行预处理，生成待使用的图层信息之后，还可以包括以下执行步骤：

步骤S124，为第一格式文件中的一个或多个元素设置图层标识，其中，图层标识用于调用预先封装的功能函数以执行对应的操作。

在优选实施例中，还可以定义一套图层命名规则，通过特定的图层命名来指定当前元素的动画效果以及操作规则。例如：如果将一个按钮图层命名为“分享按钮”，那么在最终生成的网页中，该按钮会自动添加分享事件，而不再需要前端工程师介入进行二次开发；再例如：如果将一个LOGO图层命名为“循环缩放”，那么在最终生成的网页中，LOGO处便会自动添加“循环缩放”的动画。

需要说明的是，上述“分享按钮”以及“循环播放”功能预先封装在工具软件端，如果确定特定图层命名为对应的功能名称时，便可调用预先封装的函数，以执行相应的功能。

可选地，在步骤S122，通过读取文件头信息获取待使用的图层信息之前，还可以包括以下执行步骤：

步骤S125，采用预设方式读取文件头信息，其中，预设方式用于读取二进制数据内容。

具体地，可以通过nodejs(或java)技术(其用于读取文件的二进制内容)读取PSD文件专有的文件头信息。

在优选实施过程中，当第一格式文件中包含的元素为文本时，属性信息至少包括以下其中之一：文字大小、文字字体、文字颜色、文字对齐方式；当第一格式文件中包含的元素为图片时，属性信息至少包括以下其中之一：图片名称、图片高度、图片宽度、图片位置、图片透明度。

需要说明的是，上述属性信息可以全部包含，也可以部分包含。当部分包含时，没有被包含的属性可以使用默认值。

以下为上述优选实施方式中将待使用的图层信息存储至指定文件的示例：

可选地，在步骤S16中，按照模板加载配置信息，生成网页可以包括以下执行步骤：

步骤S161，将待使用的图层信息和第二格式文件存储至与加载页面对应的预设存储区域；

步骤S162，按照模板从预设存储区域提取待使用的图层信息和第二格式文件，生成网页。

模板编译通常可以分为模板解析(翻译)和数据渲染两个部分。每一个网页通常是由样式和数据组成的，而在引入模板后，便可以将数据与样式相互分离，前端工程师只需要开发样式，并在在模板编译时动态地执行数据渲染操作，以获得最终呈现的网页。

每当PSD文件自动生成网页时，在通过执行PSD文件预处理操作与PSD文件解析操作提取出待使用的图层信息和第二格式文件之后，将其存储于预设文件位置，待通过模板进行加载时，经由指定存储路径获取待使用的图层信息和第二格式文件，进而得到最终呈现的网页。

需要说明的是，在具体实现过程中，需要运用FIS的相关技术。FIS3是面向前端的工程构建工具，用于解决前端工程中性能优化、资源加载(异步、同步、按需、预加载、依赖管理、合并、内嵌)、模块化开发、自动化工具、开发规范、代码部署等问题。

通过上述这种PSD文件直接转网页的技术方案，使得大量简单的网页项目能够直接自动化生成，进而有效地降低了前端工程师的人力资本。此外，从上述PSD文件自动提取配置信息的功能，还能够单独地提供给前端工程师使用，进而有效地节约了PSD切图(设计师设计出的PSD文件是由多方引入的素材拼合而成的，从普通用户角度来看其通常显示为一张图片，而实际上在PSD文件中是由多个图层搭配而成得到的最终显示效果，所谓“切图”便是将这些图层拼合起来，进而提取出展示给普通用户的图片)的工作量。

根据本发明实施例，还提供了一种网页的生成装置的实施例，图2是根据本发明实施例的网页的生成装置的结构框图，如图2所示，该装置可以包括：获取模块10，用于从第一格式文件中获取配置信息，其中，第一格式文件为初始的图像编辑类文件；确定模块20，用于根据配置信息确定对应的模板，其中，模板用于描述配置信息在网页上显示时的页面结构；生成模块30，用于按照模板加载配置信息，生成网页。

可选地，图3是根据本发明优选实施例的网页的生成装置的结构框图，如图3所示，获取模块10包括：第一处理单元100，用于对第一格式文件中包含的每个元素进行预处理，生成待使用的图层信息，其中，预处理用于将每个元素对应的多个拼接图层简化为单一图层，单一图层用于表征对应元素的属性信息；获取单元102，用于通过读取第一格式文件的文件头信息获取待使用的图层信息；第二处理单元104，用于将待使用的图层信息存储至指定文件，并根据待使用的图层信息中的图片数据生成第二格式文件，其中，第二格式文件为待显示在网页上的图像类配置文件。

可选地，如图3所示，获取模块10还可以包括：设置单元106，用于为第一格式文件中的一个或多个元素设置图层标识，其中，图层标识用于调用预先封装的功能函数以执行对应的操作。

可选地，获取单元102，用于采用预设方式读取文件头信息，其中，预设方式用于读取二进制数据内容。

在优选实施过程中，当第一格式文件中包含的元素为文本时，属性信息至少可以包括以下其中之一：文字大小、文字字体、文字颜色、文字对齐方式；当第一格式文件中包含的元素为图片时，属性信息至少可以包括以下其中之一：图片名称、图片高度、图片宽度、图片位置、图片透明度。

可选地，如图3所示，生成模块30可以包括：存储单元300，用于将待使用的图层信息和第二格式文件存储至与加载页面对应的预设存储区域；生成单元302，用于按照模板从预设存储区域提取待使用的图层信息和第二格式文件，生成网页。

上述本发明实施例序号仅仅为了描述，不代表实施例的优劣。

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

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

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

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

所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可为个人计算机、服务器或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、移动硬盘、磁碟或者光盘等各种可以存储程序代码的介质。

以上所述仅是本发明的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视为本发明的保护范围。

Claims (12)

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

从第一格式文件中获取配置信息，其中，所述第一格式文件为初始的图像编辑类文件；

根据所述配置信息确定对应的模板，其中，所述模板用于描述所述配置信息在网页上显示时的页面结构；

按照所述模板加载所述配置信息，生成所述网页。

2.根据权利要求1所述的方法，其特征在于，从所述第一格式文件中获取所述配置信息包括：

对所述第一格式文件中包含的每个元素进行预处理，生成待使用的图层信息，其中，所述预处理用于将每个元素对应的多个拼接图层简化为单一图层，所述单一图层用于表征对应元素的属性信息；

通过读取所述第一格式文件的文件头信息获取所述待使用的图层信息；

将所述待使用的图层信息存储至指定文件，并根据所述待使用的图层信息中的图片数据生成第二格式文件，其中，所述第二格式文件为待显示在所述网页上的图像类配置文件。

3.根据权利要求2所述的方法，其特征在于，在对所述第一格式文件中包含的每个元素进行预处理，生成所述待使用的图层信息之后，还包括：

为所述第一格式文件中的一个或多个元素设置图层标识，其中，所述图层标识用于调用预先封装的功能函数以执行对应的操作。

4.根据权利要求2所述的方法，其特征在于，在通过读取所述文件头信息获取所述待使用的图层信息之前，还包括：

采用预设方式读取所述文件头信息，其中，所述预设方式用于读取二进制数据内容。

5.根据权利要求2所述的方法，其特征在于，当所述第一格式文件中包含的元素为文本时，所述属性信息至少包括以下其中之一：文字大小、文字字体、文字颜色、文字对齐方式；当所述第一格式文件中包含的元素为图片时，所述属性信息至少包括以下其中之一：图片名称、图片高度、图片宽度、图片位置、图片透明度。

6.根据权利要求2所述的方法，其特征在于，按照所述模板加载所述配置信息，生成所述网页包括：

将所述待使用的图层信息和所述第二格式文件存储至与加载所述页面对应的预设存储区域；

按照所述模板从所述预设存储区域提取所述待使用的图层信息和所述第二格式文件，生成所述网页。

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

获取模块，用于从第一格式文件中获取配置信息，其中，所述第一格式文件为初始的图像编辑类文件；

确定模块，用于根据所述配置信息确定对应的模板，其中，所述模板用于描述所述配置信息在网页上显示时的页面结构；

生成模块，用于按照所述模板加载所述配置信息，生成所述网页。

8.根据权利要求7所述的装置，其特征在于，所述获取模块包括：

第一处理单元，用于对所述第一格式文件中包含的每个元素进行预处理，生成待使用的图层信息，其中，所述预处理用于将每个元素对应的多个拼接图层简化为单一图层，所述单一图层用于表征对应元素的属性信息；

获取单元，用于通过读取所述第一格式文件的文件头信息获取所述待使用的图层信息；

第二处理单元，用于将所述待使用的图层信息存储至指定文件，并根据所述待使用的图层信息中的图片数据生成第二格式文件，其中，所述第二格式文件为待显示在所述网页上的图像类配置文件。

9.根据权利要求8所述的装置，其特征在于，所述获取模块还包括：

设置单元，用于为所述第一格式文件中的一个或多个元素设置图层标识，其中，所述图层标识用于调用预先封装的功能函数以执行对应的操作。

10.根据权利要求8所述的装置，其特征在于，所述获取单元，用于采用预设方式读取所述文件头信息，其中，所述预设方式用于读取二进制数据内容。

11.根据权利要求8所述的装置，其特征在于，当所述第一格式文件中包含的元素为文本时，所述属性信息至少包括以下其中之一：文字大小、文字字体、文字颜色、文字对齐方式；当所述第一格式文件中包含的元素为图片时，所述属性信息至少包括以下其中之一：图片名称、图片高度、图片宽度、图片位置、图片透明度。

12.根据权利要求8所述的装置，其特征在于，所述生成模块包括：

存储单元，用于将所述待使用的图层信息和所述第二格式文件存储至与加载所述页面对应的预设存储区域；

生成单元，用于按照所述模板从所述预设存储区域提取所述待使用的图层信息和所述第二格式文件，生成所述网页。