Visual Basic .Net (VB.Net) 程式語言案例學習 (02. 可換殼的動態文宣之宣傳網站)

Visual Basic .Net (VB.Net) 程式語言案例學習 (02. 換殼動態之宣傳網站)¶

2.1 問題¶

這是一家某某補習班，想將紙本的文字宣傳單轉為網頁，每一張宣傳單就是一張網頁，不同性質的班別，就要作一張符合該班特色的網站，總共有五個班別，要提供一個公佈欄。補習班提出要有最新消息、五個班別網站、表格下載、地理位置、上課方式，共計九頁。

2.2 需求¶

依照上述的問題，開始羅列系統的目的。

表格 2‑1 「可換殼的動態文宣之宣傳網站」 系統目的分析表

版本：1.0	要做什麼	不要做什麼（不要做不代表不會做）
能做什麼	（第一格：必要項目）	（第二格：次要項目）
	五個班別透過換殼及置換文宣的方式來達成。	一個線上動態編輯的公佈欄。有翻頁的功能。
		要有權限的人才能更動公佈欄資料。
		一個公佈項目連結多個上傳的檔案。
		每一個班都作一張網頁，及作一個主題圖案。
		要設定帳號及密碼，讓多個管理員有各自的帳號及密碼。
不能做什麼（不能做代表不需要做）	（第三格：不必要項目）	（第四格：不需要項目）
	為公佈欄管理介面獨立出來做到不同的網頁。	公佈欄的功能做到像論壇中那樣的多元化。
	五個班別透過換殼及置換文宣，但再加上介面能夠管理殼及置換文宣。	每個班都有各自的網站框架，各自的主題內容。
	有權限的人可更動公佈欄，啟動登入的畫面必須隱藏，一般使用者無法看到。	帳號密碼都必須要有各自權限，帳號密碼要加密。要有特殊按鈕才能出現登入畫面。

實際上由以上的分析，可以得知網站功能的雛型已經出來了。很多的想法會看似都很合理，卻顯得加油添醋。基本的網站只需要做到第一格要做及能做的部份就完成了。其他次之的考量在第二及第三格中會顯現出來，超出基本需求的考量會在第四格中出現。因此討論時很清楚的知道系統的目的，其實並沒有那麼的大。討論的雙方，也可以藉由此表，溝通更加清晰。

第一格所討論的是系統基本的雛形，具備這幾項就大致達成基本需求。第二格討論有能力範圍的項目，但不要做會比較好的內容。第三格列出不能加入的項目，若要做對基本需求無太大助益。第四格列出是超出系統需求的內容，幾乎與基本需求相差甚遠的項目，幾乎是要重新設計的需求敘述。

因此清楚了解到客戶需要的是什麼，在第一格中客戶即可了解到他們會得到什麼樣的網站功能。而第二及第三格是給設計者保留彈性設計的項目，也許以後會趨向某一方面地需求。第四格可以說是要重新檢視問題，因為功能可能是把問題擴充的很多，才會羅列出的項目。

接著系統目標分析表如下：

表格 2‑2 「可換殼的動態文宣之宣傳網站」系統目標分析表

版本：	重要	不重要
優先	（重）	（急）
	五個班別透過換殼及置換文宣的方式來達成。	無。
不急迫	（輕）	（緩）
	無。	無。

由此可看出最優先也是最重的的部份就是網站的核心，能夠換殼的部分最為重要，這能夠取代很多張網頁的基本架構是最重要的。因此可以依照重、急、輕、緩的順序來完成。

最後規格表也可以產生出來了。

表格 2‑3 「可換殼的動態文宣之宣傳網站」系統規格表

規格項目	規格內容	備註
五個班別的網頁	每個班別都具有各自的頁面。	…
最新消息	顯示具有公佈欄的頁面。	…
表格下載	將報名表、申請表、等表格提供連結下載。	檔案由補習班提供。
地理位置	顯示出地圖，列出聯絡方式及地址。	…
上課方式	列出上課的時段及週數。	…

如此一來便清清楚楚，只要照表操課即可。在核對功能時，就不會憑感覺來對功能。一個項目的一一核對就可以知道有沒有達成目標，也可量化達成率。此表可供客戶參考也可供設計者參考。

2.3 特色¶

運用ASP.NET製作兩張網頁，產生出十幾頁網頁的效果（可由使用者不斷的擴充），有最新消息文宣公佈欄。

檔案數目少，但卻內容豐富；公佈消息多，但管理很簡單。

2.4 使用工具¶

