本發(fā)明涉及互聯(lián)網(wǎng)技術(shù)領(lǐng)域，特別是涉及響應(yīng)式網(wǎng)頁生成方法和裝置。

背景技術(shù)：

響應(yīng)式網(wǎng)站能夠智能地根據(jù)用戶行為以及使用的設(shè)備環(huán)境(系統(tǒng)平臺、屏幕尺寸、屏幕定向等)進(jìn)行相對應(yīng)的布局，響應(yīng)式網(wǎng)站已經(jīng)成為時(shí)下熱門的網(wǎng)站架構(gòu)。

傳統(tǒng)響應(yīng)式網(wǎng)頁開發(fā)難度較大，往往需要耗費(fèi)較高的人力成本和時(shí)間成本。

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

基于此，有必要針對傳統(tǒng)響應(yīng)式網(wǎng)頁開發(fā)難度較大，往往需要耗費(fèi)較高的人力成本和時(shí)間成本的缺陷，提供一種響應(yīng)式網(wǎng)頁生成方法和裝置。

一種響應(yīng)式網(wǎng)頁生成方法，包括：

基于流式布局顯示設(shè)計(jì)區(qū)；

獲取拖拽指令，響應(yīng)所述拖拽指令，在所述設(shè)計(jì)區(qū)內(nèi)顯示區(qū)塊；

獲取對所述區(qū)塊的設(shè)置指令，根據(jù)所述設(shè)置指令獲取區(qū)塊參數(shù)；

根據(jù)所述區(qū)塊參數(shù)，生成html文件、js文件和css文件；

根據(jù)所述html文件、所述js文件和所述css文件生成網(wǎng)頁。

在其中一個(gè)實(shí)施例中，所述獲取拖拽指令，響應(yīng)所述拖拽指令，在所述設(shè)計(jì)區(qū)內(nèi)顯示區(qū)塊的步驟包括：

獲取拖拽指令；

獲取基本參數(shù)；

響應(yīng)所述拖拽指令，根據(jù)所述基本參數(shù)在所述設(shè)計(jì)區(qū)內(nèi)顯示所述區(qū)塊。

在其中一個(gè)實(shí)施例中，所述區(qū)塊參數(shù)包括特效參數(shù)；

所述獲取對所述區(qū)塊的設(shè)置指令，根據(jù)所述設(shè)置指令獲取區(qū)塊參數(shù)的步驟包括：

獲取對所述區(qū)塊的下拉框的下拉指令；

根據(jù)所述下拉指令獲取所述特效參數(shù)。

在其中一個(gè)實(shí)施例中，所述區(qū)塊參數(shù)還包括表單參數(shù)；

所述獲取對所述區(qū)塊的設(shè)置指令，根據(jù)所述設(shè)置指令獲取區(qū)塊參數(shù)的步驟還包括：

創(chuàng)建表單；

獲取對所述表單的表單指令；

根據(jù)所述表單指令獲取所述表單參數(shù)。

在其中一個(gè)實(shí)施例中，所述生成html文件、js文件和css文件的步驟之后還包括：

輸出包含所述html文件、所述js文件和所述css文件的文本文件，并保存所述文本文件。

一種響應(yīng)式網(wǎng)頁生成裝置，包括：

設(shè)計(jì)區(qū)顯示模塊，用于基于流式布局顯示設(shè)計(jì)區(qū)；

區(qū)塊顯示模塊，用于獲取拖拽指令，響應(yīng)所述拖拽指令，在所述設(shè)計(jì)區(qū)內(nèi)顯示區(qū)塊；

區(qū)塊參數(shù)獲取模塊，用于獲取對所述區(qū)塊的設(shè)置指令，根據(jù)所述設(shè)置指令獲取區(qū)塊參數(shù)；

文件生成模塊，用于根據(jù)所述區(qū)塊參數(shù)，生成html文件、js文件和css文件；

網(wǎng)頁生成模塊，用于根據(jù)所述html文件、所述js文件和所述css文件生成網(wǎng)頁。

在其中一個(gè)實(shí)施例中，所述區(qū)塊顯示模塊包括：

