Username:

Password:
 

Forgot your Username and Password? click here

Visual WebTools™ Software gives you everything you need to create and manage a successful business on the Internet. Read through the Visual WebTools process below to explore how the Visual WebTools™ Software can be used to start your own successful business online.

WebWizard 4


Introduction


The WebWizard™ site design and editing tool is the heart of the V4™ product suite, and the place where your site design begins. In the WebWizard environment you can design and edit all the pages of your Web site. You can create tables and frames, insert images, and edit text. The WebWizard is also where all your WebProfiler forms are placed, and where images from your ClipOn Commerce™ product database are displayed.


All of the menu items in WebWizard tool bar are explained here. The best way to learn about all the options in this program is simply to try them out. Try different text colors, link colors, and page layouts until you find the combination that works best for you.


Getting Started


  1. Go to www.VisualWebTools.com & login with your Visual WebTools™ username & password. From the Visual WebTools™ V4 Tools Manager click on WebWizard

    WebWizard link


  2. Enter your user name and password. If this is the first time you are logging in to the WebWizard tool, a second screen will appear to inform you that you are about to run the WebWizard program. Click Continue. All the client side downloading will begin at this point. This process takes about 10 minutes on a 56K modem.

    The second login is the PWEB server's way of determining where to look for your WebWizard files on your personal hard drive. This screen will appear whenever you log in to the WebWizard environment.

Back to Top >>

The WebWizard Editor


WThe WebWizard Editor


This screen is the WebWizard Editor, and is divided into five areas.


  • The largest screen is the actual WebWizard Editor – all your design work is done in this editor.
  • On the left side of the editor is a section called the Left Step and this is where all the action takes place. Once you click on a function, the menu items for that function will be listed in the Left Step, For instance, if you click on the "disk" icon, which is the "save, import or create page templates" tool - all of its menu options such as "new page", "save", and "remove folder" will be listed in the Left Step.
  • Underneath the Left Step is the FTP Progress area. As you upload files from your local machine, this area will display the FTP progress of your transfer.
  • Above the Left Step is the Working File area which lists the file name in which you are working.
  • The Tools Manager is the white area at the very top of the page. This area contains all of the V4.1 tools such as Clipon Commerce or WebStats. This area will be displayed throughout Visual Web Tools.
  • Directly under the Tools Manager, in blue, is the WebWizard Tool Bar. This contains all of the tool buttons for the different WebWizard functions. By passing your arrow over each, alternate text pops up with a description for that particular function.

You can create many projects with the WebWizard tool, and each project is kept in a separate "root directory." In the Directory window, your root directory is displayed in bold purple text. Your folders are listed below the root, with a folder icon and small square box icon next to each folder. If you have files in a folder, the square box icon will contain a + or a - symbol depending on whether the file names are displayed.


To view the files in your root directory/project:


  • Click on the Local Files tab at the bottom of the Left Step. The files or folders in the project will appear in the bottom half of the Left Step.

To add a folder to your root directory/project:


  1. Click on the "P" to the left of your project name. This will cause the Top Level directory to appear in the Working Files area above the Left Step.
  2. Now click on the Disk icon in the WebWizard tool bar and select "New Folder".
  3. Type the name of the New folder you would like and click OK.

To add a subfolder to a folder:


  1. Click on the folder icon next to the subdirectory name in which you wish to add a folder. This will open it.
  2. Now click on the Disk icon in the tool bar and click "New Folder".
  3. Type the name of the New Folder you would like and click OK.

To view the subfolders in a folder:


  • Click on the + - icon. The folders in the selected subdirectory will appear below the subdirectory, next to a folder icon and a + - icon

To view the files in a folder or subfolder:


  • Click on the folder icon next to the name of the directory you want to open. The folder icon will open. The files in the subfolder will appear in the File Window below.

    The open folder icon


To view any file in the WebWizard Editor window:


  • Click the page icon next to the file name. The file will open in a pop-up window in the WebWizard Editor.

    The file name page icon


Back to Top >>

Bottom Tabs


WebWizard Bottom Tabs


It's important to note the Bottom Tabs, located directly below the Left Step, as they open the Left Step and set it to display the menu items for the WebWizard tools. More information for each will be given throughout the Online Help but for now familiarize yourself with their location and basic functions.


Local Files Tab - This tab opens the Left Step and displays the menu options for each of the buttons on the WebWizard tool bar.


Update Tab - This tab opens the FTP Update Tools where you can overwrite, download, and update your products & Channel Data.


HTML Tab - If you are a more advanced user and want the option of coding your own HTML this is the place to go. CAUTION: The mission of PWEB and Visual Web Tools is to provide a solution for creating a Web site in which, as a user, you don't need to do HTML coding. Any complications arising from additions made in the HTML editor are strictly your responsibility. PWEB assumes no liability and offers no support for client-inserted code or scripts.


The following are all the functions in WebWizard and their associated options.


Back to Top >>

Save, Import Pages


The Save, Import or Create Page Templates Menu


Note: You can also access a mini page editor by left-clicking on the desired page name in the File window. This will bring up a menu with the Save, Move, Rename, Revert, and Remove options.


The options in the Save, Import or Create Page Templates menu are:


