CN107609050A - 基于html5的新型页面系统及其作品生成方法 - Google Patents

Abstract

本发明公开了一种基于HTML5的新型页面系统及其作品生成方法，该系统包括页面内容模块、页面布局模块、页面结构模块以及页面管理模块，所述的页面内容模块所负责的是HTML5页面中所包含的内容，包括文本、图片、视频、音频的多媒体内容，所述的页面布局模块用于HTML5页面的文字、图形、动效或表格进行格式和版式设置，不同布局的页面具有不同的显示效果。本发明基于HTML5的新型页面系统及其作品生成方法将内容、布局、结构分离，能最大化的满足当前的排版结构，简化了制作流程，提高了制作效率，同时也提升了作品的品质。

Description

基于HTML5的新型页面系统及其作品生成方法

技术领域

本发明涉及一种新型页面系统及其作品生成方法，特别是涉及一种基于HTML5的新型页面系统及其作品生成方法。

背景技术

随着互联网的飞速发展，浏览器不再仅仅用来表示Web(互联网)内容，随着HTML5(万维网的核心语言)的技术问世，Web进入了一个成熟的应用平台，在HTML5平台上，视频、音频、图像、动画以及交互都被标准化。HTML5可以让你摆脱对平台的依赖，用户打开浏览器，直接就可以访问你的应用，HTML5可以做到跨平台，多数核心代码不用重写，在许多地方都可以用到，包括移动应用、移动网站、PC(个人计算机)网站、各种浏览器插件，甚至可以用WebKit(一种浏览器引擎)封装作为跨平台的应用程序。对于用户来说，提高了用户体验，加强了视觉感受，HTML5技术在移动端，能够让应用程序回归到网页，并对网页的功能进行扩展，用户不需要下载客户端或插件就能够观看视频、玩游戏，操作更加简单，用户体验更好。如今已进入后Web2.0时代，人机交互已经成为常态，不能满足于网页上简单的图片和文字展示，用户更希望能有更加丰富的界面交互方式，针对HTML5，制作者需要能够快速方便的制作出个性化的作品，浏览者需要看到更多的有创意的内容。因此，为了迎合互联网技术的发展，研发一种基于HTML5的新型页面结构及系统，由于HTML5的跨平台、跨终端的特性，也使该页面结构及系统具备了跨平台、跨终端的特性，大大增强了Web的界面交互的用户体验。

发明内容

本发明所要解决的技术问题是提供一种基于HTML5的新型页面系统及其作品生成方法，其将内容、布局、结构分离，只需要独立的对不同模块进行操作，内容的作者不需要关心布局和结构的效果，只需要专注于作品的内容，定义不同的布局样式使内容排成不同的格式，不同的显现只是结构和布局的不同而已，与内容无关，同时也能最大化的满足当前的排版结构，简化了制作流程，提高了制作效率，同时也提升了作品的品质。

本发明是通过下述技术方案来解决上述技术问题的：一种基于HTML5的新型页面系统，其包括页面内容模块、页面布局模块、页面结构模块以及页面管理模块，所述的页面内容模块所负责的是HTML5页面中所包含的内容，包括文本、图片、视频、音频的多媒体内容，所述的页面布局模块用于HTML5页面的文字、图形、动效或表格进行格式和版式设置，不同布局的页面具有不同的显示效果，所述页面结构模块负责管理所有页面的组织结构，所述页面管理模块负责协调管理上述三个模块，通过页面管理模块可以将不同的模块内容组合成一个完整的HTML5作品。

优选地，所述完整的HTML5作品包含了动态页面和静态页面，动态页面随着页面代码的生成，页面代码虽然没有变，但是显示的内容却随时间或者数据库操作的结构而改变，动态页面与页面上的各种动画、流动效果的视觉动态效果没有直接关系，视觉动态效果为文本内容或各种动效，视觉动态效果是页面具体内容的表现形式，静态页面是与动态页面相对的一种页面，静态页面随着页面代码的生成，页面的显示和内容就不会发生变化了，除非页面代码被修改。

