[发明专利]网页的生成方法及装置

说明书

技术领域

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

背景技术

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

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

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

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

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

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

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

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

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

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

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

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

发明内容

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

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

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

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

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

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

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

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

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