Building Content Management Systems
& e-Business Solutions

Tutorials: e-Stores

This tutorial will cover the minimum. Hopefully from these basics you will be able to extrapolate and build more complex websites.  This site will have only one template that includes...

  • One navigation module.
  • One product catalog module.

Sample Files

  1. Download this design.
  2. Extract the files from the ZIP.
  3. Re-name "template.html". Call it "Store_Page.html".

Inserting the Functionality

The Navigation

  1. Open both of the HTML files in DreamWeaver.
  2. Place the blinking cursor in the light blue strip just below the Clear Site logo.
  3. In the Clear Site toolbar click the  navigation block icon.
  4. The wizard window in Figure I will appear.
    • Set Navigational Options to create pages.
    • Set "BG Color" to none .
    • Click "OK". (Your work should match Figure II when previewed in a browser.)

The Store

  1. In DreamWeaver, place the blinking cursor in the large white portion of the page.
  2. In the Clear Site toolbar click the  product catalog icon.
  3. Adjust the table properties and style the buttons however you see fit and click "OK".

Getting the Store Online

At this point your online store is ready to be activated.  If you are not yet familiar with the process of activating a website you can follow these instructions.  The home page of your website should look like figure III.

  1. In content editing mode (Figure III), click "Configure this catalog for the first time".
  2. Follow the instructions.  Within a few minutes you will have an online shopping system.
  3. Now that the catalog is configured, more options will be available to you.  You can now add, update, and remove products to and from the catalog.

Expanding the Store

Using the navigation block, you may add pages to the website.  Since we only have one design, every page will be a new page of the product catalog.

  • Every page of this website can display a different set of products.
  • Each new page will inherit the default set of columns, however this can be adjusted on a page by page basis.  (i.e.: page specific)
  • The entire website will use the same taxes and shipping charges. (i.e.: sitewide)
  • The website owner will receive information about orders and transactions from PayPal.
Figure I
Figure I
Figure II
Figure II
Figure III
Figure III
Figure IV
Figure IV

    Copyright Clear Site Web Solutions Corporation  |  Victoria, B.C. Canada