Welcome

With VisualSite Designer everyone can now make their own Homepages. You can make your own personal Homepage or you can make one for your business. The quality and simplicity are priority number one. In ten minutes you can have your first Homepage on the Internet. It's that simple.

No rules - just possibilities!

Welcome to VisualSite Designer

In the Online Help there is a couple of sections that can get you started real quick. In the section What is a Homepage you get to learn about Homepages and the Internet. The section Make your first Homepage guides you through ten easy steps that lets you create and publish your first Homepage in just ten minutes.

Click here to get an overview of the Online Help.


Overview of the Online Help

The Online Help consists of the following chapters:
1. What is a Homepage
A brief outline of what an Homepage is. If you want to learn the basics about Homepages and its content, we strongly recommend that you read this section.
2. Overview
In this section you get a good overview of how VisualSite Designer is structured, and the major parts of VisualSite Designer are explained.
3. Make your first Homepage
Follow these ten step where we guide you through your first Homepage example. After this you will have created an Homepage and published it on the Internet.
4. How to use VisualSite Designer
In this chapter you will find some good advise and a number of useful ideas on how you create a good an visually pleasing Homepage.
5. The Menu
The menu in VisualSite Designer.

6. The Toolbox
Explanation of all the tools that you can find in the Toolbox.

7. The Toolbar
Explanation of the Toolbar in VisualSite Designer

8. The Inspector
The Inspector plays a central role in VisualSite Designer. It is in this window that you change all the different settings in VisualSite Designer. This section explains all the settings and the meaning of them that you can adjust.

9. The Statusbar
In the Statusbar you are informed about important information about your HomePage. Read about the information and what it means.

10. Frequently Asked Questions
Questions often asked about VisualSite Designer.

11. Glossary
Here you will find an explanation of words that is used in the Online Help.


What is a Homepage

A Homepage on the Internet consists of a front page and a number of sub-pages. These pages (documents) must be available to others. Usually these pages are available through a Internet provider that keeps the pages located on a web server.

You can think of a Homepage as a clever lexicon that contains informations, and where you easily can search and navigate through these informations. The information can be represented in many way, typically you will see it presented as text and graphical object or a combination of both.

You navigate through a Homepage by using links (hyperlinks).

A link can be visualized in many different ways, but you can spot them by moving the mouse across one of them and notice that the cursor changes to a image of a hand.

Try and move the mouse across this link to CoffeeCup Software, Inc. and notice the mouse. The link are show as blue gray text that are colored when the mouse mouse moves across the link. If you click on the link (activating the link) you will see different types of links. Some of the are blue and underlined text, others are graphical objects or images.

With VisualSite Designer you can create your own Homepage. It can contains as many pages as you would like, text, graphical objects and links. You can move all these elements around on your page just by using your mouse. The pages can also have different background properties. Usually the background of a Homepage is colored white, but you can also choose different colors, fill the background with a pattern(image), or try a gradient color to create an exciting background.

Before you start making your own Homepages we think it will be a good idea that you read the chapter How to use VisualSite Designer. With this chapter you get a good insight on how to create Homepages in VisualSite Designer.


Overview

It is very easy to get a clear overview of all the functionality in VisualSite Designer. In this part of the Online help you will get an explanation of each of the different parts in VisualSite Designer.
The Menu and the Toolbar
Below you see a part of the upper user interface in VisualSite Designer.

At the top you see the Menu with all the functionality to create or open Homepages and many other commands. Just below is the Toolbar with 11 large buttons.

The Toolbox
The Toolbox in VisualSite Designer is shown to the right. By using the these tools you can insert text objects, graphical objects and html objects. You can move the Toolbox around by clicking in the logo area and dragging it with the mouse. The active tool is illustrated as seen to the right where it is the Arrow Tool that is the active tool.

Inspector
The Inspector is a central part of VisualSite Designer. This is where you can adjust the settings for the active page or the active object. The seven buttons "Page", "Object", "Link", "Fill", Effect", "Styles" and "MouseOver" in the Toolbar controls the content of the Inspector. If for instance the button "Page" is pressed the Inspector will show the settings for the active page.

Statusbar
At the bottom you find the Statusbar in VisualSite Designer. The Statusbar is divided into 3 areas. They show the placement of the currently selected object, the number of pages in your Homepage and the time is takes to publish it to the Internet.


Make your first Homepage

It is very easy to create your own Homepage in VisualSite Designer. Here you will be guided through 9 easy steps to make your very own Homepage.

Click here to make your own Homepage.


How to use VisualSite Designer

In this part of the on-line help you will get a quick guide through the different parts of creating a Homepage in VisualSite Designer.

You will learn how to design and layout your Homepage so it presents itself in a nice way. You will also learn how to link the pages together and how to publish it so others can see it when they browse around on the Internet.

The design step
The layout step
The Web part
Tips and tricks regarding speed and space
Testing the Homepage
Publish the Homepage


How to use VisualSite Designer->The design step

It is important to have a clear idea about the design of your new Homepage before you actually start to construct it. The quality of your design is important when you want to add more pages or information on exiting pages.

Objects in VisualSite Designer
You use the tools from the Toolbox to insert objects onto your pages as described in Make your first Homepage. There are five different types of objects: text, rectangles, ellipsoids, pictures and html objects.

The objects in VisualSite Designer are constructed in such a way that you can scale and rotate them while maintaining the high quality at all time. If for instance your rectangle is filled with a picture, that picture-fill will be recomputed real-time each time you scale or rotate the rectangle in order to fit the new shape exactly.
Make appealing objects
When you create an object it always has "Single Color" as the color-fill. But with the advanced settings for fill and effects you can easily make your objects come alive. These fill and effects settings can be applied to all objects.

Click here to see some examples or here to get a more thorough explanation of fill and effects.
Settings for the pages
 To make your Homepage more appealing you can add different types of color-fill to the page-backgrounds and not only the objects. Normally the background color-fill on pages is white but it can be any color, pictures or gradient color-fills.

Click here to see some examples of the different types of backgrounds.
Reuse objects
 If you are satisfied with a particular object (for instance a button) and want to reuse this object there are two ways of doing this. The fastest way is by using the copy/paste commands from the Edit menu. But you can also make a note of the width/height/fill/effects settings for the object in question and simply make a new object with those exact settings. Clearly a more time consuming method.


How to use VisualSite Designer->The layout step

When you build your Homepage it is not enough to have a lot of very nice objects if they are just placed randomly on the pages. It is very important to have a clear idea of the basic design on your pages and in VisualSite Designer you will find some tools to help you accomplish exactly that.
Layout of objects
Because you can have overlapping objects on the same page, these objects not only have a location on the page but also a placement in the overall layering on the page. As you can see in the example below the red object is at the bottom and the blue one is at the top. By using the commands found in the Object menu (Bring to Front, etc.) we can send the blue rectangle all the way to the bottom.

The position of the selected object can be seen in the Statusbar. By using this position you can place the objects with the exact same y-position or with the same distance between the.

Another way of placing objects precisely is by using Guides. You can insert horizontal or vertical guides and these will help you to position objects so the have the same alignment.

In the example above a horizontal guide is inserted and when you move the objects by using the Arrow Tool you will notice how they stick to the guides when they get close enough. A guide can be moved to the wanted position with the Arrow Tool. You can read more about guides by clicking here.

