Click here for a printer friendly version

Tutorial Introduction
Version 2.0

Please Note: This tutorial has been designed to be used only with accounts purchased after January 2004 -or- accounts that have the product import feature enabled. If you are not sure if this feature is enabled on your account please contact Pacific WebWorks Client Care by clicking here

If you do not have the product import feature enabled on your account click here to view the correct Tutorial for your account.

Welcome!

The Visual WebTools™ V4.1™ suite is a dynamic set of products designed to give small business owners the cutting edge needed to succeed in today's highly competitive e-commerce market. This latest edition of Visual WebTools has been extensively updated, providing much greater control over every aspect of creating an e-commerce enabled Web site.

 System Requirements

The following components are required to properly use the Visual WebTools suite:

• Windows 95 or higher operating system

• Microsoft Internet Explorer 5.0 or higher (Version 6 is recommended)

• A color monitor and video card capable of displaying a resolution of 800 x 600 pixel resolution and a minimum of 256 color capability.

• Internet connection with 28.8 modem or better

• 16 MB RAM (minimum)

• Visual WebTools is not designed for use with Macintosh; however, Mac users can use the Visual WebTools Extensions for Macromedia Dreamweaver and take advantage of all of the powerful tools Visual WebTools has to offer.

Note: If you are using a Macintosh and would like to install the Visual WebTools extensions for Dreamweaver login to your Visual WebTools account by clicking on the ‘Login to Visual WebTools' link from the Visual WebTools home page located at http://www.pacificwebworks.com. Once you are successfully logged into your account click on the link located to the right of the tools menu. Dreamweaver version 4 or higher is required.

• A CD-ROM drive is not required but is recommended. If you do not have a CD-ROM the application will be downloaded for you when you log in for the first time.

Note: Visual WebTools has been engineered to work with Microsoft® Internet Explorer version 5.0 or above (Version 6 is recommended). If you do not have this browser please install it from your Visual WebTools CD or download it from http://www.microsoft.com/windows/ie/downloads/ie6/default.asp.

Acceptable Use Policy

Pacific WebWorks' terms and conditions prohibit the use of this software for certain activities. For a complete list, refer to the Additional Terms and Conditions within the Introduction section of the online help located at http://help.visualwebtools.com.

By using the Visual WebTools software you agree that you have read and understand the terms and conditions contained therein.

Registering Your Passkey

First you will need to obtain your username and password. If you have a passkey follow the steps provided. If you already have a username and password go to the next section of ‘First Things First!'.

Your passkey is a combination of letters and should be on a label titled "Your Passkey is:" Each Visual WebTools package should contain one.

Once you have located your passkey then complete the following steps:

1. Make sure your computer is logged into the Internet

2. Open your Microsoft Internet Explorer browser

3. Enter the location: http://signup.visualwebtools.com in your browser's address bar

4. This will bring up a registration web site. Follow the easy instructions on-line to register your passkey. Remember to fill in everything completely and accurately

TIP: Verify you have entered in your correct email address. Once the signup form has been completely filled in and submitted your user name and password will be sent to the e-mail address you have provided.

Note: Depending on our server load your user name and password may take up to 30 minutes to be processed and sent to you.

First Things First!

Installing the WebWizard files:

1. Insert the Visual WebTools V4.1 CD into the CD-ROM drive on your computer.

• Click on the ‘Start' button in the lower left corner of your screen and then click the ‘Run' link.

• Type in your CD-ROM drive letter (X:/setup)
  Put your CD-ROM drive letter in place of the X.

• If you do not know what drive letter your CD ROM is, click on the operating system Start button and then choose Run. Another window will open and you will want to click on the Browse button, locate your CD ROM drive and select it.

2. Once the Installation menu appears click on Install Visual WebTools WebWizard. It will install the WebWizard and the Visual WebTools Tutorial onto your computer's hard drive.

