网页的生成方法及装置制造方法及图纸

技术编号:15542668 阅读:83 留言:0更新日期:2017-06-05 11:31
本发明专利技术公开了一种网页的生成方法及装置。其中,该方法包括:从第一格式文件中获取配置信息,其中,第一格式文件为初始的图像编辑类文件;根据配置信息确定对应的模板,其中,模板用于描述配置信息在网页上显示时的页面结构;按照模板加载配置信息,生成网页。本发明专利技术解决了相关技术中无法直接将图像编辑类文件转化为在浏览器中显示的网页的技术问题。

Method and device for generating web pages

The invention discloses a method and a device for generating web pages. Among them, the method includes: obtaining configuration information from the first file format in the first format as the initial image editing files; according to the corresponding template, the template is used to describe the configuration information, page structure configuration information displayed on the page when the template is loaded; according to the configuration information to generate Web pages. The invention solves the technical problem that the image editing class file can not be directly transformed into the webpage displayed in the browser in the relevant technology.

【技术实现步骤摘要】
网页的生成方法及装置
本专利技术涉及互联网领域,具体而言,涉及一种网页的生成方法及装置。
技术介绍
PSD是Adobe公司的图形设计软件Photoshop的专用格式。PSD文件可以存储成RGB或CMYK格式,其不仅能够自定义颜色数并加以存储,还可以保存Photoshop的图层、通道、路径等信息,是目前唯一能够支持全部图像色彩模式的格式。Node.js是一个基于ChromeJavaScript运行时建立的平台,用于搭建响应速度快、易于扩展的网络应用。Node.js使用事件驱动,非阻塞I/O模型而得以轻量和高效,非常适合在分布式设备上运行数据密集型的实时应用。在网页开发过程中,需要根据设计师提供的PSD设计稿来完成素材的提取工作,然后才能开始html、css、js等代码的编写,整个流程需要掌握很多的技术要点,更不用说项目开发中每一个细节的沟通问题,所以每一个拥有丰富经验的前端工程师都是各个互联网公司非常珍惜的人才。那么是否可能颠覆这种传统的项目开发流程,将网页开发变得更为简单。考虑到项目最终的效果是由设计师和产品决定的,所以能否让网页开发脱离编码范畴,以便直接让设计师和产品经理产出网页。相关技术中,如果希望开发一个完整的网页,则需要经历以下处理步骤:第一步、产品经理提出开发需求并绘制项目原型;第二步、设计师根据项目原型设计出指定风格的网页效果图;第三步、前端开发工程师根据设计师设计出的网页效果图完成编码工作,并与设计师反复确认设计效果,直至将最终呈现的网页效果发布到线上。然而,上述操作流程存在如下缺陷:为了能够将最终呈现的网页效果发布到线上,首先必须由前端工程师来完成代码编写工作,该工作复杂且繁重,同时又需要前端工程师实时地、反复地与设计师和产品经理沟通研发需求,其可以包括但不限于:在网页中需要呈现的动画效果样式、需要呈现的点击事件样式。这些主观性的成本,在较小的研发项目中,浪费尤为明显。以游戏类门户网站(参考网址:http://game.XXX.com/)为例,在开启官方网站首页后,可以发现伴随着鼠标移动到页面的不同位置,会产生多种不同的动态效果。而这些动态效果在PSD设计稿内是无法存在的,其需要前端工程师面对面的与设计师进行沟通,每一个动画的播放效果、播放持续时间以及播放速度都是需要与设计师进行详细地沟通并通过实时调整后得到的。针对上述的问题,目前尚未提出有效的解决方案。
技术实现思路
本专利技术实施例提供了一种网页的生成方法及装置,以至少解决相关技术中无法直接将图像编辑类文件转化为在浏览器中显示的网页的技术问题。根据本专利技术实施例的一个方面,提供了一种网页的生成方法,包括:从第一格式文件中获取配置信息,其中,第一格式文件为初始的图像编辑类文件;根据配置信息确定对应的模板,其中,模板用于描述配置信息在网页上显示时的页面结构;按照模板加载配置信息,生成网页。可选地,从第一格式文件中获取配置信息包括:对第一格式文件中包含的每个元素进行预处理,生成待使用的图层信息,其中,预处理用于将每个元素对应的多个拼接图层简化为单一图层,单一图层用于表征对应元素的属性信息;通过读取第一格式文件的文件头信息获取待使用的图层信息;将待使用的图层信息存储至指定文件,并根据待使用的图层信息中的图片数据生成第二格式文件,其中,第二格式文件为待显示在网页上的图像类配置文件。可选地,在对第一格式文件中包含的每个元素进行预处理,生成待使用的图层信息之后,还包括:为第一格式文件中的一个或多个元素设置图层标识,其中,图层标识用于调用预先封装的功能函数以执行对应的操作。可选地,在通过读取文件头信息获取待使用的图层信息之前,还包括:采用预设方式读取文件头信息,其中,预设方式用于读取二进制数据内容。可选地,当第一格式文件中包含的元素为文本时,属性信息至少包括以下其中之一:文字大小、文字字体、文字颜色、文字对齐方式;当第一格式文件中包含的元素为图片时,属性信息至少包括以下其中之一:图片名称、图片高度、图片宽度、图片位置、图片透明度。可选地,按照模板加载配置信息,生成网页包括:将待使用的图层信息和第二格式文件存储至与加载页面对应的预设存储区域;按照模板从预设存储区域提取待使用的图层信息和第二格式文件,生成网页。根据本专利技术实施例的另一方面,还提供了一种网页的生成装置,包括:获取模块,用于从第一格式文件中获取配置信息,其中,第一格式文件为初始的图像编辑类文件;确定模块,用于根据配置信息确定对应的模板,其中,模板用于描述配置信息在网页上显示时的页面结构;生成模块,用于按照模板加载配置信息,生成网页。可选地,获取模块包括:第一处理单元,用于对第一格式文件中包含的每个元素进行预处理,生成待使用的图层信息,其中,预处理用于将每个元素对应的多个拼接图层简化为单一图层,单一图层用于表征对应元素的属性信息;获取单元,用于通过读取第一格式文件的文件头信息获取待使用的图层信息;第二处理单元,用于将待使用的图层信息存储至指定文件,并根据待使用的图层信息中的图片数据生成第二格式文件,其中,第二格式文件为待显示在网页上的图像类配置文件。可选地,获取模块还包括:设置单元,用于为第一格式文件中的一个或多个元素设置图层标识,其中,图层标识用于调用预先封装的功能函数以执行对应的操作。可选地,获取单元,用于采用预设方式读取文件头信息,其中,预设方式用于读取二进制数据内容。可选地,当第一格式文件中包含的元素为文本时,属性信息至少包括以下其中之一:文字大小、文字字体、文字颜色、文字对齐方式;当第一格式文件中包含的元素为图片时,属性信息至少包括以下其中之一:图片名称、图片高度、图片宽度、图片位置、图片透明度。可选地,生成模块包括:存储单元,用于将待使用的图层信息和第二格式文件存储至与加载页面对应的预设存储区域;生成单元,用于按照模板从预设存储区域提取待使用的图层信息和第二格式文件,生成网页。在本专利技术实施例中,采用从初始的图像编辑类文件获取配置信息并根据配置信息确定用于描述配置信息在网页上显示时的页面结构的模板的方式,通过按照模板加载配置信息,生成网页,达到了直接将图像编辑类文件转化为网页的目的,从而实现了降低网页生成过程的操作复杂度和人力资本,加快网页生成进度的技术效果,进而解决了相关技术中无法直接将图像编辑类文件转化为在浏览器中显示的网页的技术问题。附图说明此处所说明的附图用来提供对本专利技术的进一步理解,构成本申请的一部分,本专利技术的示意性实施例及其说明用于解释本专利技术,并不构成对本专利技术的不当限定。在附图中:图1是根据本专利技术实施例的网页的生成方法的流程图;图2是根据本专利技术实施例的网页的生成装置的结构框图;图3是根据本专利技术优选实施例的网页的生成装置的结构框图。具体实施方式为了使本
的人员更好地理解本专利技术方案,下面将结合本专利技术实施例中的附图,对本专利技术实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例仅仅是本专利技术一部分的实施例,而不是全部的实施例。基于本专利技术中的实施例,本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例,都应当属于本专利技术保护的范围。需要说明的是,本专利技术的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象,而不必用于描述特定的顺序或本文档来自技高网
...
网页的生成方法及装置

【技术保护点】
一种网页的生成方法,其特征在于,包括:从第一格式文件中获取配置信息,其中,所述第一格式文件为初始的图像编辑类文件;根据所述配置信息确定对应的模板,其中,所述模板用于描述所述配置信息在网页上显示时的页面结构;按照所述模板加载所述配置信息,生成所述网页。

【技术特征摘要】
1.一种网页的生成方法,其特征在于,包括:从第一格式文件中获取配置信息,其中,所述第一格式文件为初始的图像编辑类文件;根据所述配置信息确定对应的模板,其中,所述模板用于描述所述配置信息在网页上显示时的页面结构;按照所述模板加载所述配置信息,生成所述网页。2.根据权利要求1所述的方法,其特征在于,从所述第一格式文件中获取所述配置信息包括:对所述第一格式文件中包含的每个元素进行预处理,生成待使用的图层信息,其中,所述预处理用于将每个元素对应的多个拼接图层简化为单一图层,所述单一图层用于表征对应元素的属性信息;通过读取所述第一格式文件的文件头信息获取所述待使用的图层信息;将所述待使用的图层信息存储至指定文件,并根据所述待使用的图层信息中的图片数据生成第二格式文件,其中,所述第二格式文件为待显示在所述网页上的图像类配置文件。3.根据权利要求2所述的方法,其特征在于,在对所述第一格式文件中包含的每个元素进行预处理,生成所述待使用的图层信息之后,还包括:为所述第一格式文件中的一个或多个元素设置图层标识,其中,所述图层标识用于调用预先封装的功能函数以执行对应的操作。4.根据权利要求2所述的方法,其特征在于,在通过读取所述文件头信息获取所述待使用的图层信息之前,还包括:采用预设方式读取所述文件头信息,其中,所述预设方式用于读取二进制数据内容。5.根据权利要求2所述的方法,其特征在于,当所述第一格式文件中包含的元素为文本时,所述属性信息至少包括以下其中之一:文字大小、文字字体、文字颜色、文字对齐方式;当所述第一格式文件中包含的元素为图片时,所述属性信息至少包括以下其中之一:图片名称、图片高度、图片宽度、图片位置、图片透明度。6.根据权利要求2所述的方法,其特征在于,按照所述模板加载所述配置信息,生成所述网页包括:将所述待使用的图层信息和所述第二格式文件存储至与加载所述页面对应的预设存储区域;按照所述模板从所述预设存储区域提取所述待使用的图层信息和所述第二格式文件,生...

【专利技术属性】
技术研发人员:张宇敏
申请(专利权)人:网易杭州网络有限公司
类型:发明
国别省市:浙江,33

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1