ࡱ > \ ^ W X Y Z [ @ jbjb ", d d l X X X X 8 $ X n , 9 Y X @ @ { X X B @ Chapter 11: Going All Out with FrontPage 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 tables
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 (dont click OK yetyoure 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 greenRGB(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 | 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 |