CN101025738B

CN101025738B - 一种免模板动态网站生成方法

Info

Publication number: CN101025738B
Application number: CN 200610008292
Authority: CN
Inventors: 令狐铁民
Original assignee: TIANMAO DIGITAL ELECTRONIC BUSINESS CO Ltd GUANGZHOU BONDED AREA
Priority date: 2006-02-21
Filing date: 2006-02-21
Publication date: 2013-02-13
Anticipated expiration: 2026-02-21
Also published as: CN101025738A

Abstract

本发明公开了一种免模板动态网站生成方法，主要包括以下步骤：(A)建立页面组件库，供用户在创建网站时调用；(B)从页面件库中调用所需页面组件，并设置用户所需界面内容，然后保存设置；(C)创建页面布局，对页面组件自由排版并保存界面布局及排版设置。所述页面组件库是可扩展页面组件库；所述每个页面组件是包含颜色、字体、显示样式等多种属性的动态可维护页面组件。本发明的方法是基于动态页面组件，实现自由排版，可将用户在创建动态网站时编写程序的工作转变为对页面组件的调用及维护的工作，无需专业的软件工程师、美术设计师就能迅速搭建起极具个性的动态网站。

Description

一种免模板动态网站生成方法

技术领域

本发明涉及一种动态网站生成技术，尤其是一种基于动态页面组件，可自由排版的免模板动态网站生成方法。

技术背景

互联网时代，越来越多的企业，组织都希望通过互联网来宣传自己。他们首先要做的就是拥有一个属于自己的动态内容网站，以随时随地地发布信息和产品，与商业伙伴进行交流。

但在现有的技术条件下，要开发一套包含动态内容的网站需要由专业的软件工程师，美术工程师进行若干时间的开发才能完成；对普通用户来说，只能通过委托专业公司进行开发；现在也有一些提供给非专业人士使用的自助网站生成系统，但这些系统所使用方法都是基于给定的页面模板，网站所有者无法自由对页面的排版进行调整，对字体，色彩进行自定义，生成出来的的网站干篇一律，缺乏个性，因此这类方法也具有较大的局限性，无法按照自己的喜好对界面进行排版及显示样式设定。

发明内容

本发明目的在于克服现有技术的缺陷提供一种既能基于动态页面组件，又能自由排版的动态网站生成方法。

为达到上述目的，本发明采用如下技术方案：

一种免模板动态网站生成方法，其特征在于，描述了页面组件定义规范、页面布局定义规范、页面容器定义规范、组件在容器中的位置定义规范，并包括以下步骤：

A、建立页面组件库，供用户在创建网站时调用页面组件的xml定义规范是：一类页面组件用一个元素定义，此元素内含多个属性或子元素，根据组件不同，子元素和属性可自行扩展，组件定义规范如下：

每个组件的xml语言描述分为三部分：

第一部分为类型标签，记录组件类型及以下五个重要属性：组件名；组件ID；组件放置在页面容器组件中的x坐标；组件放置在页面容器组件中的y坐标；组件放置在页面容器组件中的z坐标；

第二部分为属性标签，是第一部分的子节点，记录这个组件各种可配置的属性，每一类页面组件都有不同的属性，但它必须包含一个重要的样式属性，这个属性将这个页面组件显示风格记录在一个样式表中；

第三部分为内容标签，是第一部分的子节点，这部分记录了这个页面组件包含的内容；每种页面组件记录内容的方法根据其页面组件类型有所区别；

B、从页面组件库中调用所需页面组件，将页面组件的属性信息及内容信息通过xml语言进行描述，描述完后以xml语言格式保存进数据库中，并设置用户所需界面内容，然后保存设置；

C、创建页面布局，调用页面容器组成页面布局，并将页面组件置于页面容器中，完成对页面组件的自由排版，并保存界面布局及排版设置，页面布局及排版设置完成后的信息用xml语言按照指定方法进行定义并保存，具体包括以下步骤：

C1、将一个页面自定义为一行表格上下拼接组成，每一行表格称为一个容器，每个容器可以自定义为多个格子，页面容器用xml语言定义的规范如下：

一个元素定义一个容器，每个元素至少包含一个属性，所述属性定义所述容器的格子个数；

多个页面容器组成一个页面布局，将此页面布局信息用xml语言进行定义，定义规范如下：

一个元素定义一个页面布局，此元素下含有多个子元素，每个子元素表示一个页面容器；

C2、将配置的页面组件放置在配置页面容器的相应格子中；

C3、通过三维坐标对所配置的页面组件进行定位即并保存；所述三维坐标是这样定义的：

