CN105468766A - 网页制作方法及其系统 - Google Patents

Abstract

本发明公开了一种网页制作方法及其系统。所述网页制作方法包括：加载网页制作系统的界面窗口，其中所述界面窗口中包括对网页进行设置的多个选项；通过对所述界面窗口中的所述多个选项的配置，选择并且显示网页元素和对应的代码；根据所述对应的代码的帮助信息，自定义编辑代码；以及显示对应于所述自定义编辑代码的网页元素的网页效果。所述网页制作方法及其系统能够灵活、快速地自定义编辑网页元素，减少网页制作人员的学习时间和成本，减少编码量和开发时间，并且提高代码的重复利用率和网页开发效率。

Description

网页制作方法及其系统

技术领域

本发明涉及网络技术领域，尤其涉及一种能够灵活、快速地自定义编辑网页元素的网页制作方法及其系统。

背景技术

近年来，随着计算机的普及和互联网的蓬勃发展，各种应用服务纷纷与互联网进行结合，例如：网络购物、网络论坛、网络应用软件、在线管理系统等等。而这些应用服务都是以网页的方式进行呈现。网页是由多种网页元素组成，例如：文字、图片、音频、动画、视频、文字等。实质上，网页是一种超级文本标记语言(HTML)，通过结合其它网络技术(例如：JavaScript脚本语言、公共网关接口、组件等)来生成功能强大的网页。

目前，主要有两种网页制作方案：直接编码和定制模板。直接编码是指网页开发人员通过手动敲入逻辑代码生成网页对应的网页源代码来完成网页的制作；定制模板是指网页开发人员将相同的功能以模块化的方式撰写成程序对象，之后在需要此功能时，直接引用相应程序对象来减少人工输入代码。然而，这两种网页制作方案都仅限于具有编写代码能力的网页开发人员对网页进行制作，而不适合普通的无编写代码能力的网页制作者，因此不具有普适性。特别地，第一种网页制作方案不仅需要耗费大量的人力物力，由于完全依靠开发人员手动敲入代码，因此编写出的网页源代码易出现错误而无法制作出理想的网页；而第二种网页制作方案虽然可以减少网页开发人员的工作量，但是这种引入相应程序对象的方式无法任意选择欲使用的程序对象，并且还可能存在没有所需的程序对象的问题，因此仍然无法改善网页设计不方便的问题。

在现有技术中也有不少对于网页制作方法的改进尝试。例如，在专利申请“网页制作支持系统、设备、方法、计算机程序和记录介质”(申请号：CN01804071.3)中记载的，网页制作支持服务器理与模板信息相关的、并存储于客户终端装置中的网页信息，和使得制作人终端装置响应于来自客户终端装置的制作请求，根据模板信息去制作网页信息，由此提供其中在网络上能够容易地实现网页制作的一种环境。然而，这种技术方案依赖网页模板，必须有上网条件，而且其最后的网络制作环境的好坏也依赖于网络带宽的影响。

此外，例如在专利申请“网页制作的方法和系统，客户端、服务端”(申请号：CN201010151678.1)中记载的，通过预设具有可视化效果并且采用脚本语言进行标准化封装的组件，使得在网页制作的过程中，能够利用统一的接口对组件进行参数配置，减少了模板代码编写过程中非标准代码的产生，便于提高代码的重复利用率和正确率。然而，这种技术方案是针对网页组件，需要修改对网页组件的配置参数，对于没有网页制作基础的用户来说不好使用。

由此可见，如何快速并且方便地开发网页已成为亟待解决的问题。因此，需要一种改进的网页制作方法及其系统。

发明内容

本发明的主要目的在于提供一种改进的网页制作方法及其系统，以便快速并且方便地开发网页。

为实现上述目的，本发明提供一种网页制作方法，包括：加载网页制作系统的界面窗口，其中所述界面窗口中包括对网页进行设置的多个选项；通过对所述界面窗口中的所述多个选项的配置，选择并且显示网页元素和对应的代码；根据所述对应的代码的帮助信息，自定义编辑代码；以及显示对应于所述自定义编辑代码的网页元素的网页效果。

