專刊內文

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

瀏覽次數 : 5477



 

EasilyWebSite的開發實例

訊光科技/ 劉野


前言

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

EasilyWebSite是訊光在Visual Studio(或是輕量級的Expression Web)上所開發的一套架站元件,全部以元件的方式來建構網站的功能,並將內容全部規劃在後端的資料表上,讓系統維護可以直接透過資料表來直接維護,不但可以快速建置網站,而且可以讓不熟習程式開發的人來使用,因為過程中,可以不必寫程式就可以建置網站與內容,更重要的是,他可以很容易維護,無論是針對網站的功能還是內容,都可以讓你對於網站系統的維護更加省時省事。在接下來的內容中我們將以我們公司實際的網站主頁和下載專區這兩個網頁為例,具體說明EasilyWebSite的使用方法,好讓大家了解簡單的開發步驟。


啟動Studio

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



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


實例開發/設計主頁

為了讓讀者能夠更容易的理解EasilyWebSite開發網頁的方法和模式,在接下來的開發過程中我們將以從左到右,從上到下的順序來說明網頁的每一個功能區塊。並且由於篇幅的限制,我們將利用模板的方式(先將網頁的佈局設定好)來新建頁面,並且在主頁面中引用了CSS的設定,如下我們使用了StyleSheet.cssFix.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才能操作,如討論區的文章發表等,最後設定TableNameSYS_AuthorLogin的用戶資
 料表)即可,如下圖所示:

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

 

在WSDataSource下面貼入一個WSLink元件,設置資料源為WSDataSource1HorizontalQty設定為1(表示每行顯示一個內容),如下圖所示:

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

l         News區域

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

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

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

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

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

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

l         Web Footer區域

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

到此為止,首頁就真的完成喔,如果扣除美工設計與調整,這樣的首頁真的只需要幾分鐘的時間即可完成。設計成果請參考: www.infolight.com.tw

     

實例開發/設計下載區

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

 上面的Web HeadWeb 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元件,TableNameSYS_DownLoad,如下圖所示:

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

 

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

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

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

DisplayStyleText表示以文字形式顯示Menu內容,也可以用Image圖檔方式。 

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

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

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

 

結語

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