TW201514842A - 依據顯示裝置之瀏覽器大小而自動改變網頁排版的方法及系統 - Google Patents

Abstract

在此揭示一種可於不同裝置中自動改變網頁排版之方法及系統，藉以使網頁呈現於不同裝置時，皆可呈現對應裝置瀏覽器寬度的版面，以保持網頁的完整性。依據本發明某些實施方式，本揭示內容之系統可於一伺服器環境下執行以下步驟：偵測裝置之瀏覽器寬度，找出伺服器內相應於該瀏覽器寬度之預設版面，並依據此預設版面重新排列該網頁內複數個區塊之每一區塊，調整每一區塊的寬度使與該瀏覽器寬度相符，再將已調整完各區塊寬度之網頁重新顯示於裝置之瀏覽器中。

Description

依據顯示裝置之瀏覽器大小而自動改變網頁排版的方法 及系統

本發明大致是關於一種在顯示裝置上顯示網頁之方法與系統，且特別是有關於一種可依據裝置之瀏覽器大小自動改變網頁排版之方法與系統。

隨著電腦處理效能提升、網路普及率增加及網路速度迅速提升，目前多數的網頁傾向於單一版面中展示多個連結及功能，以提供即時並多樣之資訊與服務。舉例而言：於單一網頁版面中提供了各式不同的選單與連結，包括品牌介紹、產品一覽、網路購物、輪播廣告、影片播放、新聞連結、各式不同應用程式服務連結等。除了傳達資訊與服務外，因網頁之存取不受制於時間或地點，許多公司更將網頁視為良好的廣告資源，並藉由與產品一致的設計以提升品牌形象。因此，大多數網頁之設計常具有複雜的版面設計及大量的連結。

隨著具有小尺寸螢幕(如，小於11.5英吋)之手持裝置較傳統具有大尺寸螢幕(如，至少12英吋)的個人電腦越來越受消費者歡迎之際，原來設計在個人電腦上執行的網頁已不再適合於諸如手機、平板電腦、個人數位化助理、電子閱讀器等手持裝置上顯示，因PC版網 頁會被縮小以適應手持裝置的小尺寸螢幕，此舉也讓網頁內容變得太小而不適於閱讀。雖然目前大多數的手持裝置都有透過手指抓放螢幕以縮放網頁(pinch-to-zoom)的功能，但使用者仍需不斷地上下左右滑動並縮放螢幕，才能閱讀，造成使用上的不便。

基於上述的問題，大多數網頁提供者選擇針對手持裝置開發特定適於手持裝置螢幕使用的網頁。然而，相對於PC版網頁，手持裝置版網頁頁面通常較簡潔，所能提供或顯示的資訊內容也較少。此外，還必須仰賴特定網頁開發人員來設計並開發適用這類裝置的網頁，造成服務廠商額外的網頁開發成本，以及頻寬及IP位址的耗損，同時也延緩產品上架的時間。

此外，一般網頁若未經過特殊處理，也無法被直接放大並顯示在戶外大型電子看板上，例如顯示螢幕尺寸超過50吋的大型螢幕。

因此，於本技術領域中，亟需一種可解決上述網頁在不同尺寸螢幕間顯示的問題。換言之，本技術領域中，亟需一種可在不影響網頁完整性的前提下，自動依據瀏覽器大小而改變網頁於其他顯示裝置的方法及系統，包括較傳統電腦螢幕更大或更小尺寸之顯示裝置。

發明內容旨在提供本揭示內容的簡化摘要，以使閱讀者對本揭示內容具備基本的理解。此發明內容 並非本揭示內容的完整概述，且其用意並非在指出本發明實施例的重要/關鍵元件或界定本發明的範圍。

本發明一態樣係提供一種在一伺服器環境中，依據一顯示裝置之瀏覽器大小而自動改變一網頁於該裝置上排列的方法，藉此使得當該網頁呈現於不同裝置時，皆可呈現出與該裝置瀏覽器寬度相對應的版面，讓使用者便於瀏覽該網頁。此伺服器中預設有該網頁之一基準放大寬度，該網頁具有複數個區塊且每一區塊分別依據瀏覽器種類預設一符合該類瀏覽器的寬度，且該伺服器內預設有該網頁相應於每一類瀏覽器之預設版面。所述方法包含下列步驟：偵測、接收並判斷該裝置之瀏覽器寬度，當瀏覽器寬度大於該網頁之基準放大寬度時，增加該網頁中每一區塊的像素數目，以提高其解析度；依據所偵測到的該裝置之瀏覽器寬度，找出伺服器內相應於該瀏覽器之預設版面；依據此預設版面重新排列該網頁之複數個區塊之每一區塊；調整該網頁每一區塊的寬度，使符合該瀏覽器的寬度；及將該網頁重新顯示於該裝置之瀏覽器中。

上述調整該網頁每一區塊寬度之步驟更包含：若所偵測到該裝置之瀏覽器寬度大於該預設版面之寬度，則增加該網頁中每一區塊的尺寸，反之，當所偵測到該裝置之瀏覽器寬度小於該預設版面之頁寬度，則縮小該 網頁每一區塊的尺寸；其中，該預設版面寬度可為2,560像素、1,600像素、1,080像素、1,024像素、960像素、800像素、720像素、480像素或320像素。

依據本發明方法一實施方式，當該網頁複數個區塊中至少一區塊包含至少一圖片檔，且每一該圖片檔對應於一網址時，本發明方法更包括調整該圖片檔之寬度並將調整後之圖片檔與網址連結，再將連結有網址的圖片檔回傳並重新顯示於該區塊中。

依據本發明方法另一實施方式，當該網頁複數個區塊其中一區塊包含至少一可由多媒體檔案播放器播放之多媒體檔案時，本發明方法更包括分別調整該多媒體檔案及該多媒體檔案播放器之寬度使符合該瀏覽器寬度，回傳該調整寬度後之多媒體檔案及多媒體檔案播放器，並將可由該多媒體檔案播放器播放之多媒體檔案重新顯示於該區塊中。

依據本發明方法再一實施方式，當該網頁複數區塊中至少一區塊不包含對應內容時，本發明方法更包括：隱藏該不包含對應內容之區塊，並以和不包含對應內容之區塊相鄰的該些區塊內容來填補該不包含對應內容之區塊(即，隱藏區塊)。上述填補步驟包括計算與不包含對應內容之區塊左右相鄰之區塊數量，並將不包含對應內容之區塊寬度依據相鄰區塊之數量等分，以取得一第一寬度，再將每一相鄰之區塊寬度分別增加該第一寬度。

依據本發明方法再一實施方式，儲存在伺服 器內相應於該瀏覽器之該預設版面係透過以下步驟產生：在一空白版面中建立複數個區塊，其中每一區塊分別連結一緩存節點，並將由該緩存節點所對應之一電子文件顯示於區塊內，再將該預設版面儲存於該伺服器中。緩存節點係透過伺服器接收並儲存由使用者上傳之一電子文件，產生並儲存對應該電子文件之一識別代碼，以及藉由該識別代碼及該電子文件儲存自在伺服器中的位置來產生該緩存節點。所述電子文件可為便攜式檔案文件(PDF)、圖片檔案、文字檔案、聲音檔案或多媒體檔案。

本發明之另一態樣係有關於一種可依據一顯示裝置之瀏覽器大小而自動改變一網頁於排版之系統，藉此當網頁於不同裝置呈現時，皆可呈現出對應裝置瀏覽器寬度的版面，讓使用者便於瀏覽網頁。此網頁預設有一基準放大寬度並具有複數個區塊且每一區塊分別依據瀏覽器種類預設符合該類瀏覽器的寬度，且該伺服器內預設有該網頁相應於每一類瀏覽器之預設版面，本發明系統包括：一偵測模組，用以偵測該裝置之瀏覽器寬度以找出在該伺服器內相應於該瀏覽器之該預設版面；一強波模組，用以當該瀏覽器寬度大於該網頁之該基準放大寬度時，增加該些區塊之每一區塊中的像素數目，以提高其解析度；一排版模組，用以依據該預設版面而重新排列該網頁複數個區塊之每一區塊；一自動縮放模組，用以調整該網頁複數個區 塊之每一區塊的寬度使符合該瀏覽器寬度；一輸出模組，用以將已調整完各區塊寬度之該網頁重新顯示於該裝置之該瀏覽器中；以及一資料庫，用以儲存該預設版面。

