第2章VWD開發環境簡介
Download
Report
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