CN107133035A - 响应式网页生成方法和装置 - Google Patents

Abstract

本发明涉及一种响应式网页生成方法和装置，包括：基于流式布局显示设计区；获取拖拽指令，响应所述拖拽指令，在所述设计区内显示区块；获取对所述区块的设置指令，根据所述设置指令获取区块参数；根据所述区块参数，生成HTML文件、JS文件和CSS文件；根据所述HTML文件、所述JS文件和所述CSS文件生成网页。上述实施例中，通过拖拽指令将区块拖拽至设计区并显示，通过对区块的设置指令获取到区块的区块参数，从而根据区块参数生成网页，而无需对网页进行复杂的样式设计以及编程，使得响应式网页生成更为便捷，有效降低了网页开发难度，降低了人力成本和时间成本。

Description

响应式网页生成方法和装置

技术领域

本发明涉及互联网技术领域，特别是涉及响应式网页生成方法和装置。

背景技术

响应式网站能够智能地根据用户行为以及使用的设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相对应的布局，响应式网站已经成为时下热门的网站架构。

传统响应式网页开发难度较大，往往需要耗费较高的人力成本和时间成本。

发明内容

基于此，有必要针对传统响应式网页开发难度较大，往往需要耗费较高的人力成本和时间成本的缺陷，提供一种响应式网页生成方法和装置。

一种响应式网页生成方法，包括：

基于流式布局显示设计区；

获取拖拽指令，响应所述拖拽指令，在所述设计区内显示区块；

获取对所述区块的设置指令，根据所述设置指令获取区块参数；

根据所述区块参数，生成HTML文件、JS文件和CSS文件；

根据所述HTML文件、所述JS文件和所述CSS文件生成网页。

在其中一个实施例中，所述获取拖拽指令，响应所述拖拽指令，在所述设计区内显示区块的步骤包括：

获取拖拽指令；

获取基本参数；

响应所述拖拽指令，根据所述基本参数在所述设计区内显示所述区块。

在其中一个实施例中，所述区块参数包括特效参数；

所述获取对所述区块的设置指令，根据所述设置指令获取区块参数的步骤包括：

获取对所述区块的下拉框的下拉指令；

根据所述下拉指令获取所述特效参数。

在其中一个实施例中，所述区块参数还包括表单参数；

所述获取对所述区块的设置指令，根据所述设置指令获取区块参数的步骤还包括：

创建表单；

获取对所述表单的表单指令；

根据所述表单指令获取所述表单参数。

在其中一个实施例中，所述生成HTML文件、JS文件和CSS文件的步骤之后还包括：

输出包含所述HTML文件、所述JS文件和所述CSS文件的文本文件，并保存所述文本文件。

一种响应式网页生成装置，包括：

设计区显示模块，用于基于流式布局显示设计区；

区块显示模块，用于获取拖拽指令，响应所述拖拽指令，在所述设计区内显示区块；

区块参数获取模块，用于获取对所述区块的设置指令，根据所述设置指令获取区块参数；

文件生成模块，用于根据所述区块参数，生成HTML文件、JS文件和CSS文件；

网页生成模块，用于根据所述HTML文件、所述JS文件和所述CSS文件生成网页。

在其中一个实施例中，所述区块显示模块包括：

拖拽指令获取单元，用于获取拖拽指令；

基本参数获取单元，用于获取基本参数；

区块显示单元，用于响应所述拖拽指令，根据所述基本参数在所述设计区内显示所述区块。

在其中一个实施例中，所述区块参数包括特效参数；

所述区块参数获取模块包括：

下拉指令获取单元，用于获取对所述区块的下拉框的下拉指令；

特效参数获取单元，用于根据所述下拉指令获取所述特效参数。

在其中一个实施例中，所述区块参数还包括表单参数；

所述区块参数获取模块还包括：

表单创建单元，用于创建表单；

表单指令获取单元，用于获取对所述表单的表单指令；

表单参数获取单元，用于根据所述表单指令获取所述表单参数。

在其中一个实施例中，还包括：