依據本發明系統一實施方式，該自動縮放模組係可執行以下步驟以調整網頁中每一區塊大小：若所偵測到裝置之瀏覽器寬度大於該預設版面之寬度，則放大每一區塊，反之，當所偵測到裝置之瀏覽器寬度小於該預設版面之寬度，則縮小每一區塊；其中該預設版面寬度可為2,560像素、1,600像素、1,080像素、1,024像素、960像素、800像素、720像素、480像素或320像素。

依據本發明系統一實施方式，所述系統更包含一輪播模組，用以當網頁複數個區塊中之一區塊為包含至少一圖片檔，且每一圖片檔分別對應於一網址時，可調整圖片檔之寬度，並將調整後之圖片檔與網址連結，以及回傳連結有網址的圖片檔，並將其顯示於區塊中。

依據本發明系統另一實施方式，所述系統更包含一影片模組，用以當網頁複數個區塊中之一區塊包含可由多媒體檔案播放器播放之多媒體檔案時，可調整多媒體檔案及多媒體檔案播放器之寬度，以及回傳調整後之多媒體檔案及多媒體播放器，並顯現於區塊中。

依據本發明系統再一實施方式，當網頁該些區塊中至少一區塊不包含對應內容時，本發明系統之排版模組可執行下列步驟：隱藏該不包含對應內容之區塊， 以及以和此不包含對應內容之區塊(或稱隱藏區塊)相鄰的其他區塊內容來填補此隱藏區塊原所占據的面積。

上述排版模組執行之填補指令更包括計算與不包含對應內容之區塊左右相鄰之區塊數量，將不包含對應內容之區塊寬度依據相鄰之區塊之數量等分，以取得一第一寬度，以及將每一相鄰之區塊寬度分別增加第一寬度。

依據本發明系統再一實施方式，本發明系統之記憶體更包括用以產生預設版面之指令，其係可於空白版面中建立複數個區塊以形成預設版面，其中每一區塊分別與電子文件之緩存節點連結，並將由緩存節點所對應之電子文件顯示於區塊內，再將預設版面儲存於伺服器中。

依據本發明系統再一實施方式，所述系統更包括一緩存節點模組，用以產生緩存節點，其係透過伺服器接收並儲存由使用者上傳之電子文件，產生對應電子文件之識別代碼，並將識別代碼寫入至資料庫中，以及藉由識別代碼及電子文件儲存位置產生緩存節點。電子文件為便攜式檔案文件(PDF)、圖片檔案、文字檔案、聲音檔案或多媒體檔案。

在參閱下文實施方式後，本發明所屬技術領域中具有通常知識者當可輕易瞭解本發明之基本精神及其他發明目的，以及本發明所採用之技術手段與實施態樣。

1,1a‧‧‧裝置

5‧‧‧網際網路

100,200,300,600,700,1300,1400‧‧‧系統

110‧‧‧記憶體

120‧‧‧揮發式記憶體

130‧‧‧非揮發式記憶體

140‧‧‧處理器

150‧‧‧儲存裝置

160‧‧‧網路通訊裝置

210,310,610,710, 1310,1410‧‧‧網頁伺服器

212,312,612,712, 1312‧‧‧偵測模組

214,314,614,714, 1314,1414‧‧‧緩存節點模組

216,316,616,716,1316‧‧‧強波模組

218,318,618,718,1318‧‧‧排版模組

220,320,620,720,1320‧‧‧自動縮放模組

221,321,621,721,1321‧‧‧輸出模組

622,722,1322‧‧‧輪播模組

624,724,1324‧‧‧影片模組

1326,1426‧‧‧認證模組

1328,1428‧‧‧檔案模組

1329,1429‧‧‧區塊模組

230,330,630,730,1330,1430‧‧‧資料庫伺服器

232,332,632,732,1332‧‧‧比對模組

234,634,1334,1434‧‧‧新增模組

236,636,1336,1436‧‧‧刪除模組

250,350,650,750,1350,1450‧‧‧資料庫

360、760、1460‧‧‧網頁

1202~1236‧‧‧區塊

1602~1622‧‧‧區塊

為讓本發明的上述與其他目的、特徵、優點與實施例能更明顯易懂，所附圖式之說明如下：第1圖為依照本發明系統一實施方式所繪示的硬體架構示意圖；第2圖為用以實施本發明系統所繪示的網路環境示意圖；第3圖為在本發明系統上實施第4圖流程圖所示方法時，各步驟作用於系統模組的示意圖；第4圖為依照本發明方法一實施方式所繪示的流程圖；第5圖為依照本發明方法另一實施方式所繪示的流程圖；第6圖為用以實施本發明系統所繪示的另一網路環境示意圖；第7圖為在本發明系統上實施第8圖流程圖所示方法時，各步驟作用於系統模組的示意圖；第8圖為依照本發明方法另一實施方式所繪示的流程圖；第9A圖為依照本發明一實施方式所繪示的預設版面寬度為大於800像素之預設版面示意圖；第9B圖為當使用者裝置之瀏覽器寬度為4,800像素時，依據第9A圖之預設版面重排後之網頁版面示意圖； 第9C圖為依照本發明一實施方式所繪示的瀏覽器寬度小於300像素之預設版面示意圖；第9D圖示出當使用者裝置之瀏覽器寬度為300像素時，依據第9C圖之預設版面重排後之一網頁版面示意圖；第10圖繪示出依照本發明方法另一實施方式的流程圖；第11圖繪示出依照本發明方法再一實施方式的流程圖；第12A至12E圖為依照本發明不同實施方式所繪示之不同預設版面的區塊排列方式示意圖；第13圖為用以實施本發明系統所繪示的又一網路環境示意圖；第14圖為依照本發明系統一實施方式用來產生、刪除或修改一預設版面的架構圖；第15圖為依照本發明方法一實施方式用來產生一預設版面的流程圖；以及第16圖為依照本發明一實施方式所繪示之可依使用者喜好而改變的預設版面示意圖。

根據慣常的作業方式，圖中各種特徵與元件並未依比例繪製，其繪製方式是為了以最佳的方式呈現與本發明相關的具體特徵與元件。此外，在不同圖式間，以相同或相似的元件符號來指稱相似的元件/部件。

為了使本揭示內容的敘述更加詳盡與完備，下文針對了本發明的實施態樣與具體實施例提出了說明性的描述；但這並非實施或運用本發明具體實施例的唯一形式。實施方式中涵蓋了多個具體實施例的特徵以及用以建構與操作這些具體實施例的方法步驟與其順序。然而，亦可利用其他具體實施例來達成相同或均等的功能與步驟順序。

除非本說明書另有定義，此處所用的科學與技術詞彙之含義與本發明所屬技術領域中具有通常知識者所理解與慣用的意義相同。此外，在不和上下文衝突的情形下，本說明書所用的單數名詞涵蓋該名詞的複數型；而所用的複數名詞時亦涵蓋該名詞的單數型。

本說明書所述之「裝置(device)」係指具有一瀏覽器且可連接網際網路之顯示裝置。適於本發明內容之裝置可以但不限於電視、電腦、手機之類的顯示裝置，包括桌上型或手提電腦、平板電腦、智慧型電視、一體化顯示器(all in one Monitor)、LCD觸控式白板(LCD touch whiteboard)等，並可安裝不同之作業系統，舉例但不限於Windows、Linux、iOS、Unix、Android等；瀏覽器可以為市面上常見的瀏覽器，如：IE、Firefox、Opera、Safari、Chrome等，亦可以為於顯示裝置端之行動軟體應用程式，但不限於此。

