. Điều này không có gì tạo ra một mạng lưới vô hình trên trang của bạn, trong đó mỗi tế bào là 8 × 8 điểm ảnh rộng. Bây giờ khi bạn thả hoặc kéo một điều khiển vào trang web, nó sẽ bắt dính tới một góc của lưới điện. Điều này cho phép bạn sắp xếp theo chiều dọc hoặc theo chiều ngang kiểm soát trên trang | CHAPTER 5 VISUAL WEB DEVELOPER 105 The default positioning for VWD is flow layout. I am not sure why but it is. However you can change that. If you added the second button click it and press the Delete key to delete it now. From the menu choose Tools Options and click the Show All Settings check box. Highlight the CSS positioning node under the HTML Designer tree node. You will see what I ve shown in Figure 5-6. Figure 5-6. Changing from flow layout to absolute layout Check the two check boxes on the right side and click OK. What this does is create an invisible grid on your page in which each cell is 8x 8 pixels wide. Now when you drop or drag a control onto the page it will snap to a corner of the grid. This allows you to vertically or horizontally align controls on the page. Try to drag the remaining button around the page. If this does not work then delete it and add a new one. You should be able to drag it to any position on the page. Control Properties Now that you have a control on the page go to the Properties pane on the right side of the screen and do the following Change the ID of the control to cmdPunch. Change the Text property to Punch In. That s good for now. Your Properties pane for the button should look like the one shown in Figure 5-7. 106 CHAPTER 5 VISUAL WEB DEVELOPER Figure 5-7. The Properties pane for the Punch button To see what actually happened click the Source button below this center pane and you should be taken back to the HTML source code for this page. The code between the body and body tags has changed. It should read like Listing 5-1. Listing 5-1. New button code added body form id form1 runat server div nbsp nbsp asp Button ID cmdPunch runat server Style z-index 100 left 224px position absolute top 240px Text Punch In div form body You see the asp Button. tag here. Notice that this button has an absolute left and top position. Its ID has changed and the text that shows on the button has changed. The browser will interpret this HTML
