Your First Visual Studio NET Web Page

Once Visual Studio .NET has created the project files and the application directory in IIS, Visual Studio will look something like Figure 4-8. A couple of things are significant about Visual Studio. First, notice the faint grid on the WebForm1.aspx tab. These lines are shown when Grid Layout is enabled. Grid Layout allows you to place components precisely, as you would on a traditional Visual Basic form.

1 ff

Figure 4-8 : Visual Studio as soon as the new Web Application project has been created in Grid Layout

Note The way this magic of providing precise component layout works is worth a brief note. Traditionally, HTML hasn't been able to give you such fine control of the exact placement of components within a Web page. When you place a component using Grid Layout, the component is positioned using DHTML and Cascading Style Sheets (CSS) to it to tell the browser exactly where to render it. This idea is very cool but presents two possible problems. The first is what to do about downscale browsers that don't support DHTML and CSS. To allow the illusion of precise placement to continue, a complex set of tables is sent to the browser, doing an acceptable job of placing components in most cases. A second problem is that trying to use such precise control of a page might cause some developers to create layouts that are fragile. For example, if the fonts installed don't exactly match the fonts the developer used, the layout will likely be different. The decision is left to the developer: the Page Layout can be changed from Grid Layout to Flow Layout if you don't want that level of control. This setting is in the property dialog box of the page. If you're developing applications for the Internet rather than an intranet, on which you have control over the clients, it might not be reasonable to take advantage of the admittedly convenient Grid Layout. In general, examples in this book won't use Grid Layout but will instead use tables to align components. The next example is an exception because I'm trying to show the IDE, and Grid Layout does show that off quite well.

Display the Toolbox by clicking the Toolbox tab on the left of the screen (just below the Server Explorer) or by clicking the Toolbox button on the toolbar. In this example, I'll add two labels and place them on the design grid, one on the top and one below it, both just about centered. I'll make the lower label a bit wider than the top label. Your screen should look something like the screen shown in Figure 4-9.



. , *


-1 itap'ri ft ■

■T] nt; jf

■-J 'HrnVM

3 ■i-H*ivrPr,-. ,r.

] Mdiu,

I tfHra

j rrSfr ■ iTflJ


a IjErJ"1?

0 0

Post a comment