CN113010832A - 适用于机顶盒端的静态网页的开发方法和装置以及服务器 - Google Patents

Abstract

本发明公开了一种适用于机顶盒端的静态网页的开发方法和装置以及服务器，属于网页开发领域；在获取适用于机顶盒端的网页设计图后，根据网页设计图的标识自动生成html文件和css文件，无需编程人员手动编写，降低出错几率，然后将css文件引入到html文件中生成静态网页。本申请方案只需要获取网页设计图后就可以生成静态网页，节约了编程人员编写html文件和css文件的时间，大大增加了开发效率，降低了开发成本。

Description

适用于机顶盒端的静态网页的开发方法和装置以及服务器

技术领域

本发明涉及网页开发技术，特别地，涉及一种适用于机顶盒端的静态网页的开发方法和装置以及服务器。

背景技术

html+css的布局方式有多种，如浮动布局、绝对定位布局、flex布局、table-cell表格布局、网格布局等。但是由于机顶盒型号的多样性，和性能的不确定性，所以以上所提布局方式中机顶盒端一般只支持一小部分的布局方式。因为绝对定位布局兼容性好，加之机顶盒端网页分辨率都是固定值，所以做机顶盒端的前端开发常用绝对定位布局来开发前端网页。

但是传统的开发方式都是先确定网页设计图，然后编程人员根据网页设计图编写html文件和css文件，以生成静态网页。但是由编程人员编写html文件和css文件，容易出错，编写速度慢，开发成本高。

发明内容

为了克服现有技术的不足，本发明提供一种适用于机顶盒端的静态网页的开发方法和装置以及服务器，以解决由编程人员编写html文件和css文件的传统开发方式，容易出错，编写速度慢，编写成本高。

本发明解决其技术问题所采用的技术方案是：

第一方面，

一种适用于机顶盒端的静态网页的开发方法，包括以下步骤：

获取适用于所述机顶盒端的网页设计图，所述网页设计图中需要识别部分设有标识；

根据所述网页设计图的标识生成html文件和css文件；

将所述css文件引入到所述html文件中生成静态网页。

进一步地，所述根据所述网页设计图的标识生成html文件和css文件包括：

当获取到所述网页设计图后，创建一个基础的html文件和css文件；

采用图像识别技术识别所有标识；

根据识别到的标识完善所述html文件和css文件。

进一步地，所述根据识别到的标识完善所述html文件和css文件包括：

当识别到任意一个标识时，生成一个div标签元素；

计算所述div标签元素的大小和位置；

根据所述div标签元素的大小和位置完善所述html文件和css文件。

进一步地，所述计算所述div标签元素的大小和位置包括：

将所述div标签元素加载到基础的html文件中；

计算得到所述div标签元素的宽和高以及距离网页顶部和最左边的距离，即所述div的大小和位置。

进一步地，所述将所述div标签元素加载到基础的html文件中包括：

为所述div标签元素生成一个img子元素和class属性；

将所述div标签元素和img子元素加载到基础的html文件的body标签中。

进一步地，所述根据所述div标签元素的大小和位置完善所述html文件和css文件包括：

采用class选择器的方式将所述div的标签元素的大小和位置写入到基础的css文件中。

进一步地，所述将所述css文件引入到所述html文件中生成静态网页包括：

为所述html文件添加link标签，将所述css文件引入到html文件中。

进一步地，所述网页设计图中需要识别部分用采用不同颜色做标识。

第二方面，

一种适用于机顶盒端的静态网页的开发装置，包括：

网页设计图获取模块，用于获取适用于所述机顶盒端的网页设计图，所述网页设计图中需要识别部分设有标识；

html和css生成模块，用于根据所述网页设计图的标识生成html文件和css文件；

静态网页生成模块，用于将所述css文件引入到所述html文件中生成静态网页。

第三方面，

一种服务器，包括：

处理器；以及，

用于存储所述处理器可执行指令的存储器；

所述处理器被配置为：

获取适用于机顶盒端的网页设计图，所述网页设计图中需要识别部分设有标识；

根据所述网页设计图的标识生成html文件和css文件；

