Html模板可视化制作、编辑方法及系统的制作方法
【专利摘要】本发明提供了一种HTML模板可视化制作、编辑方法及系统，其中，所述方法包括：对HTML模板进行可视化制作，获得HTML可视化模板；对所述HTML可视化模板进行编辑，获得编辑后的HTML可视化模板。所述系统包括：制作模块和编辑模块。本发明用于解决现有技术中若不熟悉HTML代码等网页编辑语言而无法对网页模板进行制作以及后期编辑的问题。
【专利说明】 HTML模板可视化制作、编辑方法及系统
【技术领域】
[0001]本发明涉及本发明涉及可视化编辑方法及系统，尤其涉及一种HTML模板可视化制作、编辑方法及系统。
【背景技术】
[0002]随着计算机的日益普及，互联网的蓬勃发展，使得计算机使用者能够通过访问各种网站中的网页来获取所需要的讯息。而网站中的各个网页通常是网站编辑者通过HTML语言(HyperText Markup Language,超文本标记语言)设计出来的。
[0003]目前，需要通过HTML代码来设计网站必须熟悉专业的HTML代码。
[0004]发明人在实现本发明的过程中发现，现有技术至少存在以下的缺点和不足:
HTML代码较为复杂，若不熟悉HTML代码等网页编辑语言而无法对网页模板进行制作
以及后期编辑。
【发明内容】
[0005]本发明所要解决的技术问题是提供一种HTML模板可视化制作、编辑方法及系统，以解决现有技术中若不熟悉HTML代码等网页编辑语言而无法对网页模板进行制作以及后期编辑的问题。
[0006]本发明公开的具体技术方案如下:
对HTML模板进行可视化制作，获得HTML可视化模板；
对所述HTML可视化模板进行编辑，获得编辑后的HTML可视化模板。
[0007]优选的，所述对HTML模板进行可视化制作，获得HTML可视化模板的步骤包括: 将网页原始HTML录入到网站内容管理系统，以进入HTML模板的制作视图；
创建碎片，获得相应的碎片的节点；
选取节点，以及根据所述选取节点，生成相应的碎片；
依据所述碎片，判断是否存在碎片嵌套，以执行相应的操作；若判断结果为存在碎片嵌套，则显示嵌套提示；若判断结果为不存在碎片嵌套，则所述碎片入库；
依据所述碎片是否成功入库的判断结果，以执行相应的操作；若判断结果为所述碎片入库，则在所述网页原始HTML模板代码里添加所述碎片标记，以获得HTML可视化模板；若判断结果为所述碎片入库失败，则输出判断结果为错误。
[0008]优选的，所述对所述HTML可视化模板进行编辑，获得编辑后的HTML可视化模板的步骤包括:
进入对所述HTML可视化模板进行编辑的编辑视图进行编辑；
获取所要编辑的所述HTML可视化模板的选取区域；
对所述HTML可视化模板的选取区域进行定位标记，生成所述HTML可视化模板的选取区域的页面浮层；
对所述HTML可视化模板的选取区域的页面浮层的碎片配置进行修改，生成相应的修改后的碎片；
通过判断所述相应的修改后的碎片是否成功入库，以执行相应的操作；若判断结果为所述相应的修改后的碎片成功入库，则在所述HTML可视化模板进行编辑的编辑视图添加所述修改后的碎片的碎片标记；若判断结果为所述相应的修改后的碎片入库失败，则输出判断结果为错误。
[0009]优选的，所述对所述HTML可视化模板的选取区域进行定位标记，生成所述HTML可视化模板的选取区域的页面浮层的步骤包括:
发布引擎，以及输出所述HTML可视化模板的选取区域的HTML ；
查找所述HTML可视化模板的选取区域的碎片标记；
依据所述碎片标记，生成所述HTML可视化模板的选取区域的页面浮层。
[0010]优选的，所述HTML可视化模板的选取区域的页面浮层的显示方式为全页预览或局部预览的方式。
[0011]本发明还提供了一种HTML模板可视化制作、编辑系统，包括:
制作模块，用于对HTML模板进行可视化制作，获得HTML可视化模板；
编辑模块，用于对所述HTML可视化模板进行编辑，获得编辑后的HTML可视化模板。
[0012]优选的，所述制作模块具体用于:
将网页原始HTML录入到网站内容管理系统，以进入HTML模板的制作视图；
创建碎片，获得相应的碎片的节点；
选取节点，以及根据所述选取节点，生成相应的碎片；
依据所述碎片，判断是否存在碎片嵌套，以执行相应的操作；若判断结果为存在碎片嵌套，则显示嵌套提示；若判断结果为不存在碎片嵌套，则所述碎片入库；
依据所述碎片是否成功入库的判断结果，以执行相应的操作；若判断结果为所述碎片入库，则在所述网页原始HTML模板代码里添加所述碎片标记，以获得HTML可视化模板；若判断结果为所述碎片入库失败，则输出判断结果为错误。
[0013]优选的，所述编辑模块包括:
进入子模块，用于进入对所述HTML可视化模板进行编辑的编辑视图进行编辑；
选取子模块，用于获取所要编辑的所述HTML可视化模板的选取区域；
标记子模块，用于对所述HTML可视化模板的选取区域进行定位标记，生成所述HTML可视化模板的选取区域的页面浮层；
修改子模块，用于对所述HTML可视化模板的选取区域的页面浮层的碎片配置进行修改，生成相应的修改后的碎片；
判断子模块，用于通过判断所述相应的修改后的碎片是否成功入库，以执行相应的操作；若判断结果为所述相应的修改后的碎片成功入库，则在所述HTML可视化模板进行编辑的编辑视图添加所述修改后的碎片的碎片标记；若判断结果为所述相应的修改后的碎片入库失败，则输出判断结果为错误。
[0014]优选的，所述标记子模块具体用于:
发布引擎，以及输出所述HTML可视化模板的选取区域的HTML ；
查找所述HTML可视化模板的选取区域的碎片标记；
依据所述碎片标记，生成所述HTML可视化模板的选取区域的页面浮层。[0015]优选的，所述系统还包括:显示模块，用于显示所述HTML可视化模板的选取区域的页面浮层，所述HTML可视化模板的选取区域的页面浮层的显示方式为全页预览或局部预览的方式。
[0016]与现有技术相比，本发明具有以下优点:
O让编辑人员在零接触HTML代码的情况下完成内容更新。
[0017]2)简化操作步骤，将模板创建和碎片创建最大程度自动化完成；
3)摆脱HTML代码，在可视化的界面中通过鼠标点击的方式实现模板制作和碎片创建的自动化；
4)在可视化的界面中通过鼠标点击的方式直接进入碎片编辑界面；
5)实现碎片编辑或模板制作都能在同一个界面中完成，避免画面频繁切换。
【专利附图】
【附图说明】
[0018]图1是现有技术中网页内容维护的流程图；
图2是本发明实施例一种HTML模板可视化制作、编辑方法的流程图；
图3是本发明又一实施例一种HTML模板可视化制作、编辑方法的流程图；
图4是本发明一种HTML模板可视化制作、编辑方法的具体实例的示意图；
图5是本发明实施例一种HTML模板可视化制作、编辑系统的结构图；
图6是本发明又一实施例一种HTML模板可视化制作、编辑系统的结构图。
【具体实施方式】
[0019]为使本发明的上述目的、特征和优点能够更加明显易懂，下面结合附图和【具体实施方式】对本发明作进一步详细的说明。
[0020]参见图1，是现有技术中网页内容维护的流程图。
[0021]从图1中，可以获知现有技术中，网站内容的更新和维护通常依赖于CMS(ContentManagement System,网站内容管理系统)，做法是:网站技术支持人员和内容管理人员共同约定，为了便于内容更新，将网页划分为一个个区块，技术支持人员将这些区块制作成碎片，在CMS系统中录入碎片信息，并在|吴板中添加碎片标识。这样就完成了|吴板制作和创建碎片的整个过程。网站编辑人员需要对网页内容进行不定期更新，通常的做法是进入CMS系统的碎片列表，从众多碎片目录中找到需要更新内容的碎片，进入碎片编辑页面修改碎片内容，提交并发布。
[0022]从图1中可以看出:现有HTML模板可视化制作、编辑方法的缺陷是:技术支持人员在制作模板的时候，面对的是一个完整的网页HTML源代码，制作人员需要逐一把页面上某个区块对应到HTML源代码的某一段代码段中，这需要制作人员对HTML方面的知识有相当程度的了解，而且这个过程需要格外小心谨慎，任何遗漏或多出一个HTML元素标签都可能导致整个页面显示错乱；在HTML源代码中选取好需要做成碎片的代码段后，需要进入CMS系统中创建碎片，得到碎片ID，然后在模板中删除代码段，替换为碎片标识。很显然这个过程十分繁琐，需要在若干界面来回切换。
[0023]综上所述，传统做法的缺点归纳为:操作繁琐，操作界面切换频繁，技术门槛高，易出错，不直观。[0024]参见图2，是本发明实施例一种HTML模板可视化制作、编辑方法的流程图。
[0025]S201、对HTML模板进行可视化制作，获得HTML可视化模板；
S202、对所述HTML可视化模板进行编辑，获得编辑后的HTML可视化模板。
[0026]模板制作:对网页划分区块，并制作成一个个方便内容更新的碎片的过程。把一个html网页制作成一个个碎片有两种方式，一种是通过HTML中的预定义的碎片标签，由系统自动识别并创建碎片，然后由二次开发人员完成最后的碎片配置工作。另一种就是通过鼠标在页面上选取元素来生成碎片并完成碎片配置。
[0027]模板可视化编辑:每个矩形区块被称为“碎片”，把一个网页划分为若干区块，并对每个区块给予碎片代码标识，这些碎片代码标识的集合以及没有划分为碎片的原始HTML称之为“模板”，发布引擎将模板和内容数据按照既定的发布逻辑即可生成网页。传统的模板编辑方法是面对网页HTML代码，用手工填写的方式划分和标识碎片标记。而模板的可视化编辑则面对的是在浏览器中打开的网页，通过鼠标点击选取的方式自动完成碎片标识和碎片存储工作。
[0028]本实施例通过对HTML模板进行可视化制作，获得HTML可视化模板；对所述HTML可视化模板进行编辑，获得编辑后的HTML可视化模板；实现了编辑人员在零接触HTML代码的情况下完成对HTML模板进行可视化制作及编辑的过程。
[0029]参见图3，是本发明又一实施例一种HTML模板可视化编辑方法的流程图。
[0030]S301、对HTML模板进行可视化制作，获得HTML可视化模板；
其中，所述S301、对HTML模板进行可视化制作，获得HTML可视化模板的步骤具体可以包括:
53011、将网页原始HTML录入到网站内容管理系统，以进入HTML模板的制作视图；
53012、创建碎片，获得相应的碎片的节点；
53013、选取节点，以及根据所述选取节点，生成相应的碎片；
53014、依据所述碎片，判断是否存在碎片嵌套，以执行相应的操作；若判断结果为存在碎片嵌套，则显示嵌套提示；若判断结果为不存在碎片嵌套，则所述碎片入库；
53015、依据所述碎片是否成功入库的判断结果，以执行相应的操作；若判断结果为所述碎片入库，则在所述网页原始HTML模板代码里添加所述碎片标记，以获得HTML可视化模板；若判断结果为所述碎片入库失败，则输出判断结果为错误。
[0031 ] S302、对所述HTML可视化模板进行编辑，获得编辑后的HTML可视化模板；其中，所述S302、对所述HTML可视化模板进行编辑，获得编辑后的HTML可视化模板的步骤具体可以包括:
53021、进入对所述HTML可视化模板进行编辑的编辑视图进行编辑；
53022、获取所要编辑的所述HTML可视化模板的选取区域；
53023、对所述HTML可视化模板的选取区域进行定位标记，生成所述HTML可视化模板的选取区域的页面浮层；
其中，所述S3023、对所述HTML可视化模板的选取区域进行定位标记，生成所述HTML可视化模板的选取区域的页面浮层的步骤具体可以包括:
发布引擎，以及输出所述HTML可视化模板的选取区域的HTML ；
查找所述HTML可视化模板的选取区域的碎片标记； 依据所述碎片标记，生成所述HTML可视化模板的选取区域的页面浮层。
[0032]其中，所述HTML可视化模板的选取区域的页面浮层的显示方式为全页预览或局部预览的方式。
[0033]S3024、对所述HTML可视化模板的选取区域的页面浮层的碎片配置进行修改，生成相应的修改后的碎片；
S3025、通过判断所述相应的修改后的碎片是否成功入库，以执行相应的操作；若判断结果为所述相应的修改后的碎片成功入库，则在所述HTML可视化模板进行编辑的编辑视图添加所述修改后的碎片的碎片标记；若判断结果为所述相应的修改后的碎片入库失败，则输出判断结果为错误。
[0034]本实施例通过对HTML模板进行可视化制作，获得HTML可视化模板；对所述HTML可视化模板进行编辑，获得编辑后的HTML可视化模板；实现了编辑人员在零接触HTML代码的情况下完成HTML模板进行可视化制作及编辑。
[0035]参见图4，是本发明一种HTML模板可视化制作、编辑方法的具体实例的示意图。
[0036]网站编辑提出制作页面的需求后提交给美工设计制作，制作好的只是最原始的HTML，最终需要更新内容后发布到服务器。为了便于日后的内容更新，需要技术支持人员根据一定的逻辑把网页划分为若干区块，并将这些区块制作碎片存储到后台。这样就形成了模板和碎片，模板和碎片结合编辑人员录入的数据通过发布引擎发布到前端服务器。
[0037]网页中通过javascript脚本能跟踪鼠标经过或点击的位置查找到该位置的页面元素节点，并列出该节点的所有父节点。
[0038]列出所有父节点是为了方便修正选取的节点，鼠标移动到节点列表中的任何一级节点，在页面上都会高亮显示该节点所覆盖的区域，这样可帮助模板制作人员准确定位到需要制作成碎片的区块。
[0039]选取的高亮区域就是需要制作成碎片的区域，点击“生成碎片”按钮前端javascript脚本程序就会读取到该区域的html代码段发送到后台CMS，根据之前选择的碎片配置信息，存储到后台数据库，返回该碎片的标识信息，同时脚本程序会自动替换模板里的那一段HTML代码为碎片标识；在可视化编辑视图中该HTML代码的根节点上将会增加自定义属性“cmpp_params”,该属性标记的作用就是标识该节点已经被创建为碎片了 ；这样就实现了制作碎片和在模板中标识碎片一次性自动完成。
[0040]标识了碎片的区域表面漂浮一个半透明的div浮层，该浮层高亮显示，并绑定鼠标点击事件，点击该浮层可进入碎片配置窗口。当需要修改模板、增加碎片、修改碎片配置、删除碎片时可在模板编辑视图中进行。模板编辑视图的初始化原理是:模板在可视化编辑初始化时，脚本程序会便利网页中所有包含碎片标记“ cmpp_params”的节点,给这些节点的元素添加半透明浮层，并高亮显示。模板制作人员可点击这些浮层对碎片进行再配置。
[0041]制作模板创建碎片是同步进行的，而且无需接触html代码，只需要用鼠标在网页中点取就可自动生成碎片存储到后台CMS系统，这正是“可视化编辑”的展现。
[0042]模板可视化制作和编辑中，不仅实现了鼠标在网页移动时，前端脚本能准确查找到鼠标经过的HTML节点，通过点击鼠标能准确选取到节点；还实现了给节点添加碎片标记，碎片标记决定了网页中已经制作成碎片的区块；其中，高亮飘浮的半透明浮层就是其对应碎片的配置入口。[0043]参见图5，是本发明实施例一种HTML模板可视化制作、编辑系统的结构图。
[0044]所述系统主要包括:
制作模块51，用于对HTML模板进行可视化制作，获得HTML可视化模板；
编辑模块52，用于对所述HTML可视化模板进行编辑，获得编辑后的HTML可视化模板。
[0045]本实施例通过制作模块，用于对HTML模板进行可视化制作，获得HTML可视化模板；编辑模块，用于对所述HTML可视化模板进行编辑，获得编辑后的HTML可视化模板；实现了编辑人员在零接触HTML代码的情况下完成HTML模板进行可视化制作及编辑的过程。
[0046]参见图6,是本发明又一实施例一种HTML模板可视化编辑系统的结构图。
[0047]所述制作模块51具体用于:
将网页原始HTML录入到网站内容管理系统，以进入HTML模板的制作视图；
创建碎片，获得相应的碎片的节点；
选取节点，以及根据所述选取节点，生成相应的碎片；
依据所述碎片，判断是否存在碎片嵌套，以执行相应的操作；若判断结果为存在碎片嵌套，则显示嵌套提示；若判断结果为不存在碎片嵌套，则所述碎片入库；
依据所述碎片是否成功入库的判断结果，以执行相应的操作；若判断结果为所述碎片入库，则在所述网页原始HTML模板代码里添加所述碎片标记，以获得HTML可视化模板；若判断结果为所述碎片入库失败，则输出判断结果为错误。
[0048]所述编辑模块52包括:
进入子模块521，用于进入对所述HTML可视化模板进行编辑的编辑视图进行编辑； 选取子模块522，用于获取所要编辑的所述HTML可视化模板的选取区域；
标记子模块523，用于对所述HTML可视化模板的选取区域进行定位标记，生成所述HTML可视化模板的选取区域的页面浮层；
所述标记子模块523具体用于:
发布引擎，以及输出所述HTML可视化模板的选取区域的HTML ；
查找所述HTML可视化模板的选取区域的碎片标记；
依据所述碎片标记，生成所述HTML可视化模板的选取区域的页面浮层。
[0049]修改子模块524，用于对所述HTML可视化模板的选取区域的页面浮层的碎片配置进行修改，生成相应的修改后的碎片；
判断子模块525，用于通过判断所述相应的修改后的碎片是否成功入库，以执行相应的操作；若判断结果为所述相应的修改后的碎片成功入库，则在所述HTML可视化模板进行编辑的编辑视图添加所述修改后的碎片的碎片标记；若判断结果为所述相应的修改后的碎片入库失败，则输出判断结果为错误。
[0050]所述系统还包括:
显示模块61，用于显示所述HTML可视化模板的选取区域的页面浮层，所述HTML可视化模板的选取区域的页面浮层的显示方式为全页预览或局部预览的方式。
[0051]本实施例通过制作模块，用于对HTML模板进行可视化制作，获得HTML可视化模板；编辑模块，用于对所述HTML可视化模板进行编辑，获得编辑后的HTML可视化模板；不仅实现了编辑人员在零接触HTML代码的情况下完成内容更新；还实现了在可视化的界面中通过鼠标点击的方式实现模板制作和碎片创建的自动化。[0052]本说明书中的各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似的部分互相参见即可。对于系统或装置实施例而言，由于其与方法实施例基本相似，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。
[0053]以上对本发明所提供的一种HTML模板可视化制作、编辑方法及系统，进行了详细介绍，本文中应用了具体个例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想；以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内所做的任何修改、等同替换和改进等，均应包含在本发明的保护范围之内。
【权利要求】
1.一种HTML模板可视化制作、编辑方法，其特征在于，包括: 对HTML模板进行可视化制作，获得HTML可视化模板； 对所述HTML可视化模板进行编辑，获得编辑后的HTML可视化模板。
2.根据权利要求1所述的方法，其特征在于，所述对HTML模板进行可视化制作，获得HTML可视化模板的步骤包括: 将网页原始HTML录入到网站内容管理系统，以进入HTML模板的制作视图； 创建碎片，获得相应的碎片的节点； 选取节点，以及根据所述选取节点，生成相应的碎片； 依据所述碎片，判断是否存在碎片嵌套，以执行相应的操作；若判断结果为存在碎片嵌套，则显示嵌套提示；若判断结果为不存在碎片嵌套，则所述碎片入库； 依据所述碎片是否成功入库的判断结果，以执行相应的操作；若判断结果为所述碎片入库，则在所述网页原始HTML模板代码里添加所述碎片标记，以获得HTML可视化模板；若判断结果为所述碎片入库失败，则输出判断结果为错误。
3.根据权利要求1所述的方法，其特征在于，所述对所述HTML可视化模板进行编辑，获得编辑后的HTML可视化模板的步骤包括: 进入对所述HTML可视化模板进行编辑的编辑视图进行编辑； 获取所要编辑的所述H TML可视化模板的选取区域； 对所述HTML可视化模板的选取区域进行定位标记，生成所述HTML可视化模板的选取区域的页面浮层； 对所述HTML可视化模板的选取区域的页面浮层的碎片配置进行修改，生成相应的修改后的碎片； 通过判断所述相应的修改后的碎片是否成功入库，以执行相应的操作；若判断结果为所述相应的修改后的碎片成功入库，则在所述HTML可视化模板进行编辑的编辑视图添加所述修改后的碎片的碎片标记；若判断结果为所述相应的修改后的碎片入库失败，则输出判断结果为错误。
4.根据权利要求3所述的方法，其特征在于，所述对所述HTML可视化模板的选取区域进行定位标记，生成所述HTML可视化模板的选取区域的页面浮层的步骤包括: 发布引擎，以及输出所述HTML可视化模板的选取区域的HTML ； 查找所述HTML可视化模板的选取区域的碎片标记； 依据所述碎片标记，生成所述HTML可视化模板的选取区域的页面浮层。
5.根据权利要求4所述的方法，其特征在于，所述HTML可视化模板的选取区域的页面浮层的显示方式为全页预览或局部预览的方式。
6.一种HTML模板可视化制作、编辑系统，其特征在于，包括: 制作模块，用于对HTML模板进行可视化制作，获得HTML可视化模板； 编辑模块，用于对所述HTML可视化模板进行编辑，获得编辑后的HTML可视化模板。
7.根据权利要求6所述的系统，其特征在于，所述制作模块具体用于: 将网页原始HTML录入到网站内容管理系统，以进入HTML模板的制作视图； 创建碎片，获得相应的碎片的节点； 选取节点，以及根据所述选取节点，生成相应的碎片；依据所述碎片，判断是否存在碎片嵌套，以执行相应的操作；若判断结果为存在碎片嵌套，则显示嵌套提示；若判断结果为不存在碎片嵌套，则所述碎片入库； 依据所述碎片是否成功入库的判断结果，以执行相应的操作；若判断结果为所述碎片入库，则在所述网页原始HTML模板代码里添加所述碎片标记，以获得HTML可视化模板；若判断结果为所述碎片入库失败，则输出判断结果为错误。
8.根据权利要求6所述的系统，其特征在于，所述编辑模块包括: 进入子模块，用于进入对所述HTML可视化模板进行编辑的编辑视图进行编辑； 选取子模块，用于获取所要编辑的所述HTML可视化模板的选取区域； 标记子模块，用于对所述HTML可视化模板的选取区域进行定位标记，生成所述HTML可视化模板的选取区域的页面浮层； 修改子模块，用于对所述HTML可视化模板的选取区域的页面浮层的碎片配置进行修改，生成相应的修改后的碎片； 判断子模块，用于通过判断所述相应的修改后的碎片是否成功入库，以执行相应的操作；若判断结果为所述相应的修改后的碎片成功入库，则在所述HTML可视化模板进行编辑的编辑视图添加所述修改后的碎片的碎片标记；若判断结果为所述相应的修改后的碎片入库失败，则输出判断结果为错误。
9.根据权利要求8所述的系统，其特征在于，所述标记子模块具体用于: 发布引擎，以及输出所述HTML可视化模板的选取区域的HTML ； 查找所述HTML可视化模 板的选取区域的碎片标记； 依据所述碎片标记，生成所述HTML可视化模板的选取区域的页面浮层。
10.根据权利要求9所述的系统，其特征在于，所述系统还包括:显示模块，用于显示所述HTML可视化模板的选取区域的页面浮层，所述HTML可视化模板的选取区域的页面浮层的显示方式为全页预览或局部预览的方式。
【文档编号】G06F17/30GK103853735SQ201210500283
【公开日】2014年6月11日 申请日期:2012年11月29日 优先权日:2012年11月29日
【发明者】严伟锋, 程邓时, 杨俊杰, 胡伟琪 申请人:怡丰联合（北京）科技有限责任公司