CN105843932A - 一种网页设计方法和装置 - Google Patents

Abstract

本发明涉及一种网页设计方法和装置，通过获取容器在页面中的位置坐标，根据所述位置坐标判断所述容器是否到达浏览器边界；若所述容器到达所述浏览器边界，则将所述容器内的多媒体信息在预定位置突出显示，由此，能够利用网页锚点和容器的结合，使锚点目标元素始终在浏览器窗口中显示。

Description

一种网页设计方法和装置

技术领域

本发明涉及网络技术领域，具体包括一种网页设计方法和装置。

背景技术

随着互联网的发展，网络越来越深入的进入了人们的日常生活中。网络中包含了大量的信息，以视频、图片和文字等方式呈现。大部分的网站在使用文字的同时，都配有图片。以淘宝，京东等购物网站为例，每一个网上销售物品都配有图片和文字介绍。

然而，在浏览购物网站的时候，对于物品介绍的图片一般都放置在页面的左上方，文字的介绍信息放置在距离图片右边的位置。当对页面进行滚动操作时，位于页面上方的图片会随着页面的向下滚动而消失，而造成无法图文对照的了解物品详情。

发明内容

技术问题

有鉴于此，本发明要解决的技术问题是，如何提供一种网页设计方法和装置，能够在网页滚动的过程中始终在屏幕中显示。

解决方案

为解决以上技术问题，本发明在第一方面提供一种网页设计方法，包括：

获取容器在页面中的位置坐标，根据所述位置坐标判断所述容器是否到达浏览器边界；

若所述容器到达所述浏览器边界，则将所述容器内的多媒体信息在预定位置突出显示。

在一种可能的实现方式中，所述容器的尺寸根据其内放置的所述多媒体信息的尺寸确定；或

根据所述页面中其他参考信息确定。

在一种可能的实现方式中，所述容器在页面中的位置坐标为所述容器的左上顶点坐标；

所述容器到达所述浏览器边界包括：所述容器的所述左上顶点到达所述浏览器的上边界；

所述预定位置包括：当所述容器到达所述浏览器的上边界时，所述多媒体信息在所述浏览器中的位置。

在一种可能的实现方式中，所述容器在页面中的位置坐标为所述容器的左下顶点坐标；

所述容器到达所述浏览器边界包括：所述容器的所述左下顶点到达所述浏览器的下边界；

所述预定位置包括：当所述容器到达所述浏览器的下边界时，所述多媒体信息在所述浏览器中的位置。

在一种可能的实现方式中，还包括：

获取所述页面的滚动值，确定所述容器的滚动方向；

若所述容器从所述浏览器的显示区域外向显示区域滚动，则在所述容器到达所述浏览器的边界时，取消所述多媒体信息的所述突出显示，在所述容器中显示所述多媒体信息。

在一种可能的实现方式中，还包括：

检测预设范围内的文字信息位置；

若所欲预设范围内的文字信息全部移动到所述浏览器的显示区域外，则取消所述多媒体信息的突出显示。

本发明在另一方面提供一种网页设计装置，包括：

判断模块，用于获取容器在页面中的位置坐标，根据所述位置坐标判断所述容器是否到达浏览器边界；

显示模块，与所述判断模块连接，用于若所述容器到达所述浏览器边界，则将容器内的多媒体信息在预定位置突出显示。

在一种可能的实现方式中，所述容器的尺寸根据其内放置的所述多媒体信息的尺寸确定；或

根据所述页面中其他参考信息确定。

在一种可能的实现方式中，所述容器在页面中的位置坐标为所述容器的左上顶点坐标；

所述容器到达所述浏览器边界包括：所述容器的所述左上顶点到达所述浏览器的上边界；

所述预定位置包括：当所述容器到达所述浏览器的上边界时，所述多媒体信息在所述浏览器中的位置。

在一种可能的实现方式中，所述容器在页面中的位置坐标为所述容器的左下顶点坐标；

所述容器到达所述浏览器边界包括：所述容器的所述左下顶点到达所述浏览器的下边界；

所述预定位置包括：当所述容器到达所述浏览器的下边界时，所述多媒体信息在所述浏览器中的位置。

在一种可能的实现方式中，还包括：

显示切换模块，与所述显示模块连接，用于获取所述页面的滚动值，确定所述容器的滚动方向，若所述容器从所述浏览器的显示区域外向显示区域滚动，则在所述容器到达所述浏览器的边界时，取消所述多媒体信息的所述突出显示，在所述容器中显示所述多媒体信息。

在一种可能的实现方式中，还包括：

位置检测模块，用于检测预设范围内的文字信息位置；

显示取消模块，与所述位置检测模块连接，用于若所欲预设范围内的文字信息全部移动到所述浏览器的显示区域外，则取消所述多媒体信息的突出显示。

