本發(fā)明涉及互聯(lián)網(wǎng)領(lǐng)域，具體而言，涉及一種網(wǎng)頁樣式的生成方法和裝置。

背景技術(shù)：

如圖1所示，相關(guān)技術(shù)中，在生成網(wǎng)頁樣式時，由工作人員將配置文件(如顏色配置文件)導(dǎo)入專門定制的客戶端，由客戶端生成配色至EXCEL文件，然后再由開發(fā)人員手動將顏色填入網(wǎng)頁樣式中的某個部分，以生成所需的網(wǎng)頁樣式。

上述的客戶端需要針對不同的用戶需求進(jìn)行定制開發(fā)，在用戶的需求發(fā)生改變時，需要特殊定制并重新打包，由于其是針對某個具體的業(yè)務(wù)定制，靈活性很弱；另外，在生成網(wǎng)頁樣式的過程中，需要工作人員手動導(dǎo)入配置文件，還需要發(fā)開人員手動將識別出的配色填入網(wǎng)頁樣式模板中，以得到目標(biāo)網(wǎng)頁樣式，從而降低了生成網(wǎng)頁樣式的效率。

針對相關(guān)技術(shù)中生成網(wǎng)頁樣式的效率較低的問題，目前尚未提出有效的解決方案。

技術(shù)實(shí)現(xiàn)要素：

本發(fā)明實(shí)施例提供了一種網(wǎng)頁樣式的生成方法和裝置，以至少解決相關(guān)技術(shù)中生成網(wǎng)頁樣式的效率較低的技術(shù)問題。

根據(jù)本發(fā)明實(shí)施例的一個方面，提供了一種網(wǎng)頁樣式的生成方法，該方法包括：獲取網(wǎng)頁客戶端發(fā)送的配置信息，其中，配置信息用于對待配置的網(wǎng)頁樣式模板進(jìn)行配置；按照配置信息對網(wǎng)頁樣式模板進(jìn)行配置，得到目標(biāo)網(wǎng)頁樣式；發(fā)送目標(biāo)網(wǎng)頁樣式至網(wǎng)頁客戶端。

根據(jù)本發(fā)明實(shí)施例的另一方面，還提供了一種網(wǎng)頁樣式的生成方法，該方法包括：獲取配置信息，其中，配置信息用于對待配置的網(wǎng)頁樣式模板進(jìn)行配置；將配置信息發(fā)送至配置模塊，以指示配置模塊按照配置信息對網(wǎng)頁樣式模板進(jìn)行配置；獲取配置模塊按照配置信息對網(wǎng)頁樣式模板進(jìn)行配置得到的目標(biāo)網(wǎng)頁樣式。

根據(jù)本發(fā)明實(shí)施例的一個方面，提供了一種網(wǎng)頁樣式的生成裝置，該裝置包括：第一獲取單元，用于獲取網(wǎng)頁客戶端發(fā)送的配置信息，其中，配置信息用于對待配置的網(wǎng)頁樣式模板進(jìn)行配置；配置單元，用于按照配置信息對網(wǎng)頁樣式模板進(jìn)行配置，得到目標(biāo)網(wǎng)頁樣式；第一發(fā)送單元，用于發(fā)送目標(biāo)網(wǎng)頁樣式至網(wǎng)頁客戶端。

根據(jù)本發(fā)明實(shí)施例的另一個方面，還提供了一種網(wǎng)頁樣式的生成裝置，該裝置包括：第二獲取單元，用于獲取配置信息，其中，配置信息用于對待配置的網(wǎng)頁樣式模板進(jìn)行配置；第三發(fā)送單元，用于將配置信息發(fā)送至配置模塊，以指示配置模塊按照配置信息對網(wǎng)頁樣式模板進(jìn)行配置；第三獲取單元，用于獲取配置模塊按照配置信息對網(wǎng)頁樣式模板進(jìn)行配置得到的目標(biāo)網(wǎng)頁樣式。

在本發(fā)明實(shí)施例中，通過自動讀取網(wǎng)頁客戶端發(fā)送的配置信息，以對網(wǎng)頁樣式模板進(jìn)行配置，并將配置好的目標(biāo)網(wǎng)頁樣式發(fā)送至網(wǎng)頁客戶端進(jìn)行預(yù)覽確認(rèn)，可以解決了相關(guān)技術(shù)中生成網(wǎng)頁樣式的效率較低的技術(shù)問題，進(jìn)而達(dá)到提高網(wǎng)頁樣式的生成效率的技術(shù)效果。

附圖說明

此處所說明的附圖用來提供對本發(fā)明的進(jìn)一步理解，構(gòu)成本申請的一部分，本發(fā)明的示意性實(shí)施例及其說明用于解釋本發(fā)明，并不構(gòu)成對本發(fā)明的不當(dāng)限定。在附圖中：

圖1是相關(guān)技術(shù)中的可選的生成網(wǎng)頁樣式的示意圖；

圖2是根據(jù)本發(fā)明實(shí)施例的網(wǎng)頁樣式的生成方法的硬件環(huán)境的示意圖；

圖3是根據(jù)本發(fā)明實(shí)施例的一種可選的網(wǎng)頁樣式的生成方法的流程圖；

圖4是根據(jù)本發(fā)明實(shí)施例的一種可選的網(wǎng)頁樣式的生成方法的流程圖；

圖5是根據(jù)本發(fā)明實(shí)施例的一種可選的顏色表的示意圖；

圖6是根據(jù)本發(fā)明實(shí)施例的一種可選的網(wǎng)頁樣式模板的示意圖；

圖7是根據(jù)本發(fā)明實(shí)施例的一種可選的網(wǎng)頁樣式的生成方法的流程圖；

圖8是根據(jù)本發(fā)明實(shí)施例的一種可選的網(wǎng)頁樣式的生成方法的流程圖；

圖9是根據(jù)本發(fā)明實(shí)施例的一種可選的網(wǎng)頁樣式的生成方法的流程圖；

圖10是根據(jù)本發(fā)明實(shí)施例的一種可選的系統(tǒng)界面的示意圖；

