CN103793216B - 一种所见即所得式的线上网站建设方法 - Google Patents

Abstract

一种所见即所得式的线上网站建设方法，它包括如下步骤：①、用户通过Web站点调用数据库信息，并建立用户自己的网页页面；同时数据库返回网页页面数据，并在Web站点将网页页面显示出来；②、用户利用Ajax技术创建模板编辑模块，并将创建的模板编辑模块放在以建立好的网页页面中；所述的模板编辑模块存放在数据库中；③、当用户对所得的模板编辑模块进行编辑时，通过Javascript将更改数据发送至数据库，数据库返回更改结果数据至模板编辑页面，同时将编辑后的模板编辑模块显示在网页页面上。

Description

一种所见即所得式的线上网站建设方法

技术领域

本发明涉及一种建设网站的方法，具体地说是涉及一种所见即所得式的线上网站建设方法。

背景技术

随着国际互联网的迅速发展，网站的数量呈几何倍数地快速增长。除了传统的企事业单位以外，个体工商户、个体从业者、自由职业者也都需要建设自己网站，把它作为一个展示、宣传的途径和渠道。而建设一个网站，则需要网站拥有者提供域名、网站空间、ip地址、网站主机和网页等内容。网站拥有者要么自己来制作和维护网站（这就要求其具备相当水平的计算机和网络技术），要么委托专业的网络公司来制作网站，不仅花费资金很高，而且整套程序还非常繁琐。

近两年来，一种名为‘自助建站’的技术逐渐开始成熟。所谓自助建站，就是使用者利用其他网站自动提供的域名、网站空间、ip地址和网站主机，通过使用其提供的各种网站模板和内容管理系统，根据自己的需要来建设及更新自己的网站，从而使得网站建设与维护都变得容易起来。与自己单独建设网站相比较，不仅步骤简单，其费用也大幅度地降低了。

但是，目前的网站自助建设技术其普遍存在的一个缺点是：使用者在编辑、维护自己的网站及网页内容时，无法实时看到最终的效果。只能在编辑结束后，通过‘预览’功能或者通过登录网站，才能看到最终的网站显示效果。其编辑过程既不直观，又繁琐，还常常发生‘最终效果与预期效果不一致’的情况，往往需要反复调整，使得网站的编辑、维护时间浪费许多，维护成本大大增加。

发明内容

本发明为解决上述问题而提出一种所见即所得式的线上网站建设系统及方法，主要目的希望能够利用本发明，使得使用者能够以真正的‘所见即所得’的方式，编辑、维护自己的网站架构和网页内容。

为实现上述目的，本发明采用以下技术方案：

一种所见即所得式的线上网站建设方法，它包括如下步骤：

①、用户通过Web站点调用数据库信息，并建立用户自己的网页页面；同时数据库返回网页页面数据，并在Web站点将网页页面显示出来；

②、用户利用Ajax技术创建模板编辑模块，并将创建的模板编辑模块放在以建立好的网页页面中；所述的模板编辑模块存放在数据库中；

③、当用户对所得的模板编辑模块进行编辑时，通过Javascript将更改数据发送至数据库，数据库返回更改结果数据至模板编辑页面，同时将编辑后的模板编辑模块显示在网页页面上。

所述的模板编辑模块按类别存放在数据库中。

在所述的网页页面上设置控制按钮，控制按钮触发模板编辑模块启动工作。

采用上述技术方案的本发明，对于使用者来说，其编辑和维护过程所面对的网站架构及网页效果，与网站实际运行时的效果完全相同，从视觉效果来看，编辑状态完全等同于运行状态。这样，编辑、修改过程不仅简单、方便，而且非常直观，减少了编辑和维护的次数，提高了工作效率，降低了维护成本，非常适合一般使用者、尤其是一般计算机操作人员的操作习惯。

附图说明

图1是本发明关于网站底层数据的流程图。

图2是本发明关于建置网站的流程图。

图3是本发明关于登录验证后进入网站建置的实施例。

图4是本发明关于站点控制面板的实施例。

图5是本发明关于页面控制面板的实施例。

图6是本发明关于模块控制面板的实施例。

图7是本发明关于完成建置退出后网站真实展现的实施例。

图8是本发明关于网站底层设计的原理框图。

具体实施方式

