CN114912052A - 一种网页处理方法和装置 - Google Patents

Abstract

本发明公开了一种网页处理方法和装置，涉及计算机技术领域。该方法的一具体实施方式包括：接收网页处理请求，根据网页处理请求，获取目标开发网页对应的目标设计稿，其中，目标开发网页为完成开发的网页；基于层叠式样表的定位属性和层级关系，将目标设计稿以图片标签的形式插入目标开发网页中；对比目标开发网页和插入目标开发网页中的目标设计稿，根据对比结果对目标开发网页进行调整。该实施方式得到的调整后的目标开发网页能够精准还原目标设计稿，减少了沟通成本和时间成本，提高网页开发效率。

Description

一种网页处理方法和装置

技术领域

本发明涉及计算机技术领域，尤其涉及一种网页处理方法和装置。

背景技术

网页开发中，如何精确还原设计稿的元素布局、元素的尺寸以及各元素之间的间距等，一直是开发人员的痛点。虽然设计人员交付的设计稿通常都会携带各种样式数据，但对于实际的网页开发，由于浏览器的实现不同，经常会有细微的差别。对于还原度要求比较高的网页，为了保证精确度，目前是开发人员完成开发后，再由设计人员进行网页还原度的检查，然后开发人员根据设计人员的反馈意见进行修正，接着设计人员再次进行复查。

显然，现有的网页开发后，需要设计人员和开发人员共同参与网页的检查，并需要两方的多次沟通，耗费了沟通成本和时间成本，导致网页的开发效率较低。

发明内容

有鉴于此，本发明实施例提供一种网页处理方法和装置，能够精准还原目标设计稿，减少了沟通成本和时间成本，提高网页开发效率。

为实现上述目的，根据本发明实施例的一个方面，提供了一种网页处理方法。

本发明实施例的一种网页处理方法，包括：接收网页处理请求，根据所述网页处理请求，获取目标开发网页对应的目标设计稿，其中，所述目标开发网页为完成开发的网页；基于层叠式样表的定位属性和层级关系，将所述目标设计稿以图片标签的形式插入所述目标开发网页中；对比所述目标开发网页和插入所述目标开发网页中的所述目标设计稿，根据对比结果对所述目标开发网页进行调整。

可选地，所述基于层叠式样表的定位属性和层级关系，将所述目标设计稿以图片标签的形式插入所述目标开发网页中，包括：基于层叠式样表的定位属性和层级关系，以图片标签的形式将所述目标设计稿定位至所述目标开发网页的最上层；将定位至所述目标开发网页最上层的所述目标设计稿设置为预设透明度，以使所述目标设计稿投射在所述目标开发网页上；将定位至所述目标开发网页最上层的所述目标设计稿的pointer-events属性设置为none。

可选地，所述方法还包括：在网页开发模式下，启动热更新服务，以便在监听到网页发生变化后重新编译网页。

可选地，所述对比所述目标开发网页和插入所述目标开发网页中的所述目标设计稿，根据对比结果对所述目标开发网页进行调整，包括：将所述目标开发网页的样式与所述目标设计稿的样式进行对比，其中，所述样式包括元素布局、元素的尺寸以及各元素之间的间距；利用所述热更新服务，根据所述对比结果对所述目标开发网页进行重新编译，以使重新编译后的所述目标开发网页与所述目标设计稿重合。

可选地，所述方法还包括：获取一个或多个设计稿，其中，所述一个或多个设计稿包括所述目标设计稿；针对所述一个或多个设计稿中的每个设计稿，获取所述设计稿对应的图片链接，并将所述图片链接存储至数据库中，以及将所述设计稿对应的缩略图存储至图库中。

可选地，所述获取所述设计稿对应的图片链接，包括：在所述设计稿为图片文件且所述设计稿的来源为本地文件夹的情况下，遍历所述设计稿所在的本地文件夹以获取到所述设计稿，将所述设计稿上传至图片服务器，然后接收所述图片服务器生成的所述设计稿对应的图片链接；在所述设计稿为图片文件且所述设计稿的来源为网络的情况下，获取所述设计稿对应的图片链接；在所述设计稿为网页的情况下，根据所述设计稿包含的网页元素确定所述设计稿对应的图片链接。

可选地，所述将所述设计稿对应的缩略图存储至图库中，包括：按照所述图库对应的缩略图形式，生成所述设计稿对应的缩略图，并将生成的缩略图存储至所述图库中。

