CN101388037A - 一种页面布局的方法和装置 - Google Patents

Abstract

本发明公开了一种页面布局的方法和装置，该页面布局的方法包括：设置由栅格单元组成的栅格页面；将所述栅格页面按照网页内容进行栅格区域划分；应用所述划分的栅格区域进行页面布局。通过运用本发明，采用栅格单元的网页设计更加合理，布局更加规范，让整个网站看起来更加统一，减少了设计者的工作量。

Description

一种页面布局的方法和装置

技术领域

本发明涉及互联网网页设计领域，尤其涉及一种页面布局的方法和装置。

背景技术

栅格结构是最简单最直接的空间数据结构，是指将地球表面划分为大小均匀紧密相邻的栅格阵列，每个栅格作为一个像元或像素由行、列定义，并包含一个代码表示该像素的属性类型或量值，或仅仅包括指向其属性记录的指针，因此，栅格结构是以规则的阵列来表示空间或现象分布的数据组织，组织中的每个数据表示地物或现象的非几何属性特征。

栅格具有以下特点：属性明显，即数据直接记录属性本身，栅格单元的属性可以由网页中某种元素的尺寸，例如图片的大小，标题的高度等来表示；定位隐含，栅格单元所在的位置是根据行列号转换为相应的坐标，即定位是根据数据在数据集中的位置得到的。在栅格结构中，点用一个栅格单元表示；线状地物用沿线走向的一组相邻栅格单元表示，每个栅格单元最多只有两个相邻单元在线上；面或区域用记有区域属性的相邻栅格单元的集合表示，每个栅格单元可有多于两个的相邻单元同属一个区域。因此，栅格可以作为可视化空间、比例和距离的辅助对象，例如用于字体设计；可以作为在场景中创建和对齐对象的构造平面，例如用于杂志版式设计、网页版面设计等；也可以作为使用捕捉功能对齐对象的参考系统。

在实现本发明的过程中，发明人发现现有技术至少存在以下问题：现有技术中，网页版面的设计通常是通过设计者的经验以及业内的通则来设计的，从而导致一个网站中每个页面的区块的尺寸都是不规则的，从而使可复用的模块或信息内容不能直接应用到别的页面上，增加了设计成本，也加大了设计者的工作量。

发明内容

本发明提供了一种页面布局的方法和装置，以实现基于栅格页面的网页设计更加合理，布局更加规范，让整个网站看起来更加统一，减少设计者的工作量。

为了达到上述目的，本发明一方面提供一种页面布局的方法，包括：

设置由栅格单元组成的栅格页面；

将所述栅格页面按照网页内容进行栅格区域划分；

应用所述划分的栅格区域进行页面布局。

其中，所述设置由栅格单元组成的栅格页面包括：

已知栅格单元的宽度和所述栅格单元与所述栅格单元之间间隙的宽度；

所述栅格单元的宽度与所述间隙的宽度之和为一个最小栅格单元的宽度，根据所述最小栅格单元与所述间隙的宽度，确定网页页面的宽度或高度。

其中，所述设置由栅格单元组成的栅格页面具体为：

W＝A*n-i；

其中：A＝a+i，a为栅格单元的宽度；

i为所述栅格单元与栅格单元之间间隙的宽度；

A为最小栅格单元的宽度；

n为所述最小栅格单元的个数，n为正整数；

W为所述网页页面的宽度或高度。

其中，所述设置由栅格单元组成的栅格页面还包括：

已知网页页面的宽度或高度和所述栅格单元与所述栅格单元之间间隙的宽度；

根据所述页面的宽度或高度与所述间隙的宽度，确定栅格单元的宽度，进而确定最小栅格单元的宽度。

其中，所述设置由栅格单元组成的栅格页面具体表示为：

A＝(W+i)/n；

其中：W为所述网页页面的宽度或高度；

a为栅格单元的宽度；

i为所述栅格单元与栅格单元之间间隙的宽度；

n为所述最小栅格单元的个数，n为正整数；

