一种生成网页页面的方法及装置的制造方法
【技术领域】
[0001]本发明涉及计算机技术领域，特别涉及一种生成网页页面的方法及装置。
【背景技术】
[0002]网页页面是由文字、图片或表格等素材组成的页面。布局合理且美观的网页页面更能够吸引用户。为了使网页页面的布局合理且美观，在制作网页页面之前首先通过图像处理工具对网页页面包括的所有素材进行排版布局并对每个素材进行美化，得到设计原文件。例如，对于一个素材，假设该素材为一个平面结构的按钮，可以对该按钮进行美化使该按钮立体化。然后根据得到的设计原文件生成网页页面，如此生成的网页页面布局合理且美观。
[0003]其中，设计师将网页页面包括的每个素材拖动到图像处理工具的处理面板中，并进行排版布局，然后利用图像处理工具中包括的美化工具对每个素材进行美化，得到网页页面的设计原文件。设计师将该设计原文件交付给网页开发人员，网页开发人员凭经验编写网页代码，将该设计原文件中包括的每个素材都编写到网页代码中，然后根据网页代码渲染网页页面，以将该设计原文件转换为一个网页页面。
[0004]在实现本发明的过程中，发明人发现现有技术至少存在以下问题:
[0005]由网页开发人员凭经验编写网页代码来生成网页页面，如此受网页开发人员的经验限制，生成网页页面的效率较低且生成的网页页面的质量较差，而且增加了生成网页页面的成本。
【发明内容】
[0006]为了提高生成网页页面的效率，降低生成网页页面的成本，同时保证生成网页页面的质量，本发明提供了一种生成网页页面的方法及装置。所述技术方案如下:
[0007]—种生成网页页面的方法，所述方法包括:
[0008]获取设计原文件的尺寸以及所述设计原文件包括的图层的图层信息；
[0009]获取所述图层包括的素材；
[0010]根据所述设计原文件的尺寸、所述图层的图层信息和所述图层包括的素材，生成网页页面。
[0011]一种生成网页页面的装置，所述装置包括:
[0012]第一获取模块，用于获取设计原文件的尺寸以及所述设计原文件包括的图层的图层?目息;
[0013]第二获取模块，用于获取所述图层包括的素材；
[0014]生成模块，用于根据所述设计原文件的尺寸、所述图层的图层信息和所述图层包括的素材，生成网页页面。
[0015]在本发明实施例中，获取设计原文件的尺寸以及设计原文件包括的图层的图层信息；获取图层包括的素材；根据设计原文件的尺寸、图层的图层信息和图层包括的素材，生成网页页面。由于根据设计原文件的尺寸、设计原文件包括的图层的图层信息以及图层包括的素材，将设计原文件转换为网页页面，来自动生成网页页面，如此提高了生成网页页面的效率，降低了生成网页页面的成本，同时保证了生成网页页面的质量。
【附图说明】
[0016]图1是现有技术提供的一种图层面板的第一TJK意图；
[0017]图2是本发明实施例1提供的一种生成网页页面的方法流程图；
[0018]图3-1是本发明实施例2提供的一种生成网页页面的方法流程图；
[0019]图3-2是本发明实施例2提供的一种图层面板的第二示意图；
[0020]图3-3是本发明实施例2提供的一种最小区域的第一示意图；
[0021]图3-4是本发明实施例2提供的一种最小区域的第二示意图；
[0022]图3-5是本发明实施例2提供的一种网页页面的第一示意图；
[0023]图3-6是本发明实施例2提供的一种网页页面的第二示意图；
[0024]图3-7是本发明实施例2提供的一种网页页面的第三示意图；
[0025]图4是本发明实施例3提供的一种生成网页页面的装置结构示意图；
[0026]图5是本发明实施例4提供的一种终端的结构示意图。
【具体实施方式】
[0027]为使本发明的目的、技术方案和优点更加清楚，下面将结合附图对本发明实施方式作进一步地详细描述。
[0028]为了使生成的网页页面布局合理且美观，设计师首先通过图像处理工具对网页页面包括的所有素材进行排版布局并对每个素材进行美化，得到设计初稿，设计初稿由多个图层组成，每个图层包括至少一个素材。然后设计师通过图像处理工具的图层面板对设计初稿包括的图层进行整理，将整理后的设计初稿保存为设计原文件。
[0029]其中，对设计初稿包括的图层进行整理时，利用图像处理工具中包括的图层面板对设计初稿包括的图层划分层级，将位于同一层级的图层存放在该层级对应的图层文件夹中。其中，层级越大的图层文件夹包括的图层在设计初稿中排在越底层，且图层文件夹相互嵌套，层级大的图层文件夹嵌套在层级小的图层文件夹中。如图1所示，层级4对应的图层文件夹嵌套在层级3对应的图层文件夹中，层级3对应的图层文件夹嵌套在层级2对应的图层文件夹中，层级2对应的图层文件夹嵌套在层级I对应的图层文件夹中，且层级4对应的图层文件夹包括的图层1、2和3排在设计初稿的最底层。
[0030]图像处理工具可以为PhotoShop、Dreamweaver或Flash等，利用PhotoShop对网页页面包括的每个素材进行处理得到的设计原文件为PSD文件，利用Dreamweaver对网页页面包括的每个素材进行处理得到的设计原文件可以为PHP文件或ASP文件等，以及利用Flash对网页页面包括的每个素材进行处理得到的设计原文件为FLA文件。
[0031]在得到设计原文件之后，可以通过如下本发明实施例提供的方法来自动地根据该设计原文件生成网页页面。
[0032]实施例1
[0033]参见图2，本发明实施例提供了一种生成网页页面的方法，包括:
[0034]步骤101:获取设计原文件的尺寸以及设计原文件包括的图层的图层信息；
[0035]步骤102:获取图层包括的素材；
[0036]步骤103:根据设计原文件的尺寸、图层的图层信息和图层包括的素材，生成网页页面。
[0037]优选地，图层信息至少包括图层的序号、类型、图层包括的素材的位置和尺寸；
[0038]获取设计原文件包括的图层的图层信息，包括:
[0039]获取图层中的包括所有素材的最小区域的位置和尺寸；
[0040]将最小区域的位置和尺寸确定为图层包括的素材的位置和尺寸；
[0041]为图层分配序号；
[0042]获取图层的类型属性，根据类型属性获取图层的类型。
[0043]进一步地，如果图层的类型为文字图层，则图层的图层信息还包括图层的样式信息；
[0044]获取设计原文件包括的图层的图层信息，还包括:
[0045]获取图层的样式属性，根据样式属性获取图层的样式信息。
[0046]优选地，获取图层包括的素材，包括:
[0047]如果图层的类型为文字图层，则获取图层中包括的文字内容，将获取的文字内容确定为图层包括的素材；
[0048]如果图层的类型为图像图层，则对图层中的包括所有素材的最小区域进行截图，得到图层对应的截图，将截图确定为图层包括的素材。
[0049]进一步地，获取设计原文件包括的图层的图层信息之前，还包括:
[0050]获取设计原文件包括的每个图层文件夹的层级，将层级大于预设数值的图层文件夹包括的所有图层合并为一个图层。
[0051]优选地，根据设计原文件的尺寸、图层的图层信息和图层包括的素材，生成网页页面，包括:
[0052]根据设计原文件的尺寸创建一个空白的网页页面，空白的网页页面包括一个内容区域，内容区域的尺寸与设计原文件的尺寸相等；
[0053]根据图层的图层信息包括的素材的位置和尺寸，在内容区域中创建图层对应的一个显示区域；
[0054]将图层包括的素材加载到图层对应的显示区域中，以生成网页页面。
[0055]优选地，将图层包括的素材加载到图层对应的显示区域中，包括:
[0056]如果图层的类型为文字图层，则将图层包括的文字内容加载到图层对应的显示区域中，并根据图层的图层信息包括的样式信息设置文字内容的样式；
[0057]如果图层的类型为图像图层，则将图层对应的截图加载到图层对应的显示区域中。
[0058]在本发明实施例中，获取设计原文件的尺寸以及设计原文件包括的图层的图层信息；获取图层包括的素材；根据设计原文件的尺寸、图层的图层信息和图层包括的素