拖拽指令獲取單元，用于獲取拖拽指令；

基本參數(shù)獲取單元，用于獲取基本參數(shù)；

區(qū)塊顯示單元，用于響應(yīng)所述拖拽指令，根據(jù)所述基本參數(shù)在所述設(shè)計(jì)區(qū)內(nèi)顯示所述區(qū)塊。

在其中一個(gè)實(shí)施例中，所述區(qū)塊參數(shù)包括特效參數(shù)；

所述區(qū)塊參數(shù)獲取模塊包括：

下拉指令獲取單元，用于獲取對所述區(qū)塊的下拉框的下拉指令；

特效參數(shù)獲取單元，用于根據(jù)所述下拉指令獲取所述特效參數(shù)。

在其中一個(gè)實(shí)施例中，所述區(qū)塊參數(shù)還包括表單參數(shù)；

所述區(qū)塊參數(shù)獲取模塊還包括：

表單創(chuàng)建單元，用于創(chuàng)建表單；

表單指令獲取單元，用于獲取對所述表單的表單指令；

表單參數(shù)獲取單元，用于根據(jù)所述表單指令獲取所述表單參數(shù)。

在其中一個(gè)實(shí)施例中，還包括：

文件保存模塊，用于輸出包含所述html文件、所述js文件和所述css文件的文本文件，并保存所述文本文件。

上述響應(yīng)式網(wǎng)頁生成方法和裝置，通過拖拽指令將區(qū)塊拖拽至設(shè)計(jì)區(qū)并顯示，通過對區(qū)塊的設(shè)置指令獲取到區(qū)塊的區(qū)塊參數(shù)，從而根據(jù)區(qū)塊參數(shù)生成網(wǎng)頁，而無需對網(wǎng)頁進(jìn)行復(fù)雜的樣式設(shè)計(jì)以及編程，使得響應(yīng)式網(wǎng)頁生成更為便捷，有效降低了網(wǎng)頁開發(fā)難度，降低了人力成本和時(shí)間成本。

附圖說明

圖1a為一實(shí)施例的響應(yīng)式網(wǎng)頁生成方法的流程示意圖；

圖1b為另一實(shí)施例的響應(yīng)式網(wǎng)頁生成方法的流程示意圖；

圖1c為另一實(shí)施例的響應(yīng)式網(wǎng)頁生成方法的流程示意圖；

圖1d為另一實(shí)施例的響應(yīng)式網(wǎng)頁生成方法的流程示意圖；

圖1e為另一實(shí)施例的響應(yīng)式網(wǎng)頁生成方法的流程示意圖；

圖2a為一實(shí)施例的響應(yīng)式網(wǎng)頁生成裝置的功能模塊圖；

圖2b為一實(shí)施例的區(qū)塊顯示模塊的功能模塊圖；

圖2c為一實(shí)施例的區(qū)塊參數(shù)獲取模塊的功能模塊圖；

圖2d為另一實(shí)施例的區(qū)塊參數(shù)獲取模塊的功能模塊圖；

圖2e為另一實(shí)施例的響應(yīng)式網(wǎng)頁生成裝置的功能模塊圖。

具體實(shí)施方式

為了便于理解本發(fā)明，下面將參照相關(guān)附圖對本發(fā)明進(jìn)行更全面的描述。附圖中給出了本發(fā)明的較佳實(shí)施例。但是，本文可以以許多不同的形式來實(shí)現(xiàn)，并不限于本文所描述的實(shí)施例。相反地，提供這些實(shí)施例的目標(biāo)是使對本發(fā)明的公開內(nèi)容的理解更加透徹全面。

例如，一種響應(yīng)式網(wǎng)頁生成方法，包括：基于流式布局顯示設(shè)計(jì)區(qū)；獲取拖拽指令，響應(yīng)所述拖拽指令，在所述設(shè)計(jì)區(qū)內(nèi)顯示區(qū)塊；獲取對所述區(qū)塊的設(shè)置指令，根據(jù)所述設(shè)置指令獲取區(qū)塊參數(shù)；根據(jù)所述區(qū)塊參數(shù)，生成html文件、js文件和css文件；根據(jù)所述html文件、所述js文件和所述css文件生成網(wǎng)頁。