可选地，所述根据所述网页处理请求，获取目标开发网页对应的目标设计稿，包括：根据所述网页处理请求获取所述目标开发网页，然后根据所述目标开发网页的网页标识确定所述目标设计稿；利用所述图库中存储的所述目标设计稿对应的缩略图和所述数据库中存储的所述目标设计稿对应的图片链接，获取所述目标设计稿。

为实现上述目的，根据本发明实施例的另一个方面，提供了一种网页处理装置。

本发明实施例的一种网页处理装置，包括：获取模块，用于接收网页处理请求，根据所述网页处理请求，获取目标开发网页对应的目标设计稿，其中，所述目标开发网页为完成开发的网页；插入模块，用于基于层叠式样表的定位属性和层级关系，将所述目标设计稿以图片标签的形式插入所述目标开发网页中；调整模块，用于对比所述目标开发网页和插入所述目标开发网页中的所述目标设计稿，根据对比结果对所述目标开发网页进行调整。

可选地，所述插入模块还用于：基于层叠式样表的定位属性和层级关系，以图片标签的形式将所述目标设计稿定位至所述目标开发网页的最上层；将定位至所述目标开发网页最上层的所述目标设计稿设置为预设透明度，以使所述目标设计稿投射在所述目标开发网页上；将定位至所述目标开发网页最上层的所述目标设计稿的pointer-events属性设置为none。

可选地，所述调整模块还用于：在网页开发模式下，启动热更新服务，以便在监听到网页发生变化后重新编译网页。

可选地，所述调整模块还用于：将所述目标开发网页的样式与所述目标设计稿的样式进行对比，其中，所述样式包括元素布局、元素的尺寸以及各元素之间的间距；利用所述热更新服务，根据所述对比结果对所述目标开发网页进行重新编译，以使重新编译后的所述目标开发网页与所述目标设计稿重合。

可选地，所述装置还包括存储模块，用于：获取一个或多个设计稿，其中，所述一个或多个设计稿包括所述目标设计稿；针对所述一个或多个设计稿中的每个设计稿，获取所述设计稿对应的图片链接，并将所述图片链接存储至数据库中，以及将所述设计稿对应的缩略图存储至图库中。

可选地，所述存储模块还用于：在所述设计稿为图片文件且所述设计稿的来源为本地文件夹的情况下，遍历所述设计稿所在的本地文件夹以获取到所述设计稿，将所述设计稿上传至图片服务器，然后接收所述图片服务器生成的所述设计稿对应的图片链接；在所述设计稿为图片文件且所述设计稿的来源为网络的情况下，获取所述设计稿对应的图片链接；在所述设计稿为网页的情况下，根据所述设计稿包含的网页元素确定所述设计稿对应的图片链接。

可选地，所述存储模块还用于：按照所述图库对应的缩略图形式，生成所述设计稿对应的缩略图，并将生成的缩略图存储至所述图库中。

可选地，所述获取模块还用于：根据所述网页处理请求获取所述目标开发网页，然后根据所述目标开发网页的网页标识确定所述目标设计稿；利用所述图库中存储的所述目标设计稿对应的缩略图和所述数据库中存储的所述目标设计稿对应的图片链接，获取所述目标设计稿。

为实现上述目的，根据本发明实施例的又一个方面，提供了一种电子设备。

本发明实施例的一种电子设备包括：一个或多个处理器；存储装置，用于存储一个或多个程序，当一个或多个程序被一个或多个处理器执行，使得一个或多个处理器实现本发明实施例的网页处理方法。

为实现上述目的，根据本发明实施例的还一个方面，提供了一种计算机可读介质。

本发明实施例的一种计算机可读介质，其上存储有计算机程序，程序被处理器执行时实现本发明实施例的网页处理方法。

上述发明中的一个实施例具有如下优点或有益效果：通过网页开发请求获取到目标开发网页和目标设计稿，然后基于CSS的定位属性和层级关系，将目标设计稿插入目标开发网页中，接着可以直观对比目标设计稿与目标开发网页的区别，利用对比结果对目标开发网页进行调整，得到的调整后的目标开发网页能够精准还原目标设计稿，解决了现有技术中开发人员与设计人员需要多次沟通的问题，减少了沟通成本和时间成本，提高网页开发效率。

上述的非惯用的可选方式所具有的进一步效果将在下文中结合具体实施方式加以说明。

附图说明

附图用于更好地理解本发明，不构成对本发明的不当限定。其中：

图1是根据本发明实施例的网页处理方法的主要步骤的示意图；

