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