文件保存模块，用于输出包含所述HTML文件、所述JS文件和所述CSS文件的文本文件，并保存所述文本文件。

上述响应式网页生成方法和装置，通过拖拽指令将区块拖拽至设计区并显示，通过对区块的设置指令获取到区块的区块参数，从而根据区块参数生成网页，而无需对网页进行复杂的样式设计以及编程，使得响应式网页生成更为便捷，有效降低了网页开发难度，降低了人力成本和时间成本。

附图说明

图1A为一实施例的响应式网页生成方法的流程示意图；

图1B为另一实施例的响应式网页生成方法的流程示意图；

图1C为另一实施例的响应式网页生成方法的流程示意图；

图1D为另一实施例的响应式网页生成方法的流程示意图；

图1E为另一实施例的响应式网页生成方法的流程示意图；

图2A为一实施例的响应式网页生成装置的功能模块图；

图2B为一实施例的区块显示模块的功能模块图；

图2C为一实施例的区块参数获取模块的功能模块图；

图2D为另一实施例的区块参数获取模块的功能模块图；

图2E为另一实施例的响应式网页生成装置的功能模块图。

具体实施方式

为了便于理解本发明，下面将参照相关附图对本发明进行更全面的描述。附图中给出了本发明的较佳实施例。但是，本文可以以许多不同的形式来实现，并不限于本文所描述的实施例。相反地，提供这些实施例的目标是使对本发明的公开内容的理解更加透彻全面。

例如，一种响应式网页生成方法，包括：基于流式布局显示设计区；获取拖拽指令，响应所述拖拽指令，在所述设计区内显示区块；获取对所述区块的设置指令，根据所述设置指令获取区块参数；根据所述区块参数，生成HTML文件、JS文件和CSS文件；根据所述HTML文件、所述JS文件和所述CSS文件生成网页。

上述实施例中，通过拖拽指令将区块拖拽至设计区并显示，通过对区块的设置指令获取到区块的区块参数，从而根据区块参数生成网页，而无需对网页进行复杂的样式设计以及编程，使得响应式网页生成更为便捷，有效降低了网页开发难度，降低了人力成本和时间成本。

在一个实施例中，如图1A所示，提供一种响应式网页生成方法，包括：

步骤102，基于流式布局显示设计区。

具体地，流式布局中，网页的元素之间采用相对定位方式进行定位，即一个网页元素的位置依赖于相邻网页元素的位置和尺寸，例如，流式布局中，目标网页元素尺寸/相邻网页元素尺寸＝百分比尺寸；其中，相邻网页元素可以为上下文的网页元素或者左右文的网页元素；例如，全部网页元素的位置和尺寸相互限制以适合网页；又如，某一网页元素的位置和尺寸确定，其他网页元素的位置顺序依赖于确定位置和尺寸的网页元素且相互限制以适合网页；本实施例中的尺寸可以是像素距离或者是像素长度，其基于网页元素的基本单位而设定。

设计区在本实施例中，可以是工作区或者测试区，其用于显示区块，并用于划分网页的不同显示区域。例如，显示界面显示若干设计区，例如，在显示界面显示若干设计区，例如，在显示界面显示若干大小均一的设计区，例如，在显示界面显示若干位置相异且尺寸相异的设计区，例如，设计区还包括工具区，例如，工具区内显示若干控件，例如，控件用于接收操作指令。通过将网页的显示界面划分为多个设计区，并通过工具区的控件接收操作指令，能够提高对各显示界面的设计效率。

为了使得网页设计更为灵活，例如，基于流失布局和相对单位显示设计区，具体地，相对单位即网页元素的尺寸基于预定义的尺寸大小，或者说网页元素的尺寸基于预定义的像素单元，其可以包含一个或者多个像素，即一个相对单位可以是一个像素，也可以是多个像素，而并不是基于原始的像素单元，即该相对单位也可以视为相对尺寸，该相对尺寸可以基于网页中某一元素而预设，这样，通过相对单元，使得网页元素的尺寸设计和显示更为灵活，便于对网页的设计和开发。