New Page
This function allows you to add pages to your Web site. There is no limit to the number of pages you can add.

  1. From the Local Files Screen, select the directory in which you would like to add a new page.
  2. Click on the Save, Import Pages, Create Page Templates icon and select New Page from the menu.
  3. After selecting New Page, a prompt will appear asking you to name your new page.
  4. Enter the name for your new page. If you do not specify a file extension, the ".html" default extension will be added to your file name. Note: Some browsers have trouble with file names containing spaces, so use the underline character for spaces between words.
  5. You will automatically be directed to the new page. The new page name will appear in bold in the file window.

New Folder
This option adds a subfolder to your currently selected project. The new folder will appear in the directory window of the WebWizard editor, underneath the project name. A folder icon will be next to the file name. When this icon is clicked, the folder will open and its contents will be shown in the file window. If clicked again, the folder will close.

  1. From the Local Files Screen, select the directory to which you want to add a folder.
  2. Click on the Save, Import Pages, Create Page Templates icon and select Add Folder from the menu, a prompt will appear, asking you to name the new folder. Enter the name for the new folder & click OK
  3. The new folder will be automatically added to the current directory.

Save
This could quite possibly be the most important menu item of them all. Saving your work regularly and often is essential.


Save As
This allows you to save your current document under another name. The Save menu will prompt you. The newly named document appears in the bottom window as an un-bolded file.


Revert Page
This option will revert your current page to the last saved version. Choosing this option will cause you to lose all changes made since your last save.


  1. A prompt will appear, asking if you wish to go back to the last saved copy of your page, thus losing all current changes.
  2. Click OK if you wish to revert the file, or Cancel if you do not.

Clear Page This function allows you to completely erase the contents of the file in which you are working and at the same time clears the editor. Warning: This deletes everything in the file you have open- do not choose this option unless you want to start over completely within that file.


Change Page Name
This option allows you to change the name of your current page.

  1. A prompt will appear asking you to change the name of your page.
  2. Enter the desired name change. The new page name will be updated automatically.

Remove Page
This option allows you to permanently remove the current page from your project.

  1. A prompt will appear, asking if you want to permanently delete the file.
  2. Click OK if you wish to delete the file, or Cancel if you do not.

Remove Folder
This option will remove the currently selected folder and all of its contents. To remove a folder:

  1. From the directory window, select the directory you want to delete.
  2. After selecting Remove Folder, a prompt will appear, asking if you wish to permanently delete the folder and all of its contents. Click OK if you wish to delete the folder and all of the files within it, or Cancel if you do not.

Import File into Project
This option allows you to import any type of file from your local computer system using FTP. To import a local file:

  1. After selecting this option, a menu of your computer files will appear.
  2. Choose the file you wish to insert and open it. The file will be added to your Local File list in the currently selected directory.

Import URL
This option allows you to import any existing Web site into the WebWizard Editor screen.

  1. After selecting Import URL, the Import URL screen will appear.

    The Import URL screen

  2. Enter the URL address for the Web page you wish to import
  3. Enter the name you want the page saved under in your project. (Note: You cannot use a page name that already exists)
  4. Select a directory in which to save images from the imported page.
  5. Click Update. The imported file will be in your File Viewer window.

Move File
This option allows you to move a file from its current directory to another directory. To move a file:

  1. Select the file you want to move.
  2. After selecting the Move File option, the Directory Viewer will appear.
  3. Click on the directory where you wish to place the file. The directory where your file is currently located will be listed next to Selected Directory.
  4. Click Update. The file will be moved to the new directory automatically.

Back to Top >>

Template Wizard


This option allows you to create a custom page template that you can use on all or specific pages of your website.


The Main Tab



Pick New Template: This option allows you to choose between 6 different frameset layouts.


Save Template: Click this link once you have completed creating your template.


Set Color For: This dropdown menu option allows you to choose specific colors for the sections of:

  • Entire Template
  • Button/Headline Fonts
  • Theme Images
  • Background

Set Button Style: These 3 different options allows you to choose where your navigation buttons will be placed on your template.


The Leftbar Tab



Pick New Template: This option allows you to choose between 6 different frameset layouts.


Save Template: Click this link once you have completed creating your template.


Set Color For: This dropdown menu option allows you to choose specific colors for the sections of:


  • Left Bar
  • Left Image

Set Theme Image: This dropdown menu option allows you to choose a variety of custom prebuilt themes.


Select a Custom Theme: Clicking this will allow you to choose a custom image from your computer


The Titlebar Tab



Pick New Template: This option allows you to choose between 6 different frameset layouts.


Save Template: Click this link once you have completed creating your template.


Set Color For: This dropdown menu option allows you to choose specific colors for the sections of:


  • Title Bar
  • Title Bar Image
  • Title Bar Text

Set Theme Image: This dropdown menu option allows you to choose a variety of custom prebuilt themes.


Select a Custom Theme: Clicking this will allow you to choose a custom image from your computer


Title Attributes:

  • Change Title Font: Allows you to change the font for your template title
  • Change Title Position: Click on this link and It will turn red, drag and drop the template title position. Once you have the template title where you want it click on the link again and it will turn black to indicate it has been locked.
  • Change Title Text: This will allow you to change the title text to the font desired.

The Buttons Tab



Pick New Template: This option allows you to choose between 6 different frameset layouts.


Save Template: Click this link once you have completed creating your template.


