CN110874448A - 同步html运行画面与编辑画面的方法及实现该方法的程序 - Google Patents

Abstract

本发明涉及同步HTML运行画面与编辑画面的方法及其程序。该方法基于所见即所得的网页编辑程序同步编辑画面与运行画面，包括：生成源代码后通过源代码生成基础文档对象模型，并向存在于基础文档对象模型内的每个组件赋予标签；基础文档对象模型适用Java脚本或CSS来生成视图文档对象模型，并利用视图文档对象模型将编辑画面以第一层形式生成；编辑画面中设置第二层，第二层区域的至少一部分与第一层重叠，通过第二层接收用户输入信息；视图文档对象模型中指定用户输入信息所指示的第一组件的信息，利用赋予第一组件的标签指定与第一组件匹配的基础文档对象模型内的第二组件；及根据用户输入信息修改基础文档对象模型内指定第二组件信息。

Description

同步HTML运行画面与编辑画面的方法及实现该方法的程序

技术领域

本发明的多种实施例涉及一种使用标签来同步超文本标记语言(HTML)运行画面与编辑画面的方法及实现该方法的程序，涉及一种在以所见即所得方式实施的HTML编辑器中，同步用户编辑网页的HTML执行画面和作为编辑结果的该网页的执行画面的方法及程序的技术。

背景技术

随着互联网成为人们生活的重要组成部分，每天都会创建许多新的网页。为了生成网页需要创建使用编程语言编写的Web文档，其中最为广泛使用的是超文本标记语言(Hypertext Markup Language，HTML)，其为制作能够通过万维网(World Wide Web，WWW)浏览的Web文档时所使用的编程语言之一。为了通过HTML语言制作网页而需要利用HTML中使用的指令来创建文档。因此，为了不熟悉HTML指令或者使用HTML指令创建文档时感到不便的人员，开发了一种所见即所得(What You See Is What You Get，WYSIWYG)方式的网页编辑器。使用所见即所得方式的网页编辑器时，用户可以直接浏览并调整画面的结构、文本的颜色和大小等形态、图像的位置等构成网页的要素，如上所述，用户调整网页的组成要素时，网页编辑器生成与其对应的由HTML指令构成的文档。

但是，即使利用现有的所见即所得方式的网页编辑器，也会发生网页的编辑画面与运行画面相似而不完全相同的情况。虽然，仅由文本和图像构成的简单的网页所显示的编辑画面和运行画面相同，但是，近年来网页包含Java脚本(JavaScript)和层叠样式表(Cascading Style Sheets，CSS)，以显示出丰富多样的效果，因此，编辑画面与运行画面之间开始产生差异。Java脚本负责网页的各种操作，CSS负责文本的颜色、字体等设计要素。由于在网页的运行画面中运行与HTML指令互联的Java脚本，并适用CSS，因此编辑画面与运行画面之间产生差异，由于这种差异，难以根据直观而编辑网页。

如上所述，由于适用Java脚本和CSS，在编辑过程中HTML文档内容和运行过程中的HTML文档内容变得不同，因此难以实现网页的编辑画面与运行画面的同步。因此，需要开发一种能够使网页的编辑画面和运行画面更加精确地同步的技术。

现有技术文献

(专利文献0001)韩国公开专利第10-2515-0136310号

发明内容

(一)要解决的技术问题

本发明的各种实施例是为了解决如上所述的问题而提出的，其目的在于使网页的编辑画面和运行画面同步。

本发明的另一目的在于，在网页中添加新的对象时，无需额外的添加编码操作也能够实现同步。

本发明要解决的技术问题并不限定于以上提及的技术问题，本领域技术人员可以通过以下记载内容清楚地理解没有提及的其他技术问题。

(二)技术方案

为了实现如上所述的目的，本发明的一个实施例提供一种，网页编辑器程序的画面同步进行方法，其为基于所见即所得(WYSIWYG)的网页编辑程序使编辑画面与运行画面同步的方法，所述方法包括以下步骤：生成源代码后，通过所述源代码生成基础文档对象模型(Document Object Model，DOM)，并向存在于所述基础文档对象模型内的每个组件赋予标签；在所述基础文档对象模型适用Java脚本或者CSS来生成视图文档对象模型(ViewDOM)，并利用所述视图文档对象模型将编辑画面以第一层的形式生成；在所述编辑画面中设置第二层，所述第二层的区域的至少一部分与所述第一层重叠，并且通过所述第二层接收用户的输入信息；在所述视图文档对象模型中指定所述用户的输入信息所指示的第一组件的信息，利用赋予所述第一组件的标签来指定与所述第一组件匹配的所述基础文档对象模型内的第二组件；及根据所述用户的输入信息修改在所述基础文档对象模型内指定所述第二组件的信息。

