博鱼体育近年来，随着计算机的普及与因特网的蓬勃发展，各种应用服务纷纷与因特网进行结合，例如：网络购物、网络论坛等。而这些应用服务皆是以网页的方式进行呈现，因此，如何快速且方便的开发网页已成为亟待解决的问题。

　　现有的网页制作时，一般通过网页开发人员通过手动敲入逻辑代码生成网页对应的网页源代码以完成网页的制作。制作一个网页需要学习HTML、CSS、JavaScript等专业技术，制作一张适用于移动端的H5网页更需要制作人员具备自适应页面的排版布局经验，并学习HTML5、CSS3等新技术。而网页制作完成后还要经由专业的系统运维人员发布到线上服务器。另一种，为了解决第一种网页制作方案中，完全通过手动敲入的代码的方式非常繁琐的问题，网页开发人员将相同的功能以模块化的方式撰写成程序对象，这样，在需要此功能时，直接引用相应程序对象即可，以减少人工输入代码。从整体上来说，现有的这两网页制作方案，都仅限于是具有编写代码能力的网页开发人员对网页进行制作，而不适合普通的无编写代码能力的网页制作者，因此，不具有普适性。

　　而现有的第一种网页制作方案，不仅需要耗费大量的人力物力，由于完全依靠开发人员手动敲入代码，编写出的网页源代码易出现错误，无法制作出理想中的网页。而现有的第二种网页制作方案，虽然可以减少开发人员的工作量，但是这种引入相应程序对象的方式无法任意选择欲使用的程序对象，并且还可能存在没有需要的程序对象的问题，依然无法改善网页设计不方便的问题，难以满足多样化的网页制作需求。

　　总体来讲，现有的网页制作的整个流程的启动成本较高，网页制作完成后还要经由专业的系统运维人员发布到线上服务器，后续每次的页面维护都要启动整个流程，网页制作成本高，效率低下。

　　为了克服现有的网页制作方法的不足，本发明提供了一种网页制作方法及系统，通过对网页的制作上线和后续维护流程进行优化，使得非专业开发人员亦可参与或独立完成网页的制作工作，高效且成本低。

　　响应于编辑界面中的网页制作和编辑操作，生成描述网页内容和样式的huar格式的网页数据并进行存储；

　　在发布网页时，读取存储的所述huar格式的网页数据进行解析和轮转分析，生成网页数据文件；

　　将所述网页数据文件通过文件传输协议或数据传输协议传送到目标线上服务器进行发布。

　　作为一种可实施方式，所述响应于编辑界面中的网页制作和编辑操作，生成描述网页内容和样式的huar格式的网页数据并进行存储，包括以下步骤：

　　响应于所述编辑界面中的网页制作和编辑操作，检测用户创建网页的内容以及样式的操作信息；

　　作为一种可实施方式，在基于所述操作信息，生成描述网页内容和样式的所述huar格式的网页数据之后，还包括以下步骤：

　　对生成的所述huar格式的网页数据进行解析，根据解析后的数据生成对应的网页，实时显示在所述编辑界面上。

　　作为一种可实施方式，所述在发布网页时，读取存储的所述huar格式的网页数据进行解析和轮转分析，生成网页数据文件，包括以下步骤：

　　对所述huar格式的网页数据中的描述内容元素的信息按照排版顺序进行抽取、重组，生成按照文档流结构组成的HTML数据；

　　对所述huar格式的网页数据中的描述样式的信息进行公用提取和格式转换，生成低冗余度的CSS数据；

　　对所述huar格式的网页数据中的描述行为和脚本的信息进行抽取并转换成JavaScript脚本数据。

　　获取用户身份信息，将所述用户身份信息与生成的所述huar格式的网页数据对应存储；

　　在发布网页时，响应于用户的登录操作，获取当前登录用户的所述用户身份信息；

　　根据所述用户身份信息，读取存储的与所述用户身份信息对应的所述huar格式的网页数据，进行解析和轮转分析，生成网页数据文件。