步骤104，获取拖拽指令，响应所述拖拽指令，在所述设计区内显示区块。

具体地，显示区块为DIV(DIVision，层叠样式表中的定位技术)区块，其可定义网页中的分区或节。例如，工具区内设置有DIV控件，例如，该DIV控件的使用方式为拖拽，例如，该DIV控件的激活方式为拖拽，例如，该DIV空间用于在激活后显示区块。例如，响应所述拖拽指令，在所述设计区内的预设区域内显示区块，例如，该预设区域为拖拽指令对应的设计区，例如，该预设区域为目标区域，例如，该预设区域为拖拽指令的目标区域，具体地，该拖拽指令由鼠标执行，当获取到DIV控件的点击指令后，DIV控件随着鼠标的移动而移动，当鼠标移动至目标区域并释放点击指令后，鼠标对应的目标区域即DIV控件的预设区域，则在该预设区域显示区块。

通过拖拽指令，还能够获取区块的属性，例如，获取包括区块名称、区块的显示位置、区块的相对位置、相对宽度、相对高度以及相对网格占用比例等属性，例如，获取输入指令，获取区块名称，例如，通过键盘接收到的输入指令，获取区块名称，例如，通过拖拽指令的目标区域获取区块的显示位置；例如，通过拖拽指令的目标区域获取区块的相对宽度和相对高度，具体地，通过对区块的边界的拖拽，可以使得区块放大或缩小，进而获取区块的相对宽度和相对高度。

通过拖拽指令作用于区块对应地DIV控件，并根据该拖拽指令在设计区的预设区域显示区块，使得区块的显示更为便捷，而区块显示后也便于编辑和操作，进一步提高设计效率。

步骤106，获取对所述区块的设置指令，根据所述设置指令获取区块参数。

具体地，在区块被拖拽至设计区后，通过对区块的操作，可以方便地获取区块的设置指令，根据该设置指令则可以获取到区块参数，该区块参数用于对区块的各项参数进行设定或者限定，进而使得区块的显示更为完整。例如，区块参数包括基本参数、特效参数、高级参数以及媒体查询。

通过获取对区块的设置指令，使得区块的区块参数获取更为方便快捷，而无需对区块的各项参数进行编辑和编程，有效提高了区块的设计效率。

步骤108，根据所述区块参数，生成HTML文件、JS文件和CSS文件。

例如，在各设计区分别显示一区块，例如，获取每一区块的区块参数，例如，获取多个区块参数，根据多个区块参数，生成HTML(Hyper Text Markup Language，超文本标记语言)文件、JS(JavaScript，一种直译式脚本语言)文件和CSS(Cascading Style Sheets，层叠样式表)文件，具体地，本实施例中，网页生成器将区块参数转换为对应的HTML文件、JS文件和CSS文件的语句，并生成对应的HTML文件、JS文件和CSS文件。

步骤110，根据所述HTML文件、所述JS文件和所述CSS文件生成网页。

本实施例中，根据HTML文件、JS文件和CSS文件生成网页，例如，网页生成器根据HTML文件、JS文件和CSS文件生成网页。例如，获取生成控件的点击指令，根据HTML文件、JS文件和CSS文件生成网页。例如，该网页生成器设置有生成按钮(生成控件)，接收到用户对生成按钮的点击指令，网页生成器根据已生成的HTML文件、JS文件和CSS文件，生成网页，从而实现了响应式网页的生成。

上述实施例中，通过拖拽指令将区块拖拽至设计区并显示，通过对区块的设置指令获取到区块的区块参数，从而根据区块参数生成网页，而无需对网页进行复杂的样式设计以及编程，使得响应式网页生成更为便捷，有效降低了网页开发难度，降低了人力成本和时间成本。

为了更好地显示区块，在一个实施例中，如图1B所示，步骤104包括：

步骤104a，获取拖拽指令。

步骤104b，获取基本参数。

步骤104c，响应所述拖拽指令，根据所述基本参数在所述设计区内显示所述区块。