上述實(shí)施例中，通過拖拽指令將區(qū)塊拖拽至設(shè)計(jì)區(qū)并顯示，通過對區(qū)塊的設(shè)置指令獲取到區(qū)塊的區(qū)塊參數(shù)，從而根據(jù)區(qū)塊參數(shù)生成網(wǎng)頁，而無需對網(wǎng)頁進(jìn)行復(fù)雜的樣式設(shè)計(jì)以及編程，使得響應(yīng)式網(wǎng)頁生成更為便捷，有效降低了網(wǎng)頁開發(fā)難度，降低了人力成本和時(shí)間成本。

在一個(gè)實(shí)施例中，如圖1a所示，提供一種響應(yīng)式網(wǎng)頁生成方法，包括：

步驟102，基于流式布局顯示設(shè)計(jì)區(qū)。

具體地，流式布局中，網(wǎng)頁的元素之間采用相對定位方式進(jìn)行定位，即一個(gè)網(wǎng)頁元素的位置依賴于相鄰網(wǎng)頁元素的位置和尺寸，例如，流式布局中，目標(biāo)網(wǎng)頁元素尺寸/相鄰網(wǎng)頁元素尺寸＝百分比尺寸；其中，相鄰網(wǎng)頁元素可以為上下文的網(wǎng)頁元素或者左右文的網(wǎng)頁元素；例如，全部網(wǎng)頁元素的位置和尺寸相互限制以適合網(wǎng)頁；又如，某一網(wǎng)頁元素的位置和尺寸確定，其他網(wǎng)頁元素的位置順序依賴于確定位置和尺寸的網(wǎng)頁元素且相互限制以適合網(wǎng)頁；本實(shí)施例中的尺寸可以是像素距離或者是像素長度，其基于網(wǎng)頁元素的基本單位而設(shè)定。

設(shè)計(jì)區(qū)在本實(shí)施例中，可以是工作區(qū)或者測試區(qū)，其用于顯示區(qū)塊，并用于劃分網(wǎng)頁的不同顯示區(qū)域。例如，顯示界面顯示若干設(shè)計(jì)區(qū)，例如，在顯示界面顯示若干設(shè)計(jì)區(qū)，例如，在顯示界面顯示若干大小均一的設(shè)計(jì)區(qū)，例如，在顯示界面顯示若干位置相異且尺寸相異的設(shè)計(jì)區(qū)，例如，設(shè)計(jì)區(qū)還包括工具區(qū)，例如，工具區(qū)內(nèi)顯示若干控件，例如，控件用于接收操作指令。通過將網(wǎng)頁的顯示界面劃分為多個(gè)設(shè)計(jì)區(qū)，并通過工具區(qū)的控件接收操作指令，能夠提高對各顯示界面的設(shè)計(jì)效率。

為了使得網(wǎng)頁設(shè)計(jì)更為靈活，例如，基于流失布局和相對單位顯示設(shè)計(jì)區(qū)，具體地，相對單位即網(wǎng)頁元素的尺寸基于預(yù)定義的尺寸大小，或者說網(wǎng)頁元素的尺寸基于預(yù)定義的像素單元，其可以包含一個(gè)或者多個(gè)像素，即一個(gè)相對單位可以是一個(gè)像素，也可以是多個(gè)像素，而并不是基于原始的像素單元，即該相對單位也可以視為相對尺寸，該相對尺寸可以基于網(wǎng)頁中某一元素而預(yù)設(shè)，這樣，通過相對單元，使得網(wǎng)頁元素的尺寸設(shè)計(jì)和顯示更為靈活，便于對網(wǎng)頁的設(shè)計(jì)和開發(fā)。

步驟104，獲取拖拽指令，響應(yīng)所述拖拽指令，在所述設(shè)計(jì)區(qū)內(nèi)顯示區(qū)塊。

