SiteSpinner Tutorials banner
Virtual Mechanics Logo
SiteSpinner
®
Your First Project: Hello World

It is traditional to try out a new program with a "Hello World", and we're going to follow the tradition -- here are the steps to making two "Hello World" pages announcing your presence on the Web to the whole world. (If they are watching!)

Let's build a simple two-page project. Each page will be quite similar; some text, an image, a link which points to the other page. We'll save it all in a project named "HelloWorld.ims". Here are the steps we cover in this tutorial:

First step -- fresh project
First text
First image
Preview
Your second page
Add text and an image
Your first link
Your second link
Preview all
Reopen an existing project
Next

Preview this page (single-page spyglass button on the top toolbar, or hot key F7). Keep it open in your browser window so you can read these instructions.



First step -- fresh project

Click on the main menu File > New Project (top left corner). There is also a button top left. If your workpage wasn't blank before, it will be now. You are about to start work on your index page. It will have the name "index" showing in the drop-down page list at the top of the workpage. This is the file name you should use for the opening page of any new project, so don't change it without good reason.

The next step is to save your project - click the Save button on the left of the top toolbar. Give the project a new name - HelloWorld. SiteSpinner automatically adds a .ims file extension.

Now as you add to your pages, click the Save button periodically. Ctrl+S is a keyboard shortcut that does the same thing. This ensures that if Anything Bad happens you won't lose too much work.

SiteSpinner logo
Preview current page
Preview all pages
New project
Page list
Save button
First text
Click on the Text button on the left-hand (tools) toolbar. This opens the Text Editor with a blank slate. As you would with a new word processor, play around a little - type some text and try a few fonts. Stick with common fonts that everybody is likely to have installed on their computers. Arial, Times New Roman and Verdana are good choices. Set font size and color too.
Put a big bold
Hello World!!! near the top. This one is in bold 18-point Verdana font.

When you are ready, click the "Save and Close" button at the bottom of the Text Editor. Position the text object so that it is near the top of your workpage and stretch it horizontally (by dragging the edges) so that it is 600 pixels wide. Check the ruler bar at the top of your page for the size. Make sure you have the ruler bar and snap grid turned on - see Grid guide buttons.
 


First image
Click the Mona Lisa button on the tools toolbar. Browse around your computer to find a smallish image that will fit comfortably on the page. There are a few images in the ClipArt folder -- here is a rose.

Tool: Text Editor
Save and close
Ruler button
Snap grid button
Tool: Image Editor
Rose
Depending on where you installed SiteSpinner, you might find it in a location like this:
C:\Program Files\Virtual Mechanics\SiteSpinner V2\ClipArt\flower_temp.jpg

Drag the image around to position it just where you want.
Preview

Now let's see how the page looks in your browser. Click a spyglass preview button the top toolbar. There are two buttons: the first previews the current page, the second previews all pages in your project. In this case, as you have only one page in your project, either button will work just fine. When finished, return to your workpage.
 
The last thing to put on this page is a link to page2. But we don't have a page2 yet, so let's make one now.



Your second page

Click the "Add New Page" button on the top toolbar and page2 will appear. This is a good time to rename it. Where you see the "page2" text overtype it with something meaningful. Use Hello2 in this case.

Don't use spaces or punctuation in page names as this can lead to trouble later. Just use plain letters and numbers. Use something meaningful and keep your page names short. 
If the entire name does not show in the edit box, it is too long.



Add text and an image
Just as you did for your index page, add some text and another image to your second page.
Preview current page
Preview all pages
Button: new page
Page list
Your first link

Now you are ready to make your first link. Make sure you are still on your second page (Hello2) then create another text object that says something like "Link to Index Page". Save and Close the Text Editor. Position the text object on your page where you want it.

Select the new text object by clicking it once. Open the Quick Editor then click the Link tab. Select [ page ] as the link type (left hand drop-down box). Select index as the link URL (right hand drop-down box). You should have something like this:

Save and Close
Tool: Quick Editor
Link on Hello2 page
Page link to index page
On the second page
Preview again; this time you will be looking at your "Hello2" page. Click on the link to the index page. If there are no mistakes, your browser should now jump to the index page. Close your browser.



Your second link
In the drop-down page list at the top of your page select the index page again. As you did on the Hello2 page, place a link like this:
Link Text: Link to Hello2 page
Link Type: [ page ]
Link:URL :  Hello2  (select from the drop-down list box, don't type it)


Preview current page
Preview all pages
Link on index page
On the index page
Preview all

This time clicking the double-page spyglass button will build both pages. If the links are working properly you should be able to navigate between the two pages by clicking on the links you have made.

Just in case you have trouble, you can find a "Hello World" project file in the Virtual Mechanics\SiteSpinner V2\Tutorials folder. Yours will be much better!
Preview all pages
Reopen an existing project

Because you saved your project before or as you exited SiteSpinner, it is safely stored on your disk. There are several ways you can reopen the project:
In the "Open Project" window there is a preview panel on the right hand side. This allows a sneak preview of the project so you can be sure you are selecting the right project file.

Next

Now you have built your first two-page project. You have previewed it in your browser and it looks fine --  we hope!

Next, you need to create the html files and upload them, together with the two images  to your server. This is called "Publishing" and is the subject of the next tutorial.


Next: Publishing tutorial