例如，基本参数即为基本属性，例如，该基本参数包括位置参数、相对位置参数、相对宽度、相对高度以及网格占用比例，其用于定义区块的基本属性，定义了区块的大小、位置以及比例，使得区块能够完整地显示，

本实施例中，通过插件easyUI的函数draggble实现拖拽功能，将上述函数关联DIV即可实现DIV区块的拖拽释放，进而使得DIV控件得以拖拽，进而在设计区内的预设区域显示区块。例如，获取拖拽指令，调用插件easyUI的函数draggble，根据所述基本参数在所述设计区内显示所述区块。

为了更好地显示区块，使得区块具有动态效果，在一个实施例中，所述区块参数包括特效参数。本实施例中，如图1C所示，步骤106包括：

步骤106a，获取对所述区块的下拉框的下拉指令。

步骤106b，根据所述下拉指令获取所述特效参数。

例如，显示区块，并在区块内创建下拉框，显示下拉框，获取对下拉框的下拉指令，获取相应特效参数，例如，在下拉框中显示若干下拉属性选项，获取对下拉属性选项的选择指令或点击指令，获取下拉属性，进而获取对应的特效参数，例如，该特效参数即特效属性，其在下拉框中以拉下属性选项的形式体现。

例如，在区块内创建若干下拉框，例如，在区块内显示若干下拉框，例如，各下拉框分别显示若干下拉属性选项，不同的下拉框用于显示不同类型的特效属性。通过下拉框的下拉指令以及选择指令或点击指令，获取特效参数，进而使得区块在显示时，具有特效，具有动态效果。

例如，根据下拉指令获取区块的JS流行特效，又如，根据下拉指令获取wow渐入特效。例如，当根据选择指令选择对应的特效元素后，利用JQ(jquery，JavaScript框架)的添加属性方法，给区块添加class属性、wow-delay属性等，并应用在区块上，使得区块显示特效。

为了便于对区块添加高级参数，使得区块显示更灵活，显示效果更佳，在一个实施例中，所述区块参数还包括表单参数。本实施例中，如图1D所示，步骤106还包括：

步骤106c，创建表单。

步骤106d，获取对所述表单的表单指令。

步骤106e，根据所述表单指令获取所述表单参数。

例如，该表单参数包括高级参数，例如，该高级参数即高级属性，例如，高级参数包括字体颜色、背景颜色、外边距、内边距、边框属性、是否圆角、是否阴影、是否含动画以及动画是2d或3d等。

例如，该表单为属性表单，具体地，表单为高级属性表单或者说高级参数表单，该表单用于为区块添加高级属性，例如，表单用于显示若干待选的高级参数，例如，表单包括若干待选的高级参数的单元格，例如，获取对各高级参数对应的单元格的选择指令，获取高级参数。

例如，创建表单，获取对表单的输入的表单指令，根据表单指令获取表单参数，当提交表单时，利用JQ添加CSS属性的方法，将所选择的高级参数设置应用到区块上，并显示。例如，通过表单的提交按钮提交表单，例如，获取对提交按钮的点击指令，确定表单参数，提交表单。

值得一提的是，上述两个实施例中的步骤106a～步骤106b与步骤106c～步骤106e可以同时在一个实施例中实现，且上述的步骤编号并不用于限制两个实施例的方案实施顺序，即步骤106a～步骤106b与步骤106c～步骤106e可以同时执行，也可以步骤106c～步骤106e先执行，随后执行步骤106a～步骤106b，也可以是执行步骤106a～步骤106b，再执行步骤106c～步骤106e。上述两个实施例的方案执行先后顺序并不影响区块的整体显示效果，而两个实施例的方案能够使得区块显示效果更佳，且显示更为灵活。

例如，该表单参数还包括媒体查询参数，例如，媒体查询能够使得网页根据设备显示器的特性，比如，视口宽度、屏幕比例、设备方向(横向或纵向)为网页设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有width、height和color等。使用媒体查询，可以在不改变网页的页面内容的情况下，为特定的一些输出设备定制显示效果。

