CN103970750A - 一种生成html网页的方法和装置 - Google Patents

Abstract

本发明公开了一种生成HTML网页的方法及装置。所述方法包括如下步骤：读取Photoshop网页设计文件；对读取的所述Photoshop网页设计文件进行解析和识别，获得用于HTML网页的显示的网页要素；根据所识别的所述网页要素生成HTML网页文档和与所述HTML网页文档关联的级联样式表CSS文档。本发明提供的方法和装置不仅大幅提高了网页生成效率，而且能够准确快速地还原Photoshop网页设计文件。

Description

一种生成HTML网页的方法和装置

技术领域

本发明涉及计算机网络领域，尤其涉及一种生成HTML网页的方法和装置。

背景技术

超文本标记语言HTML（Hypertext Markup Language），是用于描述网页文档的一种广泛使用的标记语言，它通过标记符号来标记要显示的网页中的各个部分。而级联样式表CSS（Cascading Style Sheet），则通常用来设计网页的风格（比如，如果想让链接字未点击时是蓝色的，当鼠标移上去后字变成红色的且有下划线，这就是一种风格）。通过设立级联样式表CSS文档，可以统一地控制HTML网页文档中各部分的显示属性，从而方便开发人员更有效地控制网页外观。

基于HTML和CSS技术的商业级网站开发主要有以下的方法：第一种方法，通过可视化编辑工具（例如Adobe Dreamweaver）从网页设计稿获取颜色、位置等信息，再通过拖拽，填充表格等办法制作网页；第二种方法，从网页设计稿获取颜色、位置等信息，手动编辑HTML、CSS生成网页。以上两种方法都存在着实现效率低下、不能准确还原网页设计稿的问题。

发明内容

本发明的目的在于通过一种改进的生成HTML网页的方法和装置，来解决以上背景技术部分提到的问题。

为达此目的，本发明采用以下技术方案：

一种生成HTML网页的方法，所述方法包括如下步骤：

读取Photoshop网页设计文件；

对读取的所述Photoshop网页设计文件进行解析和识别，获得用于HTML网页的显示的网页要素；

根据所识别的所述网页要素生成HTML网页文档和与所述HTML网页文档关联的级联样式表CSS文档。

进一步的，所述网页要素包括网页元素和所述网页元素的属性。

进一步的，所述网页元素包括列表、按钮、图片、文字或者链接；而所述网页元素的属性是对所述网页元素进行描述的信息，包括位置、大小、颜色、内容或者形状。

进一步的，所述对读取的所述Photoshop网页设计文件进行解析和识别包括：根据预先提供的网页元素定义文件来识别各个网页元素并获得所述网页元素的属性。

进一步的，所述网页元素定义文件是对网页元素进行描述的XML文件。

进一步的，所述对读取的所述Photoshop网页设计文件进行解析和识别包括：根据对由Photoshop应用所显示的Photoshop网页设计文件的、用户的点击或拖放动作来识别各个网页元素并获得所述网页元素的属性。

进一步的，所述方法进一步包括在读取Photoshop网页设计文件之前提供通用的HTML网页文档模版和通用的级联样式表CSS文档的步骤；所述根据所识别的所述网页要素生成HTML网页文档和与所述HTML网页文档关联的级联样式表CSS文档包括：把所识别的所述网页要素的数据填充到通用的HTML网页文档模版和通用的级联样式表CSS文档中，从而生成HTML网页文档和与所述HTML网页文档关联的级联样式表CSS文档。

对应地，本发明还提出了一种生成HTML网页的装置，所述装置包括：

读取模块，用于读取Photoshop网页设计文件；

解析和识别模块，用于对读取的所述Photoshop网页设计文件进行解析和识别，获得用于HTML网页的显示的网页要素；

生成模块，用于根据所识别的所述网页要素生成HTML网页文档和与所述HTML网页文档关联的级联样式表CSS文档。

进一步的，所述网页要素包括网页元素和所述网页元素的属性。

进一步的，所述网页元素包括列表、按钮、图片、文字或者链接；而所述网页元素的属性是对所述网页元素进行描述的信息，包括位置、大小、颜色、内容或者形状。

进一步的，所述解析和识别模块包括：根据预先提供的网页元素定义文件来识别各个网页元素并获得所述网页元素的属性。

进一步的，所述网页元素定义文件是对网页元素进行描述的XML文件。

进一步的，所述解析和识别模块包括：根据对由Photoshop应用所显示的Photoshop网页设计文件的、用户的点击或拖放动作来识别各个网页元素并获得所述网页元素的属性。

进一步的，所述装置还包括提供通用的HTML网页文档模版和通用的级联样式表CSS文档的提供模块。

