WebDwarf Tutorials banner
Finished Example
WebDwarf logo
Fast Start

If you have built web pages before, this tutorial is a quick overview of some of the features available in Web Dwarf. If you want to view a finished example of what we'll do here, press the "Finished Example" link above right. In this tutorial, we cover these short topics:
Start a new page
Rename the new page (optional)
Add a picture
Move the picture
Add a link to the picture
Preview
Create a rectangle
Add shading (to the rectangle)
Add  text and link
Add a title object
Shade the title
Merge the two images (rectangle and title)
Assign a background color to your page
Use a background tile
Add a Page Title
Cleanup
Publish your project
Next



Start a new page
If your workpage is not already blank, start a new page (project) by clicking the "New Project" button at the top left of your workpage.


Rename the new page (optional)
Locate the drop-down page list at the top of your workpage. This will be "index" unless you have changed it. For second and subsequent pages of the same website, overtype that name with another of your choice - something like TestPage2. Always give your pages short, meaningful names, and avoid spaces and punctuation.


Add a picture
Click the Mona Lisa button (Add a Picture) to load a picture. Select the file vmlogo.gif, the Virtual Mechanics logo from the /ClipArt folder, or your logo.


Move the picture
Click the picture with your mouse and drag it to the top left corner. The exact location is not important, because you can adjust it later when the other objects are in place.


Add a link to the picture
In the Quick Editor, select the "Link" tab. Select http:// from the Link Type (left hand) drop-down list box. Type or paste www.VirtualMechanics.com into the URL (right hand) box. Give the image a Title (next box down). Click the little "x" at top right of the Quick Editor to close it.

Create a rectangle
Back on your workpage, click the Rectangle button on the left toolbar. Move your mouse to about the center of the page and click to create a 100x100 square.



Use your mouse to grab and stretch the right edge to make a rectangle.


Quick Editor Shading tab
Quick Editor Shading tab showing gradient fill
Add  text and link
Click the Text button on the left toolbar to open the Text Editor. Add the text shown on the right -- or your equivalent.

Center the text -- there is a button -- "Justify Center" -- on the top toolbar of the Text Editor.

WebDwarf will make the link automatically -- it treats any text starting with http:// or www. as a link.

But if it doesn't, to make the link on the www.virtualmechanics.com part or any other text whilst in the Text Editor:
Save and Close
Re-rendering a group
Publish button
Cleanup
Remove unwanted objects from your page by Cutting or Deleting (Ctrl + X or Del).


Publish your project
Open the Publisher from the top tool bar. You can publish to a local directory or publish and FTP to your remote website host. A Gather option lets you transfer any referenced files such as pictures. Follow the instructions in the publisher to set it up for the first time.


Next
Congratulations, you now know about half of the features available in WebDwarf.

Please review the basic topics and advanced topics for more in-depth working examples.
If you need help with a specific problem, please visit our on-line support forum.


Making a link on text
Making a link on text
Select Cylinder (Cyl) at the bottom of the Shading dialog and the color 1 button. Adjust the sliders to make black.

Select the color 2 button and adjust the sliders to make green. The rectangle should now look like a green cylinder.


Preview again
Why not? Your page should look something like this one here:

Add shading
With the rectangle still selected, select the Shading tab in the Quick Editor.

Quick Editor Shading tab
Please visit the Virtual Mechanics website at www.virtualmechanics.com
Click Save and Close to exit the Text Editor. Move the text object so that it is below the green bar. Use your keyboard arrow keys to nudge it into place.

Your page should now look like this one:



Add a title object
Click the Title button on the left toolbar. Add the text on the right or similar:

Click OK on the top right of the Title Editor window to exit the editor.

Use your mouse to adjust the size of the title by dragging the corners or edges. Make it a little smaller than the green box you made just before -- it has to fit in there.


Shade the title
With the title still selected, open the Shading tab in the Quick Editor. Then select Radial (Rad) at the bottom of the Shading tab and adjust the color sliders to assign the title two colors of your choosing.





Merge the two images
Drag the title so that it lies over the top of the green box.

Let's now merge what are still two separate images to make one single composite image. This will help your finished page to load faster. To do this:
Your page should now look like this:

Please visit the Virtual Mechanics website at www.virtualmechanics.com
My WebSite
My WebSite
Assign a background color to your page
Open the Page Editor (Object > Page Editor) and select the Background tab. Use the sliders to assign a background color to the page. If you want more precision, use the Color button just below the sliders.

Add a Page Title
Open the Page Editor again and select the Title tab. Enter a Page Title and click OK.

Highlighting text to make a link
Centering text
Preview
To preview what you have so far, click the spyglass button at the top of your workpage.  Or press the F7 function key, the keyboard shortcut for a preview.

Check that the image is indeed where you expect. Hover your mouse over the image to see the title you gave -- depending your browser, it should show as a little pop-up tool tip. Click the image to make sure that the link works.
Background rectangle
FastStart2
FastStart1
Title: MyWebSite
Group: MyWebSite
FastStart3
Page Editor Background tab
Use a background tile

A more interesting option is to use a small image as a tile, which the browser can then repeat in the horizontal and/or vertical directions.

Click Tile, then browse to and select the image you want to use as the tile. A small rectangular or square tile will need to be repeated in both the X (horizontal) and Y (vertical) directions, so remember to check both the X and Y boxes.

The tile we will use is even more interesting in that it is long and thin -- in fact, only one pixel high. We have named it "FastBackGr.png" and is in the Media folder for these tutorials. Because is a full page width, we need tile it only in the Y direction.

Page Editor Title. Meta Tags
Background rectangle
Tool: Image Editor
Tool: Text Editor
Tool Title Editor
Tool: Quick Editor
Tool: Quick Editor
Tool: Quick Editor
Tool: draw rectangle
Image for tiling
Preview current page
Preview current page
Preview
Select the Preview button on the top tool bar. You should now see the web page in your default browser. Return to your workpage by closing the browser. Your finished page should now look something like this:




FastStart4
Preview current page
< Tutorials Home
Quick Editor Link tab
Assigning a link to an image
Virtual Mechanics Logo
WebDwarf
®

Tutorials
Page Editor Button
Page Editor Button
Page edit box
New project
Quick Editor Shading tab
Radial fill
Group buttons