4-8 在Web Form中佈置與使用Web控制項

        接下來我們要看ASP.NET中的重頭戲了，那就是Web From上面的Web控制項。這是物件導向網頁設計不可或缺的重要議題，先前我們其實已經使用過很多次Web控制項來建構網頁了。

        我們開啟一般的Web應用程式專案之後，畫面上會是底下這樣，您可按下滑鼠右鍵選擇『屬性』，將屬性頁視窗叫出來，將頁面從GridLayout改為FlowLayout：

        Web From提供這兩種方式來決定物件的擺置方式，如果是採FlowLayout，則頁面上的HTML碼會是比較單純的設定，在指定物件時，不會利用Style指令來進行設定(比較像一般的網頁配置方式)。反之，若是採用GridLayout，則會將每一個物件預設為使用Style格式來指定物件在Web From上面佈置的位置(比較像Windows程式設計)。

        如果是以FlowLayout方式來佈置物件，則HTML碼會是：

以FlowLayout方式來佈置物件

<form id="Form1" method="post" runat="server">    <FONT face="新細明體">    <asp:TextBox id="TextBox1" runat="server"></asp:TextBox>    <asp:Button id="Button1" runat="server" Text="Button" ></asp:Button>    </FONT> </form>

        注意當您拖曳Button放在TextBox物件後面時，FlowLayout模式將會把物件緊連著上個物件佈置，這是由於HTML碼本身就是以這樣連接著的方式來呈現網頁。

        若使用GridLayout方式來佈置物件，HTML碼則是：

以GridLayout方式來佈置物件

<form id="Form1" method="post" runat="server">    <FONT face="新細明體">    <asp:TextBox id="TextBox1" runat="server"></asp:TextBox>    <asp:Button id="Button1" runat="server" Text="Button" style="Z-INDEX: 101; LEFT: 146px; POSITION: absolute; TOP: 56px"></asp:Button>    </FONT> </form>

        注意上面的HTML碼中的Style部分，因為HTML碼的不同，所以在畫面呈現上也有不同：