CN106445520A - 一种可视化专题页面制作方法及装置 - Google Patents

Abstract

本发明提供一种可视化专题页面制作方法及装置，该方法包括：进入制作页面的可视化操作界面；根据专题的需求选择布局组件，通过可视化界面展现布局组件的页面框架；根据不同专题需要，在创建好的布局组件中拖拽嵌套功能组件与交互组件，并在组件的设置中进行选择，定制组件的样式；在创建好的各种组件中编辑内容，以进行专题页面制作；通过页面兼容和页面自适应将专题页面的图形界面针对不同的终端进行适配处理，保存生成的兼容性和自适应的代码文件；将代码文件传输到服务器上进行上线发布，以通过页面兼容和页面自适应在不同的终端上显示。其可以从减少沟通成本和避免重复代码编写两方面来提高效率，极大降低专题页面制作难度、提高制作速度。

Description

一种可视化专题页面制作方法及装置

技术领域

本发明涉及网络技术领域，尤其涉及一种可视化专题页面制作方法及装置。

背景技术

专题页面制作主要依赖web技术。通常情况下，一个专题页面的制作包括策划人员构思和技术人员实现两大过程，首先由策划人员根据具体专题的特点进行构思，再通过文档或讨论的方式告知技术人员，最终由技术人员对该专题的PC端、PAD端和移动端页面进行分别制作。

随着互联网的不断发展，用户对于专题的时效性要求不断提高，目前的专题页面制作方式由于存在沟通成本和三端分别开发的问题，很难满足用户需求，比如在突发事件发生时，无法保证事件发生专题同步上线。

但一般专题页面的组成模块大致相似，只是不同专题的模块组合方式及突出的重点不同，且同一专题的PC端、PAD端、手机端页面的内容也是一致的，区别在于布局有所变化。

由此可见，对于不同专题和同一专题的不同展示终端来说，需要对相同的模块进行重复制作，因此如果按照上述方式，将极大地降低专题页面的制作效率，并产生大量的重复劳动浪费时间。

发明内容

本发明实施例提供一种可视化专题页面制作方法及装置，以让没有web开发能力的策划人员，直接通过***提供的可视化操作界面，使用拖拽的方式，快速制作出能够同时兼容PC端、PAD端和手机端的专题页面，能够避免沟通成本和重复制作，提高效率。

一方面，本发明实施例提供了一种可视化专题页面制作方法，所述方法包括：

进入制作页面的可视化操作界面；

根据专题的需求选择布局组件，将选择的布局组件拖拽进可视化操作界面的预览区域内，以通过可视化界面展现布局组件的页面框架；

根据不同专题需要，在创建好的布局组件中拖拽嵌套功能组件与交互组件，并在组件的设置中进行选择，定制组件的样式；

在创建好的各种组件中编辑内容，以进行专题页面制作；

通过页面兼容和页面自适应将专题页面的图形界面针对不同的终端进行适配处理，保存生成的兼容性和自适应的代码文件；

将代码文件传输到服务器上进行上线发布，以通过页面兼容和页面自适应在不同的终端上显示。

另一方面，本发明实施例提供了一种可视化专题页面制作装置，所述装置包括：

可视化操作模块，用于进入制作页面的可视化操作界面；

页面搭建模块，用于根据专题的需求选择布局组件，将选择的布局组件拖拽进可视化操作界面的预览区域内，以通过可视化界面展现布局组件的页面框架；根据不同专题需要，在创建好的布局组件中拖拽嵌套功能组件与交互组件，并在组件的设置中进行选择，定制组件的样式；在创建好的各种组件中编辑内容，以进行专题页面制作；

代码预编译管理模块，用于通过页面兼容和页面自适应将专题页面的图形界面针对不同的终端进行适配处理，保存生成的兼容性和自适应的代码文件；

专题页面管理模块，用于将代码文件传输到服务器上进行上线发布，以通过页面兼容和页面自适应在不同的终端上显示。

上述技术方案具有如下有益效果：与现有制作专题的方法相比，本发明提出的解决方案，能够有效规避策划人员和技术人员的沟通成本，使专题页面制作从构思到落地一步到位，且将原来一个专题页面不同终端分别制作的情况改变，可以一次性制作成跨终端的专题页面，减少重复劳动，所以本发明可以从减少沟通成本和避免重复代码编写两方面来提高效率，极大降低专题页面制作难度、提高制作速度。

