CN102254049A - 一种Web页设计系统及其构建方法 - Google Patents

Abstract

本发明揭示了一种Web页设计系统及其构建方法，所述系统包括：设计组件，包含至少一个参数，所述设计组件对应能根据所述设计组件及所述参数生成HTML代码的逻辑，Web页作者可配置所述逻辑；设计面板，作为Web页作者进行设计的工作区域，用于在所述区域显示Web页浏览效果视图；视图控件，用于浏览Web页作者进行设计产生的Web页内容，提供Web页浏览效果视图。本发明可以实现在设计面板呈现Web页浏览效果，尤其是执行脚本后的效果视图，提升所见即所得的Web页设计体验；简化Web页设计操作，提高Web页设计效率；降低Web页设计门槛，扩大Web页设计的用户群。

Description

一种Web页设计系统及其构建方法

技术领域

本发明属于计算机网络技术领域，涉及一种设计系统，尤其涉及一种Web页设计系统；同时，本发明还涉及一种Web页设计系统的构建方法。

背景技术

随着互联网的普及与发展，越来越多的用户在互联网上浏览网页，越来越多的企业、团体及个人在互联网上发布网站，网页。随着社区网站、博客、微博、电子商务平台(如淘宝，eBay)等影响力日益增强，更多的非专业人士亦有需要制作网页来刊登产品，发布个性化个人页面，或在社区网上发布个性化内容。

现有的Web设计工具中，大多功能全面，能满足绝大多数专业人士的要求。典型的Web设计工具如Dreaemweaver，Frontpage都功能强大，能带给专业人士良好的体验。

但是，现有的Web设计软件有如下缺点：

1、设计界面看不到页面实际运行的效果。有的web设计软件提供所见即所得的设计功能，但也只是设计时的模拟，并不是真正的运行时的效果。如有的页面使用Javascript动态创建页面元素，这时用户需要在浏览器下运行该页面才能看到实际运行效果。

2、在现有的Web设计软件中，均要求用户创建或修改HTML(Hyper TextMarkup Language)元素，其菜单，工具栏等辅助工具也只能创建，修改HTML元素，所以要求用户有HTML编程基础。否则不能正确使用软件功能，当进一步需要制作更专业的Web页面时，更需要精通HTML。当需要用CSS(Style Sheet)或脚本语言(如Javascript)实现页面效果时，要求用户有CSS、脚本语言编程经验。

3、对页面的排版操作不够便捷。HTML默认使用相对位置排版，如使用绝对位置排版，需用CSS属性position:absolute定义。在现有的web设计软件中，即使用户在每个元素上使用绝对位置排版，也不能通过鼠标点击元素的任一区域选中该元素然后拖放来重新定位。因此，对于页面排版的用户体验有待提升。

发明内容

本发明所要解决的技术问题是：提供一种Web页设计系统，可以实现在设计面板呈现Web页浏览效果，尤其是执行脚本后的效果视图，提升所见即所得的Web页设计体验；简化Web页设计操作，提高Web页设计效率；降低Web页设计门槛，扩大Web页设计的用户群。

此外，本发明还提供一种Web页设计系统的构建方法，可以实现在设计面板呈现Web页浏览效果，尤其是执行脚本后的效果视图，提升所见即所得的Web页设计体验；简化Web页设计操作，提高Web页设计效率；降低Web页设计门槛，扩大Web页设计的用户群。

为解决上述技术问题，本发明采用如下技术方案：

一种Web页设计系统，所述系统包括：

设计组件，包含至少一个参数，所述设计组件对应能根据所述设计组件及所述参数生成HTML代码的逻辑，Web页作者可配置所述逻辑；

设计面板，作为Web页作者进行设计的工作区域，用于在所述区域显示Web页浏览效果视图；

视图控件，用于浏览Web页作者进行设计产生的Web页内容，提供Web页浏览效果视图；当Web页内容中包含脚本代码时，所述视图控件能提供执行脚本代码的运行效果视图；所述视图控件提供编程接口，并且所述编程接口提供可直接或间接修改所显示的Web页内容的方法。

作为本发明的一种优选方案，所述视图控件为任一类支持浏览Web页内容的控件。

作为本发明的一种优选方案，所述系统进一步包括参数自定义模块，Web页作者通过所述参数自定义模块以自定义的方式扩充参数。

作为本发明的一种优选方案，所述系统进一步包括设计视图更新模块，包括：

修改内容确定单元，用以确定被修改的设计组件及被修改的参数；

视图更新单元，用以根据设计组件/参数的修改重新装载或动态修改运行于视图控件中的Web页内容，以此实现设计视图的更新。

作为本发明的一种优选方案，所述设计视图更新模块进一步包括：

操作分析单元，用以分析、过滤用户通过辅助设计工具进行的操作；所述辅助设计工具包括菜单、工具栏、参数设置面板、弹出窗体及设计面板中的一种或多种；

参数修改单元，用以根据所述操作分析单元的分析结果修改被操作设计组件的相应的参数。

