105資處科上課用

1. 新觀念的新觀念的 VB6VB6 教本教本
第第 33 章章表單設計表單設計

2. 3-13-1 與表單設計相關的視窗與表單設計相關的視窗

3. 與表單設計相關的視窗與表單設計相關的視窗
 表單視窗表單視窗：設計表單的場所。：設計表單的場所。
 工具箱視窗工具箱視窗：提供給表單設計必要：提供給表單設計必要
的控制元件。的控制元件。
 屬性視窗屬性視窗：瀏覽並設定表單、控制：瀏覽並設定表單、控制
元件的屬性。元件的屬性。

4. 表單視窗表單視窗
表單視窗
表單，是展現「視
覺化」設計的視窗
返回與表單設計相關的視窗返回與表單設計相關的視窗

5. 工具箱視窗工具箱視窗
每一個圖形
按鈕各代表
一種元件
工具箱視窗
工具列
每一個圖形命令鈕
各代表一個指令
請不要把工具箱跟 VB
主視窗的工具列混為一
談，
工具列的每一個圖形命
令鈕所代表的是一個操
作 VB 的指令。
返回與表單設計相關的視窗返回與表單設計相關的視窗

6. 屬性視窗屬性視窗
抬頭標示著『屬性』兩個
字的視窗就是屬性視窗
返回與表單設計相關的視窗返回與表單設計相關的視窗

7. 3-23-2 在表單上 置控制元件佈在表單上 置控制元件佈

8. 在表單上 置控制元件的三個程序佈在表單上 置控制元件的三個程序佈
 選取適當的控制元件選取適當的控制元件。。
 改變控制元件的位置改變控制元件的位置。。
 調整控制元件的大小調整控制元件的大小。。

9. 選取適當的控制元件選取適當的控制元件
雙按 後， 命令鈕
控制元件就會被
放到表單的中央
返回在表單上 置控制元件的三個程序佈返回在表單上 置控制元件的三個程序佈

10. 改變控制元件的位置改變控制元件的位置
1. 按下滑鼠(不要放手)
2. 拉曳到理想的位置3. 放開滑鼠
返回在表單上 置控制元件的三個程序佈返回在表單上 置控制元件的三個程序佈

11. 調整控制元件的大小調整控制元件的大小 (1)(1)
命令鈕周圍有 8 個小黑點，試著把滑鼠
移到任何一個小黑點上， 將會發現滑您
鼠指標的形狀改變了
返回在表單上 置控制元件的三個程序佈返回在表單上 置控制元件的三個程序佈

12. 2. 拉曳
1. 按下滑鼠
3. 放開滑鼠
按下滑鼠、拉曳、再放開滑鼠即可完成
返回在表單上 置控制元件的三個程序佈返回在表單上 置控制元件的三個程序佈
調整控制元件的大小調整控制元件的大小 (2)(2)

13. 三合一 置控制元件法佈三合一 置控制元件法佈 (1)(1)
變成凹陷的
先按下 ( 不是雙按 ) 工具箱中的命令鈕按鈕，此時該按鈕
會變成凹陷的，如右：

14. 將滑鼠移到表單上，接著滑鼠游標會變成＋形狀將滑鼠移到表單上，接著滑鼠游標會變成＋形狀
2. 拉曳灰色外框到適當的大小
1. 決定位置後按下滑鼠
3. 放開滑鼠即已完成
三合一 置控制元件法佈三合一 置控制元件法佈 (2)(2)

15. 作用中的控制元件作用中的控制元件
作用中非作用中非作用中

16. 3-33-3 屬性視窗的操作屬性視窗的操作

17. 屬性列表屬性列表
屬性 屬性值
屬性
列表

18. 物件盒、屬性列表、屬性描述方塊物件盒、屬性列表、屬性描述方塊
物件盒
屬性列表
屬性描述方塊

19. 屬性列表的瀏覽屬性列表的瀏覽
這些屬性是根
據 英文字母的
順序 來排列的

20. 先選取此頁籤
可將外觀 類
的屬性展開
可將以下 行為
類的屬性收起
選取「選取「性質分類性質分類」頁籤」頁籤

21. 在「在「屬性描述方塊屬性描述方塊」找屬性」找屬性
先將屬性捲到
位置分類附近
以滑鼠點選屬性，並且觀察
屬性描述方塊 ，以尋找屬性