图2是本发明实施例的对设计稿进行处理的方法的主要步骤的示意图；

图3是本发明实施例的对设计稿进行处理的方法的主要流程的示意图；

图4是根据本发明实施例的网页处理方法的主要流程的示意图；

图5是根据本发明实施例的网页处理装置的主要模块的示意图；

图6是本发明实施例可以应用于其中的示例性系统架构图；

图7是适于用来实现本发明实施例的终端设备或服务器的计算机系统的结构示意图。

具体实施方式

以下结合附图对本发明的示范性实施例做出说明，其中包括本发明实施例的各种细节以助于理解，应当将它们认为仅仅是示范性的。因此，本领域普通技术人员应当认识到，可以对这里描述的实施例做出各种改变和修改，而不会背离本发明的范围和精神。同样，为了清楚和简明，以下的描述中省略了对公知功能和结构的描述。

图1是根据本发明实施例的网页处理方法的主要步骤的示意图。如图1所示，网页处理方法的主要步骤可以包括：

步骤S101，接收网页处理请求，根据网页处理请求，获取目标开发网页对应的目标设计稿；

步骤S102，基于层叠式样表的定位属性和层级关系，将目标设计稿以图片标签的形式插入目标开发网页中；

步骤S103，对比目标开发网页和插入目标开发网页中的目标设计稿，根据对比结果对目标开发网页进行调整。

在开发人员根据设计人员提交的设计稿完成网页开发后，由于浏览器实现的不同，完成开发的网页与设计稿有差别，因此需要对完成开发的网页进行调整。步骤S101中的网页处理请求是指对开发人员完成开发的网页进行处理的请求。在接收到网页处理请求后，可以获取目标开发网页对应的目标设计稿。其中，目标开发网页为完成开发的网页，也是指网页处理请求中的需要进行调整的网页。设计稿是指设计人员提交的网页设计稿件，目标设计稿是指目标开发网页对应的设计稿，也即，开发人员是根据目标设计稿开发目标开发网页的。

在步骤S102中，可以基于层叠式样表的定位属性和层级关系，将目标设计稿以图片标签的形式插入目标开发网页中，从而可以对比目标设计稿与目标开发网页的区别，也能够方便对目标开发网页进行调整。其中，层叠样式表(Cascading Style Sheets，缩写为CSS)是一种样式表语言，用来描述HTML(即超文本标记语言，译为HyperText MarkupLanguage，是标准通用标记语言下的一个应用)或XML(即可扩展标记语言，译为ExtensibleMarkup Language，是一种用于标记电子文件使其具有结构性的标记语言)文档的呈现。CSS是网页开发时用来编写页面元素布局和样式的通用标准，其描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。定位属性(position)是指层叠样式表提供的一种属性，用于设置页面元素的位置信息；层级关系用于在层叠样式表中，设置页面元素的上下层级。另外，插入网页页面的元素均需要由标签包裹，如果插入的是图片，则需要使用图片标签(<image>)包裹才能插入到网页页面中，所以需要将目标设计稿以图片标签(<image>)的形式插入目标开发网页中。

作为本发明的实施例，步骤S202的基于层叠式样表的定位属性和层级关系将目标设计稿以图片标签的形式插入目标开发网页中，可以包括：基于层叠式样表的定位属性和层级关系，以图片标签的形式将目标设计稿定位至目标开发网页的最上层；将定位至目标开发网页最上层的目标设计稿设置为预设透明度，以使目标设计稿投射在目标开发网页上；将定位至目标开发网页最上层的目标设计稿的pointer-events属性设置为none。其中，pointer-events为层叠样式表提供的一种属性，用于指定在什么情况下页面元素可以成为鼠标事件的对象。需要注意的是，鼠标事件可以但不限于是鼠标对页面的操作，也可以是手或触摸笔对页面的操作。

具体的，将目标设计稿以图片标签(<image>)的形式插入到目标开发网页中，利用CSS的定位属性和层级关系，将目标设计稿定位到目标开发网页的最上层，将该目标设计稿设置为预设的透明度，从而可以使目标设计稿可以像阴影一样投射在目标开发网页的最上层，能够直观的对比出目标开发网页和目标设计稿的区别，也能够方便对目标开发网页进行调整，以便调整后的目标开发网页能够与定位在该目标开发网页上层的目标设计稿重合。