To make changes to a button first select the button from the template preview on the right side of the Template Wizard by clicking on it.


Set Color For: This dropdown menu option allows you to choose specific colors for the sections of:


  • Buttons
  • Buttons text

Button Attributes:


  • Alignment: By choosing an alignment option it allows you to align your button text either left, center or right within the button.
  • Change Button Font: Allows you to set the font for the button text.

Current Button:


  • Name: Allows you to name the current button you are setting the properties for.
  • URL: You can enter in an external website address or choose the link below it of 'Pick File' to choose one of your internal URL's.

Update Current Button: Once you have set your current button properties click this link to update your changes for the current button.


Delete Current Button: This allows you to remove the button that has been selected from the template editor window.


Add As New Button: This option once clicked on will add a new button with the properties that were set.


Add Template To Page
This option allows you to add templates you have already created to the page you are currently editing.


Remove Template
This option will remove the template you have created for the page you are currently editing.


Password Protection
This option allows you to protect selected folders in your Web site project for viewing only by selected visitors or customers. When designing WebProfiler forms, you can choose to have your viewers automatically added to a channel upon form submittal. If they are added to a channel, an automatically generated password is sent to their e-mail address which grants access to the pages you select.


To password protect a folder:

  1. Click on the Update tab located in the bottom tab bar. Then choose the 'Products and Channels Data' option. This will update your channels list within your WebWizard project. Once this has updated you will receive an Update Done alert, click OK to it.
  2. Click on the Local Files tab located in the bottom tab bar. The Local Files window will open in the left step, click on the folder that you wish to password protect.
  3. Then click on the Save, Import Pages, Create Page Templates icon to open the menu options in the Left Step. Click Password Protect from the menu. The Password Protection window will appear.
  4. The folder you wish to password protect will be listed under Currently Changing.
  5. You should have created groups within WebChannels and they will be listed directly below the folder you are wishing to protect.
  6. Click Update. The password protection will be removed from the selected folder.

To remove password protection from a folder:


  1. From the directory window, select the folder from which you wish to remove password protection.
  2. Click Password Protection from the Page menu. The Password Protection window will appear.
  3. De-select all channels by un-checking each channel checkbox.
  4. Click Update. The password protection will be removed from the selected folder.

View Live Site
This option allows you to view your site live.


To Visual WebTools 5
This option links you to the Visual WebTools main page where you can access any of the V4 tools.



Back to Top >>

Page Preview


This tool allows you to view the page you are currently working on. All internal and external links are functional from here, as are all form elements. However, the scrolling image scriptlet and external links from created frame pages will not work in the preview. Scripting that you have created directly in HTML code also may not work in the preview.


The Page Preview Icon


Back to Top >>

The Project Editor


As we mentioned above, a project titled First Project is automatically created for you when you first begin work in the WebWizard editor. To rename this project or to create a new project, you must open the project editor. After you have established projects, the project you worked on most recently will open whenever you log in to the WebWizard environment.


The Project Editor


There are several functions in the project editor.


New
This creates a new project. If New is clicked, the Create New Project screen appears. From this screen, you can name a new project, and then create or cancel this project.


Back Up
By clicking this button you can create a backup copy of your project files. The Back up Project screen will appear, allowing you to choose a name for the backup project. You can then choose to create or cancel the backup project. It is always a good idea to save your projects in this way, as it is very easy to make changes to a project, save those changes, and then wish that you hadn't changed anything! When this happens, you simply use the back up copy instead.


Note: The Backup option is essentially a snapshot of your project at the current time. The Backup option does not automatically update itself. All HTML files and image files are included in the backup. However, all databases such as WebContacts and ClipOn Commerce databases, are not included.


Rename
This button allows you to change the name of the selected project.


Remove
This button will remove the selected project. The Remove Project screen will appear, prompting you to type "REMOVE". This is case-sensitive and must be typed in all caps. A prompt will then appear, asking if you are 100% sure that you want to completely and forever delete these files. Clicking Yes will delete all files associated with that project, including backup files.


Done
Click this button to activate the selected project in the WebWizard editor.



Back to Top >>

FTP Update Tools


This tab is located at the bottom of the Left Step and choosing this tool will open a window listing three options.


The FTP Wizard window


  1. Overwrite Live Site - This allows you to overwrite your live Web site with your currently selected project.
  2. Download Live Site - This allows you to download a copy of your live Web site and make it either a new project or overwrite your current project
  3. Product and Channels data - This allows you to update all your plug-in information, such as new WebChannels, Autoresponder's and ClipOn Commerce™ product additions. Any new updates made to WebWIzard or your account will also be download at this time.

Change/Edit Project
This option will take you to the Project Editor pop-up menu.


Logout
This option will log you out of WebWizard and Visual WebTool™.


Return to Visual WebTools Main
This option will return you to the V4.1 Tools Manager.


Back to Top >>

HTML Editor


This displays a window of your current page's HTML code.


Please note that we do not provide support for HTML editing. If you are not comfortable with HTML editing, we recommend that you speak with a web developer or someone who is familiar with HTML Code.


Below is a link if you would like more information regarding HTML editing/coding: http://www.bravenet.com/reviews/intro/html.php


