一個入門者學習用的小小小小網站範例（6）- 主版頁面設計

2011-12-15

2966
0
2011-12-21

此系列文章的網站範例透過主版頁面提供整體網站所需的共用功能與外觀。

預告｜楔子｜１｜２｜３｜４｜５｜６｜７｜８｜９

此系列文章的網站範例透過主版頁面提供整體網站所需的共用功能與外觀，因此新增了名稱為「MasterPage.master」的檔案，來看看它的設計介面，列舉如下：

這個畫面以div 切割成為三個部份，最上方的「頁首」，「中間區域」以及最下方的「頁尾」，其中的「頁尾」只是單純的顯示一個包含公司資訊的圖片檔案，除此之外，底下來看看其它兩個區域。

首頁

這個部份包含三個超連結，由HyperLink 控制項提供所需的超連結功能。右方則是一個搜尋功能，它是一個文字方塊與按鈕，底下是按鈕的Click 事件處理程序


		
Protected Sub SearchButton_Click(…) Handles SearchButton.Click	
    Dim bookid As String = ConditionTextBox.Text 
    Response.Redirect("~/BookSearch.aspx?bookid=" + bookid) 
End Sub

其中首先取得使用者於文字方塊 ConditionTextBox 所輸入的搜尋關鍵字，並且合併一個名稱為bookid 的URL 參數值，轉向至「BookSearch.aspx」網頁。另外，在這個搜尋功能的下方，是一個 Menu 控制項EditMenu，此控制項提供所需的功能網頁連結項目，請讀者自行開啟檢視即可，不過，這個控制項必須根據使用者的身份動態切換其顯示模式，當使用者未完成驗證程序時，它的 Visible 屬性被設為 False。

驗證與登入功能

主版頁面的左方，是使用者的驗證登入功能，其中配置了一個登入控制項，提供登入功能，這個控制項的上方是一個 LoginName 控制項與 LoginStatus 控制項，這兩個控制項配置於一個名稱為 UserPanel 的Panel 控制項，在使用者未完成登入驗證程序之前， Panel 的 Visible 屬性被設為False 隱藏起來。

書籍導覽功能

這個功能是由一個Menu 控制項所實作，它很單純的只是提供三種功能項目，每一個項目均包含不同的網頁連結，這些網頁以特定的模式檢視書籍資料表Books 的資料內容。

最新消息

這個區域提供最新的5 則新聞，由SqlDataSource 控制項提供所需的資料來源設定，要達到這個需求，我們必須撰寫必要的SQL 陳述式，因此於其中SqlDataSource 控制項的「設定SQL 陳述式」功能畫面中，點選第一個「指定自訂SQL 陳述式…」選項，然後，按一下「下一步」按鈕，於「定義自訂陳述式…」的設定畫面中，輸入如下的SQL 字串，它會從資料表NewsAtricle 中，取得最新發表的5 則新聞資料。

完成這一部份的設定之後，接下來另外配置一個BulletedList 控制項，並且將其資料來源設定為上述的SqlDataSource 控制項即可。這個主版頁面的登入功能區域以及編輯功能選單，必須根據使用者的身份，動態進行顯示狀態的切換，因此在網頁的載入程序中，輸入以下的程式碼來達到相關的效果：


	
Protected Sub Page_Load(…) Handles Me.Load

   If Not Page.User.Identity.IsAuthenticated = True Then
       EditMenu.Visible = False
       UserPanel.Visible = False   
   Else
       EditMenu.Visible = True
       UserPanel.Visible = True
       LoginPanel.Visible = False
   End If
End Sub

完成主版頁面的設計討論之後，下一篇從首頁Default.aspx 這個檔案開始，逐一針對套用此主版頁面的各種網頁檔案進行說明。

預告｜楔子｜１｜２｜３｜４｜５｜６｜７｜８｜９

回首頁