22. 屬性列表與屬性的設定屬性列表與屬性的設定 (1)(1)
 設定設定 "Caption"("Caption"( 標題標題 )) 屬性的屬性值屬性的屬性值
以滑鼠點選 "Caption"屬
性，此時會出現反白。
再按Tab鍵，接著屬性值
"Form1"也會出現反白，
並有閃動的輸入游標。

23. 輸入了一半想反悔，可以按輸入了一半想反悔，可以按 EscEsc 取消先前的輸入，但如取消先前的輸入，但如
果要重新輸入，則按了果要重新輸入，則按了 EscEsc 之後還要再按一次之後還要再按一次 TabTab 鍵。鍵。
Enter
輸入的內容
立刻反映在
表單上
屬性列表與屬性的設定屬性列表與屬性的設定 (2)(2)

24. 物件盒與物件盒與 VBVB 的物件的物件
剛進入 VB 時，只有一
個物件- 表單 (Form)物件

25. 在表單上 置一個命令鈕佈在表單上 置一個命令鈕佈
多列了一個命令鈕物件
(CommandButton)

26. 再 置兩個命令鈕佈再 置兩個命令鈕佈
新增的兩個命令鈕也都
會出現在物件盒之中

27. 當物件盒尚未拉下時，物件盒當物件盒尚未拉下時，物件盒
列示的是作用中的物件列示的是作用中的物件
表單上有小黑點的
是作用中的物件
未下拉的物件盒
所列示的就是
作用中的物件

28. 拉下物件盒，並選取物件盒之拉下物件盒，並選取物件盒之
中其他的物件，而表單上作用中其他的物件，而表單上作用
中的物件也會跟著改變中的物件也會跟著改變
重新選取物件盒
的物件後，表單
上作用中的物件
也會跟著改變。

29. 點選表單上的物件，則物件盒點選表單上的物件，則物件盒
所列示的物件也會跟著改變所列示的物件也會跟著改變
點選表單上的物件
，物件盒所列示的
物件也會跟著改變

30. 3-43-4 物件屬性的設定物件屬性的設定

31. 物件屬性的設定物件屬性的設定
設定屬性
有一表單原本如上圖左，經過屬性
的設定把它們變成如上圖右

32. 每一個物件都會有它們各自的屬性每一個物件都會有它們各自的屬性
它們都有各自的屬性列表，
所以共有４個屬性列表。
屬性視窗中每次只能顯示一個屬性列表，因此只有
作用中的物件其屬性列表才會出現在屬性視窗中 。

33. 設定過程：設定過程：
1.1. 將 “將 “ Command1”Command1” 命令命令
鈕變成作用中鈕變成作用中 。。
2.2. 將屬性視窗調到最前端將屬性視窗調到最前端
將“將“ Caption”Caption” 屬性的屬屬性的屬
性 改成 “命令鈕一”。值性 改成 “命令鈕一”。值
3.3. 參照步驟參照步驟 11 、、 22 的方的方
法，分別調出法，分別調出
““ Command2”Command2” 及及
““ Command3”Command3” 的屬性列的屬性列
表，並分別設定其表，並分別設定其
““ Caption”Caption” 屬性為 “命令屬性為 “命令
鈕二” 及 “命令鈕三”。鈕二” 及 “命令鈕三”。
4.4. 將表單變成作用中：將將表單變成作用中：將
表單的 “表單的 “ Caption”Caption” 屬性屬性
改成 “表單一”改成 “表單一” 。。
Command1
的屬性列表
作用中的物件

34. 實例練習：設計出如下的表單實例練習：設計出如下的表單
 OKOK 鈕是鈕是命令鈕命令鈕控制元件控制元件
 ““Welcome to VB 6.0"Welcome to VB 6.0" 是一串文字，所以要使用是一串文字，所以要使用
顯示文字的 控制元件顯示文字的 控制元件 (( 叫做叫做標籤標籤 Label)Label) 。。
標籤
命令鈕

35. 操作步驟操作步驟 11
選取適當的控制元件並 置控制元件。佈選取適當的控制元件並 置控制元件。佈

36. 操作步驟操作步驟 22
設定物件的屬性設定物件的屬性
3.設定 "Caption"屬性
成為 "OK"
2.選取 Command1物件
1.拉下物件盒