本說明書所述之「網頁(a web page)」係可透過伺服器預設一個基準放大寬度，並針對不同的瀏覽器版本及寬度預設有複數個對應的版面，且版面中具有複 數個區塊。上述之基準放大寬度為伺服器中設置之寬度預設值，係因當區塊之寬度增加時，區塊對應之文字、影片、圖片等內容雖會隨著區塊寬度增加，但像素數目並未隨之增加，因此，當使用者瀏覽此寬度增加之區塊時，將導致解析度降低。基準放大寬度即為當區塊放大至基準放大寬度時，使用者之肉眼可忍受之最大失真程度。當偵測到的瀏覽器寬度大於此基準放大寬度時，即進行強波處理(即，提高版面區塊像素的步驟)，以避免版面放大後失真。由於每一使用者對於失真之感知不同，系統可更改不同預設值，舉例而言，此基準放大寬度可為2,500像素、2,560像素、4,800像素、9,600像素等。區塊係為網頁中呈現不同資訊內容的區域，舉例而言，可以為標頭、選單、文字、圖片、影片、多張圖片輪播式廣告連結、音訊播放、版權宣告、聯絡資訊等內容，且一區塊範圍並非藉由資訊種類來界定，而是藉由該區塊所呈現之內容來判定。舉例而言，當網頁呈現兩塊不同主題的文字，亦視為不同的區塊。每一區塊皆分別依據不同裝置內之瀏覽器種類預設一個符合該瀏覽器的寬度，此區塊預設符合瀏覽器之寬度係可使同一水平的區塊寬度、網頁或區塊之邊框三者之總和需等同於瀏覽器的寬度。舉例而言，當瀏覽器寬度為1,200像素，網頁及區塊四周不留邊時，同一水平高度的區塊共1塊，則此區塊的寬度即為1,200像素；若同一水平的區塊有3塊，則每一區塊寬度即為400像素。

本說明書所述之「版面(page layout)」係指呈 現給使用者之網頁排版方式，詳言之，即為不同區塊在網頁中擺放及呈現之方式。而本說明書所述之預設版面係針對不同之瀏覽器種類及瀏覽器寬度皆設置有相應之預設版面，也就是說，系統包含有複數個預設版面。預設版面可為系統中所預設之版面配置方式，或是使用者自行設置並儲存之版面配置方式(即，客製化的預設版面)。也就是說，除了系統預設外，使用者亦可於伺服器中自行改變版面之區塊配置，並將該配置儲存為一客製化的預設版面。由於瀏覽器寬度之可變範圍很廣，本發明系統或方法即令不同的瀏覽器寬度範圍對應至不同的預設版面。舉例來說，從寬度為0像素至1,024像素間分為三個寬度範圍，分別為0像素至300像素、301像素至720像素及721像素至1,024像素，分別對應至不同的預設版面，但不限於此。也就是說，針對不同種類與寬度的瀏覽器皆有對應之版面配置方式，但在同一寬度範圍內，即便瀏覽器寬度增加或減少，其所對應之預設版面皆為同一個，排版之方式也相同。於本揭示內容中，預設版面之寬度區間的邊界值可為2,560像素、1,600像素、1,080像素、1,024像素、960像素、800像素、720像素、480像素或320像素。於本揭示內容一實例中，以800像素作為預設版面寬度。於於本揭示內容另一實例中，則是以300像素作為預設版面寬度。

第1圖為用以建置本揭示內容所述系統100的硬體架構圖。此系統100可以是任一類型的電子計算系統，且熟知此項技藝人士可了解無論此電子計算系統 是可供多名使用者同時登入並使用的複雜的電腦設備、只供單一使用者使用的工作站或是手持裝置，本發明方法或系統同樣適用於這些電子計算系統。此外，無論此電子計算系統是獨立存在或是屬於一複雜網路的成員之一，本發明方法或系統同樣適用。如第1圖所示，此系統硬體100包含一處理單元140(如，中央處理器(CPU))；一記憶體110其包括揮發性記憶體120及非揮發性記憶體130，用以儲存待執行之指令；一儲存裝置150，用以儲存資料庫以及各種電子文件或資訊；以及一網路通訊裝置160，用以使本系統與網際網路連結。揮發性記憶體120意指當電源中斷時，記憶體內所儲存之資料會隨著電源中斷而消失，這類記憶體包括，但不限於，隨機存取記憶體(random access memory,RAM)，例如動態隨機存取記憶體(DRAM)(如，同步動態隨機存取記憶體第三代(DDR 3))；或是靜態隨機存取記憶體(SRAM)。相反的，非揮發性記憶體130意指當電源中斷時，儲存於其中之資料並不會隨之消失這類記憶體包括，但不限於，唯讀記憶體(read-only memory(ROM))或快閃記憶體(flash memory)。上述儲存裝置150可為一硬碟、一雲端硬碟等類似裝置。在本發明一實例中，此儲存裝置150為一硬碟。

本發明各實施方式可以邏輯運算的形式在一網路環境中實施。如第2圖所示，此網路環境會包括有使用者裝置1、1a和伺服器系統200。在如第2圖所示的使用者-伺服器環境中，使用者裝置1(如，個人電腦)或1a(如手機)上有一內建的瀏覽模組(其為該裝置作業系統 的一部分)，用以經由網際網路5而連結至一遠端系統200，以瀏覽該系統200所提供的網頁內容。在接收到使用者裝置1或1a欲瀏覽該網頁的請求時，系統200會搜尋、回傳並顯示與該使用者裝置1或1a瀏覽器大小相符的網頁內容，使得無論該使用者裝置1或1a之瀏覽器種類、大小或版本為何，都能完整顯示所欲瀏覽之網頁內容。又如先前所述，瀏覽器可為顯示裝置端之行動軟體應用程式。舉例而言，於使用者裝置1a中具有一行動軟體應用程式，此行動軟體應用程式可與本系統相連。當行動軟體應用程式接收到欲瀏覽之網頁資料時，行動軟體應用程式會透過網際網路連至本系統，系統即可偵測行動軟體應用程式之寬度，並依據偵測到的行動軟體應用程式之寬度自動縮放、重新排列此欲瀏覽之網頁，並回傳顯示調整好的網頁至行動軟體應用程式中。使用行動軟體應用程式之優點為由於大部分的行動軟體應用程式寬度預設值與顯示裝置相同，因此當系統針對行動軟體應用程式進行自動排版及縮放欲瀏覽之網頁後，最終呈現的版面會與顯示裝置之寬度相同，以使使用者方便閱覽。

本發明的邏輯運算是以電腦可執行的步驟或順序於局部電腦或網路伺服系統(如，本發明系統200)中互連的機器模組上實施。因此，本文所述由本發明系統所執行的邏輯運算是指可於軟體、韌體或特定目的之數位邏輯中實施的步驟、動作或模組。在第2圖所示實施例中，系統200包括有兩個伺服器，分別為網頁伺服器 210和資料庫伺服器230(e.g.,SQL伺服器)，以及資料庫250。網頁伺服器210至少具有偵測模組212、強波模組216、排版模組218、自動縮放模組220、輸出模組221以及，一非必要的緩存節點模組214。至於資料庫伺服器230則至少具有比對模組232、新增模組234以及刪除模組236。適用於本發明系統的網頁伺服器230可包含，但不限於，Apache網頁伺服器或網路資訊服務(internet information service,IIS)伺服器。

網頁伺服器210之偵測模組212係可提供指令用以執行以下步驟：偵測並接收使用者裝置1或1a之瀏覽器種類、版本及寬度；依據所偵測到的該瀏覽器寬度，找出在伺服器內相應於該瀏覽器寬度之一預設版面。在本發明中已針對不同寬度之瀏覽器預設有相對應網頁的預設版面，因此當系統接獲使用者裝置1或1a傳送來瀏覽網頁的請求時，系統200的偵測模組212會判斷系統200是否支援所偵測到的瀏覽器種類、版本，一旦確認裝置1或1a內建的瀏覽器種類與寬度後，可再利用資料庫伺服器120存取資料庫250內相應於該瀏覽器寬度所預設之版面，並以此預設版面重排該網頁各區塊，之後，再將該網頁所對應之內容，呈現在該使用者裝置1或1a的瀏覽器內。相關用來重排網頁區塊的模組以及顯示已重排之網頁內容的模組將於下文中再進行詳細介紹。