圖11是根據(jù)本發(fā)明實(shí)施例的一種可選的網(wǎng)頁樣式的生成裝置的示意圖；

圖12是根據(jù)本發(fā)明實(shí)施例的一種可選的網(wǎng)頁樣式的生成裝置的示意圖；

圖13是根據(jù)本發(fā)明實(shí)施例的一種可選的網(wǎng)頁樣式的生成裝置的示意圖；以及

圖14是根據(jù)本發(fā)明實(shí)施例的一種終端的結(jié)構(gòu)框圖。

具體實(shí)施方式

為了使本技術(shù)領(lǐng)域的人員更好地理解本發(fā)明方案，下面將結(jié)合本發(fā)明實(shí)施例中的附圖，對本發(fā)明實(shí)施例中的技術(shù)方案進(jìn)行清楚、完整地描述，顯然，所描述的實(shí)施例僅僅是本發(fā)明一部分的實(shí)施例，而不是全部的實(shí)施例?；诒景l(fā)明中的實(shí)施例，本領(lǐng)域普通技術(shù)人員在沒有做出創(chuàng)造性勞動前提下所獲得的所有其他實(shí)施例，都應(yīng)當(dāng)屬于本發(fā)明保護(hù)的范圍。

需要說明的是，本發(fā)明的說明書和權(quán)利要求書及上述附圖中的術(shù)語“第一”、“第二”等是用于區(qū)別類似的對象，而不必用于描述特定的順序或先后次序。應(yīng)該理解這樣使用的數(shù)據(jù)在適當(dāng)情況下可以互換，以便這里描述的本發(fā)明的實(shí)施例能夠以除了在這里圖示或描述的那些以外的順序?qū)嵤４送?，術(shù)語“包括”和“具有”以及他們的任何變形，意圖在于覆蓋不排他的包含，例如，包含了一系列步驟或單元的過程、方法、系統(tǒng)、產(chǎn)品或設(shè)備不必限于清楚地列出的那些步驟或單元，而是可包括沒有清楚地列出的或?qū)τ谶@些過程、方法、產(chǎn)品或設(shè)備固有的其它步驟或單元。

實(shí)施例1

根據(jù)本發(fā)明實(shí)施例，提供了一種網(wǎng)頁樣式的生成方法的方法實(shí)施例。

可選地，在本實(shí)施例中，上述方法可以應(yīng)用于如圖2所示的由服務(wù)器202和終端204所構(gòu)成的硬件環(huán)境中。如圖2所示，服務(wù)器202通過網(wǎng)絡(luò)與終端204進(jìn)行連接，上述網(wǎng)絡(luò)包括但不限于：廣域網(wǎng)、城域網(wǎng)或局域網(wǎng)，終端204并不限定于PC、手機(jī)、平板電腦等。本發(fā)明實(shí)施例的方法可以由服務(wù)器202來執(zhí)行，也可以由終端204來執(zhí)行，還可以是由服務(wù)器202和終端204共同執(zhí)行。其中，終端204執(zhí)行本發(fā)明實(shí)施例的方法也可以是由安裝在其上的客戶端來執(zhí)行。

圖3是根據(jù)本發(fā)明實(shí)施例的一種可選的網(wǎng)頁樣式的生成方法的流程圖，如圖3所示，該方法可以包括以下步驟：

步驟S302，獲取網(wǎng)頁客戶端發(fā)送的配置信息，配置信息用于對待配置的網(wǎng)頁樣式模板進(jìn)行配置；

步驟S304，按照配置信息對網(wǎng)頁樣式模板進(jìn)行配置，得到目標(biāo)網(wǎng)頁樣式；

步驟S306，發(fā)送目標(biāo)網(wǎng)頁樣式至網(wǎng)頁客戶端。

通過上述步驟S302至步驟S306，通過自動讀取網(wǎng)頁客戶端發(fā)送的配置信息，以對網(wǎng)頁樣式模板進(jìn)行配置，并將配置好的目標(biāo)網(wǎng)頁樣式發(fā)送至網(wǎng)頁客戶端進(jìn)行預(yù)覽確認(rèn)，可以解決了相關(guān)技術(shù)中生成網(wǎng)頁樣式的效率較低的技術(shù)問題，進(jìn)而達(dá)到提高網(wǎng)頁樣式的生成效率的技術(shù)效果。

上述步驟的執(zhí)行主體可以為系統(tǒng)后端(例如PHP后端)；網(wǎng)頁樣式指HTML網(wǎng)頁中的樣式，如HTML5中的網(wǎng)頁樣式。使用上述的步驟，在經(jīng)常需要換色系的網(wǎng)頁中，如官網(wǎng)、博客等，通過生成好的換色樣式文件，可以輕松實(shí)現(xiàn)這些場景的換色。

上述的網(wǎng)頁樣式可以通過使用層疊樣式表實(shí)現(xiàn)，層疊樣式表的英文全稱為Cascading Style Sheets，簡稱為CSS，是一種用來為結(jié)構(gòu)化文檔(如HTML文檔)添加樣式(如字體、間距和顏色等)的計算機(jī)語言；HTML5是HTML(HyperText Markup Language，超文本標(biāo)記語言)最新的修訂版本，2014年10月由萬維網(wǎng)聯(lián)盟完成標(biāo)準(zhǔn)制定。通過HTML5的新特性，可以更容易的在網(wǎng)頁中添加和處理多媒體和圖片等內(nèi)容。

需要說明的是，在執(zhí)行步驟S302的獲取網(wǎng)頁客戶端發(fā)送的配置信息之前，需要對配置模塊的網(wǎng)頁樣式模板進(jìn)行創(chuàng)建或者修改，下面以修改網(wǎng)頁樣式模板的配色方案為例進(jìn)行說明，如圖4所示：

步驟S402，進(jìn)入本系統(tǒng)，程序員或者具有后臺修改權(quán)項(xiàng)的人員進(jìn)入系統(tǒng)的新增配色方案或者修改配色方案的界面。

步驟S404，判斷是否有配色方案，若有則執(zhí)行步驟S406，否則執(zhí)行步驟S410。

步驟S406，修改顏色表，如根據(jù)提示，重新填寫顏色的名字、圖片定位、樣式模板占位代碼等信息。