具體地，顯示區(qū)塊為div(division，層疊樣式表中的定位技術(shù))區(qū)塊，其可定義網(wǎng)頁中的分區(qū)或節(jié)。例如，工具區(qū)內(nèi)設(shè)置有div控件，例如，該div控件的使用方式為拖拽，例如，該div控件的激活方式為拖拽，例如，該div空間用于在激活后顯示區(qū)塊。例如，響應(yīng)所述拖拽指令，在所述設(shè)計(jì)區(qū)內(nèi)的預(yù)設(shè)區(qū)域內(nèi)顯示區(qū)塊，例如，該預(yù)設(shè)區(qū)域?yàn)橥献е噶顚?yīng)的設(shè)計(jì)區(qū)，例如，該預(yù)設(shè)區(qū)域?yàn)槟繕?biāo)區(qū)域，例如，該預(yù)設(shè)區(qū)域?yàn)橥献е噶畹哪繕?biāo)區(qū)域，具體地，該拖拽指令由鼠標(biāo)執(zhí)行，當(dāng)獲取到div控件的點(diǎn)擊指令后，div控件隨著鼠標(biāo)的移動而移動，當(dāng)鼠標(biāo)移動至目標(biāo)區(qū)域并釋放點(diǎn)擊指令后，鼠標(biāo)對應(yīng)的目標(biāo)區(qū)域即div控件的預(yù)設(shè)區(qū)域，則在該預(yù)設(shè)區(qū)域顯示區(qū)塊。

通過拖拽指令，還能夠獲取區(qū)塊的屬性，例如，獲取包括區(qū)塊名稱、區(qū)塊的顯示位置、區(qū)塊的相對位置、相對寬度、相對高度以及相對網(wǎng)格占用比例等屬性，例如，獲取輸入指令，獲取區(qū)塊名稱，例如，通過鍵盤接收到的輸入指令，獲取區(qū)塊名稱，例如，通過拖拽指令的目標(biāo)區(qū)域獲取區(qū)塊的顯示位置；例如，通過拖拽指令的目標(biāo)區(qū)域獲取區(qū)塊的相對寬度和相對高度，具體地，通過對區(qū)塊的邊界的拖拽，可以使得區(qū)塊放大或縮小，進(jìn)而獲取區(qū)塊的相對寬度和相對高度。

通過拖拽指令作用于區(qū)塊對應(yīng)地div控件，并根據(jù)該拖拽指令在設(shè)計(jì)區(qū)的預(yù)設(shè)區(qū)域顯示區(qū)塊，使得區(qū)塊的顯示更為便捷，而區(qū)塊顯示后也便于編輯和操作，進(jìn)一步提高設(shè)計(jì)效率。

步驟106，獲取對所述區(qū)塊的設(shè)置指令，根據(jù)所述設(shè)置指令獲取區(qū)塊參數(shù)。

具體地，在區(qū)塊被拖拽至設(shè)計(jì)區(qū)后，通過對區(qū)塊的操作，可以方便地獲取區(qū)塊的設(shè)置指令，根據(jù)該設(shè)置指令則可以獲取到區(qū)塊參數(shù)，該區(qū)塊參數(shù)用于對區(qū)塊的各項(xiàng)參數(shù)進(jìn)行設(shè)定或者限定，進(jìn)而使得區(qū)塊的顯示更為完整。例如，區(qū)塊參數(shù)包括基本參數(shù)、特效參數(shù)、高級參數(shù)以及媒體查詢。

通過獲取對區(qū)塊的設(shè)置指令，使得區(qū)塊的區(qū)塊參數(shù)獲取更為方便快捷，而無需對區(qū)塊的各項(xiàng)參數(shù)進(jìn)行編輯和編程，有效提高了區(qū)塊的設(shè)計(jì)效率。

步驟108，根據(jù)所述區(qū)塊參數(shù)，生成html文件、js文件和css文件。

例如，在各設(shè)計(jì)區(qū)分別顯示一區(qū)塊，例如，獲取每一區(qū)塊的區(qū)塊參數(shù)，例如，獲取多個(gè)區(qū)塊參數(shù)，根據(jù)多個(gè)區(qū)塊參數(shù)，生成html(hypertextmarkuplanguage，超文本標(biāo)記語言)文件、js(javascript，一種直譯式腳本語言)文件和css(cascadingstylesheets，層疊樣式表)文件，具體地，本實(shí)施例中，網(wǎng)頁生成器將區(qū)塊參數(shù)轉(zhuǎn)換為對應(yīng)的html文件、js文件和css文件的語句，并生成對應(yīng)的html文件、js文件和css文件。