3. If you do not already have Microsoft Internet Explorer 5.0 or higher installed on your computer, you will also want to install it by clicking the ‘Install Microsoft Internet Explorer 5.5 Windows Edition' located on the same CD-ROM.
   

The V4.1 Environment

To login to Visual WebTools, first make sure your computer is connected to the Internet. Next open your web browser and type http://www.pacificwebworks.com and click on the link of ‘Login to Visual WebTools' under the Current Subscribers section. Every time you log in to V4.1™, you will see a screen asking for your username and password.

The V4.1 Log in screen

Your username and password were assigned to you when you registered your Visual WebTools account. If you have not received your username and password or if you have forgotten them, you can contact technical support by submitting a username and password request by going to http://www.pacificwebworks.com/forgotpass.htm.
You can also call us at 1-801-578-9020.

If you have not registered your passkey refer to the section ‘Registering your passkey' in the beginning of this tutorial booklet.

Once you have successfully logged in, you will arrive at the Tools Manager screen.

The V4.1 Tools Manager screen

From this screen, you can access all the V4.1 tools that are on your account, as well as use the on-line Help and Live Chat Support features. You can also find V4.1 tips, access our Ideas Center and download Visual WebTools Extensions for Macromedia® Dreamweaver.

The V4.1 tools that are assigned to your account are also accessible from the Application Bar at the top of your computer screen.

The Application bar

My Account

From the Tools Manager you can access the My Account control box. This is where you set up all the preliminary items you will need to maintain your Web site and e-commerce account, open and close your site, change your personal information, change your password, set up your domain name, email address forwarding, and submit your site to search engines.

The My Account control box

Open/Close Site
This option allows you to open and close your live Web site. If your site is open, it can be viewed by anyone accessing your domain name on the Internet. If your site is closed, an "Under Construction" page will be displayed when your domain name is accessed.

Edit My Info
This option allows you to update your account data such as name, address, phone number, etc.

NOTE: This information is used by Visual WebTools for many things including the receipt displayed to your customers and domain name registration. It is important that this information is accurate and complete for these functions to work properly.

Change Password
This option allows you to change your Visual WebTools password to something easier for you to remember. We do recommend changing your password upon first time login.

NOTE: For increased security, we recommend that you change your password from time to time.

Edit Domain/Email Info
Your domain name is the unique address for your Internet web site. It's like your home address that people use to find your house. This option allows you to make changes to your existing domain name, associate a domain name to your Visual WebTools account, register a new domain name or modify your existing email for use with your Visual WebTools account.

View License
Visual WebTools comes with many options and modules. Some of these options and modules may be licensed separately from Pacific WebWorks. This option will show you which options and modules are installed in your Visual WebTools account.

FTP Capability

FTP stands for File Transfer Protocol. It is the way several files at a time are transferred across the Internet. V4.1™ fully supports FTP, which means that you can upload any type of file to your WebWizard™ projects, including sound and multimedia files.

If you choose to use a 3^rd party FTP Client (FTP program) then you will want to use the FTP address of ftp.visualwebtools.com. Once connected to the FTP server you will want to access your space by logging in using your Visual WebTools username and password.

Tutorial

Introduction

The tutorial is designed to give you a quick introduction to the design and e-commerce capabilities of V4.1™. During the tutorial, you will be building a Web site for a fictitious company, My-ecommerce-Tutorial.com, a store that sells different types of products.

While you were installing WebWizard on your computer you also installed the tutorial files. You will access these files later on in this tutorial. The tutorial will walk you through setting up your virtual storefront in WebWizard and implementing e-commerce into your Web site with ClipOn Commerce™. The time required to complete these sections will vary from person to person. Please allow yourself plenty of time to complete this tutorial.

For detailed instructions on any V4.1 component, see the online help. It is located at http://help.visualwebtools.com or visit our frequently asked questions located at http://www.pacificwebworks.com/support/faq_center.asp.

Part 1: Designing My-ecommerce-Tutorial.com

Part 1 of the tutorial will show you how to:

• Login to your account