作为本发明的一种优选方案，所述视图更新单元根据被修改的设计组件及参数，确定更新视图的方式，通过如下几种方式中的一种或多种来更新视图；

a、生成所有设计组件的Web页内容，重新载入到视图控件中运行；

b、根据被修改的设计组件及参数，通过视图控件的编程接口、文档对象模型DOM编程接口，动态修改视图控件中正在运行中的Web页中的相应元素；

c、根据被修改的设计组件及参数，生成该设计组件的全部或部分Web页内容，通过视图控件的编程接口、文档对象模型DOM编程接口，动态替换视图控件中正在运行中的Web页中的相应元素；

d、根据增加的设计组件，生成该设计组件的全部Web页内容，通过视图控件的编程接口、文档对象模型DOM编程接口，动态增加到视图控件中正在运行的Web页中；

e、根据被删除的设计组件，通过视图控件的编程接口、文档对象模型DOM编程接口，动态删除视图控件中正在运行中的Web页中的相应元素；

f、根据增加、删除或被修改的设计组件及参数，生成可在视图控件中执行的脚本程序代码；通过视图控件的编程接口执行脚本程序代码，动态增加、删除、修改、替换视图控件中正在运行中的Web页中的相应元素；

g、根据增加、删除或被修改的设计组件及参数，生成可在视图控件中执行的脚本程序代码；通过视图控件的编程接口、文档对象模型DOM编程接口，注入脚本程序代码然后执行，动态增加、删除、修改、替换视图控件中正在运行中的Web页中的相应元素。

一种Web页设计系统，所述系统包括：

控制模块，用于分析、处理用户行为，对用户行为做出响应；所述控制模块包括组件管理单元，所述组件管理单元用于定义设计组件，所述设计组件包含至少一个参数，所述设计组件对应能根据所述设计组件及所述参数生成HTML代码的逻辑，Web页作者可配置所述逻辑；所述组件管理单元还用于管理设计组件集合及各设计组件的参数数据，及各设计组件对应的生成HTML代码的逻辑数据；

代码生成模块，用于根据所述设计组件、所述设计组件包含的所述参数、所述设计组件对应的所述生成HTML代码的逻辑生成HTML代码；

设计视图模块，用于呈现Web页作者进行设计产生的所述HTML代码的实时浏览效果视图，还用于根据所述设计组件的更新，同步更新所述浏览效果视图；当所述HTML代码中包含可执行脚本代码时，所述设计视图模块能呈现执行脚本代码的实时浏览效果视图；

自定义模块，用于提供所述设计组件的自定义方法；Web页作者可配置根据设计组件及参数生成HTML代码的逻辑；自定义模块还用于处理由Web页作者配置的所述逻辑。

作为本发明的一种优选方案，所述自定义模块及所述自定义方法还包括：Web页作者可扩充设计组件的参数；自定义模块还用于处理由Web页作者扩充的所述参数。

作为本发明的一种优选方案，所述系统进一步包括：用户界面模块，用于定义及提供可视化用户界面，包括菜单、工具栏、设计面板、参数设置面板、弹出窗体；用户界面模块还用于捕捉用户的操作事件，并对用户事件进行初步分析、过滤，然后对用户做出响应或者传递到控制模块作进一步处理。

作为本发明的一种优选方案，所述系统进一步包括：持久化模块，用于序列化和反序列化设计文档及序列化和反序列化组件；其内容表现为描述文档对象及组件对象的若干数据结构及数据项，包括基本信息：文档创建时间、最近修改时间及控件集合；在序列化设计文档和组件时，用到通用的XML序列化技术；

通过对象反射，遍历文档对象及组件对象及其数据结构，将其数据结构、数据项逐一序列化为XML文本。当反序列化设计文档和组件时，解析XML文本，并根据XML文本中的数据结构及数据项逐一构建文档对象及组件对象。

一种构建Web页设计系统的构建方法，所述构建方法包括如下步骤(步骤不分先后顺序)：

S1、定义包含至少一个参数的设计组件；

S2、提供可供Web页作者自定义所述参数值的用户接口；

S3、提供可供Web页作者自定义根据所述设计组件及所述参数生成HTML代码的逻辑的接口；

S4、提供可供Web页作者进行设计操作的设计面板；

S5、提供生成HTML代码的方法；

S6、提供可在设计面板呈现Web页浏览的效果视图的处理方法。所述Web页浏览的效果视图，当Web页包含可执行脚本代码时，所述步骤S6提供的处理方法能提供执行脚本代码的效果视图。

作为本发明的一种优选方案，所述方法进一步包括：提供可供Web页作者自定义所述设计组件的参数的接口。

作为本发明的一种优选方案，所述步骤S7中效果视图处理方法具体包括：

a、生成所有设计组件的Web页内容，重新载入到Web视图控件中运行；

b、根据被修改的设计组件及参数，通过视图控件的编程接口、文档对象模型DOM编程接口，动态修改视图控件中正在运行中的Web页中的相应元素；

