CN101388902A - 通过客户端实现图形化网页浏览之系统及其方法 - Google Patents

Abstract

本发明公开了一种通过客户端实现网页浏览之系统及其方法，包含：一讯息资料库，存放有至少一连结参数所对应之至少一讯息资料；一网页服务器，用于收到一HTTP请求时，传回一个包含该些连结参数之HTML文件，其中该HTML文件更包含一底图、一目标元件及至少一图示；及至少一客户端，该些客户端均可用于发出该HTTP请求，其包含有自该网页服务器传回并内嵌于该HTML文件的一操作模块，用于在该HTML文件于该些客户端显示时执行，并对该些客户端的操作进行处理。应用本发明，解决了网页浏览方式不友善之问题，通过客户端的操作模块进行图形化网页浏览之处理，用于增加网页浏览之友善性，以及提升网页服务器之处理效能。

Description

通过客户端实现图形化网页浏览之系统及其方法

技术领域

本发明涉及一种网页之浏览之系统及其方法，特别是指一种通过客户端的操作模块提供图形化网页进行浏览，以实现网页浏览之系统及其方法。

背景技术

近年来，随着网际网络的蓬勃发展，网站的数量也呈现等比级数的成长幅度，各行各业通过成立包含许多网页的专属网站，用于进行产品行销及增加市场能见度，已成为不可避免的趋势，一般的网页浏览方式，皆以文字条列的方式搭配超本文标记语言(Hypertext Markup Language，HTML)的超链结，用于进行网页浏览，而当频宽增加后，以图片影像取代文字条列的超连结方式逐渐普及，然而，随着网页资料的增长，无论是以文字条列或是图片影像搭配超连结，网页版面的空间皆会随网页资料的增长而显得拥挤，所以在网页版面的字体也开始越变越小造成浏览上的问题，因此如何充分利用有限的网页版面空间，已成为不容忽视的议题。

一般而言，已知技术之网页浏览方式，通常依据网页中放置已分类的图片影像及文字符号，且具备超连结的群组讯息，例如：视听娱乐、科学科技、商业金融及社会人文等，用于供使用者依不同分类进一步点选，以便连结至对应使用者所选择之分类网页，进而节省使用者查找资料的时间，不过此方式在资料种类繁多，进而使得分类复杂的情况下，易造成因为增加图片影像及文字符号之数量，以及网页连结之阶层，进而产生网页服务器效能不彰的问题，且在层层连结的情况下，徒增使用者查找资料的难度，因此后来有人提出以图形化网页方式进行网页浏览，用于解决查找资料不易之问题，但是以图形化网页方式的网页浏览过程中，由于需要频繁传送请求至网页服务器，因此同样不足以解决网页服务器效能不彰的问题。

因此，有必要针对已知技术上所产生网页服务器效能不彰及网页浏览方式不友善之问题提出解决方案。

发明内容

本发明所要解决的技术问题是提供一种通过客户端实现图形化网页浏览之系统及其方法，通过客户端的操作模块进行图形化网页浏览之处理，用于增加网页浏览之友善性，以及提升网页服务器之处理效能。

为了解决上述问题，本发明提供了一种通过客户端实现图形化网页浏览之系统，包含：

一讯息资料库，存放有至少一连结参数所对应之至少一讯息资料；

一网页服务器，用于收到一HTTP请求时，传回一个包含所述连结参数之HTML文件，其中该HTML文件更包含一底图、一目标元件及至少一图示；及

至少一客户端，该些客户端均可用于发出所述HTTP请求，其包含有自所述网页服务器传回并内嵌于所述HTML文件的一操作模块，用于在该HTML文件于该些客户端显示时执行，并对该些客户端的操作进行处理，该操作模块更包含有：

一移动处理单元，用于当所述客户端点选所述图示之一时，执行所述目标元件之一移动显示处理，使该目标元件移动至该图示；及

一讯息处理单元，用于当所述客户端点选所述图示之一时，经由一点选判断处理产生一内嵌框架，并根据所述连结参数之第一连结参数，自所述讯息资料库中传回对应所述讯息资料于该内嵌框架；其中，当该些客户端于该内嵌框架中，经由一操作选项选取该些连结参数之第二连结参数时，自该讯息资料库中传回对应该讯息资料于该内嵌框架。

进一步地，上述系统还可包括，其中所述操作模块是自Java Script、VBScript及JScript之程序语言组合选择之。