How to place more than one object at the same time
It is often practically if you can place more than one object at the same time. A simple way of doing this is by selecting each object with the Arrow Tool. Click here to see how you can select multiple objects. When you have selected all the objects and move one of them all other selected objects will follow. You can also use the group facility in VisualSite Designer. If you have selected more than object they can be grouped together by using the group command from the Object menu. You can move, scale and rotate this group of objects with the Arrow Tool. You can at any time un-group the objects again.


How to use VisualSite Designer->The web step

In VisualSite Designer you can insert one special objects on your Homepage that will only have effect when you actually publish your Homepage on the Internet. This is the MouseOver object. Furthermore you can only test links/references when you preview your Homepage or when it is actually published.
Links/Hyperlinks
 You can connect the individual pages in your Homepage by using links. When you click on these links they can do one of the following:
  • Guide you to other pages in your Homepage.
  • Guide you to other peoples/companies Homepages.
  • Open the E-mail program on the visitors own computer. In this situation the receiver field is filled out by an address you can specify.
  • Link to local files on your computer for instance mp3 files or Word documents. These files will of course be uploaded as well when you use the Send button.

You create links as described in the help for links. It is very simple, just select the object you want the user to click on and set the correct parameters in the Link-Inspector.
The MouseOver effect
 In the example to the right you can test the MouseOver effect that can be made on your pages. Try and move the mouse over the yellow ellipsoid and see what happens. The yellow color fill is replaced with a picture-fill when the mouse is placed on top of the object.

Click here to read more about the MouseOver effect.


How to use VisualSite Designer->Tips&Tricks

Tips and tricks about speed and space

When you publish your own Homepage it is placed on a computer that can be reached from all over the world. That is why people can see your Homepage no matter where they are placed as long as they are connected to the Internet. When you have a visitor that wants to see for instance page 3 from your Homepage all the elements from this page is send to the visitor. This means that if you have many large objects on that page it will take A LOT OF TIME for the visitor to actually see that page. That's why you should take care not to have too many large objects on the same page. As you can see there is a direct correspondence between space and speed for the visitor, but also for your self when you publish it.

You can use the Statusbar to see the estimated time of download for the active page and for the entire Homepage. Use this information to make all the pages in your Homepage reasonably small. If for instance you have a large picture of your newborn child, then instead of placing it on the front page, try to make a small copy of it and instruct the visitor to click on the small picture to see it in more detail. You can then place the large picture on it's own page and make the small picture have a reference to it.


How to use VisualSite Designer->Preview the Homepage

Preview the Homepage before you publish it

It's always a good idea to preview your Homepage before you publish it on the Internet. You can do this by using the command Preview Homepage from the View menu. By doing this you can test all links and MouseOver effects just as they would work in the Internet.


How to use VisualSite Designer->Publish on the Internet

How to publish your Homepage on the Internet

For VisualSite Designer to be able to publish your Homepage you have to enter some information about your Internet connection. Click here to see how to do that. You only have to do this before the very first time you publish your Homepage.

VisualSite Designer is now ready to publish the Homepage for you. All you have to do is simply turn on the modem and click on the Send button found in the Toolbar.


Menu

The menu in VisualSite Designer contains different kinds of functionality.

There are 6 main menus in VisualSite Designer. These are all described in the following part of the on-line help. Please notice that for instance the command "New Homepage" in the Files menu is associated with the shortcut Ctrl+N. This means that instead of choosing the command from the menu by using the mouse you can actually just press down the key Ctrl and then the N on your keyboard at the same time. This goes for all shortcuts you find in the menus.

Read more about each of the menus by clicking on it below.

Files
Edit
Object
View
Window
Help


Menu->Files

New Homepage
New Homepage using Templates
Open Homepage
Close Homepage
Save
Save As
Export
Print Setup
Print
Misc
Exit

New Homepage
Use this command to create a new Homepage. If it is unavailable it is because another Homepage is open already. Close it before you create a new Homepage with this command. This command opens the dialog box below.

Each time you add new pages to your Homepage they will inherit the "Name", "Width", "Height", "Homepage background" and the "Homepage link colors". The pages in your Homepage can off course have individual settings but by default they will have the settings you specify in this dialog box. You can at any time alter these default settings for your Homepage by choosing the command Files->Misc->Homepage Preferences.
New Homepage using Templates
Use this command to create a Homepage based on one of the templates. You can choose between a number of different templates and add your own content and style to the chosen template.

Open Homepage
Use this command to open an existing Homepage. If it is unavailable it is because another Homepage is open already. Close it before you select this command.

In the example above the Homepage "Peters Whisky Land" is chosen and a small preview of the front page is shown together with some other useful informations.
Close Homepage
This command will close the open Homepage. If you have unsaved changes you will be asked if these should be saved.
Save
This command will save all changes you have made since the last time you saved the Homepage. If your Homepage is still unnamed (never saved before) this command will open the dialog box Save As.
Save As
This command will open the dialog box Save As where you will be asked to specify and location and a name for your new Homepage. Please note that this location is on your own computer and not on the Internet. In order to publish the Homepage you should use the button Send from the Toolbar.
Export
You can use this command to construct all the files necessary to view the homepage on the Internet. Normally you would use this command if you want to use another FTP-program to upload your homepage instead of using the built-in
Send button in VisualSite Designer.
Print Setup
This command will open the standard dialog box Print Setup where you specify what printer to use when VisualSite Designer prints your Homepage. If you have more than one printer connected to your computer you can select a specific one here.
Print
 You use the Print command to print the active page. If you want to print all pages in your Homepage they have to be opened one by one and printed using this command.
Misc
 Contains seven different functions. Click here to read more about them.
Exit
Closes VisualSite Designer after prompting you to save any unsaved changes.


Menu->Edit

Undo
Redo
Cut
Copy
Paste
Delete
Copy Background
Paste Background
Insert Keywords and Html Header
Undo
When you insert or removes objects or alter settings for objects you can undo these changes by using the Undo command. VisualSite Designer will remember the last 500 changes on each page in your Homepage.
Redo
Each time you use the Undo command you can use the Redo command to actually get back to the situation before you used the Undo.
Cut
If you use the Cut command the currently selected objects is removed from the page and placed on the Windows Clipboard. From there it can be inserted again by using the Paste command.
Copy
If you use the Copy command a copy of the currently selected objects is placed on the Windows Clipboard. As opposed to the command Cut the Copy command leaves the objects unchanged on the page.
Paste
If you have used the Cut or the Copy command to place objects on the Windows Clipboard you can then use the Paste command to actually insert a copy of these objects on the active page. You can also use the Paste command to paste some text from for instance Word into a text object. Note that the text object must be selected with the Text Tool.
Delete
By using this command the currently selected objects are removed from the page. If you regret this action you can always use the Undo command.
Copy Background
If you have created a special background on a page, you can choose the Copy Background command to place the background on the Windows Clipboard.

Paste Background
 If you have used the Copy Background command to place a background on the Windows Clipboard you can then use the Paste Background command to insert the background on the active page.