語言	軟體
ASP.NET、Visual Basic .NET	MS Visual Studio .NET、MS Access、MS FrontPage、Adobe PhotoShop CS、Adobe ImageReady CS

2.5 系統架構¶

首先架構出可以置換殼的網頁框架，至少要有兩個網頁框架，第一個網頁框架是動態首頁，用來安排最新消息、表格下載、地理位置、上課方式的網頁。第二個網頁是五個班別的動態網頁。在這裡的框架並非是Html中的Frame，而是繪圖軟體產生切割圖塊的網頁，要事先繪製好整張的網頁圖案，然後透過切割圖塊的程式，Adobe ImageReady CS、Ulead PhotoImpact都具有這樣的功能，可產生許多套圖，將這些套圖像是給框架穿衣服一樣置換，就可達到「換殼」的目的了。

2.6 程式實作¶

2.6.1 首頁設計¶

Step 1：如圖2-1所示。先使用Adobe Photoshop CS編製圖案。這張圖也就是您的首頁畫面。

圖 2‑1

Step 2：如圖2-2、2-3所示。先準備好首頁的圖案，將圖案依照規劃分割區塊。至少製作六張圖，五張班別主題圖，一張首頁圖。額外加作地圖一張。有六張要切成圖塊，切好後存檔，分別存成圖形檔及網頁框架檔。我們使用切片工具，將圖檔切為六塊。

圖 2‑2

圖 2‑3

Step 3：如圖2-4所示。分割好六塊區塊之後，點選檔案、儲存為網頁用，之後會切換到ImageReady，此時點選儲存，指定目錄將檔案存起來。

圖 2‑4

Step 4：如圖2-5所示。儲存檔名為Mainpage.html，儲存完畢之後，就會出現你所切割開來的影像檔，放置在images的目錄中，而原始儲存路徑中會有一個網頁檔，這個網頁檔就是連結這六張影像檔案的網頁。所有的表格製作以及超連結，都已經幫你自動產生了，所以在這個部分都無須撰寫任何程式碼，就有漂亮且正確的網頁了。

圖 2‑5

Step 5：如圖2-6所示。請記得儲存檔案的時候，檔案類型要選擇為.html。如此一來才方便我們接下來的作業，因為我們要改檔名，變成.aspx。這是ASP.NET的副檔名，才能使用ASP.NET。

圖 2‑6

Step 6：如圖2-7所示。接著我們開啟MS FrontPage 2003，打開Mainpage.aspx，在網頁上功能列的圖案上按下滑鼠右鍵，叫出功能表。點選圖片內容，找到一般頁籤中的圖片，把整段路徑剪下來。然後按下確定鈕，結束圖片視窗。

圖 2‑7

Step 7：如圖2-7所示。接著我們一樣在網頁上在網頁上功能列的圖案上按下滑鼠右鍵，叫出功能表。點選儲存格內容，找到背景、勾選使用背景圖片，然後將剛剛剪下的圖片位址貼上。

圖 2‑8

Step 8：這樣的動作就代表可以在表格中輸入文字，而我們現在還有圖案在表格中，因此再次點選表格中的圖案，然後按下Del鍵，把表格中的圖案刪除，如此一來圖案經過我們剛剛設定為儲存格背景圖案，所以感覺起來還是沒有任何的變化，但是功能上卻大不相同，因為原先被圖案佔住的表格，現在已經可以輸入文字了。剩下其它的表格也依樣畫葫蘆，都將儲存格的圖案變成儲存格的背景圖案，這樣一來你就擁有一張完整且精確的網頁了。而且我們接下來還可以在表格中填入文字，作一些變化。所謂換殼，就是透過這個道理來實現的。因為你只需要再次進入Photoshop修改圖案之後，儲存成網頁圖案，然後就可以直接複製在images的目錄中，這樣又是一張新網頁，可不是嗎？連程式都不用寫哩。

Step 9：如圖2-9、2-10所示。但是要記得把圖案的高度及寬度記下來，填入儲存格內的寬度及高度，這樣表格才不會變亂掉喔。

圖 2‑9

圖 2‑10

Step 10：如圖2-11所示。接下來就是非常簡單的填填看，有哪些地方可以填入文宣呢？我們把它框起來，讀者們就可以在裡面填寫文字了。

圖 2‑11

Step 11：如圖2-12所示。你可以在儲存格中再次建立一個表格，這樣比較好定位文字的範圍，例如我們看到最右邊底下的區塊。

圖 2‑12