此外，将目标设计稿插入目标开发网页后，为了避免目标设计稿影响目标开发网页的展示和交互，可以将目标设计稿的pointer-events属性设置为none。将目标设计稿定位到目标开发网页的最上层后，目标设计稿可以看作为页面的最上层元素，该元素默认的pointer-events属性为auto。此种情况下，鼠标事件能够被该目标设计稿元素捕获，但是由于目标设计稿位于目标开发网页的上层，而上层的元素会覆盖下层的元素，会造成目标开发网页捕获不到鼠标事件，影响目标开发网页的展示和交互。若将该目标设计稿元素的pinter-events属性设置为none，鼠标事件就不会被该目标设计稿元素捕获到，那么鼠标事件可以被下层的目标开发元素捕获到，以执行相应的代码操作，避免了对目标开发网页的展示和交互造成影响。

在将目标设计稿插入目标开发网页后，接着在步骤S103中，可以对比目标开发网页和插入目标开发网页中的目标设计稿，然后可以根据对比结果对目标开发网页进行调整。

作为本发明的实施例，网页处理方法还可以包括：在网页开发模式下，启动热更新服务，以便在监听到网页发生变化后重新编译网页。也即，在开发页面的时候，会启动一个热更新服务，用于实时监听网页内容的变化，然后重新编译并刷新页面。

因此，步骤S103的对比目标开发网页和插入目标开发网页中的目标设计稿，根据对比结果对目标开发网页进行调整，可以包括：将目标开发网页的样式与目标设计稿的样式进行对比，其中，样式包括元素布局、元素的尺寸以及各元素之间的间距；通过热更新服务，根据对比结果对目标开发网页进行重新编译，以使重新编译后的目标开发网页与目标设计稿重合。

现有技术是通过开发人员与设计人员多次沟通，对完成开发的网页进行检查修改，以得到精准还原设计稿的最终网页，耗费了沟通成本和时间成本，导致网页的开发效率较低。但是，本发明实施例提供的网页处理方法，通过网页开发请求获取到目标开发网页和目标设计稿，然后基于CSS的定位属性和层级关系，将目标设计稿插入目标开发网页中，接着可以直观对比目标设计稿与目标开发网页的区别，利用对比结果对目标开发网页进行调整，得到的调整后的目标开发网页能够精准还原目标设计稿，解决了现有技术中开发人员与设计人员需要多次沟通的问题，减少了沟通成本和时间成本，提高网页开发效率。

为了快速查找到目标开发网页对应的目标设计稿，本发明实施例的网页处理方法还可以包括：预先对目标设计稿进行处理，将处理后的目标设计稿进行存储。图2是本发明实施例的对设计稿进行处理的方法的主要步骤的示意图。如图2所示，对设计稿进行处理的方法的主要步骤可以包括步骤S201和步骤S202。

步骤S201：获取一个或多个设计稿。其中，一个或多个设计稿是指设计人员提交的设计稿，需要对设计人员提交的设计稿进行处理。其中，一个或多个设计稿包括目标开发网页对应的目标设计稿，也即，目标设计稿为设计人员已经提交的设计稿。

步骤S202：针对每个设计稿，获取设计稿对应的图片链接，并将图片链接存储至数据库中，以及将设计稿对应的缩略图存储至图库中。图片链接是指图片的链接或者是点击图片时所出现的链接，或指因特网收藏夹里的链接；设计稿对应的图片链接是指设计稿对应的图片的链接。缩略图可以代表将网页上或计算机中图片经压缩方式处理后得到的图片；设计稿对应的缩略图是指对设计稿对应的图片进行压缩处理后得到的图片。

作为本发明的实施例，获取设计稿对应的图片链接，可以包括：在设计稿为图片文件且设计稿的来源为本地文件夹的情况下，遍历设计稿所在的本地文件夹以获取到设计稿，将设计稿上传至图片服务器，然后接收图片服务器生成的设计稿对应的图片链接；在设计稿为图片文件且设计稿的来源为网络的情况下，获取设计稿对应的图片链接；在设计稿为网页的情况下，根据设计稿包含的网页元素确定设计稿对应的图片链接。

设计人员提交的设计稿可以是图片文件也可以是网页，因此可以采用不同的方法获取设计稿对应的图片链接。若设计人员提交的设计稿为图片文件，则判断设计稿的来源是否为本地文件夹；若是，则遍历该设计稿所在的本地文件夹以获取到该设计稿，然后将该设计稿上传到图片服务器，接着图片服务器可以对该设计稿进行处理以生成该设计稿对应的图片链接，图片服务器返回生成的图片链接，这样就可以获取到设计稿对应的图片链接；若否，则确定该设计稿的来源为网络，因此可以直接获取该设计稿对应的图片链接。若设计人员提交的设计稿为网页，则可以对该设计稿包含的网页元素进行分析，获得该设计稿对应的图片链接。在获得设计稿对应的图片链接后，可以将其存储至数据库中，以便于从数据库中查询到设计稿对应的图片链接，然后根据查询到的图片链接获取到设计稿。

