第二章 VWD开发环境简介.pptVIP

* * * 2.3.2 絕對定位 【原始檔說明】 在這個範例中，我們調整了div標籤的大小，也調整了Label1、Label2、Button1控制項的位置，並且位置設定為絕對定位，因此原始檔的body標籤內出現了變化，如下。 * 2.3.2 絕對定位 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 body form id=form1 runat=server div style=height: 233px asp:Label ID=Label1 runat=server style=top: 54px; left: 278px; position: absolute; height: 16px; width: 35px Text=Label/asp:Label 這是一個ASP.NET網頁 asp:Label ID=Label2 runat=server style=top: 103px; left: 278px; position: absolute; height: 16px; width: 35px Text=Label/asp:Label asp:Button ID=Button1 runat=server style=top: 53px; left: 511px; position: absolute; height: 21px; width: 48px Text=Button / /div /form /body * 2.3.2 絕對定位 說明： 第15行 div標籤發生了變化，它使用了style屬性來設定新的高度為233px，這是CSS的語法。 第17行與第22行 標籤控制項對應的asp:Label標籤出現了變化，它也使用了style屬性設定標籤的寬與高及其位置，其中position: absolute代表著使用的是絕對定位，而top與left，則代表它的位置應該位於網頁上方與左方多遠的距離。 第24~26行 出現了一個asp:Button標籤，它代表的是按鈕控制項，也使用了絕對定位。故雖然在原始檔之中，Label2位於Button1之前，但在設計介面處，Button1卻出現在Label2之上。 * 2.3.2 絕對定位 如果您開啟本範例檔案，然後隨意拖曳任一個標籤或按鈕控制項的位置，會發現調整任何一個控制項並不會對另一個控制項造成影響。這是因為我們使用了絕對定位的緣故。 若在對話方塊中採用【相對】定位，則原始檔會出現position: relative，此時，控制項就會跟隨前一個控制項自動調整位置。而本書較複雜的範例介面將採用絕對定位來配置介面元件，只有非常單純的範例會採用相對定位配置介面元件。 asp:Label與asp:Button標籤並不是HTML標籤，凡是asp:xxx格式的標籤都是ASP.NET的伺服器控制項，由於它也需要被編譯器處理，故必定也有runat=server屬性。 * 2.3.3 調整控制項的大小 在前面的範例中，我們在調整控制項的位置時，已經學會如何選取控制項。事實上，當您選取某一個控制項之後（或游標移到某一個控制項上方時），該控制項的外框就會出現八個小白點，而該控制項則稱之為『作用控制項』，此時您可以針對作用控制項進行各種動作 ，例如：搬移控制項位置、調整控制項大小、設定控制項的屬性值。在上一節中，我們已經學會如何調整控制項的位置 在本小節中，我們將示範如何調整控制項的大小： 【範例2-3】： 延續範例2-2，調整按鈕控制項的大小 * 2.3.3 調整控制項的大小 * 2.3.3 調整控制項的大小 * 2.3.3 調整控制項的大小 選取多個控制項 我們常常會希望將許多控制項同時移動，例如：感覺Web Form 表單的右邊空間比較大，就會希望將所有表單上的控制項同時向右移動。 此時，一個一個慢慢地移動控制項位置是一種方法，不過卻顯得很麻煩又不容易對齊控制項 這個時候如果我們可以先同時選取多個控制項，然後一起移動該有多好。同樣地，我們也希望可以同時改變多個控制項的大小。 選取多個控制項的方式，只要按住【Ctrl】鍵就可以完成，如同在檔案總管中選取多個檔案的方式。 不幸地，VWD 2010 Express雖然允許選取多個控制項，但卻無法同時進行移動及調整大小 但可同時刪除或複製多個選取的控制項。 * 2.3.4 刪除控制項 刪除控制項非常簡單，只要先選