将所述css文件引入到所述html文件中生成静态网页。

本申请采用以上技术方案，至少具备以下有益效果：

本申请技术方案提供一种适用于机顶盒端的静态网页的开发方法和装置以及服务器，在获取适用于机顶盒端的网页设计图后，根据网页设计图的标识自动生成html文件和css文件，无需编程人员手动编写，降低出错几率，然后将css文件引入到html文件中生成静态网页。本申请方案只需要获取网页设计图后就可以生成静态网页，节约了编程人员编写html文件和css文件的时间，大大增加了开发效率，降低了开发成本。

附图说明

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

图1是本发明实施例提供的一种适用于机顶盒端的静态网页的开发方法流程图；

图2是本发明实施例提供的一种应用开发方法的系统的工作流程图；

图3是本发明实施例提供的一种适用于机顶盒端的静态网页的开发装置的结构框图；

图4是本发明实施例提供的一种服务器结构示意图。

具体实施方式

为使本申请的目的、技术方案和优点更加清楚，下面结合附图和实施例对本发明的技术方案进行详细的描述说明。显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动的前提下所得到的所有其它实施方式，都属于本申请所保护的范围。

参照图1，本发明实施例提供一种适用于机顶盒端的静态网页的开发方法，包括以下步骤：

获取适用于机顶盒端的网页设计图，网页设计图中需要识别部分设有标识；

根据网页设计图的标识生成html文件和css文件；

将css文件引入到html文件中生成静态网页。

本发明实施例提供的一种适用于机顶盒端的静态网页的开发方法，在获取适用于机顶盒端的网页设计图后，根据网页设计图的标识自动生成html文件和css文件，无需编程人员手动编写，降低出错几率，然后将css文件引入到html文件中生成静态网页。本发明实施例的方法只需要获取网页设计图后就可以生成静态网页，节约了编程人员编写html文件和css文件的时间，大大增加了开发效率，降低了开发成本。

作为对上述实施例的一种补充说明，当获取到网页设计图后，创建一个基础的html文件和css文件；采用图像识别技术识别所有标识；根据识别到的标识完善html文件和css文件。可以理解的是，创建一个只具有基本结构的html文件和css文件，然后更图像识别技术晚上html文件和css文件，优选的，图像识别技术采用opencv技术。

作为本发明实施例一种可选的实现方式，根据识别到的标识完善html文件和css文件包括：

当识别到任意一个标识时，生成一个div标签元素；

计算div标签元素的大小和位置；具体地，将为div标签元素生成一个img子元素和class属性；将div标签元素和img子元素加载到基础的html文件的body标签中；计算得到div标签元素的宽和高以及距离网页顶部和最左边的距离，即div的大小和位置。

根据div标签元素的大小和位置完善html文件和css文件。具体地，采用class选择器的方式将div的标签元素的大小和位置写入到基础的css文件中。

其中，将css文件引入到html文件中生成静态网页包括：为html文件添加link标签，将css文件引入到html文件中。

在实际开发过程中，：网页设计图中需要识别部分用采用不同颜色做标识。

为了更具体的说明本发明的方案，下面提供一种应用该开发方法的系统的工作流程，如图2所示：

1)上传网页设计图到系统；

2)上传完成后系统，首系统会自动创建一个基础的html文件(如index.html)，和css文件(如index.css)

3)系统将用图像识别技术识别设计图中固定区域，如海报位、按钮等，为了便于识别，设计图上需要识别部分用特殊颜色做标识，当识别到要识别的位置后生成一个div标签元素，并为该div生成一个img子元素和class属性(如class属性为class＝”div1”)。然后将该div元素和img子元素加载到index.html的body标签中，计算出该div的宽高以及距离网页顶部和最左边的距离，用class选择器的方式将该div的宽高和位置写入到index.css文件中(如：.div1{position:absolute；width:xxxpx；height:xxxpx；top:xxxpx；left:xxxpx；})

4)依照第3步的方式系统将识别设计图中所有需要识别的位置后生成完整的index.html和index.css,然后给index.html添加link标签，将index.css引入到index.html中。静态网页完成。