　　相应地，本发明还提供一种网页制作系统，包括网页数据存储模块、网页数据读取模块以及网页发布模块；

　　所述网页数据存储模块，用于响应于编辑界面中的网页制作和编辑操作，生成描述网页内容和样式的huar格式的网页数据并进行存储；

　　所述网页数据读取模块，用于在发布网页时，读取所述网页数据存储模块存储的所述huar格式的网页数据进行解析和轮转分析，生成网页数据文件；

　　所述网页发布模块，用于将所述网页数据读取模块生成的所述网页数据文件通过文件传输协议或数据传输协议传送到目标线上服务器进行发布。

　　作为一种可实施方式，所述网页数据存储模块包括界面编辑单元、操作信息检测单元、网页数据生成单元以及存储单元；

　　所述操作信息检测单元，用于响应于所述界面编辑单元提供的编辑界面中的网页制作和编辑操作，检测用户创建网页的内容以及样式的操作信息；

　　所述网页数据生成单元，用于基于所述操作信息检测单元检测到的所述操作信息，生成描述网页内容和样式的所述huar格式的网页数据；

　　所述存储单元，用于存储所述网页数据生成单元生成的所述huar格式的网页数据。

　　所述显示模块，用于对所述网页数据生成单元生成的所述huar格式的网页数据进行解析，根据解析后的数据生成对应的网页，实时显示在所述编辑界面上。

　　作为一种可实施方式，所述网页数据读取模块包括数据读取单元、HTML数据生成单元、CSS数据生成单元以及JavaScript脚本数据生成单元；

　　所述数据读取单元，用于响应于发布网页操作，读取存储的所述huar格式的网页数据；

　　HTML数据生成单元，用于对所述数据读取单元读取的所述huar格式的网页数据中的描述内容元素的信息按照排版顺序进行抽取、重组，生成按照文档流结构组成的HTML数据；

　　所述CSS数据生成单元，用于对所述数据读取单元读取的所述huar格式的网页数据中的描述样式的信息进行公用提取和格式转换，生成低冗余度的CSS数据；

　　所述JavaScript脚本数据生成单元，用于对所述数据读取单元读取的所述huar格式的网页数据中的描述行为和脚本的信息进行抽取并转换成JavaScript脚本数据。

　　相应地，本发明还提供一种网页制作系统，包括用户管理子系统、前端编辑引擎、网页描述数据生成器、网页存储管理子系统、网页数据文件生成器以及发布上线子系统；

　　所述前端编辑引擎，连接所述用户管理子系统，用于向已登陆用户提供编辑界面，并响应于编辑界面中的网页制作和编辑操作，检测用户创建网页的内容以及样式的操作信息；

　　所述网页描述数据生成器，连接所述前端编辑引擎，用于根据所述操作信息生成描述网页内容和样式的huar格式的网页数据，并将其发送至所述网页存储管理子系统；

　　网页存储管理子系统，连接所述用户管理子系统和所述网页描述数据生成器，用于将所述用户身份信息与生成的所述huar格式的网页数据对应存储；

　　网页数据文件生成器，连接所述网页存储管理子系统，用于在发布网页时，从所述网页存储管理子系统中读取所述网页数据存储模块存储的所述huar格式的网页数据进行解析和轮转分析，生成网页数据文件；

　　发布上线子系统，连接所述网页数据文件生成器，用于从所述网页数据文件生成器中获取所述网页数据文件，并通过文件传输协议或数据传输协议传送到目标线上服务器进行发布。

　　本发明提供的网页制作方法及系统，在用户进行网页制作的时候，将用户进行每一步网页制作和编辑的具体操作数据记录下来，在需要发布网页的时候，通过将操作数据读取并复现，从而实现在新的浏览器中即时制作出一个新的网页。本发明通过整合制作和发布流程，优化了网页的制作上线和后续维护流程，从而降低了网页的制作门槛，使得非计算机软件开发专业人员亦可参与或独立完成网页的制作，降低了网页制作成本，而且提升了网页制作效率。