Edit HTML This allows you to edit the actual HTML code of your documents. There are several options in the HTML editor.


  • Commit - This function will save the changes made in the HTML code
  • Restore - This function will restore the HTML code to its last saved version
  • Cancel - This function takes you out of and stops the HTML editor.
  • Find - This function will find any element typed in the text box, i.e., all the tags.
  • Replace - This function will replace all the elements placed in the Find text box with any element place in its text box.

You can insert extra Java scripting in the HTML editor. However, any complications arising from additions made in the HTML editor are strictly your responsibility. PWEB assumes no liability and offers no support for client-inserted code or scripts.


Back to Top >>

Color Editor


The Color Editor icon


Internet Color


One of the most exciting elements of Web design is the multitude of colors available for making your ideas become realities. However, understand that it is very probable that your carefully planned color schemes will not be what every viewer to your site sees.


Differences in computing systems and monitors can cause your designs and Internet artwork to be rendered differently, sometimes dramatically so, on different systems. Therefore, it is important to design with Web-safe colors.


Web-safe colors are the 216 colors universally honored among all browsers, operating systems, and computer platforms. Though there are 256 colors available on an 8-bit system, each operating system reserves 40 for its own use, leaving 216 universal colors.


The 216 color choices for the Web have only 6 red values, 6 green values, and 6 blue values: combining these values makes up the different colors. Web colors are described in hexadecimal code – a numbering system specific to computers. This means each color is a combination of 00, 33, 66, 99, CC, and FF. The Color Editor in WebWizard displays only the Web-safe color palette.


Choosing Colors


Your color choices are by far your most obvious design elements on your pages. Therefore, it is important that your colors do not detract from a visitor's overall experience on your site.


When choosing color, think of contrast. For instance, if you are using a light blue background, a dark colored text usually looks better than bright blue text. Color combinations that are pleasing to the eye will make viewers want to spend more time on your site.


On Web sites, consistency and continuity are important. Keeping similar, if not exact, background and link colors on all your pages provides a pleasant experience for your users.

  • If you are going to have a colored background on any part of your site, you may want to make your graphics over that background transparent, so that the typically white background of your graphic will not show up. Printing pages with colored backgrounds is more difficult than printing Web pages with white backgrounds.

In the Color Editor, you can choose the colors for your Web pages, including background, text, link and visited link colors. Once elements in the Color Editor are saved, these elements will become your page elements and will appear on every page thereafter. However, you can change the elements on each page of your Web site. Changing color elements on a page will not alter the colors on a previously created page.


To change the color of an element:

  1. Select the Color icon.
  2. The Color Editor will be displayed in the Left Step.
  3. Choose your desired color from the color menu by placing your mouse over the appropriate color square and double-clicking. The Alternate text for each color square shows its hexadecimal number so that you can make note of your favorite colors.
  4. The name of each color element will be displayed in its current color in the small white box on the right side of the color editor.

The Color Editor


There are several elements for which you can determine color.


Background
This function changes the background of the page you are currently editing


Default Text
This function sets the text color of your current page.


Link
This sets the color of links created in the current page. This will be the color of links before they have been clicked.


Visited Link This function will set the color of the visited links in the current page. A link is considered "visited" after it has been clicked on at least once during the time period set in each user's browser.


Active Link
This sets the color of the active links of the current page. A link is considered "active" while it is being clicked.


As you edit the color elements, the current color of each element will show in the left-hand box.


You also have the option of creating custom colors. To create a custom color:


  1. Select from the menu the element for which you wish to create a custom color.
  2. At the bottom of the color menu is a gray rectangle box containing the words, "Custom Color." Click this once.

    Custom Color Editor

  3. You will see the Custom Color Editor. From here, you can move the red, green, and blue selection bars around until you have created your desired color.
  4. The color you are creating appears in the bottom left square box, and its hexadecimal number appears in the text box.
  5. You can also simply insert the hexadecimal number of the color you wish to create in the text box.
  6. After you have created your custom color, click Create. Your custom color will be applied automatically.

Back to Top >>

Image Editor


The Image Editor icon


Insert/Edit Image
This option lists and displays the image you want to edit.

  1. From the WebWizard Tool Bar, click the Image Editor Icon. The Image Editor window will appear in the Left Step.
  2. In the Image Editor, click Select to choose an image to insert OR you can right click on the image you would like to edit and select "Open in Image Editor".
  3. If you choose "select", the File Viewer window will appear. All your folders containing image files will appear in the bottom left-hand window. Clicking on the folder + icon will open the folder, and your image files will be displayed in the right-hand window.
  4. Choose a file to insert. Click Update. You will be returned to the Image Editor.
  5. If you right clicked on an image it will automatically appear in the Image Editor.
  6. The image you selected will be displayed above the Image Editor. You can now select options for your image. The options are:

    • Height - This function determines the vertical height of your image in pixels.
    • Width - This function determines the horizontal width of your image in pixels.
    • Alignment - This allows you to position your image on your page in various ways.
    • Border - This determines the pixel width of the border around your image. You can also choose the color of your image border by clicking on the desired color square in the color menu.
  7. When you have chosen your desired image options, click Update. You will be returned to the WebWizard editor where your image will be placed automatically.