附图说明

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

图1为本发明实施例一种可视化专题页面制作方法流程图；

图2为本发明实施例一种可视化专题页面制作装置结构示意图；

图3为本发明应用实例一种可视化专题页面制作装置结构示意图；

图4为本发明应用实例一种可视化专题页面制作方法流程图。

具体实施方式

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

如图1所示，为本发明实施例一种可视化专题页面制作方法流程图，所述方法包括：

101、进入制作页面的可视化操作界面；

102、根据专题的需求选择布局组件，将选择的布局组件拖拽进可视化操作界面的预览区域内，以通过可视化界面展现布局组件的页面框架；

103、根据不同专题需要，在创建好的布局组件中拖拽嵌套功能组件与交互组件，并在组件的设置中进行选择，定制组件的样式；

104、在创建好的各种组件中编辑内容，以进行专题页面制作；

105、通过页面兼容和页面自适应将专题页面的图形界面针对不同的终端进行适配处理，保存生成的兼容性和自适应的代码文件；

106、将代码文件传输到服务器上进行上线发布，以通过页面兼容和页面自适应在不同的终端上显示。

优选地，根据专题的需求选择布局组件时，将在左侧常用组件中选择的布局组件拖拽进可视化操作界面的右侧预览区域内，以通过可视化界面展现布局组件的页面框架。

优选地，所述常用组件包括：布局组件、功能组件、交互组件。

优选地，所述方法还包括：专题页面制作完成后，将左侧常用组件隐藏，从而对制作的专题页面进行预览。

优选地，所述通过页面兼容和页面自适应将专题页面的图形界面针对不同的终端进行适配处理，保存生成的兼容性和自适应的代码文件，包括：通过个人计算机PC端、平板电脑PAD端、手机端三种页面兼容和页面自适应将专题页面的图形界面针对不同的终端进行适配处理，保存生成的兼容性和自适应的代码文件。

如图2所示，为本发明实施例一种可视化专题页面制作装置结构示意图，所述装置包括：

可视化操作模块21，用于进入制作页面的可视化操作界面；

页面搭建模块22，用于根据专题的需求选择布局组件，将选择的布局组件拖拽进可视化操作界面的预览区域内，以通过可视化界面展现布局组件的页面框架；根据不同专题需要，在创建好的布局组件中拖拽嵌套功能组件与交互组件，并在组件的设置中进行选择，定制组件的样式；在创建好的各种组件中编辑内容，以进行专题页面制作；

代码预编译管理模块23，用于通过页面兼容和页面自适应将专题页面的图形界面针对不同的终端进行适配处理，保存生成的兼容性和自适应的代码文件；

专题页面管理模块24，用于将代码文件传输到服务器上进行上线发布，以通过页面兼容和页面自适应在不同的终端上显示。

优选地，所述页面搭建模块22，具体用于根据专题的需求选择布局组件时，将在左侧常用组件中选择的布局组件拖拽进可视化操作界面的右侧预览区域内，以通过可视化界面展现布局组件的页面框架。

优选地，所述常用组件包括：布局组件、功能组件、交互组件。

优选地，所述专题页面管理模块24，具体用于专题页面制作完成后，将左侧常用组件隐藏，从而对制作的专题页面进行预览。

优选地，所述代码预编译管理模块23，具体用于通过个人计算机PC端、平板电脑PAD端、手机端三种页面兼容和页面自适应将专题页面的图形界面针对不同的终端进行适配处理，保存生成的兼容性和自适应的代码文件。

本发明实施例具体实现过程如下：

(1)可视化操作模块，用户进入提供的专题制作页面，在页面的左侧有***提供给用户的制作专题页面的常用组件，右侧为制作专题页面的效果预览区域；

(2)专题页面制作模块，该模块由布局组件库、功能组件库、交互组件库和展示数据管理组成，策划人员根据构思首先通过布局组件库在右侧搭建出专题页面整体布局结构，然后通过功能组件库和交互组件库将布局填充，形成模块清晰的专题页面，最后，通过展示数据管理对专题页面需要展示的内容进行编辑，完成整个专题页面的可视化搭建；

