一种快速生成自定义静态Web页面的方法及装置

摘要

本发明提供一种快速生成自定义静态Web页面的方法，所述方法包括：于用户从初始样式列表中选择一基本模版页面后，根据用户需求对所述基本模版页面进行处理以获取通用模版页面；根据用户选择的CSS样式进行CSS样式设置，设置完成后生成一层叠样式表文件；根据用户选择的填充内容对所述填充内容进行处理；引入所述层叠样式表文件，生成所述Web页面；所述装置包括：通用模版获取模块、CSS样式设置模块、填充内容处理模块、生成模块。用户仅需自定义自己的样式和内容，即可实现快速生成Web页面的要求，极大地提高了开发效率。

说明书

技术领域

本发明涉及计算机技术领域，尤其涉及一种快速生成自定义静态Web页面的方法及装置。

背景技术

目前的Web开发大多是进行页面设计、样式定义、后台程序编写等一系列过程，对于布局框架类似的页面，需要进行重复的设计工作，这将是一个很耗费时间的行为，不利于页面的快速开发。一旦用户的需求有所更改，比如需要更换一种风格，那么需要重新设计样式，造成效率比较低下的问题。

当前也有一些页面开发模型，可以按照用户的需求自定义页面，但是页面模板比较单一，缺乏多样性，不一定能满足用户的需求。因此，提供一种设计简单且具有多样性的自定义静态Web页面的方法，成为目前亟待解决的问题。

发明内容

鉴于上述问题，本申请记载了一种快速生成自定义静态Web页面的方法，所述方法包括：

于用户从初始样式列表中选择一基本模版页面后，根据用户需求对所述基本模版页面进行处理以获取通用模版页面；

根据用户选择的CSS样式进行CSS样式设置，设置完成后生成一层叠样式表文件；

根据用户选择的填充内容对所述填充内容进行处理；

引入所述层叠样式表文件，生成所述Web页面。

较佳的，所述通用模版页面中包含显示常用内容的标签。

较佳的，用户通过编写HTML的方式或从所述基本模版页面增加和/或删除所述标签的方式实现对所述标签的增删操作。

较佳的，所述通用模版页面设计完成后将所述通用模版页面保存至所述初始样式列表中。

较佳的，所述CSS样式包括行距和/或字体和/或链接样式。

较佳的，用户通过编写CSS代码获取所述CSS样式或从自定义样式列表中选择现有的所述CSS样式。

较佳的，在根据用户选择的所述CSS样式进行所述CSS样式设置的过程包括对所述CSS样式的校验，所述校验过程包括：

于用户发送校验请求后，根据所述CSS样式内容，将所述CSS样式分割为多个选择器，对所述选择器进行校验。

较佳的，对所述选择器进行校验的过程包括步骤：

判断所述选择器是否存在；

若所述选择器不存在，删除所述选择器；否则，创建一个CSS文件，将所述选择器写入所述CSS文件；

待所有选择器校验完毕后，对所述CSS文件中的每一个所述选择器的每一个属性逐个进行规则解析校验。

较佳的，对所述属性进行规则解析校验的过程包括步骤：

判断所述属性是否存在；

若所述属性不存在，删除所述属性，给出提示信息并将所述提示信息反馈至客户；

若所述属性存在，判断所述属性的取值是否符合取值规则；

若符合所述取值规则，则不做处理；

若不符合所述取值规则，为所述属性设置一默认值并将所述默认值写入所述CSS文件；

当所述CSS文件中的所有所述选择器均校验完成后，将所述CSS文件保存并添加至所述自定义样式列表中。

较佳的，所述填充内容包括图片和/或文字和/或音频。

较佳的，对所述填充内容的处理过程包括：

若所述填充内容为图片和/或音频，生成对应的所述标签，并加载所述图片和/或音频；

若所述填充内容为文字，对所述文字进行编码。

较佳的，在进行CSS样式设置或引入所述层叠样式表文件生成所述Web页面的过程中，能够实时进行预览。

本实施例提提供了一种快速生成自定义静态Web页面的装置，所述装置包括：

通用模版获取模块，用以根据用户选择的基本模版页面和用户需求对所述基本模版页面进行处理以获取通用模版页面；

