TWM470299U - 網頁編輯系統 - Google Patents

Description

網頁編輯系統

本創作係有關於一種網頁編輯技術，更詳而言之，係一種利用圖形及圖層化概念編輯網頁之網頁編輯系統。

目前的網頁編輯工作一般是採用直接編碼設計的方式或模板定制的方式來實現。其中，採用直接編碼設計的方式適用於專業的網頁設計人員，其利用專業之網頁設計軟體（例如HTML語言程式）進行網頁內容的編輯，並在完成編輯之後再將網頁內容一一上傳至提供網站服務的伺服器中運行調試，以完成網頁內容的設計編輯操作，然此方式需要大量人力及時間，且設計人員必須具備專業的技術知識。

此外，採用模板定制的網頁設計方式雖易於初學者掌握使用，但此設計方式針對模板中的某些功能選項，通常僅提供簡單的點選操作，或者針對某些功能區塊的顏色、字體等樣式進行簡單的設置，對於使用者而言，選擇範圍及自主權限較小，版面設計品質不佳，無法滿足使用者的所有需求。

因此，如何提出一套一般網頁設計需求者掌握使用，同時又能提升網頁設計品質的網頁編輯系統即為本創作待解決之技術課題。

鑒於上述先前技術之種種問題，本創作之目的在於提供一種網頁編輯系統，使用者無需具備網頁編輯專業技能，適用範圍廣。

本創作之另一目的在於提供一種網頁編輯系統，編輯操作簡單直觀，設計靈活度高，可提升網頁開發的效率與品質。

為達到上述目的以及其它目的，本創作提供一種網頁編輯系統。本創作的網頁編輯系統係提供使用者透過客戶端登錄網頁編輯平台編輯網頁資料，以生成網頁文件，該系統包括：第一編輯模組，係用於提供該使用者登錄該網頁編輯平台，編輯網頁背景圖以生成網頁設計之底圖層，並擷取該網頁背景圖對應之屬性信息並儲存於編輯資料庫中，以及於該網頁編輯平台中顯示該網頁背景圖；第二編輯模組，係用於接收該使用者透過該客戶端所上傳之源檔案資料，讀取該源檔案資料中的數據內容以形成網頁設計之基圖層，並將該基層圖疊加於該底圖層上，俾令該源檔案資料中的數據內容映射顯示於該網頁背景圖上；解析模組，係針對該基圖層中的數據內容進行解析，以識別出該基圖層中所包含之靜態對象信息及其對應的屬性信息，並將該識別出之靜態對象信息及其屬性信息儲存於該編輯資料庫中；第三編輯模組，係依據該解析模組所識別出之靜態對象及其屬性信息提供至少一功能物件，以供使用者輸入於該基圖層上所需的功能物件，以形成網頁設計之物件圖層，並依使用者輸入所欲的功能物件於基層圖中所包含之靜態對象添加動態物件(即該功能物件)，並編輯該動態物件的屬性信息，且將該編輯之動態物件的屬性信息與該靜態對象相互關聯並儲存於該編輯資料庫中；以及轉換模組，係用於將該編輯資料庫中所儲存之該網頁背景圖之屬性信息、該靜態對象及其對應之屬性信息，以及與該靜態對象關聯之動態物件的屬性信息按照預設之網頁標準格式進行編譯轉換，以生成對應的網頁文件。

較佳地，該第一編輯模組復包括：接收該使用者透過該客戶端所上傳之背景圖檔案資料，以供該使用者執行網頁背景圖之編輯操作。

較佳地，該網頁背景圖對應之屬性信息至少包括：用於描述該網頁背景圖之尺寸及顏色的參數信息。

較佳地，該第二編輯模組所接收之源檔案資料係為PDF格式或JPG格式，其中，該解析模組於該基圖層之數據內容中所識別出的靜態對象信息係包括文字信息及圖片信息，該靜態對象對應之屬性信息至少包括用於描述該靜態對象之位置及尺寸的參數信息。