• Name/Rename your project

• Add additional pages

• Create a table

• Create a folder for your images

• Import an image file into a folder

• Create a Horizontal Line using nested tables

• Add/Edit text
  
  

Starting your site

1. The tutorial files need to be downloaded to your computer. To do that point your browser to http://www.visualwebtools.com/tutorial_v2.exe.
   
   When prompted to Save or Run the file, choose Save, then save the file to your Desktop.
   
   Once that is completed run the file tutorial_v2.exe from your Desktop.

2. In your browser window, point your address bar to: http://www.pacificwebworks.com

3. Click the ‘Login to Visual WebTools' link under the Current Subscribers section:


Visual WebTools Login Screen

4. The V4.1™ login screen will appear. Enter your Username and Password and click the Login button.

The V4.1 Login screen

4. The next screen is the V4.1 Tools Manager. Click on WebWizard from the Tools Manager.

WebWizard link on Tools Manager page

5. You may also receive a security warning prompt asking if you want to install the ‘VWT ActiveX Control Module', click on the ‘Yes' button.



Visual WebTools ActiveX prompt

6. A prompt will appear to inform you that you are about to install the WebWizard Internet plug-in, click Continue.



Visual WebTools Internet plugin


7. If this is the first time you are logging in to WebWizard, a second screen will appear asking you to enter in your username and password to validate your account.




WebWizard account validation


8. The WebWizard will now install several application files to your computer. Download times of these files vary, so please be patient.
   

Creating a project in the Project Editor

1. Once you have successfully logged into WebWizard a prompt may appear to inform you that an index.html page has been created. Click OK.
   
   Note: You must have your first page named index.html for your website to be viewed correctly on the Internet.

2. The WebWizard editor will appear.
   



The WebWizard Editor

3. First you will need to create a new Project To create a new project click on the Local Files tab (these are called bottom tabs) located next to the Update tab in the lower left corner of the WebWizard screen.

The Bottom Tabs

4. You will now see the file directory window.

Your first project titled "First Project", will be created automatically for you.

5. From the Tool Bar click on the icon that looks like a yellow folder.
   
   

The Change/Edit Project Editor

6. Click on New

7. A prompt will appear, asking you for the name of the Project. Enter Tutorial and click CREATE. You will be returned to the Project Editor window.