此外，作为本发明的实施例，将设计稿对应的缩略图存储至图库中，可以包括：按照图库对应的缩略图形式，生成设计稿对应的缩略图，并将生成的缩略图存储至图库中。其中，缩略图形式可以包括缩略图的图片尺寸范围、缩略图的图片格式以及缩略图的图片像素范围。就是说，按照图库规定的缩略图的图片尺寸范围、缩略图的图片格式以及缩略图的图片像素范围，生成设计稿对应的缩略图，然后将该缩略图存储至图库中。此步骤的好处为，可以将设计稿以可视化、易操作的缩略图列表形式展示在数据库中，便于查找选择，给用户带来较好的使用体验。另外，在生成设计稿对应的缩略图之前，可以从数据库中获取到设计稿对应的图片链接，然后依据设计稿对应的图片链接获取到该设计稿；也可以在设计人员提交设计稿之后，直接获取到该设计稿。

图3是本发明实施例的对设计稿进行处理的方法的主要流程的示意图。如图3所示，对设计稿进行处理的方法的主要流程可以包括：

步骤S301，获取一个或多个设计稿，其中，一个或多个设计稿包括目标设计稿；

步骤S302，从获取的一个或多个设计稿中随机选择一个设计稿；

步骤S303，在该设计稿为图片文件且该设计稿的来源为本地文件夹的情况下，遍历该设计稿所在的本地文件夹以获取到该设计稿，将该设计稿上传至图片服务器，然后接收图片服务器生成的该设计稿对应的图片链接；

步骤S304，在该设计稿为图片文件且该设计稿的来源为网络的情况下，获取该设计稿对应的图片链接；

步骤S305，在该设计稿为网页的情况下，根据该设计稿包含的网页元素确定该设计稿对应的图片链接获取该设计稿对应的图片链接；

步骤S306，将该设计稿对应的图片链接存储至数据库中；

步骤S307，按照图库对应的缩略图形式，生成该设计稿对应的缩略图，并将生成的缩略图存储至图库中；

步骤S308，判断是否已经处理所有设计稿，若是，则执行步骤S309，若否，则执行步骤S302；

步骤S309，确定已经获取所有设计稿对应的图片链接和缩略图。

其中，在步骤S307之前，可以从数据库中获取到设计稿对应的图片链接，然后依据设计稿对应的图片链接获取到该设计稿，即需要在获取到图片链接后，执行步骤S307(如图3所示)；也可以在设计人员提交设计稿之后，直接获取到该设计稿，即不需要在获取到图片链接之后执行，此为对设计稿进行处理的另一实施例(图3未示出)。

通过上述描述的对设计稿处理的方法，可以将目标开发网页对应的图片链接存储至数据库，将目标开发网页对应的缩略图存储至图库中。因此，作为本发明的实施例，上述步骤S101根据网页处理请求，获取目标开发网页对应的目标设计稿，可以包括：根据网页处理请求获取目标开发网页，然后根据目标开发网页的网页标识确定目标设计稿；利用图库中存储的目标设计稿对应的缩略图和数据库中存储的目标设计稿对应的图片链接，获取目标设计稿。其中，目标开发网页的网页标识可以是目标开发网页的名称，这样可以直接确定目标设计稿，当然也可以是其他的能够确定目标设计稿的标识。

图4是根据本发明实施例的网页处理方法的主要流程的示意图。如图4所示，网页处理方法的主要流程可以包括：

步骤S401，接收网页处理请求，根据接收的网页处理请求获取目标开发网页，然后根据目标开发网页的网页标识确定目标设计稿，其中，目标开发网页为完成开发的网页；

步骤S402，利用图库中存储的目标设计稿对应的缩略图和数据库中存储的目标设计稿对应的图片链接，获取目标设计稿；

步骤S403，基于层叠式样表的定位属性和层级关系，以图片标签的形式将目标设计稿定位至目标开发网页的最上层；

步骤S404，将定位至目标开发网页最上层的目标设计稿设置为预设透明度，以使目标设计稿投射在目标开发网页上；

步骤S405，将定位至目标开发网页最上层的目标设计稿的pointer-events属性设置为none；

