WebWizard 5

Getting Started Tutorial

Adding a Template

If you have never built a web page from scratch before you can use the Design Wizard to set up your web page

Look to the top of the WebWizard within the Design Tools and click Design Wizard select View Designs and then the Template Menu will open in the Template Preview Window.
By clicking the Next Button at the top of the window you can scroll through the different themes and choose one that's right for you.
Once you have the template you like click Add Design at the top of the window. From here your template will be put into the WebWizard Editor so you can start personalizing and putting content into your Project.

*Most of the templates come with a file called style.css and within this file there are pictures that have already been uploaded that go with the theme of the template; it's your choice to use these photos or not.

Adding your Content

Since the template you have chosen is now sitting in the WebWizard Editor you can change and edit your content

As you can see within your template there is already pre-existing specific areas with anonymous text or it will say "your content here"
Once you have identified the text area your wanting to put your text in you want to Highlight the pre-existing text and either Delete or just begin typing.
Pre-existing fields will be anything from Buttons, Titles and or Text fields. You want to repeat steps 2-3 when you are changing or adding text to any pre-existing text within your template.

Editing Text

Once you have some of your text in your template then you can start changing the font, color, positioning and so on.

Highlight the text you are wanting to edit. Go to the top of your WebWizard Editor to your Design Tools. You will see a format of tools similar to that of Microsoft Word.
Within this tool menu you can change and customize your projects content by just a click.

* here is a directory of the tools and descriptions of what they do.

Adding and Importing Pictures

One key thing to keep in mind when putting a picture or any file into the WebWizard Editor . . .

- You have to Import the file into your Left Step before you can Add the Image to your project.

Go up to the top of your editor in the Design ToolBar and click File then select New then select Folder. A second window will pop open

within the Folder Name field title the folder Pictures and from the Drop Down Menu within the Folder Structure field choose where you want the folder to be placed in your Left Step.
Then click the button Create Folder. Your Pictures Folder you just created should now be in the Left Step
Click on the Picture Folder in your Left Step so it's highlighted go up to the Design ToolBar and click on File then select Import and choose Import Image
A second window will open. Click on Choose Image (another window will open.) To the top of this window there will be the title Look in: click on the drop down menu

Once in this menu locate the image you want to put into your WebWizard Editor. (basically by clicking on this drop down menu you will be able to look through the files within your computer)
Once you have the selected the image click Open.
Now you should be back to the original Import Image window
Click on the Drop Down Menu that's within the field Folder Structure and select Picture Folder.
Then within the Image Name field type in what your are going to name the Image.

- Click Finish button to insert the image into your WebWizard Editor.

You will see that the image is now in your Editor. (The Image should also be in your Picture folder within your Left Step.) You can Click and Drag the image into any desired field within your template.
You can resize the Image by Clicking and Dragging in or out on the little White Boxes that frame the Image.
Whenever you want to add another image to the page you are working on you will go into your Picture Folder and select which ever photo you are wanting to use.

Then click on the Add Image Button which is located at the bottom of the page in the Quick Link Toolbar. - Once the Image is within your Editor you will repeat Steps 4-6.

If you Right Click on the Image that's in your Editor you can bring up the Image Menu. Within the Menu there will be these Options:

Insert/edit link - You can make your Image into a Link. Look to the directions of how to Link that's found in the next section within this tutorial.
Unlink - If you have Linked this Image and you decide not to have it Linked any more then click on this option.
Insert/edit image - From here you can substitute the Image that's in your Editor for a new Image
Description - text that gives a brief explanation of the Image
Image Title - put in specific word or words that describes the Image
Image URL - replace the Image by typing in a new Image file name

*Within the Appearance Tab of Image Editor

Alignment - you can change where the Image is placed within the Editor
Dimensions - change the size of the Image
Border - increase the thickness of lines that frame around the Image
Insert a new table - put a table within the Image

Pages

All the templates give a good foundation with pre made pages and titles. Depending on what your doing with your website you will want to edit these page titles and content. The pre existing template pages that are provided are commonly used pages with any website: some of these pages are

template.html - is your overall website theme and is used to update the layout and design of your entire web site (you probably wont need to go in and edit this page)
Index.html is your Home Page - this is the first page a person sees when they visit your site (you never want to delete or rename this page)
catalog.html - will be used to customize your ClipOn Commerce products
about.html - this will be the page where you describe what your company does and goes into detail for the purpose of the website

*When editing Pages

Identify and change the page name depending on what the content will be within that page
To change a page name you need to go into the Left Step and click on the page title. Once page title is highlighted you will Right Click and the menu for the page will show these options: HTML Page, New Folder, Edit, Save, Delete, and Rename
Choose Rename

A second window will open within in the New File Name field type in what you want the Title of that Page to be
Once you do that hit the Rename Button.
The new Page Name will show in the Left Step.