A＝a+i，为最小栅格单元的宽度。

其中，将所述栅格页面按照网页内容进行栅格区域划分包括：

将整数倍个数的最小栅格单元分配给不同的区域。

另一方面，本发明还提供一种页面布局的装置，包括：

设置模块，用于设置由栅格单元组成的栅格页面；

区域划分模块，用于将所述设置模块设置的由栅格单元组成的栅格页面按照网页内容进行区域划分；

应用模块，用于将所述区域划分模块划分的栅格区域进行页面布局。

其中，所述设置模块进一步包括：

第一设置子模块，用于设置已知所述栅格单元的宽度和所述栅格单元与所述栅格单元之间间隙的宽度；

所述栅格单元的宽度与所述间隙的宽度之和为一个最小栅格单元，根据所述最小栅格单元与所述间隙的宽度，确定网页页面的宽度或高度；

另外，所述设置模块还进一步包括：

第二设置子模块，用于设置已知所述网页页面的宽度或高度和所述栅格单元与所述栅格单元之间间隙的宽度；

根据所述页面的宽度或高度与所述间隙的宽度，确定所述栅格单元的宽度，进而确定最小栅格单元的宽度。

与现有技术相比，本发明具有以下优点：

通过运用本发明，将栅格单元应用于多维的网页页面设计中，对于网页设计者来说，栅格单元的应用不仅可以让网页的信息呈现得更加美观易读，统一页面布局，相同信息内容的布局更具有可复用性，并且，对于前端的软件开发者来说，应用由栅格单元组成的栅格页面，使得页面的设计更加规范、灵活。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作一简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。

图1为本发明页面布局的方法的流程图；

图2为栅格单元排列布局示意图；

图3为本发明由栅格单元组成的栅格页面结构示意图；

图4为本发明栅格页面具体结构的示意图；

图5为本发明栅格页面具体结构的另一示意图；

图6为本发明页面布局的操作示意图；

图7为本发明页面布局的结构示意图；

图8为本发明页面布局的最终结构示意图；

图9为本发明页面布局的装置的结构示意图。

具体实施方式

为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施方式，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施方式仅仅用以解释本发明，并不用于限定本发明。

如图1所示，为本发明页面布局的方法的流程图，具体包括以下几个步骤：

步骤S101，设置由栅格单元组成的栅格页面。

栅格的设置根据设计师具体的工作环境以及使用的工具而定，设计师可以根据具体的工作环境采用适当的软件和工具把格子“画”出来。如，网页设计师会在photoshop之类的图形设计软件中，利用参考线或者在“画布”中事先画出这样的格子，栅格单元按指定的行间距和列间距进行排列，如图2所示，就像在屏幕上铺了一张坐标纸，因此可方便设计师的绘图过程，辅助设计师进行网页的内容规划和视觉设计。

如果已知栅格单元的宽度和栅格单元与栅格单元之间间隙的宽度，在本发明中，将栅格单元的宽度与间隙的宽度之和称为一个最小栅格单元的宽度，则可以根据已知的最小栅格单元与间隙的宽度，确定网页页面的宽度或高度。

如图3所示，为本发明由栅格单元组成的栅格页面结构示意图。如图所示，设置栅格单元的宽度为a，栅格单元与栅格单元之间间隙的宽度设置为i，将最小栅格单元宽度设置为A，其中：A＝a+i，设置网页页面的宽度或高度为W，此时，栅格页面可以用公式表示为。

W＝(a*n)+(n-1)*i                   (1)

由于A＝a+i，将A代入上述公式(1)中，可得：

W＝(A*n)-i                            (2)

式中:

A：最小栅格单元的宽度；

a：栅格单元的宽度；

i：栅格单元与栅格单元之间间隙的宽度；

n：最小栅格单元的个数，n为正整数，取值1、2、3、4......；

W：页面的宽度或高度。

