Microsoft PowerPoint - ASP_NET_02

Size: px

Start display at page:

Download "Microsoft PowerPoint - ASP_NET_02"

词蓬
5 years ago
Views:

1 第 2 章使用 VWD 建立 ASP.NET 網頁

2 大綱建立第一頁 ASP.NET 網頁 Web Form 表單的程式架構設計檢視與程式碼編輯器的使用 ASP.NET 網頁的基本編輯水平線項目符號與編號新增圖片與超連結使用表格建立版面配置

3 建立第一頁 ASP.NET 網頁 ASP.NET 網頁的基本架構在 VWD 建立第一頁 ASP.NET 網頁

4 ASP.NET 網頁的基本架構 ASP.NET 網頁的副檔名是.aspx, 在實作上, 我們可以使用三種程式架構來建立 ASP.NET 網頁 : 內嵌於 HTML 標籤內嵌程式碼分割隱藏程式碼模型

5 內嵌於 HTML 標籤 ASP.NET 網頁的架構是使用 <% %> 符號, 將程式碼內嵌於 HTML 標籤中, 這種架構屬於傳統 ASP 技術 (Class ASP) 的寫法, 其主要目的是與舊版 ASP 技術相容,ASP.NET 並不建議使用此架構, 如下所示 : <% Balance = 1000 Interest = Balance * Rate %>

6 內嵌程式碼分割內嵌程式碼分割 (Inline Code Separation) 的程式架構主要分成兩大部分 : 伺服端控制項的 Web Form 表單事件處理程序 VWD 是使用 Web Form 範本且取消勾選將程式碼置於個別檔案中建立的 ASP.NET 網頁, 在本書主要使用此架構來建立 ASP.NET 網頁

7 隱藏程式碼模型在 ASP.NET 2.0 版新增隱藏程式碼模型 (Code Behind Model), 可以將前述內嵌程式碼分割架構的控制項和事件處理程序都獨立成檔案, 換句話說, 完整 ASP.NET 網頁是由兩個檔案組成例如 :Default.aspx 和 Default.aspx.vb, 一個是標籤使用介面 ; 另一個是事件處理程序的類別檔

8 事件驅動程式設計在 VWD 建立 ASP.NET 網頁是使用事件驅動程式設計, 其執行順序需視使用者的操作而定, 也就是依觸發的事件來執行適當的處理例如 : 當在網頁表單輸入註冊資料後, 按送出鈕, 就會觸發 Click 事件, 程式依此事件來執行對應的事件處理程序, 進行進一步的處理

9 在 VWD 建立第一頁 ASP.NET 網頁 1 步驟一 : 開啟 ASP.NET 網頁在 VWD 建立 ASP.NET 網站且加入內嵌程式碼分割的 ASP.NET 網頁後, 就可以開啟 ASP.NET 網頁來新增控制項, 如下圖所示 :

10 在 VWD 建立第一頁 ASP.NET 網頁 2 步驟二 : 在 Web Form 表單新增控制項 VWD 編輯視窗的設計檢視是一種隨看即所得的視覺化編輯工具, 我們只需在工具箱視窗選取控制項, 就可以在 Web Form 表單上新增控制項的元件, 如下圖所示 :

11 在 VWD 建立第一頁 ASP.NET 網頁 3 步驟三 : 設定控制項屬性在 Web Form 表單新增控制項後, 就可以在右下方屬性視窗設定控制項屬性, 如下圖所示 : Label1 控制項屬性值屬性

12 在 VWD 建立第一頁 ASP.NET 網頁 4 步驟四 : 新增其他控制項接著請重複步驟二和三新增 TextBox 和 Button 按鈕控制項, 並且設定相關屬性, 如下圖所示 : TextBox Button

13 在 VWD 建立第一頁 ASP.NET 網頁 5 步驟五 : 在 Button 控制項新增事件處理程序在 Web Form 表單共新增 Label1 TextBox1 和 Button1 三個控制項接著新增按鈕控制項的事件處理程序, 如下所示 : 01: Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) 02: Dim temp As String 03: temp = Label1.Text 04: Label1.Text = TextBox1.Text 05: TextBox1.Text = temp 06: End Sub

14 在 VWD 建立第一頁 ASP.NET 網頁 6 步驟六 : 預覽 ASP.NET 網頁內容在完成 Web Form 表單設計和輸入程式碼後, 我們就可以預覽 ASP.NET 網頁內容, 請執行檔案 / 在瀏覽器中檢視指令或右鍵快顯功能表的在瀏覽器中檢視指令, 可以看到瀏覽程式顯示的執行結果

15 Web Form 表單的程式架構 Web Form 表單可以建立跨平台和跨瀏覽程式 Web 應用程式的輸入介面, 其使用的技術如同在 VB 和 JBuilder 等視覺化開發工具建立 Windows 應用程式的 GUI (Graphics User Interface) 圖形使用介面 Web Form 表單程式架構是一種事件驅動程式設計模型 (Event-driven Programming Model), 它是使用伺服端控制項建立 Web Form 表單的使用介面當產生事件時, 建立對應的事件處理程序來處理事件