进一步地，通过对所述界面窗口中的所述多个选项的配置，选择并且显示网页元素和对应的代码的所述步骤包括：通过对所述界面窗口中的所述多个选项的配置，选择所述网页元素并且显示对应于所述网页元素的网页效果；以及显示对应于所述网页元素的代码。

进一步地，根据所述对应的代码的帮助信息，自定义编辑代码的所述步骤包括：显示所述对应的代码的帮助信息；根据所述对应的代码的帮助信息，自定义编辑代码；以及生成对应于所述自定义编辑代码的网页元素。

进一步地，所述网页制作方法还包括：将所述对应的代码复制到暂存器。

进一步地，所述帮助信息包括所述代码的使用方法和定义说明。

本发明还提供一种网页制作系统，包括：界面窗口加载模块，配置为加载所述网页制作系统的界面窗口，其中所述界面窗口中包括对网页进行设置的多个选项；网页元素选择与显示模块，配置为通过对所述界面窗口中的所述多个选项的配置，选择并且显示网页元素和对应的代码；帮助模块，配置为显示所述对应的代码的帮助信息；以及代码自定义模块，耦合于所述帮助模块以及所述网页元素选择与显示模块，配置为根据所述帮助信息来自定义编辑代码，其中所述网页元素选择与显示模块还配置为显示对应于所述自定义编辑代码的网页元素的网页效果。

进一步地，所述网页元素选择与显示模块配置为：通过对所述界面窗口中的所述多个选项的配置，选择所述网页元素并且显示对应于所述网页元素的网页效果；以及显示对应于所述网页元素的代码。

进一步地，所述代码自定义模块配置为：根据所述对应的代码的帮助信息，自定义编辑代码；以及生成对应于所述自定义编辑代码的网页元素。

进一步地，所述网页制作系统还包括：代码暂存模块，耦合于所述网页元素选择与显示模块，配置为复制并且暂存所述对应的代码。

进一步地，所述帮助信息包括所述代码的使用方法和定义说明。

本发明所提供的网页制作方法及其系统能够灵活、快速地自定义编辑网页元素。对于没有任何网页制作基础的人员来说能够满足其快速使用网页元素的需要，减少学习的时间及成本。对于有一定基础的人员来说可以减少编码量和开发时间，提高代码的重复利用率进而提高开发效率。对于有网页制作基础的团队来说，可以通过扩展提供网页组件或模板式的支持，便于提高代码的重复利用率和正确率，形成统一的开发风格。

附图说明

图1为本发明实施例提供的一种网页制作方法的流程示意图；

图2为本发明实施例提供的另一种网页制作方法的流程示意图；

图3为本发明实施例提供的一种网页制作系统的结构示意图；

图4为本发明实施例提供的另一种网页制作系统的结构示意图；

图5为本发明实施例提供的一种网页制作系统的主界面示意图；以及

图6为本发明实施例提供的一种用于自定义编辑代码的界面示意图。

本发明的实现、功能特点及优点将结合实施例，参照附图作进一步说明。

具体实施方式

以下结合说明书附图对本发明的优选实施例进行说明，应当理解，此处所描述的优选实施例仅用于说明和解释本发明，并不用于限定本发明，并且在不冲突的情况下，本发明中的实施例及实施例中的特征可以相互组合。

图1为本发明实施例提供的一种网页制作方法100的流程示意图。如图1所示，网页制作方法100包括以下步骤：

在步骤102中，加载网页制作系统的界面窗口，其中界面窗口中包括对网页进行设置的多个选项。图5为本发明实施例提供的一种网页制作系统的主界面示意图。如图5所示，主界面内可包含文本(text)、文本区域(textarea)、按钮(button)、超链接(hyperlink)、复选框(checkbox)、下拉框(select)、多选下拉框(multipleselect)、图像(image)、音频(audio)、视频(video)、显示效果、代码、复制到剪贴板、帮助、自定义等多个选项，以便网页开发者进行合适的配置。请注意，图5中的选项数量、类别和布局设置仅为示例性而非本发明的限制。相反地，本领域技术人员在阅读本申请之后可容易改用其它合适的选项数量、类别和布局设置。