c、根据被修改的设计组件及参数，生成该设计组件的全部或部分Web页内容，通过视图控件的编程接口、文档对象模型DOM编程接口，动态替换视图控件中正在运行中的Web页中的相应元素；

d、根据增加的设计组件，生成该设计组件的全部Web页内容，通过视图控件的编程接口、文档对象模型DOM编程接口，动态增加到视图控件中正在运行的Web页中；

e、根据被删除的设计组件，通过视图控件的编程接口、文档对象模型DOM编程接口，动态删除视图控件中正在运行中的Web页中的相应元素；

f、根据增加、删除或被修改的设计组件及参数，生成可在视图控件中执行的脚本程序代码；通过视图控件的编程接口执行脚本程序代码，动态增加、删除、修改、替换视图控件中正在运行中的Web页中的相应元素；

g、根据增加、删除或被修改的设计组件及参数，生成可在视图控件中执行的脚本程序代码；通过视图控件的编程接口、文档对象模型DOM编程接口，注入脚本程序代码然后执行，动态增加、删除、修改、替换视图控件中正在运行中的Web页中的相应元素。

本发明Web页设计系统及其构建方法的有益效果在于：

1、应用本系统及方法，用户可以在设计界面看到页面运行时的效果，而无需单独启动浏览器来查看Web页浏览效果，显著提升所见即所得的Web页设计体验。

2、应用本系统及方法，使用的基本设计元素是设计组件。Web页作者可通过拷贝、粘贴、剪切和删除组件的操作，及拖放设计组件进行排版的操作，通过设置设计组件的参数值来更改设计组件的内容、外观、尺寸、位置及表现行为进行设计。相比其它Web页设计软件，普通用户不需要懂HTML、CSS和脚本语言，而只需拥有简单的计算机操作技能，通过对设计组件的操作就能进行设计，并得到想要的效果。因此本系统简化了Web页设计操作，显著提高Web页设计效率；降低了Web页设计门槛，显著扩大Web页设计的用户群。

3、应用本系统，Web页作者可通过扩充设计组件的参数及自定义生成HTML代码的逻辑，开发出任意效果的组件。无论组件生成的HTML代码包含多复杂的HTML元素组织结构，及多复杂的脚本程序，对普通Web页作者而言都是显示在设计面板的一个浏览效果，只需要拷贝、粘贴就能轻易复制。组件的可重用性高。

4、应用本系统，Web页作者能通过鼠标点击组件的任一区域然后拖放进行排版，相比其它的Web页设计软件，就页面排版操作而言显著提升了用户体验。

附图说明

图1为本发明系统的组成示意图。

图2为实施例一中设计面板显示示意图。

图3为实施例九中本发明系统的组成示意图。

图4为实施例九中系统的设计界面示意图。

图5为Matrix设计控件运行效果示意图。

图6、图7为Web页排版示意图。

具体实施方式

下面结合附图详细说明本发明的优选实施实例，以下优选案例采用DOTNET Framework开发技术实现，在以下所有实施实例中，设计组件用一种窗体控件实现，被称为设计控件，设计组件的参数被称为设计控件的属性。

实施例一

请参阅图1，本实施例揭示一种Web页设计系统，所述系统包括设计控件、设计面板、视图控件、控制模块、代码生成模块、设计视图模块、自定义模块。

【设计控件】

设计控件是本系统的基本设计元素，Web页作者通过操作设计控件进行设计。

所述设计控件包含至少一个属性，所述设计控件对应能根据所述设计控件及所述属性生成HTML代码的逻辑，Web页作者可以通过自定义的方式修改所述逻辑。用以上方法定义设计控件的其中一个目的是将设计控件模板化，Web页作者可通过扩充所述属性、修改所述逻辑、配置所述属性的值的方式来进行设计操作，实现设计意图。在本发明中的实施实例中，所述逻辑用若干属性定义，Web页作者可以配置属性的值来修改所述逻辑；用户通过配置数据结构来扩充属性。

本实施例揭示一种可灵活配置的模板化设计控件，揭示通过一种在配置的基础上再配置的方法，一方面可进行深度开发，Web页作者可以封装任意HTML元素组合，包括CSS、脚本代码，可用于呈现任意内容及效果；另一方面使用简单，不同于扩充所述属性和配置所述逻辑，Web页任者可以配置某一属性来改变所述设计控件的内容、外观及表现行为。由此可见它既提供给有编程经验的Web页作者进行深度开发，也提供给不懂HTML、CSS及脚本语言的Web页作者使用。

本实施例定义一种设计控件，设计控件提供ID、Location、Size、Background、Border、Configuration、Scripts、Style Sheets、HtmlTemplate、ScriptTemplate、Style SheetTemplate等属性。

ID：设计控件的唯一标识；

Location：设计控件的左上角对应的坐标；

Size：设计控件的大小，包括长和宽；

Background：设计控件的背景；

Border：设计控件的边框；

Configuration：可自定义的任意数据结构；