Insert Keywords and Html Header
When using CoffeeCup VisualSite Designer you usually do not have any control over the generated Html files. This is an advantage for the non-technical user but unfortunate for the skilled html-programmer. With this command you can insert both keywords used by some search engines and html code that will be placed in the html-header. Such html-headers will typically contain style-sheets, CGI or JavaScripts used by html-objects.


Menu->Object

Arrange
Bring to Front
Send to Back
Bring Forward
Send Backward
Align
Align to the left
Align to the right
Align to the top
Align to the bottom
Group/Ungroup
Space evenly
Center between Guides
Scale according to the Ratio
Bring to Front
Usually you have more than one object on your page. This can be text, ellipsoids or rectangles. These objects are layered according to each other. In the example to the right the blue ellipsoid is under the other two objects and the red rectangle lies on top of the other two. Each time you insert a new object it is placed on top of all others. If you select an object and choose the command Bring to Front this object is placed on top of all the others.
Send to Back
If you use this command the selected object are placed below all other object on the page just like the blue ellipsoid in the above example.
Bring Forward
By using this command the selected object is moved up one time. If for instance you select the blue ellipsoid in the above example and choose this command it is placed in front of the green ellipsoid but still below the red rectangle.
Send Backward
By using this command the selected object is moved down one time. If for instance you select the red rectangle in the above example and choose this command it is placed below the green ellipsoid but it will still be on top of the blue ellipsoid.
Align to the left
This command is available if you have more than one selected object. If for instance the 3 objects above are selected and you use this command the blue circle and the red rectangle are moved to the left edge of the green circle.
Align to the right
This command is available if you have more than one selected object. If for instance the 3 objects above are selected and you use this command the green circle and the red rectangle are moved to the right edge of the blue circle.
Align to the top
This command is available if you have more than one selected object. If for instance the 3 objects above are selected and you use this command the blue and the green circles are moved to the top edge of the red rectangle.
Align to the bottom
This command is available if you have more than one selected object. If for instance the 3 objects above are selected and you use this command the red rectangle are moved to the bottom edge of the two circles.
Group/Ungroup
You can select more than object at the same time by pressing down the SHIFT key while clicking on the objects with the Arrow Tool. If you have selected more than one object they can be grouped together by using this command. By using the Arrow Tool you can move, scale or rotate all the grouped objects at the same time. If you use the Cut/Copy command the entire group is placed on the Windows Clipboard.

Space evenly
Between Horizontal Guides
If you have at least two horizontal guides on your page you can use this command to space the selected objects evenly between these guides. If you have two horizontal guides and a number of selected objects but this command is unavailable it is because the selected objects must lie between these guides.

Between Vertical Guides
If you have at least two vertical guides on your page you can use this command to space the selected objects evenly between these guides. If you have two vertical guides and a number of selected objects but this command is unavailable it is because the selected objects must lie between these guides.
Center between Guides
By using this command the selected objects are centered between the guides on the page. If one of the selected objects does not lie between any two guides either horizontally or vertically it is not affected by this command.
Scale according to the Ratio
If the selected object is filled with a picture this picture has a width and a height measured in pixels. If your object is scaled in such a way that the ratio between the width and the height is wrong then you can restore this ratio by using this command.


Menu->View

Preview Homepage
Choose Browser type
Show/Hide Toolbar
Show/Hide Toolbar text
Show/Hide Inspector
Show/Hide Toolbox
Show/Hide Statusbar
Insert Horizontal Guide
Insert Vertical Guide
Use Guides
Show/Hide Guides
Remove Guides
Preview Homepage
By using this command you can test your Homepage without publishing it to the Internet.
Choose Browser type
When you use the above command to preview your homepage you can do this by using the built-in browser or by using the standard browser installed on your computer. In this sub-menu you can specify what browser to use.
Show/Hide Toolbar
Use this command to show or hide the Toolbar.
Show/Hide Toolbar text
Use this command to show or hide the text just below the Toolbar.
Show/Hide Inspector
Use this command to show or hide the Inspector.
Show/Hide Toolbox
Use this command to show or hide the Toolbox.
Show/Hide Statusbar
 Use this command to show or hide the Statusbar.
Insert Horizontal Guide
Inserts a Horizontal Guide. By using Guides you can place objects with optimal precision side by side or exactly below each other. A Guide is a small horizontal or vertical blue line and it has the effect that objects is moved automatically to touch the Guide when they come near it. If for instance you want two objects to lie as in the example just below you just insert a vertical guide and then move the objects one by one so they touch the guide. When they are less than 5 pixles away from the guide they gets sucked in.

A Guide is only visible in VisualSite Designer. When you print, preview or publish your Homepage they are not visible. Guides can always be moved by using the Arrow Tool. All guides can be removed by using the command Remove Guides and a single guide can be removed by dragging outside the page.
Insert Vertical Guide
Inserts a vertical Guide.
Use Guides
Specify whether or not you want the Guides to glue objects.

Show/Hide Guides
With this command you can show or hide the Guides. A hidden Guide has no effect when you move objects around the page.
Remove Guides
 Removes all Guides from the page. If you just want to remove a single Guide, use the Arrow Tool to drag the Guide outside the page.


Menu->Window

Cascade
Tiled
Arrange icons
Cascade
Arranges the open pages such that they overlap each other from upper left corner to the lower right corner.
Tiled
Arranges all the open pages so you can see all pages.
Arrange Icons
This command arranges all icons in VisualSite Designer.


Menu->Help

Help
About Homepage Creator
Help
Starts this On-line help.
About VisualSite Designer
Shows useful informations about VisualSite Designer.


Toolbox

The Toolbox in VisualSite Designer is the long window shown to the left. You use the tools in this Toolbox to insert new objects and a couple of other things. The following tools are used to insert objects:
Text Tool
Rectangle Tool
Ellipse Tool
Picture Tool
Html Tool
The Arrow Tool found at the top of the Toolbox is a very important tool. It is the Arrow Tool you use to select objects, and change the shape, position and angle of objects.
You can use the Pipette Tool to select colors from one of the objects. If for instance you have inserted a picture of a lake in a wood you can select a special color from that lake by selecting the Pipette Tool and then clicking on the color. The color you select is placed in the colored rectangle at the bottom of the Toolbox. This color is called the chosen color.


Toolbox->The Arrow Tool

The Arrow Tool

With the Arrow Tool from the Toolbox you can select, move, scale and rotate objects.
Select an object
 Choose the Arrow Tool and click on an object. This will now be shown with a blue border and 8 blue handles as in the example below.
Select more than one object
Press the SHIFT key while you click on all the objects you want to select. If you have group of selected objects and move one of them they all move. You can also select a group of objects simply by clicking in an empty area on the page and dragging the mouse. Notice the thin rectangle that is shown. All objects that fall into this rectangle gets selected.
Move an object
 You can use the Arrow Tool to move an object simply by moving the mouse over the object, click and drag the mouse. This operation will move the object. You can also use the arrow keys on the keyboard to move the selected object.

The numeric placement of an object can be seen in the Statusbar. If you need to align objects according to each other you can use the Guides.
Change the size of the object
Move the mouse over one of the handles on the four sides. If you click and drag the mouse you change the size of the object.
Rotate an object
Move the mouse over one on the handles placed in the corners of the blue border. If you click and drag the mouse you change the angle of the object.


