CN103699383A - 一种页面展示控制方法及装置 - Google Patents

Abstract

本发明公开了一种页面展示控制方法及装置，包括：获取需要展示在待生成的页面所包括的各页面元素，以及各页面元素在该页面中的横向位置区域的横向区域信息，其中，该待生成的页面包括多个宽度为180px的栅格，且每两个相邻栅格之间的间隙的宽度为20px，各页面元素中的每一页面元素在该待生成的页面中的横向位置区域占用连续的整数个栅格，以及占用该整数个栅格之间的间隙，并按照各页面元素在该待生成的页面中的横向位置区域的横向区域信息，生成包括各页面元素的页面；以及在页面窗口中展示生成的该页面。采用本发明实施例提供的方案，在进行页面展示时针对一些特定的页面元素能够获得更佳的展示效果。

Description

一种页面展示控制方法及装置

技术领域

本发明涉及计算机技术领域中的页面展示控制技术领域，尤其涉及一种页面展示控制方法及装置。

背景技术

现有技术中，通常使用栅格系统来实现网页版面的设计，栅格系统的作用主要为：以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。对于网页版面设计来说，栅格系统的使用不仅可以让网页的信息呈现更加美观易读，更具可用性，而且对于前端开发来说，网页将更加的灵活与规范。

下面对现有技术中在进行页面设计和页面展示时所使用的栅格系统进行介绍：

在使用栅格系统时，会在页面中划分出内容区域，该内容区域的宽度可以等于页面宽度，也可以小于页面宽度，并将页面中宽度为W的内容区域划分为多个栅格，每行包含N个栅格，如图1所示，每个栅格的宽度为a，栅格与栅格之间的间隙为i，栅格a和间隙i组成栅格单元A，即A=a+i，其中，a、i、A均为正整数，其单位为像素（pixel，px）。

由图1可知，页面中的栅格区域的宽度可以由下述公式表示：

W＝a×N+(N-1)×i；

由于A=a+i，则可得到下述公式：

W＝A×N-i；

按照上述方式得到各栅格后，在页面中布局页面元素时，每个页面元素的宽度应为A×n+a，其中n为自然数。

目前，现有技术中通常使用的栅格系统为960栅格系统，在960栅格系统中，每个栅格的宽度为60px，栅格之间的间隙为20px，共计12个栅格，且在页面中12个栅格的两侧还分别包括一个宽度为10px的外边距区域，由此可知，960栅格系统中的页面宽度为960px，其中，内容区域的宽度为940px。

然而，在实际应用中，针对一些页面元素在一些特定页面窗口中的展示，使用960栅格系统所能提供的展示宽度，无法获得较佳的展示效果。

发明内容

本发明实施例提供一种页面展示控制方法及装置，用以解决现有技术中存在的使用960栅格系统所能提供的展示宽度，针对一些特定的页面元素无法获得较佳的展示效果的问题。

本发明实施例提供一种页面展示控制方法，包括：

获取需要展示在待生成的页面中的各页面元素，以及所述各页面元素在所述待生成的页面中的横向位置区域的横向区域信息，其中，所述待生成的页面包括多个宽度为180px的栅格，且每两个相邻栅格之间的间隙的宽度为20px，所述各页面元素中的每一页面元素在所述待生成的页面中的横向位置区域占用连续的整数个栅格，以及占用该整数个栅格之间的间隙，所述横向区域信息表示所述横向位置区域在所述待生成的页面中的横向起始位置；

按照所述各页面元素在所述待生成的页面中的横向位置区域的横向区域信息，生成包括所述各页面元素的页面；

在页面窗口中展示生成的页面。

进一步的，所述待生成的页面中还包括分别位于多个栅格两侧的两个外边距区域，且每个外边距区域的宽度为10px；或者

所述待生成的页面中还包括位于多个栅格右侧的一个外边距区域，且该外边距区域的宽度为20px。

进一步的，所述待生成的页面中包括的多个栅格的数量为M，且M个栅格以及M个栅格之间的M-1个间隙的宽度和值不大于页面窗口的宽度，且M+1个栅格以及M+1个栅格之间的M个间隙的宽度和值大于页面窗口的宽度。

进一步的，所述待生成的页面包括的多个栅格的数量不少于5个。

进一步的，采用如下方式确定所述各页面元素中的每个页面元素在所述待生成的页面中的横向位置区域：