x：在一个容器中，页面组件所处第几个格子，从左向右，由1开始计数。

y：在一个格子里，页面组件所处第几位，从上往下数，由1开始计数。

z：在一个页面里，页面组件所处第几个容器里，从上往下数，由1开始计数；

C4、将配置完成的页面信息xml语言进行定义并保存进数据库定义规范如下：

一个根元素定义一个页面信息，此根元素至少含三个子元素，分别表示：页面布局信息、页面所含组件信息、组件在页面布局中的位置信息；

所述页面布局信息元素描述本页面包括的容器个数，以及所述容器包括的格子个数；

所述页面所含组件信息元素描述每个组件的名字及内容；

所述组件在页面布局中的位置信息元素描述每个组件在容器中的位置，所述位置用三维坐标系来定义。

D、将排版完成后页面显示解析，首先，读取页面配置文件，并依次读取每个容器得到容器的格数，对容器的每一格，从页面组件配置文件中读出放在此格的组件，解析出页面及组件；之后，判断每个格子是否解析完毕，若是读取下一个容器，否则继续进行本格子内的读取；最后，判断每个容器解析是否完毕，若是，则解析完，全部页面及组件，否则，读取下一容器。

上述免模板动态网站生成方法，所述步骤B还包括：

B1、从页面组件库中选择所需的页面组件；

B2、设置页面组件属性，配置成期望的显示样式；

B3、进行页面组件内容维护；

B4、将属性信息及内容信息用xml语言进行描述，然后保存。

上述免模板动态网站生成方法，所述步骤C还包括：

上述免模板动态网站生成方法，所述步骤C2中每个格子里的多个页面组件上下排列。

上述免模板动态网站生成方法，所述每个格子的大小可自定义或根据页面组件的大小自由伸缩。

上述免模板动态网站生成方法，所述步骤A中页面组件库是可扩展页面组件库。

上述免模板动态网站生成方法，所述步骤A中页面组件库包括：带图片的信息列表页面组件、单张图片页面组件、图片列表页面组件、链接列表页面组件、导航页面组件、搜索页面组件、网上调查页面组件、文字信息页面组件等。

上述免模板动态网站生成方法，所述每个页面组件是包含颜色、字体、显示样式等多种属性的动态可维护页面组件。

与现有技术相比，本发明的方法具有以下优点：

本发明的方法基于动态页面组件，实现自由排版，可将用户在创建动态网站时编写程序的工作转变为对页面组件的调用及维护的工作，大大降低了工作难度，无需专业的软件工程师、美术设计师就能迅速搭建起极具个性的动态网站，大大节约了时间和成本，能为企业及社会创造出更多的效益。

本发明方法的页面组件库可以根据需要随意扩展，每个页面组件也都是包含颜色、字体、显示样式等多种属性的动态页面，用户可按照自己的喜好对界面进行排版及显示样式设定，有利于根据需要及时维护更新网站内容及显示样式。

附图说明

图1是本发明实施例的动态网站设计流程图；

图2是本发明实施例由后台进程完成的页面解析和发布流程图；

图3是本发明创建的页面组件库示意图；

图4是将网易首页按本发明创建的页面组件进行分解的示意图；

图5是本发明实施例页面组件调用及保存流程图；

图6是本发明实施例页面组件显示流程图；

图7是现有技术网易首页页面布局示意图；

图8是本发明实施例中容器定义示意图；

图9本发明实施例中用来对页面组件定位的三维坐标定义图；

图10是本发明实施例对页面组件排版完成后页面显示解析流程图。

具体实施方式

图1是本发明实施例动态网站设计流程图，参考图1，本发明的免模板动态网站生成方法，包括：

步骤A：建立页面组件库，供用户在创建网站时调用；

步骤B：从页面组件库中调用所需页面组件，并设置用户所需界面内容，然后保存设置；

步骤C：创建页面布局，对页面组件自由排版并保存界面布局及排版设置。

所述步骤B还包括：(B1)从页面组件库中选择所需的页面组件；(B2)设置组件属性，配置成期望的显示样式；(B3)进行页面组件内容维护；(B4)将属性信息及内容信息用xml语言进行描述，然后保存。

所述步骤C还包括：(C1)将一个页面自定义为一行表格上下拼接组成，每一行表格称为一个容器，每个容器可以自定义为多个格子(C2)读取配置的页面组件放置在配置容器的相应格子中；(C3)通过三维坐标对所配置的页面组件进行定位即保存。