於本發明中，為加速系統運作，可於網頁伺服器210中額外設置一緩存節點模組214，用以產生相關 電子文件的緩存節點鏈結(cache node link)，或是從伺服器210中找出對應至相關電子文件的緩存節點鏈結。且，如果當該緩存節點鏈結符合所偵測到的該瀏覽器種類、版本及寬度時，可立即回傳該緩存節點鏈結至用者裝置的瀏覽器中，並將對應的電子文件顯示在該使用者裝置1或1a中。相反的，如果伺服器中不存在與所偵測到的瀏覽器種類、版本及寬度相符的緩存節點鏈結時，則啟動自動縮放模組220，用以提供指令以縮放該網頁，並以內建於該使用者裝置1或1a的瀏覽器來呈現已經過本發明系統縮放處理的網頁內容在該使用者裝置上。

如果所偵測到的該使用者裝置1或1a的瀏覽器寬度大於所要求瀏覽的網頁寬度，則需先將網頁放大後才能呈現在使用者裝置1或1a上。當網頁被放大時，每一區塊面積雖被放大，但區塊中所含內容的像素數目仍然相同，因此會導致網頁失真。為避免此問題，本發明系統200中設置了強波模組216，用以當裝置1或1a之瀏覽器寬度大於網頁伺服器210內建之一網頁的基準放大寬度時，增加網頁內每一區塊的像素數目，以提高其解析度，避免該網頁經放大後失真。在一實施例中，該網頁之基準放大寬度為2,560像素。

為因應裝置1或1a之不同瀏覽器寬度，本發明系統200之排版模組218可依據偵測模組212所偵測並決定之對應該瀏覽器寬度之預設版面，而於裝置1或1a之網頁上重新排列該網頁複數個區塊之每一區塊。如先前所述，在同一寬度範圍內，即便寬度增加或減少， 對應之預設版面皆為同一個，因此自動縮放模組220係用以調整網頁區塊已經過重排之網頁中每一區塊的寬度，以使預設版面之寬度被調整至符合裝置1或1a瀏覽器的寬度。隨後，自動縮放模組220會調整各區塊已重新排列之網頁中每一區塊的寬度，使與偵測到的使用者裝置瀏覽器寬度相符。在本文中，「相符」一詞代表使經過本發明系統或方法處理過之網頁區塊的寬度小於或等於使用者裝置之瀏覽器的寬度。依據本發明某些實施方式，自動縮放模組220可產生指令以執行下列動作：放大已重新排列之網頁之每一區塊(亦即，增加網頁中每一區塊寬度)，如果該瀏覽器寬度大於該網頁之預設版面寬度；或是，縮小該已重新排列之網頁之每一區塊(亦即，減少網頁中每一區塊寬度)，如果該瀏覽器寬度小於該網頁之預設版面寬度；其中該預設版面寬度可為2,560像素、1,600像素、1,080像素、1,024像素、960像素、800像素、720像素、480像素或320像素。隨後，可經由輸出模組222將該區塊已重新排列且區塊寬度已調整成與瀏覽器寬度相符之網頁回傳並顯示在該使用者裝置1或1a之瀏覽器中。

資料庫伺服器230至少具有比對模組232、新增模組234以及刪除模組236，用以接收並執行自伺服器傳送來的有關在資料庫中進行搜尋、新增或刪除工作的指令。舉例來說，當偵測模組212偵測到裝置1或1a之瀏覽器寬度時，會產生指令傳送至比對模組232，比對模組232即可搜尋對應裝置1或1a瀏覽器寬度之預設版 面。新增模組234及刪除模組236於下文介紹新增及刪除時另以介紹。於本實施例中，資料庫伺服器120包括，但不限於，SQL伺服器、MySQL伺服器或Oracle伺服器。

第3圖為依照本發明系統一實施方式所繪示的系統圖，用以執行如第4圖流程圖中所繪示的處理步驟。同時參閱第3及4圖，如第3圖所示，在一網路環境中，當使用者裝置1透過網路連結至系統300時，偵測模組312會先偵測裝置1之瀏覽器種類、版本及寬度，以判斷系統300是否支援裝置1之瀏覽器種類及版本(第4圖，步驟S410)，並進一步產生適用於資料庫之搜尋指令，並將該搜尋指令傳遞至比對模組332中以找出對應該瀏覽器寬度的一預設版面(第4圖，步驟S430)。但是，於產生並傳遞搜尋指令至比對模組332前，強波模組316會先判斷裝置1之瀏覽器寬度是否大於網頁伺服器內對應網頁之基準放大寬度(第4圖，步驟S420)，若裝置1之瀏覽器寬度大於網頁伺服器內對應網頁之基準放大寬度，則強波模組316將先增加該些區塊之每一區塊的像素數目，以提高網頁中每一區塊之解析度(第4圖，步驟S422)；當瀏覽器寬度不大於網頁之基準放大寬度時，強波模組316則不進行任何動作，且本發明方法將續行至下一步驟，即第4圖，步驟S430。比對模組332於接收到偵測模組312所生成之搜尋指令後，將執行該指令以搜尋資料庫350中對應於裝置1瀏覽器寬度之預設版面，並將該預設版面資訊傳送至排版模組318(第4圖，步驟S430)。接著，排版模組318接收經強波模組316處理過 之區塊以及由比對模組332傳送來之預設版面後，即依照預設版面之排版方式重新排列網頁中的區塊(第4圖，步驟S440)。接著，將區塊已經排版模組318依預設版面重新排列之網頁360傳遞到自動縮放模組320，以將網頁內區塊大小調整至符合裝置1瀏覽器的大小(第4圖，步驟S450)。亦即，區塊寬度必須小於或等於瀏覽器寬度。接著，再將此已調整完各區塊寬度之網頁360(亦即，最終呈現於裝置1瀏覽器上之網頁)，交由輸出模組321回傳至裝置1以便重新顯示(第4圖，步驟S460)。

復如第3圖所示，於本系統另一實施例中，可非必要的加入一緩存節點模組314(如圖中虛線所繪示)，用以判定系統中是否存有對應該網頁預設版面之緩存節點鏈結。當系統內具有相應於該預設版面之緩存節點時，即可立即將此緩存節點回傳至裝置1之瀏覽器中，以節省系統300執行運算之時間與負擔，也就是說，系統300即不需進行下列強波、排版以及自動縮放之步驟。有關於緩存節點模組214將於下文再詳加說明。

再次參照第4圖，其為可於第3圖所示之本發明系統上實施的方法400之流程圖。在步驟S410中，偵測模組312會判斷透過網際網路連結本發明系統之該裝置1內建之瀏覽器種類、版本及寬度。所述S410步驟係用以判斷此瀏覽器之環境是否能支援本網站使用之語法，當此瀏覽器無法支援本網站使用之語法時，系統將做出對應的回應，包含，但不限於，設置彈出式視窗或直接引導至其他頁面以告知使用者須更新瀏覽器。

接著，在步驟S420中，判斷前一步驟所偵測到的瀏覽器寬度是否大於儲存在系統300內該網頁360之一基準放大寬度。若步驟S410所偵測到的瀏覽器寬度大於該網頁360之基準放大寬度時，則強波模組316將執行其中之一指令或步驟S422，以增加該網頁中每一區塊內的像素數目。在步驟S422中，是透過複製每一點像素的方式來增加像素之數量，藉此達成提高解析度之效果。

