網站設計的新利器 / EasilyWebSite網站包

前言

EasilyWebSite網站包，EasilyWebSite網站包，是基於微軟.net框架上的網站系統，可藉由全元件化的方式來面對各式的網站需求，達到不必經過程式開發，即可快速建置公司的各種網站功能，如最新消息、跑馬燈公告、產品相簿、公司簡介、產品介紹、討論區、會員機制、動態選單等企業網站最常使用的功能。

EasilyWebSite產品的定位，是希望能減少程式開發人員(或極少的程式開發)的工作負擔，讓不具備程式開發能力的美編設計人員，直接以設定屬性方式來完成網站建置，不必過度依靠資料庫或技術開發人員來完成，即可以建置出各種具備結合資料庫功能的動態網站，節省時間與成本。而系統也具備各種網站內容後台管理功能，維護人員可以輕鬆透過內建的後台，新增修改網站內容、維護網站會員帳號、管理討論區文章、上傳檔案至網站檔案庫、選單階層管理。

架構

仿間多數的網站建置工具軟體，都是程式產生方式來達到類似的功能，但EasilyWebSite是以元件化為主的方式(填屬性來取代程式設計)，架構如下圖：

架構上，EasilyWebSite共有以下四類的元件：

1. DataSource：EasilyWebSite大都是動態元件，內容資料都來自後端的資料庫系統，如圖，透過共用的WSDataSource元件去存取後端資料庫資料，對資料庫進行查詢、新增、修改、刪除等動作。

2. WebSite Components：則是用來抽象網站的元件，將各種常用的網站功能抽象成一個一個元件(如最新消息、討論區、走馬燈、相片簿等等)，因為不同的網站功能有不同的屬性。

3. UI Component：用來呈現網頁內容(產生HTML)或讓User可以輸入的元件，這些元件負責與User互動。

4. CSS Define：專門配合美工設計的CSS樣式表定義，可以定義UI元件的展現與格式變化。

從以上得知，設計網頁功能時，貼入WebSite Component來定義屬性，透過DataSource元件取得內容資料，再透過UI Component來呈現網頁的格式與內容，來達到網頁的功能。

特色說明

以下是EasilyWebSite的特色說明，請參考：

1.整合資料庫來呈現內容，使網站更容易維護：
有別於純html的靜態網頁純人工、耗時的維護與製作方式，透過資料庫可以快速的產生出大量的動態網頁內容，而透過網站管理後台維護網站內容，也比直接修改html來的方便簡單，並可減少人為錯誤的機率。

2. 全元件開發方式，可完全不必程式設計：
使用全元件的開發方式，只要依照頁面功能，放入適當的元件，並設定其屬性，即可完成各種網站功能。而呈現版面的元件，也可以自行設計樣板，讓畫面的呈現更靈活多樣。

3. 提供多種常用的網站元件，可逐漸更新與擴充：
提供各種網站常用的元件，如跑馬燈、最新消息、相片簿、網站內容頁、檔案下載外，也可以自行設計網站元件，或是配合CSS的定義，可以統一元件的樣式表。

4.可配合自定的資料庫定義，配合元件呈現內容：
EasilyWebSite初始化時，會幫系統建立存放資料的資料表，但是如果原本網站已經有現有資料，也可以在元件中指定，要使用哪一個資料表的資料，並設定好標題、內容等欄位對應。

5. 提供多層組織門架構，可分層管理不同的內容：
網站內容與選單項目，皆可設定所屬組織部門，前台網頁呈現時可以依照不同組織部門，顯示該單位所屬頁面內容。開放所有原始程式，可以自行繼承或修改元件：
所有元件與網站後台管理程式，都提供原始程式檔，開發人員可以自行修改後台管理程式，讓後台管理具備更多更完善的管理功能。或是修改、繼承元件，擴充元件的屬性、方法，以滿足更多樣化的需求。

6. 可配合EEP2008平台或AD進行帳號整合：
網站使用者會員資料來源，可以是現有或是新增的使用者資料表資料，也可以使用EEP .Net的User 資料表，或是與AD驗證功能整合，直接透過AD方式登入系統 。

元件說明

以下，我們簡單說明一下EasilyWebSite已經有的元件，如下說明：

1. WSMenu1：此元件主要功能是顯示功能表目錄，即實現導航功能表的功能(類似PopupMenu)，以javascript方式，滑過主選單時，即時展開所屬子選單項目，可以水平或是垂直方式呈現版面。

2. WSMenu2：此元件主要功能是以圖片(或文字)的形式顯示單層的功能項，即基於圖片樣式的導航功能表，可以水平或是垂直方式呈現版面。

3. WSLogin：用來自動產生Login用的HTML格式，直接連結資料庫，根據資料庫中的Author或Users資料表來決定用戶是否有許可權登錄。可透過後台SetAuthor後台網頁來管理用戶。

4. WSImage：圖檔顯示元件，可依照單元、類別、公司別的不同，動態切換不同圖片檔名。

5. WSFlash：專門用來顯示Flash的元件，與WSImage相似。

6. WSItem：用來顯示有規則的逐一項目的元件，配合WSDataList來呈現項目的格式，如服務項目特色，服務據點，產品規格等等，都可以透過這個元件來呈現。

7. WSItemLink：與WSItem類似，差別的是WSItemLink有自己的Grid格式，沒有配合WSDataList或WSGridView，最重要的是他可以連結到別的網頁或內容。在應用上，類似熱門話題、最新話題、最新消息等等都可以配合呈現。

