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

第第 22 章章使用使用 VWDVWD建立建立ASP.NETASP.NET網頁網頁

第第 22 章章使用使用 VWDVWD建立建立ASP.NETASP.NET網頁網頁

2-1 2-1 建立建立 ASP.NETASP.NET 網頁網頁 2-2 Web Form2-2 Web Form 表單的程式架構表單的程式架構 2-3 2-3 設計檢視與程式碼編輯器的使用設計檢視與程式碼編輯器的使用 2-4 2-4 網頁內容的基本編輯網頁內容的基本編輯 2-5 2-5 水平線、項目符號與編號水平線、項目符號與編號 2-6 2-6 新增圖片與超連結新增圖片與超連結 2-7 2-7 表格的版面配置表格的版面配置

2-1 2-1 建立建立 ASP.NETASP.NET 網頁網頁 2-1-1 ASP.NET2-1-1 ASP.NET 網頁的基本架構網頁的基本架構 2-1-2 2-1-2 在在 VWDVWD 建立建立 ASP.NETASP.NET 網頁網頁

2-1-1 ASP.NET2-1-1 ASP.NET 網頁的基本架構網頁的基本架構 --內嵌於內嵌於 HTMLHTML 標籤標籤

ASP.NETASP.NET 網頁的架構是使用「網頁的架構是使用「 <% %><% %> 」符號，」符號，將程式碼內嵌於將程式碼內嵌於 HTMLHTML 標籤中，這種架構屬於傳標籤中，這種架構屬於傳統統 ASPASP 技術（技術（ Class ASPClass ASP ）的寫法，其主要目）的寫法，其主要目的是與舊版的是與舊版 ASPASP 技術相容，如下所示：技術相容，如下所示：<% <% int balance = 1000;int balance = 1000;interest = balance * rate;interest = balance * rate;%>%>

上述「上述「 <% %><% %> 」符號間就是」符號間就是 Visual C# 2008Visual C# 2008 程程式碼片斷，在本書的範例網站並沒有使用此架構，式碼片斷，在本書的範例網站並沒有使用此架構，進一步說明請參閱傳統進一步說明請參閱傳統 ASPASP 或舊版或舊版 ASP.NETASP.NET 的的相關書籍。相關書籍。

2-1-1 ASP.NET2-1-1 ASP.NET 網頁的基本架構網頁的基本架構 --內嵌程式碼分割內嵌程式碼分割

內嵌程式碼分割（內嵌程式碼分割（ Inline Code SeparationInline Code Separation ）的程）的程式架構主要分成兩大部分：伺服端控制項的式架構主要分成兩大部分：伺服端控制項的 Web Web FormForm 表單和事件處理程序。表單和事件處理程序。 VWDVWD 內建內建【【 Web Web FormForm 】】範本建立的範本建立的 ASP.NETASP.NET 網頁就屬於此架構，網頁就屬於此架構，在本書主要就是使用此架構來建立在本書主要就是使用此架構來建立 ASP.NETASP.NET 網網頁。頁。

雖然事件處理程序和伺服端控制項的標籤程式碼雖然事件處理程序和伺服端控制項的標籤程式碼在同一個檔案，但是分割成不同區塊，事件處理在同一個檔案，但是分割成不同區塊，事件處理程序是在程序是在 <script><script> 標籤，控制項位在標籤，控制項位在 <body><body> 標標籤的籤的 <form><form> 子標籤。詳細的架構說明請參閱第子標籤。詳細的架構說明請參閱第2-22-2 節。節。

2-1-1 ASP.NET2-1-1 ASP.NET 網頁的基本架構網頁的基本架構 --隱藏程式碼模型隱藏程式碼模型

在在 ASP.NET 2.0ASP.NET 2.0 版時新增隱藏程式碼模型版時新增隱藏程式碼模型（（ Code Behind ModelCode Behind Model ），可以將前述內），可以將前述內嵌程式碼分割架構的控制項和事件處理程嵌程式碼分割架構的控制項和事件處理程序都獨立成檔案，換句話說，完整的序都獨立成檔案，換句話說，完整的ASP.NETASP.NET 網頁是由兩個檔案所組成。網頁是由兩個檔案所組成。