(3)专题页面制作模块中，各组件间可以自由排列与嵌套，从而可以更加灵活的搭建出不同的专题页面；

(4)专题页面制作完成后，用户可以通过点击预览按钮将左侧模块列表隐藏，由此可以查看专题页面的最终展示效果，并可点击编辑按钮返回做修改，用户还可以对组件开发的参数进行配置，所有配置均提供可视化操作界面，以此可以实现对专题页面的样式及交互的自定义设置；

(5)页面自适应模块，在专题页面制作满意之后，用户点击保存按钮即可将可视化界面自动转为代码，在此过程中，本发明使用了弹性布局技术，对PC端、PAD端、手机端等不同尺寸的终端进行检测，根据检测，将生成自动适配不同终端的自适应代码，从而可以避免针对不同终端的单独制作；

(6)页面兼容模块，web技术依赖浏览器进行解析，目前各浏览器解析标准不一致，导致同一专题页面容易在不同厂商浏览器上出现不同效果，甚至无法展示，影响用户体验，针对于此，本发明增加了页面兼容模块，通过兼容代码包提前将兼容问题解决，能确保专题页面在不同浏览器上呈现一致效果；

(7)代码预编译模块，由于web技术正在迅速发展，各浏览器厂商的解析标准也是各自维护，为了能够使本套***随时适应各浏览器厂商的解析标准升级，本***的兼容性代码包使用了预编译语言进行模块化管理，可确保快速调整。

本发明实施例是通过提供一个可视化的操作界面，让没有web开发能力的用户能够通过拖拽的方式根据构思搭建出专题页面，然后调用***内部代码包，自动将搭建出的专题页面的图形界面转化为可以自适应不同终端的代码文件，从而实现无需写代码即可制作完成专题页面。

针对现有的专题页面制作方法，本发明提出一种可视化制作专题页面的方法，通过可视化的图形操作界面，无web开发能力的用户通过拖拽的方式即可制作专题页面，且制作的专题页面可以自适应不同类型的终端，能够明显提高页面制作效率，节省制作时间。为了能够使本发明的技术方案更加清楚明白，以下参照附图并举实施例，对本发明所述方案进一步详细说明。

如图3所示，为本发明应用实例一种可视化专题页面制作装置结构示意图，如图4所示，为本发明应用实例一种可视化专题页面制作方法流程图，其具体针对某一专题来说：

步骤一：产生专题页面制作需求后，用户进入***提供的制作页面操作界面，此界面属于可视化操作模块，通过该界面可以对页面制作模块的组件进行拖拽等操作；

步骤二：用户根据专题的需求选择布局组件，拖拽进右侧预览区域内，此时页面的框架就可以通过可视化界面展现出来了；

步骤三：根据不同专题需要，在创建好的布局组件中拖拽嵌套功能与交互组件进去，并在组件设置中进行选择，定制组件的样式；

步骤四：用户在创建好的各种组件中编辑内容，可以是新闻稿、图片或者其他内容，此时专题页面的最终上线效果就可以展示用户面前；

步骤五：此时用户点击保存按钮，***自动通过页面兼容模块和页面自适应模块将专题页面的图形界面处理完毕，并自动生成了兼容性和自适应的代码文件；

步骤六：用户将代码文件传导到服务器上，该专题页面则成功上线，可以在不同的终端上正常显示。

与现有制作专题的方法相比，本发明提出的解决方案，能够有效规避策划人员和技术人员的沟通成本，使专题页面制作从构思到落地一步到位，且将原来一个专题页面不同终端分别制作的情况改变，可以一次性制作成跨终端的专题页面，减少重复劳动，所以本发明可以从减少沟通成本和避免重复代码编写两方面来提高效率，极大降低专题页面制作难度、提高制作速度。

应该明白，公开的过程中的步骤的特定顺序或层次是示例性方法的实例。基于设计偏好，应该理解，过程中的步骤的特定顺序或层次可以在不脱离本公开的保护范围的情况下得到重新安排。所附的方法权利要求以示例性的顺序给出了各种步骤的要素，并且不是要限于所述的特定顺序或层次。