步骤S406，将目标开发网页的样式与目标设计稿的样式进行对比，其中，样式包括元素布局、元素的尺寸以及各元素之间的间距；

步骤S407，利用热更新服务，根据对比结果对目标开发网页进行重新编译，以使重新编译后的目标开发网页与目标设计稿重合。

其中，在步骤S402之前，按照上文描述的对设计稿的处理方法，将目标设计稿对应的缩略图存储至图库中，将目标设计稿对应的图片链接存储至数据库中。还有，步骤S404和步骤S405的执行顺序可以根据实际情况调整，如先执行步骤S405再执行步骤S404，又如同时执行步骤S404和步骤S405。以及，在步骤S407之前，需要启动热更新服务，以便可以在监听到目标开发网页发生变化后重新编译目标开发网页。

根据本发明实施例的网页处理技术，能够通过网页开发请求获取到目标开发网页和目标设计稿，然后基于CSS的定位属性和层级关系，将目标设计稿插入目标开发网页中，接着可以直观对比目标设计稿与目标开发网页的区别，利用对比结果对目标开发网页进行调整，得到的调整后的目标开发网页能够精准还原目标设计稿，解决了现有技术中开发人员与设计人员需要多次沟通的问题，减少了沟通成本和时间成本，提高网页开发效率。

图5是根据本发明实施例的网页处理装置的主要模块的示意图。如图5所示，网页处理装置500的主要模块可以包括：获取模块501、插入模块502、调整模块503和存储模块504。

其中，获取模块501可用于：接收网页处理请求，根据网页处理请求，获取目标开发网页对应的目标设计稿，其中，目标开发网页为完成开发的网页；插入模块502可用于：基于层叠式样表的定位属性和层级关系，将目标设计稿以图片标签的形式插入目标开发网页中；调整模块503可用于：对比目标开发网页和插入目标开发网页中的目标设计稿，根据对比结果对目标开发网页进行调整。

作为本发明的实施例，插入模块502还可用于：基于层叠式样表的定位属性和层级关系，以图片标签的形式将目标设计稿定位至目标开发网页的最上层；将定位至目标开发网页最上层的目标设计稿设置为预设透明度，以使目标设计稿投射在目标开发网页上；将定位至目标开发网页最上层的目标设计稿的pointer-events属性设置为none。

作为本发明的实施例，调整模块503还可用于：在网页开发模式下，启动热更新服务，以便在监听到网页发生变化后重新编译网页。

作为本发明的实施例，调整模块503还可用于：将目标开发网页的样式与目标设计稿的样式进行对比，其中，样式包括元素布局、元素的尺寸以及各元素之间的间距；利用热更新服务，根据对比结果对目标开发网页进行重新编译，以使重新编译后的目标开发网页与目标设计稿重合。

如图5所示，网页处理装置500还可以包括：存储模块504。该存储模块504可用于：获取一个或多个设计稿，其中，一个或多个设计稿包括目标设计稿；针对一个或多个设计稿中的每个设计稿，获取设计稿对应的图片链接，并将图片链接存储至数据库中，以及将设计稿对应的缩略图存储至图库中。

作为本发明的实施例，存储模块504还可用于：在设计稿为图片文件且设计稿的来源为本地文件夹的情况下，遍历设计稿所在的本地文件夹以获取到设计稿，将设计稿上传至图片服务器，然后接收图片服务器生成的设计稿对应的图片链接；在设计稿为图片文件且设计稿的来源为网络的情况下，获取设计稿对应的图片链接；在设计稿为网页的情况下，根据设计稿包含的网页元素确定设计稿对应的图片链接。

作为本发明的实施例，存储模块504还可用于：按照图库对应的缩略图形式，生成设计稿对应的缩略图，并将生成的缩略图存储至图库中。

作为本发明的实施例，获取模块501还可用于：根据网页处理请求获取目标开发网页，然后根据目标开发网页的网页标识确定目标设计稿；利用图库中存储的目标设计稿对应的缩略图和数据库中存储的目标设计稿对应的图片链接，获取目标设计稿。

本发明实施例的网页处理装置，能够通过网页开发请求获取到目标开发网页和目标设计稿，然后基于CSS的定位属性和层级关系，将目标设计稿插入目标开发网页中，接着可以直观对比目标设计稿与目标开发网页的区别，利用对比结果对目标开发网页进行调整，得到的调整后的目标开发网页能够精准还原目标设计稿，解决了现有技术中开发人员与设计人员需要多次沟通的问题，减少了沟通成本和时间成本，提高网页开发效率。