例如：在第例如：在第 1-51-5 節建立網站產生的節建立網站產生的Default.aspxDefault.aspx和和 Default.aspx.csDefault.aspx.cs 兩個檔案，兩個檔案，Default.aspxDefault.aspx 擁有控制項；擁有控制項； Default.aspx.csDefault.aspx.cs是事件處理程序的類別檔，這就是隱藏程是事件處理程序的類別檔，這就是隱藏程式碼模型。式碼模型。

2-1-2 2-1-2 在在 VWDVWD 建立建立 ASP.NETASP.NET 網網頁頁 --說明說明

在在 VWDVWD 新增新增 ASP.NETASP.NET 網站後，我們就可網站後，我們就可以建立兩種以建立兩種 WebWeb 網頁，其說明如下所示：網頁，其說明如下所示： Web FormsWeb Forms 表單：這是包含表單：這是包含 HTMLHTML 標籤和伺標籤和伺

服端控制項的網頁，即服端控制項的網頁，即 ASP.NETASP.NET 網頁，其副網頁，其副檔名為檔名為 .aspx.aspx 。。

HTMLHTML 網頁：內含網頁：內含 HTMLHTML 標籤的標籤的 WebWeb 網頁，網頁，並不含任何並不含任何 ASP.NETASP.NET 控制項，其副檔名控制項，其副檔名是是 .htm.htm 。。

2-1-2 2-1-2 在在 VWDVWD 建立建立 ASP.NETASP.NET 網網頁頁 --

事件驅動程式設計事件驅動程式設計在在 VWDVWD 建立的建立的 ASP.NETASP.NET 網頁是使用事件網頁是使用事件

驅動程式設計（驅動程式設計（ Event-driven Event-driven ProgrammingProgramming ），其執行順序需視使用者），其執行順序需視使用者的操作而定，也就是依觸發的事件來執行的操作而定，也就是依觸發的事件來執行適當的處理。適當的處理。

例如：當我們在網頁的表單輸入註冊資料例如：當我們在網頁的表單輸入註冊資料後，按後，按【【送出送出】】鈕，就會觸發鈕，就會觸發 ClickClick 事件，事件，程式依此事件來執行對應的事件處理程序，程式依此事件來執行對應的事件處理程序，進行進一步的處理，關於事件的說明請參進行進一步的處理，關於事件的說明請參閱第閱第 44 章。章。


步驟一步驟一步驟一：新增與刪除步驟一：新增與刪除 ASP.NETASP.NET 網頁網頁在在 VWDVWD 新增新增 ASP.NETASP.NET 網站後，預設使用隱藏程網站後，預設使用隱藏程

式碼模型建立名為式碼模型建立名為 Default.aspxDefault.aspx的的 ASP.NETASP.NET 網網頁，所以我們需先刪除此網頁，然後建立使用內頁，所以我們需先刪除此網頁，然後建立使用內嵌程式碼分割的嵌程式碼分割的 ASP.NETASP.NET 網頁，如下圖所示：網頁，如下圖所示：

取消勾選【將程式碼置於個別檔案中】


步驟二步驟二步驟二：在步驟二：在 Web FormWeb Form 表單新增控制項表單新增控制項 VWDVWD 編輯視窗的編輯視窗的【【設計設計】】檢視是一種隨看即所得檢視是一種隨看即所得

的視覺化編輯工具，我們只需在「工具箱」視窗的視覺化編輯工具，我們只需在「工具箱」視窗選取控制項，就可以在選取控制項，就可以在 Web FormWeb Form 表單上新增控表單上新增控制項的元件，如下圖所示：制項的元件，如下圖所示：


步驟三步驟三步驟三：設定控制項屬性步驟三：設定控制項屬性在在 Web FormWeb Form 表單新增控制項後，就可以在右下表單新增控制項後，就可以在右下

方「屬性」視窗設定控制項屬性方「屬性」視窗設定控制項屬性，，如下圖所示：如下圖所示：

【 Label1】控制項

屬性

屬性值


步驟四步驟四步驟四：新增其他控制項步驟四：新增其他控制項接著請重複步驟二和三新增接著請重複步驟二和三新增 TextBoxTextBox和和 ButtonButton 按按

鈕控制項，並且設定相關屬性，如下圖所示：鈕控制項，並且設定相關屬性，如下圖所示：TextBo

x

Button