优选地，所述完整的HTML5作品不只是单一的页面构成，而是满足复杂的页面结构组合需求，结构化清晰的页面结构让制作者快速准确的完成复杂的内容作品，同时帮助浏览者一目了然的理解内容作品的逻辑。

本发明还提供一种基于HTML5的新型页面系统的作品生成方法，其包括下列步骤：

步骤一，通过页面内容模块录入不同的文字、图片、视频、音频的素材内容，并且在素材内容上打上标签，分类存储；

步骤二，通过页面布局模块设计不同的页面布局，并将这些页面布局打上标签分类存储；

步骤三，通过页面结构模块组织不同的页面分布结构，并打上标签分类存储；

步骤四，通过页面管理模块，从三个模块提取相应的内容，组成一个完整的HTML5作品。

本发明的积极进步效果在于：本发明基于HTML5的新型页面系统及其作品生成方法将内容、布局、结构分离，只需要独立的对不同模块进行操作，内容的作者不需要关心布局和结构的效果，只需要专注于作品的内容，定义不同的布局样式使内容排成不同的格式，不同的显现只是结构和布局的不同而已，与内容无关，同时也能最大化的满足当前的排版结构，简化了制作流程，提高了制作效率，同时也提升了作品的品质。

附图说明

图1为本发明基于HTML5的新型页面系统及其作品生成方法的模块框图。

图2为本发明基于HTML5的新型页面系统及其作品生成方法的页面结构示意图。

图3为本发明基于HTML5的新型页面系统及其作品生成方法的操作流程图。

具体实施方式

下面结合附图给出本发明较佳实施例，以详细说明本发明的技术方案。

如图1至图3所示，本发明基于HTML5的新型页面系统包括页面内容模块、页面布局模块、页面结构模块以及页面管理模块，所述的页面内容模块所负责的是HTML5页面中所包含的内容，包括文本、图片、视频、音频的多媒体内容，所述的页面布局模块用于HTML5页面的文字、图形、动效或表格进行格式和版式设置，不同布局的页面具有不同的显示效果，所述页面结构模块负责管理所有页面的组织结构，所述页面管理模块负责协调管理上述三个模块，通过页面管理模块可以将不同的模块内容组合成一个完整的HTML5作品。

所述完整的HTML5作品包含了动态页面和静态页面，动态页面随着页面代码的生成，页面代码虽然没有变，但是显示的内容却随时间或者数据库操作的结构而改变，动态页面与页面上的各种动画、流动效果的视觉动态效果没有直接关系，视觉动态效果为文本内容或各种动效，视觉动态效果是页面具体内容的表现形式，静态页面是与动态页面相对的一种页面，静态页面随着页面代码的生成，页面的显示和内容就不会发生变化了，除非页面代码被修改。

所述完整的HTML5作品不只是单一的页面构成，而是满足复杂的页面结构组合需求，结构化清晰的页面结构让制作者快速准确的完成复杂的内容作品，同时帮助浏览者一目了然的理解内容作品的逻辑。

本发明基于HTML5的新型页面系统的作品生成方法包括下列步骤：

步骤一，通过页面内容模块录入不同的文字、图片、视频、音频的素材内容，并且在素材内容上打上标签，分类存储；

步骤二，通过页面布局模块设计不同的页面布局，并将这些页面布局打上标签分类存储；

步骤三，通过页面结构模块组织不同的页面分布结构，并打上标签分类存储；

步骤四，通过页面管理模块，从三个模块提取相应的内容，组成一个完整的HTML5作品。