CSS样式设置模块，与所述通用模版获取模块相连，用以根据用户选择的CSS样式进行CSS样式设置，并在设置完成后生成一层叠样式表文件；

填充内容处理模块，与所述CSS样式设置模块相连，用以对用户选择的填充内容进行处理；

生成模块，与所述CSS样式设置模块以及所述填充内容处理模块相连，用以引入所述层叠样式表文件并生成所述Web页面。

较佳的，所述CSS样式设置模块包括：

分割部，与所述通用模版获取模块相连，用以根据所述CSS样式内容，将所述CSS样式分割为多个选择器；

校验部，与所述分割部相连，用以对所述选择器进行校验；

其中，所述校验部包括：

判断单元，与所述分割部相连，用以判断所述选择器是否存在；

选择器删除单元，与所述判断单元相连，用以删除所述选择器；

创建单元，与所述判断单元相连，用以创建一个CSS文件并将所述选择器写入所述CSS文件；

解析单元，分别与所述创建单元以及所述填充内容处理模块相连，用以对所述CSS文件中的每一个所述选择器的每一个属性逐个进行规则解析校验。

较佳的，所述解析单元包括：

属性判定子单元，与所述创建单元相连，用以判断所述属性是否存在；

属性删除子单元，与所述属性判定子单元相连，用以删除所述属性，给出提示信息并将所述提示信息反馈至客户；

取值判断子单元，与所述属性判定子单元相连，用以判断所述属性的取值是否符合取值规则；

设置子单元，与所述取值判断子单元相连，用以为所述属性设置一默认值并将所述默认值写入所述CSS文件；

添加子单元，分别与所述设置子单元以及所述填充内容处理模块相连，用以将所述CSS文件保存并添加至所述自定义样式列表中

上述技术方案具有如下优点或有益效果：后台从前台获取的参数，可能包含页面标签、选择器定义、文字等信息，这时需要识别那些是标签，哪些标签其实是要显示的文字内容，哪些是选择器，哪些选择器是要显示在页面上的文字内容；完成识别后，做进一步的解析，哪些标签和选择器非法，对于非法的，需要做删除或转换处理，位后续的处理去除错误。这种设计方式，使得页面框架布局以及样式均实现了可定制，同时页面生成的效率提高。

附图说明

参考所附附图，以更加充分的描述本发明的实施例。然而，所附附图仅用于说明和阐述，并不构成对本发明范围的限制。

图1为本发明一种快速生成自定义静态Web页面的方法的流程图；

图2为本发明一种快速生成自定义静态Web页面的方法中对选择器进行校验的流程图；

图3为本发明一种快速生成自定义静态Web页面的方法中进行规则解析校验的流程图；

图4为本发明一种快速生成自定义静态Web页面的装置的结构示意图一；

图5为本发明一种快速生成自定义静态Web页面的装置的结构示意图二；

图6为本发明一种快速生成自定义静态Web页面的装置的结构示意图三。

具体实施方式

下面结合附图和具体实施例对本发明一种快速生成自定义静态Web页面的方法及装置进行详细说明。

实施例一

如图1所示，一种快速生成自定义静态Web页面的方法，包括步骤：

从初始样式列表中选择一基本模版页面，根据用户需求对所述基本模版页面进行处理以获取通用模版页面；

根据用户选择的CSS样式进行CSS样式设置，设置完成后生成一个层叠样式表文件；

根据用户选择的填充内容进行处理；

引入所述层叠样式表文件，生成最终Web页面。

在本实施例中，最初只有一个基本模版页，该基本模版页包含常用标签用以展示数据。当用户需要生成自定义静态Web页面时，根据用户的需求定制一个通用模版页面，所述通用模版页面中包含显示常用内容的标签。具体来说，用户可以通过编写HTML的方式或从所述基本模版页增加和/或删除标签实现标签元素的增删操作，已完成对通用模版页面的布局设计。所述通用模版页面有一个初始样式用于展示最初CSS样式，当对所述通用模版页面的布局设计完成后将其进行保存为模版(存放至所述初始样式列表中)，可供以后进行定义处理。

在根据用户选择的CSS样式进行CSS样式设置的过程中，所述CSS样式包括行距、字体、链接样式等。在对所述通用模版页面进行CSS样式设置的过程中，能够实时进行预览，以便用户观察所述通用模版页面是否符合用户的要求。