图2是由后台进程完成的页面解析和发布流程图，首先用户请求所需页面，其次由后台进程读取布局及排版设置文件，并解析出布局及排版，然后读取页面组件配置文件，解析出每个组件的显示样式及内容并显示给用户。

下面结合附图3-10详细说明本发明的实施方式：

所述步骤A中建立页面组件库是通过分析大多数网站的功能模块，根据需要建立的可扩展的通用页面组件库。如图3所示，大多数网站基本由带图片的信息列表页面组件1、搜索页面组件2、网上调查页面组件3、链接列表页面组件4、单张图片页面组件5、导航页面组件6、图片列表页面组件7、文字信息页面组件8组成。

如图4所示网易的首页就是由以上页面组件组合而成，其中包括：单张图片页面组件5、图片列表页面组件7、链接列表页面组件4、带图片的信息列表1等。由此可根据需要建立可扩展的通用页面组件库，用户可根据需要对页面组件库进行调用和组合，以搭配出满足需要的动态网站。

图5是页面组件的调用及保存流程图，参考图5，通过流程说明页面组件的调用及保存过程，这个过程类似于编码过程，即用xml语言将页面组件的设置及内容进行描述并保存。首先从页面组件库中选择要用的页面组件，其次设置页面组件属性，配置成期望的显示样式，并进行内容维护，然后将属性信息及内容信息用xml语言进行描述并保存。页面组件的属性描述及内容需通过xml语言按照一定的规范进行描述，描述完后以xml语言格式保存进数据库中。以下是一个信息列表页面组件在设置好属性及内容后的xml语言描述样例：

<property withPic＝”true”pic＝”images/news.jpg”picWidth＝”90”

picHeight＝”90”name＝”姚明领队火箭胜尼克斯”url＝”getNews.jsp？id＝123“showMore”＝”true”style＝”1.css”/>

</assembly>

每个组件的xml语言描述可分为三部分：

第一部分为类型标签，如：<assembly type＝”info”name＝”新闻快讯”id＝”14”>记录其属于哪一类页面组件及其它一些重要属性；

第二部分为属性标签，如：<property withPic＝”true”pic＝”images/news.jpg”picWidth＝”90”picHeight＝”90”name＝”姚明领队火箭胜尼克斯”url＝”getNews.jsp？id＝123“showMore”＝”true”style＝”1.css”/>记录这个组件各种可配置的属性，每一类页面组件都有不同的属性，但它都包含一个重要的style属性，这个属性将这个页面组件显示风格记录在一个css样式表中，例如颜色，字体等等。通过属性标签，页面组件的显示风格可以千变万化。

第三部分为内容标签，如：

记录了这个页面组件包含的内容。每种页面组件记录内容的方法都有所区别。

通过这种设计，一个页面就由多个这样的assembly标记组成，即一个页面包含多个组件。即按照如下的结构进行描述：

<page>

</assembly>

</assembly>

</page>

图6是页面组件的显示流程图，参考图6，该流程类似于解码过程，即用xslt语言按照一定的规范解析页面组件的属性及内容，将其按照设定的方式进行还原。

下面是信息列表组件的解析过程样例的部分代码：

<？xml version＝″1.0″encoding＝″UTF-8″？>

<xsl:stylesheet version＝″1.0″

xmlns:xsl＝″http://www.w3.org/1999/XSL/Transform″>

<xsl:output method＝″html″encoding＝″gb2312″indent＝″no″/>

<！--createInfoList(assembly)生成信息列表显示模板函数，可定义是否含标题新闻，是否流动，标题截取字数，是否显示日期-->

<xsl:template name＝″infoList_createList″>

<！--参数定义-->

<！--列表类型-->

<xsl:iftest＝″$withPic＝′false′″>

<！--是否流动-->

<xsl:choose>

</xsl:choose>

</xsl:if>

<！--带图片信息-->

<xsl:iftest＝″$withPic＝′true′″>

<tr>

<！--此格显示图片-->

</td>

<！--此格显示信息列表-->

<！--是否流动-->

<xsl:choose>

</xsl:choose>

</td>

</tr>

</table>

</xsl:if>

</xsl:template>

<！--显示信息列表-->

<xsl:template name＝″getInfoList″>

<！--参数定义-->

<！--列表显示-->

<xsl:for-each select＝″$assembly/Part″>

</xsl:for-each>

<xsl:iftest＝″$showMore＝′true′″>

</p>

</xsl:if>

</xsl:template>

</xsl:stylesheet>

解析完成后，即可显示所配置页面组件的内容。

所述步骤C创建页面布局，对页面组件自由排版并保存界面布局及排版设置是这样实现的：