較佳地，該動態物件係包括：影片、聲音、即時影音等嵌入式動態元件的多媒體、超連結(連結檔案的頁面或外部網址)、資料庫物件或網頁購物車處理功能物件等。

較佳地，該網頁編輯系統復包括驗證模組，係用於建立並管理使用者登錄該網頁編輯平台之身份驗證資料。

相較於先前技術，本創作之網頁編輯系統係利用圖形及圖層化之概念將網頁設計分為底圖層、基圖層及物件圖層，俾供使用者能以更為直觀且簡單的操作方式編輯排版各層中的相關元件，並於編輯完成後，系統可自行識別各層中相關元件對應的屬性信息，並依照預先建立之各層元件屬性與現有HTML語法的關係及其規範，對該網頁編輯資料進行格式轉換，因此，使用者無需具備專業的網頁程式語言設計技能，即可運用本創作之技術來進行網頁編輯，不僅操作簡單方便，且設計靈活度高，可滿足使用者的不同需求，從而提升網頁設計的效率與品質。

以下內容將搭配圖式，藉由特定的具體實施例說明本創作之技術內容，熟悉此技術之人士可由本說明書所揭示之內容輕易地了解本創作之其他優點與功效。本創作亦可藉由其他不同的具體實施例加以施行或應用。本說明書中的各項細節亦可基於不同觀點與應用，在不背離本創作之精神下，進行各種修飾與變更。

請參閱圖1係本創作之網頁編輯系統之基本系統架構圖，如圖所示，本創作之網頁編輯系統100係用於提供使用者透過客戶端200（例如個人電腦、平板電腦或手機等電子產品）登錄至網頁編輯平台101編輯網頁資料並生成網頁文件105。其中，該系統100主要係由第一編輯模組110、第二編輯模組120、解析模組130、第三編輯模組140、以及轉換模組150所組成。

第一編輯模組110係用於提供該使用者登錄該網頁編輯平台101，編輯網頁背景圖(未予圖示)的資料藉以生成網頁設計之底圖層111，並於該網頁編輯平台101中顯示該網頁背景圖。於本實施例中，使用者可直接利用該第一編輯模組110所提供之編輯工具來編輯網頁背景圖的顏色或內容，亦或透過該客戶端200上傳一背景圖檔案資料202，以將其作為前述的網頁背景圖。同時，使用者可依據不同的應用載體（例如個人電腦、平板電腦或手機等電子產品）而調整該網頁背景圖的大小尺寸以適應不同應用載體的顯示效果。並於使用者完成該網頁背景圖的編輯操作後，該第一編輯模組110擷取該網頁背景圖對應之屬性信息，該屬性信息至少包括用於描述該網頁背景圖之尺寸及顏色的參數信息，並將該擷取之網頁背景圖的屬性信息儲存於編輯資料庫103中。

第二編輯模組120係用於接收該使用者透過該客戶端200所上傳之源檔案資料201，讀取該源檔案資料201中的數據內容以作為網頁設計之基圖層121，並將其疊加於該底圖層111上，俾令該源檔案資料201中的數據內容映射顯示於該網頁背景圖上。於本實施例中，源檔案資料201係可例如為PDF格式或JPG格式，於該源檔案資料201中可載有文字及圖片等靜態數據內容，亦即，針對網頁設計中有關文字及圖片等靜態數據信息，使用者可預先藉由習知的辦公軟體（如微軟公司所開發的office軟體）進行編輯以及排版處理，並將該編輯好的文件保存為PDF或JPG等圖檔格式，以作為源檔案資料201並上傳至該網頁編輯系統100中，藉由該第二編輯模組120讀取該源檔案資料201中的數據資料以形成相應之基圖層121並疊加顯示於該底圖層111上，以使該源檔案資料201中的數據內容映射顯示於該網頁背景圖上。此外，第二編輯模組120復可提供使用者對照該底圖層111（即網頁背景圖）的大小尺寸而適度調整該基圖層121的尺寸，亦或由該第二編輯模組120依照該底圖層111的尺寸大小而針對該基圖層121的尺寸進行自適應調整。再者，第二編輯模組120當判斷該基圖層121的尺寸超出預設之瀏覽範圍時，可自動生成滾軸（stroll bar）以延伸該瀏覽範圍。