本发明实施例提供的静系统，通过图像识别技术，将网页设计图直接转换成html标记语言和css语言。利用该系统，前端人员不再需要手动书写html静态页，将更多的精力放在前端动态化上。

一个实施例中，本发明提供一种适用于机顶盒端的静态网页的开发装置，如图3所示，包括：

网页设计图获取模块31，用于获取适用于机顶盒端的网页设计图，网页设计图中需要识别部分设有标识；其中，网页设计图中需要识别部分用采用不同颜色做标识。

html和css生成模块32，用于根据网页设计图的标识生成html文件和css文件；具体地，html和css生成模块创建一个基础的html文件和css文件；采用图像识别技术识别所有标识；当识别到任意一个标识时，生成一个div标签元素；为div标签元素生成一个img子元素和class属性；将div标签元素和img子元素加载到基础的html文件的body标签中；计算得到div标签元素的宽和高以及距离网页顶部和最左边的距离，即div的大小和位置；采用class选择器的方式将div的标签元素的大小和位置写入到基础的css文件中。

静态网页生成模块33，用于将css文件引入到html文件中生成静态网页。具体地，静态网页生成模块为html文件添加link标签，将css文件引入到html文件中。

本发明实施例提供的一种适用于机顶盒端的静态网页的开发装置，网页设计图获取模块获取适用于机顶盒端的网页设计图；html和css生成模块根据网页设计图的标识生成html文件和css文件；静态网页生成模块将css文件引入到html文件中生成静态网页。本发明实施例提供的开发装置能够根据网页设计图自动生成静态网页，无需编程人员手动编写html文件和css文件，大大加快了网页开发速度，节约了网页开发成本。

一个实施例中，本发明还提供一种服务器，如图4所示，包括：

处理器41；以及，

用于存储处理器可执行指令的存储器42；

处理器被配置为：

获取适用于机顶盒端的网页设计图，网页设计图中需要识别部分设有标识；网页设计图中需要识别部分用采用不同颜色做标识。

根据网页设计图的标识生成html文件和css文件；具体地，创建一个基础的html文件和css文件；采用图像识别技术识别所有标识；当识别到任意一个标识时，生成一个div标签元素；为div标签元素生成一个img子元素和class属性；将div标签元素和img子元素加载到基础的html文件的body标签中；计算得到div标签元素的宽和高以及距离网页顶部和最左边的距离，即div的大小和位置；采用class选择器的方式将div的标签元素的大小和位置写入到基础的css文件中。

将css文件引入到html文件中生成静态网页。具体地，为html文件添加link标签，将css文件引入到html文件中。

本发明实施例提供的服务器，提供存储器存储可执行指令，处理器执行可执行指令，完成静态网页开发任务，只根据网页设计图就可以得到静态网页，无需编程人员手动编写html文件和css文件，不容易出错，而且大大加快了网页开发的速度，节约了开发成本。

可以理解的是，上述各实施例中相同或相似部分可以相互参考，在一些实施例中未详细说明的内容可以参见其他实施例中相同或相似的内容。

需要说明的是，在本申请的描述中，术语“第一”、“第二”等仅用于描述目的，而不能理解为指示或暗示相对重要性。此外，在本申请的描述中，除非另有说明，“多个”的含义是指至少两个。

流程图中或在此以其他方式描述的任何过程或方法描述可以被理解为，表示包括一个或更多个用于实现特定逻辑功能或过程的步骤的可执行指令的代码的模块、片段或部分，并且本申请的优选实施方式的范围包括另外的实现，其中可以不按所示出或讨论的顺序，包括根据所涉及的功能按基本同时的方式或按相反的顺序，来执行功能，这应被本申请的实施例所属技术领域的技术人员所理解。

应当理解，本申请的各部分可以用硬件、软件、固件或它们的组合来实现。在上述实施方式中，多个步骤或方法可以用存储在存储器中且由合适的指令执行系统执行的软件或固件来实现。例如，如果用硬件来实现，和在另一实施方式中一样，可用本领域公知的下列技术中的任一项或他们的组合来实现：具有用于对数据信号实现逻辑功能的逻辑门电路的离散逻辑电路，具有合适的组合逻辑门电路的专用集成电路，可编程门阵列(PGA)，现场可编程门阵列(FPGA)等。