創(chuàng)建的顏色表如圖5所示，主要包括顏色名字、顏色XY值以及模板代碼，顏色名稱用于表示該顏色的主要作用對象；顏色XY值表示采集顏色的采集坐標(biāo)；模板代碼表示該顏色在網(wǎng)頁樣式模板中的占位碼。

網(wǎng)頁樣式模板如圖6所示，例如，黑色橢圓內(nèi)的字符“--{color1}--”即占位碼。

步驟S408，修改配色模板(即網(wǎng)頁樣式模板)，例如，把修改后的占位代碼填入模板中。

步驟S410，創(chuàng)建顏色表，如根據(jù)提示，填寫顏色的名字、圖片定位、樣式模板占位代碼等信息。

步驟S412，創(chuàng)建配色模板(即網(wǎng)頁樣式模板)，例如，把占位代碼填入模板中。

在修改或者創(chuàng)建完畢之后，點(diǎn)擊新增或者保存創(chuàng)建或者編輯的網(wǎng)頁樣式模板，然后結(jié)束本次操作的流程。

在執(zhí)行步驟S302的獲取網(wǎng)頁客戶端發(fā)送的配置信息之前，在接收到網(wǎng)頁客戶端的請求時，響應(yīng)請求，發(fā)送應(yīng)用于網(wǎng)頁樣式模板的配置方案的配置方案數(shù)據(jù)至網(wǎng)頁客戶端，配置方案數(shù)據(jù)用于指示獲取一個或多個配置參數(shù)，網(wǎng)頁樣式的配置方案為預(yù)先創(chuàng)建或者預(yù)先修改過的。

也即，在網(wǎng)頁客戶端上，當(dāng)用戶選擇的合適的配置方案之后，網(wǎng)頁客戶端會向配置模塊請求該配置方案相關(guān)的數(shù)據(jù)(即配置方案數(shù)據(jù))，下面以配置網(wǎng)頁樣式模板的顏色為例詳述本申請的實(shí)施例，如圖7所示：

步驟S702，網(wǎng)頁設(shè)計師設(shè)計需要的配色圖。該配色圖中可以配置一種顏色或者多種顏色，具體可以根據(jù)需求進(jìn)行取舍。

步驟S704，網(wǎng)頁設(shè)計師設(shè)計點(diǎn)擊進(jìn)入本申請的系統(tǒng)。

在該步驟中，當(dāng)網(wǎng)頁設(shè)計師選中了網(wǎng)頁的配置方案之后，網(wǎng)頁客戶端就會向配置模塊請求該配置方案相關(guān)的數(shù)據(jù)，待配置模塊返回相關(guān)的數(shù)據(jù)之后，網(wǎng)頁客戶端提示用戶可以上傳配色圖片，以按照配置方案獲取用于該配置方案的相關(guān)數(shù)據(jù)(如顏色數(shù)據(jù))。

步驟S706，網(wǎng)頁設(shè)計師拖拽圖片進(jìn)對應(yīng)區(qū)域。由網(wǎng)頁客戶端識別出其中的顏色。

步驟S708，生成對應(yīng)的樣式。配置模塊根據(jù)網(wǎng)頁客戶端識別出的顏色對網(wǎng)頁樣式模板進(jìn)行配置，得到對應(yīng)的樣式。

步驟S710，交付生成的樣式給程序員。

在上述實(shí)施例中，提供的是自研首創(chuàng)的一種傻瓜式網(wǎng)頁端生成樣式的系統(tǒng)，依賴于網(wǎng)頁和后端的交互，通過本技術(shù)方案，設(shè)計師可以預(yù)先配置需要取色的點(diǎn)，然后上傳配色圖片，利用CANVAS(HTML中的一種工具)進(jìn)行圖像顏色識別，并提取出對應(yīng)色塊的顏色，后端匹配對應(yīng)的網(wǎng)頁樣式模板，自動填充對應(yīng)樣式，省去了技術(shù)人員手工根據(jù)配色生成樣式表的環(huán)節(jié)，節(jié)省了生成網(wǎng)頁樣式的時間。

在步驟S302提供的技術(shù)方案中，獲取網(wǎng)頁客戶端發(fā)送的配置信息是指獲取網(wǎng)頁客戶端通過預(yù)設(shè)通訊協(xié)議發(fā)送的配置信息，該預(yù)設(shè)協(xié)議是指網(wǎng)頁客戶端和配置模塊(即系統(tǒng)后臺或者后端)。

在步驟S302中，按照配置信息對網(wǎng)頁樣式模板進(jìn)行配置包括：讀取配置信息中的一個或多個配置參數(shù)；通過一個或多個配置參數(shù)配置網(wǎng)頁樣式模板中的一個或多個屬性，其中，每個配置參數(shù)用于配置一個屬性。

可選地，讀取配置信息中的一個或多個配置參數(shù)包括以下至少之一：讀取配置信息中用于配置顏色屬性的配置參數(shù)；讀取配置信息中用于配置字體屬性的配置參數(shù)；讀取配置信息中用于配置間距屬性的配置參數(shù)。

可選地，通過一個或多個配置參數(shù)配置網(wǎng)頁樣式模板中的一個或多個屬性可以通過如下方式實(shí)現(xiàn)：讀取配置信息中與一個或多個屬性中任一屬性對應(yīng)的占位信息；使用與任一屬性對應(yīng)的配置參數(shù)替換網(wǎng)頁樣式模板中與任一屬性對應(yīng)的占位信息。

在步驟S306中，發(fā)送目標(biāo)網(wǎng)頁樣式至網(wǎng)頁客戶端可以采用直接發(fā)送或者間接發(fā)送的方式。例如，采用間接發(fā)送的方式，配置模塊將生成的樣式模板發(fā)送至服務(wù)器端，由服務(wù)器端生成對應(yīng)的下載鏈接，網(wǎng)頁客戶端通過服務(wù)器下載該網(wǎng)頁樣式，以進(jìn)行查看。

