一种可视化网站模版的制作方法技术

本发明专利技术一种可视化网站模版的制作方法，可以进行自定义多层级嵌套修改布局、跨层级的模块拖放，以及对可视化的控件可以进行可视化编辑；并且可以快速引入共享母版库进行快速的模版制作，可供后续模版制作时反复调用，同时，完全采用js来进行实时操作HTML的dom元素，通过对可视化的控件模块进行拖拽、设置来替换HTML中的元素，相比传统的代码编写模版或者那些操作XML、实时读取数据库的方式的模版制作，在易用性和实时性方便有着明显的提升，而且如果要新增一个模块，只要再建一个文件，添加IH和IF代码就可以了，从而实现了简化、快捷的模块扩展功能。

【技术实现步骤摘要】
一种可视化网站模版的制作方法
本专利技术涉及一种可视化网站模版的制作方法。
技术介绍
在网站生成静态页面的技术中，都需要涉及到生成静态页面的模版文件，目前所常见的模版文件都是由技术人员进行直接代码的编写，这样对模版文件中涉及到的代码编写有较高的要求。由于有些技术人员因为没有接触或学习过相关的模版语言，在对网站的模版编写中就会遇到困难或需求重新学习，导致工作进度效率降低或网站产品无法大范围的进行推广，如果采用可视化进行编辑制作后，则对具体的技术语言的要求大大降低，同时提升工作效率与推广的范围。现有的模版制作产品都是比较简单固定的布局模块应用，难以实现模版的通用性和拖拽的灵活便捷性，而且不适用实际的客户自定义布局、模块位置多样化等的需求。
技术实现思路
本专利技术的目的在于提供一种可视化网站模版的制作方法，改进了传统的模版文件需要直接进行代码编写的模式，可以直接在可视化编辑界面，通过直接拖拽已经初始化设计好的模块（组件）来实现对模版的可视化设计，不需要进行代码编写，同时还可以对可视化页面中设计的模块的各种属性和其扩展属性进行灵活地设置，例如进行自定义布局、模块位置风格多样化，可以有效规范了模版的编写标准，避免因为人为的写法不同而导致理解的困难，并且提高了实施人员的工作效率。本专利技术一种可视化网站模版的制作方法，具体包括如下步骤：步骤1、制作可视化控件；（1）确定好一个控件的外观后，首先利用基本的HTML语法在控件文件中，根据想要的效果制作出静态HTML字符串，并标记需要进行可视化配置的标签，在标签中添加标示符样式属性，该静态HTML字符串用来展现后面控件拖拽后在显示区域进行展示的效果；（2）利用模版语法在控件文件中，根据静态HTML字符串编写出动态语法字符串，该动态语法字符串的作用是后续模版最终应用后，根据实时的数据源，展示具有静态HTML字符串效果的；（3）在控件文件中，提供一个供实时编辑时展示修改的临时区域，该临时区域可展示静态HTML字符串和动态语法字符串，在该临时区域根据需要修改了静态HTML字符串的可视化配置标签的标示符样式属性后，就可以关联修改动态语法字符串的标签，通过该标示符式样属性关联关系便可实时地改变控件应用后的实时静态效果，同时该临时区域还可以实时提取初始化的静态HTML字符串和动态语法字符串，便于修改后的还原；（4）根据实际的网站功能，可以重复（1）至（3）步骤制作出多种类别、多种展现形式的控件，将这些控件按照不同类别保存入控件库；步骤2、不使用共享母版，只利用独立的可视化控件进行可视化制作一个模版；（1）根据希望展示的模版页面的基本架构，拖动布局控件到模版的可视化编辑区域，编辑区域会根据拖动时填写的布局行数和列数，js代码生成几个行级别的div区域，并控制这些行布局的宽度为目标位置对象即父对象的宽度、高度，通过父对象的高度除以输入布局的行数取整，获得行布局的展现代码；同时要在每个行布局中再构造出列级别的div区域，通过控制这些列布局的高度为所在行布局的高度、宽度，通过所在行布局的宽度除以输入的布局列数再取整，获得列布局的展现代码，这样就将列布局的区域嵌入到行布局区域，再将行布局的代码添加到父对象中，从而在父对象中构造出了几行几列的均匀展现的布局框架的实时展示效果；如果要在某个布局中再嵌套一个多行多列的布局控件，同上操作，将当前布局作为父对象，然后构造几行几列的布局代码，添加到当前布局就可以实现布局的任意嵌套；（2）根据实际情况要修改某个布局大小时，可以实时拖动某个布局所在的区域的边框，通过获取鼠标当前操作布局对象的原始坐标和拖拽后的最终坐标进行比对，计算出移动后的目标高度跟宽度并设置到当前布局对象，同时控制兄弟布局的高度，然后根据当前布局和兄弟布局的高度和宽度调整父布局的高度和宽度，因此进行了实时高度和宽度的调整；如果有不想要的多余的布局，可以通过鼠标获取所在布局代码区域对象，将该对象从该布局的父对象中移除，便可以进行布局的数量调整；（3）可视化控件存放在布局位置：从可视化控件库中拖动想要的可视化控件到布局区域，在目标布局区域中，构造出一个可视化控件div块，读取该可视化控件所对应的控件文件，获得该控件文件所包含的静态HTML字符串和动态语法字符串，将静态HTML字符串存放到可视化控件div块中的展现块，将动态语法字符串存放到可视化控件div块中的隐藏域中，然后将可视化控件div块的代码添加到目标布局区域中，目标布局区域就会展示出静态HTML字符串的效果，这样一个控件就存放于模版的布局位置中；（4）可视化控件的位置调整：同步骤（3），拖动其他可视化控件到想要的布局，就可以快速的实时展现出想要的效果，如果发现控件的位置不理想，可以拖动相应的控件到其他布局或者相同布局的其他位置，由于可视化控件div块是一个整体的div块，脱离布局区域可以独立存在，所以可以在布局区域内任意移动，通过直接控制可视化控件div块的代码添加到目标布局区域中，就可以将可视化控件div块移动到目标位置；如果发现控件不想要了，可以直接移除可视化控件div块；（5）修改可视化控件的展示效果：拖动后如果要修改可视化控件的展现效果，可以右键进入模块设置界面，弹出一个模态窗口的div层，在div层上会有两块tab标签：可视化编辑区域、代码编辑区域；进入模块设置界面的时候，读取当前编辑的可视化控件的div块，将展现块的内容读取到上述可视化编辑区域，将隐藏域中的内容读取到上述代码编辑区域；在模块可视化区域，读取静态HTML字符串中可编辑的标签进行树形展示，点击具体可编辑的标签的时候，通过js利用对应标签块的标示符寻找到对应dom对象，并展现出可视化需要经常变动的样式属性供编辑，修改了相应的样式属性后，就会立即修改标签块的样式代码，同时会修改代码编辑区域动态语法字符串对应标示符的标签对象的样式属性；如果想直接修改动态语法字符串的代码，可以在代码编辑区域进行修改，修改保存好后，代码编辑区域里的内容会覆盖掉隐藏域的内容，可视化编辑区域的内容会覆盖掉展现块的内容，这样可视化整体编辑区域的展现便可以达到实时改变的效果；修改后的控件还可以继续进行步骤（4）的操作，进行可视化控件的位置调整；（6）通过以上的步骤后，即可展示出一个模版页的静态效果，点击预览通过js获取可视化编辑区域的内容，去除布局的边框后，将可视化区域内容放到新窗口的内容中，这样在新窗口中就能展现一个真正的静态页面效果，从而实现实时预览效果；（7）如果预览效果符合要求，进行保存操作，通过js获取可视化编辑区域的内容，去除布局、控件的设计编辑虚框后，将每个控件区域的展现块和隐藏域的内容进行对换，而静态HTML字符串放在了隐藏文本区便于重新编辑时再对换使用，针对动态语法字符串中还存在textarea的情况，对textarea的结束标签进行转义操作，经过保存处理后，就将可视化编辑的代码转化成可以直接应用到实际中的模版文件，生成模版静态页；（8）在步骤（6）若模版整体效果符合复用需要，通过js获取可视化编辑区域的内容，去除布局、控件的设计编辑虚框后，将可视化区域的代码保存共享母版库中，不用进行展现块和隐藏域的内容对换，这样一条记录就是一个母版；步骤3、使用共享母版库和可视化控件库，新本文档来自技高网...