图6示出了可以应用本发明实施例的网页处理方法或网页处理装置的示例性系统架构600。

如图6所示，系统架构600可以包括终端设备601、602、603，网络604和服务器605。网络604用以在终端设备601、602、603和服务器605之间提供通信链路的介质。网络604可以包括各种连接类型，例如有线、无线通信链路或者光纤电缆等等。

用户可以使用终端设备601、602、603通过网络604与服务器605交互，以接收或发送消息等。终端设备601、602、603上可以安装有各种通讯客户端应用。终端设备601、602、603可以是具有显示屏并且支持网页浏览的各种电子设备，包括但不限于智能手机、平板电脑、膝上型便携计算机和台式计算机等等。

服务器605可以是提供各种服务的服务器，例如作为用户利用终端设备601、602、603进行网页处理的过程中，提供支持的后台管理服务器(仅为示例)；再例如，服务器605可以完成本发明实施例的网页处理。

需要说明的是，本发明实施例所提供的网页处理方法一般由服务器605执行，相应地，网页处理装置一般设置于服务器605中。

应该理解，图6中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要，可以具有任意数目的终端设备、网络和服务器。

下面参考图7，其示出了适于用来实现本发明实施例的终端设备的计算机系统700的结构示意图。图7示出的终端设备仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。

如图7所示，计算机系统700包括中央处理单元(CPU)701，其可以根据存储在只读存储器(ROM)702中的程序或者从存储部分708加载到随机访问存储器(RAM)703中的程序而执行各种适当的动作和处理。在RAM 703中，还存储有系统700操作所需的各种程序和数据。CPU 701、ROM 702以及RAM 703通过总线704彼此相连。输入/输出(I/O)接口705也连接至总线704。

以下部件连接至I/O接口705：包括键盘、鼠标等的输入部分706；包括诸如阴极射线管(CRT)、液晶显示器(LCD)等以及扬声器等的输出部分707；包括硬盘等的存储部分708；以及包括诸如LAN卡、调制解调器等的网络接口卡的通信部分709。通信部分709经由诸如因特网的网络执行通信处理。驱动器710也根据需要连接至I/O接口705。可拆卸介质711，诸如磁盘、光盘、磁光盘、半导体存储器等等，根据需要安装在驱动器710上，以便于从其上读出的计算机程序根据需要被安装入存储部分708。

特别地，根据本发明公开的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本发明公开的实施例包括一种计算机程序产品，其包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信部分709从网络上被下载和安装，和/或从可拆卸介质711被安装。在该计算机程序被中央处理单元(CPU)701执行时，执行本发明的系统中限定的上述功能。

需要说明的是，本发明所示的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本发明中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本发明中，计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：无线、电线、光缆、RF等等，或者上述的任意合适的组合。

附图中的流程图和框图，图示了按照本发明各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，上述模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图或流程图中的每个方框、以及框图或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

描述于本发明实施例中所涉及到的模块可以通过软件的方式实现，也可以通过硬件的方式来实现。所描述的模块也可以设置在处理器中，例如，可以描述为：一种处理器包括获取模块、插入模块、调度模块和存储模块。其中，这些模块的名称在某种情况下并不构成对该模块本身的限定，例如，获取模块还可以被描述为“接收网页处理请求，根据网页处理请求，获取目标开发网页对应的目标设计稿的模块”。

作为另一方面，本发明还提供了一种计算机可读介质，该计算机可读介质可以是上述实施例中描述的设备中所包含的；也可以是单独存在，而未装配入该设备中。上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被一个该设备执行时，使得该设备包括：接收网页处理请求，根据网页处理请求，获取目标开发网页对应的目标设计稿，其中，目标开发网页为完成开发的网页；基于层叠式样表的定位属性和层级关系，将目标设计稿以图片标签的形式插入目标开发网页中；对比目标开发网页和插入目标开发网页中的目标设计稿，根据对比结果对目标开发网页进行调整。

根据本发明实施例的技术方案，能够通过网页开发请求获取到目标开发网页和目标设计稿，然后基于CSS的定位属性和层级关系，将目标设计稿插入目标开发网页中，接着可以直观对比目标设计稿与目标开发网页的区别，利用对比结果对目标开发网页进行调整，得到的调整后的目标开发网页能够精准还原目标设计稿，解决了现有技术中开发人员与设计人员需要多次沟通的问题，减少了沟通成本和时间成本，提高网页开发效率。

