Transcript 第2章VWD開發環境簡介

第二章 VWD開發環境簡介
在本章中，我們將介紹本書最重要的ASP.NET
網頁程式開發軟體：Visual Web Developer
2010 Express，並且示範如何建立ASP.NET網
頁的介面元件（這些元件稱之為控制項）。
1
大綱
• 2.1 建立新網站
• 2.2 VWD整合開發環境介紹
–
–
–
–
–
–
2.2.1
2.2.2
2.2.3
2.2.4
2.2.5
2.2.6
主視窗
工具列
工具箱（Tool Box）
方案總管
【設計／分割／原始檔】主窗格
屬性窗格：設定屬性值
• 2.3 建立與操作Web Form上的控制項
–
–
–
–
2.3.1
2.3.2
2.3.3
2.3.4
建立控制項
絕對定位
調整控制項的大小
刪除控制項
• 2.4 主窗格／原始檔分頁／屬性窗格
• 2.5 本章回顧
2
2.1 建立新網站
•
•
•
假設您已經安裝完成Visual Web Developer 2010（VWD2010），我們現在可
以馬上開始建立ASP.NET網頁程式。（安裝VWD2010請見附錄A）
範例2-1：使用【檔案系統】網站模式建立第一個ASP.NET網頁。
學習目標：包含刪除預設網頁、新增網頁及存檔。
–
–
–
步驟0：在進行本範例的操作，請先刪除C:\ASPNET\ch02內的所有檔案。因為那是本章範例的
最終執行結果。
步驟1：執行【開始／所有程式／Microsoft Visual Studio 2010 Express／Microsoft Visual Web
Developer 2010 Express】指令，開啟VWD2010，如下圖。
步驟2：執行【檔案／新網站】指令。
3
2.1 建立新網站
– 步驟3：點選範本為【ASP.NET網站】，選擇位置為【檔案系統】，
以及要將網站放置的目錄，在本例中，我們以C:\ASPNET\ch02\為
存放目錄，最後選擇語言為【Visual Basic】，代表要使用VB.NET
語法開發ASP.NET網頁程式，選擇完畢後按下【確定】鈕。
4
2.1 建立新網站
– 步驟4：此時會正式開啟一個ASP.NET網站，但沒有任何網頁。您可
以在方案總管窗格中，看到ch02網站的相關目錄與相關檔案，目前
只有一個web.config檔，這是該網站的組態檔，記錄了該網站所使用
的.NET Framework版本等資訊。我們欲在該網站中加入第一個
ASP.NET網頁，因此在方案總管內，點選網站目錄或空白處按滑鼠
右鍵，執行快顯功能表的【加入新項目】指令，如下圖。
5
2.1 建立新網站
– 步驟5：接著我們選擇要新增的網頁格式為Web Form，然後輸入檔名
ch02.aspx，選擇語言為【Visual Basic】，並取消『將程式碼置於個
別檔案中』選項，最後按下【新增】鈕，如下圖。
6
2.1 建立新網站
– 『將程式碼置於個別檔案中』選項
• 若勾選本選項代表要將介面與程式碼分開在兩個檔案，這種開發
模型稱之為程式碼後置模型(Code Behind Model)，例如網頁介面
存放在ch02.aspx檔案，而程式碼放置在ch02.aspx.vb（使用
VB.NET語法）或ch02.aspx.cs（使用C#語法）檔案中。
• 而我們在本範例中取消了這個選項，代表介面與程式碼將同時位
於ch02.aspx檔案中。這種模型稱之為內嵌程式碼分割模型(Inline
Code Separation Model)或單一檔案模型。
• 單一檔案模型較適合不熟悉VB.NET繼承語法的初學者，因此，
本書將以此種模型開發ASP.NET網頁。
• 事實上，除了這兩種撰寫ASP.NET的模型外，ASP.NET為了與傳
統ASP相容，也允許使用<% %>的方式撰寫，但本書只在資料繫
結時才會採用這種過時的方式。
7
2.1 建立新網站
– 步驟6：此時新增的ch02.aspx網頁會出現在方案總管中，同時在
主窗格中，也會出現該檔案的原始碼。我們在原始碼中的<div>與
</div>中輸入文字『這是一個ASP.NET網頁』，然後按下【設計】
頁籤。
8
2.1 建立新網站
– 【刪除檔案】
• 如果想要刪除新增的ch02.aspx，可以點選ch02.aspx按下滑鼠
右鍵，執行快顯功能表的【刪除】指令。
9
2.1 建立新網站
– 步驟7：此時將切換到網頁的介面設計模式，您可以發現在原始檔中
輸入的文字顯示在網頁中了。事實上，如果我們在設計模式中加入
元件到網頁中，原始碼也會跟著改變。接下來，我們準備關閉VWD
結束本範例。由於我們已經改變了ch02.aspx的內容，因此在離開
VWD之前，應該要按下全部存檔鈕進行存檔，若未進行存檔就按下
右上角的關閉鈕，則會出現一個提示對話框，提醒您進行存檔，如
下圖。
• 【註】本章範例具有連續性，在範例2-1建立的ch02網站將會在
本章後面的範例中繼續使用。
10
11
2.1 建立新網站
– 範例說明：
• 在這個範例的步驟3中，我們選擇了【檔案系統】來開發ASP.NET網站。
事實上，VWD提供的遠端與本地端網站類型有下列三種：
• 1：HTTP：透過HTTP協定，將遠端伺服器（例如IIS）上的檔案下載到本
地端，透過VWD來修改與開發網頁，修改完成後，也會回存到伺服器端。
• 2：FTP：透過FTP協定，將遠端伺服器上的檔案下載到本地端，透過
VWD來修改與開發網頁，修改完成後，也會回存到伺服器端。
• 3：檔案系統：使用本地端的檔案系統作為虛擬網站，以目錄方式規劃網
站，並且透過VWD啟動模擬的Web伺服器（稱之為ASP.NET程式開發伺
服器），進行測試，而在瀏覽器的網址列中，會以localhost取代
IP/Domain Name，透過HTTP協定讀取模擬的Web伺服器的輸出。換句
話說，使用本模式，並不需要額外架設實際的網頁伺服器，特別適合開發
階段時使用。在下一章的範例中，我們將執行範例，您會發現瀏覽器的網
址列會以localhost取代IP。
12
2.2 VWD整合開發環境介紹
– VWD是本書最重要
的開發環境，因此在
進行語法介紹之前，
首先我們先來了解
VWD的環境與相關
操作。在上一個範例
中，我們曾開啟
VWD整合環境，事
實上它是由許多窗格
組合而成，如圖2-1。
13
2.2 VWD整合開發環境介紹
• VWD各窗格簡介
– 除了圖2-1中所出現的主視窗、工具箱、主窗格、方案總管、屬性視窗、
工具列之外，還有書籤視窗、類別檢視、文件大綱、物件瀏覽器、、
等等。某些子窗格是共用同一窗格的，例如圖2-1的方案總管與資料庫
總管是使用同一個窗格（停駐於IDE右上方的窗格），但以頁籤分頁
來區隔。
– 除了某些分頁共用同一窗格外，某些子窗格不以頁籤方式共用同一窗
格，但仍會銜接在一起，例如【CSS屬性】窗格會銜接在工具箱下方。
VWD由上而下，由左而右的各窗格說明如表2-1：
14
2.2 VWD整合開發環境介紹
【註】
若已調整各窗格的位置後想要恢復原有預設的窗格位置，只要執行【視窗／重設視窗配置】
指令即可。
15
2.2 VWD整合開發環境介紹
– 除了主視窗之外，事實上，其他
各種窗格或子窗格都可以在【檢
視】功能表中找到對應的開啟視
窗指令，例如下圖中，執行【檢
視／其他視窗／CSS屬性】指令，
則可以開啟【CSS屬性】窗格於
工具箱窗格下方。
16
2.2.1
主視窗
• VWD主視窗包含了標題列、功能表列，如下圖所示：
• 標題列
– 在標題列的右方，會出現一般Windows應用程式常見的3種按鈕，
最小化鈕、
還原鈕或
最大化鈕、
關閉鈕。
– 在標題列的左方，會出現VWD視窗圖示及目前開發專案／網站的
目錄名稱『WebSite1-Visual Web Developer 2010 Express』。
• 功能表列
– 功能表列包含了十一個功能表（某些需先選取控制項才會出現），每個功
能表中則包含了不同的指令：
17
2.2.1
主視窗
18
2.2.2
工具列
• VWD提供了包含眾多快捷鈕的『工具列』，以對應某個功能表內的常用
指令。工具列被分為許多種類，其中格式、標準、HTML原始檔編輯、
Web Platform Installer等四個工具列預設會出現在VWD視窗中，而其他
的工具列則可以透過【檢視／工具列】指令來選擇開啟或關閉。
– 和大多數的應用軟體一樣，當滑鼠游標移動到VWD工具列的某一個快
捷鈕上等待約2秒，就會出現該快捷鈕的名稱，以便我們了解該快捷
鈕的用途。在本小節中，我們先介紹最常使用的標準工具列與格式工
具列：
• 標準工具列：
19
2.2.2
工具列
– 標準工具列的快捷鈕：
20
21
2.2.2
工具列
– 【註】HTML5多了一些關於多媒體播放的標籤，但各家瀏覽器支援的
部分並不統一，因此本書都是採用預設格式的XHTML 1.0 Transitional
作為輸出的HTML格式。
• 格式工具列：
– 格式工具列的相關快捷鈕與Word等編輯軟體類似，可用來設定字型、
粗體、斜體等，在此就不多作介紹。
22
2.2.3
工具箱（Tool Box）
• VWD的工具箱提供了許多的工具可做為網頁介面設計之用，而這些工具
稱之為『控制項』。事實上，控制項又可以分為VWD提供的伺服器控制
項(Server Controls)以及使用者自訂的使用者控制項(User Controls)，
本書只會介紹VWD提供的伺服器控制項，並且又可以分為下列幾大類：
– 標準控制項：
• 包括常見視窗UI的控制項，只不過此處採用的是網頁方式呈現，例如按鈕、清單、
影像、方塊、超鏈結、標籤與表格等等，有些控制項內還可以加入其他控制項，此
類控制項稱之為容器控制項(Container)。
– 資料控制項：
• 此類控制項可連結伺服器端的資料來源，例如XML檔案或資料庫。
– 驗證控制項：
• 此類控制項的功能是用來驗證使用者在Web表單中的輸入。其功能可讓設計者驗證
特定值或值的範圍。
– 巡覽控制項：
• 這類控制項提供了在ASP.NET網頁上建立功能表或網站巡覽的功能。
23
2.2.3
工具箱（Tool Box）
– 登入控制項：
• 這類控制項可讓設計者快速建置登入網頁。
– AJAX擴充功能控制項：
• 這是ASP.NET3.5版之後新增的控制項，可以用來快速使用AJAX建立網頁，省掉過
去許多需自行撰寫JavaScript程式碼的麻煩，在Web 2.0網站中時常使用。
• VWD 2010 Express提供的AJAX控制項為最新的4.0版，這些控制項使用AJAX
Template語法，可產生JavaScript的動態資料繫結效果。
– HTML控制項：
• 提供許多HTML設計的元件，例如按鈕、表格等等，此類控制項不會由伺服器執行
任何程式碼，伺服器只會將其對應的HTML標籤內容回傳給瀏覽器。
• 若只需要製作靜態網頁時，可以使用此類控制項，否則，應該採用標準控制項。
24
2.2.3
工具箱（Tool Box）
– 由於ASP.NET的伺服器控制項眾多，故在此不一一列出，在往後的章節中，
每一章都會針對某一類的控制項進行說明。工具箱除了上述介紹的控制項之
外，預設還有三類控制項頁籤，如下說明：
– WebParts控制項：
• 又稱為Web組件控制項，包含網頁組件的多種控制項。可將網站的控制項
整合作為集合，並允許使用者直接在瀏覽器中修改 Web 網頁的內容、外
觀和行為。
– 動態資料控制項：
• 提供了許多控制項，可設計出以資料模型為導向的ASP.NET網站。
– 一般控制項：
• 可拖曳介面已有的常用控制項至此處，以便在使用時能夠快速複製相同類
型的控制項，因此在預設狀況下，內容為空。
25
2.2.3
•
工具箱
工具箱標籤預設會出現主窗格的左邊，
若不慎關閉了，可以執行【檢視／其
他視窗／工具箱】指令開啟。而要展
開左邊的工具箱標籤，只需要將滑鼠
游標移動到標籤上方，工具箱便會向
右展開，其中各類控制項則以頁籤方
式垂直分隔。在展開的工具箱右上角
有三個按鈕，第一個按鈕為下拉鈕 ，
其功用是選擇工具箱的出現型式，第
二個按鈕 的功用是固定或隱藏，當
按下之後會變成圖釘樣式 ，此時工
具箱被固定住而不會自動向左隱藏，
再按一下即可恢復自動隱藏。最右方
的按鈕
則是關閉工具箱。
26
2.2.4
方案總管
• 方案總管是VWD開發網頁程式的檔案管理窗格，預設在主窗
格的右上方，使用VWD開發ASP.NET網站一般以目錄為最小
基本單位，當建立一個空網站後，代表網站的目錄預設至少
會包含web.config檔案，然後我們會加入新項目
27
2.2.4
方案總管
– 假設加入的是Web Form網頁，則會產生預設名稱為Default.aspx的
ASP.NET網頁，若採用程式碼後置模型(Code Behind Model)開發網
頁程式，則還會多出一個Default.aspx.vb或Default.aspx.cs程式檔。
以下是各檔案及目錄的功能敘述。
28
2.2.4
方案總管
• Defalut.aspx：
– 這是預設的網站首頁名稱，也就是當只輸入網址而未輸入檔案名稱時，會自
動執行的網頁。若在VWD新增網頁而未命名時，也會以遞增數字方式來命名，
例如Defaults2.aspx。
• Defalut.aspx.vb：
– 這是依存在Defalut.aspx的Visual Basic『.vb』程式檔，當您使用程式碼後置
(Code-Behind)模型開發ASP.NET網頁時，網頁內容與程式碼會分開，而程式
碼會存放在此檔案。若使用C#開發ASP.NET網頁，則副檔名將為『.cs』。若
使用單一檔案模型開發，則不會出現此檔案。
• web.config：
– 這是ASP.NET特殊的網站設定檔，可依照需求設定此檔內容，而此檔為XML
格式的檔案。
• 【註】在後面章節中，我們會加入存取資料庫的功能，此時會出現一個
App_Data子目錄，用來存放相關資料檔，例如XML檔或資料庫檔案。
29
2.2.4
方案總管
• 在方案總管視窗上方包含幾個快捷鈕，其中設計工具檢視與
檢視程式碼快捷鈕將在主窗格中開啟對應的分頁，分述如下：
30
2.2.4
方案總管
• 在方案總管視窗上方包含幾個快捷鈕，其中設計工具檢視與
檢視程式碼快捷鈕將在主窗格中開啟對應的分頁，分述如下：
31
2.2.5
【設計／分割／原始檔】
主窗格
• VWD視窗正中央的為【設計／分割／原始檔】主窗格，它是
用來對應方案總管中選取之檔案，並且可同時開啟多個檔案
（使用上方頁籤方式區隔）
– 若想要開啟某一個檔案來進行設計，則可以在方案總管中，點選該檔
按兩下，就會自動將檔案開啟到主窗格中。
– 若想要切換模式，則按下方的『設計／分割／原始檔』頁籤，可切換
至不同的編輯模式。
32
33
2.2.5 【設計／分割／原始檔】
主窗格
• 主窗格是VWD用來設計網頁的介面以及設計程式原始碼的地方，如下說
明：
– 『設計』分頁：
• VWD以Web Form（網頁表單）進行網頁的設計，在此模式下，可以拖曳工具箱的
控制項至Web Form來設計網頁外觀。
– 『原始檔』分頁：
• 伺服器端的.aspx其實是一個純文字檔，其中使用了某些標籤代表控制項（這些標
籤符合XML的規範，有些則是HTML的標籤），若需要觀看標籤內容，則可以切換
至此模式。此處同時也是撰寫程式之處。
– 『分割』分頁：
• 同時觀看上述兩者。有助於初學者了解加入控制項後，在伺服器aspx檔案中發生了
什麼樣的變化。
– 『其他標籤』頁籤：
• 在主窗格下方會出現某些標籤格式的頁籤，如<html>、<body>等等，代表著原始
檔的巢狀標籤安排，可快速切換到所需要的標籤位置。
34
2.2.6
屬性窗格：設定屬性值
• 在上一章中，我們已經介紹過物件與屬性的關係，例如：飛機是一個類別，
它有眾多屬性來描述屬於該類別下各個物件的特性，例如：爬升力、外殼
顏色、載重、重量、、等等。因此，將飛機的屬性設定為不同的屬性值，
就可以得到各式各樣的飛機，如客機與戰鬥機等等。
• ASP.NET的每一種控制項都是一個類別，而每一個控制項都是一個物件，
因此，控制項擁有屬於該控制項的屬性，我們可以透過視窗右下角的屬性
窗格來更改這些控制項物件的各個屬性值。
– 例如，在網頁中有一個按鈕控制項物件，名稱為Button1，隸屬於WebControls.Button
類別，若欲將其文字設定為『發送』，則只要在屬性窗格中，設定Text的屬性值為『發
送』即可，如下圖。
• （若無法即時反應，可先切換至【原始檔】分頁再切回【設計】分頁，就可以發現
屬性設定的效果）
35
– 除了事先靜態設定屬性值之外，我們也可以撰寫程式碼來動態更改屬
性值，換句話說，該物件的屬性值將在程式執行時被更改，例如：更
改某一個標籤物件的文字屬性值。
36
2.2.6
屬性窗格：設定屬性值
– 屬性窗格預設放置於視窗右下角，若不慎關閉，可執行【檢視／其他
視窗／屬性視窗】指令來開啟。
– 若VWD中已經出現屬性窗格時，則可以藉由物件名稱下拉式清單選取
網頁中不同的物件，進而設定該物件的屬性。
37
2.2.6
屬性窗格：設定屬性值
【註】屬性視窗也可以用來產生事件處理程序，留待後面小節介紹。
38
2.3 建立與操作Web Form上
的控制項
• VWD 2010 Express預設的原始碼介面並不包含行號，而為了
本書往後說明程式碼的方便，因此，建議讀者如下開啟行號
功能，以便對照相關程式碼的說明。
• 開啟行號顯示功能
– 進入VWD後，執行【工具／選項】指令，勾選行號，按下【確定】鈕
後，關閉VWD，往後開啟VWD，在程式碼分頁處就會顯示行號了。
39
40
2.3 建立與操作Web Form上的控
制項
• 在範例2-1中，我們加入新檔案時，選用的範本是Web Form，
其副檔名是.aspx。
– 而Web Form是使得ASP.NET可採用事件處理方式開發的關鍵元件，
它使用的是一個<form runat="server">標籤作為原始碼，在預設狀況
下（尚未配置其他控制項時），其原始檔如下：
1
2
3
<%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
41
2.3 建立與操作Web Form上的
控制項
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
</form>
</body>
</html>
42
2.3 建立與操作Web Form上的
控制項
• 【說明】
– 如果您了解HTML網頁的原理與原始碼，您會發現， ASP.NET網頁的
初始內容與XHTML網頁部分類似，但有些許不同，不同之處如上述粗
體所示，說明如下：
– (1)第1行：
• 由於這是一個ASP.NET網頁，因此必須先說明該網頁使用何種語
法撰寫，故使用@Page指示詞說明該網頁為VB語法（也就是
VB.NET 4.0或VB2010語法）。
– (2)第5~7行：
• 這裡出現了一個<script>標籤，並且runat屬性註明為server，在
ASP.NET中，只要標籤包含一個屬性runat="server"，就代表該標
籤內容必須由伺服器進行編譯與執行，而此處<script>標籤的作用
是放置事件處理程序之處。
43
2.3 建立與操作Web Form上的
控制項
– (3)第14~18行：
• 您會發現在標籤<body>..</body>中，包含了一個<form runat="server">
標籤，該標籤之id屬性為form1，這代表著
– (1)這是一個表單，名稱為form1，並且必須由伺服器先進行處理，事
實上這就是Web Form表單
– (2)伺服器處理的範圍將包含在<form>之中，而由於它被包含在
<body>之內，因此處理結果也會被包含在<body>之內，故可以作為
網頁顯示的內容。
– (3)<form>標籤內是配置控制項之處。
– (4)<div>標籤內容為空，它只是一個純HTML標籤（並無
runat="server"屬性），代表著這裡可以放置文字或其他標籤
– (4)所有標籤中出現runat="server"者，編譯器都會將之視為一個物件進行處理。
而沒有runat="server"的標籤，則不需要被處理，通常僅直接輸出（例如本例
中的<div>標籤）。
44
2.3 建立與操作Web Form上的
控制項
– (5)由以上各點，我們可以得知
• ASP.NET網頁採用單一檔案模型開發時，事件處理程序將位於<script>標
籤中
• 而控制項將加入在<form1>標籤中。
– 接下來，我們將示範如何在Web Form中加入控制項，目標是設計出下圖的網
頁使用者介面。它一共配置了4個控制項。
• ASP.NET是由Page物件來代表檔案本身，而若以Web Form型式建立
.aspx檔案時，會自動出現<form runat="server">來代表Web Form物件。
• 由於Web Form物件具有容器性質，因此可以加入其他控制項，下圖的
Web Form中包含的控制項如下：
45
2.3 建立與操作Web Form上的
控制項
– 一個HTML標籤<div>，若加上runat="server"，則可以視為HTML控制
項，若不加上runat="server"，則只是單純的HTML標籤。
– Web Form內包含一個Label標籤控制項。
– Web Form內包含一個Button按鈕控制項。
– <form>本身也是一個HTML控制項，因為它也有runat="server"屬性。
圖2-2 包含兩個伺服器控制項的Web Form
46
2.3.1
建立控制項
• Web Form內定已經包含一個<form>HTML控制項與<div>標
籤，而要如何建立上圖Web Form的另外兩個伺服器控制項呢？
我們以範例2-2~2-4來加以說明：
• 【練習範例2-1a】：
– 延續範例2-1，加入兩個標籤控制項。（本例僅練習用，不必存檔）
47
48
49
50
2.3.1
建立控制項
51
2.3.1
建立控制項
52
53
2.3.1
建立控制項
• 在這個練習範例中，我們不但學會如何配置控制項，同時，也發現到在
ASP.NET中配置控制項，不如在VB.NET視窗程式設計中配置控制項那樣
隨心所欲
– 這是因為，不論您如何配置控制項，最終在執行之後都會被轉換為
HTML標籤，而HTML標籤具有連續性原則，也就是由左至右配置，中
間無法自動增加空白
• 並且除非是超過頁面，否則只能透過<br />與<p>標籤進行換行或
換段落，而這種定位方式是VWD預設的定位方式。
• 為了解決此一問題，VWD允許我們採用其他定位方式來配置控制項，這
也將是本書前幾章採用的使用者介面設計方式。
54
2.3.2
絕對定位
• 在上一個範例中，我們發現，控制項雖然位於<form><div>標
籤內，但調整位置並不方便，事實上，如果我們以絕對定位
來定位控制項，就會方便許多。以下，我們透過範例來說明。
• 【範例2-2】：
– 延續範例2-1，加入兩個標籤控制項
55
2.3.2
絕對定位
56
57
58
59
2.3.2
絕對定位
60
61
62
63
64
2.3.2
絕對定位
• 【原始檔說明】
– 在這個範例中，我們調整了<div>標籤的大小，也調整了Label1、
Label2、Button1控制項的位置，並且位置設定為絕對定位，因此原始
檔的<body>標籤內出現了變化，如下。
65
2.3.2
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
絕對定位
<body>
<form id="form1" runat="server">
<div style="height: 233px">
<asp:Label ID="Label1" runat="server"
style="top: 54px; left: 278px; position: absolute; height: 16px; width: 35px"
Text="Label"></asp:Label>
這是一個ASP.NET網頁
<asp:Label ID="Label2" runat="server"
style="top: 103px; left: 278px; position: absolute; height: 16px; width: 35px"
Text="Label"></asp:Label>
<asp:Button ID="Button1" runat="server"
style="top: 53px; left: 511px; position: absolute; height: 21px; width: 48px"
Text="Button" />
</div>
</form>
</body>
66
2.3.2
絕對定位
• 說明：
– 第15行
• <div>標籤發生了變化，它使用了style屬性來設定新的高度為
233px，這是CSS的語法。
– 第17行與第22行
• 標籤控制項對應的<asp:Label>標籤出現了變化，它也使用了style
屬性設定標籤的寬與高及其位置，其中position: absolute代表著
使用的是絕對定位，而top與left，則代表它的位置應該位於網頁上
方與左方多遠的距離。
– 第24~26行
• 出現了一個<asp:Button>標籤，它代表的是按鈕控制項，也使用了
絕對定位。故雖然在原始檔之中，Label2位於Button1之前，但在
設計介面處，Button1卻出現在Label2之上。
67
2.3.2
絕對定位
– 如果您開啟本範例檔案，然後隨意拖曳任一個標籤或按鈕控制項的位
置，會發現調整任何一個控制項並不會對另一個控制項造成影響。這
是因為我們使用了絕對定位的緣故。
• 若在對話方塊中採用【相對】定位，則原始檔會出現position:
relative，此時，控制項就會跟隨前一個控制項自動調整位置。而
本書較複雜的範例介面將採用絕對定位來配置介面元件，只有非
常單純的範例會採用相對定位配置介面元件。
– <asp:Label>與<asp:Button>標籤並不是HTML標籤，凡是<asp:xxx>
格式的標籤都是ASP.NET的伺服器控制項，由於它也需要被編譯器處
理，故必定也有runat="server"屬性。
68
2.3.3
調整控制項的大小
• 在前面的範例中，我們在調整控制項的位置時，已經學會如
何選取控制項。事實上，當您選取某一個控制項之後（或游
標移到某一個控制項上方時），該控制項的外框就會出現八
個小白點，而該控制項則稱之為『作用控制項』，此時您可
以針對作用控制項進行各種動作
– ，例如：搬移控制項位置、調整控制項大小、設定控制項的屬性值。
在上一節中，我們已經學會如何調整控制項的位置
• 在本小節中，我們將示範如何調整控制項的大小：
• 【範例2-3】：
– 延續範例2-2，調整按鈕控制項的大小
69
2.3.3
調整控制項的大小
70
2.3.3
調整控制項的大小
71
2.3.3
調整控制項的大小
• 選取多個控制項
– 我們常常會希望將許多控制項同時移動，例如：感覺Web Form 表單
的右邊空間比較大，就會希望將所有表單上的控制項同時向右移動。
• 此時，一個一個慢慢地移動控制項位置是一種方法，不過卻顯得
很麻煩又不容易對齊控制項
• 這個時候如果我們可以先同時選取多個控制項，然後一起移動該
有多好。同樣地，我們也希望可以同時改變多個控制項的大小。
– 選取多個控制項的方式，只要按住【Ctrl】鍵就可以完成，如同在檔
案總管中選取多個檔案的方式。
• 不幸地，VWD 2010 Express雖然允許選取多個控制項，但卻無法
同時進行移動及調整大小
• 但可同時刪除或複製多個選取的控制項。
72
2.3.4
刪除控制項
• 刪除控制項非常簡單，只要先選取控制項，使得控制項變成作用控制項（
外框出現八個小白點），然後就可以對該控制項做縮放、搬移及刪除的動
作，並且若選取多個控制項時，也可以一次刪除所選取的多個控制項（但
無法進行多個控制項的縮放與搬移）。
• 刪除作用控制項，可以依照下列三種方式完成：
– 方法1：按下【Delete】鍵。
– 方法2：執行【編輯／刪除】指令。
– 方法3：在作用控制項上按滑鼠右鍵，於快顯功能表中執行【刪除】指令。
• 【範例2-4】：
– 延續範例2-3，刪除Label2控制項
73
74
2.3.4
刪除控制項
75
2.3.4
刪除控制項
• 【復原被刪除的控制項】
– 當我們不小心誤刪了某個控制項後，可以透過下列3種方式將之復原
：
• 方法1：執行【編輯／復原】指令。
• 方法2：按下一般工具列的
復原快捷鈕。
• 方法3：同時按下【Ctrl】鍵+【Z】鍵。
76
2.4 主窗格／原始檔分頁／
屬性窗格
• 主窗格的【原始檔】分頁是編輯程式碼的地方。對Web Form
網頁而言，撰寫的程式大多為事件處理程序及其他自定的程
序，這些都是伺服器端要執行的程式。ASP.NET當然也可以
開發客戶端執行的JavaScript程式，不過我們暫時不會討論如
何撰寫客戶端程式。
• 原始檔分頁的操作
– 以下，我們以範例2-4最後完成的Web Form(ch02.aspx)來說明【原始
檔】分頁的操作：
– (1)開啟範例2-4的ch02.aspx網頁（ch02.aspx）並切換到【原始檔】
分頁，如下圖：
77
78
2.4 主窗格／原始檔分頁／
屬性窗格
– (2)控制項與預設事件：
• 在範例2-4中，Page代表網頁本身，而其他則還有3個物件，分別
是Button1、Label1與form1。您可以切換到【設計】分頁，如下
圖，當我們在Web Form上選擇其中一個控制項（例如：選擇
Button1按鈕控制項）之後，屬性窗格就會顯示該控制項的屬性，
這些屬性被分類為外觀、行為等幾類，其中一定會出現的是(ID)屬
性，它代表該控制項的名稱，也就是物件的名稱。而圖中的Text屬
性的屬性值則代表按鈕的文字。
• 而要產生控制項預設事件的事件程序，只需要在控制項上按兩下
即可，如下操作：
79
2.4 主窗格／原始檔分頁／
屬性窗格
80
2.4 主窗格／原始檔分頁／
屬性窗格
81
2.4 主窗格／原始檔分頁／
屬性窗格
– (3)屬性窗格與控制項的
所有事件：
• 一個控制項物件通常
不只有預設事件，想
要選取其他程序事件
，可以於屬性視窗中
，先選取物件，然後
切換到【事件】頁籤
，於事件處按兩下即
可產生該控制項的特
定事件處理程序，如
下圖：
82
2.4 主窗格／原始檔分頁／
屬性窗格
83
84
2.4 主窗格／原始檔分頁／
屬性窗格
– (4)只顯示程式：
• 由於【原始檔】分頁中，不但包含了用來撰寫程式的<script
runat="server">標籤，也包含了代表網頁介面的<html>標籤
• 如果您只想要看到撰寫程式的區域，則按下<html>旁的
號符號
將之緊縮即可，結果如下圖：（若要展開則再按一下 號符號即
可）
85
【註】本小節以上操作僅供練習，不用存檔。
2.5 本章回顧
• 在本章中，我們透過一個實例示範了如何建立一個ASP.NET
網站，在範例中，我們使用的模式如下規格，這將是本書後
面章節的主要使用方式：
– 使用【檔案系統】模式建立新網站
• 這樣做的好處在於，執行時可使用VWD內定的虛擬網頁伺服器（
ASP.NET程式開發伺服器）來執行而不用安裝IIS等伺服器。
– 使用【Visual Basic】語法，也就是VB2010。
– 使用【內嵌程式碼分割模型】（即單一檔案模型）建立網頁
• 也就是.aspx檔案中同時包含了VB格式的ASP程式碼與HTML標籤。
– 建立的範本為【Web Form】網頁表單，它將會在ASP.NET網頁中自動出現一
個代表Web Form表單的<form runat="server">標籤與一個<div>標籤。其餘控
制項應該包含在Web Form表單內。
– 較複雜的介面採用【絕對定位】方式配置控制項，如此較能隨心所欲移動控
制項的位置。
86
2.5 本章回顧
• 在範例中，我們學會了如何在Web Form中配置控制項，本章
只介紹了如何配置按鈕與標籤文字等兩種控制項，事實上，
大部分的控制項操作方式都大同小異。
• 除此之外，在本章中，我們也介紹了VWD的開發環境，包含
主窗格、方案總管窗格、屬性窗格以及工具箱等。
– 其中主窗格的『設計』分頁，可以透過拖曳工具箱的控制項來設計網
頁外觀
– 而『原始檔』分頁則是其對應的.aspx檔案內容
– 至於『分割』分頁則能同時觀看兩者。
87
2.5 本章回顧
• 在主窗格的『原始檔』分頁中，我們學會了如何建立控制項
物件的事件程序。
– 而除了撰寫事件程序的程式外，如果想要設定各控制項的屬性（例如
顯示文字、甚至是更改控制項名稱），最好不要在『原始檔』分頁中
設定，而是在屬性窗格中設定，如此VWD才能幫您自動完成其餘的同
步校正。
– 至於控制項的位置、大小等等的設定，則以在『設計』分頁透過拖拉
方式改變較為方便，而通常VWD會以style屬性搭配CSS來完成此一功
能。
•
在本章中，我們並未實際執行ASP.NET程式，也沒有撰寫任
何程式（事件程序），而在下一章中，我們將以一個完整的
實例，介紹ASP.NET網頁程式的實際開發流程。
88
本章習題
89