在所述基础文档对象模型中适用Java脚本或者CSS来生成视图文档对象模型的步骤通过内联框架(Iframe)实现。

所述网页编辑器程序的画面同步进行方法还可以包括以下步骤：当在所述视图文档对象模型内指定所述用户的输入信息所指示的所述第一组件的信息并根据所述用户的输入信息进行修改之前，在所述第二层中显示对应于所述用户的输入信息的操作。

所述网页编辑器程序的画面同步进行方法还可以包括以下步骤：执行根据所述用户的输入信息修改在所述基础文档对象模型中指定的第二组件的信息的步骤之后，反映所述基础文档对象模型的修改信息，并修改与所述第二组件匹配的所述视图文档对象模型内的所述第一组件的信息。

所述网页编辑器程序的画面同步进行方法还可以包括以下步骤：修改所述视图文档对象模型内的所述第一组件后，通过所述视图文档对象模型的被修改信息修改所述第一层的内容。

所述标签不因适用Java脚本或者CSS而发生变化。

为了实现如上所述的目的，本发明的另一实施例提供一种网页编辑器程序，其为同步编辑画面与运行画面的的基于所见即所得的网页编辑程序，所述网页编辑程序存储在介质中以用于运行以下模块：基础文档对象模型管理模块，生成源代码之后，通过所述源代码生成基础文档对象模型；标签赋予模块，向存在于所述基础文档对象模型内的每个组件赋予标签；视图文档对象模型管理模块，在基础文档对象模型中适用Java脚本或者CSS来生成视图文档对象模型；视图层管理模块，利用所述视图文档对象模型将编辑画面以第一层的形式生成；设计层管理模块，在所述编辑画面上设置第二层，所述第二层的区域的至少一个部分与所述第一层重叠，并且通过所述第二层接收用户的输入信息；及同步模块，在所述视图文档对象模型内指定所述用户的输入所指示的第一组件的信息，利用赋予所述第一组件的标签指定与所述第一组件匹配的所述基础文档对象模型内的第二组件，根据所述用户的输入信息修改在所述基础文档对象模型中指定的所述第二组件的信息。

所述视图层管理模块和设计层管理模块包括在内联框架管理模块中，在所述基础文档对象模型中适用Java脚本或者CSS来生成视图文档对象模型时，所述视图文档对象模型利用内联框架模块管理的内联框架。

在根据所述用户的输入信息修改在所述基础文档对象模型中指定的所述第二组件的信息之后，所述同步模块反映所述基础文档对象模型的修改信息来修改与所述第二组件匹配的所述视图文档对象模型内的所述第一组件的信息。

所述同步模块修改所述视图文档对象模型内的第一组件后，所述视图层管理模块通过所述视图文档对象模型的修改信息修改所述第一层的内容。

(三)有益效果

根据本发明的一个实施例，在网页的编辑画面中也能够显示适用Java脚本或者CSS的画面，因此能够使编辑画面与运行画面更加准确地同步。

根据本发明的一个实施例，通过网页编辑程序的用户直接编辑运行画面等功能，能够实现开发网页过程中的直观性。

根据本发明的一个实施例，能够使网页的编辑画面与运行画面同步，从而可提高开发效率。

本发明的效果并不限定于以上提及的效果，本领域技术人员可以通过以下记载内容清楚地理解没有提及的其他效果。

附图说明

图1是示意表示本发明的一个实施例的网页浏览器运行的基本环境和原理的框图。

图2是用于说明本发明的一个实施例的网页编辑程序的编辑功能的示意框图。

图3是按模块示意示出本发明的一个实施例的网页编辑程序的结构的框图。

图4是表示本发明的一个实施例的网页编辑程序的运行过程的流程图。

附图说明标记

10：HTML源文件

100：基础文档对象模型

200：视图文档对象模型

