网页模板制作的可视化方法以及网页可视化制作装置制造方法及图纸

技术编号:13298232 阅读:51 留言:0更新日期:2016-07-09 16:17
本发明专利技术涉及一种网页模板制作的可视化方法,根据网页内容设置至少两个网页子层,向每个所述网页子层加入与该子层对应的至少一个网页布局模板,并对所述网页布局模板的属性设置至少一个样式属性标签;向每个所述网页布局模板的模板元素内加入与该模板元素相对应的模板内容元素,并对所述模板内容元素的属性设置至少一个元素属性标签;将所述样式属性标签与元素属性标签封装到与其相对应的网页子层内。本发明专利技术通过设计师设计系列模板供用户选择,同时用户选择该模板后前台仍可以实现模板内容的自定义,包括模板中布局,模板元素的选择及各种样式的调整,使用户通过简单的操作就可以制做出内容丰富的样式效果。

【技术实现步骤摘要】

本专利技术涉及互联网技术,特别是涉及一种网页模板制作的可视化方法以及网页可视化制作装置
技术介绍
目前,互联网在城市中已经普及,大部分乡镇和行政村也都已经接通了互联网。互联网基础设施的完善大大促进了互联网的普及和应用。互联网已经渗透到人们生活的各个领域。网页风格每年都有新变化和新的流行趋势,传统的模板建站的一般流程是设计师设计好一些页面后用户选择使用,由于用户不懂样式控制所以用户的网站风格大体相同,无法满足用户个性化的要求,导致用户的网页风格大体相同,而且每次改版都会耗费大量的人力。
技术实现思路
本专利技术的目的是提供一种网页模板制作的可视化方法以及网页可视化制作装置,实现网页风格个性化、使用更方便、功能多、模板平台更加开放。本专利技术的目的是通过以下技术方案来实现:一种网页模板制作的可视化方法,包括:根据网页内容设置至少两个网页子层。向每个所述网页子层加入与该子层对应的至少一个网页布局模板,并对所述网页布局模板的属性设置至少一个样式属性标签。向每个所述网页布局模板的模板元素内加入与该模板元素相对应的模板内容元素,并对所述模板内容元素的属性设置至少一个元素属性标签。将所述样式属性标签与元素属性标签封装到与其相对应的网页子层内。进一步的,所述向每个所述网页子层加入与该子层对应的至少一个网页布局模板包括:从网页布局模板库调取所述网页布局模板库存储的网页布局模板并加入对应的网页子层;和/或,从数据接口获取外部数据源输入的网页布局模板并加入对应的网页子层。进一步的,所述对所述网页布局模板的属性设置至少一个样式属性标签包括:在所述网页布局模板所在的网页子层的预封装的样式属性标签中选择所述至少一个样式属性标签;对所述网页布局模板设置选择的所述至少一个样式属性标签。进一步的,所述向每个所述网页布局模板的模板元素内加入与该模板元素相对应的模板内容元素包括:从网页内容元素库调取所述网页内容元素库存储的模板内容元素并加入对应的网页布局模板;和/或,从数据接口获取外部数据源输入的模板内容元素并加入对应的网页布局模板。进一步的,所述对所述模板内容元素的属性设置至少一个元素属性标签包括:在所述模板内容元素所在的网页布局模板的预封装的元素属性标签中选择所述至少一个元素属性标签;对所述网页布局模板设置选择的所述至少一个元素属性标签。进一步的,所述将所述样式属性标签与元素属性标签封装到与其相对应的网页子层内包括:将所述网页布局模板及其相对应的样式属性标签与模板内容元素及其相对应的元素属性标签均封装到所述网页子层中;封装所述至少两个的网页子层,获取所述网页。一种网页可视化制作装置,包括:分层模块,用于根据网页内容设置至少两个网页子层。布局模板添加模块,用于向每个所述网页子层加入与该子层对应的至少一个网页布局模板,并对所述网页布局模板的属性设置至少一个样式属性标签。模板元素添加模块,用于向每个所述网页布局模板的模板元素内加入与该模板元素相对应的模板内容元素,并对所述模板内容元素的属性设置至少一个元素属性标签。封装模块,用于将每一个所述网页子层的网页布局模板与模板内容元素及与其相对应的属性标签均封装在对应的网页子层中,并封装所述至少两个的网页子层,获取所述网页。进一步的,所述装置还包括:网页布局模板库、网页内容元素库、数据接口;所述网页布局模板库用于存储预设的网页布局模板;所述网页内容元素库用于存储预设的模板内容元素;所述数据接口与外部数据源相连,用于获取外部数据源的数据。进一步的,所述布局模板添加模块具体用于从网页布局模板库调取所述网页布局模板库存储的网页布局模板并加入对应的网页子层,和/或,从数据接口获取外部数据源输入的网页内容元素并加入对应的网页子层;为所述网页布局模板选择所述至少一个样式属性标签,对所述网页布局模板设置选择的所述至少一个样式属性标签。进一步的,所述模板元素添加模块具体用于从网页内容元素库调取所述网页内容元素库存储的模板内容元素并加入对应的网页布局模板内,和/或,从数据接口获取外部数据源输入的模板内容元素并加入对应的网页布局模板内;为所述模板内容元素选择所述至少一个元素属性标签,对所述模板内容元素设置选择的所述至少一个元素属性标签。本专利技术具有以下有益效果:1、设计师设计系列模板供用户选择,同时用户选择该模板后前台仍可以实现模板内容的自定义,包括模板中布局,模板的选择及各种样式的调整,使用户通过简单的操作就可以制作出内容丰富的样式效果。2、可以由设计师动态增加模块,无需开发人员进行二次开发。3、所有模块的HTML内容及样式都可以自定义,通过修改样式属性最大程度实现模板显示差异化,其它同类产品一般样式是固定的只能动态更换颜色。附图说明图1是本专利技术实施例所述一种网页模板制作的可视化方法的方法流程图;图2是本专利技术实施例所述一种网页可视化制作装置的方框原理图。具体实施方式如图1所示,本专利技术实施例所述的一种网页模板制作的可视化方法,包括:1、根据网页内容设置至少两个网页子层;2、向每个所述网页子层加入与该子层对应的至少一个网页布局模板,并对所述网页布局模板的属性设置至少一个样式属性标签;3、向每个所述网页布局模板的模板元素内加入与该模板元素相对应的模板内容元素,并对所述模板内容元素的属性设置至少一个元素属性标签;4、将所述样式属性标签与元素属性标签封装到与其相对应的网页子层内。步骤1:根据网页内容设置至少两个网页子层:在本步骤中,根据网页的内容确定网页子层的个数,生成相应个数的网页子层。一个较佳实施方式为,对于常见的网页,根据其网页内容,将网页子层设置为三个,具体地,为该网页设置底网页子层、中间网页子层和顶网页子层。步骤2:向每个所述网页子层加入与该子层对应的至少一个网页布局模板,并对所述网页布局模板的属性设置至少一个样式属性标签:可以从以下两种渠道获取需要加入的网页布局模板,具体地,可以从以下两种渠道中的任何一种获取全部的网页布局模板,也可以从其中一种渠道获取部分网页布局模板,从另一种渠道获取其它的网页布局模板。获取网页内容元素的两种渠道为:从网页布局模板库调取所述网页布局模板库存储的网页布局模板并加入对应的网页子层;和/或,从数据接口获取外部数据源输入的网页布局模板并加入对应的网页子层。具体地,仍以步骤1中的网页为例,向底网页子层加入本文档来自技高网...