Select Background Image
This option allows you to place an image in the background of your Web page. A background image can have text written over it.

  1. After clicking Select from the Image menu, the Select Image window will appear. All your files with graphic extensions will be displayed.
  2. Select the file you want to use and click on it. Click Update
  3. By selecting selecting Set as Background, the image will automatically be applied and displayed in the editor as the background for that page.
  4. If you have a background image that you don't want anymore then select Erase Background Image and the image will be omitted and your files displayed to make a new selection.

Note: You can also access a quick-click Image Editor by clicking on the image icon next to the image title in the file directory.


On-line Image Library
The On-line Image Library contains several photographs and graphics you may use on your Web pages.

  1. After selecting On-line Image Library from the Image menu, the Image Library screen will appear.
  2. Select the category of image you want to use.
  3. Select an image to use in your Web site.
  4. A full-size version of the image will appear. Select whether you want the large or smaller graphic on the light or dark background.
  5. A prompt will appear, asking you to name your image. Name the image and click OK. Do not add a file extension to the image name. The image will be added to your current directory.
Back to Top >>

HyperLink Editor


The HyperLink Editor menu


In the WebWizard Editor, you can create links to other pages or elements within your site and to external Web pages.


The functions within the HyperLink menu are:


Open Link Editor/Create Link
This option allows you to make selected text hyperlinks to external URLs or to other pages within your Web site.


Remember that when you are creating links, you first need to select an element on your page that you want a user to click on to access the link, this is usually text or an image.


To create an external link:


  1. From the HyperLink Menu, select Open Link Editor. The Link Editor window will appear.
  2. Under External, choose the URL's prefix from the drop-down menu of the first text box.
  3. Enter the body of the URL in the second box; for example, "www.pacificwebworks.com"
  4. Enter the name, if any, of the anchor to your desired page.
  5. Click Update.

To create an internal link:


  1. Under Internal, click Select. This will take you to the File Viewer window.
  2. Select the file you wish to link to.
  3. Click Update. You will be returned to the Link Editor window.
  4. The file you selected will be displayed. If there are any anchors in that file, they will be listed next to the file name in the drop-down menu. Select what anchor, if any, you want to link to.
  5. Click Update.

Links within frames
You can create links in a frameset page from one frame to another.


  1. Select the text you want as a link.
  2. From the HyperLink Menu, select Open Link Editor. The Link Editor window will appear.
  3. Click Select under the Target your Page option. This will take you to the File Viewer window.
  4. Select the the file that contains your Frameset.
  5. Click Update. You will be returned to the Link Editor window.
  6. You can now select how you want the frame page link to appear: within the frameset by selecting the name of the Frame, or as a new screen by selecting New Window. Selecting the blank option will default to displaying the linked-to page within the same frame.
  7. Click Update.

Place an Anchor
An anchor is a "bookmarked" place within a Web page that takes viewers to a defined destination within a page, rather than to the beginning of the page.


  1. Highlight the text you want to use for your anchor. From the HyperLink Menu, select Place an Anchor. The anchor window will appear.
  2. Enter a name for the anchor.
  3. Click OK.

To link to an anchor, attach the " # " sign and the anchor name after the page name in the Create Link option.


Remove Link
This option will remove the hyperlink connected to the selected text.


  1. Select the text from which you want the link removed.
  2. From the Link menu, click Remove Link.
  3. A window will appear, stating that link has been successfully removed.

Show Link Information
This option shows you the link information of selected text.


  1. Select the link that you want to check.
  2. From the Link menu, click Check Link.
  3. A window will appear, displaying the link information.

Back to Top >>

Table Editor


The Table Editor Menu


The functions of the table editor include the following:


Insert Table
This function allows you to create a new table wherever your cursor is placed. To create a new table:

  1. After clicking Insert Table, you will see the Table Editor window.

    The Table Editor window


    • Rows - Determines the number of horizontal rows in your table
    • Columns - Determines the number of vertical columns in your table.
    • Border - Determines how many pixels your table border will be. To have no table border, set this option at zero. If you set your table border at zero, you will need to select the Borders On/Off option.
    • Cellpadding - Determines the number of pixels between cell walls and cell content.
    • Width - Determines the width of your entire table. You can set the width at absolute pixels or at a percentage. If you want your page to take up the full amount of available screen space on all monitors, set the absolute width at 100%.
    • Cellspacing - Determines the number of pixels between each table cell.
    • V-align - Determines the vertical alignment of cell content.
    • H-align - Determines the horizontal alignment of cell content.
    • No Wrap - Checking this option ensures that your cell content will not occupy more than one line in the cell space, but will continue on a single line for the entire length of the content.
  2. Place your cursor on the page where you want your table placed
  3. Make your table properties selections & click Update
  4. Your new table will automatically appear in the WebWizard editor.

Edit Table Properties
This function allows you to edit the properties of your current table. To edit a table, it must be selected: you select a table by clicking on the table border, making the eight square "drag" handles appear. These handles can be used to manipulate the size of your table. Once this function is clicked, the Table Properties window will also appear. In this window, you can change all the table properties set in the Insert Table function.


In this function you can also change the color of your table background and border colors. This function will change the background color of your entire table; See below to change an individual cell.

The color options in this function are:

  1. Border Dark Color - Sets the color of the shadow border of your table cells.
  2. Border Light Color - Sets the color of the basic border of your table cells.
  3. Background Color - Sets the color of your table background.

