一种生成目标页面的方法与流程

本发明涉及网页开发领域，特别涉及一种生成目标页面的方法。

背景技术：

随着页面开发元素越来越多，页面开发人员在绘制html元素时的工作量就越来越大，如果每个html元素的绘制工作都使用键盘一个一个的输入，那么对于页面开发者来说开发效率是非常低的，同时因为长时间的疲劳工作，出现错误的几率也是非常高的。因此，急需一种解决方案来解决上面的问题。

技术实现要素：

本发明要解决的技术问题是：提供一种生成目标页面的方法，用于解决在目标页面html元素数据庞大时，页面开发人员需很长时间才能完成html元素绘制的问题。

为解决上述问题，本发明采用的技术方案是：一种生成目标页面的方法，包括以下步骤：

步骤1：新建一个空白的html文本，并在空白的html文本中创建html库分区和html编辑分区；

步骤2：在html库分区中，创建各个html元素，各个html元素均使用默认样式，并添加html库分区中各个html元素的拖拽事件和它们的响应方法；所述响应方法为将拖拽html元素的html代码复制到html编辑分区；

步骤3：拖拽html库分区中的元素到html编辑分区，从而在html编辑分区创建目标页面文件需要的所有html元素；

步骤4：对html编辑分区的所有html元素，生成各个html元素的名称和id属性；

步骤5：选中html编辑分区中的html元素获取到相应的html代码，并将它们复制到目标页面文件；

步骤6：根据需要，修改目标页面文件中html元素的名称和id属性，并为html元素添加相应的class属性及其样式代码。

进一步的，为了便于处理，步骤3可按各个html元素的序号递增的方式生成各个html元素的名称和id属性。

本发明的有益效果是：本发明解决了在目标页面html元素数据庞大时，页面开发人员需很长时间才能完成html元素绘制的问题，提高了页面html元素绘制的效率；同时，采用html库和拖拽html库元素到html编辑分区方式，将html元素代码复制到html编辑分区中，使得绘制html元素出错可能性降低，提高了绘制html页面元素的可靠性，减少了页面开发人员编辑html代码的出错率。

附图说明

图1为本发明实施例生成目标页面的总示意图。

具体实施方式

为了解决在目标页面html元素数据庞大时，页面开发人员需很长时间才能完成html元素绘制的问题，本发明公开了一种生成目标页面的方法，包括以下步骤：

步骤1：新建一个空白的html文本，并在空白的html文本中创建html库分区和html编辑分区；

步骤2：在html库分区中，创建各个html元素，各个html元素均使用默认样式，并添加html库分区中各个html元素的拖拽事件和它们的响应方法；所述响应方法为将拖拽html元素的html代码复制到html编辑分区；

步骤3：拖拽html库分区中的元素到html编辑分区，从而在html编辑分区创建目标页面文件需要的所有html元素；

步骤4：对html编辑分区的所有html元素，生成各个html元素的名称和id属性；

步骤5：选中html编辑分区中的html元素获取到相应的html代码，并将它们复制到目标页面文件；

步骤6：根据需要，修改目标页面文件中html元素的名称和id属性，并为html元素添加相应的class属性及其样式代码。

下面通过实施例对本发明做进一步说明。

实施例提供了一种生成目标页面的方法，该方法主要包含在源html文件中生成目标页面html元素，将生成的目标页面html元素复制到目标页面文件中两个步骤，其总流程框图如图1所示，具体实施方式如下：

1、新建空白的blank.html文本。

2、在新的blank.html文本中创建两个分区：html库分区和html编辑分区。

3、在html库分区中，创建各个html元素，各个html元素均使用默认样式，添加html库分区中各个html元素的拖拽事件和它们的响应方法。其中，所述响应方法为将拖拽html元素的html代码复制到html编辑分区。

4、页面开发人员按目标文件要求的位置，顺序拖拽html库分区中的元素到html编辑分区，在页面开发人员拖拽html元素过程中，系统会依次相应响应拖拽事件(即将拖拽html元素的html代码复制到html编辑分区)，从而在html编辑分区创建目标页面文件需要的所有html元素。

5、html编辑分区中，按各个html元素的序号递增的方式生成各个html元素的名称和id属性。比如创建元素input,当拖拽第一个到html编辑分区中时，id为input1，名称name为input1,当拖拽第二个到html编辑分区中时，id为input2，name为input2，其他元素以此类推。

6、在目标页面中，页面开发人员点击页面右键，通过选择“查看源代码”->选择“元素”选项卡的方式，选中html编辑分区中的html元素以及其相应的html代码，并将它们复制到目标页面文件。

7、根据需要，修改目标页面文件中html元素的名称和id属性，并为html元素添加相应的class属性及其样式代码，最终生成目标页面。

通过上述实施例的技术方案，本发明解决了在目标页面html元素数据庞大时，页面开发人员需很长时间才能完成html元素绘制的问题，提高了页面html元素绘制的效率；同时，采用html库和拖拽html库元素到html编辑分区方式，将html元素代码复制到html编辑分区中，使得绘制html元素出错可能性降低，提高了绘制html页面元素的可靠性，减少了页面开发人员编辑html代码的出错率。

技术特征：

1.一种生成目标页面的方法，其特征在于，包括如下步骤：

步骤1：新建一个空白的html文本，并在空白的html文本中创建html库分区和html编辑分区；

步骤2：在html库分区中，创建各个html元素，各个html元素均使用默认样式，并添加html库分区中各个html元素的拖拽事件和它们的响应方法；所述响应方法为将拖拽html元素的html代码复制到html编辑分区；

步骤3：拖拽html库分区中的元素到html编辑分区，从而在html编辑分区创建目标页面文件需要的所有html元素；

步骤4：对html编辑分区的所有html元素，生成各个html元素的名称和id属性；

步骤5：选中html编辑分区中的html元素获取到相应的html代码，并将它们复制到目标页面文件；

步骤6：根据需要，修改目标页面文件中html元素的名称和id属性，并为html元素添加相应的class属性及其样式代码。

2.如权利要求1所述一种生成目标页面的方法，其特征在于，步骤3按各个html元素的序号递增的方式生成各个html元素的名称和id属性。

技术总结
本发明涉及网页开发领域，公开了一种生成目标页面的方法，用于解决在目标页面HTML元素数据庞大时，页面开发人员需很长时间才能完成HTML元素绘制的问题。本发明包括：新建一个空白的HTML文本，并在空白的HTML文本中创建HTML库分区和HTML编辑分区；在HTML库分区中创建各个HTML元素，并添加HTML库分区中各个HTML元素的拖拽事件和它们的响应方法；拖拽HTML库分区中的元素到HTML编辑分区；生成各个HTML元素的名称和id属性；选中HTML编辑分区中的HTML元素获取到相应的HTML代码，并将它们复制到目标页面文件；根据需要修改目标页面文件中HTML元素的名称和id属性，并添加的class属性及其样式代码。本发明适用于网页开发时HTML元素绘制。

技术研发人员：周林;张强;刘袁吉;刘振波;谷川;邹书强;罗礁
受保护的技术使用者：四川长虹电器股份有限公司
技术研发日：2019.08.09
技术公布日：2019.11.15