CoffeeCup - HTML Editor, Flash & Web Design Software

Follow these ten steps where we guide you through your first Homepage example. After this you will have created an Homepage and published it on the Internet.

Step 1.

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. If you already have opened a Homepage then close it now. You will find the command "Close Homepage" in the Files menu.

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 information, and where you can easily search and navigate through the information. The information can be represented in many ways, 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 of 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 others 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.

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 doesn'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 you can't edit a text object unless it has a red border which means that is ready to be edited. You do this by selecting the Text Tool and click on the text object.

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.

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.

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.

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.

Step 8.

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.

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.