　　以下结合附图，对本发明上述的和另外的技术特征和优点进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明的部分实施例，而不是全部实施例。

　　S100、响应于编辑界面中的网页制作和编辑操作，生成描述网页内容和样式的huar格式的网页数据并进行存储；

　　S200、在发布网页时，读取存储的huar格式的网页数据进行解析和轮转分析，生成网页数据文件；

　　S300、将网页数据文件通过文件传输协议或数据传输协议传送到目标线上服务器进行发布。

　　上述实施例中，huar格式的网页数据采用JSON数据格式，可用于描述网页中包含的文本、图像、音视频等内容，并描述各种内容的宽高定位等布局信息和颜色、阴影、变形等样式信息(包含编辑界面中所能创作的所有布局和样式)，还可以存储网页运行所需引用的外部脚本(JavaScript)数据。

　　本发明实施例提供的网页制作方法，在用户进行网页制作的时候，将用户进行每一步网页制作和编辑的具体操作数据记录下来，在需要发布网页的时候，通过将操作数据读取并复现，从而实现在新的浏览器中即时制作出一个新的网页。本发明通过整合制作和发布流程，大幅优化了网页的制作上线和后续维护流程，而且降低了网页的制作门槛，使得非计算机软件开发专业人员亦可参与或独立完成网页的制作工作。

　　本发明提供的网页制作方法的运行和用户操作在浏览器中的网页上即可实现，其基于Web平台，无论用户使用Windows、OSX或Linux操作系统，都可使用本方法。无需安装客户端，不受系统兼容性影响，实现了真正的跨操作系统平台运行，成本低且高效。

　　S120、响应于编辑界面中的网页制作和编辑操作，检测用户创建网页的内容以及样式的操作信息；

　　S130、基于操作信息，生成描述网页内容和样式的huar格式的网页数据；

　　首先，本方法需要给用户提供一个编辑界面，用户可通过该编辑界面来创建网页的内容和样式，其中，样式中包括了网页的排版布局。接下来，在用户进行网页制作和编辑操作的同时，根据用户操作实时生成用来描述网页内容和样式的huar格式的数据并进行存储。

　　S131、对生成的huar格式的网页数据进行解析，根据解析后的数据生成对应的网页，实时显示在编辑界面上。

　　对生成的huar格式的网页数据进行解析后实时在编辑界面上展现为网页作品，这样用户每进行一步编辑操作，都能即时看到在网页上改动后的效果。如果效果不满意，可以及时进行编辑修改，使得网页编辑更加高效。

　　S220、对huar格式的网页数据中的描述内容元素的信息按照排版顺序进行抽取、重组，生成按照文档流结构组成的HTML数据；

　　S230、对huar格式的网页数据中的描述样式的信息进行公用提取和格式转换，生成低冗余度的CSS数据；

　　S240、对huar格式的网页数据中的描述行为和脚本的信息进行抽取并转换成JavaScript脚本数据。

　　最终生成的HTML数据、CSS数据、JavaScript脚本数据及图片和音视频等均为网页数据文件。上述解析转换操作的原则是尽量模拟和趋近于网页制作人员手动工作时生成的网页数据文件的范式及惯例。

　　更进一步地，本发明实施例提供的网页制作方法，还可以实现网页定向管理。通过给每个用户设立一个账户，每个账户有独立的id，即使用户从不同的客户端登录，也可根据其账户id查看、编辑、下载之前储存的网页编辑数据。

　　在执行步骤S100的过程中，获取用户身份信息，将用户身份信息与生成的huar格式的网页数据对应存储；

　　在执行步骤S200的过程中，响应于用户的登录操作，获取当前登录用户的用户身份信息，然后根据用户身份信息，读取存储的与用户身份信息对应的huar格式的网页数据，进行解析和轮转分析，生成网页数据文件。

　　最后，执行发布操作时，获取生成的网页数据文件，将其通过文件传输协议或数据传输协议(如FTP、SCP、HTTP等，多种可选)等方式传送到目标线上服务器，实现发布。

