WebDwarf Tutorials banner
WebDwarf logo
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 two simple pages. Each page will be quite similar; some text, an image, a link which points to the other page. We'll save it all in two projects named "Hello1.ims and Hello2.ims". Here are the steps we cover in this tutorial:

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



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 work page. This is the file name you should use for the opening page of any new website, 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 - Hello1. WebDwarf 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 to your computer you won't lose too much work.

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 centered big bold
Hello World!!! near the top. This one is in bold 18-point Verdana font. Add some text underneath in a smaller font, say 12-point.

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, Rose.jpg.

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

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

Now let's see how the page looks in your browser. Click the spyglass preview button on the top toolbar. Try the link -- as you haven't created the second page yet, it probably won't work.  When finished, return to your workpage.

If you haven't already done so, click the Save button to save your page.



Your second page

Select "File > New Project" from the top toolbar, and a new blank page will appear. This is a good time to rename it. Where you see the "index" text overtype it with something meaningful. Use Hello2 in this case. This name may be different from the .ims project name, but here to avoid confusion, we named both project and page the same.

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.
Your second link

Now you are ready to make your second link, Create another text object that says something like "Link to index page" then Save and Close the Text Editor. Position the text object on your page where you want it.

Right-click the new text object to open the Quick Editor and select the Link tab. Place the link like this:
Link Type: leave blank
Link:URL :  index.html

You should now have something like this:

Save and Close
On the second page
On the index page
Preview second page

Click the preview button to build the second page. If the links are working properly, you should now be able to navigate between the two pages by clicking on the links you have made.

Just in case you have trouble, there are "Hello1 and "Hello2" project files in the Virtual Mechanics\WebDwarf V2\Tutorials folder. Yours will be much better!
Reopen an existing project

Because you saved your projects before or as you exited WebDwarf, they are safely stored on your disk. There are several ways you can reopen a 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 pages. You have previewed them in your browser and they look fine --  we hope!

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


Next: Publishing Your Project
Rose
Tool: Text Editor
Tool: Image Editor
Tool: Quick Editor
Preview all pages
Link on index page
Preview all pages
Preview all pages
< Tutorials Home
Link on Hello2 page
Page link to index page
Virtual Mechanics Logo
WebDwarf
®

Tutorials
Save button
First link

Now you are ready to make your first link. Create another text object that says something like "Link to page Hello2". Save and Close the Text Editor. Position the text object on your page where you want it.

Right-click the new text object, and from the Quick Editor, select the Link tab if it is not already open. Leave the link type blank (left hand drop-down box). Type Hello2.html as the link URL (right hand box). You should now have something like this:

Tool: Text Editor
Tool: Quick Editor
New project
Page list
Page name Hello2