ToolBox->The Text Tool

The Text Tool

By using the Text Tool you can insert text objects on your pages.

How to insert a text object
 Select the Text Tool from the Toolbox, click and drag to select where the text should be placed. Release the mouse button and notice the blinking cursor inside the red border. This means that you can write some text.

The editing and non-editing states of a text object
 If you have a text object on one of your pages and you select it with the Arrow Tool it will have a blue border to indicate it is selected. But in this state the text object can not be edited. The text object is said to be in a non-editing state. You can edit the text by selecting the Text Tool from the Toolbox and click inside the text object. Then the text object will get a red border indicating that it is in a editing state and you can start to edit the text. If your text object is in the editing state it will turn into a non-editing state if you select another tool from the Toolbox or if you click outside the red border and thereby create a new text object. The text object will also loose its editing state if you click on another text object and thereby start to edit that text object.
How to change the width of the text object
You can change the width of a text object in the editing state by moving the mouse over one of the arrows on the left or the right side of the red border. In the example below the text object is made wider. The height is adjusted automatically to fit the text.
How to move a text object in the editing state
 A text object in the editing state can be placed in a new location if you click and drag the mouse on one of the handles on the top or at the bottom of the red border as shown below. A text object in the non-editing state can be moved with the Arrow Tool.
How to change the font/size/alignment/...
 You adjust the font, font-size and all the other standard settings simply by selecting the text (se below) and use the options found in the Object-Inspector.
How to select letters
If you want to change the font or some other settings for the whole text object or just a part of it you have to select that part. You make the selection by clicking and dragging the mouse. The selected part is shown as a black box. All the changes you make by using the options found in the Object-Inspector is only applied to the selected part of the text object.

You can also select a part of a text by pressing the SHIFT key and moving the cursor with the arrow keys on the keyboard.

Advanced text objects
When you insert a new text object it can't be scaled or rotated and you can't apply any advanced fill and effects. Besides that it will always be placed on top of all other graphical objects on the page. If you want to have text objects with advanced fill and effects applied to it (for instance a logo) just check "Allow advanced text" to allow more advanced types of text objects. All new text objects are by default not advanced because it will be more time consuming for your visitors to visit your homepage if all or to many of your text objects are actually graphical objects.

If you want to have a Homepage that is downloaded very quickly be careful not to use many large graphical objects such as rectangles, circles or advanced text objects.


ToolBox->The Rectangle Tool

The Rectangle Tool

How to insert a Rectangle object
Select the Rectangle Tool from the Toolbox, click and drag the mouse to create the rectangle.

By using the Arrow Tool you can move it to another location, and scale or rotate it. The color fill can be adjusted by using the Fill-Inspector, and the effects such as shadows can be applied by using the Effect-Inspector.


ToolBox->The Ellipse Tool

The Ellipse Tool

How to insert an Ellipse object
Select the Ellipse Tool from the Toolbox, click and drag the mouse to create the ellipse.

By using the Arrow Tool you can move it to another location, and scale or rotate it. The color fill can be adjusted by using the Fill-Inspector, and the effects such as shadows can be applied by using the Effect-Inspector.


ToolBox->The Picture Tool

The Picture Tool

How to insert a Picture
 Select the Picture Tool from the Toolbox and click the mouse at the location where you want to insert the picture. This will open the normal dialog box where you select the picture you want to insert.

After you have inserted the picture object you can use the Arrow Tool to move it to another location, and scale or rotate it.

The picture object is actually just a normal rectangle object with a picture fill. You can see this fact if you click on Fill in the Toolbar and look in at the fill settings in the Fill-Inspector.
How to insert an animation
 You can also use the Picture Tool to insert animated GIF's. Simply select the
Picture Tool from the Toolbox and click the mouse at the location where you want to insert the animation. This will open the normal dialog box where you select the animation you want to insert.

After you have inserted the animation you can use the Arrow Tool to move it to another location and even scale it.


ToolBox->The Counter Tool

The Counter Tool

With the Counter Tool you can insert any number of counters on the pages in your Homepage. A counter is a small image displaying how many visitors has seen your pages. This small image is updated automatically each time you have a new visitor on the page where the counter object is placed. This way you can observe which pages are the most frequently visited.
Insert a counter
Select the Counter Tool from the Toolbox, move the mouse to the place on the page where you want to insert the counter object and click on the left mouse button. The counter can moved around as any other object just by using the Arrow Tool. On your computer the counter always read 6536 but on the Internet it will always show the correct count.

Choose another look for your counter
 You can choose between a few different counter types by using the Object-Inspector.


ToolBox->The Pipette Tool

The Pipette Tool

 You can use the Pipette Tool to select colors from one of the objects. If for instance you have inserted a picture of a lake in a wood you can select a special color from that lake by selecting the Pipette Tool and then clicking on the color. The color you select is placed in the colored rectangle at the bottom of the Toolbox. This color is called the chosen color. VisualSite Designer will remember this chosen color the next time you use VisualSite Designer.


Toolbox->The Chosen Color Tool

The Chosen Color

The Chosen Color can be seen in the bottom of the Toolbox. Here you can save colors for later use. If you click on the Chosen Color a dialog box opens where you can select a new color. Another way of settings a new Chosen Color is by using the Pipette Tool.

When you specify the background color fill for a page or the solid color fill for an object you can use this Chosen Color.


Toolbar

The Toolbar is the row of buttons you find just below the menus in VisualSite Designer.
The Toolbar is divided into 4 categories. Below you can find a description of each of the 4 categories. If you want to know more about a button you can click on it and get a more detailed explanation.
This Toolbar can only be used if you have a Homepage opened in VisualSite Designer.

Page Administration
The first 3 buttons in the Toolbar is used to administrate the individual pages in your Homepage.

Change the content in the Inspector
With these 7 buttons you can control the content of the Inspector. If for example you click on the Effect button the different settings for the effects on an object is shown in the Inspector.
Send
With a single click on this button you publish the Homepage on the Internet.


Toolbar->Page Administration

With this button you can add new pages to your Homepage. As described in What is a Homepage a Homepage consists of a front page and a number of subpages. By using this button you can add any number of new subpages.

You can remove the current page from the Homepage by clicking on this button. Because at least one page has to be open at any time for the Homepage you can only use the Delete Page button if you have at least one open page.

If a Homepage contains many pages there is no need to show all of them at the same time. A page is not deleted from the Homepage just because it is closed. At any time you can show the page again by clicking on this button and selecting it from the list.


Toolbar->Change of Inspector

With these 7 buttons from the Toolbar you control the content of the Inspector. If for example you click on the button Effect the different settings for the effect on an object is shown in the Inspector.

By clicking on the button Page the different settings for a page are shown in the Inspector.

By clicking on the button Object the different settings for an object are shown in the Inspector.

By clicking on the Link button the different settings for hyperlinks attached to an object are shown in the Inspector.

By clicking on the Fill button the different settings for filling an object are shown in the Inspector.

By clicking on the Effect button the different settings for effects on an object are shown in the Inspector.

By clicking on the button Styles different styles are shown in the Inspector.

By clicking the button MouseOver the settings for the MouseOver effect is shown in the Inspector.


Toolbar->Send