上述具体实施方式，并不构成对本发明保护范围的限制。本领域技术人员应该明白的是，取决于设计要求和其他因素，可以发生各种各样的修改、组合、子组合和替代。任何在本发明的精神和原则之内所作的修改、等同替换和改进等，均应包含在本发明保护范围之内。

Claims (11)

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

接收网页处理请求，根据所述网页处理请求，获取目标开发网页对应的目标设计稿，其中，所述目标开发网页为完成开发的网页；

基于层叠式样表的定位属性和层级关系，将所述目标设计稿以图片标签的形式插入所述目标开发网页中；

对比所述目标开发网页和插入所述目标开发网页中的所述目标设计稿，根据对比结果对所述目标开发网页进行调整。

2.根据权利要求1所述的方法，其特征在于，所述基于层叠式样表的定位属性和层级关系，将所述目标设计稿以图片标签的形式插入所述目标开发网页中，包括：

基于层叠式样表的定位属性和层级关系，以图片标签的形式将所述目标设计稿定位至所述目标开发网页的最上层；

将定位至所述目标开发网页最上层的所述目标设计稿设置为预设透明度，以使所述目标设计稿投射在所述目标开发网页上；

将定位至所述目标开发网页最上层的所述目标设计稿的pointer-events属性设置为none。

3.根据权利要求1所述的方法，其特征在于，所述方法还包括：

在网页开发模式下，启动热更新服务，以便在监听到网页发生变化后重新编译网页。

4.根据权利要求3所述的方法，其特征在于，所述对比所述目标开发网页和插入所述目标开发网页中的所述目标设计稿，根据对比结果对所述目标开发网页进行调整，包括：

将所述目标开发网页的样式与所述目标设计稿的样式进行对比，其中，所述样式包括元素布局、元素的尺寸以及各元素之间的间距；

利用所述热更新服务，根据所述对比结果对所述目标开发网页进行重新编译，以使重新编译后的所述目标开发网页与所述目标设计稿重合。

5.根据权利要求1至4任一所述的方法，其特征在于，所述方法还包括：

获取一个或多个设计稿，其中，所述一个或多个设计稿包括所述目标设计稿；

针对所述一个或多个设计稿中的每个设计稿，获取所述设计稿对应的图片链接，并将所述图片链接存储至数据库中，以及将所述设计稿对应的缩略图存储至图库中。

6.根据权利要求5所述的方法，其特征在于，所述获取所述设计稿对应的图片链接，包括：

在所述设计稿为图片文件且所述设计稿的来源为本地文件夹的情况下，遍历所述设计稿所在的本地文件夹以获取到所述设计稿，将所述设计稿上传至图片服务器，然后接收所述图片服务器生成的所述设计稿对应的图片链接；

在所述设计稿为图片文件且所述设计稿的来源为网络的情况下，获取所述设计稿对应的图片链接；

在所述设计稿为网页的情况下，根据所述设计稿包含的网页元素确定所述设计稿对应的图片链接。

7.根据权利要求5所述的方法，其特征在于，所述将所述设计稿对应的缩略图存储至图库中，包括：

按照所述图库对应的缩略图形式，生成所述设计稿对应的缩略图，并将生成的缩略图存储至所述图库中。

8.根据权利要求5所述的方法，其特征在于，所述根据所述网页处理请求，获取目标开发网页对应的目标设计稿，包括：

根据所述网页处理请求获取所述目标开发网页，然后根据所述目标开发网页的网页标识确定所述目标设计稿；

利用所述图库中存储的所述目标设计稿对应的缩略图和所述数据库中存储的所述目标设计稿对应的图片链接，获取所述目标设计稿。

9.一种网页处理装置，其特征在于，包括：

获取模块，用于接收网页处理请求，根据所述网页处理请求，获取目标开发网页对应的目标设计稿，其中，所述目标开发网页为完成开发的网页；

插入模块，用于基于层叠式样表的定位属性和层级关系，将所述目标设计稿以图片标签的形式插入所述目标开发网页中；

调整模块，用于对比所述目标开发网页和插入所述目标开发网页中的所述目标设计稿，根据对比结果对所述目标开发网页进行调整。

10.一种电子设备，其特征在于，包括：

一个或多个处理器；

存储装置，用于存储一个或多个程序，

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如权利要求1-8中任一所述的方法。

11.一种计算机可读介质，其上存储有计算机程序，其特征在于，所述程序被处理器执行时实现如权利要求1-8中任一所述的方法。

Images