步驟110，根據(jù)所述html文件、所述js文件和所述css文件生成網(wǎng)頁。

本實(shí)施例中，根據(jù)html文件、js文件和css文件生成網(wǎng)頁，例如，網(wǎng)頁生成器根據(jù)html文件、js文件和css文件生成網(wǎng)頁。例如，獲取生成控件的點(diǎn)擊指令，根據(jù)html文件、js文件和css文件生成網(wǎng)頁。例如，該網(wǎng)頁生成器設(shè)置有生成按鈕(生成控件)，接收到用戶對生成按鈕的點(diǎn)擊指令，網(wǎng)頁生成器根據(jù)已生成的html文件、js文件和css文件，生成網(wǎng)頁，從而實(shí)現(xiàn)了響應(yīng)式網(wǎng)頁的生成。

上述實(shí)施例中，通過拖拽指令將區(qū)塊拖拽至設(shè)計(jì)區(qū)并顯示，通過對區(qū)塊的設(shè)置指令獲取到區(qū)塊的區(qū)塊參數(shù)，從而根據(jù)區(qū)塊參數(shù)生成網(wǎng)頁，而無需對網(wǎng)頁進(jìn)行復(fù)雜的樣式設(shè)計(jì)以及編程，使得響應(yīng)式網(wǎng)頁生成更為便捷，有效降低了網(wǎng)頁開發(fā)難度，降低了人力成本和時(shí)間成本。

為了更好地顯示區(qū)塊，在一個(gè)實(shí)施例中，如圖1b所示，步驟104包括：

步驟104a，獲取拖拽指令。

步驟104b，獲取基本參數(shù)。

步驟104c，響應(yīng)所述拖拽指令，根據(jù)所述基本參數(shù)在所述設(shè)計(jì)區(qū)內(nèi)顯示所述區(qū)塊。

例如，基本參數(shù)即為基本屬性，例如，該基本參數(shù)包括位置參數(shù)、相對位置參數(shù)、相對寬度、相對高度以及網(wǎng)格占用比例，其用于定義區(qū)塊的基本屬性，定義了區(qū)塊的大小、位置以及比例，使得區(qū)塊能夠完整地顯示，

本實(shí)施例中，通過插件easyui的函數(shù)draggble實(shí)現(xiàn)拖拽功能，將上述函數(shù)關(guān)聯(lián)div即可實(shí)現(xiàn)div區(qū)塊的拖拽釋放，進(jìn)而使得div控件得以拖拽，進(jìn)而在設(shè)計(jì)區(qū)內(nèi)的預(yù)設(shè)區(qū)域顯示區(qū)塊。例如，獲取拖拽指令，調(diào)用插件easyui的函數(shù)draggble，根據(jù)所述基本參數(shù)在所述設(shè)計(jì)區(qū)內(nèi)顯示所述區(qū)塊。

為了更好地顯示區(qū)塊，使得區(qū)塊具有動態(tài)效果，在一個(gè)實(shí)施例中，所述區(qū)塊參數(shù)包括特效參數(shù)。本實(shí)施例中，如圖1c所示，步驟106包括：

步驟106a，獲取對所述區(qū)塊的下拉框的下拉指令。

步驟106b，根據(jù)所述下拉指令獲取所述特效參數(shù)。

例如，顯示區(qū)塊，并在區(qū)塊內(nèi)創(chuàng)建下拉框，顯示下拉框，獲取對下拉框的下拉指令，獲取相應(yīng)特效參數(shù)，例如，在下拉框中顯示若干下拉屬性選項(xiàng)，獲取對下拉屬性選項(xiàng)的選擇指令或點(diǎn)擊指令，獲取下拉屬性，進(jìn)而獲取對應(yīng)的特效參數(shù)，例如，該特效參數(shù)即特效屬性，其在下拉框中以拉下屬性選項(xiàng)的形式體現(xiàn)。