【技术保护点】
一种网页模板制作的可视化方法,根据网页内容设置至少两个网页子层,其特征在于:向每个所述网页子层加入与该子层对应的至少一个网页布局模板,并对所述网页布局模板的属性设置至少一个样式属性标签;向每个所述网页布局模板的模板元素内加入与该模板元素相对应的模板内容元素,并对所述模板内容元素的属性设置至少一个元素属性标签;将所述样式属性标签与元素属性标签封装到与其相对应的网页子层内。

【技术特征摘要】
1.一种网页模板制作的可视化方法,根据网页内容设置至少两个网页子层,
其特征在于:
向每个所述网页子层加入与该子层对应的至少一个网页布局模板,并对所述
网页布局模板的属性设置至少一个样式属性标签;
向每个所述网页布局模板的模板元素内加入与该模板元素相对应的模板内
容元素,并对所述模板内容元素的属性设置至少一个元素属性标签;
将所述样式属性标签与元素属性标签封装到与其相对应的网页子层内。
2.根据权利要求1所述的方法,其特征在于,所述向每个所述网页子层加
入与该子层对应的至少一个网页布局模板包括:
从网页布局模板库调取所述网页布局模板库存储的网页布局模板并加入对
应的网页子层;
和/或,从数据接口获取外部数据源输入的网页布局模板并加入对应的网页
子层。
3.根据权利要求1所述的方法,其特征在于,所述对所述网页布局模板的
属性设置至少一个样式属性标签包括:
在所述网页布局模板所在的网页子层的预封装的样式属性标签中选择所述
至少一个样式属性标签;
对所述网页布局模板设置选择的所述至少一个样式属性标签。
4.根据权利要求1所述的方法,其特征在于,所述向每个所述网页布局模
板的模板元素内加入与该模板元素相对应的模板内容元素包括:
从网页内容元素库调取所述网页内容元素库存储的模板内容元素并加入对
应的网页布局模板;
和/或,从数据接口获取外部数据源输入的模板内容元素并加入对应的网页

\t布局模板。
5.根据权利要求1所述的方法,其特征在于,所述对所述模板内容元素的
属性设置至少一个元素属性标签包括:
在所述模板内容元素所在的网页布局模板的预封装的元素属性标签中选择
所述至少一个元素属性标签;
对所述网页布局模板设置选择的所述至少一个元素属性标签。
6.根据权利要求1所述的方法,其特征在于,所述将所述样式属性标签与
元素属性标签封装到与其相对应的网页子层内包括:
将所述网页布局模板及其相对应的样式属性标签与模板内...

【专利技术属性】
技术研发人员:张元达
申请(专利权)人:北京铭万智达科技有限公司
类型:发明
国别省市:北京;11

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1