获取该页面元素在所述待生成的页面中占用的栅格的数量，以及该页面元素所占用的第一个栅格的栅格编号；

将从所述栅格编号表示的栅格起的该数量个栅格，以及该数量个栅格之间的间隙，确定为该页面元素在所述待生成的页面中的横向位置区域。

本发明实施例还提供一种页面展示控制装置，包括：

获取单元，用于获取需要展示在待生成的页面中的各页面元素，以及所述各页面元素在所述待生成的页面中的横向位置区域的横向区域信息，其中，所述待生成的页面包括多个宽度为180px的栅格，且每两个相邻栅格之间的间隙的宽度为20px，所述各页面元素中的每一页面元素在所述待生成的页面中的横向位置区域占用连续的整数个栅格，以及占用该整数个栅格之间的间隙，所述横向区域信息表示所述横向位置区域在所述待生成的页面中的横向起始位置；

生成单元，用于按照所述各页面元素在所述待生成的页面中的横向位置区域的横向区域信息，生成包括所述各页面元素的页面；

展示单元，用于在页面窗口中展示生成的页面。

进一步的，所述待生成的页面中还包括分别位于多个栅格两侧的两个外边距区域，且每个外边距区域的宽度为10px；或者

所述待生成的页面中还包括位于多个栅格右侧的一个外边距区域，且该外边距区域的宽度为20px。

进一步的，所述待生成的页面中包括的多个栅格的数量为M，且M个栅格以及M个栅格之间的M-1个间隙的宽度和值不大于页面窗口的宽度，且M+1个栅格以及M+1个栅格之间的M个间隙的宽度和值大于页面窗口的宽度。

进一步的，所述待生成的页面包括的多个栅格的数量不少于5个。

进一步的，该装置，还包括：

确定单元，用于采用如下方式确定所述各页面元素中的每个页面元素在所述待生成的页面中的横向位置区域：

获取该页面元素在所述待生成的页面中占用的栅格的数量，以及该页面元素所占用的第一个栅格的栅格编号；并将从所述栅格编号表示的栅格起的该数量个栅格，以及该数量个栅格之间的间隙，确定为该页面元素在所述待生成的页面中的横向位置区域。

本发明有益效果包括：

本发明实施例提供的方案中，在进行页面展示时，首先获取需要展示在待生成的页面所包括的各页面元素，以及各页面元素在待生成的页面中的横向位置区域的横向区域信息，其中，各页面元素中的每一页面元素在待生成的页面中的横向位置区域占用连续的整数个栅格，以及占用该整数个栅格之间的间隙，且横向区域信息表示横向位置区域在待生成的页面中的横向起始位置，并按照各页面元素在待生成的页面中的横向位置区域的横向区域信息，生成包括各页面元素的页面，然后在页面窗口中展示生成的该页面。由于该页面包括多个宽度为180px的栅格，且每两个相邻栅格之间的间隙的宽度为20px，所以，使用该栅格划分方式，在展示一页面时，能够提供960栅格系统无法提供的展示宽度进行页面元素的展示，因此针对一些特定的页面元素能够获得更佳的展示效果。

本申请的其它特征和优点将在随后的说明书中阐述，并且，部分地从说明书中变得显而易见，或者通过实施本申请而了解。本申请的目的和其他优点可通过在所写的说明书、权利要求书、以及附图中所特别指出的结构来实现和获得。

附图说明

附图用来提供对本发明的进一步理解，并且构成说明书的一部分，与本发明实施例一起用于解释本发明，并不构成对本发明的限制。在附图中：

图1为现有技术中栅格排列布局示意图；

图2为本发明实施例提供的页面展示控制方法流程图；

图3为本发明实施例提供的栅格系统的栅格排列布局示意图之一；

图4为本发明实施例提供的栅格系统的栅格排列布局示意图之二；

图5为本发明实施例提供的栅格系统的栅格排列布局示意图之三；

图6为本发明实施例提供的页面元素在页面中的横向位置区域确定方法的流程图；

图7为本发明实施例提供的页面展示控制装置的结构示意图。

具体实施方式

为了给出在进行页面展示时针对一些特定的页面元素能够获得更佳的展示效果的实现方案，本发明实施例提供了一种页面展示控制方法及装置，以下结合说明书附图对本发明的优选实施例进行说明，应当理解，此处所描述的优选实施例仅用于说明和解释本发明，并不用于限定本发明。并且在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互组合。