在上述實(shí)施例中，為了優(yōu)化中間環(huán)節(jié)，省去中間程序員參與的部分，本申請的配置模塊選擇使用PHP后端技術(shù)，通過后端生成樣式，這樣，在應(yīng)對用戶的需求時，開發(fā)者可以快速修改代碼，部署完直接生效，十分便捷，可以提高生成網(wǎng)頁樣式的效率；使用本申請的技術(shù)方案，可省去程序員參與環(huán)節(jié)，程序員先設(shè)定圖片取色的定位、配置配色相關(guān)的樣式模板后就無需再參與；簡化設(shè)計師步驟，設(shè)計師只需要將配色文件拖拽進(jìn)網(wǎng)頁，就能生成根據(jù)上述程序員配置好的顏色樣式。

根據(jù)本發(fā)明實(shí)施例，還提供了一種網(wǎng)頁樣式的生成方法的方法實(shí)施例。

圖8是根據(jù)本發(fā)明實(shí)施例的一種可選的網(wǎng)頁樣式的生成方法的流程圖，如圖8所示，該方法可以包括以下步驟：

步驟S802，獲取配置信息，配置信息用于對待配置的網(wǎng)頁樣式模板進(jìn)行配置；

步驟S804，將配置信息發(fā)送至配置模塊，以指示配置模塊按照配置信息對網(wǎng)頁樣式模板進(jìn)行配置；

步驟S806，獲取配置模塊按照配置信息對網(wǎng)頁樣式模板進(jìn)行配置得到的目標(biāo)網(wǎng)頁樣式。

通過上述步驟S802至步驟S806，通過網(wǎng)頁客戶端進(jìn)行配置信息的識別發(fā)送，配置模塊自動讀取網(wǎng)頁客戶端發(fā)送的配置信息，以對網(wǎng)頁樣式模板進(jìn)行配置，并將配置好的目標(biāo)網(wǎng)頁樣式發(fā)送至網(wǎng)頁客戶端進(jìn)行預(yù)覽確認(rèn)，可以解決了相關(guān)技術(shù)中生成網(wǎng)頁樣式的效率較低的技術(shù)問題，進(jìn)而達(dá)到提高網(wǎng)頁樣式的生成效率的技術(shù)效果。

需要說明的是，為了解決相關(guān)技術(shù)中遇到的問題，由于網(wǎng)頁客戶端非常靈活，使用者無需投入任何成本，因此本申請選擇使用網(wǎng)頁客戶端，在應(yīng)對用戶的需求變更時，開發(fā)者可以快速修改代碼，無需重新打包，從而節(jié)省了重新定制客戶端的成本。另外，在相關(guān)技術(shù)中需要使用定制的客戶端，在使用該定制的客戶端時，操作較繁瑣，且在用戶需求發(fā)生變更時，該客戶端失效，需要重新進(jìn)行定制生成，而在本申請中使用網(wǎng)頁形式進(jìn)行圖片顏色的識別，用戶僅需在選擇好配置方案后導(dǎo)入配色圖片即可，操作簡便快捷，相關(guān)的工作人員可直接使用本申請快速地進(jìn)行網(wǎng)頁樣式的配置。

在步驟S802中，獲取配置信息包括：在接收到配置指示(該配置指示可以為用戶選擇配置方案的操作指示)時，向配置模塊請求與配置指示所指示的配置方案對應(yīng)的配置方案數(shù)據(jù)；基于接收到的配置方案數(shù)據(jù)中的標(biāo)識信息從接收到的配置文件中獲取一個或多個配置參數(shù)，其中，一個或多個配置參數(shù)用于配置網(wǎng)頁樣式模板中一個或多個屬性，配置信息中攜帶有一個或多個配置參數(shù)和與每個配置參數(shù)對應(yīng)的占位信息，其中，占位信息來源于配置方案數(shù)據(jù)。

在上述實(shí)施例中，一個或多個屬性包括顏色屬性、字體屬性以及間隔屬性中的至少之一。

下面以屬性為顏色屬性為例進(jìn)行說明，在上述的一個或多個屬性包括顏色屬性的情況下，基于接收到的配置方案數(shù)據(jù)中的標(biāo)識信息從接收到的配置文件中獲取一個或多個配置參數(shù)包括：在網(wǎng)頁客戶端上接收作為配置文件的配色圖片；按照標(biāo)識信息所標(biāo)識的位置從配色圖片中識別出用于配置顏色屬性的配置參數(shù)。

具體地，按照標(biāo)識信息所標(biāo)識的位置從配色圖片中識別出用于配置顏色屬性的配置參數(shù)包括：在網(wǎng)頁客戶端上使用CANVAS識別出配色圖片中標(biāo)識信息所標(biāo)識的位置的RGB值；將RGB值作為用于配置顏色屬性的配置參數(shù)。

在本申請的技術(shù)方案中，相對于相關(guān)技術(shù)中使用定制客戶端進(jìn)行顏色信息的采集，由于生成網(wǎng)頁樣式的過程中所使用的客戶端是定制的，在網(wǎng)頁樣式模板、取色圖片發(fā)生變更時，需要重新定制客戶端，操作相當(dāng)繁瑣，而在本申請的技術(shù)方案中，程序員可在后端快速修改配置信息(如修改顏色表和/或顏色模板)，修改后立馬生效，從而快速應(yīng)對圖片修改，重新定位顏色的問題。

下面以圖9為例詳述本申請的實(shí)施例，如圖9所示：

步驟S902，程序員通過界面創(chuàng)建或修改配色方案，填寫顏色名、顏色定位、顏色占位符，如圖5所示。

步驟S904，后臺記錄配色方案。

步驟S906，程序員繼續(xù)通過界面，根據(jù)剛才的配色方案，配置樣式模板(創(chuàng)建或修改樣式模板)，代碼形式如圖6所示。

步驟S908，后臺記錄樣式模板，至此程序員已經(jīng)完成了參與的部分。后續(xù)環(huán)節(jié)無需程序員參與。

步驟S910，程序后臺反饋創(chuàng)建成功的消息至系統(tǒng)管理界面。

步驟S912，設(shè)計師進(jìn)入系統(tǒng)前臺(網(wǎng)頁客戶端)，選擇配色方案(由之前的程序員創(chuàng)建)。

