CN103955366A - 一种可视化网站模版的制作方法 - Google Patents

Abstract

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

Description

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

技术领域

本发明涉及一种可视化网站模版的制作方法。

背景技术

在网站生成静态页面的技术中，都需要涉及到生成静态页面的模版文件，目前所常见的模版文件都是由技术人员进行直接代码的编写，这样对模版文件中涉及到的代码编写有较高的要求。

由于有些技术人员因为没有接触或学习过相关的模版语言，在对网站的模版编写中就会遇到困难或需求重新学习，导致工作进度效率降低或网站产品无法大范围的进行推广，如果采用可视化进行编辑制作后，则对具体的技术语言的要求大大降低，同时提升工作效率与推广的范围。

现有的模版制作产品都是比较简单固定的布局模块应用，难以实现模版的通用性和拖拽的灵活便捷性，而且不适用实际的客户自定义布局、模块位置多样化等的需求。

发明内容

本发明的目的在于提供一种可视化网站模版的制作方法，改进了传统的模版文件需要直接进行代码编写的模式，可以直接在可视化编辑界面，通过直接拖拽已经初始化设计好的模块（组件）来实现对模版的可视化设计，不需要进行代码编写，同时还可以对可视化页面中设计的模块的各种属性和其扩展属性进行灵活地设置，例如进行自定义布局、模块位置风格多样化，可以有效规范了模版的编写标准，避免因为人为的写法不同而导致理解的困难，并且提高了实施人员的工作效率。

本发明一种可视化网站模版的制作方法，具体包括如下步骤：

步骤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）在进入可视化编辑区域的时候，从共享母版库中加载母版存放到编辑区的共享母版区域中，从共享母版区域中选择符合要求或者相近的母版，拖动到编辑区中，利用ajax去异步读取母版的内容，然后存放到可视化编辑区域，该编辑区域展示出该母版的静态效果；

（2）如果发现有些控件不符合要求，可以依照步骤2的内容进行控件、布局的重新调整设置；

（3）调整差不多后，可以进行预览和重新调整，然后进行保存成母版或者保存成可以使用的模版操作；如果预览效果符合要求，可以进行保存操作，通过js获取可视化编辑区域的内容，去除布局、控件的设计编辑虚框后，将每个控件区域的展现块和隐藏域的内容进行对换，针对动态语法字符串中还存在textarea的情况，对textarea的结束标签进行转义操作，经过保存处理后，就将可视化编辑的代码转化成可以直接应用到实际中的模版文件，生成模版静态页；

（4）若模版整体效果符合复用需要，通过js获取可视化编辑区域的内容，去除布局、控件的设计编辑虚框后，将可视化区域的代码保存共享母版库中。

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

附图说明

图1为本发明制作可视化控件的流程图；

图2为本发明利用独立可视化控件进行可视化制作一个模版的流程图；

图3为本发明利用共享母版与独立可视化控件结合进行可视化制作一个内容页模版的流程图。

以下结合附图和具体实施例对本发明做进一步详述。

具体实施方式

本发明一种可视化网站模版的制作方法，具体包括如下步骤：

步骤1、制作可视化控件；

如图1所示，可视化控件作为本发明的基本元素，是通过以下（1）至（3）步骤来最终形成一个可以供后续使用的元零件。

（1）确定好一个控件的外观后，首先利用基本的HTML语法在控件文件中，根据想要的效果制作出静态HTML字符串，并标记需要进行可视化配置的标签，在标签中添加标示符样式属性，如visualId=v1，该静态HTML字符串用来展现后面控件拖拽后在显示区域进行展示的效果；

（2）利用模版语法在控件文件中，根据静态HTML字符串编写出动态语法字符串，该动态语法字符串的作用是后续模版最终应用后，根据实时的数据源，展示具有静态HTML字符串效果的；

（3）在控件文件中，提供一个供实时编辑时展示修改的临时区域，该临时区域可展示静态HTML字符串和动态语法字符串，在该临时区域根据需要修改了静态HTML字符串的可视化配置标签的标示符样式属性后，就可以关联修改动态语法字符串的标签，通过该标示符式样属性关联关系便可实时地改变控件应用后的实时静态效果，同时该临时区域还可以实时提取初始化的静态HTML字符串和动态语法字符串，便于修改后的还原；

（4）根据实际的网站功能，可以重复（1）至（3）步骤制作出多种类别、多种展现形式的控件，将这些控件按照不同类别保存入控件库；

步骤2、参见图2，不使用共享母版，只利用独立的可视化控件进行可视化制作一个模版；

