专利名称：一种可视化标签及使用其生成网页的方法
技术领域：
本发明涉及一种网页动态技术，具体的说，是用于网页的一种可视化标签及使用 其生成网页的方法。
背景技术：
在互联网中，网页由服务器生成并传到客户端的浏览器上显示。目前，一般网页都 是在服务器上将网页模板绑定与该网页相关的数据动态创建的。动态创建网页的三个要素 是网页模板、网页数据和动态网页技术。其中，网页模板定义了网页的布局和框架，是网页 的静态代码部分；网页数据一般是同一个模板生成的多个网页之间不同的部分，是网页的 动态代码部分；而动态网页技术主要是负责分析网页模板，解析模板中的标签和脚本，并结 合网页相关数据，生成最终的网页代码。目前流行的动态网页技术有很多种，以ASP(Active Server Page，即动态服务器 页面)、PHP (Hypertext Pr印rocessor，即超级文本预处理语言)、JSP (Java Server Pages) 为例，都有自己的网页模板规范和语法，另外，还有一些可以扩充的技术，如JSP标签库，让 人们可以自已定义网页标签，自己进行标签的解析和代码替换。尽管技术和实现有所不 同，但基本思路都一样，就是在网页的HTML(HyperTextMark-up Language,即超文本标记 语言或超文本链接标示语言)代码中加入相应的自定义标签，如〈JSPdnclude〉，<% = request. getParameter (“ id”) % >等，这些标签都不是基本HTML标签，也就是必须在服务 器端经过运行环境的解析才能生成最终的HTML代码，而标签本身，网页浏览器并不识别。 也就是，这种网页模板在浏览器中直接预览，我们是看不到标签的颜色、尺寸和位置的。这 种网页模板的不足之处是不能给人们直观感受，特别是不熟悉相关动态网页技术的人，根 本不能从网页模板来判断最终网页会是什么形态和布局。
发明内容
本发明的目的是提供一种可视化标签及使用其生成网页的方法，可视化标签能够 被网页浏览器识别，无须在服务器端经过运行环境解析，由此可视化标签生成的网页模板 在浏览器中可以直接预览。本发明是这样实现的一种可视化标签，所述可视化标签采用HTML中的基本标签 来实现；所述可视化标签还包括一标识；所述可视化标签具有和最终代码相似的尺寸；所述可视化标签还包括多个参数及参数值；所述参数及参数值定义了使用网页数 据来生成替换该标签的最终HTML代码；所述参数至少包括标签的类型参数和查询参数。所述可视化标签具有和最终代码相似的尺寸是通过层叠样式单实现。所述标签的查询参数的值放在特定区段中。一种使用上述的可视化标签生成网页的方法，包括以下步骤
a定义网页模板，模板中包含静态代码部分和动态代码部分，所述动态代码部分即 为所述可视化标签；b准备网页数据；c解析可视化标签网页模板，首先识别所述可视化标签中的所述标识，再分析所述 可视化标签中的参数及参数值，依据所述可视化标签中的定义进行网页数据的查询，将查 询结果组装成最终的HTML代码并替换相应标签，生成最终网页。所述网页数据存放在数据库中，内容至少包括网页编号、标题、网页内容、网址、所 属栏目。本发明并不排斥传统的动态网页技术，而是可以在这些动态网页技术之上构造， 但根本差别在于本发明涉及的网页模板是由静态页面代码和可视化标签组成的，这种可视 化标签在普通的网页浏览器中是可见的；并且该模板里不包含动态网页技术本身的标签。本发明具有以下有益效果本发明可视化标签能够被网页浏览器识别，无须在服务器端经过运行环境解析， 由此可视化标签生成的网页模板在浏览器中可以直接预览。因此应用本发明可视化标签及 其生成的网页的方法能从网页模板看出最终网页是什么形态和布局，制作网页及其方便， 即使不懂编程的人员也能轻松制作网页。
下面结合附图和
具体实施方式
对本发明作进一步说明。图1为采用本发明可视化标签生成网页的方法示意图；图中S1_1网页模板，S1-2网页数据，S1-3标签解析，Sl_4最终网页
具体实施例方式下面用一个实际的例子对本发明做具体说明。一种可视化标签，采用HTML中的基本标签来实现，如<div>、<span>、<input>，不 管是哪一种，最重要的是普通网页浏览器能够识别并显示。可视化标签还包括一标识，使之区别于普通HTML标签。如在标签里统一设置属性 值name =，，myTag，，。可视化标签具有和最终代码相似的尺寸，这是通过CSS (层叠样式单)实现。如在 标签里加入属性:style =" width 90% ；height :200px ； ”。可视化标签还包括多个参数及参数值；所述参数及参数值定义了使用网页数据 来生成替换该标签的最终HTML代码；所述参数至少包括标签的类型参数和查询参数。如 datetype为标签的类型参数，compvalue为查询参数。标签的查询参数的值放在特定区段中，如compvalue的值放在CDATA区段中。采用本发明可视化标签生成网页的方法如图1所示，Sl-I为网页模板，S1-2是与 本网页相关的网页数据，S1-3是标签解析，对网页模板进行分析，并绑定网页数据，从而生 成最终网页S1-4。整个方法实施的步骤是第一步定义网页模板S1-1，模板中包含静态代码部分和动态代码部分(符合本发明规范的可视化标签)。附录1是一个实际的网页模板S1-1，其中有三个可视化标签，即三个name的值 为”myTag”的input标签。Input标签是浏览器可以识别的，因为标签里的style中定义的 宽度、长度和背景颜色都会在浏览器中显示出来，技术人员可以很容易地识别。第二步准备网页数据S1-2。网页数据S1-2 —般存放在数据库中，格式一般为网页编号、标题、内容、网址、所 属栏目和其他一些自定义字段。附录2中列举了几条与本网页相关的网页数据S1-2实例。第三步标签解析S1-1，具体为解析网页模板S1-1，依据可视化标签中的定义进 行网页数据S1-2的查询，将查询结果组装成最终的HTML代码并替换相应标签，生成最终网 页 S1-4。具体解析的方法是首先找出网页模板Sl-I中name的值为“myTag”的所有可视化标签；再依次分析 每个标签中相关属性值。标签里的datetype和compvalue的属性值定义了标签的类型和查询参数 (compvalue的值中可能包含HTML代码，为避免破坏input标签的完整性，因此统一将它的 值放在CDATA区段中)，在附录1所示的模板中第一个input标签datatype的值为title，含义是取得网页数据S1-2中的标题。第二个input标签datatype的值为content，含义是取得网页数据S1-2中的内容。第三个input标签datatype的值为list，含义是生成一个列表；参考compvalue 中的参数column 栏目1，查询条件所属栏目的值等于“栏目1”order :date desc，按照 date 列降序排列perPage :5，限定每一页只列出5条htmlVal :<li><a href = {url} target = _blank> {title} </a></li>,查询出来 的网页数据按照“<liXa href = {url} target = -blank〉{title} </a></li>”的格式生成 HTML代码。按照以上规则进行网页数据S1-2的查询和格式化，这三个可视化标签分别被替 换成相应的HTML代码，生成的最终网页S1-4如附录3所示。附录1 网页模板示例<html><head><title> 无标题文档 </title></head><body><input name=" myTag"style=" width :90%;height :20px !background—color :#fi9900〃 value =I^
5题compvalue = “ < ！ [CDATA[index:y]]>" datatype = " title" /></p><input name = " myTag"style = “ width 90% ；height :200px ；background-color :#ff9900〃 value = 内容compvalue =" < ！ [CDATA[index:n]]>〃 datatype =" content" /></p><input name = " myTag"style = “ width 90% ；height :100px ；background-color :#ff9900〃 value = 列表compvalue = " < ！ [CDATA[column 栏目 l$order :datedesc$perPage :5$htmlVal :<li><a href = {url}target = _blank>{title}</a></li>]]>" datatype =" list" /></p></body></html>附录2 网页数据示例
编号标题内容网址所属栏目* * *1网页标题1
正文内容1</ρ>articlel. html栏目1 · ·2网页标题2
正文内容2</p>article2. html栏目1 · ·3网页标题3
正文内容3</p>article3. html栏目1...4网页标题4
正文内容4</p>article4. html栏目1...5网页标题5
正文内容5</p>article5. html栏目1 · ·6网页标题6
正文内容6</p>article6. html栏目2... 附录3:生成网页示例<html><head><title> 无标题文档 </title></head><body>
网页标SIl
</p>
正文内容1</ρ>
</ρ>
<Ρ>
<li><ahref =article1. htmltarget =
<li><ahref =article2.,htmltarget =
<li><ahref =article3.,htmltarget =
<li><ahref =article4.,htmltarget =
<li><ahref =article5..htmltarget =
</p>
</body>
</html>
blank〉网页标题 2</aX/li> blank〉网页标题 3</aX/li> blank)网页标题 4</aX/li> blank〉网页标题 5</a></li>
权利要求
一种可视化标签，其特征在于，所述可视化标签采用HTML中的基本标签来实现；所述可视化标签还包括一标识；所述可视化标签具有和最终代码相似的尺寸；所述可视化标签还包括多个参数及参数值；所述参数及参数值定义了使用网页数据来生成替换该标签的最终HTML代码；所述参数至少包括标签的类型参数和查询参数。
2.如权利要求1所述的可视化标签，其特征在于，所述可视化标签具有和最终代码相 似的尺寸是通过层叠样式单实现。
3.如权利要求1或2所述的可视化标签，其特征在于，所述标签的查询参数的值放在特 定区段中。
4.一种使用如权利要求1所述的可视化标签生成网页的方法，其特征在于，包括以下 步骤a定义网页模板，模板中包含静态代码部分和动态代码部分，所述动态代码部分即为所 述可视化标签；b准备网页数据；c解析可视化标签网页模板，首先识别所述可视化标签中的所述标识，再分析所述可视 化标签中的参数及参数值，依据所述可视化标签中的定义进行网页数据的查询，将查询结 果组装成最终的HTML代码并替换相应标签，生成最终网页。
5.如权利要求4所述的使用可视化标签生成网页的方法，其特征在于，所述网页数据 存放在数据库中，内容至少包括网页编号、标题、网页内容、网址、所属栏目。
全文摘要
本发明涉及一种网页动态技术，具体的说，是用于网页的一种可视化标签及使用其生成网页的方法。一种可视化标签，所述可视化标签采用HTML中的基本标签来实现；所述可视化标签还包括一标识；所述可视化标签具有和最终代码相似的尺寸；所述可视化标签还包括多个参数及参数值；所述参数及参数值定义了使用网页数据来生成替换该标签的最终HTML代码；所述参数至少包括标签的类型参数和查询参数。可视化标签能够被网页浏览器识别，无须在服务器端经过运行环境解析，由此可视化标签生成的网页模板在浏览器中可以直接预览。
文档编号G06F17/30GK101976260SQ20101053249
公开日2011年2月16日 申请日期2010年11月4日 优先权日2010年11月4日
发明者严洪涛, 沈亦可 申请人:上海银杏界信息科技有限公司