有益效果

本发明提供的一种网页设计方法和装置，通过获取容器在页面中的位置坐标，根据所述位置坐标判断所述容器是否到达浏览器边界；若所述容器到达所述浏览器边界，则将所述容器内的多媒体信息在预定位置突出显示，由此，能够利用网页锚点和容器的结合，使锚点目标元素始终在浏览器窗口中显示。

根据下面参考附图对示例性实施例的详细说明，本发明的其它特征及方面将变得清楚。

附图说明

包含在说明书中并且构成说明书的一部分的附图与说明书一起示出了本发明的示例性实施例、特征和方面，并且用于解释本发明的原理。

图1示出本发明实施例提供的网页设计方法的流程图。

图2示出本发明另一实施例提供的网页设计方法的流程图。

图3示出本发明另一实施例提供的网页设计方法的流程图。

图4示出本发明实施例提供的网页设计装置的框图。

图5示出本发明另一实施例提供的网页设计装置的框图。

图6示出本发明另一实施例提供的网页设计装置的框图。

具体实施方式

以下将参考附图详细说明本发明的各种示例性实施例、特征和方面。附图中相同的附图标记表示功能相同或相似的元件。尽管在附图中示出了实施例的各种方面，但是除非特别指出，不必按比例绘制附图。

在这里专用的词“示例性”意为“用作例子、实施例或说明性”。这里作为“示例性”所说明的任何实施例不必解释为优于或好于其它实施例。

另外，为了更好的说明本发明，在下文的具体实施方式中给出了众多的具体细节。本领域技术人员应当理解，没有某些具体细节，本发明同样可以实施。在一些实例中，对于本领域技术人员熟知的方法、手段、元件未作详细描述，以便于凸显本发明的主旨。

实施例1

图1示出本发明实施例提供的网页设计方法的流程图，如图1所示，该方法包括：

步骤S1、获取容器在页面中的位置坐标，根据所述位置坐标判断所述容器是否到达浏览器边界。

在浏览器界面中，网页中各个元素的位置是有明确表示的。每一个元素的位置都可以使用以网页左上角为原点而形成的坐标系中的坐标来表示。容器可以用来放置图片、视频、文本等多媒体信息，利用容器，可以精确的设定元素在整个页面中的位置，同时也可以利用容器准确的定位元素位置。

根据网页的设计格式、表现内容的不同，可以呈现出不同的页面布局和页面风格，常见的网页布局有纵向分列布局，瀑布流布局等。以下将以纵向分列布局为例，详细描述本发明的方法。

在页面滚动的过程中，通过获取页面滚动条的坐标可以获得页面的滚动值，在各元素的初始位置的基础上叠加页面的滚动值，即可获得页面元素的当前位置。具体来说，对于一个容器，可以将其理解为一个具有长和高的矩形容器，容器的边缘位置可以作为容器的位置来定位容器。多媒体信息在容器中作为容器的锚点目标，可以随着容器和页面一起滚动。在本发明中，容器可以设定其在浏览器中的位置，容器在浏览器上占用的像素大小等参数。容器的尺寸可以根据其内放置的多媒体信息的尺寸来确定，也可以根据页面的其他参考信息确定，例如页面中文字信息的范围。

以上下滚动的页面为例，当页面在向上滚动过程中，页面中的容器随着页面的滚动向浏览器的上边界靠近。选择容器的左上顶点的坐标作为容器的位置坐标，在左上顶点的初始位置上减去页面滚动的滚动值，即可得到容器的当前坐标位置。此处，由于是上下滚动的页面，因此仅考虑更新纵轴坐标。当容器的当前位置坐标与浏览器上边界之间距离为0时，判定容器到达浏览器上边界。

当页面在向下滚动过程中，页面中的容器随着页面的滚动向浏览器的下边界靠近。选择容器的左下顶点的坐标作为容器的位置坐标，在左下顶点的初始位置上加上页面滚动的滚动值，即可得到容器的当前坐标位置。此处，由于是上下滚动的页面，因此仅考虑更新纵轴坐标。当容器的当前位置坐标与浏览器下边界之间距离为0时，判定容器到达浏览器下边界。

对于左右滚动的页面，可以选择容器的左右边缘位置作为容器的位置，以与上下滚动页面类似的方式实现。

步骤S2、若所述容器到达浏览器边界，则将容器内的多媒体信息在预定位置突出显示。

容器以及其内包含的多媒体信息会随着页面的滚动而同步滚动，在所述容器到达浏览器边界时，获取此时容器内部的多媒体信息的位置坐标，在该多媒体信息的当前位置生成突出显示区域，将该多媒体信息突出显示，不随着页面的滚动而移动。

