CN104615601A - 基于网页的记录系统及其方法 - Google Patents

Abstract

本发明公开一种基于网页的记录系统及其方法，通过接收浏览网址判断笔记数据库中是否存在相应的笔记信息及其对应的网页图像，假设笔记信息存在则显示相应的网页图像，并且在点选网页图像时加载相应的笔记信息以进行显示并允许编辑，反之笔记信息不存在时，则根据浏览网址下载相应的网页文件以进行显示，并且根据使用者的操作在笔记数据库建立相应的笔记信息，用以达成提高网页的阅读性的技术功效。

Description

基于网页的记录系统及其方法

技术领域

本发明涉及一种记录系统及其方法，特别是指一种允许在网页作笔记并储存于网络上的基于网页的记录系统及其方法。

背景技术

近年来，随着互联网的普及与蓬勃发展，浏览网页已成为许多人日常生活的一部分，然而，网页内容受限于服务器，无法由网络上的浏览者自行更改、增加注解或笔记，因此对于浏览者而言一直存在阅读性不佳的问题。

一般而言，网页存放于服务器中，网页内容则由服务器的管理者所控制，由于浏览者通常不具备服务器的管理权限，因此无法对网页内容进行更改。也就是说，浏览者无法像阅读书本一样画重点或做笔记，以实现对网页的自由注释和标记，影响浏览者对网页内容的阅读效率。

综上所述，可知现有技术中长期以来一直存在网页显示内容无法有效的自由添加笔记予以快速显示的问题，因此实有必要提出改进的技术手段，来解决此一问题。

发明内容

本发明揭露一种基于网页的记录系统及其方法。

首先，本发明揭露一种基于网页的记录系统，此系统包含：笔记数据库及客户端。其中，笔记数据库用以储存笔记信息及其对应的网页图像，每一笔记信息包含网址、笔记位置及笔记内容。至于客户端则包含浏览模块、操作模块、记录模块及还原模块。其中，浏览模块用以接收浏览网址，并且在浏览网址与笔记数据库中每一笔记信息的网址皆不匹配时，根据此浏览网址下载相应的网页文件以进行显示；操作模块用以在显示网页文件时，产生操作元件提供点选操作以自笔记数据库建立相应的笔记信息，并且将浏览网址记录于笔记信息的网址、将操作位置记录于笔记位置、以及将操作结果记录于笔记内容；记录模块用以在建立笔记信息后，同时获取显示有笔记信息显示画面的网页文件画面以生成网页图像并储存于笔记数据库与笔记信息进行对应；还原模块用以在浏览网址与笔记数据库中的其中一笔记信息的网址匹配时，加载相应的笔记信息所对应的网页图像以进行显示，以及在加载的网页图像被点选时，自笔记数据库加载相应的笔记信息以进行显示并允许编辑。

另外，本发明揭露一种基于网页的记录方法，其步骤包括：笔记数据库提供笔记信息及其对应的网页图像，每一笔记信息包含网址、笔记位置及笔记内容；客户端接收浏览网址，并且在浏览网址与笔记数据库中每一笔记信息的网址皆不匹配时，根据此浏览网址下载相应的网页文件以进行显示；所述客户端在浏览网址与笔记数据库中的其中一笔记信息的网址匹配时，加载相应的笔记信息所对应的网页图像以进行显示，以及在加载的网页图像被点选时，自笔记数据库加载相应的笔记信息以进行显示并允许编辑；所述客户端在显示网页文件时，产生操作元件提供点选操作以自笔记数据库建立相应的笔记信息，并且将浏览网址记录于笔记信息的网址、将操作位置记录于笔记位置、以及将操作结果记录于笔记内容；所述客户端在建立笔记信息后，同时获取显示有笔记信息显示画面的网页文件画面以生成网页图像并储存于笔记数据库与笔记信息进行对应。