步驟五步驟五步驟五：在步驟五：在 ButtonButton 控制項新增事件處理程序控制項新增事件處理程序目前在目前在 Web FormWeb Form 表單共新增表單共新增 Label1Label1、、 TextBox1TextBox1和和

Button1Button1 三個控制項。接著，就可以新增按鈕控制項的三個控制項。接著，就可以新增按鈕控制項的事件處理程序，如下所示：事件處理程序，如下所示：01: protected void Button1_Click(object sender, 01: protected void Button1_Click(object sender,

EventArgs e)EventArgs e)02: {02: {03: String temp = Label1.Text;03: String temp = Label1.Text;04: Label1.Text = TextBox1.Text;04: Label1.Text = TextBox1.Text;05: TextBox1.Text = temp;05: TextBox1.Text = temp;06: }06: }


步驟六步驟六步驟六：預覽步驟六：預覽 ASP.NETASP.NET 網頁內容網頁內容在完成在完成 Web FormWeb Form 表單設計和輸入程式碼後，我表單設計和輸入程式碼後，我

們就可以預覽們就可以預覽 ASP.NETASP.NET 網頁內容，請執行「檔網頁內容，請執行「檔案案 // 在瀏覽器中檢視」指令或右鍵快顯功能表的在瀏覽器中檢視」指令或右鍵快顯功能表的【【在瀏覽器中檢視在瀏覽器中檢視】】指令，可以看到瀏覽程式顯指令，可以看到瀏覽程式顯示的執行結果。示的執行結果。

2-2 Web Form2-2 Web Form 表單的程式架構表單的程式架構 --說明說明

Web FormWeb Form 表單可以建立跨平台和跨瀏覽程表單可以建立跨平台和跨瀏覽程式式 WebWeb 應用程式的輸入介面，其使用的技應用程式的輸入介面，其使用的技術如同在術如同在 VBVB、、 JBuilderJBuilder 等視覺化開發工具等視覺化開發工具建立建立 WindowsWindows 應用程式的「應用程式的「 GUIGUI 」」（（ Graphics User InterfaceGraphics User Interface ）圖形使用介）圖形使用介面。面。

Web FormWeb Form 表單程式架構是一種事件驅動程表單程式架構是一種事件驅動程式設計模型（式設計模型（ Event-driven Programming Event-driven Programming ModelModel ），它是使用伺服端控制項建立），它是使用伺服端控制項建立Web FormWeb Form 表單的使用介面。當產生事件時，表單的使用介面。當產生事件時，建立對應的事件處理程序來處理事件。建立對應的事件處理程序來處理事件。

2-2 Web Form2-2 Web Form 表單的程式架構表單的程式架構 --程式架構程式架構 11

<%@ Page Language="C#" %><%@ Page Language="C#" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server"><script runat="server"> protected void Button1_Click(object sender, EventArgs e)protected void Button1_Click(object sender, EventArgs e) {{ String temp = Label1.Text;String temp = Label1.Text; Label1.Text = TextBox1.Text;Label1.Text = TextBox1.Text; TextBox1.Text = temp;TextBox1.Text = temp; }}</script></script><html xmlns="http://www.w3.org/1999/xhtml"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"><head runat="server"> <title><title> 未命名頁面未命名頁面 </title></title></head></head> 第一部分

2-2 Web Form2-2 Web Form 表單的程式架構表單的程式架構 --程式架構程式架構 22

<body><body> <form id="form1" runat="server"><form id="form1" runat="server"> <div><div> <asp:Label ID="Label1" runat="server" <asp:Label ID="Label1" runat="server" Font-Size="Larger" Text="ASP.NETFont-Size="Larger" Text="ASP.NET 網頁設計網頁設計 ">"> </asp:Label></asp:Label> <br /><br /><br /><br /> <asp:TextBox ID="TextBox1" runat="server" <asp:TextBox ID="TextBox1" runat="server" Height="30px" Width="199px"></asp:TextBox>Height="30px" Width="199px"></asp:TextBox> <asp:Button ID="Button1" runat="server" <asp:Button ID="Button1" runat="server" Height="41px" onclick="Button1_Click" Height="41px" onclick="Button1_Click" Text="Text=" 交換交換 " Width="82px" />" Width="82px" /> </div></div> </form></form></body></body></html></html>

第二部分

