Adding Additional Web Pages and Resources to a Web Site

Now the fun begins! Only very simple Web sites consist of just one Web page. Using Visual Web Developer you can quickly expand your Web site to include additional information and resources, including HTML pages, XML pages, text files, database records, Web services, site maps, and more. If you want to add an HTML page (a standard Web page containing text and HTML client-side controls), you have two options:

Create a new HTML page by using the Add New Item command on the Website menu. After you create the HTML page, you add text and HTML objects to the page by using the Web Page Designer.
Add an HTML page that you have already created by using the Add Existing Item command on the Website menu, and then customize the page in the Web Page Designer. You use this method if you want to include one or more Web pages that you have already created in a tool such as Microsoft FrontPage. (If possible, add pages that don't rely on external style sheets and resources, or you'll need to add those items to the project as well.)

To link pages together, Visual Web Developer provides the HyperLink control, which creates a hyperlink label object that the user clicks to jump from the current Web page to a new one. When you use a HyperLink control, you set the text that will be displayed on the page by using the Text property, and you specify the desired resource to jump to (either a URL or a local path) by using the NavigateUrl property.

In the following exercise, you'll create a second Web page by using the Add New Item command, and you'll save it in HTML format along with your other project files. The new page will be a Help file that users of your Web site can access to get operating instructions for the loan calculator. After you create the new page, you'll add a HyperLink control to the first page and set the HyperLink control's NavigateUrl property to the new HTML page.

Create an HTML page

Click the Add New Item command on the Website menu.

The Add New Item dialog box appears, allowing you to add a number of different Internet resources to your Web site.
Click the HTML Page icon.

You'll insert a blank HTML page into the project, which you can use to display formatted text and HTML controls. (You cannot add server controls to this page, because simple HTML pages are controlled by the client's browser, not a Web server.)
Type WebCalculatorHelp.htm in the Name text box.

Your screen looks like this:
Click Add.

The WebCalculatorHelp.htm file is added to Solution Explorer and is opened in the Web Page Designer in Source mode.

Notice that only HTML controls are displayed in the Toolbox. Because this is an HTML page, the server controls aren't supported.
If necessary, click the Design tab to display the HTML page in Design mode.

The I-beam insertion point blinks on the page, ready for your input.
Type the following text:

Car Loan Calculator

The Car Loan Calculator Web site was developed for the book Microsoft Visual Basic 2005 Step by Step, by Michael Halvorson (Microsoft Press, 2005). The Web site is best viewed using Microsoft Internet Explorer version 6.0 or later. To learn more about how this ADO.NET application was created, read Chapter 20 in the book.

Operating Instructions:

Type a loan amount, without dollar sign or commas, into the Loan Amount box.

Type an interest rate in decimal format into the Interest Rate text box. Do not include the “%” sign. For example, to specify a 9% interest rate, type “0.09”.

Note that this loan calculator assumes a three year, 36-month payment period.

Click the Calculate button to compute the basic monthly loan payment that does not include taxes or other fees.
Using buttons on the Formatting toolbar, add bold and italic formatting, as shown here:
Click the Save All button on the Standard toolbar to save your changes.

Now you'll use the HyperLink control to create a hyperlink on the first Web page that opens the WebCalculatorHelp.htm file.

Use the HyperLink control

Display the Web page (Default.aspx) in Design mode.
Move the I-beam to the right of the button object on the Web page, and then press Enter twice.
Double-click the HyperLink control on the Standard tab of the Toolbox to create a hyperlink object at the insertion point.
Set the Text property of the hyperlink object to “Get Help”.

The Text property contains the text that will appear as the underlined hyperlink on the HTML page. You want to use words here that will make it obvious that there's a Web page available containing Help text.
Set the ID property of the hyperlink object to “lnkHelp”.

Naming this object makes it consistent with the other objects in the Web site.
Click the NavigateUrl property, and then click the ellipsis button in the second column.

Visual Studio opens the Select URL dialog box, which prompts you for the location of the Web page to which you want to link.
Click the WebCalculatorHelp.htm file in the Contents Of Folder list box.

The URL text box displays the name of the file you want to use as the hyperlink. Your dialog box looks like this:
Click OK to set the NavigateUrl property.

Your HTML page looks like this:

Your link is finished, and you're ready to view the Web site in your browser again.
Click the Save All button.
Click the Start Debugging button.

Visual Studio builds the Web site and displays it in Internet Explorer.
Compute another loan payment to experiment further with the loan calculator.

If you want to test another set of numbers, try entering 20000 for the loan amount and 0.075 for the interest rate. The result is $622.12.
Now click the Get Help hyperlink to see how the HyperLink control works.

Internet Explorer displays your new HTML page on the screen (resize the window if necessary to see all the text). Your HTML page looks something like this:
Read the text, and then click the Back button in Internet Explorer.

Just like any Web site, this one lets you click the Back and Forward buttons to jump from one Web page to the next.
Close Internet Explorer to close the Web site.

You've added a simple HTML page to your Web site, and you have experimented with using the HyperLink control to link together Web pages. Pretty cool. Now try something more sophisticated that shows how far you can take your Web site if you choose to include information from a database.