Designing a Web Page

To start designing a web page, double-click the web page in the Solution Explorer. If you’re using the
ASP.NET Empty Web Site template, start by creating a new page (right-click the website in the
Solution Explorer, choose Add New Item, and pick the Web Form template). A new page begins with
the bare minimum markup that it needs, but has no visible content, so it will appear like a blank page
in the designer.
Visual Studio gives you three ways to look at a web page: source view, design view, and split view.
You can choose the view you want by clicking one of the three buttons at the bottom of the web page
window (Source, Design, or Split). Source view shows the markup for your page (the HTML and ASP.NET
control tags). Design view shows a formatted view of what your page looks like in the web browser. Split
view combines the other two views so that you can see the markup for a page and a live preview at the
same time.

The easiest way to add an ASP.NET control to a page is to drag the control from the Toolbox on the
left. (The controls in the Toolbox are grouped in numerous categories based on their functions, but
you’ll find basic ingredients in the Standard tab.) You can drag a control onto the visual design surface of
a page (using design view), or you can drop it in a specific position of your web page markup (using
source view). Either way, the result is the same. Alternatively, you can type in the control tag that you
need by hand in the source view. In this case, the design view won't be updated until you click in the
design portion of the window or press Ctrl+S to save the web page.
Once you’ve added a control, you can resize it and configure its properties in the Properties window.
Many developers prefer to lay out new web pages in design view, but switch to source view to rearrange
their controls or perform more detailed tweaking. The exception is with ordinary HTML markup—
although the Toolbox includes a tab of HTML elements, it’s usually easiest to type the tags you need by
hand, rather than dragging and dropping them one at a time.
Figure 2-3 shows a web page in split view, with the source markup in the top half and the graphical
surface in the bottom half.