By a single click on this Send button you can publish your Homepage on the Internet. In order to use this button you need to specify some settings for your Internet connection. If you have already done this the dialogbox below is now shown.

If this is not the first time you use the button Send to publish this Homepage you should click on the button "Send Changes". If however something is wrong and the published Homepage don't correspond to the Homepage inside VisualSite Designer, you can click on the button "Send All" to make it right again. This will of course take more time. After you click on one of these buttons VisualSite Designer connects to the Internet and starts to send the data.


Inspector

The Inspector shows nearly all possible settings in VisualSite Designer. They are all collected in this window to make the user interface simple yet powerful. This Inspector is always visible and your actual settings is always shown and is adjustable in this window.

In the Toolbar you find these 6 buttons and by clicking on one of these you can specify what kind of settings you want to show in the Inspector.
Page
Object
Link
Fill
Effects
Styles
MouseOver

The Inspector can be closed by clicking on the cross in the upper right corner. You can also show or hide the Inspector by using the menu "View".


Inspector->Page

The Page-Inspector
The inspector for page-settings is shown if you click on the Page button in the Toolbar. Settings for the active page is shown in the Page-Inspector.
Information
Page Title
The page title you write here is the title that is shown in the browsers blue upper bar.
Page ID
If you use the Link-Inspector to create links from one page to another within your own homepage you need to specify that destination page in some way. This is done by assigning each page with an "Page ID". These ID's must all be unique whereas the Page Title can be the same for all pages. This ID is only visualized inside VisualSite Designer and is not shown to you Homepage visitors.
Width
You must specify the width of your page. Note that the individual pages in your Homepage need not have the same width.
Height
You must specify the height of your page. Note that the individual pages in your Homepage need not have the same height.
Front page
Each Homepage needs one and only one front page. The front page is the page that is shown first to your visitors. If the active page is not the front page this checkbox is not grayed (as it is above) and it is therefore possible to check it and thereby make the active page the new front page. In other words, it is only possible to specify that a the current front page must no longer be the front page by actually selecting a new page as the front page.

Background

Each page has its own background. Often this background is just the color white, but when you design your Homepage in VisualSite Designer this background can be all sort of colors, images or gradient color fills.

Single Color
Click on the colored button to select another color for the background. You can also click on the button "ß Chosen Color" if you want to use the color from the Toolbox. Read more about the Chosen Color.
Picture
You can also place a picture as the background for your page. You specify the actual picture be clicking on the button "..". If this picture is smaller then the page itself it is placed in the center of the page but you can make it fill the entire page by checking "Repeated Picturefill".
Gradient
A gradient color fill can be placed across the page by selecting "Gradient". In the example above the gradient color fill is from black to white with a smooth interpolation. If you click on the colored rectangle the Gradient Designer is opened and you can design your very own gradient color fill. By default the gradient color fill goes from left to right but you can make it go from the top to the bottom of the page if you uncheck "Horizontal".

Click here to see some examples of background color fills.


Inspector->Object

The Object-Inspector
The inspector for objects is shown if you click on the Object button in the Toolbar. In this window you will always see the settings for the currently selected object. An object is selected by clicking on it with the Arrow Tool. A selected objects is illustrated by a surrounding blue border.
Information
Width
Width of the object.
Height
Height of the object.
Angle
The number of degrees the object is rotated.

Information
(Text)

When you use the Text Tool to edit a text object, the normal settings such as for instance font and size is shown in this window. Please note that if you select the text object with the Arrow Tool these settings is NOT shown. They are only shown when you actually use the Text Tool to edit the text.
Font
Click and select different fonts from the list.
Font size
Click and select the size of the selected or the new letters.
Bold
Use bold letters.
Italic
Use italic letters.
Underlined
Underline the text.
Color
Click and select the color of the selected or the new letters.
Left-aligned
Use left alignment.
Right-alignment
Use right alignment.
Center
Center the text.
Allow advanced text
Specify if the text object can have different types of fill and effects. Click here to read more about Standard Text objects.

Button Text

On both rectangles and ellipsoids you can write text directly on the shape. Use the Button Text Inspector to do this. Write the text in the Button text field, and the text is immediately shown on the shape.
Font
Click and select different fonts from the list.
Font size
Click and select the size of the buttontext.
Text color
Click and select the color of buttontext.
Bold
Use bold letters.
Italic
Use italic letters.
Underlined
Underline the text.
Button text
Write the text that is to be written on the button.
Left-aligned
Use left alignment.
Right-alignment
Use right alignment.
Center
Center the text.
Use
Click to use shadow on the buttontext.
Shadow color
Click and select the color of the shadow.
Shadow direction
Click and select the direction of the shadow.
Shadow distance
Select the distance of the shadow from the buttontext.
Alternative text

When you surf the Internet you often see a small yellow textbox when the mouse is moved on top of a picture. This is a nice feature that allows the creator of the homepage to shop a small explanation of the picture. You can also do this by writing that text here. Please note that you can only use this feature on advanced text objects and circles/rectangles.


Inspector->Object

The Link-Inspector
The inspector for links is shown if you click on the Link button in the Toolbar. In this window you will always see the settings for any hyperlinks attached to the currently selected object. An object is selected by clicking on it with the Arrow Tool. A selected objects is illustrated by a surrounding blue border.
Web

The Web settings is only active when your Homepage is actually viewed in a Browser. You can do this by using the Preview Homepage command.

Links is a way of making references from one page to another. In VisualSite Designer it is possible to insert 4 different types of links: link to a page inside your Homepage, launch the email-program installed on the computer, make a link(jump) to another homepage or even link to a local file on your computer.

Use Link
Specify if you want to use the selected link or not.
Page
By selecting the link type "Page" you can make a link to another page in your Homepage just by selecting it from the dropdown list.
E-mail
By selecting the link type "E-mail" and writing an e-mail address in the text area just to the right the normal e-mail program is opened when somebody clicks on this link. The e-mail address you write is inserted as the receiver.
WWW
 By selecting the link type "WWW" you can link to another Homepage just by specifying its address to the right of "WWW".
Document
If you want to share some of the files on your computer with the visitors on your homepage you can do this by using a Document-link. If you for instance wanted your visitors to be able to hear your new song that you recorded and stored as a MP3 file you can do this. Try for instance to write text text "Click here to download my new song". Then select the "Click here" part, open this inspector for Link and write the path + filename of this MP3 song. You can also select the song by using the button in the lower right corner. When you use the built-in Send function to upload your homepage this MP3 file will be uploaded as well.


Inspector->Fill

The Fill-Inspector
 The inspector for fill is shown if you click on the Fill button in the Toolbar. Four different types of fill can be applied to all objects. It is always the settings for the currently selected object that is shown in the Inspector.

Fill
 | Single color Click in the colored rectangle to choose a new color for the selected object. You can also click on "<- Chosen Color" to use the chosen color from the Toolbox as the color for the object. Click here to read more about the Chosen Color.
 | Picture When you choose "Picture" as the type of fill you will be asked for the location of the picture. This picture will be scaled to fit the selected object. If you already use a picture as the object-fill but want to use another then just click on the button to the right of "Picture".
 | Gradient A "Gradient" color-fill can be applied to an object. If you click on the colored rectangle to the right of "Gradient" the Gradient Designer is opened. In this you can design your own unique color-fill. By using the angle wheel you specify the angle of the gradient color-fill. Use the mouse to change the angle.
 | Text Color For a text object you can also choose to fill it with "Text Color". This means that the individual colors you can choose for all letters is used as the color fill.