8. WSLiveImage：與WSImage類似，差別的是LiveImage可以顯示多個圖檔，透過特效設定，可以控制圖檔變換的效果。這些圖檔資料也都是來自WSDataSource來控制。

9. WSScrollBar：主要功能就是用來呈現“走馬燈”的效果，透過WSDataSource取得資料庫的內容，以滾動資訊的方式呈現。

10.  WSLinks：主要功能是為了製作關聯網站的連結列表，透過WSDataSource取得連結的圖形與簡單文字，顯示在網頁上，讓User可以連結到其他網站或網頁，例如相關網站連結、分公司或策略夥伴連結、好站連結等等。

11.  WSNews：主要功能是為了用來製作新聞消息的列表，需配合WSDataSource取得資料，並配合WSGridView呈現Grid內容，例如最新消息，重大新聞，最近活動等等。

12.  WSDownLoad：主要功能是為了用來製作檔案下載的列表，需配合WSDataSource取得資料，並配合WSGridView呈現下載格式。

13.  WSProduct ：是用來顯示產品目錄(或服務項目、門市也可)，配合WSDataSource取得資料，並配合WSDataList來呈現圖文並茂的產品說明等等。

14.  WSDocList：用來顯示文章方式的內容列表，配合WSDataSource取得文章資料，並配合WSGridView來呈現列表。一般文章必須連結另一個文章內容網頁，必須由WSDocContent來配合呈現，文章內容都是直接存在資料表中，而不是一頁一頁的網頁。

15.  WSDocContent：配合上一個網頁的WSDocList，專門用來顯示文章的內容，文章內容都是存在資料表中，以HTML格式存放。

16.  WSPhoto：此元件主要功能是用來顯示圖片所使用，配合WSDataSource取得圖片資料，並配合WSDataList來呈現列表，例如活動剪影，相片簿等等就可以用此元件。

17.  WSDiscuss：專門用於討論區內容呈現的顯示元件，討論區一般有兩個頁面，一個是討論主題的頁面，另一個為單一主題的明細頁面；都是必須透過WSDataSource取得資料，討論主題列表則配合WSGridview來列表顯示， 討論明細則是透過WSDataList來顯示討論內容，討論主題發表則透過WSFormView來輸入。

18.  WSSiteMapPath：用來顯示網站地圖導覽條所使用，讓頁面知道上下關係，方便使用者操作，此可以透過後台自動產生各網頁的導覽地址。

19.  WSDataSource：此元件主要功能是為了連接後端資料庫的某一資料表，透過WSDataSource能與Web上的各元件互動呈現資料。

20.  WSQuery：專門用來查詢WSDataSource資料，須配合WSFormView來設定查格式，以選擇欄位來查詢。如新聞搜尋、討論區主題內容搜尋等功能，都可以透過此元件完成。

21.  WSTreeView：主要功能是用來製作樹狀結構的目錄，如單位部門列表、檔案庫列表、或是用於產品的分類、門市的分類、主題的分類等等。資料也是來自後端資料庫，透過後台維護。

22.  WSGridView：主要是用來列表顯示資料，可以分頁顯示，可以配合其他如WSNews、WSDownLoad、WSDocList、WSDiscuss等元件來顯示資料。

23.  WSDataList：主要是用來以陣列區塊的方式顯示資料，不同於GridView是以一列一列的方式，可以配合WSProduct、WSDiscuss、WSPhoto等元件以呈現資料。如產品型錄、相片簿等一頁顯示多筆資料的版型，都可以透過此元件完成。

24.  WSFormView：用來有資料輸入的地方所使用，如討論區的主題新增，或是WSQuery條件輸入等等。

後台管理功能

在EasilyWebSite中，有提供一個內建功能，如果你使用了EasilyWebSite的內建資料表(都是 SYS_* 開頭的系統表)，則都可以使用這個內建的後台管理來進行維護，當然，如果你自己設計網頁去管理這些對應的資料表，同樣可以達到管理網站的目的，限於篇幅，我們簡單說明五個項目，應該所有用到資料表都可以透過後台來維護，如下：

1. SetAuthor：可進行使用者帳號、密碼、等級、群組管理等功能。

2. SetDiscuss：網站文章內容管理，新增或刪除或更改文章標題、內容、作者、是否最新與類別等欄位，如果文章沒有內容，也可以設定直接連結至指定網址。

3. SetDownload： 網站檔案下載管理，可新增/刪除/修改/上傳檔案、設定主題、說明文字、檔案類別等管理功能。

4. SetMenuTable： 網站選單管理，可設定選單標題、圖檔、連結、排序順序、類別等欄位內容，選單可無限增加層級。

5. SetNews：網站最新消息管理，可設定主題、內容、網址連結、類別等欄位內容。如『網站公告』、『活動訊息』、『最新消息』等單元，都可以在此維護。

結語

EasilyWebSite是一種網站快速開發的新嘗試，希望透過這種建置方式，能夠讓網站建置不具有過多的技術色彩，最難最要花時間可能是視覺設計與美工的工作，而且可以快速透過資料庫來維護網站，當然，以目前20幾個元件似乎還不是很夠用，但是，如果這樣的發展架構可行的話，開發元件的難度與成本並不會太高，期待能有同業或其他先進以實際的案例來進行相互的合作，增加EasilyWebStie的可用性與經驗積累，這樣就能造福更多有網站需求的客戶與業者。(完)