16 程式架構 1 <%@ Page Language="VB" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <script runat="server"> Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Dim temp As String temp = Label1.Text Label1.Text = TextBox1.Text TextBox1.Text = temp End Sub </script> <html xmlns=" <head runat="server"> <title></title> </head> 第一部分

17 程式架構 2 <body> <form id="form1" runat="server"> <div> <asp:label ID="Label1" runat="server" Font-Bold="True" Font-Names=" 微軟正黑體 " Font-Size="Larger" Text=" 第一頁 ASP.NET 網頁 "></asp:label> <br /> <br /> <asp:textbox ID="TextBox1" runat="server" Height="46px" Width="217px"></asp:TextBox> <asp:button ID="Button1" runat="server" Height="42px" onclick="button1_click" Text=" 交換 " Width="83px" /> </div> </form> </body> </html> 第二部分

18 程式架構說明第一部分 :<script> 標籤的事件處理程序或函數, 以此例是 Button1_Click() 事件處理程序, VWD 建立的事件處理程序預設使用 Protected 存取修飾子第二部分 :XHTML 文件的 <html> 標籤, 我們是在 <form runat="server"> 子標籤建立 Web Form 表單, 在 <div> 標籤中新增伺服端控制項 (Server Controls), 以此例擁有 Label TextBox 和 Button 控制項

19 @ Page Page 是 ASP.NET 指引 (Directive) 指令,Language 屬性 (Attribute) 定義 ASP.NET 程式使用的程式語言, 以此例為 VB, 表示使用 Visual Basic 2010 語言

20 <script> 標籤 <script> 標籤是位在 DOCTYPE 之後,<html> 標籤之前, 其內容是 ASP.NET 網頁使用的程序與函數, 和 Web Form 表單控制項的事件處理程序

21 <form> 標籤 <form> 標籤是位在 <body> 標籤中, 因為指定 runat 屬性值 server, 表示它是一個 HTML 控制項, 即 HtmlForm 控制項物件, 如下所示 : <form runat="server"> </form> 上述 <form> 標籤的 runat 屬性, 可以將 XHTML 表單轉換成為 ASP.NET 的 Web Form 表單, 伺服端控制項就是置於 <form> 標籤之中

22 <div> 標籤 <div> 標籤是 HTML 4.0x 版的物件標籤, 這是一個空白和沒有任何樣式的容器標籤, 其主要目的是群組 HTML 標籤或控制項基於編排所需,VWD 預設將伺服端控制項的標籤程式碼置於此 HTML 標籤中換句話說, <div> 標籤可以視為 Web Form 表單的編輯區域 ( 如同 Windows 應用程式的視窗範圍 ), 我們就是在此範圍內新增控制項

23 伺服端控制項 Web Form 表單是由伺服端控制項 (Server Controls) 組成, 它是一種伺服端可程式化物件在 ASP.NET 網頁可以使用 HTML 或 Web 控制項來建立使用介面

24 設計檢視與程式碼編輯器的使用設計檢視的控制項定位方式設定 ASP.NET 網頁的頁面起始位置程式碼編輯器的基本使用

25 預設定位方式 ASP.NET 網頁本身是一份文件, 其內容排列方式類似記事本或 Word 編輯的文件, 預設控制項的編排方式是從左至右排列, 如果超過文件寬度就自動換行靠左對齊, 然後從下一行繼續排列, 如同在 Word 中輸入一個個文字, 如下圖所示 :

26 絕對定位方式絕對定位方式可以任意調整控制項的位置, 如同在畫布上的指定位置繪出控制項, 如下圖所示 : 選絕對絕對

27 相對定位方式相對定位方式是指其位置是相對於前一個控制項, 位置與前一個控制項相關聯, 如果調整前一個控制項的位置, 也會同時自動調整後一個控制項的位置在位置對話方塊指定相對, 就可以指定控制項使用相對定位方式在前一個 Label 控制項使用 Enter 鍵換行, 可以看到 TextBox 控制項也自動往下移

28 設定 ASP.NET 網頁的頁面起始位置在 ASP.NET 網站開啟 ASP.NET 網頁時, 預設使用原始檔檢視, 我們可以指定 ASP.NET 網頁的頁面起始位置, 改為一開啟就是設計檢視, 請執行工具 / 選項指令, 可以看到選項對話方塊在左邊選一般一般頁面, 然後在上方選設計檢視設計檢視, 按確定確定鈕

29 切換程式碼檔案與輸入程式碼請開啟兩頁 ASP.NET 網頁且選原始檔檢視, 在上方選檔名標籤可以切換編輯的程式碼檔案, 檔案名稱後如有星號, 表示有更改但尚未儲存原始程式碼的標籤是深紅色, 屬性是紅色,Visual Basic 關鍵字為藍色, 註解為綠色, 其他程式碼為黑色

30 輸入 HTML 或伺服端控制項標籤在 VWD 程式碼編輯視窗輸入 HTML 或伺服端控制項標籤, 例如 : 表格的 <table> 標籤, 只需輸入 < 的部分標籤, 就會顯示可能標籤的清單, 如下圖所示 :