300：内联框架

310：视图层

320：设计层

400：网页编辑程序

410：基础文档对象模型管理模块

420：视图文档对象模型管理模块

430：视图层管理模块

440：设计层管理模块

450：标签赋予模块

460：同步模块

470：控制模块

具体实施方式

在本说明书中使用的术语只是用于说明实施例，而不是用于限定本发明。在本说明书中，除非在上下文中明确表示其他含义，否则单数包括复数。在说明书中使用的“包括(comprise)”和/或“所包括(comprising)”表示除了所提及的组件以外可存在或者进一步包括一个以上的其他组件。在整个说明书中，相同的附图标记表示相同的组件，“和/或”表示包括所提及的每个组件和一个以上的所有组合。虽然“第一”、“第二”等术语是用于说明多种组件，但这些组件并不限定于上述术语。这种术语只是用于将一个组件区别于另一个组件。因此，在本发明的技术思想范围内，以下提及的第一组件也可以是第二组件。

在整个说明书中，除非明确表示其他含义，否则某个部分“包括”某个组件是表示还可包括其他组件，而不是排除其他组件。并且，说明书中记载的“...部”、“模块”等术语是指处理至少一个功能或者操作的单位，这种单位可以由硬件或者软件实现或者结合硬件和软件来实现。

本发明公开一种所见即所得方式的网页编辑程序。所见即所得方式是指使用户的编辑画面与被编辑的网页的运行画面相同的方式。即，网页编辑器的用户可以通过具有与自己所需的最终结果物的网页的运行画面相似的结构的编辑画面执行网页的生成和修改，而不是编辑由复杂的编程语言构成的文件，并且在网页运行时可以期待与自己构建的编辑画面相同形式的运行画面。

在本说明书中公开的网页编辑程序可以支持多种类型的网页编程语言。例如，网页编辑程序可以支持PHP、JSP、ASP、HTML、XML、LaTeX及pTeX等编程语言。其中，为了方便说明，本说明书中假设网页编辑程序使用HTML语言来生成网页，但本发明的范围并不限定于此。

下面，参照附图对本发明的详细内容进行说明。

图1是示意表示本发明的一个实施例的网页浏览器运行的基本环境和原理的框图。

根据用户利用本发明的网页编辑程序在编辑画面中生成网页形态并对其进行修改，网页编辑程序可以通过HTML语言生成与所述编辑画面相适应的源代码，将所述源代码文件化并生成为HTML源文件10形式。

之后，网页浏览器可以加载(Load)HTML文件生成基础(base单标识)文档对象模型100(Document Object Model，DOM)。网页编辑程序内部可以包括网页浏览器的功能。文档对象模型是指管理由网页浏览器加载并装载到存储器中的HTML源文件的对象或者应用程序编程接口(API)。本发明的网页编辑程序可通过这种文档对象模型访问HTML源文件来修改并存储该HTML源文件。网页浏览器利用HTML源文件生成的基础文档对象模型100是用于操作HTML源代码的文档对象模型，可以与源代码紧密关联。即，当基础文档对象模型100被修改时，与基础文档对象模型100相关联的源代码可同时被修改。

根据本发明的一个实施例，可以生成多个文档对象模型并进行工作。如上所述，基础文档对象模型100是在包括源代码的源文件加载到存储器上时生成，网页编辑程序可以基于基础文档对象模型100生成视图(View)文档对象模型200。

根据一个实施例的视图文档对象模型200可以是反映网页运行时的运行画面的文档对象模型。视图文档对象模型200可以使用户在网页的编辑画面中操作网页内的组件等结构。在本说明书中，组件为源代码或者通过该源代码实现的在网页上可识别的一部分，可以指提供特定功能或者相关功能的组合的单位。即，基础文档对象模型100与源代码相关联，视图文档对象模型200就与显示网页的画面相关联。当根据用户在网页上的操作来修改视图文档对象模型200时，网页画面可同时被修改。

根据一个实施例，虽然视图文档对象模型200基于基础文档对象模型100而生成，但是视图文档对象模型200中进一步适用Java脚本和CSS，因此，会产生基础文档对象模型100与视图文档对象模型200之间的差异。详细地，视图文档对象模型200中适用Java脚本或者CSS时，会绑定(Binding)基础文档对象模型100中没有包括的数据库内的额外数据，从而会产生基础文档对象模型100与视图文档对象模型200之间的差异。