在步骤104中，通过对界面窗口中的多个选项的配置，选择并且显示网页元素和对应的代码。再次结合图5来看，网页开发者可在主界面的网页元素选择区域用鼠标等设备来配置各选项从而选择所需的网页元素，并且在主界面内(例如，右侧)显示该网页元素的效果和对应的代码。在一个实施例中，显示网页元素的效果是通过以下方法来实现：当网页开发者长按鼠标(例如，左键)并且拖动鼠标时，通过JavaScript脚本复制一个所选中网页元素，该网页元素会跟着鼠标的移动而移动。当判断出该复制的网页元素跨过主界面左边的网页元素配置区域来到主界面右侧的显示效果区域时，显示该网页元素的效果。在一个实施例中，显示该网页元素的对应代码是通过以下方法来实现：通过JavaScript脚本将所复制的网页元素对应的HTML代码(例如：<inputtype＝“text”name＝“text”value＝“”/>)显示在主界面右侧的显示代码区域。

在步骤106中，根据对应的代码的帮助信息，自定义编辑代码。例如，当网页开发者点击主界面中的“帮助”按钮时，可通过JavaScript脚本弹出与所显示代码对应的代码的使用方法和定义说明(即，对应的代码的帮助信息)。随后，网页开发者可点击主界面中的“自定义”按钮，进入自定义编辑代码的界面(可参考图6)。如图6所示，自定义编辑代码的界面分为左右两部分，左侧为网页开发者尝试自定义编辑代码的区域，右侧为显示自定义编辑结果的区域。网页开发者可根据该帮助信息来输入自定义网页元素的代码，确认提交后在右侧显示自定义编辑结果。即，在步骤108，显示对应于自定义编辑代码的网页元素的网页效果。在一个实施例中，在网页开发者点击提交按钮之前，自定义编辑区域的代码内容会被自动传到后台数据库进行保存，以便后续重新加载。当后续重新加载页面时，从后台获取之前保存的代码并用来替换自定义编辑代码的界面中所显示生成自定义网页元素的innerHTML内容，从而显示自定义网页元素及其样式。如果网页开发者不满意该效果，可继续重复自定义编辑代码和提交显示结果的操作，直至网页开发者满意为止。

请注意，图5和图6中的界面样式仅为示例性而非本发明的限制。相反地，本领域技术人员在阅读本申请之后可容易改用其它合适的界面样式。例如，图5中的选项数量、类别和布局设置可改变。图6中的“试一试”窗口可拆分为HTML编辑区域、CSS编辑区域、JS编辑区域等。HTML编辑区域可用于编辑网页元素的结构，CSS编辑区域可用于编辑网页元素的样式，JS编辑区域可用于编辑网页元素的交互动作。

图2为本发明实施例提供的另一种网页制作方法200的流程示意图。图2可结合图1来理解，图2中的步骤204和206可对应于图1中的步骤104，并且图2中的步骤210和212可对应于图1中的步骤106。

具体地：图1中的通过对界面窗口中的多个选项的配置，选择并且显示网页元素和对应的代码的步骤104可包括图2中的步骤204和206：

步骤204：通过对界面窗口中的多个选项的配置，选择网页元素并且显示对应于网页元素的网页效果；以及

步骤206：显示对应于网页元素的代码。

此外，图1中的根据对应的代码的帮助信息，自定义编辑代码的步骤106可包括图2中的步骤210和212：

步骤210：显示对应的代码的帮助信息，并且根据对应的代码的帮助信息，自定义编辑代码；以及

步骤212：生成对应于自定义编辑代码的网页元素。

此外，在如图2所示的一个实施例中，网页制作方法200还可包括步骤208：将对应的代码复制到暂存器，以备用户后续再次使用代码。例如，网页开发者可通过JavaScript脚本将网页元素的对应代码复制到剪贴板内(例如，通过点击主界面中的“复制到剪贴板”按钮，如图5中所示)，随后可使用“Ctrl+V”快捷操作来将所复制的代码直接粘贴到需要运用代码的位置。以此方式，可在一定程度上减少手动编码量，提高工作效率。

