EasilyWebSite的開發實例

前言

仿間的架站軟體多如牛毛，玲琅滿目，不管他是以PHP或ASP或是ASPX為架構，大都是以自動產生網頁與程式碼為原則，好處是可以透過架站軟體的引導快速完成網站的建置，缺點就是很難修改與維護系統，畢竟在此架構上所產生的網頁與程式碼都很冗長，除非你非常熟習這個架構與程式碼的開發，否則幾乎只能接受自動產生的結果，勉強使用。

啟動Studio

我們省略EasilyWebSite與Expression Web的安裝與啟始設定，假設安裝完成後，在桌面上會有一個EasilyWebSite資料夾，按EasilyWebSite.sln，這樣會自動打開Expression Web的設計環境，接著就可以開始設計網頁了，如下圖所示：

註：1.網頁所需要的圖片、資料庫Table資料，是筆者事先已經準備好了。
         2. EasilyWebSite的所有元件都會連到資料庫的Table上，因此系統有內建一個後台管理，可以透過後台來管理各元件的內容資料，為了節省篇幅我們已經事先建立好這些資料。

實例開發/設計主頁

為了讓讀者能夠更容易的理解EasilyWebSite開發網頁的方法和模式，在接下來的開發過程中我們將以從左到右，從上到下的順序來說明網頁的每一個功能區塊。並且由於篇幅的限制，我們將利用模板的方式（先將網頁的佈局設定好）來新建頁面，並且在主頁面中引用了CSS的設定，如下我們使用了StyleSheet.css與Fix.css等兩個CSS。

我們將訊光主頁分成了四個功能區域來說明，因為訊光的首頁是以MasterPage的方式來設計，就是每一個網頁都會顯示固定的頁頭，如下圖的Web Head就是MasterPage的主頁頭，下面的主頁，則分為左邊的客戶專區用來Login與合作夥伴的連結，中間則是News活動訊息區，右邊則用來顯示活動照片與熱門訊息，最下方Web Footer則為公司基本資料，我們將一一說明。

l         Web Head區域

         在新建頁面的WebHead部分中貼入一個Menu2元件，用來設定右上角基本功能(如首頁，聯絡我們，設為首頁等等)，設定屬性如下：

          其中Target=_self表示開啟網頁會在自己的同一網頁上，Oriention= Horizontal表示橫向顯示Menu內容，TableName是用來設定Menu項目的資料來源，這裡的Sys_MenuTable就是專門來存放功能項目的資料    
          表，ParentRoot設定為12，因為功能表是以樹狀結構來呈現，在此代表顯示功能代號12之下的所有功能項目，功能項目的文字內容與Hyperlink內容都是設定在Sys_MenuTable中的。

          接著在Web Head的左邊貼入兩個WSFlash元件(左右各一)，用來顯示兩個Flash的檔案，設定屬性Filename為“~/Image/WS_1.swf”與“~/Image/WS_2.swf”，如下圖所示：

接著貼入Menu2_2元件，就是最重要的首頁功能選單，與上面的Menu元件設定一樣，但這裡的RarentRoot設定為20，代表代號20之下的所有功能項，功能項目的圖檔與Hyperlink內容同樣都是設定在Sys_MenuTable中。最後如下圖： 

l         Login and Link區域

首先貼入一個WSImage元件並設置圖片路徑即可，如下圖所示：

 然後在WSImage下方貼入一個用於登錄的WSLogin元件，可以讓User來進行Login，因為有些網頁可以設定需要Login才能操作，如討論區的文章發表等，最後設定TableName為SYS_Author（Login的用戶資
 料表）即可，如下圖所示：

在Login元件的下方在貼入另一個WSImage元件，ImageUrl對應的圖片設定為title_partner.jpg。接著設計合作夥伴的連結，我們必須先貼入一個WSDataSource元件，設置TableName為SYS_Links，代表資料來源是根據SYS_Links的內容，DataType設定為A，代表要過濾資料只顯示DataType為A的資料，因為SYS_Links可能存著各種連結，這只顯示DataType=A的連結，連結的圖檔與HyperLink都是設定在SYS_Links資料中。如下所示：

在WSDataSource下面貼入一個WSLink元件，設置資料源為WSDataSource1，HorizontalQty設定為1（表示每行顯示一個內容），如下圖所示：

以上這樣Login and Link區域就設計好了。

l         News區域

接下來我們來做News區域的內容，首先在區域的最上方貼入一個WSFlash作為廣告的Flash，檔案設定為468-60.swf。在flash下方放“活動看板”圖片，之後我們貼入一個WSDataSource元件，設定TableNme為SYS_News (代表要取SYS_News資料表為內容)，DataType設定為A (代表只取DataType為’A’的內容)。然後貼入一個WSNews元件，設定資料源為WSDataSource2與 ”最新”的圖片路徑，如下：