网页编辑程序第一次通过基础文档对象模型100生成网页的编辑画面时，可以生成对应于画面中所显示的编辑画面的视图文档对象模型200。根据一个实施例，如上所述，生成视图文档对象模型200的过程可以通过内联框架300(Iframe)实现。内联框架300是指在由网页编程语言构成的网页内的任意位置显示另一个网页的内部框架标签。

向用户显示的网页画面可以由多个层构成。在本说明书中，用户接触的编辑画面可以区分为第一层和第二层，作为编辑画面的第一层可以称为视图层(View Layer)310，第二层可以称为设计层(DesignLayer)320。

根据本发明的一个实施例，视图层310作为第一层，可以显示网页的编辑画面，在第一次生成步骤中，可以通过基础文档对象模型100而生成，之后与视图文档对象模型200联接并工作。设计层320作为第二层，设计层320区域的至少一部分可以与视图层310重叠。设计层320可以起到如下作用，当用户利用键盘或者鼠标等输入工具进行输入时，根据输入选择的组件和输入时所指的指令，将相适应的画面效果显示在设计层320内。

图2是用于说明本发明的一个实施例的网页编辑程序的编辑功能的示意框图。

参照图2，存在通过包括HTML源代码的文件而生成的基础文档对象模型100和在基础文档对象模型100中适用Java脚本和CSS的视图文档对象模型200，并且作为编辑画面的视图层310可随着视图文档对象模型200的变化而发生变化。如通过图1的描述，设计层320可以位于与视图层310重叠的区域。

网页编辑程序基于包括HTML源代码的文件信息构成基础文档对象模型100，在此适用网页运行时所需的Java脚本、CSS及其他数据来构成视图文档对象模型200。如图2所示，视图层310可以通过视图文档对象模型200来直接接收包含在源文件中的代码信息。

在通过HTML源文件10生成基础文档对象模型100时，网页编辑程序可以按基础文档对象模型100内存在的每个组件赋予标签。通过所述标签，网页编辑程序之后可以对视图文档对象模型200内存在的组件和基础文档对象模型100内存在的组件进行匹配。根据一个实施例，网页编辑程序按基础文档对象模型100内存在的每个组件赋予的标签应不受到适用Java脚本或CSS所带来的影响或者绑定数据库中的额外数据所带来的影响。即，在通过基础文档对象模型100构建视图文档对象模型200的过程中，标签应在适用Java脚本或者CSS，以及由此绑定额外数据等各种情况下也不发生变化。

网页编辑程序的用户可以在自己的终端画面上确认视图层310并对网页进行编辑。当用户选择视图层310中显示的组件时，网页编辑程序在视图文档对象模型200中确认用户所选择的组件的信息后，在基础文档对象模型100中搜索与所述组件匹配的组件。网页编辑程序的组件的搜索可以以前述的利用标签的方式进行。例如，网页编辑程序在视图文档对象模型200内指定用户所选择的第一组件的信息，并确认第一组件被赋予的标签信息后，通过标签所包含的信息在基础文档对象模型100内搜索并指定与第一组件匹配的第二组件。

网页编辑程序的用户在显示视图层310和设计层320的画面中选择特定组件时，网页编辑程序可以利用用户在视图文档对象模型200中选择的组件具有的标签，在基础文档对象模型100中指定与所述组件匹配的组件。例如，用户选择并移动指定组件时，网页编辑程序可以在基础文档对象模型100中移动指定组件的位置。用户选择指定组件时，在设计层320上可以显示基于用户所选择的组件的坐标和位置信息的轮廓线。并且，用户进行关于移动或者删除选择的组件的操作的输入时，设计层320上显示相应的操作。

用户在编辑画面中选择指定组件并输入关于所述组件的操作时，如上所述，网页编辑程序可利用标签在基础文档对象模型100中搜索与在视图文档对象模型200中选择的组件匹配的组件，并且在基础文档对象模型100内修改指定组件。之后，基础文档对象模型100根据基础文档对象模型100内的特定组件的变化而变化时，网页编辑程序可以将变化的基础文档对象模型100的信息反映到视图文档对象模型200。在视图文档对象模型200反映这种信息时，视图层310可以根据反映信息显示变更的信息。