在上述的详细描述中，各种特征一起组合在单个的实施方案中，以简化本公开。不应该将这种公开方法解释为反映了这样的意图，即，所要求保护的主题的实施方案需要比清楚地在每个权利要求中所陈述的特征更多的特征。相反，如所附的权利要求书所反映的那样，本发明处于比所公开的单个实施方案的全部特征少的状态。因此，所附的权利要求书特此清楚地被并入详细描述中，其中每项权利要求独自作为本发明单独的优选实施方案。

为使本领域内的任何技术人员能够实现或者使用本发明，上面对所公开实施例进行了描述。对于本领域技术人员来说；这些实施例的各种修改方式都是显而易见的，并且本文定义的一般原理也可以在不脱离本公开的精神和保护范围的基础上适用于其它实施例。因此，本公开并不限于本文给出的实施例，而是与本申请公开的原理和新颖性特征的最广范围相一致。

上文的描述包括一个或多个实施例的举例。当然，为了描述上述实施例而描述部件或方法的所有可能的结合是不可能的，但是本领域普通技术人员应该认识到，各个实施例可以做进一步的组合和排列。因此，本文中描述的实施例旨在涵盖落入所附权利要求书的保护范围内的所有这样的改变、修改和变型。此外，就说明书或权利要求书中使用的术语“包含”，该词的涵盖方式类似于术语“包括”，就如同“包括，”在权利要求中用作衔接词所解释的那样。此外，使用在权利要求书的说明书中的任何一个术语“或者”是要表示“非排它性的或者”。

本领域技术人员还可以了解到本发明实施例列出的各种说明性逻辑块(illustrative logical block)，单元，和步骤可以通过电子硬件、电脑软件，或两者的结合进行实现。为清楚展示硬件和软件的可替换性(interchangeability)，上述的各种说明性部件(illustrative components)，单元和步骤已经通用地描述了它们的功能。这样的功能是通过硬件还是软件来实现取决于特定的应用和整个***的设计要求。本领域技术人员可以对于每种特定的应用，可以使用各种方法实现所述的功能，但这种实现不应被理解为超出本发明实施例保护的范围。

本发明实施例中所描述的各种说明性的逻辑块，或单元都可以通过通用处理器，数字信号处理器，专用集成电路(ASIC)，现场可编程门阵列或其它可编程逻辑装置，离散门或晶体管逻辑，离散硬件部件，或上述任何组合的设计来实现或操作所描述的功能。通用处理器可以为微处理器，可选地，该通用处理器也可以为任何传统的处理器、控制器、微控制器或状态机。处理器也可以通过计算装置的组合来实现，例如数字信号处理器和微处理器，多个微处理器，一个或多个微处理器联合一个数字信号处理器核，或任何其它类似的配置来实现。

本发明实施例中所描述的方法或算法的步骤可以直接嵌入硬件、处理器执行的软件模块、或者这两者的结合。软件模块可以存储于RAM存储器、闪存、ROM存储器、EPROM存储器、EEPROM存储器、寄存器、硬盘、可移动磁盘、CD-ROM或本领域中其它任意形式的存储媒介中。示例性地，存储媒介可以与处理器连接，以使得处理器可以从存储媒介中读取信息，并可以向存储媒介存写信息。可选地，存储媒介还可以集成到处理器中。处理器和存储媒介可以设置于ASIC中，ASIC可以设置于用户终端中。可选地，处理器和存储媒介也可以设置于用户终端中的不同的部件中。

在一个或多个示例性的设计中，本发明实施例所描述的上述功能可以在硬件、软件、固件或这三者的任意组合来实现。如果在软件中实现，这些功能可以存储与电脑可读的媒介上，或以一个或多个指令或代码形式传输于电脑可读的媒介上。电脑可读媒介包括电脑存储媒介和便于使得让电脑程序从一个地方转移到其它地方的通信媒介。存储媒介可以是任何通用或特殊电脑可以接入访问的可用媒体。例如，这样的电脑可读媒体可以包括但不限于RAM、ROM、EEPROM、CD-ROM或其它光盘存储、磁盘存储或其它磁性存储装置，或其它任何可以用于承载或存储以指令或数据结构和其它可被通用或特殊电脑、或通用或特殊处理器读取形式的程序代码的媒介。此外，任何连接都可以被适当地定义为电脑可读媒介，例如，如果软件是从一个网站站点、服务器或其它远程资源通过一个同轴电缆、光纤电缆、双绞线、数字用户线(DSL)或以例如红外、无线和微波等无线方式传输的也被包含在所定义的电脑可读媒介中。所述的碟片(disk)和磁盘(disc)包括压缩磁盘、镭射盘、光盘、DVD、软盘和蓝光光盘，磁盘通常以磁性复制数据，而碟片通常以激光进行光学复制数据。上述的组合也可以包含在电脑可读媒介中。