37. 操作步驟操作步驟 33
繼續設定物件的屬性，參照步驟繼續設定物件的屬性，參照步驟 22 ，，
設定表單設定表單 (Form1)(Form1) 及標籤及標籤 (Label1)(Label1) 這兩這兩
個物件的屬性。個物件的屬性。
物 件物 件 屬 性屬 性 屬 性 值屬 性 值
Form1Form1 CaptionCaption Hello, VBHello, VB
Label1Label1 CaptionCaption Welcome to VB 6.0Welcome to VB 6.0

38. 操作步驟操作步驟 44
最後是調整表單的大小最後是調整表單的大小
3. 放開滑鼠
2. 拉曳
1. 按下滑鼠

39. 3-53-5 儲存 的設計成果您儲存 的設計成果您

40. 儲存 的設計成果您儲存 的設計成果您
 按下工具列的按下工具列的儲存專案儲存專案命令鈕 ，就可以命令鈕 ，就可以
儲存設計成果。儲存設計成果。
 VBVB 會將表單的設計部份儲存成會將表單的設計部份儲存成 .frm.frm 的的
表單 案，此外，還會額外儲存檔表單 案，此外，還會額外儲存檔 .vbp.vbp 的的
專案 案。檔專案 案。檔
 所以當我們按下所以當我們按下儲存專案儲存專案命令鈕時，命令鈕時， VBVB
會顯示兩次「會顯示兩次「另存新檔另存新檔」的交談窗詢問」的交談窗詢問
我們欲儲存的 案名稱。檔我們欲儲存的 案名稱。檔

41. 專案與專案總管視窗專案與專案總管視窗 -1-1
 每一個每一個 VBVB 程式的開發對程式的開發對 VBVB 來說都是一個專案來說都是一個專案 。。
 VBVB 剛 動時，由於使用者還沒決定專案的名稱，所以啟剛 動時，由於使用者還沒決定專案的名稱，所以啟
VBVB 會先給予一個預設的專案名稱，叫做會先給予一個預設的專案名稱，叫做 "Project1“"Project1“ 。。
 而這個專案一開始就含有一個預設的表單叫而這個專案一開始就含有一個預設的表單叫
"Form1“"Form1“ 。。
專案名稱
暫時預設為 Project1
表單名稱
表單將來 儲存的 名檔
也暫時預設為 Form1

42. 專案與專案總管視窗專案與專案總管視窗 -2-2
假設我們將設計的成果分別儲存成假設我們將設計的成果分別儲存成 first.frmfirst.frm 及及
myfirst.vbpmyfirst.vbp 兩個 案，則專案總管視窗中會產檔兩個 案，則專案總管視窗中會產檔
生如上的變化生如上的變化 。。
專案 案名稱檔
表單 案名稱檔

43. 叫回先前的設計叫回先前的設計
 在在 VBVB 所開 的「啟所開 的「啟 建立新專案建立新專案」交談窗中選取「」交談窗中選取「記記
錄錄」頁籤，而找到先前存 的專案名稱。檔」頁籤，而找到先前存 的專案名稱。檔
 也可以選取「也可以選取「開啟開啟」頁籤，然後尋找」頁籤，然後尋找 myfirst.vbpmyfirst.vbp 案檔案檔
 VBVB 的工作環境中，選取功能表的「的工作環境中，選取功能表的「 案檔案檔 // 開 舊專啟開 舊專啟
案案」，接著出現的「」，接著出現的「開 舊專案啟開 舊專案啟 」交談窗也會含有」交談窗也會含有
「「開啟開啟」及「」及「記錄記錄」頁籤。」頁籤。
選取此頁籤
叫回先前的設計

44. 3-63-6 三種屬性設定的型態三種屬性設定的型態

45. 三種屬性設定的型態三種屬性設定的型態
右邊含有下拉按鈕
右邊沒有按鈕
右邊含有…按鈕
交談窗型
直接選取型
鍵盤輸入型

46. 鍵盤輸入型鍵盤輸入型
屬性 右邊沒有按鈕，屬性 的設定要透過鍵值 值屬性 右邊沒有按鈕，屬性 的設定要透過鍵值 值
盤輸入的方式來設定。盤輸入的方式來設定。
也可以直接以滑鼠雙按屬性上
方，然後屬性 會出現反白，值
接著就可以開始輸入屬性 。值

