[发明专利]一种可视化网站模版的制作方法

说明书

技术领域

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

背景技术

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

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

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

发明内容

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

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

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

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

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

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

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

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

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

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

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

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