Click here to see some examples of the different types of fill .


Inspector->Effects

The Effect-Inspector
The inspector for effects is shown if you click on the Effect button in the Toolbar. For all kind of objects 3 different types of effects can be applied. If you want an effect applied you have to turn it on by checking "On". It is always the settings for the currently selected object that is shown in the Inspector.

Shadow
On
By checking this checkbox you turn on the effect.
Type
There are 3 different kind of shadows. Choose between "Outer", "Inner" and "Both". Click here to see some examples.
Offset
Use this slider to offset the shadow away from the object.
Softness
Use this slider to adjust the softness of the shadow.
Transparency
Use this slider to adjust the transparency of the shadow.
Angle
With this angle wheel you can determine in which direction the shadow must go.
Color
By clicking in the color field you can specify the color of the shadow.

Bevel

On
By checking this checkbox you turn on the effect.
Type
There are 4 different types of bevel effects. Choose between "Outer", "Inner", "Both" and "Pillow Emboss". Click here to see some examples.
Softness
Use this slider to adjust the softness of the bevel effect.
Transparency
Use this slider to adjust the transparency of the bevel effect.
Up/Down
By checking either Up or Down you specify if the bevel effect must go up or down.

Glow

On
By checking this checkbox you turn on the effect.
Type
There are 3 different types of glow effects. Choose between "Outer", "Inner" and "Both". Click here to see some examples.
Softness
Use this slider to adjust the softness of the shadow.
Transparency
Use this slider to adjust the transparency of the glow effect.
Color
Click on the color rectangle to adjust the color of this Glow effect.

Click here to see some different effect examples.


Inspector->Styles

The Styles-Inspector
 The inspector for styles is shown if you click on the Styles button in the Toolbar. By using Styles you can choose between 18 different combinations of fill and effects for the selected objects. A style is applied just by clicking on the small associated example.
Styles


Inspector->MouseOver

The MouseOver-Inspector
When surfing on the Internet you have probably noticed how some graphic objects
changes when the mouse is moved on top of the object. You can create this same effect on Homepages when you use VisualSite Designer to build your website. To the right is a small example of the MouseOver effect. As you can see the object changes it's appearance when you move the mouse on top of the object.
To make the same effect as above start out with making a green circle using the Ellipse Tool. If you now click on the MouseOver button in the Toolbar the inspector to the right is shown. If you now click on the button Create you will notice how the object gets 8 green handles instead of the blue handles.
The inspector now changes to the one on the right. You now actually have two objects: the original object and the MouseOver object. They have the same position, size and everything. You can switch between the two objects by using the "Show" radio-buttons. If you try to give the object another size and then toggle between the two objects using the radio-buttons you can now see the difference.
Positions however are the same for both objects so if you move one of the object you actually move both. The only way do move the objects slightly independently of each other is to use the offset.

If you use the MouseOver effect on text-objects and you edit the text for lets say the original object then the text in the MouseOver object is changed as well. The same goes for buttontext on circles/rectangles. You can however have different text for the two objects by removing the checkmark in the MouseOver inspector.


Statusbar

Below you see the Statusbar in VisualSite Designer.

In this Statusbar you can find the following types of information:
The position of the currently selected object is shown in the area to the left. In the example above the object is placed in position (339,59). This position is measured in pixels.
To the right of the position the number of pages in the Homepage is displayed. In the above example there are 7 pages in the Homepage.
Then we have the size of the entire Homepage and the size of the active page. In the above example they read 1616Kb/126Kb. This means that the entire Homepage occupies 1616Kb and the active page just 126Kb. Kb stands for Kilobytes.
To the right you see how long it takes to publish the entire Homepage or just the active page. In this example it takes approximately 3 minutes to publish the entire Homepage and less than a minute to publish the active page. When you use Send to publish your Homepage VisualSite Designer will only send the changes you have made since the last time you published. So in the above example it may take less than 3 minutes. But you can also use these estimates to see how much time it takes for a visitor to download your pages.


Frequently Asked Questions

Can I insert Counters, Guestbooks, Html, JavaScript?
The Html Tool in combination with the command "Insert Keywords and Html Header" can be used to insert all these things. But please be aware that if you do not get the desired effect it is because there is a problem in your code and not with the Html code generated by VisualSite Designer.
I can't find my Homepage on my computer!
VisualSite Designer saves your Homepage in files with the extension ".vnu". Use the command Start->Find->Files or Folders in the Windows Taskbar and enter .vnu
Now click on Find Now to see a list of all the Homepages on your computer.
I can't find my own Homepage on the Internet.
Please check that the correct address is specified in the dialog box under the menu Files->Misc->Internet Connection. If it still doesn't work then contact your Internet provider and get the correct information.
When I try to send my Homepage to the Internet I get an error message.
Be sure you entered the correct information in the dialog box under the menu Files->Misc->Internet Connection.
It takes a long time to view my Homepage on the Internet.
Try not to use to many large images or objects on your pages.
When viewing my Homepage on the Internet I just see a lot of files.
You probably didn't write the correct catalog-name in the dialog box Internet Connection under the menu Files->Misc->Internet Connection.
When I view my Homepage on another computer the fonts and layout is different.
If you use very exotic fonts on your Homepage there is the possibility that these font is not installed on other computers. This means that the layout of the affected text objects changes. Try and use more normal fonts such as Arial or Times New Roman.
I forgot my username or password.
Contact your Internet provider.
How can I reuse graphic objects?
Select the object you whish to reuse and copy it to the Windows Clipboard by using the command Edit->Copy. You can now insert an exact copy of this object on the page by using the command Edit->Paste.
How do I insert an image on the page?
You can insert an image in two ways. You can use the Picture Tool from the Toolbox or you can apply the filltype Picture on the object.
I can't place the objects exactly where I want them.
By using guides you can align objects more precisely. You can also use the arrows on the keyboard to do pixel-precise placement.
How do I select more than one object at the same time?
Press the Shift key while you click on the objects you want to select.
The Inspector window is not shown.
You can show or hide the Inspector window by using the command View->Show/Hide Inspector.
The Toolbox is not shown.
You can show or hide the Toolbox by using the command View->Show/Hide Toolbox.
I am told that I use large objects but I am not aware of this fact.
There can be different causes for this. Most often it is because you have very large rectangles or ellipsoids on your pages. It can also be because you have an advanced text object with some fill and effects applied to it. Such an text object will be constructed as a graphical objects when your homepage is either previewed or published. A advanced text object can be toggled to a standard text object by un-checking Allow advanced text.
When I print a page from my homepage using VisualSite Designer then the background is not included. Why is that ?
VisualSite Designer is using standard functionality from Microsoft Internet Explorer when printing. Start Internet Explorer (your browser from Microsoft). Under the menu Tools select the command "Internet Options". Click on the tab "Advanced" and scroll down to locate the entry "Printing". There must be a checkmark here to ensure that a print includes everything on the page.


Glossary

