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

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

【技术实现步骤摘要】

本专利技术属于计算机网络
，涉及一种设计系统，尤其涉及一种Web页设计系统；同时，本专利技术还涉及一种Web页设计系统的构建方法。
技术介绍
随着互联网的普及与发展，越来越多的用户在互联网上浏览网页，越来越多的企业、团体及个人在互联网上发布网站，网页。随着社区网站、博客、微博、电子商务平台(如淘宝，eBay)等影响力日益增强，更多的非专业人士亦有需要制作网页来刊登产品，发布个性化个人页面，或在社区网上发布个性化内容。现有的Web设计工具中，大多功能全面，能满足绝大多数专业人士的要求。典型的 Web设计工具如Dreaemweaver，Frontpage都功能强大，能带给专业人士良好的体验。但是，现有的Web设计软件有如下缺点1、设计界面看不到页面实际运行的效果。有的web设计软件提供所见即所得的设计功能，但也只是设计时的模拟，并不是真正的运行时的效果。如有的页面使用Javascript 动态创建页面元素，这时用户需要在浏览器下运行该页面才能看到实际运行效果。2、在现有的Web设计软件中，均要求用户创建或修改HTML(Hyper Text Markup Language)元素，其菜单，工具栏等辅助工具也只能创建，修改HTML元素，所以要求用户有 HTML编程基础。否则不能正确使用软件功能，当进一步需要制作更专业的Web页面时，更需要精通HTML。当需要用CSSGtyle Sheet)或脚本语言(如Javascript)实现页面效果时，要求用户有CSS、脚本语言编程经验。3、对页面的排版操作不够便捷。HTML默认使用相对位置排版，如使用绝对位置排版，需用CSS属性positioiKabsolute定义。在现有的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页作者扩充的所述参数。作为本专利技术的一种优选方案，所述系统进一步包括用户界面模块，用于定义及提供可视化用户界面，包括菜单、工具栏、设计面板、参数设置面板、弹出窗体；用户界面模块还用于捕捉用户的操作事件，并对用户事件进行初步分析、过滤，然后对用户做出响应或者传递到控制模块作进一步处理。作为本专利技术的一种优选方案，所述系统进一步包括持久化模块，用于序列化和反序列化设计文档及序列化和反序列化组件；其内容表现为描本文档来自技高网...

【技术保护点】
１．一种Ｗｅｂ页设计系统，其特征在于，所述系统包括：设计组件，包含至少一个参数，所述设计组件对应能根据所述设计组件及所述参数生成ＨＴＭＬ代码的逻辑，Ｗｅｂ页作者可自定义所述逻辑；设计面板，作为Ｗｅｂ页作者进行设计的工作区域，用于在所述工作区域显示Ｗｅｂ页浏览效果视图；视图控件，用于浏览Ｗｅｂ页作者进行设计产生的Ｗｅｂ页内容，提供Ｗｅｂ页浏览效果视图；当Ｗｅｂ页内容中包含脚本代码时，所述视图控件能提供执行脚本代码的运行效果视图；所述视图控件提供编程接口，并且所述编程接口提供可直接或间接修改所显示的Ｗｅｂ页内容的方法。

【技术特征摘要】
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...

【专利技术属性】
技术研发人员：程向明，
申请(专利权)人：程向明，
类型：发明
国别省市：94