例如，获取表单上的媒体查询参数，根据所述媒体查询参数显示区块。例如，获取表单上的媒体查询参数，根据所述媒体查询参数显示网页。

例如，表单的每一行创建一套媒体查询，例如，表单的每一行的媒体查询对应一添加按钮，点击添加按钮之后，例如，获取添加按钮的点击指令，获取对应的媒体查询参数，这样可为区块新增一行空的媒体查询；每行媒体查询的设置内容设置完毕后，利用JS读写文件的功能，将代码写入CSS文件中。

例如，媒体查询参数即CSS媒体，例如，创建多套CSS媒体，其中每套CSS媒体包括媒体类型选择(如screen)、媒体条件(如min-width)、内容(条件下的CSS内容)。

本实施例中，通过表单获取媒体查询参数，进而使得区块以及网页能够适应各种显示器设备的显示特性，适应视口宽度、屏幕比例以及设备方向，使得网页显示效果更佳，便于观看。

例如，步骤106之后还包括：根据所述区块参数生成预览网页，并显示所述预览网页。

例如，在设计区内获取预览区域，用于测试预览的区域，例如，该区块的目标区域即为测试预览的区域。

本实施例中，预览网页用于预览，例如，该预览网页还包括预览区块，例如，根据拖拽指令获取目标区域，获取区块参数，调用droppable函数，根据所述区块参数生成预览网页，预览所述预览网页，例如，调用droppable函数，获取预览宽度和预览高度，根据预览宽度和预览高度预览所述预览网页。

具体地，拖拽区块至目标区域，绑定droppable函数，可实现模拟实际网页，可选择模拟的宽度和高度，确定宽高之后，自动根据代码设置调整布局，实现网页的预览。通过该预览网页，还能够预览区块的基本参数、高级参数和特效参数的显示效果。

为了使得生成的HTML文件、JS文件和CSS文件能够方便的保存，便于后续开发的查看，在一个实施例中，如图1E所示，步骤108之后还包括：步骤112，输出包含所述HTML文件、所述JS文件和所述CSS文件的文本文件，并保存所述文本文件。

例如，将区块参数保存字符串信息，例如，该字符串信息包含若干字符串，例如，将字符串信息保存为文本文件。这样，HTML文件、JS文件和CSS文件内的字符串均可输出至文本文件，通过该文本文件保存HTML文件、JS文件和CSS文件的字符串，进而使得HTML文件、JS文件和CSS文件的内容能够输出并保存，进而使得HTML文件、JS文件和CSS文件能够方便地保存，便于后续开发的查看。

在一个实施例中，提供一种响应式网页生成装置，如图2A所示，包括：

设计区显示模块210，用于基于流式布局显示设计区。

区块显示模块220，用于获取拖拽指令，响应所述拖拽指令，在所述设计区内显示区块。

区块参数获取模块230，用于获取对所述区块的设置指令，根据所述设置指令获取区块参数。

文件生成模块240，用于根据所述区块参数，生成HTML文件、JS文件和CSS文件。

网页生成模块250，用于根据所述HTML文件、所述JS文件和所述CSS文件生成网页。

在一个实施例中，如图2B所示，所述区块显示模块220包括：

拖拽指令获取单元221，用于获取拖拽指令。

基本参数获取单元222，用于获取基本参数。

区块显示单元223，用于响应所述拖拽指令，根据所述基本参数在所述设计区内显示所述区块。

在一个实施例中，如图2C所示，所述区块参数包括特效参数。

所述区块参数获取模块230包括：

下拉指令获取单元231，用于获取对所述区块的下拉框的下拉指令。

特效参数获取单元232，用于根据所述下拉指令获取所述特效参数。

在一个实施例中，如图2D所示，所述区块参数还包括表单参数。

所述区块参数获取模块230还包括：

表单创建单元233，用于创建表单。

表单指令获取单元234，用于获取对所述表单的表单指令。

表单参数获取单元235，用于根据所述表单指令获取所述表单参数。

在一个实施例中，如图2E所示，还包括：

