门户网站页面的编写方法及系统的制作方法
【专利摘要】本发明提供了门户网站页面的编写方法及系统，其中，该方法包括：获取页面编写插件，安装页面编写插件，显示插件面板，插件面板包含与可交互界面对应的选择按钮；接收关于指定可交互界面的选择请求，显示指定可交互界面，结合用户在指定可交互界面的输入得到可交互界面的代码片断；展示得到的代码片断，以进行网站页面的后续编写。本发明方案能够提高编写效率，减少下游环节的编写难度，且便于网页维护。
【专利说明】门户网站页面的编写方法及系统
【技术领域】
[0001]本发明涉及网站页面领域，尤其涉及门户网站页面的编写方法及系统。
【背景技术】
[0002]门户网站页面由多个代码片断编写而成，代码片断的类型具体包括超文本标记语言(HTML, Hyper Text Mark-up Language)、层叠样式表(CSS, Cascading Style Sheet)和javascript 等。
[0003]在实践中，门户网站页面由团队中的若干成员协同完成，每个成员分别完成各部分的编写；例如，门户网站页面中需要编写多个html类代码片断，各成员分别编写各部分的html代码，其效率较低。
[0004]并且，每个成员的编写风格各不相同，即使是相同的效果，各个成员也会采用不同的代码片断来实现；例如，需要编写具有某指定效果的文字列表，各成员会采用不同的html代码片断来实现，其效率较低。
[0005]不仅如此，在下游环节中，其他成员进行后续处理时，由于编写风格不一致，会导致用较多的时间读取各种风格的代码片断。
[0006]由以上可见，现有门户网站页面的编写方法存在编写效率较低的缺陷。
【发明内容】
[0007]本发明提供了一种门户网站页面的编写方法，该方法能够提高编写效率，减少下游环节的工作难度。
[0008]本发明提供了一种门户网站页面的编写系统，该系统能够提高编写效率，减少下游环节的工作难度。
[0009]一种门户网站页面的编写方法，该方法包括:
[0010]获取页面编写插件；
[0011]安装页面编写插件，显示插件面板，插件面板包含与可交互界面对应的选择按钮；
[0012]接收关于指定可交互界面的选择请求，显示指定可交互界面，结合用户在指定可交互界面的输入得到可交互界面的代码片断；展示得到的代码片断，以进行网站页面的后
续编写。
[0013]一种门户网站页面的编写系统，该系统包括插件服务器和编写装置；
[0014]所述插件服务器，用于保存页面编写插件，并根据所述编写装置的请求向所述编写装置反馈页面编写插件；
[0015]所述编写装置，用于从所述插件服务器获取页面编写插件，安装页面编写插件，显示插件面板，插件面板包含与可交互界面对应的选择按钮；接收关于指定可交互界面的选择请求，显示指定可交互界面，结合用户在指定可交互界面的输入得到可交互界面的代码片断；展示得到的代码片断，以进行网站页面的后续编写。[0016]从上述方案可以看出，本发明采用页面编写插件进行门户网站页面的编写，页面编写插件提供了统一的代码片断，用户通过点击插件面板上的按钮并结合用户在面板中的输入便可实现代码片断的编写，无需用户分别进行代码片断的编写，从而，提高了编写效率。并且，由于采用了统一的编写风格，在下游环节中，其他成员进行后续处理时，将节省读取代码片断的实践，进而，减少了下游环节的工作难度。
【专利附图】
【附图说明】
[0017]图1为本发明门户网站页面的编写方法示意性流程图；
[0018]图2为本发明将html代码片断制作成的可交互界面实例；
[0019]图3为本发明门户网站页面的编写方法流程图实例；
[0020]图4为本发明门户网站页面的编写系统结构示意图。
【具体实施方式】
[0021]为使本发明的目的、技术方案和优点更加清楚明白，下面结合实施例和附图，对本发明进一步详细说明。
[0022]本发明采用页面编写插件进行门户网站页面的编写，页面编写插件提供了统一的代码片断，用户通过点击插件面板上的按钮并结合用户在面板中的输入便可实现代码片断的编写。参见图1，为本发明门户网站页面的编写方法示意性流程图，其包括以下步骤:
[0023]步骤101，编写门户网站页面中常用的代码片断。
[0024]本步骤为门户网站页面中常用的代码片断进行统一编写，常用的代码片断包括javascript代码片断、html代码片断、css代码片断和抓取代码片断等,具体地:
[0025]I)制定统一的交互原型,编写成javascript代码片断。
[0026]交互原型是为了实现门户网站页面中一些动态的交互功能，如网页中滚动显示的滚动框，编写的javascript代码片断中包含滚动框的尺寸、滚动的间隔时间等参数。
[0027]2)提炼和抽象出门户网站网页中的相同结构，编写成html代码片断和css代码片断。
[0028]门户网站页面中包括若干个显示文本信息的结构，将相同的结构编写成一组html代码片断和CSS代码片断，编写的html代码片断中包含文字大小、行高等文本参数，编写的css代码片断中包含结构样式的参量，如文本标题所在的位置、正文所在的位置、是否有图以及图的位置等信息。
[0029]3)根据常用的数据抓取规则，生成抓取代码片断。
[0030]数据源中数据包括标题、正文、插图等数据，在需要时按照一定的规则分别提取出标题、正文、插图等各部分的数据，以显示在2)中的结构样式内。
[0031]步骤102，将代码片断制作成可交互界面。
[0032]具体地,可利用javascript将代码片断制作成可交互界面。
[0033]代码片断中有一些参量，制作成可交互界面后，用户可在后续的网站页面编写过程中通过可交互界面对参量进行修改；如图2所示，为由某html代码片断制作成的可交互界面，该实例中，可对字体大小、行高、是否图标、图标右侧有无文字等参量进行修改。获取代码片断后，利用javascript将代码片断制作成可交互界面，是本领域技术人员易于实现的，这里不过多赘述。
[0034]步骤103，由可交互界面封装成页面编写插件。
[0035]本步骤可具体包括:通过可扩展标记语言(xml, extensible markup language)代码对可交互界面进行组织，生成Mxi文件；采用Adobe扩展管理器(Extension Manager)将Mxi文件封装成页面编写插件。
[0036]dreamweaver是全球最通用的网页设计工具，是Web站点开发的中心环节。dreamweaver通过与其它群组产品的配合使用，以及结合众多第三方的支持，可轻松完成静态或动态网站的构建。本发明方案用于生成dreamweaver的插件。
[0037]Adobe Extension Manager 为常用的插件封装工具，米用 Adobe ExtensionManager封装得到插件，需先得到Mxi文件；本步骤中先通过xml代码对可交互界面进行组织，生成Mxi文件。Mxi文件是页面编写插件的工程文件，即后缀名为.Mxi的文件。
[0038]得到的页面编写插件的后缀名为.mxp或.zxp。
[0039]步骤101至103为预先生成页面编写插件的步骤。
[0040]当需要编写页面时，执行步骤104至106。
[0041]步骤104，获取页面编写插件。
[0042]预先生成的页面编写插件可放在网络侧的指定位置，在需要时，可根据该指定位置对应的网址下载页面编写插件。
[0043]步骤105，安装页面编写插件，显示插件面板，插件面板包含与可交互界面对应的选择按钮。
[0044]具体地，米用Adobe Extension Manager安装页面编写插件。
[0045]步骤106，接收关于指定可交互界面的选择请求，显示指定可交互界面，结合用户在指定可交互界面的输入得到可交互界面的代码片断；展示得到的代码片断，以进行网站页面的后续编写。
[0046]用户根据需要点击插件面板的选择按钮，以输入关于指定可交互界面的选择请求；显示指定可交互界面后，用户在指定可交互界面上进行参数输入，进而实现对指定可交互界面的代码片断中的参数进行修改，而后，将修改后的代码片断展示给用户，用户便可基于展示得到的代码片断进行网站页面的后续编写；这样，用户通过点击插件面板上的按钮并结合用户在面板中的输入便可实现代码片断的输入，无需用户各自分别进行代码片断的编写。
[0047]本发明还可对常用图片实现代码片断的编写，以提高图片代码的编写效率。具体地，图1的流程中:在步骤103之前，将门户网站页面中出现的图片标注尺寸，将图片编写成包含图片尺寸的图片代码，存储在插件服务器上，并将图片代码在插件服务器的存储地址编写成图片地址代码；步骤103中通过xml代码对可交互界面进行组织时，还通过xml代码对图片地址代码片断进行组织，生成在所述Mxi文件中；相应地，步骤106显示的插件面板还包含与图片地址代码对应的选择按钮，该方法还进一步包括:接收关于指定图片地址代码的选择请求，获取与指定图片地址代码对应的存储地址，根据存储地址从插件服务器获取图片代码，展示获取的图片代码，以进行网站页面的后续编写。图片代码编写完之后，下游环节中编辑人员常需要获知图片尺寸，而采用本发明方案展示的图片代码中包含有图片尺寸，更便于编辑人员识别图片尺寸的大小。[0048]为了便于后续对插件的维护，步骤103之前，还可对可交互界面和图片地址代码进行分类，具体地:对可交互界面和图片地址代码片断进行分类，按照分类名称对可交互界面和图片地址代码进行分别存放。分类的方式有多种，例如按照在网站页面中的功能进行分类，包括:布局、模块、组件、图片显示、扩展、javascript效果、数据抓取等；再如，按照网站页面上的板块内容进行划分，如:体育、国内新闻、国际新闻、娱乐等。
[0049]后续当需要对插件中指定分类的代码进行修改维护时，由分类名称查找到对应的可交互界面和图片地址代码，进行修改维护。这样，可避免在散乱的代码片断中进行查找，更便于修改维护。
[0050]图1的流程中，若步骤101编写的代码片断为统一公用的css代码片断，也就是该CSS代码片断中的参量无需在后续编写过程中修改，则步骤103之前，该方法还包括:将统一公用的css代码片断存储在插件服务器上，并将统一公用的css代码片断在插件服务器的存储地址编写成css地址代码；
[0051]步骤103所述通过xml代码对可交互界面进行组织时,还通过xml代码对css地址代码片断进行组织，生成在所述Mxi文件中；
[0052]相应地，步骤106中显示的插件面板还包含与css地址代码对应的选择按钮，该方法还进一步包括:接收关于指定CSS地址代码的选择请求,获取与指定CSS地址代码对应的存储地址，根据存储地址从插件服务器获取CSS代码片断，展示获取的CSS代码片断，以进行网站页面的后续编写。
[0053]下面以图3所示的实例，对本发明门户网站页面的编写方法进行说明，其包括以下步骤:
[0054]步骤301,制定统一的交互原型,编写成javascript代码片断。
[0055]步骤302，提炼和抽象出门户网站网页中的相同结构，编写成html代码片断和css代码片断，将统一公用的CSS代码片断存储在插件服务器上，并将统一公用的CSS代码片断在插件服务器的存储地址编写成CSS地址代码。
[0056]这里，假设编写成的css代码片断中包含个性化css代码片断和统一公用的css代码片断两部分。
[0057]步骤303，根据常用的数据抓取规则，生成抓取代码片断。
[0058]步骤304,利用javascript将步骤301至303中生成的代码片断制作成可交互界面。
[0059]具体地,将步骤301编写成的javascript代码片断,步骤302编写成的html代码片断、个性化CSS代码片断，以及步骤303编写成的抓取代码片断制作成可交互界面。
[0060]步骤305，将门户网站页面中出现的图片标注尺寸，将图片编写成包含图片尺寸的图片代码片断，存储在插件服务器上，并将图片代码片断在插件服务器的存储地址编写成图片地址代码。
[0061]步骤306，对可交互界面、css地址代码和图片地址代码片断进行分类，按照分类名称进行分别存放。
[0062]步骤307，通过xml代码对可交互界面、css地址代码和图片地址代码进行组织，生成Mxi文件；采用Adobe Extension Manager将Mxi文件封装成页面编写插件。
[0063]步骤308,采用Adobe Extension Manager安装页面编写插件,显示插件面板,插件面板包含与可交互界面、CSS地址代码和图片地址代码对应的选择按钮。
[0064]步骤309，根据用户的选择，并结合界面输入内容，得到代码片断，展示得到的代码片断，以进行网站页面的后续编写。
[0065]如果用户选择的是关于指定可交互界面的按钮，本步骤具体包括:接收关于指定可交互界面的选择请求，显示指定可交互界面，结合用户在指定可交互界面的输入得到可交互界面的代码片断；展示得到的代码片断，以进行网站页面的后续编写。
[0066]如果用户选择的是关于指定css地址代码的按钮，本步骤具体包括:接收关于指定CSS地址代码的选择请求，获取与指定CSS地址代码对应的存储地址，根据存储地址从插件服务器获取CSS代码片断，展示获取的CSS代码片断，以进行网站页面的后续编写。
[0067]如果用户选择的是关于指定图片地址代码的按钮，本步骤具体包括:接收关于指定图片地址代码的选择请求，获取与指定图片地址代码对应的存储地址，根据存储地址从插件服务器获取图片代码，展示获取的图片代码，以进行网站页面的后续编写。
[0068]本发明采用预先生成的页面编写插件进行门户网站页面的编写，页面编写插件提供了统一的代码片断，用户通过点击插件面板上的按钮并结合用户在面板中的输入便可实现代码片断的输入，这样，无需用户各自分别进行代码片断的编写，从而，提高了编写效率。并且，由于采用了统一的编写风格，在下游环节中，其他成员进行后续处理时，将节省读取代码片断的实践，进而，减少了下游环节的工作难度；不仅如此，在之后的网页维护中，能方便维护人员读取并修改代码，提高了网页维护的效率。
[0069]本发明方案尤其使用于资讯类门户网站页面的编写。
[0070]参见图4，为本发明门户网站页面的编写系统结构示意图，该系统包括插件服务器和编写装置；
[0071]所述插件服务器，用于保存页面编写插件，并根据所述编写装置的请求向所述编写装置反馈页面编写插件；
[0072]所述编写装置，用于从所述插件服务器获取页面编写插件，安装页面编写插件，显示插件面板，插件面板包含与可交互界面对应的选择按钮；接收关于指定可交互界面的选择请求，显示指定可交互界面，结合用户在指定可交互界面的输入得到可交互界面的代码片断；展示得到的代码片断，以进行网站页面的后续编写。
[0073]可选地，该系统还包括插件生成装置，用于编写门户网站页面中常用的代码片断，将代码片断制作成可交互界面；由可交互界面封装成页面编写插件，上传给所述插件服务器。
[0074]可选地，所述插件生成装置包括代码生成单元和封装单元；
[0075]所述代码生成单元，用于编写代码片断，将代码片断制作成可交互界面，将生成的可交互界面传送给所述封装单元；
[0076]所述封装单元，用于对可交互界面进行组织，生成Mxi文件；采用AdobeExtension Manager将Mxi文件封装成页面编写插件,上传给所述插件服务器。
[0077]可选地，所述代码生成单元包括代码片断生成模块，用于制定统一的交互原型，编写成javascript代码片断；提炼和抽象出门户网站网页中的相同结构，编写成html代码片断和css代码片断；并根据常用的数据抓取规则，生成抓取代码片断。
[0078]可选地，所述代码生成单元包括图片地址代码生成模块，用于将门户网站页面中出现的图片标注尺寸，将图片编写成包含图片尺寸的图片代码片断，上传给插件服务器进行存储，并将图片代码片断在插件服务器的存储地址编写成图片地址代码，传送给所述封装单元；
[0079]所述封装单元，用于在对可交互界面进行组织时，还对图片地址代码进行组织，生成在所述Mxi文件中；
[0080]所述编写装置显示的插件面板还包含与图片地址代码对应的选择按钮，所述编写装置还用于接收关于指定图片地址代码的选择请求，获取与指定图片地址代码对应的存储地址，根据存储地址从插件服务器获取图片代码片断，展示获取的图片代码，以进行网站页面的后续编写。
[0081 ] 可选地，所述代码生成单元包括css地址代码生成模块，用于将统一公用的css代码片断存储在插件服务器上，并将统一公用的CSS代码片断在插件服务器的存储地址编写成CSS地址代码，将CSS地址代码上传给插件服务器进行存储，并将CSS代码片断在插件服务器的存储地址编写成CSS地址代码，传送给所述封装单元；
[0082]所述封装单元，用于在对可交互界面进行组织时，还对css地址代码进行组织，生成在所述Mxi文件中；
[0083]所述编写装置显示的插件面板还包含与css地址代码对应的选择按钮，所述编写装置还用于接收关于指定CSS地址代码的选择请求，获取与指定CSS地址代码对应的存储地址，根据存储地址从插件服务器获取CSS代码片断，展示获取的CSS代码片断，以进行网站页面的后续编写。
[0084]以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本发明保护的范围之内。
【权利要求】
1.一种门户网站页面的编写方法，其特征在于，该方法包括: 获取页面编写插件； 安装页面编写插件，显示插件面板，插件面板包含与可交互界面对应的选择按钮； 接收关于指定可交互界面的选择请求，显示指定可交互界面，结合用户在指定可交互界面的输入得到可交互界面的代码片断；展示得到的代码片断，以进行网站页面的后续编与。
2.如权利要求1所述的方法，其特征在于，该方法预先生成页面编写插件，具体包括:编写门户网站页面中常用的代码片断，将代码片断制作成可交互界面，由可交互界面封装成页面编写插件。
3.如权利要求2所述的方法，其特征在于，所述由可交互界面封装成页面编写插件包括: 对可交互界面进行组织，生成Mxi文件； 采用Adobe扩展管理器将Mxi文件封装成编写插件。
4.如权利要求2所述的方法，其特征在于，所述编写门户网站页面中常用的代码片断包括: 制定统一的交互原型，编写成javascript代码片断； 提炼和抽象出门户网站网页中`的相同结构，编写成超文本标记语言html代码片断和层叠样式表css代码片断； 根据常用的数据抓取规则，生成抓取代码片断。
5.如权利要求3所述的方法，其特征在于，所述对可交互界面进行组织之前，该方法还包括:将门户网站页面中出现的图片标注尺寸，将图片编写成包含图片尺寸的图片代码片断，存储在插件服务器上，并将图片代码片断在插件服务器的存储地址编写成图片地址代码； 所述对可交互界面进行组织时，还对图片地址代码片断进行组织，生成在所述Mxi文件中。
6.如权利要求5所述的方法，其特征在于，显示的插件面板还包含与图片地址代码对应的选择按钮，该方法还包括:接收关于指定图片地址代码的选择请求，获取与指定图片地址代码对应的存储地址，根据存储地址从插件服务器获取图片代码，展示获取的图片代码，以进行网站页面的后续编写。
7.如权利要求6所述的方法，其特征在于，所述对可交互界面进行组织之前，该方法还包括:对可交互界面和图片地址代码片断进行分类，按照分类名称对可交互界面和图片地址代码进行分别存放； 当需要对插件中指定分类的代码进行修改维护时，该方法还包括:由分类名称查找到对应的可交互界面和图片地址代码，进行修改维护。
8.如权利要求3所述的方法，其特征在于，若编写的代码片断为统一公用的css代码片断，所述对可交互界面进行组织之前，该方法还包括:将统一公用的css代码片断存储在插件服务器上，并将统一公用的css代码片断在插件服务器的存储地址编写成css地址代码； 所述对可交互界面进行组织时，还对css地址代码片断进行组织，生成在所述Mxi文件中； 显示的插件面板还包含与CSS地址代码对应的选择按钮，该方法还包括:接收关于指定CSS地址代码的选择请求，获取与指定CSS地址代码对应的存储地址，根据存储地址从插件服务器获取CSS代码片断，展示获取的CSS代码片断，以进行网站页面的后续编写。
9.一种门户网站页面的编写系统，其特征在于，该系统包括插件服务器和编写装置； 所述插件服务器，用于保存页面编写插件，并根据所述编写装置的请求向所述编写装置反馈页面编写插件； 所述编写装置，用于从所述插件服务器获取页面编写插件，安装页面编写插件，显示插件面板，插件面板包含与可交互界面对应的选择按钮；接收关于指定可交互界面的选择请求，显示指定可交互界面，结合用户在指定可交互界面的输入得到可交互界面的代码片断；展示得到的代码片断，以进行网站页面的后续编写。
10.如权利要求9所述的系统，其特征在于，该系统还包括插件生成装置，用于编写门户网站页面中常用的代码片断，将代码片断制作成可交互界面；由可交互界面封装成页面编写插件，上传给所述插件服务器。
11.如权利要求10所述的系统，其特征在于，所述插件生成装置包括代码生成单元和封装单元； 所述代码生成单元，用于编写代码片断，将代码片断制作成可交互界面，将生成的可交互界面传送给所述封装单元； 所述封装单元，用于对可交互界面进行组织，生成Mxi文件；采用Adobe扩展管理器将Mxi文件封装成页面编写插件，上传给所述插件服务器。
12.如权利要求11所述的系统，其特征在于，所述代码生成单元包括代码片断生成模块，用于制定统一的交互原型，编写成javascript代码片断；提炼和抽象出门户网站网页中的相同结构，编写成html代码片断和css代码片断；并根据常用的数据抓取规则，生成抓取代码片断。
13.如权利要求11所述的系统，其特征在于，所述代码生成单元包括图片地址代码生成模块，用于将门户网站页面中出现的图片标注尺寸，将图片编写成包含图片尺寸的图片代码片断，上传给插件服务器进行存储，并将图片代码片断在插件服务器的存储地址编写成图片地址代码，传送给所述封装单元； 所述封装单元，用于在对可交互界面进行组织时，还对图片地址代码进行组织，生成在所述Mxi文件中。
14.如权利要求13所述的系统，其特征在于，所述编写装置显示的插件面板还包含与图片地址代码对应的选择按钮，所述编写装置还用于接收关于指定图片地址代码的选择请求，获取与指定图片地址代码对应的存储地址，根据存储地址从插件服务器获取图片代码片断，展示获取的图片代码，以进行网站页面的后续编写。
15.如权利要求11所述的系统，其特征在于，所述代码生成单元包括css地址代码生成模块，用于将统一公用的css代码片断存储在插件服务器上，并将统一公用的css代码片断在插件服务器的存储地址编写成css地址代码，将css地址代码上传给插件服务器进行存储，并将css代码片断在插件服务器的存储地址编写成css地址代码，传送给所述封装单元;所述封装单元，用于在对可交互界面进行组织时，还对CSS地址代码进行组织，生成在所述Mxi文件中； 所述编写装置显示的插件面板还包含与css地址代码对应的选择按钮，所述编写装置还用于接收关于指定CSS地址代码的选择请求，获取与指定CSS地址代码对应的存储地址，根据存储地址从插件服务器获取CSS代码片断，展示获取的CSS代码片断，以进行网站页面的后续编与。`
【文档编号】G06F9/44GK103488468SQ201210194955
【公开日】2014年1月1日 申请日期:2012年6月13日 优先权日:2012年6月13日
【发明者】温和, 李杨, 金伟键, 杨孟茹, 李立勇, 姜朋, 张旭, 郭玮, 张耀辉, 汤小军 申请人:腾讯科技（北京）有限公司