Part IV: Creating the Home Page

In this part of the project, you will create a home page for the e-mail information system. Before you begin, however, you must add some graphics files to your site.

Step 1

If you don't already have the EMailInfo web open in Visual InterDev, open it now. On the FileView tab, click the IMAGES directory and choose Add To Project/Files from the Project menu. Add the image files for this project to your site.

Step 2

To add a new Web page to your project, choose New from the File menu. When the New dialog box appears, click the Files tab and select Active Server Page. In the File Name box, type DEFAULT.ASP and click OK. Visual InterDev will automatically add the new Web page to your site.

Step 3

Open DEFAULT.ASP by right-clicking the file in the project window. Choose Open With from the pop-up menu. In the Open With dialog box, open the file with Microsoft FrontPage Editor (Visual InterDev Edition).

In FrontPage, choose Background from the Format menu. On the Background tab in the Page Properties dialog box, change the background color of the home page to white. Click OK.

Add a banner to the home page by choosing Image from the Insert menu. In the Insert dialog box, insert an image from the following location:

/EMAILINFO/IMAGES/BANNER.JPG 

Click OK, and center the banner by clicking the Center button on the toolbar. The result should look like the page in Figure 9-2.

Figure 9-2. The home page banner.

Step 4

The home page will walk the user through the steps necessary to receive information from the e-mail system. On a new line on the Web page, place the text Step 1 to mark the first thing the user must do. Change the size to Heading 3 using the Change Style drop-down list box on the toolbar. Below this heading, type the message Enter your personal information.

Step 5

You will need a form to gather personal information from the user, including the user's name and e-mail address. You might also want to request other useful information, such as a mailing address.

Below Step 1, add a new form by choosing Form Field/Push Button from the Insert menu. A new Submit button should appear, along with a black outline designating a new form.

Step 6

To access the properties of the new form, right-click inside the black border and select Form Properties from the pop-up menu. In the Form Properties dialog box, be sure that the Form Handler box designates Custom ISAPI, NSAPI, Or CGI Script as the handler.

Click the Settings button in the Form Properties dialog box. In the Settings For Custom Form Handler dialog box, set the ACTION attribute to submit the form to the following address:

/EMAILINFO/MAIL.ASP 

In the same dialog box, check that the METHOD attribute is set to POST. Click OK to exit the Settings For Custom Form Handler dialog box, and click OK again to exit the Form Properties dialog box.

Step 7

Now build the remainder of the form. Place your cursor above the Submit button, and add a new table by choosing Insert Table from the Table menu. In the Insert Table dialog box, create a table with the following attributes:

Rows: 8 Columns: 2 Border Size: 0 Cell Padding: 2 Cell Spacing: 2 

Click OK to add the new table to the page.

Step 8

Add label text to the cells in the first column of the table. Use the cell labels shown below:


Row Number Row Label
1 First Name
2 Last Name
3 E-Mail
4 Address
5 Blank
6 City
7 State
8 Zip

Using the Change Style drop-down list box on the toolbar, change the style for each cell to Heading 5.

Step 9

To add text fields to the cells in the second column, choose Form Field/One-Line Text Box from the Insert menu.

Change the name of each text field in the form by right-clicking the field and choosing Form Field Properties from the pop-up menu. In the Text Box Properties dialog box, type the new field name, as shown below:


Row Number Field Name
1 txtFirstName
2 txtLastName
3 txtEMail
4 txtAddress1
5 txtAddress2
6 txtCity
7 txtState
8 txtZip

Save your work.

Step 10

Start a new line below the table and above the Submit button. On this line, type the text Step 2. Using the Change Style drop-down list box on the toolbar, change the style to Heading 3. Below this heading, type the message Select a topic.

Step 11

Below the text, add a drop-down list box by choosing Form Field/Drop-Down Menu from the Insert menu.

Change the properties for the drop-down list box by right-clicking the field and choosing Form Field Properties from the pop-up menu. In the Drop-Down Menu Properties dialog box, change the name of the control to lstTopic and click OK.

Step 12

Next to the Submit button, add a new button by choosing Form Field/Push Button from the Insert menu. Right-click the new button, and choose Form Field Properties from the pop-up menu. In the Push Button Properties dialog box, change the button type to Reset and click OK.

Save your work, and exit FrontPage Editor.

Step 13

Return to Visual InterDev. Preview your page in Internet Explorer by right-clicking DEFAULT.ASP and choosing Browse With from the pop-up menu. The result should look like the page in Figure 9-3.

Figure 9-3. The home page.



Programming Active Server Pages
Programming Active Server Pages (Microsoft Programming Series)
ISBN: 1572317000
EAN: 2147483647
Year: 1996
Pages: 84

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net