Transcript 開啟ASP.NET網頁
第2章 使用VWD建立 ASP.NET網頁 第2章 使用VWD建立ASP.NET網頁 2-1 2-2 2-3 2-4 2-5 2-6 2-7 建立第一頁ASP.NET網頁 Web Form表單的程式架構 設計檢視與程式碼編輯器的使用 ASP.NET網頁的基本編輯 水平線、項目符號與編號 新增圖片與超連結 使用表格建立版面配置 2-1 建立第一頁ASP.NET網頁 2-1-1 ASP.NET網頁的基本架構 2-1-2 在VWD建立第一頁ASP.NET網頁 2-1-1 ASP.NET網頁的基本架構說明 ASP.NET網頁的副檔名是.aspx，在實作上， 我們可以使用三種程式架構來建立ASP.NET 網頁： 內嵌於HTML標籤 內嵌程式碼分割 隱藏程式碼模型 2-1-1 ASP.NET網頁的基本架構內嵌於HTML標籤 ASP.NET網頁的架構是使用「<% %>」符 號，將程式碼內嵌於HTML標籤中，這種架 構屬於傳統ASP技術（Class ASP）的寫法， 其主要目的是與舊版ASP技術相容， ASP.NET並不建議使用此架構，如下所示： <% Balance = 1000 Interest = Balance * Rate %> 2-1-1 ASP.NET網頁的基本架構內嵌程式碼分割 內嵌程式碼分割（Inline Code Separation） 的程式架構主要分成兩大部分： 伺服端控制項的Web Form表單 事件處理程序 VWD是使用【Web Form】範本且取消勾選 【將程式碼置於個別檔案中】建立的 ASP.NET網頁，在本書主要使用此架構來建 立ASP.NET網頁。 2-1-1 ASP.NET網頁的基本架構隱藏程式碼模型 在ASP.NET 2.0版新增隱藏程式碼模型 （Code Behind Model），可以將前述內嵌 程式碼分割架構的控制項和事件處理程序 都獨立成檔案，換句話說，完整ASP.NET網 頁是由兩個檔案組成。 例如：Default.aspx和Default.aspx.vb，一個是 標籤使用介面；另一個是事件處理程序的類別 檔。 2-1-2 在VWD建立第一頁ASP.NET網頁 -事件驅動程式設計 在VWD建立ASP.NET網頁是使用事件驅動程 式設計，其執行順序需視使用者的操作而 定，也就是依觸發的事件來執行適當的處 理。 例如：當在網頁表單輸入註冊資料後，按【送 出】鈕，就會觸發Click事件，程式依此事件來 執行對應的事件處理程序，進行進一步的處理， 關於事件的進一步說明請參閱第4章。 2-1-2 在VWD建立第一頁ASP.NET網頁 -步驟一 步驟一：開啟ASP.NET網頁 在VWD建立ASP.NET網站 且加入內嵌程式碼分割的 ASP.NET網頁後，就可以 開啟ASP.NET網頁來新增 控制項，如下圖所示： 2-1-2 在VWD建立第一頁ASP.NET網頁 -步驟二 步驟二：在Web Form表單新增控制項 VWD編輯視窗的【設計】檢視是一種隨看即所得 的視覺化編輯工具，我們只需在「工具箱」視窗 選取控制項，就可以在Web Form表單上新增控制 項的元件，如下圖所示： 2-1-2 在VWD建立第一頁ASP.NET網頁 -步驟三 步驟三：設定控制項屬性 在Web Form表單新增控制項後，就可以在右下方 「屬性」視窗設定控制項屬性，如下圖所示： 【Label1】控制項 屬性值 屬性 2-1-2 在VWD建立第一頁ASP.NET網頁 -步驟四 步驟四：新增其他控制項 接著請重複步驟二和三新增TextBox和Button按鈕 控制項，並且設定相關屬性，如下圖所示： TextBox Button 2-1-2 在VWD建立第一頁ASP.NET網頁 -步驟五 步驟五：在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 2-1-2 在VWD建立第一頁ASP.NET網頁 -步驟六 步驟六：預覽ASP.NET網頁內容 在完成Web Form表單設計和輸入程式碼後，我們 就可以預覽ASP.NET網頁內容，請執行「檔案/在 瀏覽器中檢視」指令或右鍵快顯功能表的【在瀏 覽器中檢視】指令，可以看到瀏覽程式顯示的執 行結果。 2-2 Web Form表單的程式架構說明 Web Form表單可以建立跨平台和跨瀏覽程式Web 應用程式的輸入介面，其使用的技術如同在VB和 JBuilder等視覺化開發工具建立Windows應用程式 的「GUI」（Graphics User Interface）圖形使用 介面。 Web Form表單程式架構是一種事件驅動程式設計 模型（Event-driven Programming Model），它 是使用伺服端控制項建立Web Form表單的使用介 面。當產生事件時，建立對應的事件處理程序來 處理事件。 2-2 Web Form表單的程式架構程式架構(第一部分) <%@ Page Language="VB" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <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="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> 第一部分 </head> 2-2 Web Form表單的程式架構程式架構(第二部分) <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> 第二部分 2-2 Web Form表單的程式架構程式架構說明 第一部分：<script>標籤的事件處理程序或 函數，以此例是Button1_Click()事件處理程 序，VWD建立的事件處理程序預設使用 Protected存取修飾子。 第二部分：XHTML文件的<html>標籤，我 們是在<form runat="server">子標籤建立 Web Form表單，在<div>標籤中新增伺服 端控制項（Server Controls），以此例擁有 Label、TextBox和Button控制項。 2-2 Web Form表單的程式架構@ Page指引指令 @ Page是ASP.NET「指引」（Directive）指 令，Language屬性（Attribute）定義 ASP.NET程式使用的程式語言，以此例為VB， 表示使用Visual Basic 2010語言。 2-2 Web Form表單的程式架構<script>標籤 <script>標籤是位在DOCTYPE之後， <html>標籤之前，其內容是ASP.NET網頁 使用的程序與函數，和Web Form表單控制 項的事件處理程序，關於Visual Basic 2010 的程序與函數說明，請參閱第3章。 2-2 Web Form表單的程式架構<form>標籤 <form>標籤是位在<body>標籤中，因為指定 runat屬性值server，表示它是一個HTML控制項， 即HtmlForm控制項物件，如下所示： <form runat="server"> ……… </form> 上述<form>標籤的runat屬性，可以將XHTML表 單轉換成為ASP.NET的Web Form表單，伺服端控 制項就是置於<form>標籤之中。 2-2 Web Form表單的程式架構<div>標籤 <div>標籤是HTML 4.0x版的物件標籤，這 是一個空白和沒有任何樣式的容器標籤， 其主要目的是群組HTML標籤或控制項。 基於編排所需，VWD預設將伺服端控制項 的標籤程式碼置於此HTML標籤中。換句話 說，<div>標籤可以視為Web Form表單的 編輯區域（如同Windows應用程式的視窗 範圍），我們就是在此範圍內新增控制項。 2-2 Web Form表單的程式架構伺服端控制項 Web Form表單是由伺服端控制項（Server Controls）組成，它是一種伺服端可程式化 物件。在ASP.NET網頁可以使用HTML或 Web控制項來建立使用介面，進一步說明請 參閱第4章。 2-3 設計檢視與程式碼編輯器的使用 2-3-1 設計檢視的控制項定位方式 2-3-2 設定ASP.NET網頁的頁面起始位置 2-3-3 程式碼編輯器的基本使用 2-3-1 設計檢視的控制項定位方式預設定位方式 ASP.NET網頁本身是一份文件，其內容排列方式 類似記事本或Word編輯的文件，預設控制項的編 排方式是從左至右排列，如果超過文件寬度就自 動換行靠左對齊，然後從下一行繼續排列，如同 在Word中輸入一個個文字，如下圖所示： 2-3-1 設計檢視的控制項定位方式絕對定位方式 絕對定位方式可以任意調整控制項的位置，如同 在畫布上的指定位置繪出控制項，如下圖所示： 選【絕對】 2-3-1 設計檢視的控制項定位方式相對定位方式 相對定位方式是指其位置是相對於前一個控制項， 位置與前一個控制項相關聯，如果調整前一個控 制項的位置，也會同時自動調整後一個控制項的 位置。在「位置」對話方塊指定【相對】，就可 以指定控制項使用相對定位方式。 在前一個Label控制 項使用Enter鍵換行， 可以看到TextBox控 制項也自動往下移 2-3-2 設定ASP.NET網頁的頁面起始位 置 在ASP.NET網站開啟ASP.NET網頁時，預設使用 【原始檔】檢視，我們可以指定ASP.NET網頁的 頁面起始位置，改為一開啟就是【設計】檢視， 請執行「工具/選項」指令，可以看到「選項」對 話方塊。 在左邊選【一般】 頁面，然後在上方 選【設計檢視】， 按【確定】鈕 2-3-3 程式碼編輯器的基本使用切換程式碼檔案與輸入程式碼 請開啟兩頁ASP.NET網頁且選【原始檔】檢視， 在上方選檔名標籤可以切換編輯的程式碼檔案， 檔案名稱後如有星號，表示有更改但尚未儲存。 原始程式碼的標籤 是深紅色，屬性是 紅色，Visual Basic 關鍵字為藍色，註 解為綠色，其他程 式碼為黑色。 2-3-3 程式碼編輯器的基本使用輸入HTML或伺服端控制項標籤 在VWD程式碼編輯視窗輸入HTML或伺服端控制 項標籤，例如：表格的<table>標籤，只需輸入 「<」的部分標籤，就會顯示可能標籤的清單， 如下圖所示： 2-3-3 程式碼編輯器的基本使用智慧Visual Basic程式碼輸入 在程式碼編輯視窗輸入Visual Basic程式碼時， VWD提供智慧提示，可以在輸入部分程式碼內容 時，顯示程式語法可能的關鍵字清單、物件屬性、 方法和列舉常數清單等提示訊息。 2-4 ASP.NET網頁的基本編輯 2-4-1 2-4-2 2-4-3 2-4-4 2-4-5 輸入文字內容 調整文字內容的字型與尺寸 指定文字效果 文字內容的前景與背景色彩 標題或段落的文字編排 2-4-1 輸入文字內容 在VWD設計檢視的編輯區域輸入的文字內容，就 是ASP.NET網頁顯示的文字內容。VWD是將Enter 鍵視為換行分隔符號，如果文字內容需要換行， 也就是插入HTML的<br/>標籤，換句話說，輸入 Enter鍵即可替文字內容換行。 換行 2-4-2 調整文字內容的字型與尺寸 VWD支援HTML標籤文字尺寸的1~7級，它是使用 8~36點字來對應，級數愈大，表示尺寸愈大。如 果覺得字型不夠漂亮，在VWD也可以將文字重設 成電腦安裝的其他漂亮字型。 尺寸 字型 2-4-3 指定文字效果 在VWD的「格式」工具列提供按鈕來指定 常用的文字效果，如下所示： 粗體：顯示粗體字效果的<b>標籤，如果需要 強調的文字內容，就可以使用粗體字來增加文 字在段落中的明顯度。 斜體：顯示斜體字效果的<i>標籤，不過此效 果使用在英文字比中文字來的好。 底線：顯示底線字效果的<u>標籤，對於中文 來說，底線字強調的效果比斜體字好，不過可 能與藍色底線字的超連結文字產生混淆。 2-4-4 文字內容的前景與背景色彩 在VWD可以指定文字的前景和背景色彩， 我們只需選擇文字內容，再套用所需的色 彩，就可以輕鬆更改文字顯示的色彩，和 套用的背景色彩。 2-4-5 標題或段落的文字編排 在VWD的區塊格式提供現成HTML標籤的多種樣 式，我們可以在段落直接套用現成樣式，也就是 套用HTML標籤，其中標題1~6的樣式就是HTML 標籤<h1>~<h6>，可以建立主標題、次標題和 小標題的段落樣式。 至於HTML標籤<p>的段落樣式是類似Enter鍵的 另一種段落編排，不過，其段落間距比較大。 <p> <h1>~<h6> 2-5 水平線、項目符號與編號 2-5-1 項目符號與編號 2-5-2 插入水平線 2-5-1 項目符號與編號 ASP.NET網頁的項目符號與編號就是一種清 單項目，可以將文字內容以項目方式來一 一的列出。主要分為兩種，如下所示： 項目符號：項目符號的每一個項目都是使用符 號●、□、◇或小圖示等開頭，屬於一種沒有 順序的項目。 編號：如同項目符號，改為使用數字、英文和 羅馬字母開頭的項目，在項目間擁有前後順序。 項目符號 2-5-2 插入水平線 水平線在網頁內容中可以分隔標題文字、段落和 圖片，最常使用在標題文字和內文段落之間，可 以提供文件更佳的編排效果。 在網頁文字內容的段落編排上，我們可以適度插 入水平線來美化文件的編排，這就是HTML的 <hr/>標籤。 2-6 新增圖片與超連結 2-6-1 插入網頁圖片 2-6-2 建立超連結 2-6-1 插入網頁圖片 如果擁有網頁支援格式的現成圖檔，我們 就可以在VWD將這些圖片檔案插入ASP.NET 網頁中。 2-6-2 建立超連結 網頁的超連結可以使用文字或圖片作為媒介，換 句話說，超連結的連接點可以是文字內容或圖片， 如果使用文字內容稱為超文件，如果使用圖片或 視訊元素稱為超媒體文件。 在網頁中的文字超連結是最常使用的超連結媒介， 預設是藍色底線字的文字內容，當滑鼠移到文字 超連結上時，游標會成為「手」形。 2-7 使用表格建立版面配置 2-7-1 插入表格 2-7-2 編輯表格 2-7-1 插入表格 表格（Tables）是一種資 料排列方式，可以將資 料分類和系統化處理， 在ASP.NET網頁使用表格 的主要目的是用來進行 版面配置，對齊和編排 多個控制項。 在VWD的「表格」功能 表提供建立和編輯表格 指令，只需輸入表格列 和欄數，就可以建立網 頁表格。 2-7-2 編輯表格 在建立網頁表格後，「表格」功能表提供 進一步編輯表格內容的指令。例如：在表 格插入或刪除列、欄或儲存格，或是合併、 分割、平均分配列高或欄寬等。 選取表格、列、欄和儲存格 插入列、欄和儲存格 刪除表格、列、欄和儲存格 表格的修改