例如，在區(qū)塊內(nèi)創(chuàng)建若干下拉框，例如，在區(qū)塊內(nèi)顯示若干下拉框，例如，各下拉框分別顯示若干下拉屬性選項(xiàng)，不同的下拉框用于顯示不同類型的特效屬性。通過下拉框的下拉指令以及選擇指令或點(diǎn)擊指令，獲取特效參數(shù)，進(jìn)而使得區(qū)塊在顯示時(shí)，具有特效，具有動態(tài)效果。

例如，根據(jù)下拉指令獲取區(qū)塊的js流行特效，又如，根據(jù)下拉指令獲取wow漸入特效。例如，當(dāng)根據(jù)選擇指令選擇對應(yīng)的特效元素后，利用jq(jquery，javascript框架)的添加屬性方法，給區(qū)塊添加class屬性、wow-delay屬性等，并應(yīng)用在區(qū)塊上，使得區(qū)塊顯示特效。

為了便于對區(qū)塊添加高級參數(shù)，使得區(qū)塊顯示更靈活，顯示效果更佳，在一個(gè)實(shí)施例中，所述區(qū)塊參數(shù)還包括表單參數(shù)。本實(shí)施例中，如圖1d所示，步驟106還包括：

步驟106c，創(chuàng)建表單。

步驟106d，獲取對所述表單的表單指令。

步驟106e，根據(jù)所述表單指令獲取所述表單參數(shù)。

例如，該表單參數(shù)包括高級參數(shù)，例如，該高級參數(shù)即高級屬性，例如，高級參數(shù)包括字體顏色、背景顏色、外邊距、內(nèi)邊距、邊框?qū)傩?、是否圓角、是否陰影、是否含動畫以及動畫是2d或3d等。

例如，該表單為屬性表單，具體地，表單為高級屬性表單或者說高級參數(shù)表單，該表單用于為區(qū)塊添加高級屬性，例如，表單用于顯示若干待選的高級參數(shù)，例如，表單包括若干待選的高級參數(shù)的單元格，例如，獲取對各高級參數(shù)對應(yīng)的單元格的選擇指令，獲取高級參數(shù)。

例如，創(chuàng)建表單，獲取對表單的輸入的表單指令，根據(jù)表單指令獲取表單參數(shù)，當(dāng)提交表單時(shí)，利用jq添加css屬性的方法，將所選擇的高級參數(shù)設(shè)置應(yīng)用到區(qū)塊上，并顯示。例如，通過表單的提交按鈕提交表單，例如，獲取對提交按鈕的點(diǎn)擊指令，確定表單參數(shù)，提交表單。

值得一提的是，上述兩個(gè)實(shí)施例中的步驟106a～步驟106b與步驟106c～步驟106e可以同時(shí)在一個(gè)實(shí)施例中實(shí)現(xiàn)，且上述的步驟編號并不用于限制兩個(gè)實(shí)施例的方案實(shí)施順序，即步驟106a～步驟106b與步驟106c～步驟106e可以同時(shí)執(zhí)行，也可以步驟106c～步驟106e先執(zhí)行，隨后執(zhí)行步驟106a～步驟106b，也可以是執(zhí)行步驟106a～步驟106b，再執(zhí)行步驟106c～步驟106e。上述兩個(gè)實(shí)施例的方案執(zhí)行先后順序并不影響區(qū)塊的整體顯示效果，而兩個(gè)實(shí)施例的方案能夠使得區(qū)塊顯示效果更佳，且顯示更為靈活。

例如，該表單參數(shù)還包括媒體查詢參數(shù)，例如，媒體查詢能夠使得網(wǎng)頁根據(jù)設(shè)備顯示器的特性，比如，視口寬度、屏幕比例、設(shè)備方向(橫向或縱向)為網(wǎng)頁設(shè)定css樣式，媒體查詢由媒體類型和一個(gè)或多個(gè)檢測媒體特性的條件表達(dá)式組成。媒體查詢中可用于檢測的媒體特性有width、height和color等。使用媒體查詢，可以在不改變網(wǎng)頁的頁面內(nèi)容的情況下，為特定的一些輸出設(shè)備定制顯示效果。