8. In the Project Editor, select Tutorial (by clicking on the name ‘Tutorial').

9. Click DONE, This will take you back to the project so you can continue working on the tutorial.
   

Adding additional pages

1. From the Tool Bar select the icon that looks like a blue floppy disk.
   
   
   The Save, Import or Create Page Templates icon

2. Next select New Page from the menu (it is the first item at the top of the menu).
   
   
   The Save, Import or Create Page Templates menu

3. A prompt will appear asking you for the new file name. Type about_us.html in the text box.

4. Click OK. The about_us.html page will appear in the bottom section of the file directory windows

5. Repeat steps 1-4 using the following file names:
   
   electronics.html
   sporting_goods.html
   clocks.html
   tools.html

Importing Images

1. From the Tool Bar click the icon that looks like a blue floppy disk then click on the New Folder link (it is the second item from the top of the menu).

2. A prompt (another window) will appear, directing you to enter a name for the new directory. Enter pictures and click OK. A folder titled pictures will appear below the Tutorial project title.




3. Open the picture folder by clicking on the yellow folder left of the pictures folder name. The folder icon will open.



4. From the Tool Bar click the icon that looks like a blue floppy disk then click on the ‘Import File into Project' link. Another window will open and the File Viewer will appear.
   
   
   The Windows file viewer

5. In the box labeled File Name enter c:\pweb\tutorial. Press the Enter key on your keyboard .

6. When you have located your tutorial files, highlight all of the files in the directory by selecting the first file, then while holding down the shift key on your keyboard select the last file. This should highlight all of the files in the list.

7. Click the Open button. You will be returned to the WebWizard Editor and your imported files will be listed in the file window.

8. Click on the Update tab and the left window will change. Click on the option of ‘Overwrite Live Site'.

Note: You will want watch the FTP Progress bar located below the tabs. The upload could take up to 5 minutes, so please be patient.

9. When the upload has completed click OK to the ‘Update Done' message.
   

Please Note: For the purposes of making the tutorial simple to use & to concentrate on the capabilities of the Visual WebTools 4.1 software, we have created all of the images you will need for the Tutorial website. When you start building your actual website, you are responsible for creating your own images.

If you are not familiar with creating images you can use the Template Wizard. The Template Wizard will help you create a navigation & title bar for your website. For more information about the Template Wizard please visit the following URL: http://help.visualwebtools.com/webwizard.html#template_wizard

Creating a table

1. After you are returned to the WebWizard click on the Local Files tab.

2. From the top left window, click on the ‘P' (P stands for project) to the left of the project name of Tutorial.

3. Select the index.html page from the file window by clicking on the blue page icon to the left of the name.

4. Delete the words "This is your Start page" by placing your cursor to the left of that line of text & press Delete on your keyboard until it has been completely deleted .

5. From the Tool Bar click the icon that looks like a grid.
   
   

6. Then click on Insert Table.

7. The Table Editor window will appear within the left window.

The Table Editor window

7. In the appropriate text boxes enter the following information:

• Rows: 2

• Border: 0

• Width: 750 (Change the % to px)

• Columns: 2

• Cellpadding: 1

• Cellspacing: 0

Leave the V-align, H-align, and No Wrap functions at their default values. For information about these terms, see "Tables" in the WebWizard help section.

8. Click the gray UPDATE button in the Table Editor. You will be returned to the WebWizard editor screen.

9. Number the cells as shown, by clicking inside of each cell & typing the corresponding number. Remember to erase the number as you work within that particular cell.

Adding an Image

1. Place your cursor in cell 1.

2. From the Tool Bar click the icon that looks like a grid.
   
   
   Table editor icon

3. Select Increase Colspan from the menu. Cells 1 and 2 should merge.

4. Place your cursor in the merged cell 1 and 2.

5. Center your cursor in the merged cells by clicking the Center Justify icon from the toolbar.
   
   
   Center Justify icon
   

6. Click on the Image Editor icon located in the toolbar. Then click on the SELECT button in the Image Editor. (another window will open with the File Viewer window will open).
   
   
   Image Editor icon
   

7. Click on the Pictures folder then locate the image tutorial_logo.jpg and select it.

8. Click on the UPDATE button and you will be returned to the Image Editor with the logo you selected below.

9. Change the size of the image to a Height of 90 and Width of 750. Leave the Align, Border and Border Color at their default values.

10. Click your mouse in cell 1 and 2 so your cursor is within that cell.

11. Click Update in the Image Editor window. The tutorial logo image will appear in the top cells 1 and 2.

12. Delete the numbers 1 & 2 within the cell

The tutorial_logo.jpg in the table

Step 1: Inserting and Formatting Text

Note: This section of the tutorial will show you how to add text to your webpage. During this section of the tutorial we will show you how to copy & paste. Keep in mind that you can also type text directly into the editor instead of copy & pasting.

1. Click on the ‘Local Files' tab.

2. From the top left window, click on the ‘P' (P stands for project) to the left of the project name of Tutorial.

3. Click on the ‘pictures' folder.

4. Select the menu.html file from the file list by clicking on the image located to the left of the file name.

5. You should now see the menu text in the editor window

6. Click in the editor window (the larger window on the right side of the WebWizard) then press your ‘Ctrl' key and the letter ‘A' at the same time. This will select all of the text on the screen. Next, copy this text by holding your ‘Ctrl' key and pressing the letter ‘C'.

7. From the top left window, click on the ‘P' (P stands for project, as in the project name) to the left of the project name of Tutorial.

8. Select the index.html file from the file list by clicking on the image located to the left of the file name.

9. Now click your cursor in cell 3 then, hold down the ‘Ctrl' key & press the letter ‘V'. You should now have the menu text in cell 3.

10. Highlight all of the text (highlight the text by pressing and holding down the left mouse button and dragging it across the text)

10. Click on Edit Font from the right side of the WebWizard toolbar. The Edit Font window will be displayed.

The Edit Font window

11. Make the following changes.

• Font: Arial

• Style: Bold

• Size: 12

• Color: Navy

12. Click OK.

13. Highlight all of the Contact Information text. Click Edit Font from the toolbar, change the color of this text to gray.

14. Delete the number 3 within the cell by highlighting it & pressing Delete on your keyboard

The completed menu text and title

Step 2: Creating Links

1. Click on the ‘Local Files' tab.

2. From the top left window, click on the ‘P' (P stands for project) to the left of the project name of Tutorial.

3. Select the index.html file from the file list by clicking on the image located to the left of the file name.

4. Highlight the word Home (highlight the text by pressing and holding down the left mouse button and dragging it across the text)

5. Click on the Hyperlink Editor icon in the toolbar and the Hyperlink Editor menu will open.

Link editor icon

6. Click the link of Open Link Editor and the Hyperlink Editor will open.


Link Editor


7. Click on the Select… link located under the word "Internal" section. The File Viewer will open.

8. Under the Files window click on the index.html page, then click on the gray UPDATE button.

9. Scroll to the bottom of the Link Editor & click the Gray Update button. The highlighted text should now be underlined

10. Repeat steps 5 through 9 for the remaining menu options. They should be linked to the following pages:
    
    About us - about_us.html
    Electronics - electronics.html
    Sporting Goods - sporting_goods.html
    Clocks - clocks.html
    Tools - tools.html
    

Step 3: Copying pages

At this point you have created a template you can use for all of your pages. Templates are useful for making the site look uniform. In this part of the Tutorial we will show you how to copy your page as a template into other pages in your site.

1. Click on the ‘Local Files' tab.

2. From the top left window, click on the ‘P' (P stands for project) to the left of the project name of Tutorial.

3. Select the index.html file from the file list by clicking on the image located to the left of the file name.

4. Click your cursor inside of the Editor Window.

5. Press your ‘Ctrl' key and the letter ‘A' at the same time (everything on the page should now be highlighted)

6. Press your "Ctrl" key and the letter 'C' at the same time.

7. Click on the Local files tab.

8. Select the about_us.html file from the file list by clicking on the image located to the left of the file name.

9. Click your cursor inside of the Editor window. press the Space Bar on your keyboard Once.

10. Press your "Ctrl" key and the letter 'V' at the same time. The information from the index.html page should now appear in the editor.

11. Repeat steps 8-10 for the remaining pages (clocks.html, electronics.html, sporting_good.html & tools.html)

Step 4: Inserting and Formatting Text

1. Click on the Local Files tab.

2. Click on the ‘Pictures' folder located in the directory window.

3. Select the main_text.html file from the file list by clicking on the image located to the left of the file name.

4. You should see the main text in the editor window

5. Click in the editor window, hold down the ‘Ctrl' key and press the letter ‘A' at the same time. This will select all of the text on the screen. Next, copy this text by holding down your ‘Ctrl' key and pressing the letter ‘C'.

6. From the top left window, click on the ‘P' (P stands for project) to the left of the project name of Tutorial.

7. Select the index.html file from the file list by clicking on the image located to the left of the file name.

8. Place your cursor in cell 4 so that your cursor is flashing to the left of the number 4.

9. Hold down the ‘Ctrl' key and press the letter ‘V' to paste. You should now have all of the main_text.html text in cell 4.

10. Inside cell 4 highlight About My-ecommerce-Tutorial.com, click on ‘Edit Font' and make the following changes:

• Font: Arial

• Style: Bold

• Size: 14

• Color: Navy

11. Click on the ‘OK' button

12. Highlight the rest of the text and click on ‘Edit Font' and make the following changes:

• Font: Arial

• Size: 12

13. Click the OK button for the changes to become effective.

14. Click your cursor in the top left hand corner of cell 4 to the left of the words "About My-ecommerce-Tutorial.com". Press your space bar then press the left arrow key so your cursor is back the first spot of the cell.

15. Click on the 'Local Files' tab

16. Click on the Pictures folder

17. Click on the filename text mainpage.jpg and click the menu option Place in Editor. The image will appear in cell 4.
    

18. Select the image by clicking on the image and eight small handles (squares) should surround it. With the right button on your mouse click on the image and select Open in Image Editor.

19. From the Image Editor menu, enter the following information:

• Height: 190

• Width: 225

• Align: Left

• Border: 0

19. Select the image again. Eight small handles (squares) should surround it.

20. Click the gray UPDATE button from the Image Editor.

21. Delete the number 4 that appears below your text.

The resulting page should look like this:

Saving Pages

It is always a good idea to save your pages periodically. Here we will show you how to quickly save a page.

1. Click on the Local Files tab

2. From the top left window, click on the ‘P' (P stands for project) to the left of the project name of Tutorial.

3. Each page that has not been saved will appear in red & pages that have been saved will appear in black.

4. Click on the word index.html from your list of files

5. Click on Save from the menu that appears
   
   

6. Repeat steps 1-4 for any other page names that appear in red

Inserting a Horizontal Rule

Tables are powerful tools for designing Web pages. It is possible, for example, to put a table within a table. When you do this, Web designers call it a "nested table". It is also possible to create a one-cell nested table, and to use it to place text or graphics exactly where you want them. This section shows you how to create a one-cell nested table.

1. From the Tool Bar select the Table Editor icon (it looks like a grid). Then select Insert Table. Enter the following information:

• Rows: 1

• Border: 2

• Width: 100 %

• Columns: 1

• Cellpadding: 1

• Cellspacing: 0

2. Place your cursor at the end of the Main text section that reads " It's just good business... " and press the Enter key on your keyboard.

3. Click the gray UPDATE button and then click on Back at the top of the table editor menu.

4. Select the new table by clicking on the table border. Once selected it will be surrounded by eight small handles.

5. From the Tool Bar click the icon that looks like a grid.
   
   
   Table editor icon

6. Select Edit Table. The Table Editor screen will appear.
   
   
   The Table Editor window

7. Click the Border Dark Color radio button and then click on any color within the color palette. Repeat these steps with Border Light Color and with Background Color.

8. Click UPDATE

This table serves merely as a design feature and appears as a horizontal line on your page.

Inserting Text into a Nested Table

1. From the Tool Bar select the Table Editor icon (it looks like a grid).

2. Click your cursor below the newly created nested table.

3. Click on ‘Insert Table' and Enter the following information:

• Rows: 1

• Border: 2

• Width: 100 %

• Columns: 3

• Cellpadding: 1

• Cellspacing: 0

4. Place your cursor below the newly created nested table and press the Enter key on your keyboard.
   

5. Click UPDATE in the Table editor and then click on Back at the top of the table editor menu.
   

6. Select the new table by clicking on the table border. Once selected it will be surrounded by eight small handles.
   

7. From the Tool Bar click the icon that looks like a grid.
   
   
   Table editor icon

8. select Edit Table. The Table Editor window will appear.
   

9. In the Table Editor window, click on the radio button next to the Border Dark Color and then click on the ‘Click here to choose a custom color' located below the color palette. Enter in #000000 and click on the ‘Create' button.
   

10. Click on the radio button next to the Border Light Color and then click on the ‘Click here to choose a custom color'. Enter in #6666CC and click on the ‘Create' button.
    

11. Click on the radio button next to Background and then click on the ‘Click here to choose a custom color'. Enter in #CCCCCC and click on the ‘Create' button.
    

12. Click UPDATE at the top of the Table Editor

Return to the WebWizard Editor and number the cells as follows:

13. Place your cursor in cell 1 and click Center Justify. Delete the number 1 & type the word Electronics.

 
The Center Justify button

14. Place your cursor in cell 2 and click Center Justify. Delete the number 2 & type the word Clocks .

15. Place your cursor in cell 3 and click Center Justify. Delete the number 3 & type the word Tools .

16. Highlight the text in cells 1, 2 and 3 and click the ‘Edit Font' button. The Edit Font menu will appear.

17. Make the following changes:

• Font: Arial

• Style: Bold

• Size: 14

• Effects: Check the Underline box

• Color: Navy

15. Click OK

Adding Images into Nested Table

1. Place your cursor in cell 1 at the end of the Electronics text and press the Enter key on your keyboard.

2. Click on the Image Editor button from the toolbar.
   
   
   Image editor icon

3. Click Select. The file viewer window will open.

4. Click on the ‘Pictures' folder.

5. Select electronics.jpg and click UPDATE.

6. After returning to the Image Editor window, enter the following information to resize the picture:

• Height: 140

• Width: 155

• Align: leave empty

• Border: 1

7. Click UPDATE in the image editor. You will be returned to the WebWizard editor. The image of a portable radio will appear beneath the Electronics text.

8. Place your cursor to the right of the image and press the Enter key on your keyboard. A space will appear below the image.

9. Place your cursor in cell 2 to the right of the Clocks text and press the Enter key on your keyboard.

10. Insert clock.jpg by following the steps outlined for electronics.jpg. Enter the same information in the Image Editor.

11. Click UPDATE in the image editor . The image of a Clock will appear beneath the Clocks text.

12. Place your cursor in cell 3 to the right of the Tools text and press the Enter key on your keyboard.

13. Insert tools.jpg by following the steps outlined for electronics.jpg. Enter the same information in the Image Editor.

14. Click UPDATE in the image editor . The image of a Toolbox will appear beneath the Tools text.
    
    Your page should now look like this.

Linking images

1. Click on the picture of the portable radio (Electronics). It will have the square handles around it.

2. Click on the Hyperlink Editor icon in the toolbar and the Hyperlink Editor menu will open.

Link editor icon

3. Click the link of Open Link Editor and the Hyperlink Editor will open.


Hyperlink Editor

4. Click on the Select… link located under the word "Internal" section. The File Viewer will open.

5. Under the Files window select the electronics.html page, then click on the UPDATE button.

6. Scroll to the bottom of the Link Editor & click the Gray Update button.

7. Repeat the steps 1 through 6 for the Clock and the Toolbox using their corresponding pages. (Clock = clocks.html & Toolbox = tools.html)

Completion of your website

To make My-ecommerce-Tutorial.com to be a real live site, go through the following completion steps.

1. Click on the Update.



2. Select the Overwrite Live Site option from the left window.




3. A prompt will appear informing you that you are about to save unsaved files. Choose either OK to save or Cancel not to save any unsaved files.



4. An ALERT will then appear and inform you that you are about to make your current project a Live Internet web site. Click Continue.



5. After a few moments an Update Done window will appear when your site is completely saved and live. Click OK.

You now have web pages. You can view your site by clicking on the blue disk icon from the toolbar and then choose the "View Live Site" link.

Part 2: Adding E-commerce

Part 2 of the tutorial will show you how to:

• Add Products to your Website

• E-Commerce enable your Website

• Build a Product database

• Edit Payment and Tax Options

• Create Shipping Options

Because we have already created our web site we will now add the commerce information to sell our Products.

Opening ClipOn Commerce

If you are coming from the WebWizard interface from part 1 of the tutorial.

1. Click on the blue disk icon located in the toolbar and then choose the last link of ‘To Visual WebTools 4.1'.

2. You now will be in the Tools Manager of the Visual WebTools screen.

3. Select ClipOn Commerce™ and the main menu will be displayed.

ClipOn Commerce main page