網(wǎng)頁(yè)生成方法及裝置的制造方法
【專利說(shuō)明】
【技術(shù)領(lǐng)域】
[0001]本發(fā)明涉及互聯(lián)網(wǎng)技術(shù)領(lǐng)域，尤其涉及一種網(wǎng)頁(yè)生成方法及裝置。
【【背景技術(shù)】】
[0002]隨著移動(dòng)互聯(lián)網(wǎng)的發(fā)展，出現(xiàn)了大量類似微信、微博等應(yīng)用平臺(tái)。用戶可以在這些應(yīng)用平臺(tái)上分享一些網(wǎng)頁(yè)，這些網(wǎng)頁(yè)主要是超文本標(biāo)記語(yǔ)言第五版本(簡(jiǎn)稱為HTML5)網(wǎng)頁(yè)。幾乎所有內(nèi)容都可以制作成HTML5網(wǎng)頁(yè)，通過(guò)微信、微博等應(yīng)用平臺(tái)進(jìn)行傳播。由此可見(jiàn)，隨著類似微信、微博等應(yīng)用平臺(tái)的發(fā)展，HTML5網(wǎng)頁(yè)的需求量也越來(lái)越大。
[0003]在現(xiàn)有技術(shù)中，一般是由網(wǎng)頁(yè)開(kāi)發(fā)人員根據(jù)預(yù)先設(shè)計(jì)好的圖層文件，例如PSD文件，手動(dòng)編寫(xiě)網(wǎng)頁(yè)源代碼，進(jìn)而根據(jù)網(wǎng)頁(yè)源代碼渲染出HTML5網(wǎng)頁(yè)。這種生成網(wǎng)頁(yè)的方式的效率較低，無(wú)法滿足目前互聯(lián)網(wǎng)對(duì)HTML5網(wǎng)頁(yè)的需求。
【
【發(fā)明內(nèi)容】
】
[0004]本發(fā)明的多個(gè)方面提供一種網(wǎng)頁(yè)生成方法及裝置，用以提高網(wǎng)頁(yè)的生成效率。
[0005]本發(fā)明的一方面，提供一種網(wǎng)頁(yè)生成方法，包括:
[0006]獲取待生成網(wǎng)頁(yè)的圖層文件；
[0007]對(duì)所述圖層文件進(jìn)行解析處理，以獲得所述圖層文件中的圖層及所述圖層的屬性信息；
[0008]將所述圖層映射為所述待生成網(wǎng)頁(yè)上的元素，并將所述圖層的屬性信息映射為所述元素的屬性信息；
[0009]根據(jù)所述元素及所述元素的屬性信息，生成所述待生成網(wǎng)頁(yè)的源文件。
[0010]作為本發(fā)明的進(jìn)一步改進(jìn)，所述對(duì)所述圖層文件進(jìn)行解析處理，以獲得所述圖層文件中的圖層及所述圖層的屬性信息，包括:
[0011]對(duì)所述圖層文件進(jìn)行切片處理，以獲得所述圖層，將所述圖層保存為圖片文件；
[0012]從所述圖層文件的圖層信息中獲取所述圖層的大小及所述圖層在所述圖層文件中的位置，并獲取所述圖層的存儲(chǔ)路徑作為所述圖層的屬性信息。
[0013]作為本發(fā)明的進(jìn)一步改進(jìn)，所述將所述圖層映射為所述待生成網(wǎng)頁(yè)上的元素，并將所述圖層的屬性信息映射為所述元素的屬性信息，包括:
[0014]將所述圖層映射為所述待生成網(wǎng)頁(yè)上的元素，將所述圖層的存儲(chǔ)路徑映射為所述元素的存儲(chǔ)地址，并將所述圖層的大小及所述圖層在所述圖層文件中的位置，映射為所述元素的大小以及所述元素在所述待生成網(wǎng)頁(yè)上的位置。
[0015]作為本發(fā)明的進(jìn)一步改進(jìn)，所述將所述圖層保存為圖片文件，包括:
[0016]在內(nèi)存中創(chuàng)建圖片緩存區(qū)域；
[0017]按照從左至右、從上至下的順序依次掃描所述圖層中的像素點(diǎn)，將所述像素點(diǎn)的顏色信息存入所述圖片緩存區(qū)域；
[0018]當(dāng)所有像素點(diǎn)的顏色信息均存入所述圖片緩存區(qū)域后，將所述圖片緩存區(qū)域保存成圖片文件。
[0019]作為本發(fā)明的進(jìn)一步改進(jìn)，所述根據(jù)所述元素及所述元素的屬性信息，生成所述待生成網(wǎng)頁(yè)的源文件之前，包括:
[0020]對(duì)所述元素及所述元素的屬性信息進(jìn)行預(yù)渲染，以在編輯器中展示所述待生成網(wǎng)頁(yè)對(duì)應(yīng)的可編輯網(wǎng)頁(yè)；
[0021]接收用戶操作所述可編輯網(wǎng)頁(yè)上的所述元素所發(fā)出的網(wǎng)頁(yè)樣式調(diào)整指令；
[0022]根據(jù)所述網(wǎng)頁(yè)樣式調(diào)整指令，調(diào)整所述元素的屬性信息中與網(wǎng)頁(yè)樣式相關(guān)的屬性
?目息。
[0023]作為本發(fā)明的進(jìn)一步改進(jìn)，所述根據(jù)所述元素及所述元素的屬性信息，生成所述待生成網(wǎng)頁(yè)的源文件，包括:
[0024]根據(jù)所述元素及所述元素的屬性信息，對(duì)預(yù)設(shè)的HTML文件模板進(jìn)行具體化，以生成所述待生成網(wǎng)頁(yè)的HTML文件。
[0025]本發(fā)明的另一方面，提供一種網(wǎng)頁(yè)生成裝置，包括:
[0026]獲取模塊，用于獲取待生成網(wǎng)頁(yè)的圖層文件；
[0027]解析模塊，用于對(duì)所述圖層文件進(jìn)行解析處理，以獲得所述圖層文件中的圖層及所述圖層的屬性信息；
[0028]映射模塊，用于將所述圖層映射為所述待生成網(wǎng)頁(yè)上的元素，并將所述圖層的屬性信息映射為所述元素的屬性信息；
[0029]生成模塊，用于根據(jù)所述元素及所述元素的屬性信息，生成所述待生成網(wǎng)頁(yè)的源文件。
[0030]作為本發(fā)明的進(jìn)一步改進(jìn)，所述解析模塊具體用于:
[0031]對(duì)所述圖層文件進(jìn)行切片處理，以獲得所述圖層，將所述圖層保存為圖片文件；
[0032]從所述圖層文件的圖層信息中獲取所述圖層的大小及所述圖層在所述圖層文件中的位置，并獲取所述圖層的存儲(chǔ)路徑作為所述圖層的屬性信息。
[0033]作為本發(fā)明的進(jìn)一步改進(jìn)，所述映射模塊具體用于:
[0034]將所述圖層映射為所述待生成網(wǎng)頁(yè)上的元素，將所述圖層的存儲(chǔ)路徑映射為所述元素的存儲(chǔ)地址，并將所述圖層的大小及所述圖層在所述圖層文件中的位置，映射為所述元素的大小以及所述元素在所述待生成網(wǎng)頁(yè)上的位置。
[0035]作為本發(fā)明的進(jìn)一步改進(jìn)，所述解析模塊具體用于:
[0036]在內(nèi)存中創(chuàng)建圖片緩存區(qū)域；
[0037]按照從左至右、從上至下的順序依次掃描所述圖層中的像素點(diǎn)，將所述像素點(diǎn)的顏色信息存入所述圖片緩存區(qū)域；
[0038]當(dāng)所有像素點(diǎn)的顏色信息均存入所述圖片緩存區(qū)域后，將所述圖片緩存區(qū)域保存成圖片文件。
[0039]作為本發(fā)明的進(jìn)一步改進(jìn)，所述裝置還包括:
[0040]調(diào)整模塊，用于對(duì)所述元素及所述元素的屬性信息進(jìn)行預(yù)渲染，以在編輯器中展示所述待生成網(wǎng)頁(yè)對(duì)應(yīng)的可編輯網(wǎng)頁(yè);接收用戶操作所述可編輯網(wǎng)頁(yè)上的所述元素所發(fā)出的網(wǎng)頁(yè)樣式調(diào)整指令;根據(jù)所述網(wǎng)頁(yè)樣式調(diào)整指令，調(diào)整所述元素的屬性信息中與網(wǎng)頁(yè)樣式相關(guān)的屬性信息。
[0041]作為本發(fā)明的進(jìn)一步改進(jìn)，所述生成模塊具體用于:
[0042]根據(jù)所述元素及所述元素的屬性信息，對(duì)預(yù)設(shè)的HTML文件模板進(jìn)行具體化，以生成所述待生成網(wǎng)頁(yè)的HTML文件。
[0043]由上述可知，本發(fā)明通過(guò)對(duì)待生成網(wǎng)頁(yè)的圖層文件進(jìn)行解析處理，從而獲得圖層文件中的圖層及圖層的屬性信息，進(jìn)而將圖層映射為待生成網(wǎng)頁(yè)上的元素，將圖層的屬性映射為元素的屬性信息，之后根據(jù)元素及元素的屬性信息，生成待生成網(wǎng)頁(yè)的源文件，可以自動(dòng)根據(jù)圖層文件生成網(wǎng)頁(yè)的源文件，與現(xiàn)有技術(shù)中手動(dòng)編寫(xiě)源代碼的方式相比，有利于提高網(wǎng)頁(yè)生成效率，滿足互聯(lián)網(wǎng)的網(wǎng)頁(yè)需求。
【【附圖說(shuō)明】】
[0044]為了更清楚地說(shuō)明本發(fā)明實(shí)施例中的技術(shù)方案，下面將對(duì)實(shí)施例或現(xiàn)有技術(shù)描述中所需要使用的附圖作一簡(jiǎn)單地介紹，顯而易見(jiàn)地，下面描述中的附圖是本發(fā)明的一些實(shí)施例，對(duì)于本領(lǐng)域普通技術(shù)人員來(lái)講，在不付出創(chuàng)造性勞動(dòng)性的前提下，還可以根據(jù)這些附圖獲得其他的附圖。
[0045]圖1為本發(fā)明一實(shí)施例提供的網(wǎng)頁(yè)生成方法的流程示意圖；
[0046]圖2為本發(fā)明另一實(shí)施例提供的網(wǎng)頁(yè)生成裝置的結(jié)構(gòu)示意圖；
[0047]圖3為本發(fā)明又一實(shí)施例提供的網(wǎng)頁(yè)生成裝置的結(jié)構(gòu)示意圖。
【【具體實(shí)施方式】】
[0048]為使本發(fā)明實(shí)施例的目的、技術(shù)方案和優(yōu)點(diǎn)更加清楚，下面將結(jié)合本發(fā)明實(shí)施例中的附圖，對(duì)本發(fā)明實(shí)施例中的技術(shù)方案進(jìn)行清楚、完整地描述，顯然，所描述的實(shí)施例是本發(fā)明一部分實(shí)施例，而不是全部的實(shí)施例?；诒景l(fā)明中的實(shí)施例，本領(lǐng)域普通技術(shù)人員在沒(méi)有作出創(chuàng)造性勞動(dòng)前提下所獲得的所有其他實(shí)施例，都屬于本發(fā)明保護(hù)的范圍。
[0049]圖1為本發(fā)明一實(shí)施例提供的網(wǎng)頁(yè)生成方法的流程示意圖。如圖1所示，該方法包括:
[0050]101、獲取待生成網(wǎng)頁(yè)的圖層文件。
[0051]102、對(duì)上述圖層文件進(jìn)行解析處理，以獲得圖層文件中的圖層及圖層的屬性信息。
[0052]103、將上述圖層映射為待生成網(wǎng)頁(yè)上的元素，并將圖層的屬性信息映射為元素的屬性信息。
[0053]104、根據(jù)上述元素及元素的屬性信息，生成待生成網(wǎng)頁(yè)的源文件。
[0054]本實(shí)施例提供一種網(wǎng)頁(yè)生成方法，主要用于自動(dòng)生成網(wǎng)頁(yè)的源文件，從而實(shí)現(xiàn)網(wǎng)頁(yè)的自動(dòng)生成，不需要編程人員手動(dòng)編寫(xiě)源代碼，有利于提高網(wǎng)頁(yè)生成效率，滿足互聯(lián)網(wǎng)的網(wǎng)頁(yè)需求量。
[0055]值得說(shuō)明的是，本實(shí)施例提供的方法適用于生成各種類型的網(wǎng)頁(yè)，尤其適用于生成頁(yè)面樣式相對(duì)固定、簡(jiǎn)單的網(wǎng)頁(yè)，例如HTML5網(wǎng)頁(yè)。
[0056]在生成網(wǎng)頁(yè)之前，可由網(wǎng)頁(yè)設(shè)計(jì)人員預(yù)先生成待生成網(wǎng)頁(yè)的圖層文件，所述圖層文件是指保留了圖層等圖像文件的全部信息的文件，根據(jù)圖層文件可以快速生成相應(yīng)網(wǎng)頁(yè)。圖層文件需要按照一定的規(guī)則制作，所述規(guī)則主要是指符合待生成網(wǎng)頁(yè)需求的規(guī)則。所述圖層文件可以是但不限于:PSD文件。PSD是圖形設(shè)計(jì)軟件Photoshop的一種圖形文件格式。
[0057]在生成圖層文件之后，網(wǎng)頁(yè)生成裝置可以獲取該圖層文件。具體的，網(wǎng)頁(yè)生成裝置面向網(wǎng)頁(yè)設(shè)計(jì)人員提供上傳功能，這樣網(wǎng)頁(yè)設(shè)計(jì)人員在制作出圖層文件之后，可以向