2-2 Web Form2-2 Web Form 表單的程式架構表單的程式架構 --程式架構說明程式架構說明

VWDVWD的的 Web FormWeb Form 範本程式架構，主要分範本程式架構，主要分成兩個部分，如下所示：成兩個部分，如下所示：第一部分：第一部分： <script><script> 標籤的事件處理程序或函標籤的事件處理程序或函數，以此例是數，以此例是 Button1_Click()Button1_Click() 事件處理程事件處理程序，序， VWDVWD 建立的事件處理程序預設使用建立的事件處理程序預設使用ProtectedProtected 存取修飾子。存取修飾子。

第二部分：第二部分： XHTMLXHTML文件的文件的 <html><html> 標籤，我們標籤，我們是在是在 <form runat="server"><form runat="server"> 子標籤建立子標籤建立 Web Web FormForm 表單，在表單，在 <div><div> 標籤中新增伺服端控制項標籤中新增伺服端控制項（（ Server ControlsServer Controls ），以此例擁有），以此例擁有LabelLabel、、 TextBoxTextBox和和 ButtonButton 控制項。控制項。

2-2 Web Form2-2 Web Form 表單的程式架構表單的程式架構 -- @ Page @ Page 指引指令指引指令

@ Page@ Page是是 ASP.NETASP.NET 「指引」（「指引」（ DirectivDirectivee ）指令，）指令，提供多種屬性來定義提供多種屬性來定義 ASP.NETASP.NET網頁。網頁。

LanguageLanguage屬性（屬性（ AttributeAttribute）定義）定義ASP.NETASP.NET網頁使用的程式語言，網頁使用的程式語言， C#C#就是就是指指 Visual C# 2008Visual C# 2008語言。語言。

2-2 Web Form2-2 Web Form 表單的程式架構表單的程式架構 --<script><script> 標籤標籤

<script><script>標籤是位在標籤是位在 DOCTYPEDOCTYPE之後；之後；<html><html>標籤之前，其內容是標籤之前，其內容是 ASP.NETASP.NET網網頁使用的頁使用的 C#C#函數，和函數，和 Web FormWeb Form表單控制表單控制項的事件處理程序，關於函數與事件處理項的事件處理程序，關於函數與事件處理程序的進一步說明，請參閱第程序的進一步說明，請參閱第 33和和 44章。章。

2-2 Web Form2-2 Web Form 表單的程式架構表單的程式架構 --<form><form> 標籤標籤

<form><form> 標籤是位在標籤是位在 <body><body> 標籤中，因為標籤中，因為指定指定 runatrunat 屬性值屬性值 serverserver ，表示它是一個，表示它是一個HTMLHTML 控制項，如下所示：控制項，如下所示：<form runat="server"><form runat="server">

……… ………

</form></form>

在「屬性」視窗上方選【DOCUMENT】文件物件後，就可以指定 Title屬性的瀏覽程式上方標題文字

2-2 Web Form2-2 Web Form 表單的程式架構表單的程式架構 --<div><div> 標籤標籤

<div><div> 標籤是標籤是 HTML 4.0xHTML 4.0x 版的物件標籤，版的物件標籤，這是一個空白、沒有任何樣式的容器標籤，這是一個空白、沒有任何樣式的容器標籤，其主要目的是用來群組其主要目的是用來群組 HTMLHTML 標籤或控制標籤或控制項。項。

基於編排所需，基於編排所需， VWDVWD 預設將伺服端控制項預設將伺服端控制項的標籤程式碼置於此的標籤程式碼置於此 HTMLHTML 標籤中。換句標籤中。換句話說，話說， <div><div> 標籤可以視為標籤可以視為 Web FormWeb Form 表表單的編輯區域（如同單的編輯區域（如同 WindowsWindows 應用程式的應用程式的視窗範圍），換句話說，我們就是在此範視窗範圍），換句話說，我們就是在此範圍內新增控制項。圍內新增控制項。

2-2 Web Form2-2 Web Form 表單的程式架構表單的程式架構 --伺服端控制項伺服端控制項

Web FormWeb Form 表單是由伺服端控制項表單是由伺服端控制項（（ Server ControlsServer Controls ）組成，它是一種伺服）組成，它是一種伺服端可程式化物件。端可程式化物件。