解析模組130係用於針對該基圖層121中的數據內容進行解析，以識別出該基圖層121中所包含之靜態對象信息及其對應的屬性信息，並將該識別出之靜態對象信息及其屬性信息儲存於該編輯資料庫103中。如前所述，於該上傳之源檔案資料201中係載有文字及圖片等靜態的數據內容，因此，該解析模組130即係用於自該基圖層121的數據內容中識別出該文字或圖片等靜態對象，同時針對該靜態對象的顯示位置及其顯示尺寸等屬性進行分析，以作為該靜態對象對應之屬性信息儲存於該編輯資料庫103中。

第三編輯模組140則依據該解析模組130所識別出之靜態對象及其屬性信息（即靜態對象的位置及尺寸屬性），提供使用者對該基圖層121進行進階編輯處理，即於該基圖層121上建立至少一功能物件，而該功能物件例如是包含影片、聲音、即時影音等嵌入式動態元件的多媒體、超連結(連結檔案的頁面或外部網址)、資料庫物件或網頁購物車處理功能物件等。在此以影片、聲音、即時影音等功能需求來說，使用者只需要輸入有提供嵌入機制的SAAS(Software-as-a-service)平台，例如Youtube、Ustream、SoundCloud等具有嵌入機制的SAAS平台服務網址，就可以嵌入上述包含影片、聲音、即時影音、超連結等嵌入式動態元件或者相關軟體應用服務在該基圖層121(其例如是PDF檔案)上，藉以形成網頁設計之物件圖層141。具體而言，使用者依據實際需求，而手動調整該基圖層121中所包含的功能物件，此處所謂的手動調整流程為：待該解析模組130識別出該基圖層121中所包含之靜態對象信息及其對應的屬性信息後，在該第三編輯模組140接收到使用者欲對該基圖層121建立功能物件的需求時，即產生一個可以移動、編輯、刪除、調整大小的功能物件嵌入介面(例如半透明控制板)，以供使用者點擊該功能物件嵌入介面並於該功能物件嵌入介面上輸入前述SAAS平台服務網址或使用者所需的功能物件，以建立物件圖層，如此就可以在該基圖層121所包含之靜態對象添加動態物件，最後該網頁編輯平台101會將該編輯之動態物件的屬性信息與該靜態對象相互關聯並儲存於該編輯資料庫103中。由於將該動態物件與靜態對象進行關聯，俾令添加有動態物件的靜態對象被觸發時（例如被滑鼠點選時）即響應執行該動態物件所對應的事件，藉以實現在網頁中播放廣告等影像媒體，亦或令網頁中的文字呈現動畫之顯示效果，以及於網頁中提供外部或內部資源的超連結服務等。

轉換模組150係用於將該編輯資料庫103中所儲存之該網頁背景圖之屬性信息（即底圖層的元件屬性資料）、該靜態對象及其對應之屬性信息（即基圖層的元件屬性資料），以及與該靜態對象關聯之動態物件的屬性信息（即物件圖層的元件屬性資料），按照預設之網頁標準格式進行編譯轉換，以生成對應的網頁文件105。於本實施例中，該網頁編輯系統100中係預設有各層元件屬性與現有HTML語法的關係及其規範，俾供該轉換模組150依據該預設的規範進行格式轉換處理。此外，該轉換格式並不侷限於HTML格式，亦可視實際需求而將該編輯資料庫103中所儲存的網頁編輯資料轉換為APP或EBM等格式文件輸出。