例如，獲取表單上的媒體查詢參數(shù)，根據(jù)所述媒體查詢參數(shù)顯示區(qū)塊。例如，獲取表單上的媒體查詢參數(shù)，根據(jù)所述媒體查詢參數(shù)顯示網(wǎng)頁。

例如，表單的每一行創(chuàng)建一套媒體查詢，例如，表單的每一行的媒體查詢對應(yīng)一添加按鈕，點(diǎn)擊添加按鈕之后，例如，獲取添加按鈕的點(diǎn)擊指令，獲取對應(yīng)的媒體查詢參數(shù)，這樣可為區(qū)塊新增一行空的媒體查詢；每行媒體查詢的設(shè)置內(nèi)容設(shè)置完畢后，利用js讀寫文件的功能，將代碼寫入css文件中。

例如，媒體查詢參數(shù)即css媒體，例如，創(chuàng)建多套css媒體，其中每套css媒體包括媒體類型選擇(如screen)、媒體條件(如min-width)、內(nèi)容(條件下的css內(nèi)容)。

本實(shí)施例中，通過表單獲取媒體查詢參數(shù)，進(jìn)而使得區(qū)塊以及網(wǎng)頁能夠適應(yīng)各種顯示器設(shè)備的顯示特性，適應(yīng)視口寬度、屏幕比例以及設(shè)備方向，使得網(wǎng)頁顯示效果更佳，便于觀看。

例如，步驟106之后還包括：根據(jù)所述區(qū)塊參數(shù)生成預(yù)覽網(wǎng)頁，并顯示所述預(yù)覽網(wǎng)頁。

例如，在設(shè)計(jì)區(qū)內(nèi)獲取預(yù)覽區(qū)域，用于測試預(yù)覽的區(qū)域，例如，該區(qū)塊的目標(biāo)區(qū)域即為測試預(yù)覽的區(qū)域。

本實(shí)施例中，預(yù)覽網(wǎng)頁用于預(yù)覽，例如，該預(yù)覽網(wǎng)頁還包括預(yù)覽區(qū)塊，例如，根據(jù)拖拽指令獲取目標(biāo)區(qū)域，獲取區(qū)塊參數(shù)，調(diào)用droppable函數(shù)，根據(jù)所述區(qū)塊參數(shù)生成預(yù)覽網(wǎng)頁，預(yù)覽所述預(yù)覽網(wǎng)頁，例如，調(diào)用droppable函數(shù)，獲取預(yù)覽寬度和預(yù)覽高度，根據(jù)預(yù)覽寬度和預(yù)覽高度預(yù)覽所述預(yù)覽網(wǎng)頁。

具體地，拖拽區(qū)塊至目標(biāo)區(qū)域，綁定droppable函數(shù)，可實(shí)現(xiàn)模擬實(shí)際網(wǎng)頁，可選擇模擬的寬度和高度，確定寬高之后，自動根據(jù)代碼設(shè)置調(diào)整布局，實(shí)現(xiàn)網(wǎng)頁的預(yù)覽。通過該預(yù)覽網(wǎng)頁，還能夠預(yù)覽區(qū)塊的基本參數(shù)、高級參數(shù)和特效參數(shù)的顯示效果。

為了使得生成的html文件、js文件和css文件能夠方便的保存，便于后續(xù)開發(fā)的查看，在一個(gè)實(shí)施例中，如圖1e所示，步驟108之后還包括：步驟112，輸出包含所述html文件、所述js文件和所述css文件的文本文件，并保存所述文本文件。

例如，將區(qū)塊參數(shù)保存字符串信息，例如，該字符串信息包含若干字符串，例如，將字符串信息保存為文本文件。這樣，html文件、js文件和css文件內(nèi)的字符串均可輸出至文本文件，通過該文本文件保存html文件、js文件和css文件的字符串，進(jìn)而使得html文件、js文件和css文件的內(nèi)容能夠輸出并保存，進(jìn)而使得html文件、js文件和css文件能夠方便地保存，便于后續(xù)開發(fā)的查看。