步驟S914，系統(tǒng)前臺向程序后臺發(fā)起請求，要求獲得配色方案數(shù)據(jù)。

步驟S916，后臺返回配色方案數(shù)據(jù)到系統(tǒng)前臺。

步驟S918，系統(tǒng)前臺提示設(shè)計師可以上傳配色圖了，設(shè)計師上傳配色圖片(拖拽形式或者常規(guī)上傳均可)，例如，如圖10所示，可以將配色圖片拖入如圖10所示的界面(即配色交付工具的配置界面)，再點(diǎn)擊生成配色樣式表的按鈕即可對各個區(qū)域進(jìn)行配置。

步驟S920，系統(tǒng)前臺結(jié)合配色方案的定位，通過HTML5的新技術(shù)，對圖片對應(yīng)XY值(XY值為圖片的橫軸和縱軸坐標(biāo))的點(diǎn)進(jìn)行取色，然后將取色的結(jié)果顯示在頁面。

步驟S922，設(shè)計師確認(rèn)點(diǎn)擊下載樣式。

步驟S924，系統(tǒng)前臺將取色的結(jié)果以參數(shù)形式傳給后臺。

步驟S926，后臺讀取數(shù)據(jù)庫中該配色方案的樣式模板，后臺挨個將樣式模板中的占位符替換成真實(shí)顏色值，后臺生成最終樣式文件到服務(wù)器，后臺給出下載鏈接。

在本申請的實(shí)施例中，相對于相關(guān)技術(shù)中的在得到了配色EXCEL表后，需要中間程序員將EXCEL表中的配色信息(如RGB值)手動填入網(wǎng)頁樣式模板，以得到目標(biāo)網(wǎng)頁樣式，在本申請的技術(shù)方案中，在工作人員將配色文件導(dǎo)入網(wǎng)頁客戶端后，無需人工參與，可直接生成最后的樣式文件(包括目標(biāo)網(wǎng)頁樣式)，從而節(jié)省了中間程序員參與的環(huán)節(jié)，讓設(shè)計師可直接能得到生成的最后樣式文件，從而解決了生成網(wǎng)頁樣式的效率較低的問題。

需要說明的是，對于前述的各方法實(shí)施例，為了簡單描述，故將其都表述為一系列的動作組合，但是本領(lǐng)域技術(shù)人員應(yīng)該知悉，本發(fā)明并不受所描述的動作順序的限制，因?yàn)橐罁?jù)本發(fā)明，某些步驟可以采用其他順序或者同時進(jìn)行。其次，本領(lǐng)域技術(shù)人員也應(yīng)該知悉，說明書中所描述的實(shí)施例均屬于優(yōu)選實(shí)施例，所涉及的動作和模塊并不一定是本發(fā)明所必須的。

通過以上的實(shí)施方式的描述，本領(lǐng)域的技術(shù)人員可以清楚地了解到根據(jù)上述實(shí)施例的方法可借助軟件加必需的通用硬件平臺的方式來實(shí)現(xiàn)，當(dāng)然也可以通過硬件，但很多情況下前者是更佳的實(shí)施方式?；谶@樣的理解，本發(fā)明的技術(shù)方案本質(zhì)上或者說對現(xiàn)有技術(shù)做出貢獻(xiàn)的部分可以以軟件產(chǎn)品的形式體現(xiàn)出來，該計算機(jī)軟件產(chǎn)品存儲在一個存儲介質(zhì)(如ROM/RAM、磁碟、光盤)中，包括若干指令用以使得一臺終端設(shè)備(可以是手機(jī)，計算機(jī)，服務(wù)器，或者網(wǎng)絡(luò)設(shè)備等)執(zhí)行本發(fā)明各個實(shí)施例所述的方法。

實(shí)施例2

根據(jù)本發(fā)明實(shí)施例，還提供了一種用于實(shí)施上述方法的裝置。圖11是根據(jù)本發(fā)明實(shí)施例的一種可選的網(wǎng)頁樣式的生成裝置的示意圖，如圖11所示，該裝置可以包括：第一獲取單元111、配置單元113以及第一發(fā)送單元115。

第一獲取單元111，用于獲取網(wǎng)頁客戶端發(fā)送的配置信息，其中，配置信息用于對待配置的網(wǎng)頁樣式模板進(jìn)行配置。

配置單元113，用于按照配置信息對網(wǎng)頁樣式模板進(jìn)行配置，得到目標(biāo)網(wǎng)頁樣式。

第一發(fā)送單元115，用于發(fā)送目標(biāo)網(wǎng)頁樣式至網(wǎng)頁客戶端。

通過上述實(shí)施例，通過自動讀取網(wǎng)頁客戶端發(fā)送的配置信息，以對網(wǎng)頁樣式模板進(jìn)行配置，并將配置好的目標(biāo)網(wǎng)頁樣式發(fā)送至網(wǎng)頁客戶端進(jìn)行預(yù)覽確認(rèn)，可以解決了相關(guān)技術(shù)中生成網(wǎng)頁樣式的效率較低的技術(shù)問題，進(jìn)而達(dá)到提高網(wǎng)頁樣式的生成效率的技術(shù)效果。

需要說明的是，該實(shí)施例中的第一獲取單元111可以用于執(zhí)行本申請實(shí)施例1中的步驟S302，該實(shí)施例中的配置單元113可以用于執(zhí)行本申請實(shí)施例1中的步驟S304，該實(shí)施例中的第一發(fā)送單元115可以用于執(zhí)行本申請實(shí)施例1中的步驟S306。

此處需要說明的是，上述模塊與對應(yīng)的步驟所實(shí)現(xiàn)的示例和應(yīng)用場景相同，但不限于上述實(shí)施例1所公開的內(nèi)容。需要說明的是，上述模塊作為裝置的一部分可以運(yùn)行在如圖1所示的硬件環(huán)境中，可以通過軟件實(shí)現(xiàn)，也可以通過硬件實(shí)現(xiàn)。