To choose a color for any of the three color options:


  1. Click the radio button next to that option.
  2. Click on the color square of the desired color from the color menu.
  3. The color chosen will appear in the square next to the appropriate color option.

Edit Cell
This function allows you to set the properties for an individual cell. Though you can set height and width properties for an individual cell, results may be unfavorable if the individual cell attributes conflict with the entire table.

  1. Place your cursor in the cell you desire to change.
  2. Select Edit Cell from the Table Editor. The Cell Editor screen will appear.
  3. Insert the desired properties in the text boxes, or choose from the drop-down menus.

    • The horizontal and vertical alignment menus determine the placement of content within the selected cell.
    • To change the color of a cell, check the appropriate radio button. Select the desired color box from the color menu. The chosen color will appear in a square next to the appropriate color option.
  4. Click Update. The changes will be applied to the selected table cell.

Toggle Borders
This function allows you to see a silver one-pixel border on tables that have the border properly set at "0". This border does not show up in Internet browsers. It is also not preserved when a page is saved and closed; thus, you will need to check the Toggle Borders button each time you open your project.


Add Row
This function allows you to add a horizontal row to the current table, above the row in which your cursor is placed.


Add Column
This function will insert a vertical column to your selected table, to the left of the column in which your cursor is placed.


Delete Row
This function will remove the horizontal row of the cell in which your cursor is placed.


Delete Column
This function allows you to remove the vertical column of cells in which your cursor is placed.


Add Cell
This function allows you to insert a cell next to the one in which your cursor is placed.


Delete Cell
This function will delete the cell in which your cursor is placed.


Split Cell
This function will split in two the cell in which your cursor is placed, making two equal-width cells in its place.


Increase Rowspan
This function will merge the cell in which your cursor is placed with the cell to its right.


Decrease Colspan
This function can only be used with cells that have an increased column span. It will shrink the cell in which your cursor is placed.


Back to Top >>

Frames


The Frames icon


The concept behind frames is that you can put information from two or more Web pages in the same browser display window at once, and scroll each area independently. They also enable you to put different kinds of information in different regions of the page.


How frames work
When frames are created, the browser window is essentially divided into two or more sub-windows, each one containing a separate Web page. When you set up a page with frames, the V4™ code creates a "master page" telling the browser how many frames will be on the page, and what files contain the information for each frame. V4.1 automatically builds frames for you. When the master page is loaded, the browser automatically searches for the frame pages and loads them in their proper places.


Pros and cons of using frames
Frames allow you to keep important information on the screen at all times, so even if you scroll down the page in one frame, the information in the other stays in view. This is very helpful for information such as a table of contents.


However, frames can slow down your Web site. Inside your browser, each frame is treated like a separate Web page, which increases loading time, especially for users with slow Internet connections. Several frames containing multiple tables and many large graphics are a sure-fire recipe for an unusable site.


Frames can also make the browser's "back" button behave strangely. Remember that the browser thinks each frame is a separate Web page. Thus, when you click on the "back" button, only the frame in which the cursor is resting is backed up – not the entire Web page. This can confuse users.


Some search engines have trouble with frames. The "spiders" or "crawlers" that constantly search the Web for new sites and categorize them can sometimes get stalled on a frame-heavy page. This can result in problems getting your site listed. For more information, see Getting Listed.


Design a New Frame Page
This function creates a new frame page.


  1. After selecting the Frames Editor, a prompt will appear, asking you to choose a name for the new frame page.
  2. Choose a name for your new page and click OK.
  3. A gray frame screen will appear in place of the WebWizard Editor. From here you can design your frame page.

    4. The Frames Editor


    There are several options in the frame editor.


    Add Horizontal Frame
    This will split your page horizontally, creating two frame files.


    Add Vertical Frame
    This will split your page vertically, creating two frame files.


    Remove this Frame
    This will remove the current frame.


    Edit Frame
    This is where the real frame design begins.


    After choosing Edit Frame, the Frame Editor will appear. From here you specify several options:



    • Frame Source - This is the page that will appear within the frame
    • Target Name - This option is for the link editor. Pages within a frameset may link to other frame windows, but they must have a target name.
    • Resizable - This allows a viewer of the frame window to click on the frame border and adjust its height and/or width.
    • Show Border - Clicking this will show the frame window border.
    • Scrolling - Clicking Auto displays the height and width scrollbars only when they are needed; clicking Yes will display scrollbars all the time; clicking No will eliminate the display of scrollbars.
    • Border Color - If you have chosen to show your frame window border, you can choose the color of that border by clicking on the desired color square from the color table. Your chosen color will appear in the square next to Border Color
  4. After determining your frame page properties, click Commit A Frame Page to save your changes and to return to the WebWizard Editor.

Frame windows can be resized in the Frame Editor by dragging the frame border to the desired size.


Note: The Frame Editor is strictly for editing frame pages. You cannot alter the pages that appear within a frame from the Frame Editor – however, these pages can always be changed within the WebWizard Editor.


Back to Top >>

Scriptlets


Scriptlets are short pieces of JavaScript that give your site extra pizzazz without any hard work on your part.



The Scriptlets icon


There are six scriptlet functions available.



Scriptlets Editor


Add Sound / Flash
This option allows you to add sound or flash to your Web Pages. After selecting the Add Sound / Flash option, the Object Editor will be displayed in the Left Step. Select the media, either Flash or Sound, you would like.