进一步的，所述生成模块包括：把所识别的所述网页要素的数据填充到所述提供模块提供的、通用的HTML网页文档模版和通用的级联样式表CSS文档中从而生成HTML网页文档和与所述HTML网页文档关联的级联样式表CSS文档。

本发明提出的生成HTML网页的方法和装置具有如下特点：借助于Photoshop应用、通过交互式的或者自动化的操作来把Photoshop网页设计文件（PSD格式）转换成HTML网页文档和与所述HTML网页文档关联的级联样式表CSS文档，不仅大幅提高了网页生成效率，而且能够准确无误且快速地还原Photoshop网页设计文件。

附图说明

图1是根据本发明第一实施例的生成HTML网页的方法的实现流程图；

图2a是借助于Photoshop应用所呈现的一个Photoshop网页设计文件的图形界面示意图；

图2b是根据图2a的图形界面上的用户的操作动作所识别的网页元素的示意图；

图3是根据本发明第二实施例的生成HTML网页的方法的实现流程图；

图4是根据本发明第三实施例的生成HTML网页的装置的结构示意图。

具体实施方式

下面结合附图和实施例对本发明作进一步的详细说明。可以理解的是，此处所描述的具体实施例仅仅用于解释本发明，而非对本发明的限定。另外还需要说明的是，为了便于描述，附图中仅示出了与本发明相关的部分而非全部内容。

在图1中示出了本发明的第一实施例。

图1为根据本发明第一实施例的生成HTML网页的方法的实现流程100，该实现流程100详述如下：

在步骤101中，读取Photoshop网页设计文件。

在第一实施例中，可以直接从本地读取Photoshop网页设计人员预先提供的Photoshop网页设计文件，或者可以通过有线网络或者无线网络远程地读取其它位置的Photoshop网页设计文件。

在步骤102中，根据用户指令对读取的所述Photoshop网页设计文件进行解析和识别。

在第一实施例中，通过根据用户所提供的指令来对步骤101中读取的所述Photoshop网页设计文件进行解析和识别，获得用于HTML网页的显示的网页要素。

在本实施例中，所述网页要素包括网页元素和所述网页元素的属性。尤其是，所述网页元素包括但不限于列表、按钮、图片、文字或者链接等；而所述网页元素的属性是对所述网页元素进行描述的信息，包括但不限于位置、大小、颜色、内容或者形状等。

对步骤102的实现具体地通过以下子步骤来进行：

子步骤1021，通过Photoshop应用对读取的Photoshop网页设计文件进行视觉呈现。

视觉呈现的效果如图2a所示，图2a示出了借助于Photoshop应用所呈现的一个Photoshop网页设计文件的图形界面示意图。

子步骤1022，通过用户指令来识别各个网页元素并获得所述网页元素的属性。

在本实施例中，首先识别和分析在上述图形界面上用户的点击或拖放之类的操作动作，接着识别与所述操作动作相对应的网页元素并相应地获取所述网页元素的属性，如图2b所示。其中，图2b示出了根据图2a的图形界面上的用户的操作动作所识别的网页元素的示意图，图中用虚线框示出所识别的网页元素。

在步骤103中，根据所识别的网页要素生成HTML网页文档和级联样式表CSS文档。

在本实施例中，首先把步骤102中识别的网页要素的数据分别地按照HTML网页规定的规则和格式填充到描述HTML网页的代码中以及按照CSS文档规定的规则和格式填充到描述CSS文档的代码中，即分别地生成HTML网页文档和级联样式表CSS文档；接着，将所述HTML网页文档与所述级联样式表CSS文档相链接。

在本实施例的一个优选实施方式中，可以在读取Photoshop网页设计文件之前提供通用的HTML网页文档模版和通用的级联样式表CSS文档。从而，在上述步骤103中可以直接把所识别的所述网页要素的数据填充到通用的HTML网页文档模版和通用的级联样式表CSS文档中，从而生成HTML网页文档和与所述HTML网页文档链接的级联样式表CSS文档。

在图3中示出了本发明的第二实施例。

图3为根据本发明第二实施例的生成HTML网页的方法的实现流程300，该实现流程300详述如下：

在步骤301中，读取Photoshop网页设计文件。

在第三实施例中，可以直接从本地读取Photoshop网页设计人员预先提供的Photoshop网页设计文件，或者可以通过有线网络或者无线网络远程地读取其它位置的Photoshop网页设计文件。

在步骤302中，根据网页元素定义文件对读取的所述Photoshop网页设计文件进行解析和识别。

所述网页元素定义文件可以由用户预先提供，用于对网页元素进行描述和界定。作为一种优选的方式，所述网页元素定义文件是对网页元素进行描述和界定的XML文件。