再者，本創作之網頁編輯系統100復包括有驗證模組160，其用於建立使用者之身份驗證資料，俾於使用者登錄該網頁編輯平台101時，驗證該使用者之身份是否合法，本實施例的身份是否合法，例如是：驗證該使用者是否已成為該網頁編輯系統100之付費會員，舉例而言，當該驗證模組160驗證出該使用者身份屬於付費會員時，將不會對該使用者最終所成生的網頁文件105做強制性的干涉，所謂的強制性的干涉例如是：當該使用者最終所成生的網頁文件在網頁上顯示時，會自動的插入非使用者預期的數位內容於該網頁文件上，例如廣告、文字或圖案等數位內容。更具體而言，使用者在創建其所需的網頁文件前，本創作之網頁編輯系統會確認使用者的身份，如果確認出使用者身份為免費會員，該網頁編輯系統將有可能在該免費會員所製作好的網頁文件中，插入廣告。相反的，如果確認出使用者身份為付費會員，則該付費會員可以自行決定是否要在其所上傳之源檔案資料201中插入廣告。補充說明的是，此處插入廣告的處理是由網頁編輯平台101生成一個媒體層(未予圖示)，該媒體層如同前述的物件圖層141一樣，即是在該基圖層121所包含之靜態對象添加動態物件，而該動態物件就是廣告，此外，亦可在底圖層111上直接疊加廣告，該廣告的形式也可以包含影片、聲音、即時影音、超連結等嵌入式動態元件。

圖2係應用本創作之網頁編輯系統執行網頁編輯之運作流程圖，其中，執行網頁編輯的處理方法係利用前述網頁編輯系統100所提供之網頁編輯平台101，俾供使用者藉由客戶端200登錄該網頁編輯平台101編輯網頁資料並生成網頁文件。

如圖所示，首先執行步驟S301，登錄網頁編輯系統所提供之網頁編輯平台，接著進行步驟S303。此外，於本創作的一實施例中，於登錄該網頁編輯系統前，復可包括一身份驗證的步驟，亦即，透過預先建立使用者之身份驗證信息，俾位於客戶端（例如個人電腦、平板電腦或手機等電子產品）的使用者登錄該網頁編輯平台時，驗證該使用者的身份是否合法，如前述：驗證該使用者是否已成為該網頁編輯系統之付費會員，藉此可依驗證結果適時提供符合該使用者身份的處理或服務，如前述：是否需對該使用者最終所成生的網頁文件做強制性的干涉等處理，例如非付費會員會強制在該網頁文件上插入廣告。

於步驟S303中，提供使用者藉由網頁編輯平台編輯網頁背景圖以生成網頁設計之底圖層，並於該網頁編輯平台中顯示該網頁背景圖。於本實施例中，使用者可直接利用該網頁編輯系統所提供之編輯工具來編輯網頁背景圖的顏色或內容，亦或透過該客戶端上傳一背景圖檔案資料，以將其作為網頁背景圖進行編輯操作，並於編輯完成後，網頁編輯系統擷取該網頁背景圖對應之屬性信息並將其儲存於編輯資料庫中，於本實施例中，該屬性信息至少包括用於描述該網頁背景圖之尺寸及顏色的參數信息，接著進行步驟S305。

於步驟S305中，該網頁編輯系統接收由該客戶端所上傳之源檔案資料，並讀取該源檔案資料中的數據內容以形成網頁設計之基圖層，且將該基層圖疊加於該底圖層上，俾令該源檔案資料中的數據內容映射顯示於該網頁背景圖上，於本實施例中，源檔案資料係可例如為PDF格式或JPG格式，於該源檔案資料中可載有文字及圖片等靜態的數據內容，接著進行步驟S307。

於步驟S307中，該網頁編輯系統針對該基圖層中的數據內容進行解析，以識別出該基圖層中所包含之靜態對象信息及其對應的屬性信息，並將該識別出之靜態對象信息及其屬性信息儲存於該編輯資料庫中，於本實施例中，該網頁編輯系統係用於自該基圖層的數據內容中識別出該文字或圖片等靜態對象，同時針對該靜態對象的顯示位置及其顯示尺寸等屬性進行分析，以作為該靜態對象對應之屬性信息儲存於該編輯資料庫中，接著進行步驟S309。