（1）根据希望展示的模版页面的基本架构，拖动布局控件到模版的可视化编辑区域，编辑区域会根据拖动时填写的布局行数和列数，js代码生成几个行级别的div区域，并控制这些行布局的宽度为目标位置对象，即父对象的宽度、高度，通过父对象的高度除以输入布局的行数取整，获得行布局的展现代码；同时要在每个行布局中再构造出列级别的div区域，通过控制这些列布局的高度为所在行布局的高度、宽度，通过所在行布局的宽度除以输入的布局列数再取整，获得列布局的展现代码，这样就将列布局的区域嵌入到行布局区域，再将行布局的代码添加到父对象中，从而在父对象中构造出了几行几列的均匀展现的布局框架的实时展示效果；

如果要在某个布局中再嵌套一个多行多列的布局控件，同上操作，将当前布局作为父对象，然后构造几行几列的布局代码，添加到当前布局就可以实现布局的任意嵌套；

（2）根据实际情况要修改某个布局大小时，可以实时拖动某个布局所在的区域的边框，通过获取鼠标当前操作布局对象的原始坐标和拖拽后的最终坐标进行比对，计算出移动后的目标高度跟宽度并设置到当前布局对象，同时控制兄弟布局的高度，然后根据当前布局和兄弟布局的高度和宽度调整父布局的高度和宽度，因此进行了实时高度和宽度的调整；

如果有不想要的多余的布局，可以通过鼠标获取所在布局代码区域对象，将该对象从该布局的父对象中移除，便可以进行布局的数量调整；

通过步骤（1）和（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、参见图3，使用共享母版库和可视化控件库，新建一个模版；

（1）在进入可视化编辑区域的时候，从共享母版库中加载母版存放到编辑区的共享母版区域中，从共享母版区域中选择符合要求或者相近的母版，拖动到编辑区中，利用ajax去异步读取母版的内容，然后存放到可视化编辑区域，由于母版的内容就是经过可视化编辑形成的包含固定布局div和控件div的代码，此时编辑区域就会展示该母版的静态效果；

（2）如果发现有些控件不符合要求，可以依照步骤2的内容进行控件、布局的重新调整设置；

（3）调整差不多后，可以进行预览和重新调整，然后进行保存成母版或者保存成可以使用的模版操作；如果预览效果符合要求，可以进行保存操作，通过js获取可视化编辑区域的内容，去除布局、控件的设计编辑虚框后，因为模版真正用到的是动态语法字符串的内容，所以将每个控件区域的展现块和隐藏域的内容进行对换，这样实际展示的就是动态语法字符串，而静态HTML字符串放在了隐藏文本区便于重新编辑时再对换使用，针对动态语法字符串中还存在textarea的情况，对textarea的结束标签进行转义操作，经过保存处理后，就将可视化编辑的代码转化成可以直接应用到实际中的模版文件，生成模版静态页；

（4）若模版整体效果符合复用需要，通过js获取可视化编辑区域的内容，去除布局、控件的设计编辑虚框后，将可视化区域的代码保存共享母版库中。

以上所述，仅是本发明较佳实施例而已，并非对本发明的技术范围作任何限制，故凡是依据本发明的技术实质对以上实施例所作的任何细微修改、等同变化与修饰，均仍属于本发明技术方案的范围内。

Claims (1)

1.一种可视化网站模版的制作方法，其特征在于包括如下步骤：

步骤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）在进入可视化编辑区域的时候，从共享母版库中加载母版存放到编辑区的共享母版区域中，从共享母版区域中选择符合要求或者相近的母版，拖动到编辑区中，利用ajax去异步读取母版的内容，然后存放到可视化编辑区域，该编辑区域展示出该母版的静态效果；

（2）如果发现有些控件不符合要求，可以依照步骤2的内容进行控件、布局的重新调整设置；

（3）调整差不多后，可以进行预览和重新调整，然后进行保存成母版或者保存成可以使用的模版操作；如果预览效果符合要求，可以进行保存操作，通过js获取可视化编辑区域的内容，去除布局、控件的设计编辑虚框后，将每个控件区域的展现块和隐藏域的内容进行对换，针对动态语法字符串中还存在textarea的情况，对textarea的结束标签进行转义操作，经过保存处理后，就将可视化编辑的代码转化成可以直接应用到实际中的模版文件，生成模版静态页；

（4）若模版整体效果符合复用需要，通过js获取可视化编辑区域的内容，去除布局、控件的设计编辑虚框后，将可视化区域的代码保存共享母版库中。