Creating a Product Page

Easy Web Design project, Chapter 11

Most store sites need at least one product page. On the Notebooks Web site, the Products page is divided into New, Not-So-New, and Notable sections, and each section uses a different table color behind the descriptions. In this section, you create a template that you can use to add as many products as you want:

1.    To create and position a table to hold products information, display notebook.htm in FrontPage.

2.    Click after the New Notebooks heading, and press ENTER to position your cursor in the spot you want to insert the table.

3.    Click the Insert Table button on the Standard toolbar, and drag to create a 1 by 2 table (1 x 2 Table appears at the bottom of the drop-down box).

4.    To format the newly created 1x2 table, double-click the nested table’s <table> tag on the tag selector bar (the second <table> tag from the left), change Alignment to Center, change the Specify Width setting to 90 percent, set the Borders Size to 0, and then click OK.

5.    To format the left cell of the product table, click in the left cell, and then double-click the highlighted <td> tag on the tag selector bar to open the Cell Properties dialog box.

6.    Select the Specify Width check box, type 50 in the text box, click In percent, and then click OK.

7.    Next you will nest a product description table inside the left cell of the product table. To do this, first click in the left cell and press ENTER.

8.    Click Table, click Insert, click Table, type 2 in the Rows box, and type 3 in the Columns box (don’t click OK yet—you’re going to format the entire table first!).

9.    Click Center in the Alignment list, and type 90 in the Specify Width box.

10.  To add space around the cell and its contents, type 5 in the Cell padding box, and type 1 in the Cell spacing box.

11.  To turn off the border outline, type 0 in the Borders Size box.

12.  To color the background, click the Color box in the Background section, select the first green—RGB(00,66,66)—in the Theme Colors area, and then click OK.

13.  To create an area to hold the product description, select the top row in the green-filled product description table, right-click, and then click Merge Cells.

14.  To format the product price area, select the bottom row of the green table, click Bold on the Formatting toolbar, click Center, and click white on the Font Color palette.

15.  To add pricing information and a Add To Cart button, click in the lower-left cell, type Product, press TAB, type Price, press TAB, click Insert, click Picture, and then double-click b_add.gif to add an Ad To Cart button.

16.  To add a descriptive paragraph for a product, select the top row of the table, click White on the Font Color palette, click in the row, and type the following product description (or make up your own): Phil is our top-of-the-line inspiral notebook that serves every possible use, including sketching, note taking, list making, and even paper plane building. 100 college-ruled pages.

17.  To add an image of the product, click above the green product description table, click Center on the Formatting toolbar, click Insert, click Picture, click From File, and then double-click p_nb11.jpg.

18.  To add additional products, you simply copy the template you just created. For instance, to copy the contents of the left cell into the right cell of the product table, point to the <td> tag on the tag selector bar, click the drop-down arrow, click Select Tag Contents, click Copy, click in the right cell, click Paste, press BACKSPACE to delete the extra paragraph return, and then save your work. Your page should look similar to the page shown in the figure.

Viewing a product table in Design view

19.  To copy the product table to each section on the page, click the second <table> tag on the tag selector bar, and click Copy.

20.  Click after the Not-So-New Notebooks heading, click Paste, press ENTER, click after the Notable Notebooks heading, and then click Paste to complete your product template.

21.  In the New Notebooks section, double-click the word Product, type Phil, double-click Price, type $1, and save your work.

22.  Click Preview in Browser on the File menu, and then click Microsoft Internet Explorer 6.0. The product tables on your Notebooks page should look similar to those shown in the figure. Close your browser window after you preview your work.

Adding product template tables

23.  You can add additional products to the New, Not-So-New, and Notable sections, as shown on www.creationguide.com/notebooks/notebooks.htm, by using the images you downloaded at the beginning of the project, changing the description area background colors for each category (dark blue for not-so-new notebooks and black for notable books) and replacing the existing text.

To link the button to a payment option, you can use a secure payment service, such as PayPal. When you sign up with PayPal (or another service), you receive the link information you can use to format the Add To Cart button on the Products page.