本发明所揭露的系统与方法如上，与现有技术的差异在于本发明是通过接收浏览网址判断笔记数据库中是否存在相应的笔记信息及其对应的网页图像，假设笔记信息存在则显示相应的网页图像，并且在点选网页图像时加载相应的笔记信息以进行显示并允许编辑，反之笔记信息不存在时，则根据浏览网址下载相应的网页文件以进行显示，并且根据使用者的操作在笔记数据库建立相应的笔记信息。

通过上述的技术手段，本发明可以达成提高网页的阅读性，实现对浏览网页笔记的自由添加并予以快速显示的技术功效。

附图说明

图1为本发明基于网页的记录系统的系统方块图。

图2为本发明基于网页的记录方法的方法流程图。

图3为本发明笔记数据库中的笔记信息的示意图。

图4为应用本发明浏览网页图像的示意图。

图5为应用本发明还原笔记信息的示意图。

图6为应用本发明产生笔记信息及其对应的网页图像的示意图。

【符号说明】

110 笔记数据库

120 客户端

121 浏览模块

122 操作模块

123 记录模块

124 还原模块

130 网络

300 笔记信息表

400 浏览器

401 光标

410 网址输入区块

420 查询元件

430 网页显示区块

431 网页图像

432 笔记信息

501～504 操作元件

510 高亮显示

520 底线

530 注解区块

具体实施方式

以下将配合图式及实施例来详细说明本发明的实施方式，藉此对本发明如何应用技术手段来解决技术问题并达成技术功效的实现过程能充分理解并据以实施。

在说明本发明所揭露的基于网页的记录系统及其方法之前，先对本发明所自行定义的名词作说明，本发明所述操作元件可包含标记元件、文字输入元件、清除元件及恢复元件其中之一，用以产生相应的网页原始码以嵌入网页文件来呈现标记、文字输入、清除及恢复的效果。稍后将配合实施例对网页原始码作详细说明。

以下配合图式对本发明基于网页的记录系统及其方法做进一步说明，请参阅「图1」，「图1」为本发明基于网页的记录系统的系统方块图，此系统包含：笔记数据库110及客户端120，所述笔记数据库110与客户端120通过网络130相互连接。其中，笔记数据库110用以储存至少一个笔记信息及其对应的网页图像，每一笔记信息包含网址、笔记位置及笔记内容，举例来说，笔记信息中的网址为“www.abc.com”、笔记位置为“x:320;y:240”、笔记内容为“<div class=“style0”>文字一</div>”。在实际实施上，笔记内容可包含超文本标记语言（Hyper Text Markup Language,HTML）及层叠样式表（Cascading Style Sheets,CSS）以便根据笔记位置控制笔记内容的显示位置。另外，所述网页图像是获取自网页文件及笔记信息的显示画面，也就是说，其通过抓图的方式将具有笔记信息的整个网页页面以图像的方式储存成网页图像。

至于在客户端120的部分，客户端120包含：浏览模块121、操作模块122、记录模块123及还原模块124。其中，浏览模块121用以接收使用者键入的浏览网址，并且在浏览网址与笔记数据库110中每一笔记信息的网址皆不匹配时，根据此浏览网址通过网络130下载网页文件以进行显示。由于根据浏览网址下载网页并进行显示为公知技术，故在此不再多作赘述。

