The 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:

The file name page icon


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

Bottom Tabs

Back to Top

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 menu. This is 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.

Save, Import Pages

Back to Top

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.

Template Wizard

Back to Top

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.

Back To Top

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.

  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 4.1
This option links you to the Visual WebTools main page where you can access any of the V4.1 tools.

Page Preview

Back to Top

The Page Preview Icon

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 Project Editor

Back to Top

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.

FTP Update Tools

Back to Top

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 WebTools™.

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

HTML Editor

Back to Top

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

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 <font= "Verdana"> 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.

Color Editor

Back to Top

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.

Image Editor

Back to Top

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.

HyperLink Editor

Back to Top

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.

Table Editor

Back to Top

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:

• Border Dark Color - Sets the color of the shadow border of your table cells.
  

• Border Light Color - Sets the color of the basic border of your table cells.
  

• 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 below it.

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

Increase Colspan
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.

Frames

Back to Top

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.1™ 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.

The Frame 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.

Scriptlets

 Back to Top

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. You will be returned to the editor and the file name you selected for your pop-up window will be shown.

6.  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.

7. 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.