如图1所示，一种所见即所得式的线上网站建设方法，主要采用Ajax技术实现，Ajax的核心是JavaScript对象XmlHttpRequest，使用它可以构建更为动态和响应更灵敏的Web应用程序。该方法的关键在于对浏览器端的JavaScript、DHTML和与服务器异步通信的组合。这种强大的力量可以使应用程序更加自然和响应灵敏，从而提升用户的浏览体验。它包括如下步骤：

①、用户通过Web站点调用数据库信息，并建立用户自己的网页页面；同时数据库返回网页页面数据，并在Web站点将网页页面显示出来；

②、用户利用Ajax技术创建模板编辑模块，并将创建的模板编辑模块放在以建立好的网页页面中；所述的模板编辑模块存放在数据库中；

③、当用户对所得的模板编辑模块进行编辑时，通过Javascript将更改数据发送至数据库，数据库返回更改结果数据至模板编辑页面，同时将编辑后的模板编辑模块显示在网页页面上。

所述的模板编辑模块按类别存放在数据库中。

在所述的网页页面上设置控制按钮，控制按钮触发模板编辑模块启动工作。

在Ajax之前，Web站点强制用户进入提交/等待/重新显示范例，用户的动作总是与服务器的“思考时间”同步。Ajax提供与服务器异步通信的能力，从而使用户从请求/响应的循环中解脱出来。用户通过可视化界面，借助ajax技术，修改页面布局及模块内容，并将修改的内容提交到数据库且在编辑实时显示修改结果。详见附图1。

利用Ajax的这些技术特点，我们开发了这样一个具有桌面风格的（desktop-like）企业级的建站系统。页面的内容都以模块的形式显示出来，每个模块就是一个功能组，譬如一个留言板，一个搜索栏都是一个模块，用户通过配置站点――新增页面――增加模块的步骤完成网站的建设，这些模块都是已经开发的成型的功能组，每个功能组都有一个控制面板，用户通过控制面板来完成显示、内容维护等操作，在维护一个模块的同时不影响其他模块的正常显示，配置的页面和最终的显示页是同步的。由于采用了Ajax技术，每次模块的更改只向服务器提交当前模块的数据而不是整个页面，所以操作起来就像桌面的应用速度非常快，详见附图8。

请参照图2是本发明关于建置网站的流程图。用户在登录验证后进入自己的站点维护页面，站点维护页面同在互连网供人浏览的界面基本保持一致，以此达到所见即所得的效果（What You See Is What You Get,WYSIWYG）,可以通过对比图3和图7看出维护界面同浏览界面之间的差别仅存在于跟随在每一个控制对象的操作按钮，这些按钮在登录前的浏览界面里是看不到的，也就是说外人是无法更改站点的，而在登录确认后这些控制按钮出现并跟随在每个操作对象的右上方，点击即可更改当前对象。这些操作对象分为三类，即站点、页面、模块。他们之间的关系是每个用户只会有一个站点对象，一个站点对象包括复数个页面，一个页面包括复数个模块。模块是一个站点的最基本对象。

当用户第一次登录系统后，系统默认站点只有一页，就是首页，这时用户可以通过站点的控制面板来更改站点的样式及其他站点属性，进入站点控制面板的方法是点击整个页面最右上脚的控制按钮。请参照图3关于登录验证后进入网站建置的实施例。同时也可以新建页面，这些新建的页面可以作为此站点的分频道，点击站点页头下方的“新建页”链接完成此操作，在出现的页面控制面板内完成对当前页面的设置。如模块的排列方式页面的名称等等。新建页面后开始给页面增加模块，点击页面上的增加模块按钮进入模块库内选择，在模块库内有已经开发好的模块供用户选择，包括留言板、企业名片、企业地图、信息发布等等功能。

请参考图4是本发明关于站点控制面板的实施例，在这里用户可以通过调色板调整整个站点的背景颜色、通过站点样式设置从样式库中选取样式并应用的自己站点上，所谓样式就是页面的展示方式及模块的展示方式，通过网站题头的设置选取自己喜欢的网站页头，网站页头的展现方式多种多样，可以从已有的资源库中选取FLASH或图片，也可以自己制作FLASH或图片上传后直接应用。还可以通过站点广告设置给自己的网站添加对联广告等内容。