Scripts：脚本代码集合；

StyleSheets：级联样式表集合；

HtmlTemplate：生成Html代码的文本模板；

ScriptTemplate：生成脚本代码的文本模板；

StyleSheetTemplate：生成级联样式表的文本模板。

【设计面板】

设计面板是Web页作者进行设计的工作区域，用于在所述区域显示Web页浏览效果视图，它还用于捕捉用户在此区域进行的设计操作。

本实施例中，请参阅图2，所述设计面板分上下两层。上层是一种透明窗体控件，该窗体控件呈现为透明，在必要时绘制设计控件的边框以示设计控件的位置及大小。下层放置Internet Explorer控件。上下两层分工合作，上层用于捕捉用户的操作事件，下层用于实时显示根据设计控件产生的HTML代码的效果图。

【视图控件】

视图控件用于浏览Web页作者进行设计产生的Web页内容，提供Web页浏览效果视图。当Web页内容中包含脚本代码时，所述视图控件能提供执行脚本代码后的运行效果视图。所述视图控件提供编程接口，并且具有通过编程接口修改所显示的Web页内容的方法。

本发明实施实例中，使用Internet Explorer控件作为所述视图控件。其在DOTNET Framework中名为WebBrowser控件，该控件是一种浏览Web页的一类控件之一，支持浏览Web页，该控件支持脚本语言，当Web页内容中包含脚本代码时能显示执行脚本代码的浏览效果图。该控件还提供编程接口，可通过编程接口直接或间接修改运行于该控件中的Web页内容，也可通过编程接口执行脚本代码。

【设计视图更新模块】

所述系统进一步包括设计视图更新模块，包括：操作分析单元、属性修改单元、修改内容确定单元、视图更新单元。

操作分析单元用以分析、过滤用户通过辅助设计工具进行的操作；所述辅助设计工具包括菜单、工具栏、属性设置面板、弹出窗体及设计面板中的一种或多种。

属性修改单元，用以根据所述操作分析单元的分析结果修改被操作设计控件的相应的属性。

修改内容确定单元，用以确定被修改的设计控件及被修改的属性。

视图更新单元，用以根据设计控件/属性的修改重新装载或动态修改运行于视图控件中的Web页内容，以此实现设计视图的更新。

所述视图更新单元根据被修改的设计控件及属性，确定更新视图的方式，通过如下几种方式中的一种或多种来更新视图；

a、生成所有设计控件的Web页内容，重新载入到Web浏览器控件中运行；

b、根据被修改的设计控件及属性，通过浏览器控件的编程接口、文档对象模型DOM编程接口，动态修改浏览器控件中正在运行中的Web页中的相应元素；

c、根据被修改的设计控件及属性，生成该设计控件的全部或部分Web页内容，通过视图控件的编程接口、文档对象模型DOM编程接口，动态替换浏览器控件中正在运行中的Web页中的相应元素；

d、根据增加的设计控件，生成该设计控件的全部Web页内容，通过视图控件的编程接口、文档对象模型DOM编程接口，动态增加到视图控件中正在运行的Web页中；

e、根据被删除的设计控件，通过视图控件的编程接口、文档对象模型DOM编程接口，动态删除浏览器控件中正在运行中的Web页中的相应元素；

f、根据增加、删除或被修改的设计控件及属性，生成可在浏览器控件中执行的脚本程序代码；通过浏览器控件的编程接口执行脚本程序代码，动态增加、删除、修改、替换浏览器控件中正在运行中的Web页中的相应元素；

g、根据增加、删除或被修改的设计控件及属性，生成可在浏览器控件中执行的脚本程序代码；通过浏览器控件的编程接口、文档对象模型DOM编程接口，注入脚本程序代码然后执行，动态增加、删除、修改、替换浏览器控件中正在运行中的Web页中的相应元素。

【控制模块】

控制模块用于分析、处理用户行为，对用户行为作出响应。该模块包括控件管理单元，用于管理设计控件集合及各设计控件的属性数据，及各设计控件对应的生成HTML代码的逻辑数据。

【代码生成模块】

代码生成模块用于根据设计控件包含的属性，及生成HTML代码的逻辑生成HTML代码。

【设计视图模块】

设计视图模块，用于呈现视图控件浏览Web页内容提供的Web页浏览效果视图。还用于根据设计控件的更新，重新装载或动态修改运行于视图控件中的Web页的内容，达到实时更新、同步视图的目的。

【自定义模块】

自定义模块用于提供所述设计控件的自定义方法。通过该方法，Web页作者可以扩充设计控件的属性，配置根据设计控件及属性生成HTML代码的逻辑。自定义模块还用于分析、处理用户扩充的所述属性及用户配置的所逻辑。

本发明同时揭示一种用于识别、处理自定义属性的方法；所述方法包括如下步骤：解析Configuration属性的数据结构；将所述数据结构中的数据项逐一表现为Configuration属性的子属性。

【用户界面模块】

