Developing the Individual Products Pages

 

Some Background.  Now that we have led you through developing products.htm to organize the overall product presentation, you need to develop the pages for each individual product.  The first thing that needs to be done is to make sure you have a page for each product.  Due to the upper limit on the number of products in the wizard you need to add four.  The pages you want to make sure you have are in the following table.  You will need to copy each of the images into your web in order to use them.

 

Product Name Web Page Filename Large Image
Binoculars prodBinos.htm
Giant Bow prodBow.htm
Harpoon prodHarpoon.htm
Knife prodKnife.htm
Magnet prodMagnet.htm

Motorcycle prodMoto.htm
Rocket prodRocket.htm
Speedboat prodSpeedboat.htm

Trapeze prodTrapeze.htm

 

Each of these pages should have the 
  • product name
  • larger image
  • price
  • brief description
  • benefits

Remember, you want each of these individual products pages to open up in a new window so that several can be opened at the same time.

You should use the image called SilverBrush.jpg and you should copy it into your web and use it as the background for all of the pages containing products and services.

 

 

Now we will create two of the pages, then you will need to create the remaining pages on your own.

The Harpoon Product Page.  Remember what you need in the prodHarpoon.htm page.

  1. Format the background with the SilverBrush.jpg image
  2. Change the fonts to Avant Garde Md BT.
  3. Insert a table that is 650 pixels wide, with one row and two columns.
  4. Insert the image in one of the cells.
  5. Insert the description in the other.
  6. List the Key Benefits using a bulleted list under the table.
  7. Display the Price under the list of benefits.
  8. Make sure and change the title to Harpoon Product Page.
  9. I used different levels of boldness in the fonts and colors.

A major portion of your page should look like the following.

 

 

The Magnet Product Page.  Remember what you need in the prodMagnet.htm page.

  1. Format the background with the SilverBrush.jpg image
  2. Change the fonts to Avant Garde Md BT.
  3. Insert a table that is 650 pixels wide, with one row and two columns.
  4. Insert the image in one of the cells.
  5. Insert the description in the other.
  6. List the Key Benefits using a bulleted list under the table.
  7. Display the Price under the list of benefits.
  8. Make sure and change the title to Magnet Product Page.
  9. I used different levels of boldness in the fonts and colors.

Hopefully, you see the pattern.  A major portion of your page should look like the following.

 

 

Creating the Links.  Now you need to create the links from the Products page, products.htm, to each of these pages and have it open appropriately.  We will work with the prodMagnet.htm page.
  1. Make sure that products.htm is open.
  2. Click on the Magnet thumbnail image to select it.
  3. Click on the create Hyperlink toolbar button.

You should get the following dialog window/form.

 

 

  1. Select the prodMagnet.htm file in the file selection box.
  2. Now you need to modify the Target Frame:
    1. Click on the little ellipses and pencil icon to the right of the Target Frame:
    2. This will open a new dialog in which you should select New Window
    3. Click on OK for this specific window/form.
    4. Now you can click on OK for the Hyperlink dialog/form.

All of the rest of the links can be created using a similar process once you have created each of the product pages.