在上述實(shí)施例中，提供的是自研首創(chuàng)的一種傻瓜式網(wǎng)頁端生成樣式的系統(tǒng)，依賴于網(wǎng)頁和后端的交互，通過本技術(shù)方案，設(shè)計師可以預(yù)先配置需要取色的點(diǎn)，然后上傳配色圖片，利用CANVAS(HTML中的一種工具)進(jìn)行圖像顏色識別，并提取出對應(yīng)色塊的顏色，后端匹配對應(yīng)的網(wǎng)頁樣式模板，自動填充對應(yīng)樣式，省去了技術(shù)人員手工根據(jù)配色生成樣式表的環(huán)節(jié)，節(jié)省了生成網(wǎng)頁樣式的時間。

在本申請的實(shí)施例中，如圖12所示，上述的裝置還包括：第二發(fā)送單元117，用于在獲取網(wǎng)頁客戶端發(fā)送的配置信息之前，在接收到網(wǎng)頁客戶端的請求時，響應(yīng)請求，發(fā)送應(yīng)用于網(wǎng)頁樣式模板的配置方案的配置方案數(shù)據(jù)至網(wǎng)頁客戶端，其中，配置方案數(shù)據(jù)用于指示獲取一個或多個配置參數(shù)，網(wǎng)頁樣式的配置方案為預(yù)先創(chuàng)建或者預(yù)先修改過的。

可選地，上述的配置單元包括：讀取模塊，用于讀取配置信息中的一個或多個配置參數(shù)；配置模塊，用于通過一個或多個配置參數(shù)配置網(wǎng)頁樣式模板中的一個或多個屬性，其中，每個配置參數(shù)用于配置一個屬性。

可選地，上述的讀取模塊還用于：讀取配置信息中用于配置顏色屬性的配置參數(shù)；讀取配置信息中用于配置字體屬性的配置參數(shù)；讀取配置信息中用于配置間距屬性的配置參數(shù)。

可選地，配置模塊包括：讀取子模塊，用于讀取配置信息中與一個或多個屬性中任一屬性對應(yīng)的占位信息；配置子模塊，用于使用與任一屬性對應(yīng)的配置參數(shù)替換網(wǎng)頁樣式模板中與任一屬性對應(yīng)的占位信息。

在上述實(shí)施例中，為了優(yōu)化中間環(huán)節(jié)，省去中間程序員參與的部分，本申請的配置模塊選擇使用PHP后端技術(shù)，通過后端生成樣式，這樣，在應(yīng)對用戶的需求時，開發(fā)者可以快速修改代碼，部署完直接生效，十分便捷，可以提高生成網(wǎng)頁樣式的效率；使用本申請的技術(shù)方案，可省去程序員參與環(huán)節(jié)，程序員先設(shè)定圖片取色的定位、配置配色相關(guān)的樣式模板后就無需再參與；簡化設(shè)計師步驟，設(shè)計師只需要將配色文件拖拽進(jìn)網(wǎng)頁，就能生成根據(jù)上述程序員配置好的顏色樣式。

根據(jù)本發(fā)明實(shí)施例的另一個方面，還提供了一種用于實(shí)施上述方法的裝置。圖13是根據(jù)本發(fā)明實(shí)施例的一種可選的網(wǎng)頁樣式的生成裝置的示意圖，如圖13所示，該裝置可以包括：第二獲取單元131、第三發(fā)送單元133以及第三獲取單元135。

第二獲取單元131，用于獲取配置信息，其中，配置信息用于對待配置的網(wǎng)頁樣式模板進(jìn)行配置。

第三發(fā)送單元133，用于將配置信息發(fā)送至配置模塊，以指示配置模塊按照配置信息對網(wǎng)頁樣式模板進(jìn)行配置。

第三獲取單元135，用于獲取配置模塊按照配置信息對網(wǎng)頁樣式模板進(jìn)行配置得到的目標(biāo)網(wǎng)頁樣式。

通過上述實(shí)施例，網(wǎng)頁客戶端進(jìn)行配置信息的識別發(fā)送，配置模塊自動讀取網(wǎng)頁客戶端發(fā)送的配置信息，以對網(wǎng)頁樣式模板進(jìn)行配置，并將配置好的目標(biāo)網(wǎng)頁樣式發(fā)送至網(wǎng)頁客戶端進(jìn)行預(yù)覽確認(rèn)，可以解決了相關(guān)技術(shù)中生成網(wǎng)頁樣式的效率較低的技術(shù)問題，進(jìn)而達(dá)到提高網(wǎng)頁樣式的生成效率的技術(shù)效果。

需要說明的是，該實(shí)施例中的第二獲取單元131可以用于執(zhí)行本申請實(shí)施例1中的步驟S802，該實(shí)施例中的第三發(fā)送單元133可以用于執(zhí)行本申請實(shí)施例1中的步驟S804，該實(shí)施例中的第三獲取單元135可以用于執(zhí)行本申請實(shí)施例1中的步驟S806。

此處需要說明的是，上述模塊與對應(yīng)的步驟所實(shí)現(xiàn)的示例和應(yīng)用場景相同，但不限于上述實(shí)施例1所公開的內(nèi)容。需要說明的是，上述模塊作為裝置的一部分可以運(yùn)行在如圖1所示的硬件環(huán)境中，可以通過軟件實(shí)現(xiàn)，也可以通過硬件實(shí)現(xiàn)。

可選地，上述的第二獲取單元包括：請求模塊，用于在接收到配置指示時，向配置模塊請求與配置指示所指示的配置方案對應(yīng)的配置方案數(shù)據(jù)；獲取模塊，用于基于接收到的配置方案數(shù)據(jù)中的標(biāo)識信息從接收到的配置文件中獲取一個或多個配置參數(shù)，其中，一個或多個配置參數(shù)用于配置網(wǎng)頁樣式模板中一個或多個屬性，配置信息中攜帶有一個或多個配置參數(shù)和與每個配置參數(shù)對應(yīng)的占位信息，其中，占位信息來源于配置方案數(shù)據(jù)。

上述的一個或多個屬性包括顏色屬性、字體屬性以及間隔屬性中的至少之一，其中，在一個或多個屬性包括顏色屬性的情況下，獲取模塊包括：接收子模塊，用于在網(wǎng)頁客戶端上接收作為配置文件的配色圖片；識別子模塊，用于按照標(biāo)識信息所標(biāo)識的位置從配色圖片中識別出用于配置顏色屬性的配置參數(shù)。

