网页背景图像生成方法和系统的制作方法_2

文档序号:9708355阅读:来源:国知局
像分别载入两个HTML标签中;再将两个HTML标签中的背景图像以图像高度或宽度的二分之一的间隔进行错位排列。
[0043]参考图6所示,图6中列举的是两个HTML标签错位排列的示意图,两个HTML标签中的背景图像错位的间隔为图像宽度的二分之一。
[0044]步骤S30,根据自适应宽度或高度分别对两个所述HTML标签中的背景图像进行重复延伸。
[0045]在此步骤中,所述重复延伸是指在HTML标签中沿着某个延伸的方向重复放置多个相同的背景图像;可以利用CSS工具的重复属性分别对两个所述HTML标签中的背景图像在纵向上或横向上进行重复延伸。
[0046]参考图6所示,图中是以横向上的延伸为例,使用CSS属性background-1mage:repeat-x ;或background-1mage:repeat_y ;可以进行无限延伸,而且不会遇到冲突的图像,如图中mdl_t_c,mdl_b_c,部分的图片,就可以在横向上进行重复延伸;同理的,mdl_c_r,mdl_c_l,部分的图片,就可以在纵向上进行重复延伸,这样就可以实现自适应模块功能。
[0047]上述步骤中,通过两个用于叠加的HTML标签进行重复延伸,从而可以利用CSS属性border-1mage来实现图像模块上下左右,四个方向上的图片自适应宽度,从而可以应用各种格式的背景图像,可以实现JPG等图片格式的兼容。
[0048]进一步地,本发明实施例的网页背景图像生成方法在重复延伸前,还可以包括:
[0049]步骤S40,根据自适应模块输入内容大小确定自适应调整的宽度或高度,并根据该宽度或高度计算背景图像的重复次数。
[0050]此过程中,主要是根据实际输入内容大小,确定自适应中要调整的宽度或高度,进而确定进行重复延伸的次数。
[0051]步骤S50,将两个所述HTML标签进行叠加获得网页背景图像。
[0052]在此步骤中,通过双HTML标签叠加方式,重新组合出背景图像,由于背景图像在HTML标签中可以无限延伸,这样就可以实现了自适应模块的功能,但实质上仅仅使用了一张背景图像。
[0053]在一个实施例中,步骤S50的叠加方法可以如下:
[0054](1)根据图像请求加载所述两个HTML标签。
[0055]具体的,由于通过两个HTML标签作为背景图像的载体,实际加载图像时,不需要加载背景图像的各个内容模块对应的图片,而是直接加载了两个HTML标签中的组合的背景图像,先将背景图像应用到HTML标签,再将两个HTML标签进行叠加得到网页背景图像,这样实际请求的背景图像数量只有一个,提高了页面图像数据的加载速度。
[0056](2)通过CSS样式将两个所述HTML标签进行无缝叠加获得网页背景图像。
[0057]具体的,通过两个HTML标签的无缝叠加就可以获得用户所需的网页背景图像,以最少的图像请求数量,得到网页的背景图像,同时,还可以保留了背景图像自适应模块的灵活性,仍可以实现内容模块的宽度和高度的自适应调整。
[0058]参考图8所图8为图7所的两个HTML标签置加后得到的背景图像部分意图,通过不断的重复延伸就可以实现内容模块的宽度自适应调整,如mdl_t_c,mdl_b_c部分的图像就可以一直在横向上重复延伸,由于两个背景图像刚好错位排列,叠加后刚好形成了不断变长的区域,从而实现了内容模块的宽度自适应调整。
[0059]对于叠加后形成的背景图像,可以再通过CSS属性对背景图像的各个内容模块进行属性设置,在最终背景图像中确定是否显示该模块内容,同时可以根据实际需求,调用背景图像中的元素,如将图中中间部分的图像统一颜色显示,调用图7中处于两个标签两端位置的四个角的图片叠加到四个角的位置(如图中箭头所示),可以实现四个圆角的形状,通过对标签中的图像进行设置后,再通过浏览器来显示页面可以得到如图8所示的背景图像效果图,在图8所示的网页背景图像中,可以根据内容区域的文字数量进行自适应调整,仅通过一个背景图像就可以实现自适应模块功能。
[0060]目前,网页制作中较多使用CSS3的多背景属性(CSS3background_image)的技术方案来减少页面背景图像的请求数量,只需要一次图片请求,但这种方案,但这种方案存在浏览器的兼容性有问题,例如在IE6?IE9上存在明显兼容性有问题,导致样式显示不完整。而本发明提供的网页背景图像生成方法,能够兼容所有的浏览器,而且可以应用各种格式的背景图像,实现JPG等图片格式的兼容,在保证内容模块自适应功能情况下明显降低图片请求的数量。
[0061]参见图9所示,图9为一个实施例的网页背景图像生成系统结构示意图,包括:
[0062]排版模块10,用于根据自适应模块的样式内容将原始背景图像进行切割,并将切割后得到的各个图片按照十字型方式进行排版;
[0063]错位模块20,用于将排版后获得的组合背景图像应用到两个HTML标签中,并将两个HTML标签中的背景图像进行错位排列;
[0064]重复模块30,用于根据自适应宽度或高度分别对两个所述HTML标签中的背景图像进行重复延伸;
[0065]叠加模块50,用于将两个所述HTML标签进行叠加获得网页背景图像。
[0066]在一个实施例中,所述排版模块10进一步还可以用于:
[0067]根据自适应内容样式模块将原始背景图像按照井字形划分为9张图片;其中,图像顶部和底部的高度和值为图像高度的二分之一,图像左部和右部的宽度和值为图像宽度的二分之一;通过CSS工具将9张图片按照十字型方式进行排版并组合在一起;其中,左上、右上、左下、右下部分的图片排列到图像的中心区域。
[0068]在一个实施例中,所述错位模块20进一步用于:
[0069]创建两个HTML标签作为背景图像的载体;通过CSS工具将排版后的组合背景图像分别载入两个HTML标签中;将两个HTML标签中的背景图像以图像高度或宽度的二分之一的间隔进行错位排列。
[0070]在一个实施例中,所述重复模块30进一步还可以用于:
[0071]利用CSS工具的重复属性分别对两个所述HTML标签中的背景图像在纵向上或横向上进行重复延伸。
[0072]在一个实施例中,参考图10所示,本发明实施例的网页背景图像生成系统,在重复模块30前还可以包括:
[0073]计算模块40,用于根据自适应模块输入内容大小确定自适应调整的宽度或高度,并根据该宽度或高度计算背景图像的重复次数。
[0074]在一个实施例中,所述叠加模块50进一步还可以用于:
[0075]根据图像请求加载所述两个HTML标签;通过CSS样式将两个所述HTML标签进行无缝叠加获得网页背景图像。
[0076]本发明的网页背景图像生成系统与本发明的网页背景图像生成方法一一对应,在上述网页背景图像生成方法的实施例阐述的技术特征及其有益效果均适用于网页背景图像生成系统的实施例中,特此声明。
[0077]本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程,是可以通过计算机程序来指令相关的硬件来完成,所述的程序可存储于一计算机可读取存储介质中,该程序在执行时,可包括如上述各方法的实施例的流程。其中,所述的存储介质可为磁碟、光盘、只读存储记忆体(Read-Only Memory, ROM)或随机存储记忆体(Random AccessMemory, RAM)等。
[0078]图11为能实现本发明实施例的一个计算机系统的模块图。该计算机系统900只是一个适用于本发明的计算机环境的示例,不能认为是提出了对本发明的使用范围的任何限制。计算机系统900也不能解释为需要依赖于或具有图示的示例性的计算机系统900中的一个或多个部件的组合。
[0079]图9中示出的计算机系统900是一个适合用于本发明的计算机系统的例子。具有不同子系统配置的其它架构也可以使用。
[0080]如图9所示,计算机系统900包括处理器910、存储器920和系统总线922。包括存储器920和处理器910在内的各种系统组件连接到系统总线922上。处理器910是一个用来通过计算机系统中基本的算术和逻辑运算来执行计算机程序指令的硬件。存储器920是一个用于临时或永久性存储计算程序或数据(例如,程序状态信息)的物理设备。系统总线920可以为以下几种类型的总线结构中的任意一种,包括存储器总线或存储控制器、夕卜设总线和局部总线。处理器910和存储器
当前第2页1 2 3 
网友询问留言 已有0条留言
  • 还没有人留言评论。精彩留言会获得点赞!
1