图3为本发明实施例提供的一种网页制作系统300的结构示意图。图3可结合以上图1和图2来理解。如图3所示，网页制作系统300包括：界面窗口加载模块302、网页元素选择与显示模块304、帮助模块306、和代码自定义模块308。

界面窗口加载模块302可配置为加载网页制作系统(例如，网页制作系统300)的界面窗口，其中界面窗口中包括对网页进行设置的多个选项。如图5所示，主界面内可包含文本(text)、文本区域(textarea)、按钮(button)、超链接(hyperlink)、复选框(checkbox)、下拉框(select)、多选下拉框(multipleselect)、图像(image)、音频(audio)、视频(video)、显示效果、代码、复制到剪贴板、帮助、自定义等多个选项，以便网页开发者进行合适的配置。请注意，图5中的选项数量、类别和布局设置仅为示例性而非本发明的限制。相反地，本领域技术人员在阅读本申请之后可容易改用其它合适的选项数量、类别和布局设置。

网页元素选择与显示模块304可配置为通过对界面窗口中的多个选项的配置，选择并且显示网页元素和对应的代码。再次结合图5来看，网页开发者可在主界面的网页元素选择区域用鼠标等设备来配置各选项从而选择所需的网页元素，并且在主界面内(例如，右侧)显示该网页元素的效果和对应的代码。在一个实施例中，显示网页元素的效果是通过以下方法来实现：当网页开发者长按鼠标(例如，左键)并且拖动鼠标时，通过JavaScript脚本复制一个所选中网页元素，该网页元素会跟着鼠标的移动而移动。当判断出该复制的网页元素跨过主界面左边的网页元素配置区域来到主界面右侧的显示效果区域时，显示该网页元素的效果。在一个实施例中，显示该网页元素的对应代码是通过以下方法来实现：通过JavaScript脚本将所复制的网页元素对应的HTML代码(例如：<inputtype＝“text”name＝“text”value＝“”/>)显示在主界面右侧的显示代码区域。

帮助模块306可配置为显示对应的代码的帮助信息，此处“帮助信息”可包括所述代码的使用方法和定义说明。例如，当网页开发者点击主界面中的“帮助”按钮时，可通过JavaScript脚本弹出与所显示代码对应的代码的使用方法和定义说明(即，对应的代码的帮助信息)。

代码自定义模块308耦合于帮助模块306以及网页元素选择与显示模块304，可配置为根据所述帮助信息来自定义编辑代码。例如，网页开发者可点击主界面中的“自定义”按钮，进入自定义编辑代码的界面(可参考图6)。如图6所示，自定义编辑代码的界面分为左右两部分，左侧为网页开发者尝试自定义编辑代码的区域，右侧为显示自定义编辑结果的区域。网页开发者可根据该帮助信息来输入自定义网页元素的代码，确认提交后在右侧显示自定义编辑结果。即，进一步地，网页元素选择与显示模块304还可配置为显示对应于自定义编辑代码的网页元素的网页效果。如果网页开发者不满意该效果，可继续重复自定义编辑代码和提交显示结果的操作，直至网页开发者满意为止。

具体地，结合图2来看，在一个实施例中，网页元素选择与显示模块304可配置为：通过对界面窗口中的多个选项的配置，选择网页元素并且显示对应于网页元素的网页效果；以及显示对应于网页元素的代码。

在一个实施例中，代码自定义模块308可配置为：根据所述对应的代码的帮助信息，自定义编辑代码；以及生成对应于所述自定义编辑代码的网页元素。

请注意，网页元素选择与显示模块304、和代码自定义模块308的功能可参考图5和图6。但是，图5和图6中的界面样式仅为示例性而非本发明的限制。相反地，本领域技术人员在阅读本申请之后可容易改用其它合适的界面样式。例如，图5中的选项数量、类别和布局设置可改变。图6中的“试一试”窗口可拆分为HTML编辑区域、CSS编辑区域、JS编辑区域等。HTML编辑区域可用于编辑网页元素的结构，CSS编辑区域可用于编辑网页元素的样式，JS编辑区域可用于编辑网页元素的交互动作。