在步驟S430中，旨在找出儲存在資料庫350內相應於步驟S410所偵測到的瀏覽器寬度之預設版面。如前述，本發明方法已於資料庫伺服器330內針對不同的瀏覽器種類及寬度設置有相對應之預設版面並儲存於資料庫350。因此，當實施本發明方法步驟S410並取得瀏覽器種類與寬度後，即可依瀏覽器的種類與寬度讀取資料庫中對應於該瀏覽器之預設版面。如先前所述，在同一寬度範圍內對應之預設版面皆相同，因此當系統判斷出瀏覽器對應之預設版面後，即可判斷出所偵測到的瀏覽器寬度所會落入之寬度區間，因此可找出對應於此寬度區間的預設版面，以供後續排版之用。

在步驟S440中，排版模組318將以S430中所找到的預設版面為基準，重新排列網頁中複數個區塊之每一區塊。接著，在步驟S450中，調整該些已重新排列之每一區塊的寬度，使該些已重新排列之每一區塊整體寬度符合瀏覽器的寬度。此調整區塊寬度的指令是由自動縮放模組320所發出，且一旦網頁360中每一區塊 已重新排列並調整寬度使與瀏覽器寬度相符，最後，即可執行網頁伺服器310中之一指令或行步驟S460，將該網頁360重新顯示於使用者裝置1之瀏覽器中(步驟S460)。

第5圖繪示出本發明方法另一實施方式的流程圖，其與第4圖所繪示之方法流程的差異在於增加了指令或步驟S512、S514、S552、S554和S556，其中步驟S512和S51係用以判斷系統中是否存在有一與預設版面相應的緩存節點鏈結；而步驟S552、S554和S556則是用來縮放網頁360。

在步驟S512和S514中，如果系統中已存在相應於預設版面之緩存節點時，即可經由緩存節點模組314即時回傳該緩存節點至裝置1之瀏覽器中，以節省系統200的執行時間與負擔，並略過後續步驟S552、S554和S556。當系統內不具相應於預設版面之緩存節點時，則繼續執行S520至S560之步驟。在本實施方式中，步驟S520至S540與第4圖之步驟S420至S440相似，並將第4圖之步驟S450進一步區分成步驟S552、S554和S556。詳言之，在步驟S552中，比較裝置1之瀏覽器寬度與該預設版面之寬度(或是該區塊已重新排列之網頁寬度)。如果裝置1之瀏覽器寬度大於該預設版面之寬度，可接續執行步驟S554以放大該複數個區塊之每一區塊(亦即，增加每一區塊寬度)，若所偵測到裝置1之瀏覽器寬度小於該預設版面之寬度時，則接續執行步驟S556以縮小該複數個區塊之每一區塊(亦即，減少每一區塊寬度)。 當執行完步驟S554、S556或當所偵測到裝置1之瀏覽器寬度等於該預設版面之寬度時，即執行步驟S560，將已調整完各區塊寬度之網頁360重新顯示於裝置1之瀏覽器中。步驟S554或步驟S556中所述之放大或縮小每一區塊，係指放大或縮小每一區塊之寬度，至於是否調整該區塊的高度，則可依使用者選擇或系統預設來決定。

請參閱第6圖，其繪示出依照本發明系統又一實施方式的示意圖。如圖所示，本實施方式系統600與第2圖實施方式系統200不同處在於，本系統600額外具有輪播模組622及影片模組624。

輪播模組622可產生用以在網頁之一區塊內顯示至少一圖片檔的指令，且其中每一圖片檔是與一網址鏈結。依據本發明一些實施方式，輪播模組622可依據一預先決定的顯示順序或名單輪流顯示至少1、2、3、4、5、6、7、8、9、或10張圖片於該網頁之一區塊內。舉例來說，當網頁660之一區塊中包含兩張圖片檔，且每一圖片檔分別與一網址鏈結。當自動縮放模組620僅依據預設版面配置方式調整網頁中各區塊大小與排列，但並未將相關鏈結網址與欲顯示的圖片重新連結，則會導致第一張圖片檔輪播至第二張圖片時，第二張圖片將僅受對應第二張圖片之程式碼控制，而忽略調整區塊大小之程式碼，造成輪播圖片大小超出或小於網頁區塊的實際範圍。為解決此問題，輪播模組622之目的即為分別調整各區塊內每一張圖片檔之大小，並重新生成調整過大小且與網址連結的圖片檔，以避免與網址連結之圖 片檔之寬度超出或小於網頁區塊的實際範圍。詳言之，輪播模組622係包括指令以執行下列步驟：依據該裝置1之瀏覽器寬度，調整該圖片檔之寬度；將該調整後之圖片檔與該網址連結；回傳該連結有網址的圖片檔並將其顯示於該區塊中。

至於影片模組624，其係包含用以在網頁之一區塊內播放至少一影片檔的指令，依據本發明一些實施方式，影片模組622可依據一預先決定的播放順序或名單輪流播放至少2、3、4、5、6、7、8、9、或10個影片檔於該網頁之一區塊內。詳言之，該多媒體檔案係可依據預先決定的播放順序或名單依序以多媒體播放器播放至少一多媒體檔案於該區塊中。依據本發明一些實施方式，本發明系統600之影片模組624內所包含的指令係可執行下列動作：分別調整多媒體檔案及多媒體檔案播放器之寬度，使兩者之大小一致，並符合偵測模組610所偵測到之瀏覽器寬度；將此已調整完寬度的多媒體檔案及多媒體檔案播放器回傳至該區塊內，以便顯示於該區塊中。換言之，多媒體檔案及多媒體檔案播放器的寬度必須始終保持與瀏覽器寬度一致(亦即，等於或小於該瀏覽器寬度，最好是等於瀏覽器寬度)。較佳是，多媒體檔案播放器以及多媒體檔案都必須能隨瀏覽器寬度而改變，亦即放大或縮小。此外，當本發明系統是建置於HTML(HyperText Markup Language，HTML)之環境下時，此多媒體檔案播放器之寬度將被限制於HTML之DIV(division)語法之寬度中。舉例而言，此多媒體播放器包含，但不 限於，使用JavaScript或JavaQuery所開發出來的多媒體播放器；相反地，此多媒體播放器不包含應用flash或java開發之多媒體播放器。

第7圖為在本發明系統上實施第8圖流程圖所示方法時，各步驟作用於系統模組的示意圖。除了多加了輪播模組722及影片模組724外，本發明系統700與第3圖所示系統300的配置類似。請同時參閱第7圖與第8圖，特別是用來執行第8圖所示步驟S832、S8320、S8322和S8324的輪播模組722；以及用來執行第8圖所示步驟S834、S8340和S8342的影片模組724。如第8圖所示，在執行排版模組718依照步驟S830所找出的預設版面之排版方式，重新排列網頁中各區塊之前，需先執行步驟S832，以決定各區塊中是否包含有至少一圖片檔，且該圖片檔連結有一網址鏈結。如果區塊中包含有至少一圖片檔且每一圖片檔連結有一網址鏈結，則會啟動輪播模組722，以執行步驟或指令：調整該圖片檔之寬度使符合該裝置之該瀏覽器寬度(S8320)；將該調整後之圖片檔與該網址連結(S8322)；並回傳該連結有網址的圖片檔到該區塊中(S8324)，以避免與網址連結之圖片檔之寬度超出或小於實際區塊範圍。相反的，如果區塊中包含有可由一多媒體播放器播放之至少一多媒體檔時，則會啟動影片模組724，以執行步驟或指令：分別調整該多媒體檔案及該多媒體檔案播放器之寬度使符合在步驟S810中獲得的該裝置之瀏覽器寬度(S8340)；以及回傳該調整後之多媒體檔案及多媒體播放器，並將可由多媒體播放器 播放之多媒體檔案顯現於該區塊中(S8342)。此外，此調整具有對應網址之圖片檔寬度之步驟(S832、S8320、S8322、S8324)與調整由多媒體檔案播放器播放之多媒體檔案步驟(S834、S8340、S8342)，兩者並沒有實施順序的限制。另，此調整圖片檔(其對應於一網址)之步驟及調整由多媒體檔案播放器播放之多媒體檔案步驟亦可分別單獨存在，不限於本實施方式。