Step 12：填寫完畢的成果如下圖2-13、2-14所示。直接新增一個兩列一欄的表格，並且置中，而後框線大小設為0。如此一來，真正在瀏覽網頁的時候，是看不見框線的，也因此來賓就會認為是一體的，其實我們用了兩層的表格，一層是大表格目的是用來定位整個網頁的背景圖案，另外一層是用來定位儲存格中的文字位置。有時候原先預設為底圖的檔案，用表格編輯為底圖。若是設定為功能的圖形，則依然保持不變。這樣也可以。

圖 2‑13

圖 2‑14

Step 13：如圖2-15、2-16、2-17所示。在網頁功能表儲存格中建立一個表格，是六欄一列，寬度為82%。然後點選第一個儲存格，將文字游標放置在裡面，點選插入、Web元件，出現插入Web元件視窗之後，點選互動式按鈕，按下完成鈕。

圖 2‑15

圖 2‑16

圖 2‑17

Step 14：所有互動式按鈕作完成之後如下圖2-18所示。出現互動式按鈕視窗之後，在文字一欄輸入最新消息，連結一欄輸入./MainPage.aspx。之後切換到圖像頁籤，將寬度設定為98像素。其他的按鈕都依照前面的作法，分別新增科系、乙級證照班、表格下載、地理位置、上課方式的互動式按鈕。連結的部分暫時都先不用輸入，保持空白即可，因為我們還沒有製作到內頁的部分，內頁也只需要一頁就可以了，而不必每一頁都要製作不同的網頁喔。這也是ASP.NET所帶來的便利性。

圖 2‑18

2.6.2 網站建置¶

Step 1：如圖2-19，現在我們要進入另一個階段，就是網站建置的部分，請點選「系統管理工具、網際網路資訊服務(IIS)管理員。

圖 2‑19

Step 2：如圖2-20、2-21、2-22，然後在預設的網站上按下滑鼠右鍵，叫出功能表。點選內容。切換到主目錄頁籤，點選瀏覽…鈕，找到Mainpage.aspx的所在目錄，按下確定鈕，之後按下套用鈕。接著切換到文件頁籤中，點選新增鈕，輸入Mainpage.aspx。按下確定鈕，結束內容視窗。這樣就完成了網站基本的設定了。

圖 2‑20

圖 2‑21

圖 2‑22

Step 3：成功的結果如下圖2-23所示。現在我們來測試一下嚕，開啟網頁瀏覽器，我們這裡預設為Internet Explorer 7，在網址列上輸入「http://localhost 」或是「http://127.0.0.1 」。

圖 2‑23

2.6.3 設計子網頁¶

主網頁架構做好了，我們接著來製作子網頁吧。子網頁的製作會比主網頁更加簡單，只不過是圖案必須多換幾張而已。我們主要製作的子網頁有科系、乙級證照班、地理位置三張而已。當然您也可以依照自己的需求去增加。

Step 1：如圖2-24。現在先關掉其他的軟體吧，重新開啟Adobe Photoshop，叫出SubPage.psd。一樣點選切割工具，把該影像切割成七個區域。方法與製作主網頁相同，切割之後，點選檔案、儲存為網頁用。如此您就建立好了子網頁的背景圖案，而後我們開啟Subpage.html，準備把圖案變成儲存格背景。這樣才能將網頁設計成為可自動換殼的機制。

圖 2‑24

我們採用與主網頁一樣的流程，將所有的圖檔都變成儲存格背景圖案。這是為了方便之後使用.NET語言來置換圖片。因此我們除了製作這一張子網頁之外，還可以再製作另外一張圖案不一樣但是區塊一樣的影像出來。也就是透過Adobe Photoshop圖層的功能，來顯示不同的圖層，但為了管理方便您也可以額外儲存成另外的影像檔，方便檔案管理與輸出成網頁。

Step 2：如圖2-25、2-26。請看接下來我們所製作的其他網頁，您會發現影像變了，但是變動的區域只限於分割的區塊內，因此不用擔心中間被區塊截斷，而且輸出成網頁之後，我們要的也只是有變動的區域影像，因為這樣就是等於換殼，而換殼的動作將會交給.NET的程式來完成。

圖 2‑25

圖 2‑26

這兩頁切割儲存成網頁之後，請記得檔案名稱不要重複，否則會覆蓋到前面的影像檔。這點要特別注意。

2.6.4 網頁程式設計¶

Step 1：如圖2-27。現在進入到程式設計的階段了，我們有預先準備工作要做。請點選開始、控制台、系統管理工具、網際網路資訊服務 (IIS) 管理員。在預設的網站上按下滑鼠右鍵，叫出功能表，點選新增、虛擬目錄。