图4为本发明实施例提供的另一种网页制作系统400的结构示意图。图4中所示的网页制作系统400类似于图3中所示的网页制作系统400，除了网页制作系统400还包括：代码暂存模块402，耦合于网页元素选择与显示模块304，配置为复制并且暂存所述对应的代码。例如，网页开发者可通过JavaScript脚本将网页元素的对应代码复制到代码暂存模块402(例如，通过点击主界面中的“复制到剪贴板”按钮，如图5中所示)，随后可使用“Ctrl+V”快捷操作来将所复制的代码直接粘贴到需要运用代码的位置。以此方式，可在一定程度上减少手动编码量，提高工作效率。

有利地，本发明所提供的网页制作方法及其系统能够灵活、快速地自定义编辑网页元素。对于没有任何网页制作基础的人员来说能够满足其快速使用网页元素的需要，减少学习的时间及成本。对于有一定基础的人员来说可以减少编码量和开发时间，提高代码的重复利用率进而提高开发效率。对于有网页制作基础的团队来说，可以通过扩展提供网页组件或模板式的支持，便于提高代码的重复利用率和正确率，形成统一的开发风格。

以上仅为本发明的优选实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其它相关的技术领域，均同理包括在本发明的专利保护范围内。

Claims (10)

1.一种网页制作方法，包括：

加载网页制作系统的界面窗口，其中所述界面窗口中包括对网页进行设置的多个选项；

通过对所述界面窗口中的所述多个选项的配置，选择并且显示网页元素和对应的代码；

根据所述对应的代码的帮助信息，自定义编辑代码；以及

显示对应于所述自定义编辑代码的网页元素的网页效果。

2.如权利要求1所述的网页制作方法，其特征在于，通过对所述界面窗口中的所述多个选项的配置，选择并且显示网页元素和对应的代码的所述步骤包括：

通过对所述界面窗口中的所述多个选项的配置，选择所述网页元素并且显示对应于所述网页元素的网页效果；以及

显示对应于所述网页元素的代码。

3.如权利要求1所述的网页制作方法，其特征在于，根据所述对应的代码的帮助信息，自定义编辑代码的所述步骤包括：

显示所述对应的代码的帮助信息；

根据所述对应的代码的帮助信息，自定义编辑代码；以及

生成对应于所述自定义编辑代码的网页元素。

4.如权利要求1所述的网页制作方法，还包括：

将所述对应的代码复制到暂存器。

5.如权利要求1所述的网页制作方法，其特征在于，所述帮助信息包括所述代码的使用方法和定义说明。

6.一种网页制作系统，包括：

界面窗口加载模块，配置为加载所述网页制作系统的界面窗口，其中所述界面窗口中包括对网页进行设置的多个选项；

网页元素选择与显示模块，配置为通过对所述界面窗口中的所述多个选项的配置，选择并且显示网页元素和对应的代码；

帮助模块，配置为显示所述对应的代码的帮助信息；以及

代码自定义模块，耦合于所述帮助模块以及所述网页元素选择与显示模块，配置为根据所述帮助信息来自定义编辑代码，

其中所述网页元素选择与显示模块还配置为显示对应于所述自定义编辑代码的网页元素的网页效果。

7.如权利要求6所述的网页制作系统，其特征在于，所述网页元素选择与显示模块配置为：

通过对所述界面窗口中的所述多个选项的配置，选择所述网页元素并且显示对应于所述网页元素的网页效果；以及

显示对应于所述网页元素的代码。

8.如权利要求6所述的网页制作系统，其特征在于，所述代码自定义模块配置为：

根据所述对应的代码的帮助信息，自定义编辑代码；以及

生成对应于所述自定义编辑代码的网页元素。

9.如权利要求6所述的网页制作系统，还包括：

代码暂存模块，耦合于所述网页元素选择与显示模块，配置为复制并且暂存所述对应的代码。

10.如权利要求6所述的网页制作系统，其特征在于，所述帮助信息包括所述代码的使用方法和定义说明。