Browser
A browser is the program used when you are surfing the Internet. Internet Explorer is part of your Windows computer so a browser is already installed on your computer. Netscape Navigator is another browser that is often used.
Counter
On many Homepages you often see a small image of a counter showing the number of visitors the Homepage have had so far. This way of visualizing the number of visitor is often referred to as a counter.
Tabs
Tabs are used for dividing dialog boxes into several different pages with different content. In the Effect Inspector you see an example of a dialog box with 3 tabs. Each effect Shadow, Bevel and Glow has its own tab. You can click on the different tabs to exchange the content of the Inspector.
HTML
Abbreviation of Hypertext Markup Language, and is the native Homepage format. When you publish Homepages with VisualSite Designer, VisualSite Designer automatically generates HTML files and publish them on the Internet.
Java
Java-elements are often used in order to make a page more interesting. The MouseOver Object in VisualSite Designer is an example of a Java-element.

Kilobyte
A Kilobyte (or often just Kb), equals 1024 bytes and is a measurement of bits.
Hyperlink
A Hyperlinks is a reference on a Homepage that you can click on. After clicking on a hyperlink you jump to a new Homepage on the Internet. In this way you can jump to Homepage all over the world. Hyperlinks are also used to link pages in one single Homepage together.
Pixel
Like a Television screen, a computer screen consists of numerous little colored dots. These dots are referred to as pixels.
WWW
Abbreviation of World Wide Web. The World Wide Web is also known as the Internet.


Gradient Designer

You can use the Gradient Designer to apply very special and beautiful color fills to your Homepage and/or the objects on it. You have the possibility to experiment with colors just by using the mouse and your fantasy.

The Gradient Designer can be used in two different situations. When you design the background fill for a page or when you design the color fill for an object. You activate the Gradient Designer by clicking on the rectangular color bar just right of the text "Gradient".

When you click in this area the Gradient Designer is shown:

The two end-colors
Just above the rectangular color bar you can see two triangles. These determines the starting and the ending colors for the color fill.
You can click on these triangles if you want to change their colors. In the example below these colors are changed to yellow and blue. Notice how the Gradient Designer calculates the new gradient color fill.

Insert a new color separator
You can also insert any number of color separators between the starting and ending colors. A color separator can be inserted by clicking in the long rectangular color area and it consists of two colors, the left and the right color. In the example below a separator in inserted and by default the left and the right colors are the same.

Now we click in the left area of this new separator and choose an orange color. This gives the gradient color fill as seen below.

This new color fill has a hard edge in the middle but we can make it soft by also clicking in the right area of the separator and choosing the same orange color.

When you are done designing the gradient color fill click on OK. Below you see how an ellipsoid gets a beautiful gradient color fill.

Changing the placement of a color separator
By clicking on the blue border at the top of the separator and dragging the mouse you can change the placement of the separator.

Remove a color separator
You can remove an unwanted color separator by clicking on the small cross in the upper right corner of the separator.


Inspector->Page->Background Examples

Below you can see the different types of color fill for the background.
Two examples with solid colors.
On these two pages a picture is used as background. Notice that although the picture is quite small, all the background is filled. This is because Repeated Picture-fill is activated.
By using the Gradient Designer you can create interesting and colorful backgrounds on your pages.


Inspector->Effects->Examples

Below you see some different examples of applying effects. As shown the different effects can be combined.
The object to the left is used in all the examples below.

Example 1
If you add an outer shadow it seems like the object is floating on top of the page. | The bevel effect is applied to make the object seem like it has volume.

Example 2

In this example inner shadow with a very small softness is used. | With outer glow you get this result.

Example 3

Above an inner red shadow is used. | And a bevel effect then gives you this result.
Inner glow makes the resulting ellipsoid as it is seen above. |


Inspector->Effects->Bevel Examples

Below you see the original ellipsoid object and examples of the 4 different types of bevel effects.

The original object | Type: Outer bevel
Type: Inner bevel | Type: Both
Type: Pillow Emboss |


Inspector->Effects->Glow Examples

Below the original text and the 3 different types of glow applied to the text object is shown.

The original object | Type: Outer glow
Type: Inner glow | Type: Both


Inspector->Effects->Shadow Examples

Below you can see the original ellipsoid object and examples of the 3 different types of shadows applied to this object.

The original object | Type: Outer shadow
Type: Inner shadow | Type: Both


Inspector->Fill->Examples

Below you see a few examples of objects with different types of fill.
Above the "Single Color" type is used with two different colors.
A picture is used as the fill for these two objects. For en ellipsoid the picture is actually clipped in order to fit the round shape.
With the Gradient Designer you can create the exotic color fill as it is seen above.


Menuen->Filer->Diverse

Standard settings for new pages
Preferences for background fill
Help Dialogs
Internet connection
Remove the published Homepage
Register VisualSite Designer
Standard settings for new pages
This command opens the dialog box below.

In this dialog box you can change the standard settings that apply for all new pages when you create these. Your pages can easily have different sizes, names and background fill but when they are created they will inherit the settings specified here.

In the edit fields for Page size you can specify the default width and height of the new pages each time you insert a new page in you Homepage.

Under "Page background" you can specify the type of fill for the background. You can choose between a single color, picture-fill or graduated color fill.

The standard settings for new pages can also be based on an existing page. This is done by choosing the page from the list and click OK. Be aware that these new standard settings are only applied to new pages. You can however also apply the new standard settings for all existing pages just by clicking on "Apply new settings to existing pages".
Preferences for background fill
This command opens the dialog box below.

The pages in your homepage all has a specified width and height. But when a person visits your homepage on the Internet the visitors browser may be wider or higher than the page you designed. This means that your visitors browser should show something beyond the page area. In this dialog box you can specify if the background fill should be repeated beyond the border (default) of if this area should be filled with a solid color.
Help dialogs
This command opens the dialog box below.

In VisualSite Designer you will find several help dialogs explaining how to use VisualSite Designer. In this dialog box you can decide whether or not you want so see these help dialogs.
Internet connection
 This command opens the dialog box shown below.

VisualSite Designer needs to know where to send your Homepage when you whish to publish it by using the button Send from the Toolbar. In the first 4 fields you must specify some information about how you connect to the Internet. You need to specify the Destination Server, your Username, Password and the destination catalog on the web-server. This information was supplied to you when you received your Internet account. If you are connected to the Internet through a Proxy Server then get your system administrator to fill out these fields.
Remove the published Homepage
You can remove all files published by VisualSite Designer from your Internet account by using this command.
Register VisualSite Designer
 This command opens the dialog box shown below.

If you have not registered your version of VisualSite Designer you can do so in this dialog box.


Make your first Homepage->Step 1

If you already have opened a Homepage then close it now. You will find the command "Close Homepage" in the Files menu.


Make your first Homepage->Step 2

Choose now the command "New Homepage" from the Files menu. This command will open the dialog box you see below.

A Homepage on the Internet consists of a front page and a number of sub-pages. These pages (documents) must be available to others. Usually these pages are available through a Internet provider that keeps the pages located on a web server.

You can think of a Homepage as a clever lexicon that contains informations, and where you can easily search and navigate through these informations. These informations can be represented in many way, and typically you will see it presented as text and graphical object or a combination of both. You navigate through a Homepage by using links (hyperlinks).