SAVE changes
You can repeat steps 1-4 for any of the actions that's available within your Page Menu. OPTIONS:
HTML Page - gives you a new blank page
New Folder - allows you to put a New Folder
Edit - Opens the page in the Editor so you can make changes
Save - Saves the changes that you have made to the pages
Delete - throws away the highlighted content
Rename - you can change or edit the title

Linking

Once you have a good foundation for the pages you built within your website it's time to link everything together. A Link is a connection between an outside source and the page you are on. In order for your customers to navigate from page to page on your website every thing needs to be linked together. Most if not all templates come with a navigation bar or pre made Buttons. The menu and/or buttons are going to be the source that Links from one page to the other.

you are going to connect the link by using the Buttons that you have created or that was already provided within your Template to the source that's in your Left Step
Identify what button you want to go to what page. For example, your About Us button when clicked will take the customer to your About Us page.
Once the Button is identified you want to click and drag over the text so that it's Highlighted within the Button
Then Right Click on the highlighted text and select Insert/edit link
Another window will open and it gives you the options:

Link URL - the html title for the destination of where you want the Link to go

Anchors - a link within a page that takes you somewhere else on the page. For example, If you have aTerms and Conditions page and the text goes really long on one page the customer can click on the Anchor link at the end of the page titled Back to Top and this action would take them back to the top of the page

Target - within this Drop Down Menu you can choose how you want the Linked Website to open

Title - name of the link

Within the field Link URL type in the Page's URL that you are wanting to connect to the Button you just highlighted. For example, if you are linking a button to one of your pages you have in your Left Step you want to have the About Us button highlighted and then you would type in the Link URL field about.html You can also Hyperlink if you are wanting the link destination to go to a different website. Where it asks you for the Link URL you will type in the address for the other website you are linking to. For example, highlight the desired text within your Page and then Right Click and select Link option and within the field Link URL type www.othewebsite.com

USING TABLE EDITOR

Anyone attempting to build a website from scratch without using any templates you will need to know how to use their Table Editor. This function will let you create the map and layout for your pages.

*Inserting and Editing a Table

Look to the top of the WebWizard Editor within the Design Tools and there will be a button that looks like a table (it's on the bottom row first button on the left.) You want to click on this icon
A second window will open. From here you want to fill in the desired fields. Depending on how you want the layout of this page you will type in the variables accordingly.

Columns - How many sections you want going Up and Down
Rows - How many sections you want going Left to Right
Cellpadding - How many cells you want within the table
Cellspacing - How much of a space you want between the cells and the edges of the table (Cellpadding and Cellspacing is really going to be trial and error depending on what type of set up you want)
Alignment - Where you want the table to be placed on your page
OPTIONS: left, center, right, justify
Border - Thickness of the lines that frame the table
Width - How wide the table is (from left to right)
Height - How long the table is (from top to bottom)

NOTE:

once the table is in the WebWizard editor you can resize it by clicking and dragging in or out on the little white boxes that frames the table Table Caption - if you want to have a title or caption for the Picture within a table

ADVANCE SETTINGS OF TABLE EDITOR

There are a few different things that you can do within the Advance settings that would be beneficial for the beginner

Background Image - place an image as a background within the table. For this you need to locate the image file that you want to use. Then you want to copy and paste the image file name into the Background Image field.

-Once the table is in your Editor you can Add any image that's in your Left Step by highlighting the image that you want and go to the Quick Link ToolBar click Add Image. Once the Image is within the Editor you can drag and drop the image into whatever desired field within your Table.

Border Color - Choose a color that you want to use for the lines that make your table. Note that if you want the line color to show on the table you need to click on the General Tab within Table Editor and increase the Border variable

After you have all the fields of the Table Editor filled click Insert button
Your table should now be within the WebWizard Editor
Now you can type in your content or add any pictures to the cells of your table. Your cursor will start at the middle of the table's cell and as you keep typing the text will gradually fill up the whole cell.
Depending on how much content you put into the table you can resize within the WebWizard Editor by clicking and dragging in or out using the little white boxes framing the table.
If you see fit you can put a table within a table. To do this right click on the table that's in your Editor and from the Table Menu select Inserts a new table option. From here repeat steps 1-4.
As you saw by right clicking on the Table a Menu opens. Select any of the options depending on what action you are wanting. Within the Menu the options:

Inserts a new table - puts another Table within the Table that you already have in your Editor
Table properties - Brings up Table Editor
Delete Table - Throw away an unwanted Table that's in your Editor
Cell - you can change Table cell properties, Split merged table cells, Merge table cells
Row - you can change Table row properties, Insert row before, Insert row after, Delete row, Cut table row, Copy table row, Paste table row before, and Paste table row after
Column - Insert column before, Insert column after, and Remove column

*You want to be very familiar with the table editing process because it's the map you set and follow to make the layout of your page look a certain way. When you are building your table you will want to take everything into consideration. For example, where will you put your buttons (navigation bar) that links this page to the other pages on your website. Basically think about how you want the content to be presented.

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.