[發(fā)明專利]基于PSD文檔的HTML設(shè)計模板自動轉(zhuǎn)換方法和系統(tǒng)

在審

• 申請?zhí)枺?/td>: 202011184076.6
• 申請日: 2020-10-29
• 公開（公告）號: CN112307720A
• 公開（公告）日: 2021-02-02
• 發(fā)明（設(shè)計）人: 徐敏
• 申請（專利權(quán)）人: 南京航空航天大學(xué)
• 主分類號: G06F40/143
• 分類號: G06F40/143;G06F40/154;G06F40/186
• 代理公司: 南京鐘山專利代理有限公司 32252
• 代理人: 陳月菊

1.一種基于PSD文檔的HTML設(shè)計模板自動轉(zhuǎn)換方法，其特征在于，所述自動轉(zhuǎn)換方法包括以下步驟：

S1，將PSD文檔內(nèi)信息提取實現(xiàn)Web頁面結(jié)構(gòu)所需要的信息保存到XML文檔中；

S2，基于XML文檔，生成最終的Web頁面結(jié)構(gòu)文件，所述Web頁面結(jié)構(gòu)文件包括兩個部分：用于定義圖層與圖層之間的相對關(guān)系的html結(jié)構(gòu)，以及用于定義每個圖層定位、劃分區(qū)域和內(nèi)容表現(xiàn)形式的css結(jié)構(gòu)。

2.根據(jù)權(quán)利要求1所述的基于PSD文檔的HTML設(shè)計模板自動轉(zhuǎn)換方法，其特征在于，步驟S1中，所述將PSD文檔內(nèi)信息提取實現(xiàn)Web頁面結(jié)構(gòu)所需要的信息保存到XML文檔中的過程包括以下步驟：

S11，針對當(dāng)前圖層A創(chuàng)建XML根節(jié)點；

S12，依次遍歷當(dāng)前圖層A的所有子圖層a，為每個子圖層a創(chuàng)建對應(yīng)的XML子節(jié)點，將其圖層信息經(jīng)過預(yù)設(shè)處理策略處理后寫入XML子節(jié)點中：

在遍歷子圖層a的過程中，每當(dāng)遇到Group圖層就遞歸往下，重復(fù)前述當(dāng)前圖層的子圖層讀取、XML子節(jié)點創(chuàng)建、圖層信息寫入和Group圖層判斷過程，直至將子圖層a所有的子圖層訪問完畢后，返回子圖層a對應(yīng)XML子節(jié)點；

S13，將XML子節(jié)點添加到XML根節(jié)點的子列表中，返回XML根節(jié)點。

3.根據(jù)權(quán)利要求2所述的基于PSD文檔的HTML設(shè)計模板自動轉(zhuǎn)換方法，其特征在于，步驟S12中，所述將其圖層信息經(jīng)過預(yù)設(shè)處理策略處理后寫入XML子節(jié)點中的過程包括以下步驟：

S111，判斷輸入圖層是否為Group圖層，如果是，進入步驟S123，否則，進入步驟S122；

S122，判斷輸入圖層是否為文字圖層，如果是，提取圖層中所包含的文字信息；

S123，提取包括寬高、位置和名稱在內(nèi)的基本信息，將所有提取信息寫入對應(yīng)的XML子節(jié)點，結(jié)束流程。

4.根據(jù)權(quán)利要求1所述的基于PSD文檔的HTML設(shè)計模板自動轉(zhuǎn)換方法，其特征在于，步驟S2中，根據(jù)每個XML節(jié)點信息，采用外部樣式表生成css結(jié)構(gòu)，所述css結(jié)構(gòu)包括以下信息：包含寬高、位置在內(nèi)的基本元素(width，height，left，top)，用于體現(xiàn)PSD文檔中圖層之間的相對關(guān)系的定位元素position，以及用于設(shè)置XML節(jié)點層次的z-index元素；

其中，每個圖層的位置元素left和top取值是當(dāng)前圖層對應(yīng)的真實值減去其父層節(jié)點對應(yīng)的top和left取值之后得到的相對值。

5.根據(jù)權(quán)利要求4所述的基于PSD文檔的HTML設(shè)計模板自動轉(zhuǎn)換方法，其特征在于，步驟S2中，根據(jù)每個XML節(jié)點信息，采用div標簽搭建各個圖層區(qū)域，然后根據(jù)其圖層不同，填充不同的信息，生成html結(jié)構(gòu)；其中，每個div標簽均根據(jù)其上一層div的位置進行定位。

6.根據(jù)權(quán)利要求1所述的基于PSD文檔的HTML設(shè)計模板自動轉(zhuǎn)換方法，其特征在于，所述自動轉(zhuǎn)換方法還包括以下步驟：

S3，根據(jù)實際需求，選擇框架模式或者圖形模式將生成的Web頁面結(jié)構(gòu)文件轉(zhuǎn)換成對應(yīng)的HTML設(shè)計模板。

7.根據(jù)權(quán)利要求6所述的基于PSD文檔的HTML設(shè)計模板自動轉(zhuǎn)換方法，其特征在于，步驟S3中，在Web頁面結(jié)構(gòu)文件中添加javascripts腳本，通過javascripts腳本修改其中包含的圖片或者文字。

8.一種根據(jù)權(quán)利要求1所述方法的基于PSD文檔的HTML設(shè)計模板自動轉(zhuǎn)換系統(tǒng)，其特征在于，所述自動轉(zhuǎn)換系統(tǒng)包括：

PSD-XML轉(zhuǎn)換模塊，用于將PSD文檔內(nèi)信息提取實現(xiàn)Web頁面結(jié)構(gòu)所需要的信息保存到XML文檔中；

XML-WEB轉(zhuǎn)換模塊，用于基于XML文檔，生成最終的Web頁面結(jié)構(gòu)文件，所述Web頁面結(jié)構(gòu)文件包括兩個部分：用于定義圖層與圖層之間的相對關(guān)系的html結(jié)構(gòu)，以及用于定義每個圖層定位、劃分區(qū)域和內(nèi)容表現(xiàn)形式的css結(jié)構(gòu)；

HTML設(shè)計模板轉(zhuǎn)換模塊，用于根據(jù)實際需求，選擇框架模式或者圖形模式將生成的Web頁面結(jié)構(gòu)文件轉(zhuǎn)換成對應(yīng)的HTML設(shè)計模板。