在具体实施例中，本发明基于HTML5的新型页面系统包括页面内容模块、页面布局模块、页面结构模块以及页面管理模块，页面内容模块负责采集存储素材内容，素材内容包括文本、图片、视频、音频多种格式，并且在采集录入的过程中，用户需要将每个内容打上相应的标签,比如：电影、自然风光、汽车等，便于分类存储与提取；用户通过所述页面布局模块可以制作页面布局模板，包括文本、图像、视频、音频的大小、位置、颜色、形状等等，包括动效的设置，最终形成一个json文件，并且给相应的json文件打上相应的标签，形成布局模板分类存储与提取；页面结构模板负责组织页面的组织架构，如图2所示，分为三层结构，分别是页(page)、子组(sub-group)和组(group)，基本单位为页(page)，一个基本的页就由内容和页面布局组成，子组(subgroup)则由页的集合组成，子组包含的元素全是页，若干页则组合成一个子组，组(group)分为两种情况，一种是与子组相同，全是由页组合而成的组，一种是子组与页的组合，之间的区别是根据实际应用场景来定义的，例如一个普通简单的HTML5作品，则是由若干页组合而成，每个页之间是有上下文关系的，如果需要制作一个与期刊杂志结构相似的作品，则需要不同的组来组成，比如一个组是人文版块，包含了关于人文内容的页，一个组是电影版块，包含了关于电影内容的页。而更为复杂的结构则是一个组里面还有不同的小组，每个小组也是独立的内容，像书籍的结构目录一样，针对不同的复杂结构，利用本发明定义的页面结构模块都能够简单快速的实现并且呈现出来；页面管理模块则是一个集中管理的平台，通过像不同模块提取相关的内容，最终组合成一个完整的HTML5作品。

综上所述，本发明基于HTML5的新型页面系统及其作品生成方法将内容、布局、结构分离，只需要独立的对不同模块进行操作，内容的作者不需要关心布局和结构的效果，只需要专注于作品的内容，定义不同的布局样式使内容排成不同的格式，不同的显现只是结构和布局的不同而已，与内容无关，同时也能最大化的满足当前的排版结构，简化了制作流程，提高了制作效率，同时也提升了作品的品质。

以上所述的具体实施例，对本发明的解决的技术问题、技术方案和有益效果进行了进一步详细说明，所应理解的是，以上所述仅为本发明的具体实施例而已，并不用于限制本发明，凡在本发明的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (4)

1.一种基于HTML5的新型页面系统，其特征在于，其包括页面内容模块、页面布局模块、页面结构模块以及页面管理模块，所述的页面内容模块所负责的是HTML5页面中所包含的内容，包括文本、图片、视频、音频的多媒体内容，所述的页面布局模块用于HTML5页面的文字、图形、动效或表格进行格式和版式设置，不同布局的页面具有不同的显示效果，所述页面结构模块负责管理所有页面的组织结构，所述页面管理模块负责协调管理上述三个模块，通过页面管理模块可以将不同的模块内容组合成一个完整的HTML5作品。

2.如权利要求1所述的基于HTML5的新型页面系统，其特征在于，所述完整的HTML5作品包含了动态页面和静态页面，动态页面随着页面代码的生成，页面代码虽然没有变，但是显示的内容却随时间或者数据库操作的结构而改变，动态页面与页面上的各种动画、流动效果的视觉动态效果没有直接关系，视觉动态效果为文本内容或各种动效，视觉动态效果是页面具体内容的表现形式，静态页面是与动态页面相对的一种页面，静态页面随着页面代码的生成，页面的显示和内容就不会发生变化了，除非页面代码被修改。

3.如权利要求1所述的基于HTML5的新型页面系统，其特征在于，所述完整的HTML5作品不只是单一的页面构成，而是满足复杂的页面结构组合需求，结构化清晰的页面结构让制作者快速准确的完成复杂的内容作品，同时帮助浏览者一目了然的理解内容作品的逻辑。

4.一种基于HTML5的新型页面系统的作品生成方法，其特征在于，其包括下列步骤：

步骤一，通过页面内容模块录入不同的文字、图片、视频、音频的素材内容，并且在素材内容上打上标签，分类存储；

步骤二，通过页面布局模块设计不同的页面布局，并将这些页面布局打上标签分类存储；

步骤三，通过页面结构模块组织不同的页面分布结构，并打上标签分类存储；

步骤四，通过页面管理模块，从三个模块提取相应的内容，组成一个完整的HTML5作品。