【技术保护点】
一种可视化网站模版的制作方法，其特征在于包括如下步骤：步骤1、制作可视化控件；（1）确定好一个控件的外观后，首先利用基本的HTML语法在控件文件中，根据想要的效果制作出静态HTML字符串，并标记需要进行可视化配置的标签，在标签中添加标示符样式属性，该静态HTML字符串用来展现后面控件拖拽后在显示区域进行展示的效果；（2）利用模版语法在控件文件中，根据静态HTML字符串编写出动态语法字符串，该动态语法字符串的作用是后续模版最终应用后，根据实时的数据源，展示具有静态HTML字符串效果的；（3）在控件文件中，提供一个供实时编辑时展示修改的临时区域，该临时区域可展示静态HTML字符串和动态语法字符串，在该临时区域根据需要修改了静态HTML字符串的可视化配置标签的标示符样式属性后，就可以关联修改动态语法字符串的标签，通过该标示符式样属性关联关系便可实时地改变控件应用后的实时静态效果，同时该临时区域还可以实时提取初始化的静态HTML字符串和动态语法字符串，便于修改后的还原；（4）根据实际的网站功能，可以重复（1）至（3）步骤制作出多种类别、多种展现形式的控件，将这些控件按照不同类别保存入控件库；步骤2、不使用共享母版，只利用独立的可视化控件进行可视化制作一个模版；（1）根据希望展示的模版页面的基本架构，拖动布局控件到模版的可视化编辑区域，编辑区域会根据拖动时填写的布局行数和列数，js代码生成几个行级别的div区域，并控制这些行布局的宽度为目标位置对象即父对象的宽度、高度，通过父对象的高度除以输入布局的行数取整，获得行布局的展现代码；同时要在每个行布局中再构造出列级别的div区域，通过控制这些列布局的高度为所在行布局的高度、宽度，通过所在行布局的宽度除以输入的布局列数再取整，获得列布局的展现代码，这样就将列布局的区域嵌入到行布局区域，再将行布局的代码添加到父对象中，从而在父对象中构造出了几行几列的均匀展现的布局框架的实时展示效果；如果要在某个布局中再嵌套一个多行多列的布局控件，同上操作，将当前布局作为父对象，然后构造几行几列的布局代码，添加到当前布局就可以实现布局的任意嵌套；（2）根据实际情况要修改某个布局大小时，可以实时拖动某个布局所在的区域的边框，通过获取鼠标当前操作布局对象的原始坐标和拖拽后的最终坐标进行比对，计算出移动后的目标高度跟宽度并设置到当前布局对象，同时控制兄弟布局的高度，然后根据当前布局和兄弟布局的高度和宽度调整父布局的高度和宽度，因此进行了实时高度和宽度的调整；如果有不想要的多余的布局，可以通过鼠标获取所在布局代码区域对象，将该对象从该布局的父对象中移除，便可以进行布局的数量调整；（3）可视化控件存放在布局位置：从可视化控件库中拖动想要的可视化控件到布局区域，在目标布局区域中，构造出一个可视化控件div块，读取该可视化控件所对应的控件文件，获得该控件文件所包含的静态HTML字符串和动态语法字符串，将静态HTML字符串存放到可视化控件div块中的展现块，将动态语法字符串存放到可视化控件div块中的隐藏域中，然后将可视化控件div块的代码添加到目标布局区域中，目标布局区域就会展示出静态HTML字符串的效果，这样一个控件就存放于模版的布局位置中；（4）可视化控件的位置调整：同步骤（3），拖动其他可视化控件到想要的布局，就可以快速的实时展现出想要的效果，如果发现控件的位置不理想，可以拖动相应的控件到其他布局或者相同布局的其他位置，由于可视化控件div块是一个整体的div块，脱离布局区域可以独立存在，所以可以在布局区域内任意移动，通过直接控制可视化控件div块的代码添加到目标布局区域中，就可以将可视化控件div块移动到目标位置；如果发现控件不想要了，可以直接移除可视化控件div块；（5）修改可视化控件的展示效果：拖动后如果要修改可视化控件的展现效果，可以右键进入模块设置界面，弹出一个模态窗口的div层，在div层上会有两块tab标签：可视化编辑区域、代码编辑区域；进入模块设置界面的时候，读取当前编辑的可视化控件的div块，将展现块的内容读取到上述可视化编辑区域，将隐藏域中的内容读取到上述代码编辑区域；在模块可视化区域，读取静态HTML字符串中可编辑的标签进行树形展示，点击具体可编辑的标签的时候，通过js利用对应标签块的标示符寻找到对应dom对象，并展现出可视化需要经常变动的样式属性供编辑，修改了相应的样式属性后，就会立即修改标签块的样式代码，同时会修改代码编辑区域动态语法字符串对应标示符的标签对象的样式属性；如果想直接修改动态语法字符串的代码，可以在代码编辑区域进行修改，修改保存好后，代码编辑区域里的内容会覆盖掉隐藏域的内容，可视化编辑区域的内容会覆盖掉展现块的内容，这样可视化整体编辑区域的展现便可以达到实时改变的效果；修改后的控...