具体地，页面在向上滚动过程中，页面中的容器随着页面的滚动向浏览器的上边界靠近。当到达浏览器上边界时，获取此时容器内部的多媒体信息的位置坐标，包括多媒体信息各顶点的位置坐标，从而确定此时多媒体信息在浏览器中的具体位置。在多媒体信息当前位置处生成一个突出显示区域，将多媒体信息置顶显示在该突出显示区域。

页面在向下滚动过程中，页面中的容器随着页面的滚动向浏览器的下边界靠近。当到达浏览器下边界时，获取此时容器内部的多媒体信息的位置坐标，包括多媒体信息各顶点的位置坐标，从而确定此时多媒体信息在浏览器中的具体位置。在多媒体信息当前位置处生成一个突出显示区域，将多媒体信息置底显示在该突出显示区域。

通过以上的网页设计方法，可以使多媒体信息在网页的预定位置显示，方便用户在浏览页面时能够对照阅读，提高了用户体验。

在一种可能的实现方式中，突出显示区域可以选择在页面的空白处生成。具体的，当容器到达浏览器边界时，获取浏览器页面中的网页结构信息，根据网页结构信息，分析页面中的空白位置，在空白位置中生成与多媒体信息面积相当的显示区域，将多媒体信息在该显示区域中突出显示。

通过以上的方法，可以充分利用页面的空白位置显示多媒体信息，提高了页面的利用率，增强了用户体验。

在一种可能的实现方式中，如图2所示，该网页设计方法还可以包括：

在对多媒体信息突出显示后，继续获取页面的滚动值，可以根据页面的滚动值判断出页面的滚动方向，由于容器随着页面一起滚动，因此容器的滚动方向也可以确定。若容器是从浏览器的显示区域外向显示区域滚动，在容器到达浏览器边界时，取消多媒体信息的突出显示，改为在容器中显示多媒体信息。

具体地，当多媒体信息置顶显示，判断容器的滚动方向是从超出浏览器显示区域的上部向下滚动，当到容器的左上顶点位置到达浏览器上边界时，取消多媒体信息置顶显示，在该容器中显示多媒体信息。

当多媒体信息置底显示，判断容器的滚动方向是从超出浏览器显示区域的下部向上滚动，当到容器的左下顶点位置到达浏览器下边界时，取消多媒体信息置底显示，在该容器中显示多媒体信息。

通过继续获取容器的位置和运动状态，可以做到在容器出现在可显示区域时将多媒体信息在容器中显示，随着容器的滚动而滚动，提高用户体验。

在一种可能的实现方式中，如图3所示，该网页设计方法还可以包括：

检测预设范围内的文字信息位置，若所欲预设范围内的文字信息全部移动到所述浏览器的显示区域外，则取消所述多媒体信息的突出显示。具体地，获取预设范围内文字信息的所占用的位置的各顶点坐标信息，以及页面的滚动值，根据各顶点坐标信息和页面的滚动值可判断所述预设范围内的文字信息是否全部移动到所述浏览器的显示区域以外，若是，则取消所述多媒体信息的突出显示。

实施例2

图4示出根据本发明实施例提供的一种网页设计装置1的结构示意图，如图4所示，该装置1包括：判断模块11，显示模块12。

判断模块11，用于获取容器在页面中的位置坐标，根据所述位置坐标判断所述容器是否到达浏览器边界。显示模块12，与所述判断模块11连接，用于若所述容器到达浏览器边界，则将容器内的多媒体信息在预定位置突出显示。以上各模块的功能与实施例1中的方法相对应，在此不再赘述。

由此，可以使多媒体信息在网页的预定位置显示，方便用户在浏览页面时能够对照阅读，提高了用户体验。

在一种可能的实现方式中，所述显示模块12包括：空白位置分析模块121和空白位置显示模块122。

空白位置分析模块121，用于获取浏览器页面中的网页结构信息，根据网页结构信息，分析页面中的空白位置。空白位置显示模块122，与所述空白位置分析模块121连接，用于在空白位置中生成与多媒体信息面积相当的显示区域，将多媒体信息在该显示区域中突出显示。

由此，可以充分利用页面的空白位置显示多媒体信息，提高了页面的利用率，增强了用户体验。

在一种可能的实现方式中，如图5所示，所述网页设计装置1还包括：显示切换模块13，与所述显示模块12连接，用于获取页面的滚动值，确定容器的滚动方向，若容器是从浏览器的显示区域外向显示区域滚动，在容器到达浏览器边界时，取消多媒体信息的突出显示，改为在容器中显示多媒体信息。

在一种可能的实现方式中，所述显示切换模块13还包括：第一显示切换子模块131和第二显示切换子模块132。