本发明实施例提供一种页面展示控制方法，如图2所示，包括：

步骤201、获取需要展示在待生成的页面所包括的各页面元素，以及各页面元素在该待生成的页面中的横向位置区域的横向区域信息，其中，该待生成的页面包括多个宽度为180px的栅格，且每两个相邻栅格之间的间隙的宽度为20px，各页面元素中的每一页面元素在该待生成的页面中的横向位置区域占用连续的整数个栅格，以及占用该整数个栅格之间的间隙，该横向区域信息表示该横向位置区域在待生成的页面中的横向起始位置。

步骤202、按照各页面元素在该待生成的页面中的横向位置区域的横向区域信息，生成包括各页面元素的页面。

步骤203、在页面窗口中展示生成的该页面。

本发明实施例中，提出一种新的栅格系统，在该栅格系统中，如图3所示，页面包括多个栅格，每个栅格的宽度为180px，相邻两个栅格之间的宽度为20px。

其中，页面包括的多个栅格以及该多个栅格之间的间隙所覆盖的区域，作为页面中的内容区域，用于展示页面元素。

该内容区域的宽度可以与页面宽度相同，也可以小于页面宽度，例如，如图4所示，页面中还可以包括分别位于该多个栅格两侧的两个外边距区域，且每个外边距区域的宽度为10px，则内容区域与两个外边距区域的宽度和值与页面宽度相同；

又如，如图5所示，页面中还可以包括位于该多个栅格右侧的一个外边距区域，且该外边距区域的宽度为20px，则内容区域与该外边距区域的宽度和值与页面宽度相同。

本发明实施例中，对于页面中包括的多个栅格的数量，可以根据页面展示的实际应用场景进行灵活设置，例如，可以根据展示页面的页面窗口的宽度进行设置，为了最大程度的利用页面窗口的宽度，以便显示更多的页面内容，页面中包括的多个栅格的数量M，可以基于如下条件确定：

页面中包括的多个栅格的数量为M，且M个栅格以及M个栅格之间的M-1个间隙的宽度和值不大于页面窗口的宽度，且M+1个栅格以及M+1个栅格之间的M个间隙的宽度和值大于页面窗口的宽度。

根据目前实际应用中页面窗口的分辨率，较佳的，页面可以包括的多个栅格的数量不少于5个，并可以根据页面窗口的宽度进行灵活扩展。

当栅格的数量为5个时，如图3所示，每个栅格的宽度为180px，栅格之间间隙的宽度为20px，在页面中内容区域的宽度为5个栅格以及5个栅格之间间隙的宽度和值，为980px，页面元素在页面中的横向位置区域所占用的连续的栅格的数量可以包括1-5个，相应的，所能提供的展示宽度包括：180px、380px、580px、780px和980px，其中，180px、580px、780px和980px的展示宽度是现有技术中采用960栅格系统无法提供的。

本发明实施例中，当栅格的数量为5个时，内容区域的宽度为980px，所以，也可以将本发明实施例中所提出的栅格系统称作980栅格系统。

在本发明实施例提供的上述图2所示的页面展示控制方法中，所获取的待生成的页面元素在页面中的横向位置区域的横向区域信息，表示该横向位置区域在待生成的的页面中的横向起始位置，其具体形式可以是所占用的栅格的编号，例如，横向位置区域占用第2-4个栅格时，横向区域信息可以包括：编号为2的第一个栅格的栅格编号和编号为4的最后一个栅格的栅格编号；也可以是横向像素标识，例如，横向位置区域占用第2-4个栅格时，横向区域信息可以包括：标识为201的起始像素标识和标识为780的结束像素标识。

当页面元素的高度不是占用整个页面的高度时，还可以获取各页面元素在页面中的纵向位置区域的纵向区域信息，并在生成页面时还按照各页面元素在该页面中的纵向位置区域的纵向区域信息生成。

本发明实施例中，针对上述各页面元素中的每个页面元素在待生成的页面中的横向位置区域的确定，可以采用如下方法，如图6所示，该方法包括：

步骤601、获取该页面元素在待生成的页面中占用的栅格的数量，以及该页面元素所占用的第一个栅格的栅格编号。