圖 2‑27

Step 2：如圖2-28、2-29。開啟了虛擬目錄建立精靈視窗，按下下一步鈕。輸入別名為School，接著按下一步。

圖 2‑28

圖 2‑29

Step 3：如圖2-30、2-31。網站內容目錄視窗中有一個瀏覽鈕，點選一下瀏覽資料夾就開起了，找尋到放置Mainpage.aspx的目錄，按下確定鈕。回到視窗中，再按下下一步鈕。請記得Mainpage.aspx就是由Mainpage.html改檔名而得的，Subpage.aspx也是由Subpage.html改檔名而得的。

圖 2‑30

圖 2‑31

Step 3：如圖2-32、2-33、2-34。出現虛擬目錄存取權限視窗，請勾選執行指令碼，例如：ASP，按下一步鈕。這樣就已經完成了設定，按下完成鈕。設定完成後會在預設的網站目錄中出現School的虛擬目錄。

圖 2‑32

圖 2‑33

圖 2‑34

Step 4：如圖2-35、2-36。點選Microsoft Visual Studio .NET，開啟程式之後，按下新增專案按鈕。

圖 2‑35

圖 2‑36

Step 5：如圖2-37、2-38。點選Visual Basic、Web、ASP.NET Web應用程式，輸入名稱為MyWeb，位置的部分可以由您自訂。按下確定鈕即可。

圖 2‑37

圖 2‑38

Step 6：如圖2-39。在MyWeb上按下滑鼠右鍵，叫出功能表，點選加入、現有項目。而後找到原來製作的主網頁位置，點選Mainpage.aspx兩下。就會將Mainpage.aspx加入至專案內。可是我們還有影像檔案沒有加入。

圖 2‑39

Step 7：如圖2-40、2-41、2-42。因此在MyWeb按下滑鼠右鍵，叫出功能表，點選加入、新增資料夾然後命名為images。接著我們建立起images的資料夾後，在images上按下滑鼠右鍵，叫出功能表。

圖 2‑40

圖 2‑41

圖 2‑42

Step 7：如圖2-43、2-44。接著我們點選加入、現有項目，選擇目錄到MainPage.apsx存放影像檔的目錄images，圈選所有的影像檔案，然後按下加入鈕。請各位要記得是在「images」資料夾上按下滑鼠右鍵，點選「加入」、「現有項目」，倘若沒有注意到這一點，加入的影像檔案會到其它的地方，不過也沒有關係，您還是可以透過拖曳的方式，將檔案放回「images」資料夾中。為何要放在這裡呢？這是為了讓「Mainpage.aspx」可以找得到影像檔。

圖 2‑43

圖 2‑44

Step 8：如圖2-45。影像檔案如果成功的加入進來，就會出現在images的資料夾底下，這樣子我們才能正確的看到影像檔案。

圖 2‑45

Step 9：如圖2-46。最後記得將MainPage.aspx設定為起始頁，設定方式是在MainPage.aspx上按下滑鼠右鍵，叫出功能表，點選設定為起始頁。如此在這個專案內執行網頁應用程式時才會知道是由哪一個網頁起始。

圖 2‑46

Step 10：如圖2-47、2-48、2-49。我們點選工具箱內的Panel，拖曳到網頁空白處，放開滑鼠左鍵。這樣一個Panel就建立起來了，這時候會自動命名為Panel1。我們在裡面輸入最新消息的內容，就這樣第一個Panel就建立起來了，寫完之後，繼續拖曳第二個Panel出來，建立成Panel2。

圖 2‑47

圖 2‑48

圖 2‑49

Step 11：如圖2-50、2-51、2-52、2-53。在工具箱點選Image物件，放置在Panel2內，初次放置時會出現紅色叉叉的符號，這是因為還未連結到圖片，所以我們切換到屬性內，找到ImageUrl點選瀏覽鈕，連結到map.jpg。就這樣圖案就出現了。

圖 2‑50

圖 2‑51

圖 2‑52

圖 2‑53

Step 12：如圖2-54、2-55。接下來我們來寫程式吧，一個非常簡單的動作，就可以達到切換頁面的功能，所以請各位看清楚了。首先先切換至原始檔，然後點選物件或事件的下拉式選單，點選Page，而後點選事件下拉式選單，選擇Load。

圖 2‑54

圖 2‑55

Step 13：這時候Visual Studio會幫你產生事件的副程式，您在裡面填寫如下的程式，程式解說如下所述。