如上所述，根据本发明的网页编辑程序利用标签进行基础文档对象模型100与视图文档对象模型200的同步，因此用户可以在视图层310显示的网页的编辑画面中，以与实际运行画面相同的环境进行编辑。视图层310显示的网页的编辑画面与视图文档对象模型200联动并实现，而不是与基础文档对象模型100联动并实现，因此是适用Java脚本或者CSS且绑定外部收据库的各种数据的状态，由此，可以向用户提供与完成网页的制作和编辑的编辑画面，所述编辑画面与其他用户访问浏览网页时的运行画面相同。

如上所述，使用标签使基础文档对象模型100与视图文档对象模型200同步时，即使在编辑网页时添加特别的组件只需要生成并赋予新的标签，不需要额外的定制操作，从而在构建同步系统后容易进行管理。即，不是通过每个组件的特征搜索并指定组件，因此不需要管理组件的特征信息，可以稳定地对组件进行搜索。

图3是按模块示意示出本发明的一个实施例的网页编辑程序400的结构的框图。

参照图3，网页编辑程序400可以包括基础文档对象模型管理模块410、视图文档对象模型管理模块420、视图层管理模块430、设计层管理模块440、标签赋予模块450、同步模块460以及控制模块470。

基础文档对象模型管理模块410可以基于包括HTML源代码的源文件生成基础文档对象模型100并进行管理。基础文档对象模型100可以包括多个组件，用户通过网页编辑程序400进行网页的编辑时，基础文档对象模型100的内容可以相应被修改。

视图文档对象模型管理模块420可在基础文档对象模型100适用Java脚本或者CSS来生成视图文档对象模型200并进行管理。当在基础文档对象模型100适用Java脚本或者CSS时，其他数据库的数据可以绑定到网页中，由此使基础文档对象模型100与视图文档对象模型200产生差异。

根据本发明的一个实施例，在基础文档对象模型100中适用Java脚本或者CSS等额外的结构来生成视图文档对象模型时，视图文档对象模型管理模块420可以利用内联框架(Iframe)。内联框架可以由网页编辑程序400内的内联框架管理模块(未示出)进行管理。

视图层管理模块430可以利用视图文档对象模型来以视图层310的形式生成编辑画面。

设计层管理模块440可以以透明的形式生成设计层并进行配置，所述设计层以与视图层310的区域重叠的方式显示。设计层管理模块440通过设计层320接收用户的输入信息，并且将根据用户的输入的状态变化显示到设计层320。并且，设计层管理模块440可以将用户的输入信息传递到基础文档对象模型100以适用。

基础文档对象模型管理模块410生成基础文档对象模型100后，标签赋予模块450可对包括在基础文档对象模型100内的每个组件赋予标签。在后续的视图文档对象模型管理模块420在基础文档对象模型100中适用Java脚本或者CSS等并生成视图文档对象模型200时，所述标签不受到适用Java脚本或者CSS的影响。

用户通过键盘或者鼠标等输入工具在网页编辑程序400的画面中进行输入时，同步模块460在视图文档对象模型200内指定用户的输入信息所指示的第一组件的信息，利用第一组件具有的标签信息在基础文档对象模型100中指定与第一组件匹配的第二组件。接着，同步模块460可通过设计层管理模块440接收的用户的输入信息修改在基础文档对象模型100内指定的第二组件的信息。根据用户输入信息修改第二组件的信息后，同步模块460可反映基础文档对象模型100的修改信息，修改与第二组件匹配的第一组件，即，修改视图文档对象模型200内的第一组件的信息。如上所述，在同步模块460修改基础文档对象模型100和视图文档对象模型200的信息后，前述的视图层管理模块430可以利用视图文档对象模型200的修改的信息来修改作为第一层的视图层310的内容。

控制模块470可以控制基础文档对象模型管理模块410、视图文档对象模型管理模块420、视图层管理模块430、设计层管理模块440、标签赋予模块450以及同步模块460之间的数据流动。即，根据本发明的控制模块470可以控制基础文档对象模型管理模块410、视图文档对象模型管理模块420、视图层管理模块430、设计层管理模块440、标签赋予模块450以及同步模块460分别执行独有的功能。

图4表示本发明的一个实施例的网页编辑程序400的工作过程的流程图。