在WSNews元件下方貼入WSGridView元件(專門用來顯示資料的共用Grid元件)用於顯示NEWS的資料，先設定LinkObjectType為WSNews，然後選擇這個Grid的對應元件為WSNew1，最後選擇DataSourceID為WSDataSource2，這樣WSGridView會自動顯示NEWS的欄位，如下：

下面我們來做一個記錄網頁瀏覽次數的功能，在News區域的右邊貼入一個WSCounter元件，設定屬性TableName為SYS_Counter (會記錄到該資料表中) ，IDField為ID欄位，，IDValue為1，代表會紀錄到ID=1的這筆資料（用於區分不同網頁的Counter），CounterField為網頁瀏覽次數的欄位，AutoIncrease=True表示會自動增值。如下：

       接下來News區域的右下方還有一個WSLiveImage（動態圖片，用來顯示多張的活動照片）和一個WSNews（熱門訊息）的應用，WSLiveImage可以設定到一個WSDataSource3，圖檔都設定到Sys_LiveImage
        資料表中，設定IntervalTime為3代表3秒更換一張圖， IntervalStyle為Style3代表其變換的效果(共有12種變換效果)。

另外熱門訊息的設定與前面的WSNews設定也是一樣的方式，同樣貼入WSDataSource4，TableName也是設定為Sys_News(與News共用)，但是DataType則設定為’N’與News來做區別，接著貼入WSNews與WSGridView，設定方式語WSNews一樣。如下圖所示：

到這裏News區域部分就設定好了，設計畫面如下圖所示： 

l         Web Footer區域

這部分都是固定的HTML內容，比照傳統方式來設計即可。

實例開發/設計下載區

接著我們嘗試來設計一個內頁，就以下載專區來作為代表，首先，先讓大家瞭解一下這個內頁的佈局，如下圖所示：

 上面的Web Head與Web Footer部分因為我們使用了MasterPage的關係，所以會與主頁的內容完全一樣，因此，我們直接新增一個MasterPage的內頁來處理如下圖所示：

 為了配合主頁風格，因此我們依主頁的比例將Content(內頁)的區域內用Table分成左右兩個部分，並在左部分的<TD>中設置背景圖片為Image/left_bg.jpg。

 
l         Link區域

  為了不讓此區域空曠，我們可以利用WSLink來達到廣告的效果，在左邊的<TD>中貼入一個WSDataSource元件，設置TableName為SYS Links(還是共用這個Table資料)，DataType則設定為C，然後在貼入一個
      WSLink元件，設置DataSourceID為WSDataSource1，HorizontalOty為1，這樣Link區域的左邊部份就製作好了，設計畫面如下圖：

 l         Download區域

在右邊的<TD>中貼入一個WSDataSource元件，TableName為SYS_DownLoad，如下圖所示：

然後貼入一個WSDownLiad元件，設置相關屬性，如下圖所示：(isNewImageFile代表”最新”的圖檔。

接下來我們貼入一個WSGridView元件，用來顯示下載資料的相關資訊，設定LinkObjectType為設為WSDownLoad類型，然後再將LinkObject設為WSDownLoad1，最後設定DataSourceID為WSDataSource2，此時會將Sys_DownLoad的欄位顯示出來，如下：

透過以上的設計，下載區的功能基本做好了。

下面我們來將下載區的資料進行分類，可以用很多方式分類，如使用TreeView多層分類，因為這裡較為簡單，我們使用橫向Menu的形式來分類。貼入WSMenu2元件，TableName同樣設定為SYS_MenuTable，但ParentRoot設定為30，代表30之下的所有功能項，這樣我們可以利用SYS_MenuTable來設定要劃分的類別，如下圖所示：

註：DisplayStyle為Text表示以文字形式顯示Menu內容，也可以用Image圖檔方式。 

再來要設定WSDataSource2的ParametersField為DataType欄位，代表該DataSource資料來源會根據網頁傳入的Parameters來控制DataType的過濾條件，如網頁傳入了DataType=8，代表WSDataSource只會取得DataType=8的內容。如下圖所示：

        當然，還需要配合Sys_MenuTable資料表的設定，我們在URL欄位中，加入了DataType的設定，如下：（此操作可以透過後台維護功能來設定之）。

         完成上述設置後，在這個下載網頁上按下Menu時，就會根據動態參數DataType去篩選相對資料並顯示在WSGridView上，以達到分類的效果。

 

結語

EasilyWebSite工具的推出，就是希望能將網頁的設計效率更上層樓，也讓開發者更加省時省力，讓開發者可以在不寫任何程式的情況下，來面臨各式的網頁變化，雖然EasilyWebSite目前只有20多個元件，但是，隨著網站需求與元件化的觀念的擴充，當達要50~60個元件規模時，相信多數的網站需求都是可以直接滿足，到時網站的設計就會變得更加快速，功能也越來越完善，從而給設計者帶來更多的便利和福音。（完）