<script runat="server">  '.NET的程式是在伺服端執行因此作此設定

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)  '當表單載入時會呼叫到的事件

        Panel1.Visible = True   '顯示Panel1

        Panel2.Visible = False  '隱藏Panel2

    End Sub  '結束事件負程式

</script>  '設定伺服端事件程式範圍

Step 14：如圖2-56、2-57。填寫程式完畢後，在Mainpage.aspx上按下滑鼠右鍵，點選在瀏覽器中檢視，我們就可以看到只顯示Panel1的內容。

圖 2‑56

圖 2‑57

Step 15：那麼Panel2的內容到哪裡去了呢？別急，我們馬上就來撰寫顯示Panel2的程式碼。一樣切換到原始碼的部分，增加程式碼如下。

<!—超連結並且加上參數傳遞-->

<td width=”100”><a href=”Mainpage.aspx?Choice=5”>

<img border=”0” id=”img5” src=”images/button10.jpg” height=”20” width=”98” alt=”地理位置” onmouseover=”FP_swapImg(1,0,/*id*/’img5’,/*url*/’images/button11.jpg’)” onmouseout=”FP_swapImg(0,0,/*id*/’img5’,/*url*/’images/button10.jpg’)” onmousedown=”FP_swapImg(1,0,/*id*/’img5’,/*url*/’images/button12.jpg’)” onmouseup=”FP_swapImg(0,0,/*id*/’img5’,/*url*/’images/button11.jpg’)” fp-style=”fp-btn: Border Bottom 1” fp-title=”地理位置”></a></td>

載入表單事件程式碼增加如下所述。

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)

        Panel1.Visible = True

        Panel2.Visible = False

        If Request(“Choice”) = 5 Then ‘當接收到的參數為5時

            Panel1.Visible = False ‘隱藏Panel1

            Panel2.Visible = True ‘顯示Panel2

        End If ‘結束判斷

    End Sub

Step 16：如圖2-58。我們點選地理位置按鈕之後，Panel2就顯示出來了。這樣就快速的變成兩張網頁了，可不是嗎？

圖 2‑58

2.6.5 子網頁程式設計¶

Step 1：如圖2-59。將子網頁的目錄加入專案中。

圖 2‑59

Step 2：在網頁載入事件副程式中增加以下程式碼。

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)

        Panel1.Visible = True

        Panel2.Visible = False

        If Request(“Choice”) = 5 Then ‘當接收到的參數為5時

            Panel1.Visible = False ‘隱藏Panel1

            Panel2.Visible = True ‘顯示Panel2

        End If ‘結束判斷

        If Request(“Choice”) = 2 Then ‘當接收到的參數為2時

            Response.Redirect(“./SubPage/SubPage.aspx”) ‘導入到子網頁

        End If

    End Sub

Step 3：在科系的圖案中加入已下參數傳遞語法。

<!—超連結並且加上參數傳遞-->

<td width=”100”><a href=”Mainpage.aspx?Choice=2”>

<img border=”0” id=”img2” src=”images/button4.jpg” height=”20” width=”98” alt=”科系” onmouseover=”FP_swapImg(1,0,/*id*/’img2’,/*url*/’images/button5.jpg’)” onmouseout=”FP_swapImg(0,0,/*id*/’img2’,/*url*/’images/button4.jpg’)” onmousedown=”FP_swapImg(1,0,/*id*/’img2’,/*url*/’images/button6.jpg’)” onmouseup=”FP_swapImg(0,0,/*id*/’img2’,/*url*/’images/button5.jpg’)” fp-style=”fp-btn: Border Bottom 1” fp-title=”科系”></a></td>

Step 4：如圖2-60，點選科系就可以看到子網頁了，其他子網頁也如法泡製一翻，就這樣您就可以透過一個範本，創造出許多不同樣貌的網頁了。

圖 2‑60

2.7 修改重點¶

換圖也就是俗話的換殼，用Photoshop來做分割，來作多種的網站主題。使用者可以依照預設的網頁圖型檔繼續修改，使用圖層的方式來製作，也可以讓多個主題影像都放在同一個圖型檔中。也可以重新設計屬於自己的圖，將網頁功能移植到自行編輯的新作中。

2.8 結論¶

使用.NET編譯完程式後，要將網站上傳時，無須上傳原始碼的檔案，只需要上完\bin中的檔案，這樣就可以運行了。毋須將原始檔案上傳至網站，這也是一種保護。

Lai Tai-Yu (賴岱佑)

回到教材說明