其中，占用的栅格的数量和第一个栅格的栅格编号可以为用户在进行页面设计时输入的。

步骤602、将从该栅格编号表示的栅格起的该数量个栅格，以及该数量个栅格之间的间隙，确定为该页面元素在该待生成的页面中的横向位置区域。

进一步的，还可以生成该横向位置区域的横向区域信息，例如，上述方案中页面元素所占用的栅格的编号，也可以是横向像素标识。

本发明实施例提供的上述方案中，由于页面包括多个宽度为180px的栅格，且每两个相邻栅格之间的间隙的宽度为20px，所以，使用该栅格划分方式，在展示一页面时，能够提供960栅格系统无法提供的展示宽度进行页面元素的展示，例如，栅格数量为5个时，可以提供180px、580px、780px和980px的展示宽度，对于一些原始宽度为180px、580px、780px和980px的页面元素，能够获得更佳的展示效果。

基于同一发明构思，根据本发明上述实施例提供的页面展示控制方法，相应地，本发明另一实施例还提供了一种页面展示控制装置，其结构示意图如图7所示，具体包括：

获取单元701，用于获取需要展示在待生成的页面中的各页面元素，以及所述各页面元素在所述待生成的页面中的横向位置区域的横向区域信息，其中，所述待生成的页面包括多个宽度为180px的栅格，且每两个相邻栅格之间的间隙的宽度为20px，所述各页面元素中的每一页面元素在所述待生成的页面中的横向位置区域占用连续的整数个栅格，以及占用该整数个栅格之间的间隙，所述横向区域信息表示所述横向位置区域在所述待生成的页面中的横向起始位置；

生成单元702，用于按照所述各页面元素在所述待生成的页面中的横向位置区域的横向区域信息，生成包括所述各页面元素的页面；

展示单元703，用于在页面窗口中展示生成的页面。

进一步的，所述待生成的页面中还包括分别位于多个栅格两侧的两个外边距区域，且每个外边距区域的宽度为10px；或者

所述待生成的页面中还包括位于多个栅格右侧的一个外边距区域，且该外边距区域的宽度为20px。

进一步的，所述待生成的页面中包括的多个栅格的数量为M，且M个栅格以及M个栅格之间的M-1个间隙的宽度和值不大于页面窗口的宽度，且M+1个栅格以及M+1个栅格之间的M个间隙的宽度和值大于页面窗口的宽度。

进一步的，所述待生成的页面包括的多个栅格的数量不少于5个。

进一步的，该装置，还包括：

确定单元704，用于采用如下方式确定所述各页面元素中的每个页面元素在所述待生成的页面中的横向位置区域：

获取该页面元素在所述待生成的页面中占用的栅格的数量，以及该页面元素所占用的第一个栅格的栅格编号；并将从所述栅格编号表示的栅格起的该数量个栅格，以及该数量个栅格之间的间隙，确定为该页面元素在所述待生成的页面中的横向位置区域。

综上所述，本发明实施例提供的方案，包括：获取需要展示在待生成的页面所包括的各页面元素，以及各页面元素在该页面中的横向位置区域的横向区域信息，其中，该待生成的页面包括多个宽度为180px的栅格，且每两个相邻栅格之间的间隙的宽度为20px，各页面元素中的每一页面元素在该待生成的页面中的横向位置区域占用连续的整数个栅格，以及占用该整数个栅格之间的间隙，该横向区域信息表示该横向位置区域在待生成的页面中的横向起始位置，并按照各页面元素在该待生成的页面中的横向位置区域的横向区域信息，生成包括各页面元素的页面；以及在页面窗口中展示生成的该页面。采用本发明实施例提供的方案，在进行页面展示时针对一些特定的页面元素能够获得更佳的展示效果。

本申请的实施例所提供的页面展示控制装置可通过计算机程序实现。本领域技术人员应该能够理解，上述的模块划分方式仅是众多模块划分方式中的一种，如果划分为其他模块或不划分模块，只要页面展示控制装置具有上述功能，都应该在本申请的保护范围之内。

本申请是参照根据本申请实施例的方法、设备（系统）、和计算机程序产品的流程图和／或方框图来描述的。应理解可由计算机程序指令实现流程图和／或方框图中的每一流程和／或方框、以及流程图和／或方框图中的流程和／或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和／或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和／或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和／或方框图一个方框或多个方框中指定的功能的步骤。