在实际应用中，网页设计者在建立栅格页面时，根据公式(2)的表述，首先设定A与i的值，A为最小栅格单位的宽度，单位选取可以为网页中某种元素的尺寸，比如图片的大小，标题的高度等，例如：可以预先设定最小栅格单元的宽度为80px，则A的值为80px，然后，预设i的取值，对于i的取值，设计者可以根据自身的设计经验或是借鉴其他网站的数据任意取值，一般i的值取为最小栅格单元A的约数，即能被最小栅格单位A整除的整数。在本发明中，假设i的取值为5px，而由于A＝a+i，即可得到栅格单元a的值为75px。

将A＝80，i＝5这两个数值代入公式(2)中可得：

W＝(80*n)-5                                    (3)

上述得到的公式(3)即为本次网页设计的栅格页面。

根据公式(3)，页面的宽度或高度W的数值，取决于最小栅格单元总数n的值，其中，n为正整数，n的取值为1、2、...，n取不同的值，对应W会得到不同的取值，表1为n与W(宽度)之间的关系，表2为n与W(高度)之间的关系。

表1

 

n	1	2	3	4	5	6	7	8	9
											W(宽度)	75	155	235	315	395	475	555	635	715

表2

 

n	1	2	3	4	5	6	7	8	9
											W(高度)	75	155	235	315	395	475	555	635	715

设计者根据屏幕的不同分辨率(例如1024*768px、800*600px)，取不同的n值。当屏幕的分辨率为800*600px，此时页面可进行设计的宽度W的最大取值约为780px(去除浏览器的一些边框以及下拉框)，而n能取到的最大正整数值为9，当n＝9时，W(宽度)＝715px。页面可进行设计的高度W的最大取值约为550px(去除浏览器的头部以及系统栏等高度)，而n能取到的最大正整数为6，当n＝6时，W(高度)＝475px。基于上述W与n的取值，栅格页面具体结构的示意图如图4所示。

继续参考图3，如果已知网页页面的宽度或高度和栅格单元与栅格单元之间间隙的宽度，则可以根据已知的页面的宽度或高度与栅格单元之间间隙的宽度，确定最小栅格单元的宽度，从而建立一个栅格页面。

设置网页页面的宽度为W，栅格单元与栅格单元之间的间隙的宽度为i，此时，栅格页面可以用公式表示为：

A＝(W+i)/n，                                         公式(4)

W：页面的宽度或高度；

i：栅格单元与栅格单元之间间隙的宽度；

a：栅格单元的宽度；

A：最小栅格单元的宽度，A＝a+i；

n：最小栅格单元的个数，n为正整数，取值1、2、3、4......。

将W+i的值平均分成若干份，每份的宽度即为最小栅格单元，当设定屏幕的分辨率为800*600px时，此时，去除浏览器的一些边框以及下拉框页面的宽度，可进行设计的页面宽度W的最大取值约为780px，去除浏览器的头部以及系统栏等高度，可进行设计的页面高度W可取到的最大值为550px，由于i为栅格单元之间间隙的宽度，因此，i的取值不应太大，在本发明中，取i＝5，若已知页面的宽度为635px，由公式(4)可知，A＝(635+5)/n，n的不同取值，决定A的不同取值。n一般选取为偶数，并且能被若干个质数整除的数。例如n取值为8，或取值为16，将n＝8代入公式A＝(W+i)/n中，可得：A＝80，此时，也可得到：(80*n)-5＝W公式(3)的表述，根据上述数值，也可得到如图4的栅格页面。

步骤S102，将栅格页面按照网页内容进行栅格区域划分。