於步驟S309中，依據該識別出之靜態對象及其屬性信息，提供功能物件嵌入介面，以供使用者進階編輯所要的網頁文件，其中，該功能物件嵌入介面係形成於包含至少一靜態對象的基圖層上，接著進行步驟S311。

於步驟S311中，在接收到使用者欲對該基圖層建立功能物件的需求時，即產生一個功能物件嵌入介面，依據使用者對該功能物件嵌入介面所設定的結果，以建立物件圖層，如此就可以在該基圖層所包含之靜態對象添加動態物件，並可進階編輯該動態物件的屬性信息，且將該編輯之動態物件的屬性信息與該靜態對象相互關聯並儲存於該編輯資料庫中，接著進行步驟S313。

於步驟S313中，該網頁編輯系統按照預設之網頁標準格式，針對該編輯資料庫中所儲存之該網頁背景圖之屬性信息（即底圖層的元件屬性資料）、該靜態對象及其對應之屬性信息（即基圖層的元件屬性資料），以及與該靜態對象關聯之動態物件的屬性信息（即物件圖層的元件屬性資料）進行格式轉換，以生成對應之網頁文件。此外，如前所述，該網頁編輯系統亦可按照使用者的身份來決定是否於該基圖層或底圖層上疊加廣告，於本實施例中，是對身份為免費會員的使用者所創建的網頁文件自動疊加廣告；而就身份為付費會員的使用者，其可自主性決定是否於其所創建的網頁文件來疊加廣告。

另補充說明的是，本創作之網頁編輯系統的應用上，該使用者透過位於其本端的客戶端200直接與本創作網頁編輯系統互動，也就是，使用者透過該客戶端200及網路系統(例如網際網路等網路)來與網頁編輯系統100所儲存的網頁編輯程式進行互動，因此，本創作網頁編輯系統可實現於一種內儲網頁編輯程式之電腦程式產品上，該電腦程式產品例如網站伺服器等網路設備，其藉由該網頁編輯程式來執行如圖2所述的各步驟。

綜上所述，本創作之網頁編輯系統係利用圖形及圖層化之概念將網頁設計分為底圖層、基圖層及物件圖層(或可含前述的媒體層)，俾供使用者能以更為直觀且簡單的操作方式編輯排版各層中的相關元件，並於編輯完成後，系統可自行識別各層中相關元件對應的屬性信息，並依照預先建立之各層元件屬性與現有HTML語法的關係及其規範，對該網頁編輯資料進行格式轉換。故本創作適用於一般電腦使用者，且操作簡單易於掌握，設計靈活度高，因此，可極大地提升網頁開發的效率與品質。

上述實施例僅例示性說明本創作之原理及功效，而非用於限制本創作。任何熟習此項技術之人士均可在不違背本創作之精神及範疇下，對上述實施例進行修飾與改變。因此，本創作之權利保護範圍，應如本創作申請專利範圍所列。

100‧‧‧網頁編輯系統

101‧‧‧網頁編輯平台
103‧‧‧編輯資料庫
105‧‧‧網頁文件
110‧‧‧第一編輯模組
111‧‧‧底圖層
120‧‧‧第二編輯模組
121‧‧‧基圖層
130‧‧‧解析模組
140‧‧‧第三編輯模組
141‧‧‧物件圖層
150‧‧‧轉換模組
160‧‧‧驗證模組
200‧‧‧客戶端
201‧‧‧源檔案資料
202‧‧‧背景圖檔案資料
S301~S313‧‧‧步驟

圖1係本創作之網頁編輯系統之基本系統架構圖。圖2係應用本創作之網頁編輯系統執行網頁編輯的運作流程圖。

100‧‧‧網頁編輯系統

101‧‧‧網頁編輯平台

103‧‧‧編輯資料庫

105‧‧‧網頁文件

110‧‧‧第一編輯模組

111‧‧‧底圖層

120‧‧‧第二編輯模組

121‧‧‧基圖層

130‧‧‧解析模組

140‧‧‧第三編輯模組

141‧‧‧物件圖層