【技术特征摘要】
1.一种可视化网站模版的制作方法，其特征在于包括如下步骤：步骤1、制作可视化控件；(1)确定好一个控件的外观后，首先利用基本的HTML语法在控件文件中，根据想要的效果制作出静态HTML字符串，并标记需要进行可视化配置的标签，在标签中添加标示符样式属性，该静态HTML字符串用来展现后面控件拖拽后在显示区域进行展示的效果；(2)利用模版语法在控件文件中，根据静态HTML字符串编写出动态语法字符串，该动态语法字符串的作用是后续模版最终应用后，根据实时的数据源，展示具有静态HTML字符串效果的；(3)在控件文件中，提供一个供实时编辑时展示修改的临时区域，该临时区域可展示静态HTML字符串和动态语法字符串，在该临时区域根据需要修改了静态HTML字符串的可视化配置标签的标示符样式属性后，就可以关联修改动态语法字符串的标签，通过该标示符样式属性关联关系便可实时地改变控件应用后的实时静态效果，同时该临时区域还可以实时提取初始化的静态HTML字符串和动态语法字符串，便于修改后的还原；(4)根据实际的网站功能，可以重复(1)至(3)步骤制作出多种类别、多种展现形式的控件，将这些控件按照不同类别保存入控件库；步骤2、不使用共享母版，只利用独立的可视化控件进行可视化制作一个模版；(1)根据希望展示的模版页面的基本架构，拖动布局控件到模版的可视化编辑区域，编辑区域会根据拖动时填写的布局行数和列数，js代码生成几个行级别的div区域，并控制这些行布局的宽度为目标位置对象即父对象的宽度、高度，通过父对象的高度除以输入布局的行数取整，获得行布局的展现代码；同时要在每个行布局中再构造出列级别的div区域，通过控制这些列布局的高度为所在行布局的高度、宽度，通过所在行布局的宽度除以输入的布局列数再取整，获得列布局的展现代码，这样就将列布局的区域嵌入到行布局区域，再将行布局的代码添加到父对象中，从而在父对象中构造出了几行几列的均匀展现的布局框架的实时展示效果；如果要在某个布局中再嵌套一个多行多列的布局控件，与步骤2的第(1)小步骤操作相同，将当前布局作为父对象，然后构造几行几列的布局代码，添加到当前布局就可以实现布局的任意嵌套；(2)根据实际情况要修改某个布局大小时，可以实时拖动某个布局所在的区域的边框，通过获取鼠标当前操作布局对象的原始坐标和拖拽后的最终坐标进行比对，计算出移动后的目标高度跟宽度并设置到当前布局对象，同时控制兄弟布局的高度，然后根据当前布局和兄弟布局的高度和宽度调整父布局的高度和宽度，因此进行了实时高度和宽度的调整；如果有不想要的多余的布局，可以通过鼠标获取所在布局代码区域对象，将该对象从该布局的父对象中移除，便可以进行布局的数量调整；(3)可视化控件存放在布局位置：从可视化控件库中拖动想要的可视化控件到布局区域，在目标布局区域中，构造出一个可视化控件div块，读取该可视化控件所对应的控件文件，获得该控件文件所包含的静态HTML字符串和动态语法字符串，将静态HTML字符串存放到可视化控件div块中的展现块，将动态语法字符串存放到可视化控件div块中的隐藏域中，然后将可视化控件div块的代码添加到目标布局区域中，目标布局区域就会展示出静态HTML字符串的效果，这样一个控件就存放于模版的布局位置中；(4)可视化控件的位置调整：同步骤2的第(3)小步骤，拖动其他可视化控件到想要的布局，就可以快速的实时展现出想要的效果，如果发现控件的位置不理想，可以拖动相应的控件到其他布局或者相同布局的其他位置，由于可视化控件div块是一...

【专利技术属性】
技术研发人员：王国顺，胡玉源，刘凤贵，
申请(专利权)人：南威软件股份有限公司，
类型：发明
国别省市：福建;35