参照图4，图4表示用户使用本发明的网页编辑程序400来进行网页的编辑时，网页编辑程序400同步基础文档对象模型100与视图文档对象模型200的方法。

网页编辑程序400可以加载包括HTML源信息的源文件并基于此生成基础文档对象模型100，并且在此过程中可以向基础文档对象模型100内存在的每个组件赋予标签(S401)。接着，网页编辑程序400可以通过生成的基础文档对象模型100访问源文件并进行修改。并且，当基础文档对象模型100中每次添加新的组件时，网页编辑程序400生成标签并赋予所添加的组件。

生成基础文档对象模型100后，网页编辑程序400可以将生成的基础文档对象模型100适用于内联框架并显示在画面中(S403)。所述画面可以起到网页的编辑画面的作用，可以以与运行画面相同的形式显示。在本发明中，内联框架可以以视图层310和设计层320的形式构成画面，根据一个实施例，设计层320可以以透明的形式与视图层310重叠设置。接着，网页编辑程序400可以通过内联框架生成视图文档对象模型200(S405)。生成的视图文档对象模型200可以与视图层310联接工作。即，视图文档对象模型200根据用户的输入而发生改变时，视图层310显示的画面也相应地发生改变。

用户可以通过键盘或者鼠标等输入工具选择画面内的指定组件并移动位置(S407)。网页编辑程序400的用户可以修改或者删除位于画面内的组件或者生成新的组件。下面将列举说明在用户可选择的各种输入中，用户选择指定组件并移动其位置的情况。

用户在画面中选择指定组件并移动组件位置时，网页编辑程序400可以在设计层320上针对所选择的组件的位置和想要移动的位置显示外廓线(S409)。构成网页的组件实际显示在视图层310上，在与视图层310重叠的设计层320上显示对应于用户的输入的标识，从而使得用户具有如同直接修改网页的运行画面的感受。

网页编辑程序400可以在视图文档对象模型200上指定用户在画面上选择的组件(S411)。接着，网页编辑器程序400利用赋予用户所选择的组件的标签，在基础文档对象模型100中搜索并指定与选择的组件匹配的组件(S413)。

在基础文档对象模型100中搜索到指定组件时，网页编辑程序400可以根据用户的输入来修改基础文档对象模型100的组件(S415)。例如，用户移动指定组件的位置时，网页编辑程序400可以修改在基础文档对象模型100中的指定组件的位置信息，以符合用户的输入值。

接着，网页编辑程序400可以基于基础文档对象模型100的变更而修改视图文档对象模型200的组件(S417)。在步骤S413中利用标签预先进行了视图文档对象模型200的组件与基础文档对象模型100的组件的匹配，因此网页编辑程序400可以利用所述匹配结果。作为最后一个步骤，网页编辑程序400可以通过修改的视图文档对象模型200的信息来更新视图层310(S419)。更新视图层310时，用户的编辑画面可以被修改成反映用户的输入值的结果。例如，如上所述，用户在画面中移动组件时，执行步骤S409至S419，并且最终在视图层310中显示所述组件的移动。

如上所述，根据前述的本发明的特征，用户通过网页编辑程序400编辑网页时，编辑画面可以被编辑成与实际上在网页浏览器中显示的运行画面相同的画面。这通过执行使编辑画面与运行画面同步的技术来实现，这是由于赋予基础文档对象模型100的每个组件的标签不受到适用Java脚本或者CSS的影响，能够简单地实现视图文档对象模型200与基础文档对象模型100之间的同步。因此，根据本发明，可以提高用户编辑网页时的直观性，从而提高开发效率。

另外，根据本发明的一个实施例的网页编辑程序400可以以在计算机可读的记录介质中的计算机可读的代码形式实现。计算机可读的记录介质包括存储有计算机系统可读取的数据的所有类型的记录装置。

例如，计算机可读的记录介质可以包括只读存储器(ROM)、随机存取存储器(RAM)、只读光盘(CD-ROM)、磁带、硬盘、软盘、移动式存储装置、非挥发性内存(Flash Memory)、光数据存储装置等。

并且，计算机可读的记录介质可以分散在由计算机通信网连接的计算机系统中，作为能够以分散方式读取的代码进行存储并运行。