150‧‧‧轉換模組

160‧‧‧驗證模組

200‧‧‧客戶端

201‧‧‧源檔案資料

202‧‧‧背景圖檔案資料

Claims (12)

1. 一種網頁編輯系統，係提供使用者透過客戶端登錄網頁編輯平台編輯網頁資料，以生成網頁文件，該系統包括：第一編輯模組，係用於提供該使用者登錄該網頁編輯平台，編輯網頁背景圖以生成網頁設計之底圖層，並擷取該網頁背景圖對應之屬性信息並儲存於編輯資料庫中，以及於該網頁編輯平台中顯示該網頁背景圖；第二編輯模組，係用於接收該使用者透過該客戶端所上傳之源檔案資料，讀取該源檔案資料中的數據內容以形成網頁設計之基圖層，並將該基層圖疊加於該底圖層上，俾令該源檔案資料中的數據內容映射顯示於該網頁背景圖上；解析模組，係針對該基圖層中的數據內容進行解析，以識別出該基圖層中所包含之靜態對象信息及其對應的屬性信息，並將該識別出之靜態對象信息及其屬性信息儲存於該編輯資料庫中；第三編輯模組，係依據該解析模組所識別出之靜態對象及其屬性信息提供至少一功能物件，以供使用者輸入於該基圖層上所需的功能物件，以形成網頁設計之物件圖層，且於該網頁編輯平台中顯示該物件圖層，以針對該基圖層中所包含之靜態對象添加動態物件，並編輯該動態物件的屬性信息，且將該編輯之動態物件的屬性信息與該靜態對象相互關聯並儲存於該編輯資料庫中；以及轉換模組，係用於將該編輯資料庫中所儲存之該網頁背景圖之屬性信息、該靜態對象及其對應之屬性信息，以及與該靜態對象關聯之動態物件的屬性信息按照預設之網頁標準格式進行編譯轉換，以生成對應的網頁文件。
2. 如申請專利範圍第1項所述之網頁編輯系統，其中，該第一編輯模組復包括：接收該使用者透過該客戶端所上傳之背景圖檔案資料，並供該使用者執行網頁背景圖之編輯操作。
3. 如申請專利範圍第1或2項所述之網頁編輯系統，其中，該網頁背景圖對應之屬性信息至少包括：用於描述該網頁背景圖之尺寸及顏色的參數信息。
4. 如申請專利範圍第1項所述之網頁編輯系統，其中，該第二編輯模組所接收之源檔案資料係為PDF格式或JPG格式。
5. 如申請專利範圍第1項所述之網頁編輯系統，其中，該解析模組於該基圖層之數據內容中所識別出的靜態對象信息係包括文字信息及圖片信息。
6. 如申請專利範圍第1項所述之網頁編輯系統，其中，該靜態對象對應之屬性信息至少包括用於描述該靜態對象之位置及尺寸的參數信息。
7. 如申請專利範圍第1項所述之網頁編輯系統，其中，該動態物件係包括多媒體、超連結、資料庫物件或網頁購物車處理功能物件。
8. 如申請專利範圍第7項所述之網頁編輯系統，其中，該多媒體包括影片、聲音或即時影音。
9. 如申請專利範圍第1項所述之網頁編輯系統，其復包括：驗證模組，其用於建立使用者之身份驗證資料，俾於使用者登錄該網頁編輯平台時，驗證該使用者是否已成為該網頁編輯系統之付費會員，以在驗證出該使用者身份屬於免費會員時，則對該網頁文件做強制性的干涉。
10. 如申請專利範圍第9項所述之網頁編輯系統，其中，該強制性的干涉係指自動的插入非使用者預期的數位內容於該網頁文件上。
11. 如申請專利範圍第10項所述之網頁編輯系統，其中，該非使用者預期的數位內容為廣告資訊。
12. 如申請專利範圍第9項所述之網頁編輯系統，其中，該驗證模組驗證出該使用者身份屬於付費會員時，則由該使用者自行決定是否對該網頁文件加入廣告資訊。