所述系统进一步包括用户界面模块，用于定义及提供可视化用户界面，包括菜单、工具栏、设计面板、属性设置面板、弹出窗体；用户界面模块还用于捕捉用户的操作事件，并对用户事件进行初步分析、过滤，然后对用户作出响应或者传递到控制模块作进一步处理。

【持久化模块】

优选地，所述系统进一步包括持久化模块，用于序列化和反序列化设计文档及序列化和反序列化设计控件。其内容表现为描述文档对象及设计控件对象的若干数据结构及数据项，包括基本信息：文档创建时间、最近修改时间及设计控件集合。在序列化设计文档和设计控件时，用到通用的Xml序列化技术。通过对象反射，遍历文档对象及设计控件对象及其数据结构，将其数据结构、数据项逐一序列化为XML文本。当反序列化设计文档和设计控件时，解析XML文本，并根据XML文本中的数据结构及数据项逐一构建文档对象及设计控件对象。

实施例二

本实施例与实施例一的区别在于，本实施例中系统包括可供Web页作者自定义属性的接口。提供一个对话框，可供Web页作者来修改设计控件的Configuration属性的数据结构来实现自定义Configuration，当Configuration属性数据结构被修改后，Configuration属性表现出具有不同的子属性。

实施实例三

本实施例与实施例一的区别在于，本实施例中系统包括可供Web页作者自定义属性的接口。使用通用的XML序列化技术，将设计控件对象序列化成XML文本，通过修改XML文本来修改Configuration属性的数据结构。

实施例四

本实施例与实施例一的区别在于，本实施例中系统包括可供Web页作者自定义属性的接口。通过编程方式定义一个类，该类继承实施实例一中所述的窗体控件，并在类中定义属性。由此所述窗体控件将表现出具有更多属性。

实施例五

本实施例与以上实施例的区别在于，本实施例说明一种可供Web页作者配置设计控件的属性用户接口。所述图形户用接口用属性设置面板控件实现，该属性设置面板控件在DOT NET Framework中名为PropertyGrid。通过使用属性设置面板，可以配置设计控件的属性值。

实施例六

本实施例与以上实施例的区别在于，本实施例说明一种根据设计控件及属性生成HTML代码的逻辑表示方案。所述逻辑用一种参数化的可编程文本模板表示。所述文本中可嵌入以设计控件的属性名为名称的标签。

实施例七

本实施例与以上实施例的区别在于，本实施例说明一种可供Web页作者自定义HTML代码生成逻辑的用户接口。在本实施案例中，所述生成HTML代码的逻辑由设计控件的若干属性表示，每个属性对应的值为文本模板。用户通过使用属性设置面板来将文本模板内容设置为属性的值，来完成HTML代码生成逻辑的设置。

实施例八

本实施例与以上实施例的区别在于，本实施例说明一种根据设计控件及属性生成HTML代码的方法。根据以上实施例中的所述设计控件及所述生成HTML代码的逻辑，所述方法包括如下步骤：

首先获取HtmlTemplate属性值，即文本模板，如文本模板中包含属性标签，根据属性标签描述的属性名称获取相应的属性值，然后用属性值替换该属性标签。重复以上方法直到文本模板中的属性标签被全部替换。文本模板被替换后得到Html代码；

其次获取ScriptTemplate的属性值，使用相同的方法得到Script代码；

再获取StyleSheetTemplate的属性值，使用相同的方法得到StyleSheet代码；

然后获取Scripts属性值，得到脚本代码集合；

然后获取StyleSheets属性值，得到级联样式表集合；

然后组合得到所有包括以上所有代码的HTML代码；

然后根据ID、Location、Size、Background、Border属性值生成一个DIV元素的代码，并将以上代码包含在DIV元素之内，最后得到整个设计控件的HTML代码。

实施例九

请参阅图3，本实施例揭示了一种Web页设计系统，图4为Web页设计系统的界面示意图。所述系统包括用户界面模块10、控制模块20、设计视图模块30、代码生成模块40、持久化模块50。

【用户界面模块】

用户界面模块10用于提供用户界面，包括菜单、工具栏、设计面板、属性设置面板、弹出窗体等；用户界面模块还捕捉用户的操作事件(如键盘鼠标及其它输入设备产生的事件)，并对用户事件进行分析、过滤后通知控制模块或直接响应用户操作事件；用户界面模块还在设计面板区域呈现Web页作者进行设计产生的HTML代码的实时运行效果图(如图5所示)，尤其是运行脚本代码后产生的效果图。

【控制模块】

控制模块用于分析、处理用户行为，对用户行为作出响应。该模块包括设计控件管理单元，用于管理设计控件集合及各设计控件的属性数据，及各组件的生成HTML代码的逻辑数据。