在获取网页元素定义文件之后，就可以据此自动地对读取的所述Photoshop网页设计文件进行解析和识别，从而获得用于HTML网页的显示的网页要素。

在本实施例中，所述网页要素包括网页元素和所述网页元素的属性。尤其是，所述网页元素包括但不限于列表、按钮、图片、文字或者链接等；而所述网页元素的属性是对所述网页元素进行描述的信息，包括但不限于位置、大小、颜色、内容或者形状等。

在步骤303中，根据所识别的网页要素生成HTML网页文档和级联样式表CSS文档。

在本实施例中，首先把步骤302中识别的网页要素的数据分别地按照HTML网页规定的规则和格式填充到描述HTML网页的代码中以及按照CSS文档规定的规则和格式填充到描述CSS文档的代码中，即分别地生成HTML网页文档和级联样式表CSS文档；接着，将所述HTML网页文档与所述级联样式表CSS文档相链接。

在本实施例的一个优选实施方式中，可以在读取Photoshop网页设计文件之前提供通用的HTML网页文档模版和通用的级联样式表CSS文档。从而，在上述步骤303中可以直接把所识别的所述网页要素的数据填充到通用的HTML网页文档模版和通用的级联样式表CSS文档中，从而生成HTML网页文档和与所述HTML网页文档链接的级联样式表CSS文档。

从图3中可以看出，与第一实施例不同的是，在第二实施例中的步骤302是根据网页元素定义文件而不是用户指令对读取的所述Photoshop网页设计文件进行解析和识别。这样操作的好处在于可以自动地进行解析和识别处理而免于用户的手动干预，从而进一步提高了生成网页的效率。在本发明的其它实施例中，还可以将根据网页元素定义文件的自动解析和识别与借助于用户指令的解析和识别这两种方式结合起来，从而有助于进一步提高网页要素识别的准确率。

图4示出了本发明的第三实施例。

图4为根据本发明第三实施例的一种生成HTML网页的装置的结构示意图。如图4所示，根据本实施例的生成HTML网页的装置400包括读取模块401、解析和识别模块402和生成模块403。其中，所述读取模块401用于读取Photoshop网页设计文件；所述解析和识别模块402用于对读取的所述Photoshop网页设计文件进行解析和识别，以便获得用于HTML网页的显示的网页要素；生成模块403用于根据所识别的所述网页要素生成HTML网页文档和与所述HTML网页文档关联的级联样式表CSS文档。

在本实施例中，所述读取模块401可以直接从本地读取Photoshop网页设计人员预先提供的Photoshop网页设计文件，或者可以通过有线网络或者无线网络远程地读取其它位置的Photoshop网页设计文件。

在本实施例中，所述解析和识别模块402可以通过根据用户所提供的指令来对所述读取模块401读取的所述Photoshop网页设计文件进行解析和识别，从而获得用于HTML网页的显示的网页要素。例如，所述解析和识别模块402根据对由Photoshop应用所显示的Photoshop网页设计文件的、用户的点击或拖放动作来识别网页要素。在其它实施例中，所述解析和识别模块402还可以根据网页元素定义文件对所述读取模块401读取的所述Photoshop网页设计文件进行解析和识别。其中，所述网页元素定义文件可以由用户预先提供，用于对网页元素进行描述和界定。作为一种优选的方式，所述网页元素定义文件是对网页元素进行描述和界定的XML文件。

在此所述的网页要素包括网页元素和所述网页元素的属性。尤其是，所述网页元素包括但不限于列表、按钮、图片、文字或者链接等；而所述网页元素的属性是对所述网页元素进行描述的信息，包括但不限于位置、大小、颜色、内容或者形状等。

在本实施例中，所述解析和识别模块402将所获得的网页要素的数据传送到所述生成模块403。此后，生成模块403首先把上述数据分别地按照HTML网页规定的规则和格式填充到描述HTML网页的代码中以及按照CSS文档规定的规则和格式填充到描述CSS文档的代码中，即分别地生成HTML网页文档和级联样式表CSS文档；接着，生成模块403将所述HTML网页文档与所述级联样式表CSS文档相链接。

在本实施例的一个优选实施方式中，所述装置400进一步包括提供通用的HTML网页文档模版和通用的级联样式表CSS文档的提供模块（未示出）。由此，所述生成模块403可以直接把所识别的所述网页要素的数据填充到所述提供模块提供的、通用的HTML网页文档模版和通用的级联样式表CSS文档中从而生成HTML网页文档和与所述HTML网页文档关联的级联样式表CSS文档。