图7是网易首页的布局图，参考图7，可以看出，该页面是由9～15共七个行表格上下拼接起来的，因此，设计者可以将一个页面看成由多个一行表格上下拼接组成，每一个表格称为一个容器，它可以由多列组成，即有多个格子。每个格子可以成为放置一个或多个页面组件的基本单位，在一个格子里，多个页面组件只能上下排列，不能左右排列。如图8所示：通过将页面划分为多个容器，多个格子，将页面组件分别置于每个格子中，并且可以在不同的格子之间切换，每个格子宽度可以自定义或根据界面组件的大小自动伸缩，这样就实现对页面组件的自由排版。

一个页面的布局描述也可以通过xml语言描述并存储，如下：

</layout>

通过这个描述文件，xslt语言就可将其还原成包含了指定表格的网站界面。

根据这个设计，我们可以创建好一系列容器组件供用户选择，例如一格容器，两格容器，三格容器，自定义格数容器。用户在布局时只需将想要的容器组件排列在页面上即可，每格可放置一个或多个页面组件。

在设计页面时，可以通过对页面组件的拖拉，放置到不同的格子里实现界面的自由排版。设计完后，通过三维坐标来对每个页面组件进行定位，准确保存每个页面组件的所处位置，以便在发布时，能够重现。

参考图9，所述三维坐标定义如下：

z：在一个页面里，页面组件所处第几个容器里，从上往下数，由1开始计数。

根据上述三维坐标定义，页面组件16的坐标为(2，1，4)，页面组件17的坐标为(2，2，2)，页面组件18的坐标为(1，1，2)。

每个组件的坐标值可以记录在其本身的xml语言描述里，通过增加x，y，z属性即可准确记录。如下：

</assembly>

图10是排版完成后页面显示解析流程图，排版完成后，排版的结果存储在页面布局描述文件及页面组件描述文件中。在页面显示时，需要对这两个文件进行解析，以输出正确的页面文件。解析程序可以用xslt语言编写，解析流程如图10所示，经过该页面显示过程，即可创建按照指定排版所需的布局页面。

虽然本发明已以较佳实施例公开如上，然其并非用以限定本发明，任何熟悉此项技术者，在不脱离本发明之精神和范围内，当可做些许更动与润饰，所作更动与润饰仍属于本发明所附的权利要求保护范围之内。

Claims

1.一种免模板动态网站生成方法，其特征在于描述了页面组件定义规范、页面布局定义规范、页面容器定义规范、组件在容器中的位置定义规范，并包括以下步骤：

A、建立页面组件库，供用户在创建网站时调用，页面组件的xml定义规范是：一类页面组件用一个元素定义，此元素内含多个属性或子元素，根据组件不同，子元素和属性可自行扩展，组件定义规范如下：

每个组件的xml语言描述分为三部分：

C2、将配置的页面组件放置在页面容器的相应格子中；

x：在一个容器中，页面组件所处第几个格子，从左向右，由1开始计数；

y：在一个格子里，页面组件所处第几位，从上往下数，由1开始计数；

C4、将配置完成的页面信息用xml语言进行定义并保存进数据库，定义规范如下：

所述页面所含组件信息元素描述每个组件的名字及内容；

所述组件在页面布局中的位置信息元素描述每个组件在容器中的位置，所述位置用三维坐标系来定义；

2.根据权利要求1所述的免模板动态网站生成方法，其特征在于，所述步骤B还包括：

B1、从页面组件库中选择所需的页面组件；

B2、设置组件属性，配置成期望的显示样式；

B3、进行页面组件内容维护；

B4、将属性信息及内容信息用xml语言进行描述，然后保存。

3.根据权利要求1所述的免模板动态网站生成方法，其特征在于，所述步骤C2中每个格子里的多个页面组件上下排列。

4.根据权利要求3所述的免模板动态网站生成方法，其特征在于，所述每个格子的大小可自定义或根据页面组件的大小自由伸缩。

5.根据权利要求1所述的免模板动态网站生成方法，其特征在于，所述页面组件库是可扩展页面组件库。

6.根据权利要求5所述的免模板动态网站生成方法，其特征在于，所述页面组件库包括：带图片的信息列表页面组件、单张图片页面组件、图片列表页面组件、链接列表页面组件、导航页面组件、搜索页面组件、网上调查页面组件、文字信息页面组件。

7.根据权利要求6所述的免模板动态网站生成方法，其特征在于，所述每个页面组件是包含颜色、字体、显示样式多种属性的动态可维护页面组件。