Each time you add new pages to your Homepage they will inherit the "Name", "Width", "Height", "Homepage background" and the "Homepage link colors" that you specify in the dialog box. The pages in your Homepage can off course have individual settings but by default they will have the settings you specify in this dialog box. You can at any time alter these default settings for your Homepage by choosing the command Files->Misc->Homepage Preferences.

The "Name" is the title that is shown in the top blue bar in the browser. Write "My Homepage" in the fields. Set the width to 400 and the height to 600. Each page in your Homepage has a background and any number of objects. In VisualSite Designer this background can be a solid color, picture fill or a gradient color fill. Choose the solid color white as in the example above. If the rectangle is not white just click on it and select the white color. Now click on OK. You have now created a Homepage on your computer. Please note that this Homepage can't be seen by other than you until you choose to publish it to the Internet. After you click on OK the first (and only) page in your Homepage is opened. Now is a good time to save it by using the command "Save As" from the Files menu.

You are now ready to insert a text object on the page.


Make your first Homepage->Step 3

Select the Text Tool from the Toolbox, move the mouse over the blank page, click and drag the mouse to mark a red area. Release the mouse-button and notice the blinking cursor in the red rectangle. This means that you can start writing the text. Write the text "Dear guest - Welcome to my new Homepage".

You can change the width of the red rectangle by moving the mouse to one of the red arrows on the left or on the right side of the rectangle. The height of the red rectangle is adjusted automatically to fit the text. In other words, the only way you can adjust the height is by adjusting the width or by entering more text.

The font or the font size of the text you just entered probably don't match the text in the above example. Click on the Object button from the Toolbar and notice how the Inspector now shows the settings for the text. You can change the font or the font size for the text or just a few letters by selecting them with the mouse. You select letters by clicking and dragging the mouse. One you have selected the letters then select the new settings in the Object-Inspector.

You can insert any number of text objects on the page and you can can always alter a text object by selecting the Text Tool and clicking on it. Notice that can't edit a text object unless it has a red border which means that is is ready to be edited. You do this by selecting the Text Tool and click on the text object.

You are now ready to insert a rectangle on the page.


Make your first Homepage->Step 4

Select the Rectangle Tool from the Toolbox click and drag a rectangle with the mouse. The rectangle has a blue border and 8 handles around it. Move the mouse over the handles and notice how the mouse changes as in the example below.

If you move the mouse over one of the blue handles on the left or the right side you can adjust the width of the rectangle by click and dragging the handle to a new location. You can adjust the height with the handles at the top and the bottom. You can adjust the angle width the 4 handles in the corners. The rectangle can be moved to another location if you click in the center of the object and drag the mouse.

Notice that the text object no longer has a border around it. This is because it is the rectangle and not text that is selected. Click on the text and notice how it gets selected and the rectangle gets unselected. Try to move, rotate and scale the text just as you did with the rectangle. As explained on the previously page you need to select the Text Tool and click on the text object to actually edit the text. Do that now and notice how the text is shown in its normal state with the red border because you are now editing the text. Make a small change in the text and select the Arrow Tool from the Toolbox and notice how the scale/rotate is restored and the text object is shown with the blue border.

You are now ready to change the fill on the rectangle.


Make your first Homepage->Step 5

Lets make the rectangle red instead. Select the rectangle (select the Arrow Tool and click on the rectangle) and click on the button Fill in the Toolbar and notice how the Inspector shows the settings for the objects fill as in the example below.

Click on the colored rectangle to the right of "Single Color" and choose for instance a red color. As you see the rectangle turns red.


Make your first Homepage->Step 6

Now insert a new page into your Homepage by clicking on the button "Add Page" found in the Toolbar. Insert a blue ellipsoid on the new page by using the Ellipsoid Tool.

Lets make a reference (link) from this blue ellipsoid to the first page. By doing this the visitor on your new Homepage can actually jump from the page to the first page just by clicking on the blue object. To do this click on the button Link in the Toolbar. Now select the first page from the left just to the right of "Page". The first page is also the front page in your Homepage. Notice how a checkmark was set in "Use Link".

Now select the first page again as the active page and insert a new text object "Click here to jump". Select the word "here" in this new text object and select the second page from the page list in the Link-Inspector. The two pages are now connected.

Click here to see how you can test your new Homepage.


Make your first Homepage->Step 7

Select the command "Preview Homepage" from the View menu. This opens the built-in browser. The first page you see is the front page. Click on the link and notice how you jump to the other page. Now click on the ellipsoid link to jump to the front page. You close the browser by clicking on the checkmark.

Click here to see how you can publish your new Homepage.


Make your first Homepage->Step 8

It is now time to publish the Homepage. In order to do this VisualSite Designer needs to be registered with a serial number. If you already did this please go to the next page. If not, select the command "Register VisualSite Designer" in the menu Files->Misc to open the dialog box below where you can register VisualSite Designer.


Make your first Homepage->Step 9

Select the command "Internet Connection" from the menu Files->Misc. This command will open the dialog box you see below.

In the upper 4 fields you must enter the correct information about your username, password, the destination server and the catalog where you must place your own Homepage. You got these informations together with your Internet account. If you are connected to the Internet through a proxy server then let the system administrator fill out the fields for proxy servers. Click on OK.

VisualSite Designer is now ready to publish your Homepage to the Internet. Click on the button Send to open the dialog box seen below.

You can here choose between sending the changes since the last publish, or sending the complete Homepage. Click on "Send All". Now start your browser to see the published result.


Make your first Homepage->Step 10

The Homepage you just published probably don't contain the information you want others to read. You can remove the Homepage by choosing the command "Remove Homepage" in the menu Files->Misc. VisualSite Designer will then connect to the Internet and remove your Homepage. Please note that the Homepage on your own computer is not removed.


Make your first Homepage->Congratulations

Congratulations. Your first Homepage is now published. Click here to return to the overview of the Online Help.


ToolBox->The Html Tool

The Html Tool

What is a Html Object and how do you insert it on the page

With CoffeeCup VisualSite Designer you can define areas on your pages where Html code can be inserted. If for instance your Internet Service Provider allows you to use Guestbooks, Counters etc. they usually also tell you how to insert these things. And it is always some piece of Html code. You can insert these Html codes by using the Html Tool in CoffeeCup VisualSite Designer.

 Please note that if the Html code don't work as you expect it's because there is a problem with your code and not with the program.

You will find several free services on the Internet. One example is this page http://www.tenzero.com/
Select the Html Tool from the Toolbox, click and drag the mouse to create an area as you see to the right. You can move this area around and give it a new size using the Arrow Tool. The actual visualization has nothing to to with how the object will look like on the Internet. The object is still empty in the sense that it don't contain any Html codes yet.
To actually insert Html codes into this object click on the Object button in the Toolbar to show the Inspector to the right. Now click on the Edit-HTML button to open a dialog box where you can insert all type of Html code. What happens is that your Html-code is placed inside a table with the width, height and position as specified by the area you made to start with.

If your Html objects depends upon the existence of certain JavaScript's, Style Sheets etc you must use the command Edit->Insert Keywords and Html Header... to insert these.

If you need to edit the Html code at a later time then just select the Html object, click on the Object button in the Toolbar and click on "Edit HTML" again to perform the changes.