操作模块122用以在显示网页文件时，产生至少一个操作元件提供使用者进行点选操作，以便通过网络130在笔记数据库110中建立相应的笔记信息，并且将浏览网址记录于笔记信息的网址、将操作位置记录于笔记位置、以及将操作结果记录于笔记内容。在实际实施上，不同的网页文件可对应不同的网址，如：“www.abc.com/1.htm”、“www.abc.com/2.htm”......等等。甚至于同一个网页文件的浏览网址可以在尾端增加“#1”、“#2”......等等用以储存成不同的笔记信息的网址，如：“www.abc.com/1.htm#1”、“www.abc.com/1.htm#2”，以便实现同一个网页文件同时具有不同的笔记信息。接着，以将操作位置记录于笔记位置的方式为例，假设使用者点选操作元件中的文字输入元件后，紧接着在x坐标“320”、y坐标“240”的位置进行点选操作，例如：按压鼠标左键并输入文字“文字二”，此时，操作模块122会将上述坐标记录于笔记位置，如：“x:320;y:240”，并且根据文字输入元件的点选操作产生相应的操作结果，如：“<p class=“style1”>文字二</p>”，其中，“文字二”是使用者键入的文字，然后将此操作结果记录于笔记内容。接下来，假设使用者又点选操作元件中的文字输入元件，且在x坐标“120”、y坐标“280”的位置进行点选操作，例如：按压鼠标左键并输入文字“文字三”，此时，操作模块122记录笔记位置的方式是在“x:320;y:240”的后面接续记录“x:120;y:280”，而记录笔记内容的方式则是在“<p class=“style1”>文字二</p>”的后面接续记录“<p class=“style2”>文字三</p>”，倘若使用者继续在同一网页文件上点选操作则记录方式如上所述并以此类推。特别要说明的是，所述点选操作可包含光标拖曳操作及光标点选操作至少其中之一；操作结果可包含产生标记及文字或两者任一的网页原始码，以及清除标记及文字或两者任一的网页原始码。

记录模块123用以在建立笔记信息后，同时获取显示有笔记信息显示画面的网页文件画面以生成网页图像并储存于笔记数据库110与该笔记信息进行对应。在实际实施上，笔记信息的显示画面是根据笔记位置呈现在网页文件的显示画面上以形成网页图像，此网页图像可再经过压缩、加密等等的处理方式进行储存。

还原模块124用以在浏览网址与笔记数据库110中的其中一笔记信息的网址匹配时，加载相应的笔记信息所对应的网页图像以进行显示，以及在加载的网页图像被点选时，自笔记数据库110加载相应的笔记信息以进行显示并允许编辑。举例来说，假设使用者键入的浏览网址为“www.abc.com”、笔记数据库110中有一个笔记信息的网址也同样为“www.abc.com”，那么将判断为匹配并加载此笔记信息，还原模块124即可根据笔记信息中的笔记位置来显示笔记内容，在实际实施上，还原模块124可根据笔记位置产生相应的层叠样式表，并且将此层叠样式表连同笔记内容一并嵌入网页文件的原始码。

接着，请参阅「图2」，「图2」为本发明基于网页的记录方法的流程图，应用在具有客户端及笔记数据库的网络环境中，其步骤包括：笔记数据库110提供笔记信息及其对应的网页图像，每一笔记信息包含网址、笔记位置及笔记内容（步骤210）；客户端120接收浏览网址，并且在浏览网址与笔记数据库110中每一笔记信息的网址皆不匹配时，根据浏览网址下载相应的网页文件以进行显示（步骤220）；所述客户端120在浏览网址与笔记数据库中的其中一笔记信息的网址匹配时，加载相应的笔记信息对应的网页图像以进行显示，以及在加载的网页图像被点选时，自笔记数据库110加载相应的笔记信息以进行显示并允许编辑（步骤230）；所述客户端120在显示网页文件时，产生操作元件提供点选操作以自笔记数据库110建立相应的笔记信息，并且将浏览网址记录于笔记信息的网址、将操作位置记录于笔记位置、以及将操作结果记录于笔记内容（步骤240）；所述客户端120在建立笔记信息后，同时获取显示有笔记信息显示画面的网页文件画面以生成网页图像并储存于笔记数据库110与笔记信息进行对应（步骤250）。通过上述步骤，即可通过接收浏览网址判断笔记数据库110中是否存在相应的笔记信息及其对应的网页图像，假设笔记信息存在则显示相应的网页图像，并且在点选网页图像时加载相应的笔记信息以进行显示并允许编辑，反之笔记信息不存在时，则根据浏览网址下载相应的网页文件以进行显示，并且根据使用者的操作在笔记数据库110建立相应的笔记信息。

