專刊內文

當前位置:首頁>專刊分享>內文

瀏覽次數 : 9629



 

網站設計的新利器 / 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的可用性與經驗積累,這樣就能造福更多有網站需求的客戶與業者。(完)