设计控件是Web页设计的基本元素，用户进行Web页设计实际上是对设计控件进行操作。当用户用鼠标点击某设计控件时，控制模块将该设计控件设置为选定的设计控件，并通知界面模块刷新属性设置面板；当用户拖放某设计控件时，控制模块更改该设计控件的位置，并通知设计视图模块更新设计视图；当用户拖放某设计控件的边框时，控制模块修改该设计控件的大小，并通知设计视图模块更新设计视图；当用户通过属性设置面板设置选定的设计控件的属性时，控制模块修改对的设计控件的对应属性值，并通知设计视图模块更新设计视图。对于更多用户行为的处理，不在此一一列举。

【代码生成模块】

代码生成模块，用于根据设计控件及其属性以及生成HTML代码的逻辑生成HTML代码。本实施实例使用实施实例九中所述的方法生成HTML代码。

【设计视图模块】

设计视图模块，用于提供视图控件浏览Web页内容提供的Web页浏览效果视图。还用于根据组件的更新，重新装载或动态修改运行于视图控件中的Web页的内容，达到实时更新、同步视图的目的。

【持久化模块】

持久化模块用于序列化和反序列化设计文档及序列化和反序列化设计控件。其中的内容表现为所述文档及所述设计控件的一些属性，包括基本信息如文档创建时间、最近修改时间等及控件集合。在序列化设计文档和组件时，用到通用的Xml序列化技术。通过对象反射，遍历文档对象及设计控件对象及其数据结构，将其数据结构、数据项逐一序列化为XML文本。当反序列化设计文档和组件时，解析XML文本，并根据XML文本中的数据结构及数据项逐一构建文档对象及设计控件对象。

实施例十

根据以上实施实例，本发明实施实例说明Web页作者如何开发一种Matrix设计控件。该设计控件看起来具有如下效果，控件中有若干随机产生的字符往下掉，经过一段时间，往下掉的字符静止下来显示出一行文本，经过一段时间，字符又重新开始往下掉，如此周而复始。以下详细说明开发Matrix设计控件的方法。

首先扩充设计控件的属性。将设计控件的Configuration属性定义为一种数据结构，该数据结构包括如下三个子属性：

Text：静止后显示的一行文本的内容

RowCount：行数，即字符往下掉的次数

RerunInterval：字符静止下来以后又重新开始的时间间隔，用秒数表示；

然后将支持运行效果的Javascript集合设置为设计控件的Scripts属性；

然后将一段文本模板设置为该设计控件的ScriptTemplate属性，这段文本中包含Text、RowCount、RerunInterval属性标签。

至此，该设计控件已开发完成，根据该设计控件生成的HTML代码已完全包含产生以上所述的运行效果的HTML元素及Javascript代码。

实施例十一

根据以上实施实例，本发明实施实例说明普通Web页作者如何使用Matrix设计控件。

普通Web页作者可能不懂HTML，也根本不知道Javascript是什么。但当打开包含本发明系统(Matrix)设计控件的文档时，立即能看到Matrix设计控件表现的是什么。普通Web页作者能通过如下方法操作设计控件进行设计：

方法1，通过鼠标点击选中Matrix设计控件。

方法2，通过键盘键Ctrl+C/Ctrl+V复制Matrix设计控件。

方法3，通过鼠标拖放Matrix设计控件更改Matrix设计控件的位置。

方法4，通过鼠标拖放Matrix设计控件的边框更改Matrix设计控件的大小。

方法5，通过设计面板更改Configuration属性的子属性Text的值来更改Matrix设计控件静止下来后显示的文本内容。

方法6，通过属性设置面板设置Configuration属性的子属性RowCount值来更改Matrix设计控件中字符往下掉的次数。

方法7，通过属性设置面板设置Configuration属性的子属性RerunInterval的值来更改当静止下来后又重新开始显示字符往下掉的效果的时间间隔。

方法8，通过键盘键Delete来删除设计控件。

实施例十二

根据以上实施实例，本发明实施实例说明如何应用本系统进行Web页排版。

Web页作者在排版之前已经获得设计文档，并通过本系统打开设计文档，如图6所示，该文档中包含A、B、C、D四个设计控件，以下步骤演示Web页作者如何进行排版操作将A、B交换位置，将C、D交换位置：

步骤S1：使用鼠标将设计控件A拖放至设计控件B的位置；

步骤S2：使用鼠标将设计控件B拖放至设计控件A的原位置；

步骤S3：使用鼠标将设计控件C拖放至设计控件D的位置；

步骤S4：使用鼠标将设计控件D拖放至设计控件C的原位置。

如图7所示，Web页作者得到排版后的结果，Web页作进一步可将设计文档保存。

实施例十三

根据以上实施实例，本发明实施实例说明一种构建Web页设计系统的构建方法，所述方法包括如下步骤：

定义包含至少一个属性的设计控件；使用实施实例一中说明的设计控件的定义。

提供可供Web页作者自定义所述设计控件的属性的接口。

提供可供Web页作者配置所述属性值的用户接口；可使用实施实例五中说明的属性设置面板配置属性值。

提供可供Web页作者自定义根据设计控件及属性生成HTML代码的逻辑的接口；可使用实施实例七中说明的自定义逻辑的接口。