可選地，上述的識別子模塊還用于：在網(wǎng)頁客戶端上使用CANVAS識別出配色圖片中標(biāo)識信息所標(biāo)識的位置的RGB值；將RGB值作為用于配置顏色屬性的配置參數(shù)。

在本申請的實(shí)施例中，相對于相關(guān)技術(shù)中的在得到了配色EXCEL表后，需要中間程序員將EXCEL表中的配色信息(如RGB值)手動填入網(wǎng)頁樣式模板，以得到目標(biāo)網(wǎng)頁樣式，在本申請的技術(shù)方案中，在工作人員將配色文件導(dǎo)入網(wǎng)頁客戶端后，無需人工參與，可直接生成最后的樣式文件(包括目標(biāo)網(wǎng)頁樣式)，從而節(jié)省了中間程序員參與的環(huán)節(jié)，讓設(shè)計師可直接能得到生成的最后樣式文件，從而解決了生成網(wǎng)頁樣式的效率較低的問題。

此處需要說明的是，上述模塊與對應(yīng)的步驟所實(shí)現(xiàn)的示例和應(yīng)用場景相同，但不限于上述實(shí)施例1所公開的內(nèi)容。需要說明的是，上述模塊作為裝置的一部分可以運(yùn)行在如圖2所示的硬件環(huán)境中，可以通過軟件實(shí)現(xiàn)，也可以通過硬件實(shí)現(xiàn)，其中，硬件環(huán)境包括網(wǎng)絡(luò)環(huán)境。

實(shí)施例3

根據(jù)本發(fā)明實(shí)施例，還提供了一種用于實(shí)施上述網(wǎng)頁樣式的生成方法的服務(wù)器或終端。

圖14是根據(jù)本發(fā)明實(shí)施例的一種終端的結(jié)構(gòu)框圖，如圖14所示，該終端可以包括：一個或多個(圖中僅示出一個)處理器1401、存儲器1403、以及傳輸裝置1405(如上述實(shí)施例中的發(fā)送裝置)，如圖14所示，該終端還可以包括輸入輸出設(shè)備1407。

其中，存儲器1403可用于存儲軟件程序以及模塊，如本發(fā)明實(shí)施例中的方法和裝置對應(yīng)的程序指令/模塊，處理器1401通過運(yùn)行存儲在存儲器1403內(nèi)的軟件程序以及模塊，從而執(zhí)行各種功能應(yīng)用以及數(shù)據(jù)處理，即實(shí)現(xiàn)上述的方法。存儲器1403可包括高速隨機(jī)存儲器，還可以包括非易失性存儲器，如一個或者多個磁性存儲裝置、閃存、或者其他非易失性固態(tài)存儲器。在一些實(shí)例中，存儲器1403可進(jìn)一步包括相對于處理器1401遠(yuǎn)程設(shè)置的存儲器，這些遠(yuǎn)程存儲器可以通過網(wǎng)絡(luò)連接至終端。上述網(wǎng)絡(luò)的實(shí)例包括但不限于互聯(lián)網(wǎng)、企業(yè)內(nèi)部網(wǎng)、局域網(wǎng)、移動通信網(wǎng)及其組合。

上述的傳輸裝置1405用于經(jīng)由一個網(wǎng)絡(luò)接收或者發(fā)送數(shù)據(jù)，還可以用于處理器與存儲器之間的數(shù)據(jù)傳輸。上述的網(wǎng)絡(luò)具體實(shí)例可包括有線網(wǎng)絡(luò)及無線網(wǎng)絡(luò)。在一個實(shí)例中，傳輸裝置1405包括一個網(wǎng)絡(luò)適配器(Network Interface Controller，NIC)，其可通過網(wǎng)線與其他網(wǎng)絡(luò)設(shè)備與路由器相連從而可與互聯(lián)網(wǎng)或局域網(wǎng)進(jìn)行通訊。在一個實(shí)例中，傳輸裝置1405為射頻(Radio Frequency，RF)模塊，其用于通過無線方式與互聯(lián)網(wǎng)進(jìn)行通訊。

其中，具體地，存儲器1403用于存儲應(yīng)用程序。

處理器1401可以通過傳輸裝置1405調(diào)用存儲器1403存儲的應(yīng)用程序，以執(zhí)行下述步驟：獲取網(wǎng)頁客戶端發(fā)送的配置信息，其中，配置信息用于對待配置的網(wǎng)頁樣式模板進(jìn)行配置；按照配置信息對網(wǎng)頁樣式模板進(jìn)行配置，得到目標(biāo)網(wǎng)頁樣式；發(fā)送目標(biāo)網(wǎng)頁樣式至網(wǎng)頁客戶端。

處理器1401還用于執(zhí)行下述步驟：獲取配置信息，其中，配置信息用于對待配置的網(wǎng)頁樣式模板進(jìn)行配置；將配置信息發(fā)送至配置模塊，以指示配置模塊按照配置信息對網(wǎng)頁樣式模板進(jìn)行配置；獲取配置模塊按照配置信息對網(wǎng)頁樣式模板進(jìn)行配置得到的目標(biāo)網(wǎng)頁樣式。

采用本發(fā)明實(shí)施例，通過自動讀取網(wǎng)頁客戶端發(fā)送的配置信息，以對網(wǎng)頁樣式模板進(jìn)行配置，并將配置好的目標(biāo)網(wǎng)頁樣式發(fā)送至網(wǎng)頁客戶端進(jìn)行預(yù)覽確認(rèn)，可以解決了相關(guān)技術(shù)中生成網(wǎng)頁樣式的效率較低的技術(shù)問題，進(jìn)而達(dá)到提高網(wǎng)頁樣式的生成效率的技術(shù)效果。

可選地，本實(shí)施例中的具體示例可以參考上述實(shí)施例1和實(shí)施例2中所描述的示例，本實(shí)施例在此不再贅述。