以上，参照附图对本发明的实施例进行了说明，但是本发明所属领域的技术人员应该理解在不改变本发明的技术思想或者必要的特征的情况下，本发明可以以其他具体形式实现。因此，应该理解为以上的实施例只是用于例示，而不是限定本发明。

Claims (10)

1.一种网页编辑程序的画面同步方法，其为基于所见即所得的网页编辑程序使编辑画面与运行画面同步的方法，所述方法包括以下步骤：

生成源代码后，通过所述源代码生成基础文档对象模型，并向存在于所述基础文档对象模型内的每个组件赋予标签；

在所述基础文档对象模型适用Java脚本或者CSS来生成视图文档对象模型，并利用所述视图文档对象模型将编辑画面以第一层的形式生成；

在所述编辑画面中设置第二层，所述第二层的区域的至少一部分与所述第一层重叠，并且通过所述第二层接收用户的输入信息；

在所述视图文档对象模型中指定所述用户的输入信息所指示的第一组件的信息，利用赋予所述第一组件的标签来指定与所述第一组件匹配的所述基础文档对象模型内的第二组件；及

根据所述用户的输入信息修改在所述基础文档对象模型内指定所述第二组件的信息。

2.根据权利要求1所述的网页编辑程序的画面同步方法，其中，

在所述基础文档对象模型中适用Java脚本或者CSS来生成视图文档对象模型的步骤通过内联框架实现。

3.根据权利要求1所述的网页编辑程序的画面同步方法，其进一步包括以下步骤：

当在所述视图文档对象模型内指定所述用户的输入信息所指示的所述第一组件的信息并根据所述用户的输入信息进行修改之前，在所述第二层中显示对应于所述用户的输入信息的操作。

4.根据权利要求1所述的网页编辑程序的画面同步方法，其进一步包括以下步骤：

执行根据所述用户的输入信息修改在所述基础文档对象模型中指定的第二组件的信息的步骤之后，反映所述基础文档对象模型的修改信息，并修改与所述第二组件匹配的所述视图文档对象模型内的所述第一组件的信息。

5.根据权利要求4所述的网页编辑程序的画面同步方法，其进一步包括以下步骤：

修改所述视图文档对象模型内的所述第一组件后，通过所述视图文档对象模型的被修改信息修改所述第一层的内容。

6.根据权利要求1所述的网页编辑程序的画面同步方法，其特征在于，

所述标签不因适用Java脚本或者CSS而发生变化。

7.一种网页编辑程序，其为同步编辑画面与运行画面的的基于所见即所得的网页编辑程序，所述网页编辑程序存储在介质中以用于运行以下模块：

基础文档对象模型管理模块，生成源代码之后，通过所述源代码生成基础文档对象模型；

标签赋予模块，向存在于所述基础文档对象模型内的每个组件赋予标签；

视图文档对象模型管理模块，在基础文档对象模型中适用Java脚本或者CSS来生成视图文档对象模型；

视图层管理模块，利用所述视图文档对象模型将编辑画面以第一层的形式生成；

设计层管理模块，在所述编辑画面上设置第二层，所述第二层的区域的至少一个部分与所述第一层重叠，并且通过所述第二层接收用户的输入信息；及

同步模块，在所述视图文档对象模型内指定所述用户的输入所指示的第一组件的信息，利用赋予所述第一组件的标签指定与所述第一组件匹配的所述基础文档对象模型内的第二组件，根据所述用户的输入信息修改在所述基础文档对象模型中指定的所述第二组件的信息。

8.根据权利要求7所述的网页编辑程序，其中，

所述视图层管理模块和设计层管理模块包括在内联框架管理模块中，在所述基础文档对象模型中适用Java脚本或者CSS来生成视图文档对象模型时，所述视图文档对象模型利用内联框架模块管理的内联框架。

9.根据权利要求7所述的网页编辑程序，其中，

在根据所述用户的输入信息修改在所述基础文档对象模型中指定的所述第二组件的信息之后，所述同步模块反映所述基础文档对象模型的修改信息来修改与所述第二组件匹配的所述视图文档对象模型内的所述第一组件的信息。

10.根据权利要求9所述的网页编辑程序，其中，

所述同步模块修改所述视图文档对象模型内的第一组件后，所述视图层管理模块通过所述视图文档对象模型的修改信息修改所述第一层的内容。

Images