　　基于同一发明构思，本发明实施例二还提供了一种网页制作系统，该系统与前述方法的原理相同，其实施可参照前述方法实现，重复之处不再冗述。

　　参见图2，本发明实施例二提供的网页制作系统包括网页数据存储模块100、网页数据读取模块200以及网页发布模块300。其中，网页数据存储模块100用于响应于编辑界面中的网页制作和编辑操作，生成描述网页内容和样式的huar格式的网页数据并进行存储；网页数据读取模块200用于在发布网页时，读取网页数据存储模块100存储的huar格式的网页数据进行解析和轮转分析，生成网页数据文件；网页发布模块300用于将网页数据读取模块200生成的网页数据文件通过文件传输协议或数据传输协议传送到目标线上服务器进行发布。

　　网页数据存储模块包括界面编辑单元、操作信息检测单元、网页数据生成单元以及存储单元。界面编辑单元用于提供编辑界面；操作信息检测单元用于响应于界面编辑单元提供的编辑界面中的网页制作和编辑操作，检测用户创建网页的内容以及样式的操作信息；网页数据生成单元用于基于操作信息检测单元检测到的操作信息，生成描述网页内容和样式的huar格式的网页数据；存储单元用于存储网页数据生成单元生成的huar格式的网页数据。

　　进一步地，本发明实施例二提供的网页制作系统，还包括显示模块。显示模块用于对网页数据生成单元生成的huar格式的网页数据进行解析，根据解析后的数据生成对应的网页，实时显示在编辑界面上。

　　网页数据读取模块包括数据读取单元、HTML数据生成单元、CSS数据生成单元以及JavaScript脚本数据生成单元。其中，数据读取单元用于响应于发布网页操作，读取存储的huar格式的网页数据；HTML数据生成单元用于对数据读取单元读取的huar格式的网页数据中的描述内容元素的信息按照排版顺序进行抽取、重组，生成按照文档流结构组成的HTML数据；CSS数据生成单元用于对数据读取单元读取的huar格式的网页数据中的描述样式的信息进行公用提取和格式转换，生成低冗余度的CSS数据；JavaScript脚本数据生成单元，用于对数据读取单元读取的huar格式的网页数据中的描述行为和脚本的信息进行抽取并转换成JavaScript脚本数据。

　　上述网页数据存储模块，还用于获取用户身份信息，并将用户身份信息与生成的huar格式的网页数据对应存储。

　　上述网页数据读取模块，还用于在发布网页时，响应于用户的登录操作，获取当前登录用户的用户身份信息，并根据用户身份信息，读取存储的与用户身份信息对应的huar格式的网页数据，进行解析和轮转分析，生成网页数据文件。

　　参见图3，本发明实施例三提供的网页制作系统，包括用户管理子系统10、前端编辑引擎20、网页描述数据生成器30、网页存储管理子系统40、网页数据文件生成器50以及发布上线用于提供用户登录界面，获取用户身份信息，并将其发送至前端编辑引擎20。用户可通过用户管理子系统来注册并登录进入本系统的前端编辑引擎20。进一步地，每一个用户可以通过用户管理子系统注册自己的账户，每个账户有独立的id，即使从不同的客户端登录，用户也可根据账户id查看、编辑、下载之前储存的网页编辑数据。

　　前端编辑引擎20给用户提供编辑界面，用户可通过前端编辑引擎20来创建网页的内容和样式。

　　用户在和前端编辑引擎20交互的同时，前端编辑引擎20会和网页描述数据生成器30不断交互，网页描述数据生成器30根据用户操作信息实时生成用来描述网页内容和样式的huar格式的网页数据。

　　网页描述数据生成器30生成的huar格式的网页数据可以实时回传给前端编辑引擎20，经前端编辑引擎20解析后实时在编辑界面上展现为网页。这样，用户每进行一步编辑操作，都能即时在前端编辑引擎20中看到在网页上改动后的效果。