本領(lǐng)域普通技術(shù)人員可以理解，圖14所示的結(jié)構(gòu)僅為示意，終端可以是智能手機(jī)(如Android手機(jī)、iOS手機(jī)等)、平板電腦、掌上電腦以及移動互聯(lián)網(wǎng)設(shè)備(Mobile Internet Devices，MID)、PAD等終端設(shè)備。圖14其并不對上述電子裝置的結(jié)構(gòu)造成限定。例如，終端還可包括比圖14中所示更多或者更少的組件(如網(wǎng)絡(luò)接口、顯示裝置等)，或者具有與圖14所示不同的配置。

本領(lǐng)域普通技術(shù)人員可以理解上述實(shí)施例的各種方法中的全部或部分步驟是可以通過程序來指令終端設(shè)備相關(guān)的硬件來完成，該程序可以存儲于一計算機(jī)可讀存儲介質(zhì)中，存儲介質(zhì)可以包括：閃存盤、只讀存儲器(Read-Only Memory，ROM)、隨機(jī)存取器(Random Access Memory，RAM)、磁盤或光盤等。

實(shí)施例4

本發(fā)明的實(shí)施例還提供了一種存儲介質(zhì)?？蛇x地，在本實(shí)施例中，上述存儲介質(zhì)可以用于執(zhí)行網(wǎng)頁樣式的生成方法的程序代碼。

可選地，在本實(shí)施例中，上述存儲介質(zhì)可以位于上述實(shí)施例所示的網(wǎng)絡(luò)中的多個網(wǎng)絡(luò)設(shè)備中的至少一個網(wǎng)絡(luò)設(shè)備上。

可選地，在本實(shí)施例中，存儲介質(zhì)被設(shè)置為存儲用于執(zhí)行以下步驟的程序代碼：

S1，獲取網(wǎng)頁客戶端發(fā)送的配置信息，其中，配置信息用于對待配置的網(wǎng)頁樣式模板進(jìn)行配置；

S2，按照配置信息對網(wǎng)頁樣式模板進(jìn)行配置，得到目標(biāo)網(wǎng)頁樣式；

S3，發(fā)送目標(biāo)網(wǎng)頁樣式至網(wǎng)頁客戶端。

可選地，存儲介質(zhì)還被設(shè)置為存儲用于執(zhí)行以下步驟的程序代碼：獲取網(wǎng)頁客戶端發(fā)送的配置信息，其中，配置信息用于對待配置的網(wǎng)頁樣式模板進(jìn)行配置；按照配置信息對網(wǎng)頁樣式模板進(jìn)行配置，得到目標(biāo)網(wǎng)頁樣式；發(fā)送目標(biāo)網(wǎng)頁樣式至網(wǎng)頁客戶端。

可選地，本實(shí)施例中的具體示例可以參考上述實(shí)施例1和實(shí)施例2中所描述的示例，本實(shí)施例在此不再贅述。

可選地，在本實(shí)施例中，上述存儲介質(zhì)可以包括但不限于：U盤、只讀存儲器(ROM，Read-Only Memory)、隨機(jī)存取存儲器(RAM，Random Access Memory)、移動硬盤、磁碟或者光盤等各種可以存儲程序代碼的介質(zhì)。

上述本發(fā)明實(shí)施例序號僅僅為了描述，不代表實(shí)施例的優(yōu)劣。

上述實(shí)施例中的集成的單元如果以軟件功能單元的形式實(shí)現(xiàn)并作為獨(dú)立的產(chǎn)品銷售或使用時，可以存儲在上述計算機(jī)可讀取的存儲介質(zhì)中?；谶@樣的理解，本發(fā)明的技術(shù)方案本質(zhì)上或者說對現(xiàn)有技術(shù)做出貢獻(xiàn)的部分或者該技術(shù)方案的全部或部分可以以軟件產(chǎn)品的形式體現(xiàn)出來，該計算機(jī)軟件產(chǎn)品存儲在存儲介質(zhì)中，包括若干指令用以使得一臺或多臺計算機(jī)設(shè)備(可為個人計算機(jī)、服務(wù)器或者網(wǎng)絡(luò)設(shè)備等)執(zhí)行本發(fā)明各個實(shí)施例所述方法的全部或部分步驟。

在本發(fā)明的上述實(shí)施例中，對各個實(shí)施例的描述都各有側(cè)重，某個實(shí)施例中沒有詳述的部分，可以參見其他實(shí)施例的相關(guān)描述。

在本申請所提供的幾個實(shí)施例中，應(yīng)該理解到，所揭露的客戶端，可通過其它的方式實(shí)現(xiàn)。其中，以上所描述的裝置實(shí)施例僅僅是示意性的，例如所述單元的劃分，僅僅為一種邏輯功能劃分，實(shí)際實(shí)現(xiàn)時可以有另外的劃分方式，例如多個單元或組件可以結(jié)合或者可以集成到另一個系統(tǒng)，或一些特征可以忽略，或不執(zhí)行。另一點(diǎn)，所顯示或討論的相互之間的耦合或直接耦合或通信連接可以是通過一些接口，單元或模塊的間接耦合或通信連接，可以是電性或其它的形式。

所述作為分離部件說明的單元可以是或者也可以不是物理上分開的，作為單元顯示的部件可以是或者也可以不是物理單元，即可以位于一個地方，或者也可以分布到多個網(wǎng)絡(luò)單元上。可以根據(jù)實(shí)際的需要選擇其中的部分或者全部單元來實(shí)現(xiàn)本實(shí)施例方案的目的。

另外，在本發(fā)明各個實(shí)施例中的各功能單元可以集成在一個處理單元中，也可以是各個單元單獨(dú)物理存在，也可以兩個或兩個以上單元集成在一個單元中。上述集成的單元既可以采用硬件的形式實(shí)現(xiàn)，也可以采用軟件功能單元的形式實(shí)現(xiàn)。

以上所述僅是本發(fā)明的優(yōu)選實(shí)施方式，應(yīng)當(dāng)指出，對于本技術(shù)領(lǐng)域的普通技術(shù)人員來說，在不脫離本發(fā)明原理的前提下，還可以做出若干改進(jìn)和潤飾，這些改進(jìn)和潤飾也應(yīng)視為本發(fā)明的保護(hù)范圍。