本技术领域的普通技术人员可以理解实现上述实施例方法携带的全部或部分步骤是可以通过程序来指令相关的硬件完成，所述的程序可以存储于一种计算机可读存储介质中，该程序在执行时，包括方法实施例的步骤之一或其组合。

此外，在本申请各个实施例中的各功能单元可以集成在一个处理模块中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个模块中。上述集成的模块既可以采用硬件的形式实现，也可以采用软件功能模块的形式实现。所述集成的模块如果以软件功能模块的形式实现并作为独立的产品销售或使用时，也可以存储在一个计算机可读取存储介质中。

上述提到的存储介质可以是只读存储器，磁盘或光盘等。

在本说明书的描述中，参考术语“一个实施例”、“一些实施例”、“示例”、“具体示例”、或“一些示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本申请的至少一个实施例或示例中。在本说明书中，对上述术语的示意性表述不一定指的是相同的实施例或示例。而且，描述的具体特征、结构、材料或者特点可以在任何的一个或多个实施例或示例中以合适的方式结合。

尽管上面已经示出和描述了本申请的实施例，可以理解的是，上述实施例是示例性的，不能理解为对本申请的限制，本领域的普通技术人员在本申请的范围内可以对上述实施例进行变化、修改、替换和变型。

Claims (10)

1.一种适用于机顶盒端的静态网页的开发方法，其特征在于，包括以下步骤：

获取适用于所述机顶盒端的网页设计图，所述网页设计图中需要识别部分设有标识；

根据所述网页设计图的标识生成html文件和css文件；

将所述css文件引入到所述html文件中生成静态网页。

2.根据权利要求1所述的方法，其特征在于：所述根据所述网页设计图的标识生成html文件和css文件包括：

当获取到所述网页设计图后，创建一个基础的html文件和css文件；

采用图像识别技术识别所有标识；

根据识别到的标识完善所述html文件和css文件。

3.根据权利要求2所述的方法，其特征在于：所述根据识别到的标识完善所述html文件和css文件包括：

当识别到任意一个标识时，生成一个div标签元素；

计算所述div标签元素的大小和位置；

根据所述div标签元素的大小和位置完善所述html文件和css文件。

4.根据权利要求3所述的方法，其特征在于：所述计算所述div标签元素的大小和位置包括：

将所述div标签元素加载到基础的html文件中；

计算得到所述div标签元素的宽和高以及距离网页顶部和最左边的距离，即所述div的大小和位置。

5.根据权利要求4所述的方法，其特征在于：所述将所述div标签元素加载到基础的html文件中包括：

为所述div标签元素生成一个img子元素和class属性；

将所述div标签元素和所述img子元素加载到基础的html文件的body标签中。

6.根据权利要求5所述的方法，其特征在于：所述根据所述div标签元素的大小和位置完善所述html文件和css文件包括：

采用class选择器的方式将所述div的标签元素的大小和位置写入到基础的css文件中。

7.根据权利要求1所述的方法，其特征在于：所述将所述css文件引入到所述html文件中生成静态网页包括：

为所述html文件添加link标签，将所述css文件引入到html文件中。

8.根据权利要求1所述的方法，其特征在于：所述网页设计图中需要识别部分用采用不同颜色做标识。

9.一种适用于机顶盒端的静态网页的开发装置，其特征在于，包括：

网页设计图获取模块，用于获取适用于所述机顶盒端的网页设计图，所述网页设计图中需要识别部分设有标识；

html和css生成模块，用于根据所述网页设计图的标识生成html文件和css文件；

静态网页生成模块，用于将所述css文件引入到所述html文件中生成静态网页。

10.一种服务器，其特征在于，包括：

处理器；以及，

用于存储所述处理器可执行指令的存储器；

所述处理器被配置为：

获取适用于机顶盒端的网页设计图，所述网页设计图中需要识别部分设有标识；

根据所述网页设计图的标识生成html文件和css文件；

将所述css文件引入到所述html文件中生成静态网页。

Images