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 strange logo (actually the Zencil Web Solutions Corporation logo).
  3. In the Zencil toolbar click the navigation icon.
     
  4. Choose the drop down menu system.
  5. The wizard window in Figure I will appear.
    • In the left-hand column, set "BG Color" to none.
    • Click "OK".  Now your work should match Figure II.

The Store

  1. In DreamWeaver, place the blinking cursor in the large white portion of the page.
  2. In the Zencil 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 and to the web site owner.  You'll both be able to 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.
  • The entire website will use the same taxes and shipping charges.
  • The website owner will receive information about orders and transactions from PayPal.
Figure I
Figure I
Figure II
Figure II
Figure III
Figure III
 
    Copyright Clear Site Web Solutions Corporation  |  Victoria, B.C. Canada