第四章 Doking's BLOG首頁的實作
現在，萬事俱備，應該著手Doking's BLOG的頁面設計和資料庫前台的實作。
這裡，不是要談網頁藝術創造的知識，而是講解在Dreamweaver MX2004中建立網站內頁的思路和方法。
4.1.1 網站設計想法
每個網頁開始前，一般要在Firworks或在Photoshop等圖像設計軟體中設計好基本頁面設計，圖4-1-1就是Photoshop設計的基本頁面設計圖。
圖4-1-1 Doking's BLOG基本頁設計圖
在圖4-1-1中序號①畫上紅色方圈部分的是網頁的左邊欄目，目前是空白的，它的欄位在以後章節中會一一加上上去的，序號②畫上紅色方圈部分的是網站的導航條，它是由第三章建立的dkblog.mdb資料庫中的LM表動態產生的。基本想法已清楚後，開始構建立網站的模板。
4.1.2 建構網站模板
設計想法：建立網站模板，統一網站網頁設計。網站的欄位選單內容由於資料表動態LM生成，也方便網站欄位選單內容的修改。
（1）開啟【檔案】→【新建】，開啟【新文件】的對話框，選擇「類別：」為「範本頁”，選擇「範本頁：」為「ASP.NET VB 範本」,結果如圖4-1-2所示。
圖4-1-2 新建模板對話框
（2）點選“建立”按鈕，插入圖層，在其屬性視窗中，把ID設為“main”，把“左（L）”和“上（T ）」設為0px，把「寬（W）」設為100%，把對齊方式設為置中。這樣是為了把網頁置中。
（3）插入一個表格，把ID設為“bodyT”，設寬為780像素（這個是根據你的基本頁面設計圖的寬度而設計的），單位格的邊距和間距設定為0，邊框粗細設為0。
（4）把「bodyT」表格第二行的垂直對齊方式設為頂端，再拆分為2列，第1列的寬度設為220px，第1列的寬度設為560px（分配列的寬度也是根據你的基本頁面設計圖而分配的），把第1列的背景顏色設為RGB（236,236,236）。
（5）給「bodyT」表格的第一、三行分別插入對應的背景圖，把第一行的垂直對齊方式設為底部，水平對齊方式設為右邊。
（6）還可依需求設計好標題、字體大小，連接字體的顏色或或配色等。
（7）建立網站的導航條。
①啟動Access2003，開啟dkblog.mdb資料庫，在LM表的LM欄位中依序輸入平面設計、3D設計、網頁設計、網路程式設計等4個記錄，如圖4-1-3 所示。
圖4-1-3 LM表資料輸入
②返回Dreamweaver，切換到【伺服器行為】面板，點選“+”按鈕，在下拉式選單中選擇“資料集”，如圖4-1-4所示。
圖4-1-4 新增資料集
③在彈出【資料集】對話框中，輸入資料集名稱為“menuda”，在連接下拉選單中選擇“dkconn”，在表格的下拉選單中選擇LM表，選擇列為“全部”選項，在排序下拉選單中選擇欄位“LMID”，設定為升序，結果如圖4-1-5所示：
圖4-1-5 資料集對話框
④點選「測試」按鈕，出現如圖4-1-6所示的對話框，說明資料集建立成功，點選「確定」按鈕完成。
圖4-1-6 資料集測試對話框
⑤切換到【綁定】選項卡，展開資料集(menuda)的字段，如圖4-1-7所示：
圖4-1-7 綁定選項卡
⑥拖拉LM欄位至表格bodyT的第一行，如圖4-1-8所示：
圖4-1-8拖曳LM欄位
⑦放開滑鼠，這時第一行會增加一段陰影的字元：{menuda.LM}，在其前面輸入“主頁| ”，其後輸入符號“ | 聯絡我們”，結果如圖4-1-9所示：
圖4-1-9 綁定資料到bodyT表中
⑧選擇帶陰影字元{menuda.LM}和後面的字元“ | ”，選擇【插入】選單→【應用程式物件】→【重複區域】，在彈出【重複區域】的對話框中選擇資料集為“menuda”，把顯示記錄選為“所有記錄”，如圖4-1-10所示，按一下“確定”按鈕完成網站導航選單。
圖4-1-10 重複區域對話方塊
（7）把滑鼠移到表格bodyT第二行第二列，選擇【插入】選單→【範本物件】→【可編輯區域】，在【新建可編輯區域】對話方塊中，輸入名稱為“mainbody”，按下“確定”鍵，如圖4-1-11所示：
圖4-1-11 新建可編輯區域
這樣就完成網站模板的初期工作，保存模板為bkblog.dwt.aspx。
4.1.3 首頁的頁面設計
設計想法：完成網站的範本建置工作後，得以它來建立網站和更新網站。
（1）新建“ASP.NET VB” 動態頁，開啟【修改】選單→【範本】→【應用程式範本到頁】，在彈出的【選擇範本】對話方塊中，選擇範本“dkblog”，點選“選擇”按鈕，如圖4-1-12所示：
圖4-1-12 選擇模板
（2）把滑鼠移到“mainbody”可編輯區域中，插入表格，設其ID為“ztre”，其實它設計成如圖4-1-13所示，這是每一個學習筆記將要顯示的內容。
圖4-1-13 每一個學習筆記將要顯示的內容
這一節講解的插入資料集可沒有上一節講解的那麼簡單。首先看看圖4-1-13，每個學習筆記將要顯示主題、發表時間、筆記分類（即所屬分欄）、作者（姓名）、回應（個數），再來看看ZT表其設計圖（ 3.2節的圖3-2-2），只有LMID（分類欄目的ID），沒有欄位名，這個要連接LM表才能取得；只有YHID（發表者的ID），沒有作者的姓名，這個要連接YH表才能取得；其它都可以從ZT表中獲得資料。 「好複雜啊！」其實不用擔心，在Access中就可以解決一切困難。
4.2.1 建立資料表連接查詢
（1）啟動Access2003，選擇【查詢】→雙擊【在設計檢視中建立查詢】，在彈出的【顯示表】窗口，如圖4-2-1所示：
圖4-2-1 新增查詢連接表
（2）依序分別加入LM表、ZT表、YH表， 結果如圖4-2-2所示：
圖4-2-2 資料表連接視圖
（3）把查詢欄位設計為，如圖4-2-3所示：
圖4-2-3 查詢欄位設計圖
（4）儲存此查詢為ZTRE，完成在Access資料表連接查詢。
4.2.2 插入資料集
（1）返回Dreamweaver，切換到【伺服器行為】面板，點選「+」按鈕，新增資料集Ztre，選擇表格為剛才在Access中新建的查詢ZTRE，其它的相關設置，如圖4-2-4所示：
圖4-2-4 Ztre資料集的設定
（2）切換到【綁定】選項卡，展開資料集（Ztre），拖曳欄位ZTNAME替換表格ztre中的“學習筆記主題”，拖曳欄位ZTTIME替換“發表時間”，拖拉字段LM替換“分類”，拖拉字段ZYTEXT到表格ztre的第二行空白處，其他設計如圖4-2-5所示：
圖4-2-5 綁定資料到ztre表中
（3）切換到【伺服器行為】面板，可以看已增添了許多動態文本，雙擊動態文本（Ztre.ZYTEXT），選格式為「編碼—HTML編碼格式”，如圖4-2-6所示：
圖4-2-6 設動態文字格式
（4）選擇表格ztre的第一、二、三行，並把它們定義的重複區域，其設定如圖4-2-7所示。
圖4-2-7 定義重複區域
這樣就完成了主頁插入資料集和資料綁定工作。
（1）選擇“首頁”，在【伺服器行為】面板，點選“+”按鈕，選擇【資料集分頁】→【移至第一頁】，如圖4-3-1所示：
圖4-3-1 資料集分頁選單
（2）在彈出的對話方塊中，選擇資料集為Ztre，按下「確定」鍵，如圖4-3-2所示：
圖4-3-2 移至第一頁對話框
（3）選定“前一頁”，定義為資料集分頁的“移至前一頁”；選取“後一頁”，定義為資料集分頁的“移至下一頁”；選定“最後”，定義為資料集分頁的“移至最後一頁”。
（4）把「頁碼」改為「目前頁碼：」在【伺服器行為】面板，點選「+」按鈕，選擇【顯示記錄記數】→【顯示目前頁號】。
（5）儲存了index.aspx，這樣就完成了首頁的設計工作，在Access中給對應ZT表、YH表隨便輸入幾個記錄，進行IE瀏覽器中瀏覽（下面的章節中如無特別說明，筆記全屬於「網頁程式設計」欄位），大概如圖4-3-3所示：
圖4-3-3 首頁瀏覽圖