如图5所示，为本发明栅格页面具体结构的另一示意图。在建立好的栅格页面中，根据预先设定的网页内容，将栅格页面进行区域划分，不同的网页内容分配不同数量的最小栅格单元。将整数倍个数的最小栅格单元分配给不同的区域。网页内容可以包括：网页LOGO、广告、网页内容文本、导航菜单、网址链接、图片等，不同的网页内容分配不同大小的栅格区域。例如，页面的最上方包含网页LOGO和页面头部区域内容，并且网页LOGO与页面头部区内容属于同行，可以横向分配网页LOGO2个最小栅格单元，纵向分配网页LOGO2个最小栅格单元，即横向或纵向n的值取都为2，将n＝2代入公式中，可得网页的横向宽度和纵向高度W＝80*2-5＝155。即网页LOGO的宽度和高度均为155px，在纵向n＝9的栅格页面中，减掉网页LOGO占据的2个最小栅格单元，其他7个最小栅格单元分配给页面头部区，页面头部区的宽度W＝80*7-5＝555px；由于页面头部区与网页LOGO位于同行，因此，页面头部区的高度与网页LOGO的高度相同，也为155px。假设页面中部的网页内容为导航菜单、网络文本内容和广告，那么可以将页面中的栅格页面划分为导航菜单区、内容区和广告区。设置导航菜单区、内容区和广告区位于同行，高度为占据3个最小栅格单元，那么三个不同的网页内容区的高度W均为W＝80*3-5＝235。按照实际情况的需要，可以纵向划分2个最小栅格单元分配给导航菜单区，导航菜单区的宽度为W＝80*2-5＝155；划分4个最小栅格单元分配给内容区，内容区宽度为W＝80*4-5＝315；划分2个最小栅格单元分配给广告区，广告区的宽度W＝80*2-5＝155。设置页面的最底层为页面底部区，可以将9个最小栅格单元全部分配给页面底部区，页面底部区的宽度为W＝80*9-5＝715。

在本发明中，不同的网页内容分配不同大小的栅格区域，在栅格页面中，具体的栅格区域的划分，由实际情况决定，已划分好的栅格区域具有规范性。

步骤S103，应用划分的栅格区域进行页面布局。在划分好的栅格区域中，将不同的网页内容添加到不同的区域中，进而对各个区域中的网页内容进行视觉上的布局和设计。

设计师在设计网页时，在设计的区域产生一层辅助的栅格，如图6所示的栅格层，这些辅助的栅格用以规范和引导设计师进行网页的内容规划和视觉设计。设计师将不同的网页内容以栅格为参照分配到网页不同的设计区域中，规范不同的网页内容在页面中的布局，如图7所示。

栅格作为设计师辅助的设计框架存在，其实它是一个实际存在但没有任何表现形式的辅助格子系统。当设计师参照栅格层完成网页的内容规划和视觉设计以后，移去栅格层即可，最终形成一个完整的网页，如图8所示。

通过运用本发明，网页的布局设计完全是规范的、可重用的，设计者在设计多个网页时，当多个网络页面出现多个相同的网页内容(例如广告)时，设计者不需要为每个页面设计不同尺寸的广告图，只需要将广告添加到相应的广告栅格区域即可，从而降低了设计成本，减轻了工作人员的工作量。

如图9所示，为本发明页面布局的装置的结构示意图，具体包括：

设置模块91，用于设置由栅格单元组成的栅格页面；

区域划分模块92，用于将设置模块91设置的由栅格单元组成的栅格页面按照网页内容进行区域划分；

应用模块93，用于将区域划分模块92划分的栅格区域进行页面布局。

其中，设置模块91还可以包括：

第一设置子模块911，用于设置已知所述栅格单元的宽度和所述栅格单元与所述栅格单元之间间隙的宽度；

所述栅格单元的宽度与所述间隙的宽度之和为一个最小栅格单元的宽度，根据所述最小栅格单元与所述间隙的宽度，确定网页页面的宽度或高度。

第二设置子模块912，用于设置已知所述网页页面的宽度或高度和所述栅格单元与所述栅格单元之间间隙的宽度；

根据所述页面的宽度或高度与所述间隙的宽度，确定所述栅格单元的宽度，进而确定最小栅格单元的宽度。

通过本发明实施例，设计者可以应用由栅格单元组成的栅格页面进行网页设计，使得页面设计更加合理、灵活，布局更加规范，让整个网站看起来更加统一，减少了设计者的工作量。

