Part II: Creating the Home Page | Programming Active Server Pages (Microsoft Programming Series)

In this part, you will create a home page for the bookstore. Before you begin, however, you must add some graphics files to your site.

Step 1

If you don't already have the Bookstore web open in Visual InterDev, open it now. Click the IMAGES directory, and choose Add To Project/Files from the Project menu. Navigate the \CODE\CHAP06\IMAGES directory to find the following files, and add them to your project:

BANNER.GIF

HOTLIST.GIF

ORDER.GIF

SEARCH.GIF

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 then click HTML Page. In the File Name box, type DEFAULT.HTM, and click OK. Visual InterDev will automatically add the new Web page to your site.

Key Point
While Internet Information Server is not case sensitive, other servers (UNIX, for example) do distinguish between names such as DEFAULT.HTM and default.htm.

Step 3

Visual InterDev ships with a special edition of Microsoft FrontPage, a graphical editing tool for creating Web pages. You will use this tool to create a simple home page for the Bookstore site. The page will consist of some text, graphics, and links to other pages.

Right-click DEFAULT.HTM, and choose Open With from the pop-up menu. In the Open With dialog box, open the file with Microsoft FrontPage Editor. FrontPage should present a blank Web page.

Start by adding a banner to the top of the home page welcoming people to the site. In FrontPage, you can add an image to the site by choosing Image from the Insert menu. In the Image dialog box, choose to insert an image by specifying the location of the image in the From Location text box:

/BOOKSTORE/IMAGES/BANNER.GIF

Click the OK button, and the banner will appear on the page. Center the banner by clicking the Center button on the toolbar.

WARNING: Graphics do not always display properly in Microsoft FrontPage, even when you have specified a legitimate file location. This is normally not a problem, and the graphics will appear in the final page under Internet Explorer.

At this point, your home page has a black-and-white image on a gray background—not very attractive. You can easily change the background color by choosing Background from the Format menu. In the Page Properties dialog box, list boxes present color selections for the background and text. Change the background color to white, and click the OK button.

Save your work by choosing Save from the File menu.

Step 4

Start a new line by pressing the Enter key on your keyboard—the same as you would do with any word processor. Left-justify this line by clicking the Left button on the toolbar.

Now add some simple text, and turn the text into a hyperlink. This link will allow the user to access the full-text search capabilities of the site. Type Search This Site, highlight all the text you typed, and select the Arial font from the font formatting toolbar. Keep the text highlighted, and add a link to the full-text search page by choosing Hyperlink from the Insert menu. In the Hyperlink dialog box, type SEARCH.HTM in the URL text box and click OK. This will link the text to the search page. Save your work.

Your home page should now look like the example in Figure 6-4.

Step 5

Right-click the new link you created, and choose Follow Hyperlink from the pop-up menu. The full-text search page that was generated by the Web Project wizard at the beginning of the exercise will be loaded into FrontPage. Using the techniques introduced in this exercise, change the background color of the page to white and customize the generic text to fit the Bookstore home page. Be careful not to change the text boxes or buttons in any way.

Figure 6-4. The Bookstore home page.

Step 6

After you save all your changes, close FrontPage Editor and return to Visual InterDev. Browse your new site by selecting DEFAULT.HTM and choosing Preview In Browser from the File menu. Try out the hyperlink and full-text search capabilities.