請參閱第9A與第9B圖，其為依照本發明一實施方式所繪示的預設版面示意圖。於本實施方式中，將第9A圖所示適用於瀏覽器寬度大於800像素之預設版面稱為「第一版面」，且適用此版面之網頁的基準放大寬度為2,560像素。於本實施方式中，當本發明系統依據前述本發明方法偵測、接收及判斷出使用者裝置1內建的瀏覽器種類、版本及寬度後，確認此裝置1上之瀏覽器寬度為4,800像素時，因其大於預設的網頁基準放大寬度-2,560像素，故本發明系統會如第8圖所述，先複製每一區塊之像素，以增加區塊每一區塊的像素數目，接著找出系統4內相應於4,800像素的預設版面，即第9A圖所示的第一版面，並依據第一版面重新排列網頁中該些區塊。由於4,800像素之版面寬度大於800像素之版面寬度，因此於重新排列該些區塊後，系統會放大網頁中已重新排列之每一區塊的寬度，使得該些區塊已重新排列之網頁符合4,800像素之寬度，最後再回傳已調整完各區寬度之網頁並將其顯示於使用者裝置1的瀏覽器中，如第9B圖所示。

第9C圖與第9D圖示出當瀏覽器寬度小於800像素時之預設版面，在本文中稱為「第二版面」。在本實施方式中，當系統偵測、接收及判斷出使用者裝置1內建的瀏覽器種類、版本及寬度後，確認此瀏覽器之寬度為300像素，並未大於本實施方式所設定的網頁基準放大寬度(即，2,560像素)，因此不須提高解析度。接著系統再從伺服器中找出相應於300像素的排版方式，如第9B圖所示，並依據第二版面重新排列區塊。由於300像素之版面寬度小於800像素之版面寬度，因此於重新排列該些區塊後，系統會將區塊已重新排列後之網頁的每一區塊的寬度縮小，使得已重新排列之網頁符合300像素之寬度，最後再回傳該已調整完各區間寬度之網頁，並顯示於裝置之瀏覽器中，如第9D圖所示。

第10圖為依照本發明所述方法再一實施方式的流程圖。於本實施例中，當網頁中複數個區塊中之一區塊內不包含對應內容時，在步驟S1040依據步驟S1030所找出的預設版面重新排列網頁中該些區塊之前，更包括實施步驟S1035，以判斷該複數個區塊之一是否不包含對應內容，若該些區塊之一區塊確實不包含對應內容，則執行步驟S10350，隱藏此不包含對應內容之區塊(或稱「隱藏區塊」)；以及執行步驟S10352，利用與該隱藏區塊相鄰之其他區塊的內容來填補原先由該隱藏區塊所占據的面積。由於不同區塊可依據使用者之設置與需求對應至各種不同的內容，如：照片、文字、多媒體檔案、連結、與網址連結之圖片檔等但不限於此，使用 者亦可選擇此區塊不對應任何內容，此時，為了方便閱覽，系統會自動調整每一區塊的大小，以填補不包含對應內容之區塊。

第11圖繪示出依照本發明方法再一實施方式的流程圖，除了相應於步驟S10350與S10352之填補步驟外，其大致與第10圖所示流程圖相同。本實施方式之填補步驟除了與第10圖步驟S10352相同的步驟S11350外，更包括步驟S11352、S11354以及S11356。在步驟S11350中，隱藏不包含對應內容之區塊(以下稱其為「隱藏區塊」)；在步驟S11352中，計算與該隱藏區塊左右相鄰之該些區塊數量；在步驟S11354中，將該隱藏區塊寬度依據相鄰區塊之數量等分，以取得一第一寬度；至於步驟S11356，則是將每一相鄰區塊的寬度分別增加該第一寬度。

接著，請參閱第12A圖至第12E圖，其為依照本發明一實施方式所繪示之一預設版面示意圖，其中該預設版面之複數區塊中至少一區塊不包含對應內容。如第12A圖所示，預設版面中具有A區塊1202a與B區塊1204a，且兩區塊均位於同一水平高度。當B區塊1204a不包含對應內容時，系統會執行步驟S10350，將B區塊1204a隱藏起來，接著再執行步驟S10352，以與該被隱藏區塊(即，B區塊1204a)相鄰之A區塊1202a的內容，來填補原先該B區塊所占據的面積，以形成A’區塊1202b。在此例中，A區塊1202a與A’區塊1202b對應之內容相同，差異僅為區塊之寬度不相同。

請參閱第12B圖，在此實施方式中，所示網頁之預設版面具有C區塊1212a、D區塊1214a及E區塊1216a，均位於同一列中。當D區塊1214a不包含對應內容時，系統將執行步驟S11350，將D區塊1214a隱藏(以下稱隱藏區塊)。接著，系統會執行步驟S11352，計算與隱藏之D區塊1214a左右相鄰之區塊的數量，在本實施方式中，共有兩相鄰區塊，為C區塊1212與E區塊1216a。接著，執行步驟S11354，將該隱藏之D區塊1214a之寬度依據相鄰之區塊(即，C區塊1212a與E區塊1216a)之數量等分，以獲得一第一寬度。在本實施方式中，第一寬度即為D區塊1214a寬度的一半。接著，系統會執行步驟S11356，將相鄰的C區塊1212a和E區塊1216a寬度分別增加第一寬度，形成C’區塊1212b和E’區塊1216b，以填補D區塊1214a之位置。

請再參照第12C圖所示之另一實施方式，所示預設版面中具有區塊1222a、區塊1224a、以及區塊1226a，其中，區塊1222a的高度大於區塊1224a及區塊1226a，並為區塊1224a及區塊1226a高度之總和，也就是說，區塊1222a的高度對應至不同列之區塊1224a以及區塊1226a。如第12C圖所示，當區塊1222a不包含對應內容時，系統會隱藏區塊1222a，並調整區塊1224a與區塊1226a之寬度。由於區塊1224a與區塊1226a位於不同列，因此區塊1224a與區塊1226a的寬度皆為分開計算的，也就是修改寬度並不會造成彼此的影響，因此區塊1224a與區塊1226a之寬度皆要分開調整。舉例 而言，區塊1224a為區塊1222a相鄰的區塊，於區塊1224a之列中僅有區塊1224a一塊，因此將區塊1222a之寬度除以1(即，相鄰區塊數目等於1)，並使區塊1224a加上此區塊1222a之寬度，成為區塊1224b。依照同樣方式調整區塊1226a的寬度，而成為區塊1226b。

第12D圖示出另一種實施方式，在第12D圖最上方所示版面配置共包含區塊1222a、1224a和1226a，其中1224a和1226a分別位於不同上、下列。當區塊1224a不包含對應內容時，由於區塊1224a與區塊1226a之寬度為獨立計算的，因此更改區塊1226a之寬度並無法填補區塊1224a之位置，然若改變區塊1222a之寬度，不僅會影響到區塊1226a之寬度且區塊1226a之上方仍為空白區塊。因此，在系統隱藏區塊1224a之位置後(參見第12D圖中間小圖)，會使區塊1226a之高度變高，以填補區塊1224a之位置(參見第12D圖下方小圖)。

請參閱第12E圖，第12E圖中揭示了上下堆疊的區塊1232a、區塊1234a以及區塊1236a，分別位於不同列。當區塊1234a不包含對應內容時，由於區塊1234a並不具有相鄰的區塊，因此在系統將隱藏區塊1234a後，下方之區塊1236a即向上移以填補區塊1234a之位置。