在设置完成后生成一个层叠样式表文件后还包括步骤：将所述层叠样式表文件添加到初始样式列表中。这种方式，能够不断的丰富初始样式列表中模版的数量和形式，从而给用户再次进行自定义页面生成时提供了多种模版样本，更利于用户的使用，提高了用户的效率。

此外，在根据用户选择的CSS样式进行CSS样式设置的过程中，用户对CSS样式的选择可以自己编写CSS代码，也可以在自定义样式列表中选择现有的CSS样式，实施CSS样式设置时能够自动生成CSS代码。当用户确定了CSS样式后，在根据用户选择的CSS样式进行CSS样式设置的过程包括对所述CSS样式的校验，所述校验过程包括：

于用户发送Ajax(AsynchronousJavascriptAndXML，异步JavaScript和XML)请求(校验请求)后，根据所述CSS样式内容，将所述CSS样式分割成多个选择器(selector)，对所述选择器进行校验。其中，值得指出的是，当用户确定好CSS样式后，发送Ajax请求(校验请求)，所述CSS样式会以post方式提交至后台以进行处理。

如图2所示，对所述选择器进行校验的过程包括步骤：

判断所述选择器是否存在；

如果所述选择器不存在，删除所述选择器；否则，创建一个CSS文件，将所述选择器写入所述CSS文件；

待所有选择器校验完毕后，对所述CSS文件中每一个选择器的每一个属性逐个进行规则解析校验并获取反馈信息。

如图3所示，对所述CSS文件中每一个选择器的每一个属性逐个进行规则解析校验并获取反馈信息的过程包括步骤：

判断所述属性是否存在；

如果所述属性不存在，删除所述属性，并给出提示信息反馈到页面；否则，判断所述属性的取值是否符合取值规则；

如果符合所述取值规则，则不做处理；否则，为所述属性设置一个默认值并写入所述CSS文件；

当CSS文件中的所有选择器均校验完成后，将所述CSS文件保存并添加到自定义样式列表中，以供用户后续的选择。

具体来说，后台取得前台传来的参数，即用户自定的CSS样式，将所述CSS样式内容给后台。后台取得所述CSS样式后，将所述CSS样式分割成多个选择器，然后逐个对所述选择器进行校验。在对所述选择器进行校验的过程中，先确定所述选择器是否存在。在该过程中，比如用户定义了一个选择器，但是页面中没有该选择器对应的ID属性，则从所述CSS样式中删除该选择器；如果该选择器存在，则创建一个CSS文件，值得注意的是，该CSS文件仅创建一次，将该选择器写入此CSS文件中。待所述选择器全部校验完成后，调用Java的CSSParser和SAC对生成的CSS文件进行解析。该库内置CSS的解析规则CSSRule，利用该规则对每一个选择器的每一个CSS属性逐个进行规则解析校验并给出反馈信息。如果属性不存在，则直接删除该属性，并给出提示信息反馈到页面；否则，判断其取值是否符合取值规则，如不符合则为其设置一个默认值并写入所述CSS文件。当全部校验完成后，将该CSS文件保存并添加到自定义样式列表中，以供用户的选择。

此外，在生成层叠样式表文件后，用户需要在基本模版页面中添加一些填充内容，所述填充内容包括图片、文字、音频等内容。当用户选择完填充内容后，后台会接收所述填充内容对其进行校验、转换等操作，如果所述填充内容包括有图片、音频等多媒体内容，会生成对应标签，并加载用户指定的图片、音频等信息；如果所述填充内容包含文字信内容，对文字进行编码操作。最后，引入所述层叠样式表，生成队中的Web页面。在这个过程中，可以实时预览页面效果，不同的CSS样式预览效果也不一样。用户可以选择导出，即可完成所述最终Web页面的生成。

在本实施例中，关键在于后台对前台数据的解析和校验。后台从前台获取的参数，可能包含页面标签、选择器定义、文字等信息，这时需要识别那些是标签，哪些标签其实是要显示的文字内容，哪些是选择器，哪些选择器是要显示在页面上的文字内容；完成识别后，做进一步的解析，哪些标签和选择器非法，对于非法的，需要做删除或转换处理，位后续的处理去除错误。这种设计方式，使得页面框架布局以及样式均实现了可定制，同时页面生成的效率提高。