进一步地，上述系统还可包括，其中所述移动显示处理系将所述目标元件自当前座标移动至一输入装置所点选产生的目的座标，直到当前座标等于目的座标时停止移动该目标元件。

进一步地，上述系统还可包括，其中所述点选判断处理是依据所述输入装置所点选的座标位置与各所述图示的座标位置进行比对，用于判断客户端是否点选各该图示。

进一步地，上述系统还可包括，其中所述操作选项是用于传递第二连结参数至所述讯息资料库，用于取得对应的所述讯息资料。

本发明还提供了一种通过客户端实现图形化网页浏览之方法，应用于具有一网页服务器、一讯息资料库及至少一客户端之网络环境中，用于提供使用者通过浏览器经由网络进行浏览，包含有下列步骤：

建立至少一连结参数所对应之至少一讯息资料；

所述网页服务器收到所述客户端发出的一HTTP请求时，传回一个包含所述连结参数之HTML文件至该些客户端，其中该HTML文件更包含一底图、一目标元件及至少一图示，该HTML文件更内嵌一操作模块；及

将所述HTML文件显示于所述客户端，并对该些客户端的操作进行处理，包含有下列步骤：

当所述客户端点选所述图示之一时，执行所述目标元件之一移动显示处理，使该目标元件移动至该图示；

当所述客户端点选所述图示之一时，经由一点选判断处理产生一内嵌框架，并根据所述连结参数之第一连结参数，自所述讯息资料库中传回对应所述讯息资料于该内嵌框架；及

当所述客户端于所述内嵌框架中，经由一操作选项选取所述连结参数之第二连结参数时，自所述讯息资料库中传回对应所述讯息资料于该内嵌框架。

进一步地，上述方法还可包括，其中所述操作模块是自Java Script、VBScript及JScript之程序语言组合选择之。

进一步地，上述方法还可包括，其中所述移动显示处理更包含下列步骤：

取得所述目标元件之当前座标；

取得一输入装置选择之目的座标；

将所述目标元件自当前座标往目的座标移动；及

于当前座标等于目的座标时，停止移动所述目标元件。

进一步地，上述方法还可包括，其中所述点选判断处理更包含下列步骤：

判断所述输入装置是否点选各所述图示；

产生所述内嵌框架，并依据所述连结参数之第一连结参数载入对应的所述讯息资料

依据所点选的座标位置与各所述图示的座标位置进行比对；及

当比对结果相同时，显示一操作选项，并依据所述连结参数之第二连结参数，用于控制所述内嵌框架之显示页面。

进一步地，上述方法还可包括，其中所述操作选项是用于传递所述连结参数之第二连结参数至所述讯息资料库，用于取得对应的所述讯息资料。

与现有技术相比，应用本发明，通过客户端程序进行图形化网页浏览之处理方法使网页服务器效能不彰及网页浏览方式不友善之问题得以解决。

附图说明

图1是本发明通过客户端实现图形化网页浏览之系统方块图；

图2是本发明通过客户端实现图形化网页浏览之方法流程图；

图3是本发明移动显示处理之方法流程图；

图4是本发明点选判断处理之方法流程图；

图5是本发明之HTML文件示意图；

图6及图7是本发明于使用者利用输入装置点选图示时进行移动显示处理及点选判断处理之示意图；

图8至图12是本发明于使用者内嵌框架中进行操作选项之示意图。

具体实施方式

下面结合附图和具体实施例对本发明作进一步说明。