在在 ASP.NETASP.NET 網頁可以使用網頁可以使用 HTMLHTML或或 WebWeb控制項來建立使用介面，進一步說明請參控制項來建立使用介面，進一步說明請參閱第閱第 44 章。章。

2-3 2-3 設計檢視與程式碼編輯器的使設計檢視與程式碼編輯器的使用用

2-3-1 2-3-1 設計檢視的控制項定位設計檢視的控制項定位 2-3-2 2-3-2 指定指定 ASP.NETASP.NET 網頁的頁面起始位置網頁的頁面起始位置 2-3-3 2-3-3 程式碼編輯器的使用程式碼編輯器的使用

2-3-1 2-3-1 設計檢視的控制項定位設計檢視的控制項定位 --預設定位方式預設定位方式

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

2-3-1 2-3-1 設計檢視的控制項定位設計檢視的控制項定位 --絕對定位方式絕對定位方式

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

[ 格式 /位置 ] 選【絕對】

2-3-1 2-3-1 設計檢視的控制項定位設計檢視的控制項定位 --相對定位方式相對定位方式

相對定位方式是指其位置是相對於前一個控制項，相對定位方式是指其位置是相對於前一個控制項，位置與前一個控制項相關連，換句話說，如果調位置與前一個控制項相關連，換句話說，如果調整前一個控制項的位置，也會同時自動調整後一整前一個控制項的位置，也會同時自動調整後一個控制項的位置，以維持兩個控制項相對的間距。個控制項的位置，以維持兩個控制項相對的間距。

在前一個 Label控制項使用 Enter鍵換行，可以看到TextBox控制項也自動往下移

2-3-2 2-3-2 指定指定 ASP.NETASP.NET 網頁的頁面起網頁的頁面起始位置始位置

在在 ASP.NETASP.NET 網站開啟網站開啟 ASP.NETASP.NET 網頁時，預設使網頁時，預設使用用【【原始檔原始檔】】檢視，我們可以指定檢視，我們可以指定 ASP.NETASP.NET 網網頁的頁面起始位置，改為一開啟就是頁的頁面起始位置，改為一開啟就是【【設計設計】】檢檢視，請執行「工具視，請執行「工具 // 選項」指令，可以看到「選選項」指令，可以看到「選項」對話方塊。項」對話方塊。

2-3-3 2-3-3 程式碼編輯器的使用程式碼編輯器的使用 --切換檔案與輸入程式碼切換檔案與輸入程式碼

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

2-3-3 2-3-3 程式碼編輯器的使用程式碼編輯器的使用 --輸入輸入 HTMLHTML 或伺服端控制項標籤或伺服端控制項標籤

在在 VWDVWD 程式碼編輯視窗輸入程式碼編輯視窗輸入 HTMLHTML 或伺服端控或伺服端控制項標籤，例如：表格的制項標籤，例如：表格的 <table><table> 標籤，只需輸標籤，只需輸入「入「 << 」的部分標籤，就會顯示可能標籤的清單，」的部分標籤，就會顯示可能標籤的清單，如下圖所示：如下圖所示：

2-3-3 2-3-3 程式碼編輯器的使用程式碼編輯器的使用 --智慧智慧 Visual C#Visual C# 程式碼輸入程式碼輸入

在程式碼編輯視窗輸入在程式碼編輯視窗輸入 Visual C#Visual C# 程式碼程式碼時，時， VWDVWD提供智慧提示，可以在輸入程式碼時，提供智慧提示，可以在輸入程式碼時，只需輸入部分內容，即可顯示程式語法可能的關只需輸入部分內容，即可顯示程式語法可能的關鍵字清單、物件的屬性與方法語法等提示訊息。鍵字清單、物件的屬性與方法語法等提示訊息。

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

2-4-1 2-4-1 輸入輸入 ASP.NETASP.NET 網頁的文字內網頁的文字內容容

在在 VWDVWD 設計檢視的編輯區域輸入的文字內容，設計檢視的編輯區域輸入的文字內容，就是就是 ASP.NETASP.NET 網頁顯示的文字內容。網頁顯示的文字內容。 VWDVWD 是將是將EnterEnter 鍵視為換行分隔符號，如果文字內容需要換鍵視為換行分隔符號，如果文字內容需要換行，也就是插入行，也就是插入 HTMLHTML的的 <br/><br/> 標籤，我們只需標籤，我們只需輸入輸入 EnterEnter 鍵，即可替文字內容換行。鍵，即可替文字內容換行。