文件保存模块260，用于输出包含所述HTML文件、所述JS文件和所述CSS文件的文本文件，并保存所述文本文件。

应该说明的是，上述系统实施例中，所包括的各个模块只是按照功能逻辑进行划分的，但并不局限于上述的划分，只要能够实现相应的功能即可；另外，各功能模块的具体名称也只是为了便于相互区分，并不用于限制本发明的保护范围。

另外，本领域普通技术人员可以理解实现上述各实施例方法中的全部或部分步骤是可以通过程序来指令相关的硬件来完成，相应的程序可以存储于可读取存储介质中。

以上所述实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。

以上所述实施例仅表达了本发明的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干变形和改进，这些都属于本发明的保护范围。因此，本发明专利的保护范围应以所附权利要求为准。

Claims (10)

1.一种响应式网页生成方法，其特征在于，包括：

基于流式布局显示设计区；

获取拖拽指令，响应所述拖拽指令，在所述设计区内显示区块；

获取对所述区块的设置指令，根据所述设置指令获取区块参数；

根据所述区块参数，生成HTML文件、JS文件和CSS文件；

根据所述HTML文件、所述JS文件和所述CSS文件生成网页。

2.根据权利要求1所述的响应式网页生成方法，其特征在于，所述获取拖拽指令，响应所述拖拽指令，在所述设计区内显示区块的步骤包括：

获取拖拽指令；

获取基本参数；

响应所述拖拽指令，根据所述基本参数在所述设计区内显示所述区块。

3.根据权利要求1所述的响应式网页生成方法，其特征在于，所述区块参数包括特效参数；

所述获取对所述区块的设置指令，根据所述设置指令获取区块参数的步骤包括：

获取对所述区块的下拉框的下拉指令；

根据所述下拉指令获取所述特效参数。

4.根据权利要求3所述的响应式网页生成方法，其特征在于，所述区块参数还包括表单参数；

所述获取对所述区块的设置指令，根据所述设置指令获取区块参数的步骤还包括：

创建表单；

获取对所述表单的表单指令；

根据所述表单指令获取所述表单参数。

5.根据权利要求1所述的响应式网页生成方法，其特征在于，所述生成HTML文件、JS文件和CSS文件的步骤之后还包括：

输出包含所述HTML文件、所述JS文件和所述CSS文件的文本文件，并保存所述文本文件。

6.一种响应式网页生成装置，其特征在于，包括：

设计区显示模块，用于基于流式布局显示设计区；

区块显示模块，用于获取拖拽指令，响应所述拖拽指令，在所述设计区内显示区块；

区块参数获取模块，用于获取对所述区块的设置指令，根据所述设置指令获取区块参数；

文件生成模块，用于根据所述区块参数，生成HTML文件、JS文件和CSS文件；

网页生成模块，用于根据所述HTML文件、所述JS文件和所述CSS文件生成网页。

7.根据权利要求6所述的响应式网页生成装置，其特征在于，所述区块显示模块包括：

拖拽指令获取单元，用于获取拖拽指令；

基本参数获取单元，用于获取基本参数；

区块显示单元，用于响应所述拖拽指令，根据所述基本参数在所述设计区内显示所述区块。

8.根据权利要求6所述的响应式网页生成装置，其特征在于，所述区块参数包括特效参数；

所述区块参数获取模块包括：

下拉指令获取单元，用于获取对所述区块的下拉框的下拉指令；

特效参数获取单元，用于根据所述下拉指令获取所述特效参数。

9.根据权利要求8所述的响应式网页生成装置，其特征在于，所述区块参数还包括表单参数；

所述区块参数获取模块还包括：

表单创建单元，用于创建表单；

表单指令获取单元，用于获取对所述表单的表单指令；

表单参数获取单元，用于根据所述表单指令获取所述表单参数。

10.根据权利要求6所述的响应式网页生成装置，其特征在于，还包括：

文件保存模块，用于输出包含所述HTML文件、所述JS文件和所述CSS文件的文本文件，并保存所述文本文件。