请参考图5是本发明关于页面控制面板的实施例，点击“首页”、“第一页”、“第二页”…旁的控制按钮进入此页的控制面板，页面控制面板会下拉出来位于页面导航的下面，在控制面板内用户可以选取当前页面应用的页面布局，模块的排列方式，并可以修改页面的名称，如需建立一个“关于我们”的频道，则可以在控制面板的页面名称编辑框内输入“关于我们”即可。

请参考图6是本发明关于模块控制面板的实施例，点击当前页面的增加模块按钮即可从模块库中选取需要的模块添加到当前页面上，“增加模块”按钮根据用户选择的页面布局显示，如用户选择的页面布局是两列，那么页面下方会出现两个“增加模块”按钮，点击那一列的“增加模块”按钮就在当前列增加模块。模块库的内容非常丰富，有企业常用的留言板、企业简介、企业名片、企业地图、链接服务、站内搜索，新闻发布栏、供求信息栏等等。它们都是已经开发好的独立单元，符合当前流行的构件式编程思想，用户可以象搭积木一样搭建一个个性化的网站。这些模块每一个都有一个特定的控制面板，如图6上的模块1至模块5，它们可以是五个不同的模块，每个模块的右上角均有一个控制按钮，点击控制按钮即在本页当前模块的位置出现此模块的控制面板，在控制面板中用户可以更改当前模块的一些属性，例如点击模块4的控制按钮后，原模块4的位置上随即出现设置界面，而整个页面的其他部分并不随之变化，在设置界面里用户可以设置当前模块的名称，显示方式等等属性，假如模块4是一个供求信息模块，那么用户可以从文字列表，图片列表，图片橱窗等几种显示方式中任选一种，同时还可以设置当前模块内显示的信息的条数。

请参考图7是本发明关于完成建置退出后网站真实展现的实施例，在完成网站的阶段性编辑后可以退出看到编辑后的网站的样子，由于网站编辑的状态和最终编辑后的效果是完全一致的，所以我们并不额外再提供网站预览的功能，用户可以随时再次登录后继续网站的编辑，对站点、页面、模块三类对象作出自己满意的调整。

Claims (3)

1.一种所见即所得式的线上网站建设方法，其特征在于，它包括如下步骤 ：

①、用户通过 Web 站点调用数据库信息，并建立用户自己的网页页面；同时数据库返回网页页面数据，并在 Web 站点将网页页面显示出来；

②、用户利用 Ajax 技术创建模板编辑模块，并将创建的模板编辑模块放在已建立好的网页页面中；所述的模板编辑模块存放在数据库中；

具体包括：

（1）当用户第一次登录系统后，系统默认站点只有一页，就是首页，这时用户通过站点的控制面板来更改站点的样式及其他站点属性，进入站点控制面板的方法是点击整个页面最右上脚的控制按钮；同时新建页面，这些新建的页面作为此站点的分频道，点击站点页头下方的“新建页”链接完成此操作，在出现的页面控制面板内完成对当前页面的设置；

（2）用户通过调色板调整整个站点的背景颜色、通过站点样式设置从样式库中选取样式并应用的自己站点上，所述样式就是页面的展示方式及模块的展示方式，通过网站题头的设置选取网站页头，所述网站页头从已有的资源库中选取 FLASH 或图片或自己制作FLASH 或图片上传后直接应用；

（3）点击“首页”、 “第一页”、 “第二页”旁的控制按钮进入此页的控制面板，在控制面板内用户选取当前页面应用的页面布局，模块的排列方式，并可以修改页面的名称；

（4）点击当前页面的增加模块按钮从模块库中选取需要的模块添加到当前页面上，“增加模块”按钮根据用户选择的页面布局显示，每个模块的右上角均有一个控制按钮，点击控制按钮即在本页当前模块的位置出现此模块的控制面板，在控制面板中用户更改当前模块的属性；

③、当用户对所得的模板编辑模块进行编辑时，通过 Javascript将更改数据发送至数据库，数据库返回更改结果数据至模板编辑页面，同时将编辑后的模板编辑模块显示在网页页面上。

2.根据权利要求 1 所述的所见即所得式的线上网站建设方法，其特征在于：所述的模板编辑模块按类别存放在数据库中。

3.根据权利要求 1 所述的所见即所得式的线上网站建设方法，其特征在于：在所述的网页页面上设置控制按钮，控制按钮触发模板编辑模块启动工作。