提供可供Web页作者进行设计操作的设计面板。

提供生成HTML代码的方法；可使用实施实例八中说明的生成HTML代码的方法。

提供可在设计面板呈现Web页浏览的效果视图的处理方法。

综上所述，使用本发明提出的Web页设计系统时，用户可以在设计界面看到Web页运行时的效果，尤其是执行脚本的运行效果图，显著提升了所见即所得的Web页设计体验。

有编程经验的Web页开发者封装任意HTML元素，封装了任意脚本代码，能开发出任意效果的设计控件。普通用户通过拷贝、粘贴、剪切和删除操作。及拖放控件进行排版，通过更改设计控件属性来改变设计控件的内容、外观、尺寸、位置进行设计。相比其它Web页设计软件，普通用户不需要懂HTML、CSS和脚本语言，而只需要知道如何对控件进行操作。因此本系统简化了Web页设计操作，显著提高Web设计效率；本系统还降低了Web页设计门槛，显著扩大Web页设计的用户群；由于设计控件复制简单，显著提高了设计控件的可重用性。

此外，本发明提出的Web页设计方法，能让用户用鼠标点击控件的任一区域然后拖放进行排版，相比其它的Web页设计软件，就页面排版操作而言显著提升了用户体验。

这里本发明的描述和应用是说明性的，并非想将本发明的范围限制在上述实施实例中。这里所披露的实施实例的变形和改变是可能的，对于那些本领域的普通技术人员来说实施实例的替换和等效的各种部件是公知的。本领域技术人员应该清楚的是，在不脱离本发明的精神或本质特征的情况下，本发明可以以其它形式、结构、布置、比例，以及用其它组件、材料和部件来实现。在不脱离本发明范围和精神的情况下，可以对这里所披露的实施实例进行其它变形和改变。

Claims (13)

1.一种Web页设计系统，其特征在于，所述系统包括：

设计组件，包含至少一个参数，所述设计组件对应能根据所述设计组件及所述参数生成HTML代码的逻辑，Web页作者可自定义所述逻辑；

设计面板，作为Web页作者进行设计的工作区域，用于在所述工作区域显示Web页浏览效果视图；

视图控件，用于浏览Web页作者进行设计产生的Web页内容，提供Web页浏览效果视图；当Web页内容中包含脚本代码时，所述视图控件能提供执行脚本代码的运行效果视图；所述视图控件提供编程接口，并且所述编程接口提供可直接或间接修改所显示的Web页内容的方法。

2.根据权利要求1所述的Web页设计系统，其特征在于：

所述视图控件为任一类支持浏览Web页内容的控件。

3.根据权利要求1所述的Web页设计系统，其特征在于：

所述系统进一步包括参数自定义模块，用于提供参数自定义接口，Web页作者可通过所述接口以自定义的方式扩充参数。

4.根据权利要求1所述的Web页设计系统，其特征在于：

所述系统进一步包括设计视图更新模块，包括：

修改内容确定单元，用以确定被修改的设计组件及被修改的参数；

视图更新单元，用以根据设计组件/参数的修改重新装载或动态修改运行于视图控件中的Web页内容，以此实现设计视图的更新。

5.根据权利要求4所述的Web页设计系统，其特征在于：

所述设计视图更新模块进一步包括：

操作分析单元，用以分析、过滤用户通过辅助设计工具进行的操作；所述辅助设计工具包括菜单、工具栏、参数设置面板、弹出窗体及设计面板中的一种或多种；

参数修改单元，用以根据所述操作分析单元的分析结果修改被操作设计组件的相应的参数。

6.根据权利要求4所述的Web页设计系统，其特征在于：

所述视图更新单元根据被修改的设计组件及参数，确定更新视图的方式，通过如下几种方式中的一种或多种来更新视图；

a、生成所有设计组件的Web页内容，重新载入到Web浏览器控件中运行；

b、根据被修改的设计组件及参数，通过浏览器控件的编程接口、文档对象模型DOM编程接口，动态修改浏览器控件中正在运行中的Web页中的相应元素；

c、根据被修改的设计组件及参数，生成该设计组件的全部或部分Web页内容，通过视图控件的编程接口、文档对象模型DOM编程接口，动态替换浏览器控件中正在运行中的Web页中的相应元素；

d、根据增加的设计组件，生成该设计组件的全部Web页内容，通过视图控件的编程接口、文档对象模型DOM编程接口，动态增加到视图控件中正在运行的Web页中；

e、根据被删除的设计组件，通过视图控件的编程接口、文档对象模型DOM编程接口，动态删除浏览器控件中正在运行中的Web页中的相应元素；

f、根据增加、删除或被修改的设计组件及参数，生成可在浏览器控件中执行的脚本程序代码；通过浏览器控件的编程接口执行脚本程序代码，动态增加、删除、修改、替换浏览器控件中正在运行中的Web页中的相应元素；

