Creating Web Sites and Web Pages by Using Visual Web Developer and ASP.NET

Customizing the Web Site Template

Now the fun begins! Only very simple Web sites consist of just one Web page. Using Visual Web Developer, you can expand your Web site quickly to include additional information and resources, including HTML pages, XML pages, text files, database records, Web services, login sessions, site maps, and more. If you want to add a Web page, you have three options:

• You can create a new Web page by using the HTML Page template or the Web Form template. You select these templates by using the Add New Item command on the Website menu. After you create the page, you add text and objects to the page by using the Web Page Designer.

• You can add a Web page that you have already created by using the Add Existing Item command on the Web site 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 Expression Web. (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.)

• You can use an existing Web page that is part of the Web site template that you are using. For example, in the Web site template that you have open now, there is an About Web page and various Login Web pages that you can customize and use quickly.

In the following exercise, you’ll display the About Web page supplied by the template that you are using, and you will customize it with some information about how the car loan calculator application works.

Customize the About.aspx Web page

1. Display Solution Explorer, click the About.aspx file, and click the View Designer button.

   Visual Web Designer displays About.aspx in the Designer, and it displays a line of placeholder text (“Put content here.”).

2. Delete the placeholder text, and then type the following information:

   Car Loan Calculator

   The Car Loan Calculator Web site was developed for the book Microsoft Visual Basic 2010 Step by Step, by Michael Halvorson (Microsoft Press, 2010). 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.

3. Using buttons on the Formatting toolbar, add bold formatting for the headings and italic for the book title, as shown here:

   

   Click to view larger image

4. Click the Save All button on the Standard toolbar to save your changes.

5. Click the Start Debugging button.

   Visual Studio builds the Web site and displays it in Internet Explorer.

6. Click the Home tab on the Web page.

   Visual Studio displays the Home page for your Web site, the car loan calculator.

7. 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 should be $622.12.

8. Now click the About tab to view the About Web page with instructions for your program.

   Internet Explorer displays the About page on the screen. Your browser looks something like this:

   

   Click to view larger image

9. 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.

10. Close Internet Explorer to close the Web site.

    You’ve added a simple About page to your Web site, and you have experimented with moving from one page to the next. Pretty cool so far. Now, try something more sophisticated that shows how far you can take your Web site if you choose to include information from a database.