If you choose Sound, the Sound Settings options will be displayed.


  1. Click Select, Your Sound File and the File Viewer will pop-up, allowing you to choose which sound file you would like to add. Note: You need to import Sound Files to your project in advance.
  2. Once you have chosen your file, you can choose the setting you would prefer.
  3. Click Update.

If you choose Flash, the Flash Settings options will be displayed.


  1. Click Select Your Flash File and the File Viewer will pop-up, allowing you to choose which sound files you would like to add. Note: You need to import Flash Files to your project in advance.
  2. Once you have chosen your file, you can choose the setting you would prefer.
  3. Click Update.

Add Mouse Over to Image
When this scriptlet is used with an image, any time a visitor's mouse cursor touches that image, a second image will appear instead – for example, an arrow might appear to change color when "moused over."


After selecting the Add Mouse Over to Image option, the editor will display the options available.


  1. Select whether you want the image switch to occur On Mouse Over (when the image is moused over) or On Click (when the image is clicked) by selecting the appropriate radio button.
  2. Click the Select link underneath your chosen option. This will bring up the File Viewer.
  3. In the directory window of the File Viewer, select the folder in which your desired image is stored.
  4. All the files with image extensions will appear in the File Window. Select the desired file and click Update.
  5. You will be returned to the editor. A thumbnail of the chosen image will be shown. If this is the image you would like to use, click Apply.

Add Mouse Over to Text
This scriptlet will cause the moused-over text to change colors as long as the mouse cursor touches it.


  1. Select the text to which you would like to apply the Mouse Over function.
  2. Select the Add Mouse Over to Text option. The editor will display the options available.
  3. From the Color Menu in this window, choose the color you want the moused-over text to change to.
  4. The color you choose will appear in the small gray box next to the words On Mouse-Over Color.
  5. Click Apply.

Add Pop-up Window
A pop-up window is a Web page that appears as a separate window that "pops up" when a certain page is loaded. You can make the window large enough to cover the whole page, or small enough to fit in a corner. Unless the scripting is removed, the pop-up window will appear every time the page containing the scriptlet is loaded.


  1. After selecting the Add Pop-Up Window option, the editor will open.
  2. Click Select to choose the page that will pop up. This will bring up your File Viewer.
  3. In the directory window of the File Viewer, select the folder in which the desired page is stored.
  4. All the files in that folder will appear in the File Window. Select the desired file and click Update.
  5. Next, you must decide the Height and Width measurements for your pop-up window. Choose your Height and Width options from their respective drop-down menus.
  6. Choose the Features you would like displayed on your pop-up window.
    • Display Menu Bar will display the browser menu bar in the pop-up window.
    • Display Tool Bar will display the tool bar icons.
    • Display Status Bars displays your site location.
    • Display Scroll Bars will place left-right and up-down scrolling bars on your pop-up window.
    • Resizable will give your window the ability to be resized by viewers.
  8. Choose the number of seconds you want to delay the appearance of the pop-up window from the Delay drop-down menu.
  9. After you have chosen all the desired features for your pop-up window, click Apply.

Add Scrolling Image
A scrolling image is an image that appears to be locked into place on a Web page. No matter how a viewer moves the mouse or screen scroll bars, the image does not move from its relative place on the screen.


  1. Click on an image that you wish to make a scrolling image or Choose an image from a file and place it in the WebWizard editor.
  2. Click the Add Scrolling Image option.
  3. From here you can choose if you want to place the scrolling image in the background of your site. This means that you can type text over the image. If you want the image to be in the background, click the checkbox next to Place In Background.
  4. Click Apply.

Add Page Redirection
This scriptlet will make the selected page a "splash" page, meaning that after a designated number of seconds, the page will redirect to another page.


A splash page is often used as an opening page of a Web site. There are pros and cons to using a splash page. On the positive side, a well-designed splash page offers a nice introduction to your site. However, many splash pages are nothing more than a graphic or two, often without any text. This type of page makes it difficult for search engines to determine the content of your site, and can get your site a lower search engine ranking. If you want to use a splash page, make sure that it clearly introduces viewers to your site through text as well as images, and that you have good meta tags. See Getting Listed for more information on meta tags and keywords.


  1. Select the Add Page Redirection option.
  2. Click the Select link to choose the file your page will redirect to, this will bring up the File Viewer.
  3. In the directory window of the File Viewer, select the folder in which the desired page is stored.
  4. All the files in that folder will appear in the File Window. Select the desired file and click Update.
  5. You will be returned to the editor and the file name that you selected to redirect your viewers to will be shown.
  6. Choose the number of seconds for which to display the splash page from the drop-down menu.
  7. Click Apply.

Note: All the scriptlets come with a Remove option and a Preview option. The Remove option will remove all the scripting associated with that particular scriptlet. The Preview option will display a standard example of the scriptlet – it will not display your particular Web page. To see how each scriptlet affects your individual page, choose the Preview Page option from the View.


Back to Top >>

Product Editor


For detailed instructions on using ClipOn Commerce™ within WebWizard, click here.


