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.
WebWizard link
WThe WebWizard Editor
This screen is the WebWizard Editor, and is divided into five areas.
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:
To add a folder to your root directory/project:
To add a subfolder to a folder:
To view the subfolders in a folder:
To view the files in a folder or subfolder:
The open folder icon
To view any file in the WebWizard Editor window:
The file name page icon
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.
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.
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.
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.
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.
Remove Page
This option allows you to permanently remove the current page from your project.
Remove Folder
This option will remove the currently selected folder and all of its contents. To remove a folder:
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:
Import URL
This option allows you to import any existing Web site into the WebWizard Editor screen.
The Import URL screen
Move File
This option allows you to move a file from its current directory to another directory. To move a file:
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:
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:
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:
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:
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:
Button Attributes:
Current Button:
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:
To remove password protection from a 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.
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
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.
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
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.
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.
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.
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.
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:
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:
Custom Color Editor
The Image Editor icon
Insert/Edit Image
This option lists and displays the image you want to edit.
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.
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.
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:
To create an internal link:
Links within frames
You can create links in a frameset page from one frame to another.
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.
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.
Show Link Information
This option shows you the link information of selected text.
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:
The Table Editor window
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:
To choose a color for any of the three color options:
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.
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.
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.
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 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.
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.
If you choose Flash, the Flash Settings options will be displayed.
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.
Add Mouse Over to Text
This scriptlet will cause the moused-over text to change colors as long as the mouse cursor touches it.
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.
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.
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.
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.
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.
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.
For detailed instructions on using WebProfiler in WebWizard, click here.
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.
The Keyword/Description Editor
Note: This only adds Meta Tags to the currently opened page.
For more information on meta tags, see Getting Listed.
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.
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.