一种网页适应屏幕排版方法及装置的制造方法_3

文档序号:9471400阅读:来源:国知局
[0102]动态拉伸浮动(float)元素,所述动态拉伸浮动元素为:在一行中排版η个浮动元素后,当所述行的右方存在空白时,将所述浮动元素的宽度值设置为所述浮动元素的最小宽度值后,判断所述行的右方的空白是否大于一个或多个所述浮动元素的宽度,当所述行的右方的空白大于一个或多个所述浮动元素的宽度时,在所述行的右方的空白中加入一个或多个所述浮动元素。其中,η为按标准流程排版时,一行中排版的所述浮动元素的个数。浮动元素的属性包括宽度、最小宽度和最大宽度,将浮动元素的宽度值设置为其最小宽度值,可以将浮动元素的宽度缩小。只有满足所述行的右方的空白大于一个或多个所述浮动元素的宽度的条件时,在所述行的右方的空白中加入一个或多个所述浮动元素。当所述行的右方不存在空白时,或者当所述行的右方存在空白但所述行的右方的空白小于一个所述浮动元素的宽度时,对所述浮动元素的排版不作处理。
[0103]与上述动态拉伸浮动元素步骤相对应,所述动态拉伸浮动元素可以包括如下流程步骤:
[0104](I)判断一行排版η个浮动元素后,所述行的右方是否存在空白;
[0105](2)当步骤(I)的判断结果为所述行的右方存在空白时,将所述浮动元素的宽度值设置为所述浮动元素的最小宽度值;
[0106](3)在步骤(2)将所述浮动元素的宽度值设置为所述浮动元素的最小宽度值后,判断所述行的右方的空白是否大于一个或多个浮动元素的宽度;
[0107](4)当步骤(3)的判断结果为所述行的右方的空白大于一个或多个浮动元素的宽度时,在所述行的右方的空白中加入一个或多个所述浮动元素。
[0108]其中,在一种可能的实施方式中,步骤(3)可以为:获取所述行的右方的空白的宽度值,以所述行的右方的空白的宽度值除以浮动元素的宽度值,对所得到的结果取整,判断取整的结果m是否大于或等于I ;
[0109]相应地,步骤(4)为:当步骤(3)中判断的结果为m大于或等于I时,在所述行的右方的空白中加入m个浮动元素;
[0110]如果步骤(3)的判断结果为所述行的右方不存在空白,或者,如果步骤(3)中判断的结果为m小于1,则结束所述动态拉伸浮动元素流程,对所述浮动元素的排版不作处理。
[0111]通过动态拉伸浮动元素,可以扩大浮动元素的可显示区域,在一行中尽可能多的排版浮动元素,从而避免因为节点的样式修改后浮动元素出现折行造成显示混乱和不均匀,也避免屏幕上出现过多空白。
[0112]在较佳的实施方式中,所述适应屏幕规则排版,还可以包括:
[0113]展开所有的框架(Frame)和浮动框架(Iframe)元素。由于框架元素和浮动框架元素中通常嵌套了另一个页面,如果不展开这些元素,将难以查看被嵌套的页面。展开框架集(FrameSet)中所有的框架元素,以及所有页面中的浮动框架元素,从而显示框架元素和浮动框架元素中的所有内容,防止适应屏幕排版中无法显示被嵌套页面而造成内容缺失。
[0114]按行排版表格。对表格按行进行排版,而非按表格方式进行排版。所述按行排版表格为:将表格中同一行内的单元格按单元格本身的顺序在一个排版行中依次排版,并将在一个排版行中未排版完毕的单元格另起一个排版行继续排版;当表格中同一行的单元格排版完毕后,将表格中下一行的单元格另起一个排版行进行排版。
[0115]按行排版表格可以更好的使表格适应屏幕的大小,让表格可以完整有序地显示在屏幕上,防止表格内容丢失和单元格变形,以及防止节点的样式修改后表格内容出现重叠和错乱的情况。
[0116]去除多余的空白。所述去除多余的空白,包括:对于连续出现的多个空标签(<br>),只保留一个空标签,删除其他空标签,从而压缩空行的高度;去掉段落标签(
)、单元格标签(<td>)和区块标签(<div>)内单独的空格(&nbsp),所述去掉单独的空格为:当某一行中只有一个&nbsp而无其他元素或内容时,忽略此行,对此行不作排版。去除不必要的空白,可以使适应屏幕规则排版的效果更紧凑。
[0117]保持图片、视频和插件元素的长宽比。所述保持图片、视频和插件元素的长宽比为:获取图片、视频和插件元素的原始长宽比,当节点的样式修改后,分别按修改后的图片、视频和插件元素的宽度和自身的原始长宽比调整修改后的图片、视频和插件元素的高度,例如,图片原始的大小为400*600px,原始长宽比为3:2,节点的样式修改后,图片的宽度变为200px,则图片的高度相应地调整为300px,图片的大小调整为200*300px。
[0118]保持图片、视频和插件的长宽比,可以取得更好的显示效果,防止图片、视频和插件在显示时变形。
[0119]本申请实施例提供的一种网页适应屏幕排版方法,只对节点的宽度大于智能终端屏幕的节点,修改所述节点的样式,并按适应屏幕规则排版,使所述节点的显示能够适应屏幕,并具有美观的效果和视觉体验;而对节点的宽度小于或等于智能终端屏幕的节点,则保留其原样式,并按标准流程排版。从而在保证网页页面适应屏幕的基础上更多地保留页面原来的布局、样式和风格,而且由于只改动一部分节点,节省了排版资源,总体上不容易与标准流程冲突,适用于各种页面写法。通过以上的方法实施例的描述,所属领域的技术人员可以清楚地了解到本申请可借助软件加必需的通用硬件平台的方式来实现,当然也可以通过硬件,但很多情况下前者是更佳的实施方式。基于这样的理解,本申请的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来,该计算机软件产品存储在一个存储介质中,包括若干指令用以使得一台计算机设备(可以是个人计算机,服务器,或者网络设备等)执行本申请各个实施例所述方法的全部或部分步骤。而前述的存储介质包括:只读存储器(ROM)、随机存取存储器(RAM)、磁碟或者光盘等各种可以存储程序代码的介质。
[0120]根据本申请实施例的第二方面,与本申请实施例提供的一种网页适应屏幕排版方法相对应,本申请实施例还提供了一种网页适应屏幕排版装置。图3为本申请实施例提供的一种网页适应屏幕排版装置的结构示意图,在一种可能的实施方式中,如图3所示,所述装置包括:
[0121]计算单元U301,用于计算网页排版树中各个节点的宽度;
[0122]第一判断单元U302,与计算单元U301连接,用于判断各个节点的宽度是否小于或等于屏幕宽度;
[0123]第一执行单元U303,与第一判断单元U302连接,用于当节点的宽度小于或等于屏幕宽度时,保留所述节点的原样式,并对所述节点按标准流程排版;
[0124]第二执行单元U304,与第一判断单元U302连接,用于当节点的宽度大于屏幕宽度时,修改所述节点的样式,并对所述节点按适应屏幕规则排版。
[0125]图4为图3所示的装置中计算单元的结构示意图。在一种可能的实施方式中,所述计算单元U301,如图4所示,包括:
[0126]第一执行子单元U401,用于遍历网页排版树的节点;
[0127]第一判断子单元U402,与第一执行子单元U401连接,用于判断各个节点的层叠样式表中是否设置了宽度值;
[0128]第二执行子单元U403,与第一判断子单元U402连接,用于当节点的层叠样式表中设置了宽度值时,以所述节点的层叠样式表的宽度为节点的宽度;
[0129]第三执行子单元U404,与第一判断子单元U402连接,用于当节点的层叠样式表中未设置宽度值时,查找所述节点的所有子节点;
[0130]第二判断子单元U405,与第三执行子单元U404连接,用于判断所述节点的所有子节点的层叠样式表中是否都未设置宽度值;
[0131]第四执行子单元U406,与第二判断子单元U405和第三执行子单元U404连接,用于当所述节点的所有子节点的层叠样式表中都未设置宽度值时,设置所述节点的宽度小于或等于屏幕的宽度;
[0132]第五执行子单元U407,与第二判断子单元U405和第三执行子单元U404连接,用于当有所述节点的子节点的层叠样式表中设置了宽度值时,以宽度最大的所述子节点的宽度为所述节点的宽度。
[0133]图5为图3所示的装置中第二执行单元的结构示意图。在一种可能的实施方式中,所述第二执行单元U304,如图5所示,包括:
[0134]样式修改子单兀U501,用于修改节点的样式;
[0135]适应屏幕规则排版子单元U502,与样式修改子单元U501连接,用于对节点按适应屏幕规则排版。
[0136]图6为图5所示的第二执行单元中样式修改子单元的结构示意图。在一种可能的实施方式中,所述修改样式子单元,如图6所示,包括:
[0137]宽度修改子单元U601,用于修改节点的层叠样式表的宽度值和最大宽度值,使所述层叠样式表的宽度值和最大宽度值小于屏幕宽度;
[0138]边距修改子单元U602,修改节点中层叠样式表元素盒模型的填充属性和边距属性的分辨率,使所述填充属性和所述边距属性的分辨率分别小于或等于自身的预设值。
[0139]图7为图5所示的第二执行单元中适应屏幕规则排版子单元的结构示意图。在一种可能的实施方式中,所述适应屏幕规则排版子单元,如图7所示,包括:
[0140]高度排版子单元U701,用于以修改节点的样式后所述节点的元素内容的高度为所述节点的排版高度,按所述节点的排版高度进行排版;
[0141 ] 动态拉伸子单元U702,用于动态拉伸浮动元素。
[0142]图8为图7所示适应屏幕规则排版子单元中动态拉伸子单元的结构示意图。在一种可能的实施方式中,所述动态拉伸子单元,如图8所示,包括:
[0143]第三判
当前第3页1 2 3 4 
网友询问留言 已有0条留言
  • 还没有人留言评论。精彩留言会获得点赞!
1