g、根据增加、删除或被修改的设计组件及参数，生成可在浏览器控件中执行的脚本程序代码；通过浏览器控件的编程接口、文档对象模型DOM编程接口，注入脚本程序代码然后执行，动态增加、删除、修改、替换浏览器控件中正在运行中的Web页中的相应元素。

7.一种Web页设计系统，其特征在于，所述系统包括：

控制模块，用于分析、处理用户行为，对用户行为做出响应；所述控制模块包括组件管理单元，所述组件管理单元用于定义设计组件，所述设计组件包含至少一个参数，所述设计组件对应能根据所述设计组件及所述参数生成HTML代码的逻辑，Web页作者可自定义所述逻辑；所述组件管理单元还用于管理设计组件集合及各设计组件的参数数据，及各设计组件对应的生成HTML代码的逻辑数据；

代码生成模块，用于根据所述设计组件、所述设计组件包含的所述参数、所述设计组件对应的所述生成HTML代码的逻辑生成HTML代码；

设计视图模块，用于呈现Web页作者进行设计产生的所述HTML代码的实时浏览效果视图，还用于根据所述设计组件的更新，同步更新所述浏览效果视图；当所述HTML代码中包含可执行脚本代码时，所述设计视图模块能呈现执行脚本代码的实时浏览效果视图；

自定义模块，用于提供所述设计组件的自定义方法；Web页作者可自定义根据设计组件及参数生成HTML代码的逻辑；自定义模块还用于处理由Web页作者自定义的所述逻辑。

8.根据权利要求7所述的Web页设计系统，其特征在于：

所述自定义模块及所述自定义方法还包括：Web页作者可扩充设计组件的参数；自定义模块还用于处理由Web页作者扩充的所述参数。

9.根据权利要求7所述的Web页设计系统，其特征在于，所述系统进一步包括：

用户界面模块，用于定义及提供可视化用户界面，包括菜单、工具栏、设计面板、参数设置面板、弹出窗体；用户界面模块还用于捕捉用户的操作事件，并对用户事件进行初步分析、过滤，然后对用户做出响应或者传递到控制模块作进一步处理。

10.根据权利要求7所述的Web页设计系统，其特征在于，所述系统进一步包括：

持久化模块，用于序列化和反序列化设计文档及序列化和反序列化组件；其内容表现为描述文档对象及组件对象的若干数据结构及数据项，包括基本信息：文档创建时间、最近修改时间及控件集合；在序列化设计文档和组件时，用到通用的XML序列化技术；

通过对象反射，遍历文档对象及组件对象及其数据结构，将其数据结构、数据项逐一序列化为XML文本。当反序列化设计文档和组件时，解析XML文本，并根据XML文本中的数据结构及数据项逐一构建文档对象及组件对象。

11.一种构建Web页设计系统的构建方法，其特征在于，所述构建方法包括如下步骤：

S1、定义包含至少一个参数的设计组件；

S2、提供可供Web页作者自定义所述参数值的用户接口；

S3、提供可供Web页作者自定义根据所述设计组件及所述参数生成HTML代码的逻辑的接口；

S4、提供可供Web页作者进行设计操作的设计面板；

S5、提供生成HTML代码的方法；

S6、提供可在设计面板呈现Web页浏览的效果视图的处理方法；所述Web页浏览的效果视图，当Web页包含可执行脚本代码时，所述步骤S6提供的处理方法能提供执行脚本代码的效果视图。

12.根据权利要求11所述的构建方法，其特征在于：

所述方法进一步包括：提供可供Web页作者自定义所述设计组件的参数的接口。

13.根据权利要求11所述的构建方法，其特征在于：

所述步骤S7中效果视图处理方法具体包括：

a、生成所有设计组件的Web页内容，重新载入到Web浏览器控件中运行；

b、根据被修改的设计组件及参数，通过浏览器控件的编程接口、文档对象模型DOM编程接口，动态修改浏览器控件中正在运行中的Web页中的相应元素；

c、根据被修改的设计组件及参数，生成该设计组件的全部或部分Web页内容，通过视图控件的编程接口、文档对象模型DOM编程接口，动态替换浏览器控件中正在运行中的Web页中的相应元素；

d、根据增加的设计组件，生成该设计组件的全部Web页内容，通过视图控件的编程接口、文档对象模型DOM编程接口，动态增加到视图控件中正在运行的Web页中；

e、根据被删除的设计组件，通过视图控件的编程接口、文档对象模型DOM编程接口，动态删除浏览器控件中正在运行中的Web页中的相应元素；

f、根据增加、删除或被修改的设计组件及参数，生成可在浏览器控件中执行的脚本程序代码；通过浏览器控件的编程接口执行脚本程序代码，动态增加、删除、修改、替换浏览器控件中正在运行中的Web页中的相应元素；

g、根据增加、删除或被修改的设计组件及参数，生成可在浏览器控件中执行的脚本程序代码；通过浏览器控件的编程接口、文档对象模型DOM编程接口，注入脚本程序代码然后执行，动态增加、删除、修改、替换浏览器控件中正在运行中的Web页中的相应元素。

Images