換行

2-4-2 2-4-2 調整文字內容的字型與尺調整文字內容的字型與尺寸寸

VWDVWD支援支援 HTMLHTML 標籤文字尺寸的標籤文字尺寸的 1~71~7級，它是級，它是使用使用 8~368~36點字來對應，級數愈大，字型尺寸愈點字來對應，級數愈大，字型尺寸愈大。如果覺得字型不夠漂亮，在大。如果覺得字型不夠漂亮，在 VWDVWD 也可以將也可以將文字重設成電腦安裝的其他漂亮字型。文字重設成電腦安裝的其他漂亮字型。

尺寸字型

2-4-3 2-4-3 指定文字效果指定文字效果在在 VWDVWD 的「格式」工具列提供按鈕來指定的「格式」工具列提供按鈕來指定常用的文字效果，如下所示：常用的文字效果，如下所示：粗體：顯示粗體字效果的粗體：顯示粗體字效果的 <b><b> 標籤，如果需要標籤，如果需要強調的文字內容，就可以使用粗體字來增加文強調的文字內容，就可以使用粗體字來增加文字在段落中的明顯度。字在段落中的明顯度。

斜體：顯示斜體字效果的斜體：顯示斜體字效果的 <i><i> 標籤，不過此效標籤，不過此效果使用在英文字比中文字來的好。果使用在英文字比中文字來的好。

底線：顯示底線字效果的底線：顯示底線字效果的 <u><u> 標籤，對於中文標籤，對於中文來說，底線字強調的效果比斜體字好，不過可來說，底線字強調的效果比斜體字好，不過可能與藍色底線字的超連結文字產生混淆。能與藍色底線字的超連結文字產生混淆。

2-4-4 2-4-4 文字內容的前景與背景色文字內容的前景與背景色彩彩

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

2-4-5 2-4-5 標題或段落的文字編排標題或段落的文字編排在在 VWDVWD 的區塊格式提供現成的區塊格式提供現成 HTMLHTML 標籤的多種標籤的多種樣式，我們可以在段落直接套用現成樣式，也就樣式，我們可以在段落直接套用現成樣式，也就是套用是套用 HTMLHTML 標籤，其中標題標籤，其中標題 1~61~6 的樣式就是的樣式就是HTMLHTML 標籤標籤 <h1>~<h6><h1>~<h6> ，可以建立主標題、次標，可以建立主標題、次標題和小標題的段落樣式。題和小標題的段落樣式。

至於至於 HTMLHTML 標籤標籤 <p><p> 的段落樣式是類似的段落樣式是類似 EnterEnter 鍵鍵的另一種段落編排，不過，其段落間距比較大。的另一種段落編排，不過，其段落間距比較大。

2-5 2-5 水平線、項目符號與編號水平線、項目符號與編號 2-5-1 2-5-1 項目符號與編號項目符號與編號 2-5-2 2-5-2 插入水平線插入水平線

2-5-1 2-5-1 項目符號與編號項目符號與編號 ASP.NETASP.NET 網頁的項目符號與編號就是一種網頁的項目符號與編號就是一種清單項目，可以將文字內容以項目方式來清單項目，可以將文字內容以項目方式來一一的列出，讓文字內容更簡潔有力。清一一的列出，讓文字內容更簡潔有力。清單項目主要分為兩種，如下所示：單項目主要分為兩種，如下所示：項目符號：項目符號的每一個項目都是使用符項目符號：項目符號的每一個項目都是使用符

號●、□、◇或小圖示等開頭，屬於一種沒有號●、□、◇或小圖示等開頭，屬於一種沒有順序的項目。順序的項目。

編號：如同項目符號，改為使用數字、英文和編號：如同項目符號，改為使用數字、英文和羅馬字母開頭的項目，在項目間擁有前後順序。羅馬字母開頭的項目，在項目間擁有前後順序。

2-5-2 2-5-2 插入水平線插入水平線水平線在網頁內容中可以分隔標題文字、段落和水平線在網頁內容中可以分隔標題文字、段落和