以上所述的具体实施方式，对本发明的目的、技术方案和有益效果进行了进一步详细说明，所应理解的是，以上所述仅为本发明的具体实施方式而已，并不用于限定本发明的保护范围，凡在本发明的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (10)

1.一种可视化专题页面制作方法，其特征在于，所述方法包括：

进入制作页面的可视化操作界面；

根据专题的需求选择布局组件，将选择的布局组件拖拽进可视化操作界面的预览区域内，以通过可视化界面展现布局组件的页面框架；

根据不同专题需要，在创建好的布局组件中拖拽嵌套功能组件与交互组件，并在组件的设置中进行选择，定制组件的样式；

在创建好的各种组件中编辑内容，以进行专题页面制作；

通过页面兼容和页面自适应将专题页面的图形界面针对不同的终端进行适配处理，保存生成的兼容性和自适应的代码文件；

将代码文件传输到服务器上进行上线发布，以通过页面兼容和页面自适应在不同的终端上显示。

2.如权利要求1所述可视化专题页面制作方法，其特征在于，

根据专题的需求选择布局组件时，将在左侧常用组件中选择的布局组件拖拽进可视化操作界面的右侧预览区域内，以通过可视化界面展现布局组件的页面框架。

3.如权利要求2所述可视化专题页面制作方法，其特征在于，所述常用组件包括：布局组件、功能组件、交互组件。

4.如权利要求2所述可视化专题页面制作方法，其特征在于，所述方法还包括：

专题页面制作完成后，将左侧常用组件隐藏，从而对制作的专题页面进行预览。

5.如权利要求1所述可视化专题页面制作方法，其特征在于，所述通过页面兼容和页面自适应将专题页面的图形界面针对不同的终端进行适配处理，保存生成的兼容性和自适应的代码文件，包括：

通过个人计算机PC端、平板电脑PAD端、手机端三种页面兼容和页面自适应将专题页面的图形界面针对不同的终端进行适配处理，保存生成的兼容性和自适应的代码文件。

6.一种可视化专题页面制作装置，其特征在于，所述装置包括：

可视化操作模块，用于进入制作页面的可视化操作界面；

页面搭建模块，用于根据专题的需求选择布局组件，将选择的布局组件拖拽进可视化操作界面的预览区域内，以通过可视化界面展现布局组件的页面框架；根据不同专题需要，在创建好的布局组件中拖拽嵌套功能组件与交互组件，并在组件的设置中进行选择，定制组件的样式；在创建好的各种组件中编辑内容，以进行专题页面制作；

代码预编译管理模块，用于通过页面兼容和页面自适应将专题页面的图形界面针对不同的终端进行适配处理，保存生成的兼容性和自适应的代码文件；

专题页面管理模块，用于将代码文件传输到服务器上进行上线发布，以通过页面兼容和页面自适应在不同的终端上显示。

7.如权利要求6所述可视化专题页面制作装置，其特征在于，

所述页面搭建模块，具体用于根据专题的需求选择布局组件时，将在左侧常用组件中选择的布局组件拖拽进可视化操作界面的右侧预览区域内，以通过可视化界面展现布局组件的页面框架。

8.如权利要求7所述可视化专题页面制作装置，其特征在于，所述常用组件包括：布局组件、功能组件、交互组件。

9.如权利要求7所述可视化专题页面制作装置，其特征在于，

所述专题页面管理模块，具体用于专题页面制作完成后，将左侧常用组件隐藏，从而对制作的专题页面进行预览。

10.如权利要求6所述可视化专题页面制作装置，其特征在于，

所述代码预编译管理模块，具体用于通过个人计算机PC端、平板电脑PAD端、手机端三种页面兼容和页面自适应将专题页面的图形界面针对不同的终端进行适配处理，保存生成的兼容性和自适应的代码文件。