Add Category/Product
This function allows you to add a product to your page, link an object to a product, or link to a product category. You use the WebWizard Product Editor to add products and categories that you have previously set up in ClipOn Commerce.


  1. From the Product Editor, select Add Category/Product. The Add Products Tool window will appear.
  2. Here you have two frames and three options. The left frame houses your categories and the right frame houses your products selected.
  3. Once you select a category the products within that category will be listed in the right frame.
  4. Once you have selected a category and/or product, you can then place the product in the editor, create a category link, or create a product link.
  5. The Place Product in Editor creates a "Product on the Page" that then allows you to customize it with the "Edit Product Template" option in the Product Editor menu. Select the category and and Product you would like and then click "Place Product in Editor". Note: You can add as many products as you would like by choosing a product and then clicking "Place in Product Editor" repeatedly until you are finished.
  6. Once you have added all of the products you want for the page you are working on, click out of the "Add Product Tool" window and you will be back at the WebWizard Editor. To then Edit elements, properties, and templates click on the "Product Template Editor" option at the bottom of the Product Editor menu and follow the steps.

Product Editor Menu


Link to Store
This function allows you link whatever you have selected to your on-line store. If you have nothing selected it will add a text link.


Add Checkout to Link
This will link whatever you have selected to the Check Out page. If you have nothing selected it will add a text link.


Update Options and Variants
This updates options and variants on your web page if they have been changed on-line.


Update Product Layout
This updates every product on the page to match the current product template you have set up in the "Edit Product Template" function.


Open ClipOn Commerce™
This is where you go to manage your on-line product database.


Edit Product Template
The Edit Product Template function allows you to customize your product template. By clicking on this option the Product Template editor will pop-up and you can manipulate the way your products appear on your page.


  1. Step 1: Specify which element to change by clicking on its radio button. You may also select an image for the checkout button. If you don't, a default button will appear.
  2. Step 2: You may edit the appearance of new products placed in the editor by editing the template. Many of the regular WebWizard editor controls are available to help you. To add product elements you may use the drop-down list located within the editor.
  3. Once you have selected all of the elements you want click Commit.

Back to Top >>

WebProfiler


For detailed instructions on using WebProfiler in WebWizard, click here.


Back to Top >>

Meta Tag Editor


The Meta Tag Icon


This function allows you to insert meta tag keywords and descriptions for each of your Web pages. These are words that many search engines look for when ranking sites and delivering hit lists for search queries.

  1. After selecting the Meta Tag Editor icon, the Keyword/Description Editor screen will appear.

    The Keyword/Description Editor


  2. Enter your keywords and site description.
  3. Click Update. The keywords and site description will be applied to your Web page.

Note: This only adds Meta Tags to the currently opened page.


For more information on meta tags, see Getting Listed.


Back to Top >>

Edit Font


The Edit Font button


Using font styles, sizes and colors is one of the easiest ways to bring creativity and fun to your Web pages. You will want to experiment with all kinds of combinations. However, there are some standards to keep in mind.


Only a few fonts are supported by all Web browsers. Though some browsers may support more fonts than others, it is safer to design your text elements only with the fonts universally supported. These fonts are Arial, Verdana, and Helvetica for sans-serif fonts; and Times New Roman, Courier, and Georgia for the serif fonts. Serifs are the small "tails" that appear on the letters in some fonts. "Sans" is a French word meaning "without." So, a "sans serif" font is one "without tail," as opposed to a serif font. (This Help File is written in a sans serif font, while most newspapers and books use serif fonts for their story texts.)

The Font Editor



There are several options in the Font Editor. These options are applied to the text you have selected when you open the Font Editor, or to text that you will type after making your Font Editor selections. They will not affect all text on your page.


Font
Here you can choose fonts from a drop-down list. Any font that you have loaded on your computer system will be available in the font editor – keep in mind the guidelines listed above.


Style
This allows you to select Regular, Italic, Bold and Bold Italic styles.


Size
This allows you to choose the size of your text from the options in the drop-down menu. The numbers refer to the "point size" of the font, using a standard developed by the printing industry.


Effects
From here you may choose to underline your text. To do so, click the checkbox next to Underline.


Color
This option allows you to choose the color of your text. You can choose a color from the drop-down list provided, or design a custom color by selecting Custom and clicking on the palette icon.


In the Sample box, sample text is displayed with your current color, font, and size properties.


Back to Top >>

Quick Clicks


These buttons are quick, easy ways to perform some of the most common design techniques.


The Quick Click menus


Bold
This is a shortcut to the Edit Font function of bolding text. To use this function, highlight the text you want bolded and click Bold.


Underline
This will quickly underline any selected text. Simply highlight the text that you wish to underline, and click Underline.


Italics
This function will italicize selected text. To use this function, highlight the text you want italicized and click Italics.


Left Align
This function will left-align any selected text or image. To use this function, highlight the text or select the image you wish aligned and click Left Align.


Center Align
This function will center-align any selected text or image. To use this function, highlight the text or select the image you wish aligned and click Center Align.


Right Align
This function will right-align any selected text or image. To use this function, highlight the text or select the image you wish aligned and click Right Align.


Undo
This function will undo the most recent change you made to your page. If you continue to click Undo, the change you made before the most recent change will be undone, and so on. You can continue clicking Undo infinitely.


Redo
This function will re-apply the changes that you most recently removed. As with the Undo function, you can continue clicking Redo infinitely.


Back to Top >>