本领域技术人员可以理解附图只是一个优选实施例的示意图，附图中的模块或流程并不一定是实施本发明所必须的。

本领域技术人员可以理解实施例中的装置中的模块可以按照实施例描述进行分布于实施例的装置中，也可以进行相应变化位于不同于本实施例的一个或多个装置中。上述实施例的模块可以合并为一个模块，也可以进一步拆分成多个子模块。

上述本发明实施例序号仅仅为了描述，不代表实施例的优劣。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到本发明可以通过硬件实现，也可以借助软件加必要的通用硬件平台的方式来实现基于这样的理解，本发明的技术方案可以以软件产品的形式体现出来，该软件产品可以存储在一个非易失性存储介质(可以是CD-ROM，U盘，移动硬盘等)中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例所述的方法。

以上所述仅是本发明的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视为本发明的保护范围。

Claims (9)

1、一种页面布局的方法，其特征在于，包括：

设置由栅格单元组成的栅格页面；

将所述栅格页面按照网页内容进行栅格区域划分；

应用所述划分的栅格区域进行页面布局。

2、如权利要求1所述页面布局的方法，其特征在于，所述设置由栅格单元组成的栅格页面包括：

设置栅格单元的宽度和所述栅格单元与所述栅格单元之间间隙的宽度；

所述栅格单元的宽度与所述间隙的宽度之和为一个最小栅格单元的宽度，根据所述最小栅格单元与所述间隙的宽度，确定网页页面的宽度或高度。

3、如权利要求2所述页面布局的方法，其特征在于，所述设置由栅格单元组成的栅格页面具体为：

W＝A*n-i；

其中：A＝a+i，a为栅格单元的宽度；

i为所述栅格单元与栅格单元之间间隙的宽度；

A为最小栅格单元的宽度；

n为所述最小栅格单元的个数，n为正整数；

W为所述网页页面的宽度或高度。

4、如权利要求1所述页面布局的方法，其特征在于，所述设置由栅格单元组成的栅格页面还包括：

设置网页页面的宽度或高度和所述栅格单元与所述栅格单元之间间隙的宽度；

根据所述页面的宽度或高度与所述间隙的宽度，确定最小栅格单元的宽度，进而确定栅格单元的宽度。

5、如权利要求4所述页面布局的方法，其特征在于，所述设置由栅格单元组成的栅格页面具体表示为：

A＝(W+i)/n；

其中：W为所述网页页面的宽度或高度；

a为栅格单元的宽度；

i为所述栅格单元与栅格单元之间间隙的宽度；

n为所述最小栅格单元的个数，n为正整数；

A＝a+i，为最小栅格单元的宽度。

6、如权利要求1所述页面布局的方法，其特征在于，将所述栅格页面按照网页内容进行栅格区域划分包括：

将整数倍个数的最小栅格单元分配给不同的区域。

7、一种页面布局的装置，其特征在于，包括：

设置模块，用于设置由栅格单元组成的栅格页面；

区域划分模块，用于将所述设置模块设置的由栅格单元组成的栅格页面按照网页内容进行区域划分；

应用模块，用于将所述区域划分模块划分的栅格区域进行页面布局。

8、如权利要求7所述页面布局的装置，其特征在于，所述设置模块进一步包括：

第一设置子模块，用于设置已知所述栅格单元的宽度和所述栅格单元与所述栅格单元之间间隙的宽度；

所述栅格单元的宽度与所述间隙的宽度之和为一个最小栅格单元，根据所述最小栅格单元与所述间隙的宽度，确定网页页面的宽度或高度；

9、如权利要求8所述页面布局的装置，其特征在于，所述设置模块还进一步包括：

第二设置子模块，用于设置已知所述网页页面的宽度或高度和所述栅格单元与所述栅格单元之间间隙的宽度；

根据所述网页页面的宽度或高度与所述间隙的宽度，确定所述栅格单元的宽度，进而确定最小栅格单元的宽度。

Images