第一显示切换子模块131，当多媒体信息置顶显示，判断容器的滚动方向是从超出浏览器显示区域的上部向下滚动，当到容器的左上顶点位置到达浏览器上边界时，取消多媒体信息置顶显示，在该容器中显示多媒体信息。

第二显示切换子模块132，用于当多媒体信息置底显示，判断容器的滚动方向是从超出浏览器显示区域的下部向上滚动，当到容器的左下顶点位置到达浏览器下边界时，取消多媒体信息置底显示，在该容器中显示多媒体信息。

在一种可能的实现方式中，如图6所示，所述网页设计装置1还包括：位置检测模块14，用于检测预设范围内的文字信息位置。显示取消模块15，与所述位置检测模块14连接，用于若所欲预设范围内的文字信息全部移动到所述浏览器的显示区域外，则取消所述多媒体信息的突出显示。

以上各模块的功能与实施例1中的方法相对应，在此不再赘述。

以上所述，仅为本发明的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应以所述权利要求的保护范围为准。

Claims (12)

1.一种网页设计方法，其特征在于，包括：

获取容器在页面中的位置坐标，根据所述位置坐标判断所述容器是否到达浏览器边界；

若所述容器到达所述浏览器边界，则将所述容器内的多媒体信息在预定位置突出显示。

2.根据权利要求1所述的网页设计方法，其特征在于：

所述容器的尺寸根据其内放置的所述多媒体信息的尺寸确定；或

根据所述页面中其他参考信息确定。

3.根据权利要求1所述的网页设计方法，其特征在于：

所述容器在页面中的位置坐标为所述容器的左上顶点坐标；

所述容器到达所述浏览器边界包括：所述容器的所述左上顶点到达所述浏览器的上边界；

所述预定位置包括：当所述容器到达所述浏览器的上边界时，所述多媒体信息在所述浏览器中的位置。

4.根据权利要求1所述的网页设计方法，其特征在于：

所述容器在页面中的位置坐标为所述容器的左下顶点坐标；

所述容器到达所述浏览器边界包括：所述容器的所述左下顶点到达所述浏览器的下边界；

所述预定位置包括：当所述容器到达所述浏览器的下边界时，所述多媒体信息在所述浏览器中的位置。

5.根据权利要求1-4中任一项所述的网页设计方法，其特征在于，还包括：

获取所述页面的滚动值，确定所述容器的滚动方向；

若所述容器从所述浏览器的显示区域外向显示区域滚动，则在所述容器到达所述浏览器的边界时，取消所述多媒体信息的所述突出显示，在所述容器中显示所述多媒体信息。

6.根据权利要求1-4中任一项所述的网页设计方法，其特征在于，还包括：

检测预设范围内的文字信息位置；

若所欲预设范围内的文字信息全部移动到所述浏览器的显示区域外，则取消所述多媒体信息的突出显示。

7.一种网页设计装置，其特征在于，包括：

判断模块，用于获取容器在页面中的位置坐标，根据所述位置坐标判断所述容器是否到达浏览器边界；

显示模块，与所述判断模块连接，用于若所述容器到达所述浏览器边界，则将容器内的多媒体信息在预定位置突出显示。

8.根据权利要求7所述的网页设计装置，其特征在于：

所述容器的尺寸根据其内放置的所述多媒体信息的尺寸确定；或

根据所述页面中其他参考信息确定。

9.根据权利要求7所述的网页设计装置，其特征在于：

所述容器在页面中的位置坐标为所述容器的左上顶点坐标；

所述容器到达所述浏览器边界包括：所述容器的所述左上顶点到达所述浏览器的上边界；

所述预定位置包括：当所述容器到达所述浏览器的上边界时，所述多媒体信息在所述浏览器中的位置。

10.根据权利要求7所述的网页设计装置，其特征在于：

所述容器在页面中的位置坐标为所述容器的左下顶点坐标；

所述容器到达所述浏览器边界包括：所述容器的所述左下顶点到达所述浏览器的下边界；

所述预定位置包括：当所述容器到达所述浏览器的下边界时，所述多媒体信息在所述浏览器中的位置。

11.根据权利要求7-10中任一项所述的网页设计装置，其特征在于，还包括：

显示切换模块，与所述显示模块连接，用于获取所述页面的滚动值，确定所述容器的滚动方向，若所述容器从所述浏览器的显示区域外向显示区域滚动，则在所述容器到达所述浏览器的边界时，取消所述多媒体信息的所述突出显示，在所述容器中显示所述多媒体信息。

12.根据权利要求7-10中任一项所述的网页设计装置，其特征在于，还包括：

位置检测模块，用于检测预设范围内的文字信息位置；

显示取消模块，与所述位置检测模块连接，用于若所欲预设范围内的文字信息全部移动到所述浏览器的显示区域外，则取消所述多媒体信息的突出显示。