47. 直接選取型直接選取型：：
屬性 右邊含有下拉按鈕，按下下拉按鈕後，值屬性 右邊含有下拉按鈕，按下下拉按鈕後，值 VBVB 會會
列出所有的屬性 ，使用者只要從中選取即可。值列出所有的屬性 ，使用者只要從中選取即可。值
按下此鈕，VB即會列出
所有的屬性 供選擇。值

48. 交談窗型交談窗型
1.1. 屬性 右邊含有…按鈕，按下…按鈕後，值屬性 右邊含有…按鈕，按下…按鈕後，值 VBVB
會再開出一個交談窗，使用者要在交談窗中會再開出一個交談窗，使用者要在交談窗中
設定屬性。設定屬性。
2.2. 此一類型屬性所開出的交談窗並無固定格式此一類型屬性所開出的交談窗並無固定格式
，所以以下我們就只先介紹，所以以下我們就只先介紹 FontFont 及及 PicturePicture
兩種屬性的設定方法。兩種屬性的設定方法。

49. 交談窗型交談窗型 ---- FontFont 屬性的設定屬性的設定
字形放大
加底線
欲改變上圖命令鈕的字型的大小、樣式
，設定過程如下兩張投影片

50. 調出屬性視窗並選取調出屬性視窗並選取 Font(Font( 字型字型 )) 屬屬
性性
1 . 使命令鈕變成作用中
2 . 調出屬性視窗
3 . 選取Font屬性 4 . 按下下拉按鈕

51. 出現一出現一字型字型交談窗交談窗
1. 決定字型大小
2. 選取字型效果
3. 按『確定』以前
，可以在這裡預
覽到字型的長相

52. 交談窗型交談窗型 -- Picture-- Picture 屬性的設屬性的設
定定
 PicturePicture 屬性是用來設定表單或影像框屬性是用來設定表單或影像框
(Image)(Image) 控制元件控制元件 (( 後述後述 )) 的背景圖片。的背景圖片。
 首先準備一空白的表單，然後調出屬性首先準備一空白的表單，然後調出屬性
視窗並選取視窗並選取 Picture(Picture( 圖片圖片 )) 屬性，最後屬性，最後
按下 鈕。按下 鈕。

53. 出現一出現一載入圖片載入圖片交談窗交談窗
先前在 載入圖片 交談
窗所選擇的圖片 會檔
顯示在表單的左上角
載入圖片交談窗的功用是用來選取磁
碟 .bmp 、 .dib 、 .wmf 、 .ico 、 .cur 、 .gif 、 .jpg
等格式的圖片 ，這就是設定檔 Picture 屬性的方法。

54. 上機練習上機練習 ---- 設計出以下的表設計出以下的表
單單

55. 上機練習 –上機練習 – Step 1Step 1
1.1. 首先是選取適當的控制元件首先是選取適當的控制元件
標籤(Label)
控制元件
命令鈕
(CommandButton)
控制元件
影像框(Image)
控制元件

56. 上機練習 –上機練習 – Step 2Step 2
屬 性屬 性 屬 性 值屬 性 值
Caption (Caption ( 標題標題 )) 學學 Visual BasicVisual Basic 找王國找王國
榮榮
BorderStyle (BorderStyle ( 邊框樣式邊框樣式 )) 1 -1 - 單線固定單線固定
Alignment(Alignment( 對齊方式對齊方式 )) 2 -2 - 靠中對齊靠中對齊
Font (Font ( 字型字型 )) 大小大小 = 12= 12
佈置標籤 (Label) 控制元件到表單上，並設定
以下屬性 :

57. 3.3. 置影像框佈置影像框佈 (Image)(Image) 控制元件到表單上控制元件到表單上
。。
4.4. 置命令鈕佈置命令鈕佈 (CommandButton)(CommandButton) 控制元件控制元件
到表單上，並設定以下屬性：到表單上，並設定以下屬性：
屬 性屬 性 屬 性 值屬 性 值
Caption (Caption ( 標標
題題 ))
進入進入
Font (Font ( 字型字型 )) 大小大小 =12=12 ，，字型樣式字型樣式 == 粗粗
體體
5. 將表單的 Caption( 標題 ) 屬性設定為 “
更多采多姿的表單”，並調整表單的大小。
完成本步驟，表單設計即告完成。
上機練習 –上機練習 – Step 3~5Step 3~5