本发明所述的技术方案能够借助于Photoshop应用、通过交互式的或者自动化的操作来把PSD格式的Photoshop网页设计文件转换成HTML网页文档和与所述HTML网页文档关联的级联样式表CSS文档，不仅大幅提高了网页生成效率，而且能够准确无误且快速地还原Photoshop网页设计文件

注意，上述仅为本发明的较佳实施例及所运用技术原理。本领域技术人员会理解，本发明不限于这里所述的特定实施例，对本领域技术人员来说能够进行各种明显的变化、重新调整和替代而不会脱离本发明的保护范围。因此，虽然通过以上实施例对本发明进行了较为详细的说明，但是本发明不仅仅限于以上实施例，在不脱离本发明构思的情况下，还可以包括更多其他等效实施例，而本发明的范围由所附的权利要求范围决定。

Claims (15)

1.一种生成HTML网页的方法，其特征在于，所述方法包括如下步骤：

读取Photoshop网页设计文件；

对读取的所述Photoshop网页设计文件进行解析和识别，获得用于HTML网页的显示的网页要素；

根据所识别的所述网页要素生成HTML网页文档和与所述HTML网页文档关联的级联样式表CSS文档。

2.根据权利要求1所述的生成HTML网页的方法，其特征在于，所述网页要素包括网页元素和所述网页元素的属性。

3.根据权利要求2所述的生成HTML网页的方法，其特征在于，所述网页元素包括列表、按钮、图片、文字或者链接；而所述网页元素的属性是对所述网页元素进行描述的信息，包括位置、大小、颜色、内容或者形状。

4.根据权利要求2所述的生成HTML网页的方法，其特征在于，所述对读取的所述Photoshop网页设计文件进行解析和识别包括：根据预先提供的网页元素定义文件来识别各个网页元素并获得所述网页元素的属性。

5.根据权利要求4所述的生成HTML网页的方法，其特征在于，所述网页元素定义文件是对网页元素进行描述的XML文件。

6.根据权利要求2所述的生成HTML网页的方法，其特征在于，所述对读取的所述Photoshop网页设计文件进行解析和识别包括：根据对由Photoshop应用所显示的Photoshop网页设计文件的、用户的点击或拖放动作来识别各个网页元素并获得所述网页元素的属性。

7.根据权利要求2所述的生成HTML网页的方法，其特征在于，所述方法进一步包括在读取Photoshop网页设计文件之前提供通用的HTML网页文档模版和通用的级联样式表CSS文档的步骤；所述根据所识别的所述网页要素生成HTML网页文档和与所述HTML网页文档关联的级联样式表CSS文档包括：把所识别的所述网页要素的数据填充到通用的HTML网页文档模版和通用的级联样式表CSS文档中，从而生成HTML网页文档和与所述HTML网页文档关联的级联样式表CSS文档。

8.一种生成HTML网页的装置，其特征在于，所述装置包括：

读取模块，用于读取Photoshop网页设计文件；

解析和识别模块，用于对读取的所述Photoshop网页设计文件进行解析和识别，获得用于HTML网页的显示的网页要素；

生成模块，用于根据所识别的所述网页要素生成HTML网页文档和与所述HTML网页文档关联的级联样式表CSS文档。

9.根据权利要求8所述的生成HTML网页的装置，其特征在于，所述网页要素包括网页元素和所述网页元素的属性。

10.根据权利要求9所述的生成HTML网页的装置，其特征在于，所述网页元素包括列表、按钮、图片、文字或者链接；而所述网页元素的属性是对所述网页元素进行描述的信息，包括位置、大小、颜色、内容或者形状。

11.根据权利要求9所述的生成HTML网页的装置，其特征在于，所述解析和识别模块进一步包括：根据预先提供的网页元素定义文件来识别各个网页元素并获得所述网页元素的属性。

12.根据权利要求11所述的生成HTML网页的装置，其特征在于，所述网页元素定义文件是对网页元素进行描述的XML文件。

13.根据权利要求9所述的生成HTML网页的装置，其特征在于，所述解析和识别模块进一步包括：根据对由Photoshop应用所显示的Photoshop网页设计文件的、用户的点击或拖放动作来识别各个网页元素并获得所述网页元素的属性。

14.根据权利要求9所述的生成HTML网页的装置，其特征在于，所述装置进一步包括：提供模块，用于提供通用的HTML网页文档模版和通用的级联样式表CSS文档。

15.根据权利要求14所述的生成HTML网页的装置，其特征在于，所述生成模块进一步包括：把所识别的所述网页要素的数据填充到所述提供模块提供的、通用的HTML网页文档模版和通用的级联样式表CSS文档中从而生成HTML网页文档和与所述HTML网页文档关联的级联样式表CSS文档。