圖片，最常使用在標題文字和內文段落之間，可圖片，最常使用在標題文字和內文段落之間，可以提供文件更佳的編排效果。以提供文件更佳的編排效果。

在網頁文字內容的段落編排上，我們可以適度插在網頁文字內容的段落編排上，我們可以適度插入水平線來美化文件的編排，這就是入水平線來美化文件的編排，這就是 HTMLHTML的的<hr/><hr/> 標籤。標籤。

2-6 2-6 新增圖片與超連結新增圖片與超連結 2-6-1 2-6-1 插入網頁圖片插入網頁圖片 2-6-2 2-6-2 建立超連結建立超連結

2-6-1 2-6-1 插入網頁圖片插入網頁圖片如果擁有網頁支援格式的現成圖檔，我們如果擁有網頁支援格式的現成圖檔，我們

就可以在就可以在 VWDVWD 將這些圖片檔案插入將這些圖片檔案插入ASP.NETASP.NET 網頁中。網頁中。

2-6-2 2-6-2 建立超連結建立超連結網頁的超連結可以使用文字或圖片作為媒介，換網頁的超連結可以使用文字或圖片作為媒介，換

句話說，超連結的連接點可以是文字內容或圖片，句話說，超連結的連接點可以是文字內容或圖片，如果使用文字內容稱為超文件，如果使用圖片或如果使用文字內容稱為超文件，如果使用圖片或視訊元素稱為超媒體文件。視訊元素稱為超媒體文件。

在網頁中的文字超連結是最常使用的超連結媒介，在網頁中的文字超連結是最常使用的超連結媒介，預設是藍色底線字的文字內容，當滑鼠移到文字預設是藍色底線字的文字內容，當滑鼠移到文字超連結上時，游標會成為「手」形。超連結上時，游標會成為「手」形。

2-7 2-7 表格的版面配置表格的版面配置 2-7-1 2-7-1 建立表格建立表格 2-7-2 2-7-2 編輯表格編輯表格

2-7-1 2-7-1 建立表格建立表格表格（表格（ TablesTables ）是一種）是一種

資料排列方式，可以將資料排列方式，可以將資料分類和系統化處理，資料分類和系統化處理，在在 ASP.NETASP.NET 網頁使用表網頁使用表格的主要目的是用來進格的主要目的是用來進行版面配置，對齊和編行版面配置，對齊和編排多個控制項。排多個控制項。

在在 VWDVWD 的「表格」功能的「表格」功能表提供建立和編輯表格表提供建立和編輯表格指令，只需輸入表格列指令，只需輸入表格列和欄數，就可以建立網和欄數，就可以建立網頁表格。頁表格。

2-7-2 2-7-2 編輯表格編輯表格在建立網頁表格後，「表格」功能表提供在建立網頁表格後，「表格」功能表提供

進一步編輯表格內容的指令。例如：在表進一步編輯表格內容的指令。例如：在表格插入或刪除列、欄或儲存格，或是合併、格插入或刪除列、欄或儲存格，或是合併、分割、平均分配列高或欄寬等。分割、平均分配列高或欄寬等。選取表格、列、欄和儲存格選取表格、列、欄和儲存格插入列、欄和儲存格插入列、欄和儲存格刪除表格、列、欄和儲存格刪除表格、列、欄和儲存格表格的修改表格的修改

Asp Asp 程式範例程式範例 Html Html 端端<head><head> <title></title><title></title></head></head><body><body>

<p>Hello!</p><p>Hello!</p> <form action="http://localhost:57093/WebSite6/Default3.aspx" <form action="http://localhost:57093/WebSite6/Default3.aspx"

method="post">method="post"> <input type="text" name="ttt"/><br /><input type="text" name="ttt"/><br /> <input name="Submit1" type="submit" value="submit" /><input name="Submit1" type="submit" value="submit" /> </form></form>

</body></body></html></html>

Asp Asp 程式範例程式範例 Server Server 端端 (Default3.aspx)(Default3.aspx)<% <% String test = Request.Form["ttt"];String test = Request.Form["ttt"]; Response.Write("<p>" + test);Response.Write("<p>" + test); int i = 1;int i = 1; for (i = 1; i <= 9; i++)for (i = 1; i <= 9; i++) {{

Response.Write("<p>"+i);Response.Write("<p>"+i); }} %>%>

Documents

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

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