第13圖繪示依照本發明系統另一種實施方式的示意圖。如圖所示，本系統1300之配置方式與第7圖中的系統700類似，但本系統1300網頁伺服器1310中更包含了一認證模組1326、一檔案模組1328以及一區 塊處理模組1329。認證模組1326係用以辨識使用者之個人資訊，以使系統1300可以分辨由該使用者所儲存的一種預設排版模式(或預設版面)，亦可保護每一使用者之內容不被他人竄改。此外，若使用者並未於本系統中註冊成為會員，認證模組1326亦可接收使用者之註冊資訊並儲存成為會員資料。檔案模組1328係用以接收使用者上傳之電子文件(electronic document,ED)，並生成對應此電子文件之識別代碼。此外，檔案模組1328亦會產生可供資料庫伺服器1330之新增模組1334可以執行之程式碼，藉由執行此程式碼，資料庫伺服器1330可將此電子文件及其識別代碼族存於資料庫1350中。類似地，當使用者刪除一電子文件時，檔案模組1328亦可生成可供資料庫伺服器1330之刪除模組1336執行之程式碼，以刪除此電子文件及其識別代碼。於本實施例中，系統1300還可選擇性的包括有一緩存節點模組1314。緩存節點模組1314係利用ED之識別代碼以及ED本身的儲存位置，來生成一緩存節點。區塊模組1329係用於接收使用者對於區塊配置之安排、設置對應於不同區塊之電子文件，並依照使用者之操作而生成符合使用者需求之電子文件。於本實施方式中，電子文件可以是，但不限於，便攜式檔案文件(PDF)、圖片檔案、文字檔案、聲音檔案、多媒體檔案，或上述各種類型之電子文件的組合。

第14圖為依照本發明一實施方式用來產生、刪除或修改一預設版面之系統的架構圖，如圖所示，當使用者欲產生、刪除或修改預設版面時，先經過網頁伺 服器1410中之認證模組1426，認證模組1426係用以接收使用者之登入資訊，以辨別使用者之個人身分。當使用者尚未註冊成為本系統之會員時，認證模組1426亦可引導使用者至適當頁面進行註冊，以成為會員。經過認證模組1426確認身分後，檔案模組1428即可接收使用者執行之新增、刪除或修改之動作。下列將分別說明使用者執行新增、刪除或修改之詳細步驟。

當使用者欲於檔案模組1428中新增電子文件時，檔案模組1428可接收並儲存使用者新增之電子文件，生成對應此電子文件之識別代碼，並產生可供資料庫伺服器1430之新增模組1434執行之新增指令。新增模組1434將於接收到新增指令後，執行檔案模組1428所產生之新增指令，以儲存電子文件及其識別代碼至資料庫1450中。系統1400還可選擇性的設置一緩存節點模組1414，待資料儲存完畢，緩存節點模組1414將基於電子文件之識別代碼以及電子文件儲存之位置而生成緩存節點，並將此緩存節點儲存於系統1400中。當與瀏覽器寬度對應之預設版面，和本系統1400用以生成版面而儲存之緩存節點相一致時，本系統1400可直接回傳該緩存節點至裝置1上，以加快效率。

至於區塊模組1429，其係可產生指令以執行下列動作：於一空白版面中建立複數個區塊以形成一預設版面，其中每一區塊分別包含一對應的電子文件，將該對應的電子文件顯示於該區塊內，以及將該預設版面儲存於該伺服器中。使用者可依據其個人需求自行操作 此區塊模組1429，以使不同區塊包含不同的電子文件，並生成符合使用者需求之預設版面。

此外，當使用者欲於檔案模組1428中刪除電子文件時，檔案模組1428可產生用於執行以下動作的指令：令資料庫伺服器1430之刪除模組1436執行刪除指令。藉由刪除模組1436執行刪除指令，將可刪除資料庫1450中將被刪除一電子文件及其識別代碼。亦可透過緩存節點模組1414刪除系統1400中有關此電子文件之緩存節點，同一時間，區塊模組1429也會刪除區塊中對應至此電子文件之連結。也就是說，當區塊模組1429執行完命令後，會使原本對應此電子文件之區塊變成一空白區塊。

當使用者欲更新系統中所儲存的電子文件時，將會啟動檔案模組1428、新增模組1432及緩存節點模組1414來執行新增電子文件之步驟，以使電子文件及其識別代碼皆儲存於系統1400及資料庫1450中，並生成對應此電子文件之緩存節點。區塊模組1429係用以接收使用者修改區塊所對應之電子文件的請求，並依據使用者之操作改變區塊對應連結之電子文件，以更新版面之配置及對應之電子文件內容。

需補充說明，於本實施例中，不論新增、刪除或修改電子文件後，系統1400將依循如前述第3圖或第7圖之方式調整新增、刪除或修改後之網頁排版以及區塊大小，以顯示於裝置1中，於本圖中不另繪示。

第15圖繪示依照本發明一實施方式用來產 生一預設版面的方法流程圖。如圖所示，當使用者欲產生預設版面時，可執行本流程圖中之步驟，認證模組1426執行步驟S1510為接收使用者登入之資訊，係用以確認使用者之身分及對應之資料。檔案模組1428執行步驟S1520為接收並儲存由使用者上傳之電子文件，以及步驟S1530為產生對應電子文件之識別代碼，其中，識別代碼(identification code,id)係用以對應並辨識電子文件，此識別代碼係由伺服器自行配置。步驟S1540為產生指令並寫入識別代碼至資料庫中，其中，指令係為資料庫伺服器可執行之指令，並由檔案模組1428自動生成，也就是說，當資料庫伺服器接收到此指令後，會執行此指令以將此電子文件及識別代碼儲存於資料庫中。步驟S1550為產生緩存節點，此緩存節點係基於電子文件之識別代碼及電子文件儲存位置，並經緩存節點模組1414運算所形成。並指向電子文件儲存之位置，以使系統可透過緩存節點找到對應之電子文件。區塊模組1429執行步驟S1560為於空白版面中建立複數個區塊以形成預設版面，於此處所指之空白版面係指不具有任何區塊之頁面，以及步驟S1570將每一區塊分別連結於至少一電子文件後，執行步驟S1580將緩存節點所對應之電子文件顯示於區塊內以及步驟S1590將預設版面儲存於伺服器中。

第16圖繪示依照本發明一實施方式之一預設版面示意圖。於此實施例中展示了一種預設版面，但本發明不限於此。於此預設版面中，每一區塊皆由系統1600產生並作為預設版面，並經由使用者調整區塊之位 置及其對應之緩存節點，以改變排版及區塊顯示之內容，並儲存為新的預設版面。使用者於調整區塊對應之緩存節點時，係可使用點選區塊更改內容或拖曳區塊之方式，且並不以此為限。於本實施例中，與區塊1602連結之緩存節點對應為網頁1660的標頭，也就是用以放置公司或網頁1660標章。此外區塊1604放置了輪播廣告，區塊1606放置了網站設置之主題文章，區塊1608、區塊1610、區塊1612、區塊1614、區塊1616、區塊1618、區塊1620以及區塊1622分別放置了音樂、精選文章、相片、影片、推薦網站、新聞快遞、版權宣告、聯絡方式等各種不同之內容。於此系統1600之設置中，設定區塊1602標頭之部分不可更改，其餘虛線標示之區塊，也就是區塊1604至區塊1622皆可依據使用者之需求即時更改內容。舉例而言，於原本網頁1660中，區塊1612預設放置了輪播廣告。根據使用者之需求，區塊1612與區塊1604之內容相互調換，使輪播廣告之位置放置於區塊1604’中。也就是說，藉由使用者以拖拉、點選等不同方式置換區塊內容，系統可置換區塊之內容並即時顯現於使用者之裝置上。本實施例預設區塊1602不可更改，用以固定擺放網頁標頭，然並不限於此，可藉由更改系統1600預設值作調整，也就是說，可依據不同系統之需求而使區塊1602開放供使用者調整，亦可使其他區塊1604至1622鎖住，不提供給使用者調整。本揭示內容旨在揭示一種在伺服器中自動改變一網頁於一顯示裝置上排列的方法及其系統，此方法與系統可使網頁在不同的裝置中自動形成適合不同裝置之顯示器大小的排版，不僅縮短網頁製作之 時間，亦減低網頁開發者撰寫網頁的負擔。

雖然上文實施方式中揭露了本發明的具體實施例，然其並非用以限定本發明，本發明所屬技術領域中具有通常知識者，在不悖離本發明之原理與精神的情形下，當可對其進行各種更動與修飾，因此本發明之保護範圍當以附隨申請專利範圍所界定者為準。

