How to: Create a Simple Web Page in Visual Web Developer

Pagina 1 di 4

Generated by Foxit PDF Creator Foxit Software

http://www.foxitsoftware.com For evaluation only.

Creating a Web Application

How to: Create a Simple Web Page in Visual Web Developer

Microsoft Visual Web Developer is the environment in Microsoft Visual Studio 2005 that is used to
create and work with Microsoft ASP.NET Web applications. Tasks described in this How-to document
include:
l Familiarizing yourself with Visual Web Developer
l Creating a single-file ASP.NET page in Visual Web Developer
l Adding controls

When you create a new Web application, Visual Web Developer creates a new page named Default.aspx.
Visual Web Developer displays the page in Source view by default. This view displays the HTML description
of the page, as shown in the following illustration:

To switch to different views, you can use the view tabs feature of the Visual Studio 2005 integrated
development environment (IDE). For more information about the view tabs, refer to the next section of this
document.

A Tour of Visual Web Developer

Before you begin working on a Web page, it is useful to familiarize yourself with the Visual Web Developer
development environment. The following illustration shows you the windows and tools that are available in
Visual Web Developer:

file://C:\Users\Salsero\AppData\Local\Element K\Offline Course Player\content\5832... 28/04/2009

How to: Create a Simple Web Page in Visual Web Developer

Pagina 2 di 4

Generated by Foxit PDF Creator Foxit Software

http://www.foxitsoftware.com For evaluation only.

The following list describes the most commonly used windows and tools. (Only the windows and tools
marked in the preceding illustration are listed here.)

l Toolbars. Provide commands for formatting text, finding text, and so on. Some toolbars are available only when you are working in
Design view.

l Solution Explorer. Displays the files and folders on your Web site.
l Document windows. Display the documents you are working on in tabbed windows. You can switch between documents by clicking
tabs.

l Properties window. Allows you to change page settings, HTML elements, controls, and other objects.
l View tabs. Present you with different views of the same document. Design view is a near-WYSIWYG editing surface. Source view is
the HTML editor for the page. You will work with these views later in this walkthrough. If you prefer to open Web pages in Design
view, on the Tools menu, click Options, select the HTML Designer node, and then change the Start Pages In option.

l Toolbox. Provides controls and HTML elements that you can drag onto your page. Toolbar elements are grouped by common
function.

l Server Explorer. Displays database connections. If Server Explorer is not visible in Visual Web Developer, on the View menu, click
Other Windows and then click Server Explorer.

Note
You can rearrange and resize the windows to suit your preferences. The View menu allows you to
display additional windows.

Adding Existing Items to a Web Application

You can add existing items, such as Web pages, graphics, and XML files, to Web applications.
To add an existing item to the Web site
1.

Select the Web application (or a subfolder of the application) in the Solution Explorer window.

2.

On the Website menu, click Add Existing Item.

Note
You can also right-click the Web application in the Solution Explorer window and then from the shortcut menu, click Add
Existing Item.
3.

Browse to the location of the file (or files) you want to add to the Web application, and then select the items to add.

file://C:\Users\Salsero\AppData\Local\Element K\Offline Course Player\content\5832... 28/04/2009

How to: Create a Simple Web Page in Visual Web Developer

Pagina 3 di 4

Generated by Foxit PDF Creator Foxit Software

http://www.foxitsoftware.com For evaluation only.

4.

Click Open.

Creating a New Web Forms Page

You can use the Default.aspx page as the home page for your Web site. However, for this lab, you will
create and work with a new page. You can add many types of pages and components to your Web site,
including plain HTML pages, cascading style sheets, Web configuration files, and ASP.NET Web Forms.
To add a new page to the Web site
1.

Close the Default.aspx page (if it is open).

2.

In Solution Explorer, right-click the Web site (for example, C:\WebSite) and then click Add New Item.

3.

Under Visual Studio installed templates, click Web Form.

4.

In the Name box, type FirstWebPage.

5.

In the Language list, choose the programming language you prefer to use (Microsoft Visual Basic or C#).
When you created the Web site, you specified a default language. However, each time you create a new page or component for
your Web site, you can change the language from the default. You can use different programming languages in the same Web
site.

6.

Clear the Place code in separate file box.

In this example, you are creating a single-file page with the code and HTML in the same page. The code for ASP.NET Web Forms
can be embedded in the page or located in a separate class file.

7.

Click Add. Visual Web Developer creates the new page and opens it in Source view.

Adding HTML to the Page

In this part of the example, you will add some static HTML text to the page.
To add text to the page
1.

At the bottom of the document window, click the Design tab to switch to Design view. Design view displays the page that you are
working on in a WYSIWYG-like way. At this point, you do not have any text or controls on the page, so the page is blank.

2.

On the page, type Welcome to Visual Web Developer.

3.

Switch to Source view. You can see the HTML that you created by typing in Design view.

Adding and Programming Controls

You can add controls to a Web Form. The following procedure describes how to add a Button, TextBox,
and Label control to the page and how to write code to handle the Click event for the Button control.
T o add controls to the page
1.

Click the Design tab to switch to Design view.

2.

Press ENTER a few times to make some room.

3.

In the Toolbox, from the Standard group, drag three controls onto the page: a TextBox control, a Button control, and a Label
control.

4.

Click on the page directly above the TextBox control, and then type Enter your name.

This static HTML text is the caption for the TextBox control. You can mix static HTML and server controls
on the same page.

Setting Control Properties

Visual Web Developer offers you various ways to set the properties of controls on the page. In this part of

file://C:\Users\Salsero\AppData\Local\Element K\Offline Course Player\content\5832... 28/04/2009

How to: Create a Simple Web Page in Visual Web Developer

Pagina 4 di 4

Generated by Foxit PDF Creator Foxit Software

http://www.foxitsoftware.com For evaluation only.

the example, you will set properties in both Design view and Source view.
To set control properties
1.
2.

Select the Button control, and then in the Properties window, set the Text property to Display Name.
Switch to Source view.
Source view displays the HTML for the page, including the elements that Visual Web Developer has created for the server
controls. Controls are declared using HTML-like syntax, except that the tags use the prefix asp: and include the attribute
runat="server".Control properties are declared as HTML attributes. For example, when you set the Text property for the
Button control in step 1, you were actually setting the Text HTML attribute of the control.

Note
The controls are inside a <form>element, which also has the attribute runat="server". The runat="server" attribute
and the asp: prefix for control tags marks the controls so that they are processed by ASP.NET on the Web server when
the page runs. Code outside of <form runat="server">and <script runat="server">elements is interpreted by the
browser as client-side code.
3.

Click to position the insertion point after the text Label in the <asp:Label>tag, and then press SPACEBAR.A drop-down list
appears that displays the list of properties you can set for a Label control. This feature, referred to as IntelliSense, helps you in
Source view with the syntax of server controls, HTML elements, and other items on the page.

4.

Select ForeColor and then type an equals sign. IntelliSense displays a list of available colors.

Note
You can display an IntelliSense drop-down list at any time by pressing CTRL+J.
5.

Select a color for the Label controls text.

The ForeColor attribute is set to the color that you have selected.

file://C:\Users\Salsero\AppData\Local\Element K\Offline Course Player\content\5832... 28/04/2009