显然，本领域的技术人员可以对本发明进行各种改动和变型而不脱离本发明的精神和范围。这样，倘若本发明的这些修改和变型属于本发明权利要求及其等同技术的范围之内，则本发明也意图包含这些改动和变型在内。

Claims (10)

1.一种页面展示控制方法，其特征在于，包括：

获取需要展示在待生成的页面中的各页面元素，以及所述各页面元素在所述待生成的页面中的横向位置区域的横向区域信息，其中，所述待生成的页面包括多个宽度为180px的栅格，且每两个相邻栅格之间的间隙的宽度为20px，所述各页面元素中的每一页面元素在所述待生成的页面中的横向位置区域占用连续的整数个栅格，以及占用该整数个栅格之间的间隙，所述横向区域信息表示所述横向位置区域在所述待生成的页面中的横向起始位置；

按照所述各页面元素在所述待生成的页面中的横向位置区域的横向区域信息，生成包括所述各页面元素的页面；

在页面窗口中展示生成的页面。

2.如权利要求1所述的方法，其特征在于，所述待生成的页面中还包括分别位于多个栅格两侧的两个外边距区域，且每个外边距区域的宽度为10px；或者

所述待生成的页面中还包括位于多个栅格右侧的一个外边距区域，且该外边距区域的宽度为20px。

3.如权利要求1所述的方法，其特征在于，所述待生成的页面中包括的多个栅格的数量为M，且M个栅格以及M个栅格之间的M-1个间隙的宽度和值不大于页面窗口的宽度，且M+1个栅格以及M+1个栅格之间的M个间隙的宽度和值大于页面窗口的宽度。

4.如权利要求1所述的方法，其特征在于，所述待生成的页面包括的多个栅格的数量不少于5个。

5.如权利要求1-4任一所述的方法，其特征在于，采用如下方式确定所述各页面元素中的每个页面元素在所述待生成的页面中的横向位置区域：

获取该页面元素在所述待生成的页面中占用的栅格的数量，以及该页面元素所占用的第一个栅格的栅格编号；

将从所述栅格编号表示的栅格起的该数量个栅格，以及该数量个栅格之间的间隙，确定为该页面元素在所述待生成的页面中的横向位置区域。

6.一种页面展示控制装置，其特征在于，包括：

获取单元，用于获取需要展示在待生成的页面中的各页面元素，以及所述各页面元素在所述待生成的页面中的横向位置区域的横向区域信息，其中，所述待生成的页面包括多个宽度为180px的栅格，且每两个相邻栅格之间的间隙的宽度为20px，所述各页面元素中的每一页面元素在所述待生成的页面中的横向位置区域占用连续的整数个栅格，以及占用该整数个栅格之间的间隙，所述横向区域信息表示所述横向位置区域在所述待生成的页面中的横向起始位置；

生成单元，用于按照所述各页面元素在所述待生成的页面中的横向位置区域的横向区域信息，生成包括所述各页面元素的页面；

展示单元，用于在页面窗口中展示生成的页面。

7.如权利要求6所述的装置，其特征在于，所述待生成的页面中还包括分别位于多个栅格两侧的两个外边距区域，且每个外边距区域的宽度为10px；或者

所述待生成的页面中还包括位于多个栅格右侧的一个外边距区域，且该外边距区域的宽度为20px。

8.如权利要求6所述的装置，其特征在于，所述待生成的页面中包括的多个栅格的数量为M，且M个栅格以及M个栅格之间的M-1个间隙的宽度和值不大于页面窗口的宽度，且M+1个栅格以及M+1个栅格之间的M个间隙的宽度和值大于页面窗口的宽度。

9.如权利要求6所述的装置，其特征在于，所述待生成的页面包括的多个栅格的数量不少于5个。

10.如权利要求6-9任一所述的装置，其特征在于，还包括：

确定单元，用于采用如下方式确定所述各页面元素中的每个页面元素在所述待生成的页面中的横向位置区域：

获取该页面元素在所述待生成的页面中占用的栅格的数量，以及该页面元素所占用的第一个栅格的栅格编号；并将从所述栅格编号表示的栅格起的该数量个栅格，以及该数量个栅格之间的间隙，确定为该页面元素在所述待生成的页面中的横向位置区域。

Images