1、1a‧‧‧裝置

5‧‧‧網際網路

600‧‧‧系統

610‧‧‧網頁伺服器

612‧‧‧偵測模組

614‧‧‧緩存節點模組

616‧‧‧強波模組

618‧‧‧排版模組

620‧‧‧自動縮放模組

621‧‧‧輸出模組

622‧‧‧輪播模組

624‧‧‧影片模組

630‧‧‧資料庫伺服器

632‧‧‧比對模組

634‧‧‧新增模組

636‧‧‧刪除模組

650‧‧‧資料庫

Claims (20)

1. 一種在一伺服器中依據一顯示裝置之瀏覽器大小而自動改變一網頁於該顯示裝置上排列的方法，其中該網頁預設一基準放大寬度並具有複數個區塊且每一區塊分別預設一符合該瀏覽器的寬度，該伺服器內預設有該網頁相應於該瀏覽器之一預設版面，該方法包括：透過該伺服器偵測該顯示裝置之瀏覽器寬度，且當該瀏覽器寬度大於該網頁之該基準放大寬度時，增加該些區塊之每一區塊的像素數目，以提高其解析度；依據所偵測之該顯示裝置之瀏覽器寬度，找出在該伺服器內相應於該瀏覽器之該預設版面；依據該預設版面而於該顯示裝置之瀏覽器中重新排列該網頁之複數個區塊之每一區塊；調整該網頁之該複數個區塊之每一區塊的寬度，使符合該瀏覽器的寬度；以及將已調整完各區塊寬度之該網頁重新顯示於該顯示裝置之瀏覽器中。
2. 如請求項1所述之方法，其中該基準放大寬度為2,560像素。
3. 如請求項1所述之方法，其中該調整步驟包括：若所偵測到該裝置之瀏覽器寬度大於該預設版面之寬度，則增加該網頁中每一區塊的尺寸；或 當所偵測到該裝置之瀏覽器寬度小於該預設版面之寬度時，則縮小該網頁每一區塊的尺寸；其中，該預設版面寬度可為2,560像素、1,600像素、1,080像素、1,024像素、960像素、800像素、720像素、480像素或320像素。
4. 如請求項1所述之方法，其中當該網頁複數個區塊中之一區塊包含至少一圖片檔，且每一該圖片檔分別對應於一網址時，該方法更包括以下步驟：依據該瀏覽器寬度，調整該圖片檔之寬度；將該調整寬度後之圖片檔與該網址連結；以及回傳該連結有網址的圖片檔，並將其顯示於該區塊中。
5. 如請求項1所述之方法，其中當該網頁之複數個區塊中之一區塊包含一可由多媒體檔案播放器播放之多媒體檔案時，該方法更包括以下步驟：依據該瀏覽器寬度，調整該多媒體檔案及該多媒體檔案播放器之寬度；以及回傳該調整後之多媒體檔案及多媒體播放器，並顯示於該區塊中。
6. 如請求項1所述之方法，其中當該些區塊中之一區塊不包含對應內容時，該方法更包括以下步驟： 隱藏該不包含對應內容之區塊；以及以和該不包含對應內容之區塊相鄰的該些區塊填補該不包含對應內容之區塊。
7. 如請求項6所述之方法，其中該填補步驟包括：計算與該不包含對應內容之區塊左右相鄰之該些區塊數量；將該不包含對應內容之區塊寬度依據相鄰之該些區塊之數量等分，以取得一第一寬度；以及將每一相鄰之該些區塊寬度分別增加該第一寬度。
8. 如請求項1所述之方法，其中該預設版面係透過下列步驟產生：於一空白版面中建立該複數個區塊以形成該預設版面，其中每一區塊分別與對應至一電子文件之一緩存節點連結，並將由該緩存節點所對應之該電子文件顯示於該區塊內；以及將該預設版面儲存於該伺服器中。
9. 如請求項8所述之方法，其中該緩存節點係透過下列步驟產生：透過該伺服器接收並儲存由一使用者上傳之該電子文件；產生並儲存對應該電子文件之一識別代碼；和 藉由該識別代碼及該電子文件儲存位置產生該緩存節點。
10. 如請求項9所述之方法，其中該電子文件係為便攜式檔案文件(PDF)、圖片檔案、文字檔案、聲音檔案或多媒體檔案。
11. 一種在一伺服器中依據一顯示裝置之瀏覽器大小而自動改變一網頁於該裝置上排列的方法，其中該網頁預設一基準放大寬度並具有複數個區塊且每一區塊分別預設一符合該瀏覽器的寬度，且該伺服器內預設有該網頁相應於該瀏覽器之一預設版面，該系統包括：一偵測模組，用以偵測該裝置之瀏覽器寬度以找出在該伺服器內相應於該瀏覽器之該預設版面；一強波模組，用以當該瀏覽器寬度大於該網頁之該基準放大寬度時，增加該些區塊之每一區塊中的像素數目，以提高其解析度；一排版模組，用以依據該預設版面而重新排列該網頁複數個區塊之每一區塊；一自動縮放模組，用以調整該網頁複數個區塊之每一區塊的寬度；一輸出模組，用以將已調整完各區塊寬度之該網頁重新顯示於該裝置之該瀏覽器中；以及一資料庫，用以儲存該預設版面。
12. 如請求項11所述之系統，其中該基準放大寬度為2,560像素。
13. 如請求項11所述之系統，其中該自動縮放模組係包含可執行下列步驟之指令：當所偵測到的該瀏覽器寬度大於該預設版面之寬度時，增加該複數個區塊之每一區塊的尺寸；或當所偵測到的該瀏覽器寬度小於該預設版面之寬度時，減少該複數個區塊之每一區塊的尺寸；其中，該預設版面寬度可為2,560像素、1,600像素、1,080像素、1,024像素、960像素、800像素、720像素、480像素或320像素。
14. 如請求項11所述之系統，更包括一輪播模組，用以當該網頁複數個區塊中之一區塊包含至少一圖片檔，且每一該圖片檔分別對應於一網址時，可執行下列步驟：依據該裝置之該瀏覽器寬度，調整該圖片檔之寬度；將該調整後之圖片檔與該網址連結；以及回傳該連結有網址的圖片檔，並將其顯示於該區塊中。
15. 如請求項11所述之系統，更包括一影片模組， 用以當該網頁之複數個區塊中之一區塊包含一可由多媒體檔案播放器播放之多媒體檔案時，可執行下列步驟：依據該瀏覽器寬度，調整該多媒體檔案及該多媒體檔案播放器之寬度；以及回傳該調整後之多媒體檔案及多媒體播放器，並顯現於該區塊中。
16. 如請求項11所述之系統，其中當該些區塊中至少一區塊不包含對應內容時，該排版模組可執行下列步驟：隱藏該不包含對應內容之區塊；以及以和該不包含對應內容之區塊相鄰的該些區塊填補該不包含對應內容之區塊。
17. 如請求項16所述之系統，其中該排版模組所執行之該填補步驟更包括以下動作：計算與該不包含對應內容之區塊左右相鄰之該些區塊數量；將該不包含對應內容之區塊寬度依據相鄰之該些區塊之數量等分，以取得一第一寬度；以及將每一相鄰之該些區塊寬度分別增加該第一寬度。
18. 如請求項11所述之系統，更包括一區塊模組，用以執行下列步驟： 於一空白版面中建立該複數個區塊以形成該預設版面，其中每一區塊分別與一電子文件連結並被顯示於該區塊內；以及將該預設版面儲存於該伺服器中。
19. 如請求項17所述之系統，更包括一檔案模組，可執行以下動作以生成該緩存節點，接收並儲存由一使用者上傳之該電子文件於該資料庫中；以及產生對應該電子文件之一識別代碼，並將其儲存於該資料庫中；藉由該識別代碼及該電子文件儲存位置產生該緩存節點。
20. 如請求項18所述之系統，其中該電子文件係為便攜式檔案文件(PDF)、圖片檔案、文字檔案、聲音檔案、輪播廣告或多媒體檔案。