在一個(gè)實(shí)施例中，提供一種響應(yīng)式網(wǎng)頁生成裝置，如圖2a所示，包括：

設(shè)計(jì)區(qū)顯示模塊210，用于基于流式布局顯示設(shè)計(jì)區(qū)。

區(qū)塊顯示模塊220，用于獲取拖拽指令，響應(yīng)所述拖拽指令，在所述設(shè)計(jì)區(qū)內(nèi)顯示區(qū)塊。

區(qū)塊參數(shù)獲取模塊230，用于獲取對所述區(qū)塊的設(shè)置指令，根據(jù)所述設(shè)置指令獲取區(qū)塊參數(shù)。

文件生成模塊240，用于根據(jù)所述區(qū)塊參數(shù)，生成html文件、js文件和css文件。

網(wǎng)頁生成模塊250，用于根據(jù)所述html文件、所述js文件和所述css文件生成網(wǎng)頁。

在一個(gè)實(shí)施例中，如圖2b所示，所述區(qū)塊顯示模塊220包括：

拖拽指令獲取單元221，用于獲取拖拽指令。

基本參數(shù)獲取單元222，用于獲取基本參數(shù)。

區(qū)塊顯示單元223，用于響應(yīng)所述拖拽指令，根據(jù)所述基本參數(shù)在所述設(shè)計(jì)區(qū)內(nèi)顯示所述區(qū)塊。

在一個(gè)實(shí)施例中，如圖2c所示，所述區(qū)塊參數(shù)包括特效參數(shù)。

所述區(qū)塊參數(shù)獲取模塊230包括：

下拉指令獲取單元231，用于獲取對所述區(qū)塊的下拉框的下拉指令。

特效參數(shù)獲取單元232，用于根據(jù)所述下拉指令獲取所述特效參數(shù)。

在一個(gè)實(shí)施例中，如圖2d所示，所述區(qū)塊參數(shù)還包括表單參數(shù)。

所述區(qū)塊參數(shù)獲取模塊230還包括：

表單創(chuàng)建單元233，用于創(chuàng)建表單。

表單指令獲取單元234，用于獲取對所述表單的表單指令。

表單參數(shù)獲取單元235，用于根據(jù)所述表單指令獲取所述表單參數(shù)。

在一個(gè)實(shí)施例中，如圖2e所示，還包括：

文件保存模塊260，用于輸出包含所述html文件、所述js文件和所述css文件的文本文件，并保存所述文本文件。

應(yīng)該說明的是，上述系統(tǒng)實(shí)施例中，所包括的各個(gè)模塊只是按照功能邏輯進(jìn)行劃分的，但并不局限于上述的劃分，只要能夠?qū)崿F(xiàn)相應(yīng)的功能即可；另外，各功能模塊的具體名稱也只是為了便于相互區(qū)分，并不用于限制本發(fā)明的保護(hù)范圍。

另外，本領(lǐng)域普通技術(shù)人員可以理解實(shí)現(xiàn)上述各實(shí)施例方法中的全部或部分步驟是可以通過程序來指令相關(guān)的硬件來完成，相應(yīng)的程序可以存儲于可讀取存儲介質(zhì)中。

以上所述實(shí)施例的各技術(shù)特征可以進(jìn)行任意的組合，為使描述簡潔，未對上述實(shí)施例中的各個(gè)技術(shù)特征所有可能的組合都進(jìn)行描述，然而，只要這些技術(shù)特征的組合不存在矛盾，都應(yīng)當(dāng)認(rèn)為是本說明書記載的范圍。

以上所述實(shí)施例僅表達(dá)了本發(fā)明的幾種實(shí)施方式，其描述較為具體和詳細(xì)，但并不能因此而理解為對發(fā)明專利范圍的限制。應(yīng)當(dāng)指出的是，對于本領(lǐng)域的普通技術(shù)人員來說，在不脫離本發(fā)明構(gòu)思的前提下，還可以做出若干變形和改進(jìn)，這些都屬于本發(fā)明的保護(hù)范圍。因此，本發(fā)明專利的保護(hù)范圍應(yīng)以所附權(quán)利要求為準(zhǔn)。