31 智慧 Visual Basic 程式碼輸入在程式碼編輯視窗輸入 Visual Basic 程式碼時,VWD 提供智慧提示, 可以在輸入部分程式碼內容時, 顯示程式語法可能的關鍵字清單物件屬性方法和列舉常數清單等提示訊息

32 ASP.NET 網頁的基本編輯輸入文字內容調整文字內容的字型與尺寸指定文字效果文字內容的前景與背景色彩標題或段落的文字編排

33 輸入文字內容在 VWD 設計檢視的編輯區域輸入的文字內容, 就是 ASP.NET 網頁顯示的文字內容 VWD 是將 Enter 鍵視為換行分隔符號, 如果文字內容需要換行, 也就是插入 HTML 的 <br/> 標籤, 換句話說, 輸入 Enter 鍵即可替文字內容換行換行

34 調整文字內容的字型與尺寸 VWD 支援 HTML 標籤文字尺寸的 1~7 級, 它是使用 8~36 點字來對應, 級數愈大, 表示尺寸愈大如果覺得字型不夠漂亮, 在 VWD 也可以將文字重設成電腦安裝的其他漂亮字型尺寸字型

35 指定文字效果在 VWD 的格式工具列提供按鈕來指定常用的文字效果, 如下所示 : 粗體 : 顯示粗體字效果的 <b> 標籤, 如果需要強調的文字內容, 就可以使用粗體字來增加文字在段落中的明顯度斜體 : 顯示斜體字效果的 <i> 標籤, 不過此效果使用在英文字比中文字來的好底線 : 顯示底線字效果的 <u> 標籤, 對於中文來說, 底線字強調的效果比斜體字好, 不過可能與藍色底線字的超連結文字產生混淆

36 文字內容的前景與背景色彩在 VWD 可以指定文字的前景和背景色彩, 我們只需選擇文字內容, 再套用所需的色彩, 就可以輕鬆更改文字顯示的色彩, 和套用的背景色彩

37 標題或段落的文字編排在 VWD 的區塊格式提供現成 HTML 標籤的多種樣式, 我們可以在段落直接套用現成樣式, 也就是套用 HTML 標籤, 其中標題 1~6 的樣式就是 HTML 標籤 <h1>~<h6>, 可以建立主標題次標題和小標題的段落樣式至於 HTML 標籤 <p> 的段落樣式是類似 Enter 鍵的另一種段落編排, 不過, 其段落間距比較大 <p> <h1>~<h6>

38 水平線項目符號與編號項目符號與編號插入水平線

39 項目符號與編號 ASP.NET 網頁的項目符號與編號就是一種清單項目, 可以將文字內容以項目方式來一一的列出主要分為兩種, 如下所示 : 項目符號 : 項目符號的每一個項目都是使用符號或小圖示等開頭, 屬於一種沒有順序的項目編號 : 如同項目符號, 改為使用數字英文和羅馬字母開頭的項目, 在項目間擁有前後順序項目符號

40 插入水平線水平線在網頁內容中可以分隔標題文字段落和圖片, 最常使用在標題文字和內文段落之間, 可以提供文件更佳的編排效果在網頁文字內容的段落編排上, 我們可以適度插入水平線來美化文件的編排, 這就是 HTML 的 <hr/> 標籤

41 新增圖片與超連結插入網頁圖片建立超連結

42 插入網頁圖片如果擁有網頁支援格式的現成圖檔, 我們就可以在 VWD 將這些圖片檔案插入 ASP.NET 網頁中

43 建立超連結網頁的超連結可以使用文字或圖片作為媒介, 換句話說, 超連結的連接點可以是文字內容或圖片, 如果使用文字內容稱為超文件, 如果使用圖片或視訊元素稱為超媒體文件在網頁中的文字超連結是最常使用的超連結媒介, 預設是藍色底線字的文字內容, 當滑鼠移到文字超連結上時, 游標會成為手形

44 使用表格建立版面配置插入表格編輯表格

45 插入表格表格 (Tables) 是一種資料排列方式, 可以將資料分類和系統化處理, 在 ASP.NET 網頁使用表格的主要目的是用來進行版面配置, 對齊和編排多個控制項在 VWD 的表格功能表提供建立和編輯表格指令, 只需輸入表格列和欄數, 就可以建立網頁表格

46 編輯表格在建立網頁表格後, 表格功能表提供進一步編輯表格內容的指令例如 : 在表格插入或刪除列欄或儲存格, 或是合併分割平均分配列高或欄寬等選取表格列欄和儲存格插入列欄和儲存格刪除表格列欄和儲存格表格的修改

ASP.NET基礎與開發環境的建立

ASP.NET基礎與開發環境的建立第 1 章 ASP.NET 基礎與開發環境的建立第 1 章 ASP.NET 基礎與開發環境的建立 1-1 Web 應用程式的基礎 1-2 網頁設計技術 1-3 ASP.NET 與.NET Framework 1-4 建立 ASP.NET 開發環境 1-5 VS Express for Web 的基本使用 1-6 建立第一頁 ASP.NET 網頁 http://www1.chihlee.edu.tw/teachers/chienhua/