以下配合「图3」至「图6」以实施例的方式进行如下说明，请先参阅「图3」，「图3」为本发明笔记数据库中的笔记信息的示意图。前面提到，笔记数据库110预先储存有至少一个笔记信息及其对应的网页图像，在实际实施上，笔记信息可如「图3」所示意储存在笔记信息表300中，此笔记数据库110可为关联式数据库并且使每一笔记信息各自与一个网页图像相对应，例如：通过索引键值的方式对应。在实际实施上，网址除了“www.abc.com”、“www.def.com”之外，还可以记录为“www.def.com/index.htm”、“www.def.com/index.htm#1”......等形式。另外，笔记内容亦可包含层叠样式表的原始码，如：“#square{width:10px;height:10px;background:red;}<div id="square"></div>”或是使用“<linkrel=”stylesheet”type=”text/css”href=“a.css”/>”来连接外部的层叠样式表（以此例而言，其档案名称为“a.css”），所述层叠样式表可预先储存在笔记数据库110，至于层叠样式表的内容则是各操作元件的样式原始码，如：第一个操作元件可产生红色正方形图像，则其样式原始码可为“.square{width:10px;height:10px;background:red;}”。

如「图4」所示意，「图4」为应用本发明浏览网页图像的示意图。假设笔记数据库110存在一个笔记信息，此笔记信息包含的网址为“www.abc.com”。那么，当使用者在浏览器400的网址输入区块410键入“www.abc.com”并且以光标401点选查询元件420后，浏览模块121将接收“www.abc.com”作为浏览网址，此时，还原模块124会判断浏览网址与笔记数据库110中的其中一笔记信息的网址匹配，所以加载相应的笔记信息所对应的网页图像431以显示在网页显示区块430中。

如「图5」所示意，「图5」为应用本发明还原笔记信息的示意图。当使用者以光标401点选「图4」所示意的网页图像431时，还原模块124将从笔记数据库110加载相应的笔记信息432以显示在网页显示区块430中，并且允许使用者进行编辑。此笔记信息432可通过浮动区块的方式显示。

请参阅「图6」，「图6」为应用本发明产生笔记信息及其对应的网页图像的示意图。前面提到，操作模块122会在显示网页文件时，产生至少一个操作元件提供使用者进行点选操作，如：操作元件（501～504），以便在笔记数据库110建立相应的笔记信息，并且将浏览网址记录在笔记信息的网址中、将操作位置记录于笔记位置、以及将操作结果记录于笔记内容。假设使用者以光标401点选操作元件501，此操作元件501代表对选择的文字进行高亮显示，那么，操作模块122会在笔记数据库110建立相应的笔记信息，并且将浏览网址“www.123.com”记录于笔记信息的网址，当使用者紧接着在网页文件上的文字“网页文字一”进行点选操作（以拖曳方式选择文字）后，操作模块122会将此点选操作的位置记录在笔记信息的笔记位置，以及根据被点选的操作元件501产生高亮显示的网页原始码（即操作结果）以记录于笔记信息的笔记内容中。如此一来，操作模块122即可使网页文件上的文字“网页文字一”如「图6」所示意呈现高亮显示510。同样地，假设操作元件502代表对选择的文字增加底线520、操作元件503代表增加注解区块530、操作元件504代表清除操作，使用者可点选不同的操作元件（501～504）来对网页文件进行不同的点选操作以产生相应的操作结果。接着，记录模块123会在操作模块122建立笔记信息完成后，同时获取显示有笔记信息显示画面的网页文件画面（如：高亮显示510、底线520及注解区块530）以生成网页图像并储存于笔记数据库110与笔记信息进行对应。

综上所述，可知本发明与现有技术之间的差异在于通过接收浏览网址判断笔记数据库110中是否存在相应的笔记信息及其对应的网页图像，假设笔记信息存在则显示相应的网页图像，并且在点选网页图像时加载相应的笔记信息以进行显示并允许编辑，反之笔记信息不存在时，则根据浏览网址下载相应的网页文件以进行显示，并且根据使用者的操作在笔记数据库110建立相应的笔记信息，藉由此一技术手段可以解决现有技术所存在的问题，进而达成提高网页的阅读性的技术功效。