实施例二

基于实施例一提出的一种快速生成自定义静态Web页面的方法，本实施例提出了一种快速生成自定义静态Web页面的装置。

如图4所示，一种快速生成自定义静态Web页面的装置，所述装置包括：

通用模版获取模块，用以根据用户选择的基本模版页面和用户需求对所述基本模版页面进行处理以获取通用模版页面；

CSS样式设置模块，与所述通用模版获取模块相连，用以根据用户选择的CSS样式进行CSS样式设置，并在设置完成后生成一层叠样式表文件；

填充内容处理模块，与所述CSS样式设置模块相连，用以根据用户选择的填充内容对所述填充内容进行处理；

生成模块，与所述CSS样式设置模块以及所述填充内容处理模块相连，用以引入所述层叠样式表文件并生成最终Web页面。

具体来说，当用户从初始样式列表中选择一基本模版页面且确定了需求后，通用模版获取模块对所述基本模版页面进行处理以获取通用模版页面。然后CSS样式设置模块根据用户选择的CSS样式进行CSS样式设置，并在设置完成后生成一层叠样式表文件。之后，用户会根据需求选择填充内容，填充内容处理模块根据用户选择的填充内容对所述填充内容进行处理。处理完成后，生成模块引入所述层叠样式表文件并生成最终Web页面。

如图5所示，此外，所述CSS样式设置模块包括：

分割部，与所述通用模版获取模块相连，根据所述CSS样式内容，将所述CSS样式分割为多个选择器；

校验部，与所述分割部相连，用以对所述选择器进行校验。

所述校验部包括：

判断单元，与所述分割部相连，用以判断所述选择器是否存在；

选择器删除单元，与所述判断单元相连，用以删除所述选择器；

创建单元，与所述判断单元相连，用以创建一个CSS文件并将所述选择器写入所述CSS文件；

解析单元，分别与所述创建单元以及所述填充内容处理模块相连，用以待所有选择器校验完毕后，对所述CSS文件中的每一个所述选择器的每一个属性逐个进行规则解析校验。

具体来说，当用户发送校验请求后，分隔部根据所述CSS样式内容，将所述CSS样式分割为多个选择器。判断单元判断所述选择器是否存在，如果不存在，选择器删除单元删除所述选择器；否则，创建单元创建一个CSS文件并将所述选择器写入所述CSS文件。当所有选择器的校验完毕后，解析单元，对所述CSS文件中的每一个所述选择器的每一个属性逐个进行规则解析校验。

如图6所示，其中，所述解析单元包括：

属性判定子单元，与所述创建单元相连，用以判断所述属性是否存在；

属性删除子单元，与所述属性判定子单元相连，用以删除所述属性，给出提示信息并将所述提示信息反馈至客户；

取值判断子单元，与所述属性判定子单元相连，用以判断所述属性的取值是否符合取值规则；

设置子单元，与所述取值判断子单元相连，用以为所述属性设置一默认值并将所述默认值写入所述CSS文件；

添加子单元，分别与所述设置子单元以及所述填充内容处理模块相连，用以当所述CSS文件中的所有所述选择器均校验完成后，将所述CSS文件保存并添加至所述自定义样式列表中。

具体来说，属性判定子单元判断所述属性是否存在，如果不存在，属性删除子单元删除所述属性，给出提示信息并将所述提示信息反馈至客户；否则，取值判断子单元判断所述属性的取值是否符合取值规则。如果不符合所述取值规则，设置子单元为所述属性设置一默认值并将所述默认值写入所述CSS文件。最后，添加子单元将所述CSS文件保存并添加至所述自定义样式列表中。

本实施例用户仅需自定义自己的样式和内容，即可实现快速生成Web页面的要求，极大地提高了开发效率。

对于本领域的技术人员而言，阅读上述说明后，各种变化和修正无疑将显而易见。因此，所附的权利要求书应看作是涵盖本发明的真实意图和范围的全部变化和修正。在权利要求书范围内任何和所有等价的范围与内容，都应认为仍属本发明的意图和范围内。