　　网页存储管理子系统40用于储存记录用户的操作数据、创建和维护其修改记录、发布记录等信息，并负责维护其与用户的关系等数据。用户执行保存操作时，网页描述数据生成器30将huar格式的网页数据传给网页存储管理子系统40，网页存储管理子系统40将huar格式的网页数据与在用户管理子系统10登录的账号id匹配后存储到后台数据库。

　　网页数据文件生成器50从网页存储管理子系统40中取得对应的huar格式的网页数据，对其进行解析和轮转分析：将其中描述内容元素的信息按照排版顺序进行抽取、重组、输出一种按照文档流结构组成的HTML数据；将其中描述样式的信息进行公用提取和格式转换，输出一种低冗余度的CSS数据；将其中描述行为和脚本的信息抽取转换为JavaScript脚本数据；最终生成HTML、CSS、JS及图片(png/jpg/gif)和音、视频等网页数据文件。

　　上述解析转换操作的原则是尽量模拟和趋近于网页制作人员手工工作时产出的HTML网页数据的范式及惯例。

　　用户执行发布操作时，发布上线取得网页数据文件生成器50生成的网页数据文件，将其通过文件传输协议或数据传输协议(如FTP、SCP、HTTP等，多种可选)等方式传送到目标线上服务器。

　　本系统基于Web平台，无论用户使用Windows、OSX或Linux操作系统，都可使用本软件，无需安装，只要用现代浏览器(Chrome、Safari、Firefox或Edge)打开网址便可，实现真正的跨操作系统平台运行。该系统降低了网页的制作门槛，使得非计算机软件开发专业人员亦可参与或独立完成网页的制作工作，降低了人工成本，大幅优化了网页的制作上线和后续维护流程，提升了网页制作和维护效率。

　　进一步地，在上述实施例中，为了实现网页编辑，前端编辑引擎还可以提供如下功能供用户进行操作处理：

　　2.结合工具栏和调板，可在舞台中创建文本、矩形、圆形、直线、图案、表格、音视频等基本元素；

　　3.鼠标点击基本元素，可在元素上创建选中脚手架，通过拖移脚手架可修改元素在页面中的位置，通过拖移脚手架的控制点可以修改元素的宽高；

　　4.同时，调板会根据选中元素类型自动切换到对应的调板类型，在调板中可修改当前选中元素的位置、宽度、高度、颜色、透明度、旋转角度、字体样式、背景颜色、背景透明度、边框样式、边框粗细、圆角弧度、阴影样式、阴影角度、阴影颜色、阴影透明度、阴影模糊度、阴影偏移度、对齐方式等等；

　　5.通过调板可在调手架中调出更多控制点，然后可用拖移控制点的感性的方式来修改弧度、角度等；

　　7.如上所述样式的修改均会在舞台中对应元素上产生实时的样式变动或视觉反馈；

　　8.结合Ctrl/Command和Shift键的鼠标点击可在舞台上选中多个元素，此时可通过调板批量修改颜色、字体等样式，可对多个元素进行左右对齐、上下对齐、平均间距等排版操作；

　　9.选中元素后，Ctrl/Command+C可复制元素，然后粘贴到其他位置，或其他页面；

　　10.用鼠标右键单击元素，可调出右键菜单，可修改元素的Z轴顺序(z-index)，针对表格，可对其执行合并单元格操作；

　　11.在拾色器中，可通过HSB或RGB方式取色，也可通过鼠标点击在色调条和饱和度与亮度板中取色，可设置颜色的半透明度，或选取全透明色；

　　12.另外，前端编辑引擎还支持撤销和重做操作，无论是编辑文本、修改位置或样式，均可通过工具栏按钮或键盘快捷键Ctrl/Cmd+Z来撤销，支持多次撤销，撤销后还可通过工具栏按钮或键盘快捷键Ctrl/Cmd+Shift+Z重做回来，支持多次重做。

　　以上所述的具体实施例，对本发明的目的、技术方案和有益效果进行了进一步的详细说明，应当理解，以上所述仅为本发明的具体实施例而已，并不用于限定本发明的保护范围。特别指出，对于本领域技术人员来说，凡在本发明的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。