虽然本发明以前述的实施例揭露如上，然其并非用以限定本发明，任何本领域技术人员，在不脱离本发明的精神和范围内，当可作些许的更动与润饰，因此本发明的专利保护范围须视本说明书所附的权利要求书所界定者为准。

Claims (10)

1.一种基于网页的记录系统，其特征在于，该系统包含：

一笔记数据库，用以储存至少一笔记信息及其对应的网页图像，每一笔记信息包含一网址、一笔记位置及一笔记内容；以及

至少一客户端，每一客户端包含：

一浏览模块，用以接收一浏览网址，并且在该浏览网址与该笔记数据库中每一笔记信息的网址皆不匹配时，根据该浏览网址下载相应的一网页文件以进行显示；

一操作模块，用以在显示该网页文件时，产生一操作元件提供点选操作以自该笔记数据库建立相应的笔记信息，并且将该浏览网址记录于笔记信息的网址、将操作位置记录于该笔记位置、以及将操作结果记录于该笔记内容；

一记录模块，用以在建立笔记信息后，同时获取显示有笔记信息显示画面的网页文件画面以生成该网页图像并储存于该笔记数据库与该笔记信息进行对应；以及

一还原模块，用以在该浏览网址与该笔记数据库中的其中一笔记信息的网址匹配时，加载相应的笔记信息对应的网页图像以进行显示，以及在加载的该网页图像被点选时，自该笔记数据库加载相应的笔记信息以进行显示并允许编辑。

2.根据权利要求1的基于网页的记录系统，其特征在于，所述操作元件至少包含标记元件、文字输入元件、清除元件及恢复元件其中之一。

3.根据权利要求1的基于网页的记录系统，其特征在于，该笔记内容包含超文本标记语言及层叠样式表以根据该笔记位置控制该笔记内容的显示位置。

4.根据权利要求1的基于网页的记录系统，其特征在于，该点选操作包含光标拖曳操作及光标点选操作至少其中之一。

5.根据权利要求1的基于网页的记录系统，其特征在于，该操作结果包含产生标记及文字或两者任一的网页原始码，以及清除标记及文字或两者任一的网页原始码。

6.一种基于网页的记录方法，应用在具有至少一客户端及一笔记数据库的网络环境中，其特征在于，步骤包括：

该笔记数据库提供至少一笔记信息及其对应的网页图像，每一笔记信息包含一网址、一笔记位置及一笔记内容；

所述客户端接收一浏览网址，并且在该浏览网址与该笔记数据库中每一笔记信息的网址皆不匹配时，根据该浏览网址下载相应的一网页文件以进行显示；

所述客户端在该浏览网址与该笔记数据库中的其中一笔记信息的网址匹配时，加载相应的笔记信息对应的网页图像以进行显示，以及在加载的该网页图像被点选时，自该笔记数据库加载相应的笔记信息以进行显示并允许编辑；

所述客户端在显示该网页文件时，产生一操作元件提供点选操作以自该笔记数据库建立相应的笔记信息，并且将该浏览网址记录于笔记信息的网址、将操作位置记录于该笔记位置、以及将操作结果记录于该笔记内容；以及

所述客户端在建立笔记信息后，同时获取显示有笔记信息显示画面的网页文件画面以生成该网页图像并储存于该笔记数据库与该笔记信息进行对应。

7.根据权利要求6的基于网页的记录方法，其特征在于，所述操作元件至少包含标记元件、文字输入元件、清除元件及恢复元件其中之一。

8.根据权利要求6的基于网页的记录方法，其特征在于，该笔记内容包含超文本标记语言及层叠样式表以根据该笔记位置控制该笔记内容的显示位置。

9.根据权利要求6的基于网页的记录方法，其特征在于，该点选操作包含光标拖曳操作及光标点选操作至少其中之一。

10.根据权利要求6的基于网页的记录方法，其特征在于，该操作结果包含产生标记及文字或两者任一的网页原始码，以及清除标记及文字或两者任一的网页原始码。