请参阅图1，图1是本发明通过客户端实现图形化网页浏览之系统方块图，包含有：讯息资料库101、网页服务器102、客户端103、HTML文件110、操作模块111、移动处理单元112及讯息处理单元113。其中，讯息资料库101，存放有连结参数所对应之讯息资料；网页服务器102，用于收到HTTP请求时，传回一个包含连结参数之HTML文件110，其中HTML文件110更包含底图、目标元件及图示，上述之连结参数是指一般HTML文件的超连结中所内含之内容(例如：http://www.xxx.com/news.htm、http://www.xxx.com/movie.htm及http://www.xxx.com/bank.htm)，而讯息资料为存放于讯息资料库101之分类讯息(例如：新闻类、影视类及财经类的相关内容等)。

客户端103均可用于发出HTTP请求，其包含有自网页服务器102传回并内嵌于HTML文件110的操作模块111，用于在HTML文件110显示于客户端103时执行，并对客户端103的操作进行处理，操作模块111更包含有移动处理单元112及讯息处理单元113。其中，移动处理单元112用于当客户端103点选图示之一时，执行目标元件之移动显示处理，使目标元件移动至图示，其移动显示处理是将目标元件自当前座标移动至输入装置所点选产生的目的座标，直到当前座标等于目的座标时停止移动目标元件，在目标元件的移动显示过程中，由于客户端103的操作都是通过操作模块111处理，因此不需经由传送任何请求至网页服务器102即可进行移动显示，所以能够减少网页服务器102的运作负担。

讯息处理单元113，是用于当客户端103点选图示之一时，经由点选判断处理产生内嵌框架，并根据连结参数之第一连结参数(例如：图7中，使用者点选的图示为新闻图示512，而新闻图示512所对应的超连结讯息为http://www.xxx.com/news.htm，此超连结讯息即为所谓的第一连结参数，有关图7将在后面的实施例中详加说明)，自讯息资料库101中传回对应讯息资料于内嵌框架。

其中，当客户端103于内嵌框架中，经由操作选项选取连结参数之第二连结参数(例如：图8中，使用者点选内嵌框架601中的操作选项之下一页选项，而此下一页选项所对应的超连结讯息为http://www.xxx.com/news_page_next.htm，此超连结讯息即为所谓的第二连结参数，有关图8将在后面的实施例中详加说明)时，自讯息资料库101中传回对应讯息资料于内嵌框架，所述之点选判断处理是依据输入装置所点选的座标位置与图示的座标位置进行比对，用于判断客户端103是否点选图示，而操作选项是用于传递第二连结参数至讯息资料库101，用于取得对应的讯息资料。

前面所提及的移动显示处理、点选判断处理及操作选项将在之后进一步说明。

如图2所示，为本发明通过客户端实现图形化网页浏览之方法流程图，包含有下列步骤：建立连结参数所对应之讯息资料(步骤201)；网页服务器收到客户端发出的HTTP请求时，传回一个包含连结参数之HTML文件至客户端，其中HTML文件更包含底图、目标元件及图示，HTML文件更内嵌操作模块(步骤202)；将HTML文件显示于客户端，并对客户端的操作进行处理(步骤203)；当客户端点选图示之一时，执行目标元件之移动显示处理，使目标元件移动至图示(步骤204)；当客户端点选图示之一时，经由点选判断处理产生内嵌框架，并根据连结参数之第一连结参数，自讯息资料库中传回对应讯息资料于内嵌框架(步骤205)及当客户端于内嵌框架中，经由操作选项选取连结参数之第二连结参数时，自讯息资料库中传回对应讯息资料于内嵌框架(步骤206)。

接着本发明将进一步说明上述所提及之移动显示处理，请参阅图3为本发明移动显示处理之方法流程图，包含有下列步骤：取得目标元件之当前座标(步骤2041)；取得输入装置选择之目的座标(步骤2042)；将目标元件自当前座标位置往目的座标移动(步骤2043)；于当前座标等于目的座标时(步骤2044)，停止移动目标元件(步骤2045)。

接着本发明进一步说明上述所提及之点选判断处理，请参阅图4，为本发明点选判断处理之方法流程图，包含有下列步骤：判断输入装置是否点选图示(步骤2051)；产生内嵌框架，并依据连结参数之第一连结参数载入对应的讯息资料(步骤2052)；依据所点选的座标位置与图示的座标位置进行比对(步骤2053)；当比对结果相同(步骤2054)；显示操作选项，并依据连结参数之第二连结参数，用于控制内嵌框架之显示页面(步骤2055)，所述之操作选项是用于传递连结参数之第二连结参数至讯息资料库，用于取得对应的讯息资料，其中，连结参数之第一连结参数是指图示对应之连结参数，而第二连结参数则是在操作选项中所对应之连结参数，。

以下本发明将配合图5至图12以实施例方式进行如下说明，请先参阅图5是本发明之HTML文件示意图，如前所述，图中则显示出使用者经由网页服务器102接收到具有底图510、目标元件511及图示(例如：新闻台图示512、银行图示513及电影院图示514)之HTML文件110，且HTML文件110更内嵌有操作模块111(步骤202)，并通过浏览器经由网络进行浏览，除此之外，图中还包括有代表输入装置的鼠标501，此为HTML文件110显示的初始状态，初始时目标元件511通常显示于画面中央，等待使用者移动鼠标501及点选图示(例如：新闻台图示512银行图示、513及电影院图示514)以便作进一步浏览及处理(步骤203)。

当使用者想进一步浏览与新闻相关的文章时，将经由移动鼠标501点选对应新闻类型的图示(例如：新闻台图示512)来达到目的，请参阅图6及图7是本发明于使用者利用输入装置点选图示时进行移动显示处理及点选判断处理之示意图，如图6所示，包括鼠标501、底图510、目标元件511、新闻台图示512、银行图示513、电影院图示514及内嵌框架601，当使用者点选新闻台图示512时，会执行移动显示处理，使得目标元件511从原本的位置往新闻台图示512的方向移动(步骤204)，移动显示处理为了要将目标元件511移动至新闻台图示512，会先取得目标元件511之当前座标(步骤2041)及输入装置(例如：鼠标501)选择之目的座标，也就是新闻台图示512的座标(步骤2042)后，将目标元件511从当前座标往目的座标移动(目标元件511的移动速度，基本上只要符合能够让人眼观看且舒适的速度均可)(步骤2043)，并判断当前座标是否等于目的座标(步骤2044)，若是则目标元件停止移动(步骤2045)，反之则继续往目的座标移动(步骤2043)，由于此时目标元件511之当前座标不等于目的座标，也就是说还没有移动到使用者所点选的座标位置(例如：新闻台图示512)，所以目标元件511继续往目的座标移动(步骤2043)。

在使用者点选新闻台图示512时，会同时经由点选判断处理，产生内嵌框架601，并依据连结参数之第一连结参数，自讯息资料库101中传回对应讯息资料于内嵌框架中(步骤205)，其中，点选判断处理的详细说明如下：

由于使用者点选新闻台图示512，所以在经过判断输入装置是否点选图示(步骤2051)后，可以得知使用者已经点选图示，因此产生内嵌框架601，并依据连结参数之第一连结参数载入对应之讯息资料(例如：新闻标题1)(步骤2052)，接着依据所点选的座标位置与新闻台图示的座标位置进行比对(步骤2053)，由于当前目标元件511尚未移至新闻图示512的座标位置，所以比对结果不同，因此不显示操作选项(步骤2054)。

接下来说明当目标元件511进入新闻图示512的情况，如图7所示，与图6之差异仅在于目标元件511已经移动至新闻台图示512的座标位置，所以在经过判断之后(步骤2054)，内嵌框架601中显示操作选项(例如：完整页面及下一页)，并依据连结参数之第二连结参数(例如：http://www.xxx.com/news_page_full.htm及http://www.xxx.com/news_page_next.htm)，用于控制内嵌框架之显示页面(步骤2055)。

最后将说明使用者在内嵌框架中进行操作之方式，请参阅图8至图12是本发明于使用者内嵌框架中进行操作选项之示意图，请先参阅图8，由于载入讯息资料库101内对应新闻台图示512之讯息资料(例如：新闻标题1)是第一笔讯息资料，因此操作选项显示完整页面及下一页之选项，以供使用者选择，当使用者将鼠标501移至操作选项(例如：下一页)并进行点选(选取连结参数之第二连结参数如http://www.xxx.com/news_page_next.htm)时，会自讯息资料库101中传回对应讯息资料于内嵌框架601中(步骤206)，所显示之画面如图9所示，其内嵌框架601中显示讯息资料(例如：新闻标题2)及操作选项(例如：上一页、完整页面及下一页)。

当使用者再次点选(步骤206)下一页之选项直至最后一笔讯息资料时，其所显示之画面如图10所示，其内嵌框架601中显示讯息资料(例如：新闻标题n，其中n代表最后一笔资料)及操作选项(例如：上一页及完整页面)。

另外，请参阅图11，当使用者将鼠标501移至内嵌框架601内之操作选项(例如：完整页面)并进行点选(步骤206)时，所显示之画面如图12所示，整个浏览画面将连结至新闻网页610。

至于以鼠标501点选电影院图示514及银行图示513之操作流程与上述实施例相同，差别仅在于显示之讯息资料上有所差异，在此不再赘述。

经由上述实施例说明可得知，本发明移动处理单元112所进行的操作都是在客户端103执行，因此在进行目标元件511的移动显示过程中，不需经由传送任何请求至网页服务器102即可进行移动显示，与已知技术需频繁传送请求至网页服务器102相比，将可大幅降低网页服务器102的负载，避免网页服务器102效能不彰，除此之外，更可提高网页浏览方式的友善性。

以上所述，仅为本发明较佳的具体实施例，但本发明的保护范围并不局限于此，任何熟悉该技术的人在本发明所揭露的技术范围内，可轻易想到的变化或替换，都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应该以权利要求的保护范围为准。

Claims (10)

1、一种通过客户端实现图形化网页浏览之系统，其特征在于，包含：

一讯息资料库，存放有至少一连结参数所对应之至少一讯息资料；

一网页服务器，用于收到一HTTP请求时，传回一个包含所述连结参数之HTML文件，其中该HTML文件更包含一底图、一目标元件及至少一图示；及

至少一客户端，该些客户端均可用于发出所述HTTP请求，其包含有自所述网页服务器传回并内嵌于所述HTML文件的一操作模块，用于在该HTML文件于该些客户端显示时执行，并对该些客户端的操作进行处理，该操作模块更包含有：

一移动处理单元，用于当所述客户端点选所述图示之一时，执行所述目标元件之一移动显示处理，使该目标元件移动至该图示；及

一讯息处理单元，用于当所述客户端点选所述图示之一时，经由一点选判断处理产生一内嵌框架，并根据所述连结参数之第一连结参数，自所述讯息资料库中传回对应所述讯息资料于该内嵌框架；其中，当该些客户端于该内嵌框架中，经由一操作选项选取该些连结参数之第二连结参数时，自该讯息资料库中传回对应该讯息资料于该内嵌框架。

2、如权利要求1所述的系统，其特征在于，其中所述操作模块是自JavaScript、VB Script及JScript之程序语言组合选择之。

3、如权利要求1所述的系统，其特征在于，其中所述移动显示处理系将所述目标元件自当前座标移动至一输入装置所点选产生的目的座标，直到当前座标等于目的座标时停止移动该目标元件。

4、如权利要求3所述的系统，其特征在于，其中所述点选判断处理是依据所述输入装置所点选的座标位置与各所述图示的座标位置进行比对，用于判断客户端是否点选各该图示。

5、如权利要求1所述的系统，其特征在于，其中所述操作选项是用于传递第二连结参数至所述讯息资料库，用于取得对应的所述讯息资料。

6、一种通过客户端实现图形化网页浏览之方法，应用于具有一网页服务器、一讯息资料库及至少一客户端之网络环境中，用于提供使用者通过浏览器经由网络进行浏览，包含有下列步骤：

建立至少一连结参数所对应之至少一讯息资料；

所述网页服务器收到所述客户端发出的一HTTP请求时，传回一个包含所述连结参数之HTML文件至该些客户端，其中该HTML文件更包含一底图、一目标元件及至少一图示，该HTML文件更内嵌一操作模块；及

将所述HTML文件显示于所述客户端，并对该些客户端的操作进行处理，包含有下列步骤：

当所述客户端点选所述图示之一时，执行所述目标元件之一移动显示处理，使该目标元件移动至该图示；

当所述客户端点选所述图示之一时，经由一点选判断处理产生一内嵌框架，并根据所述连结参数之第一连结参数，自所述讯息资料库中传回对应所述讯息资料于该内嵌框架；及

当所述客户端于所述内嵌框架中，经由一操作选项选取所述连结参数之第二连结参数时，自所述讯息资料库中传回对应所述讯息资料于该内嵌框架。

7、如权利要求6所述的方法，其特征在于，其中所述操作模块是自JavaScript、VB Script及JScript之程序语言组合选择之。

8、如权利要求6所述的方法，其特征在于，其中所述移动显示处理更包含下列步骤：

取得所述目标元件之当前座标；

取得一输入装置选择之目的座标；

将所述目标元件自当前座标往目的座标移动；及

于当前座标等于目的座标时，停止移动所述目标元件。

9、如权利要求6所述的方法，其特征在于，其中所述点选判断处理更包含下列步骤：

判断所述输入装置是否点选各所述图示；

产生所述内嵌框架，并依据所述连结参数之第一连结参数载入对应的所述讯息资料

依据所点选的座标位置与各所述图示的座标位置进行比对；及

当比对结果相同时，显示一操作选项，并依据所述连结参数之第二连结参数，用于控制所述内嵌框架之显示页面。

10、如权利要求9所述的方法，其特征在于，其中所述操作选项是用于传递所述连结参数之第二连结参数至所述讯息资料库，用于取得对应的所述讯息资料。

Images