WebDwarf Tutorials banner
WebDwarf logo
Rounded rectangle
Polygon
Star
Triangle
Fat vertical line
Medium vertical line
Thin vertical line
Thin vertical line
Thin horizontal line
Thin horizontal line
Medium horizontal line
Fat horizontal line
Straight Shapes

See first: Introduction to Shapes.

This tutorial deals with how to make straight shapes on your pages -- here we cover:

Preamble
Rectangle
Add color to shapes
Buttons as tabs
Polygon



Preamble

The geeky types may call it "Vector Geometry" -- a vector is a line that has a direction.  But we'll stick with "Shapes".  The objects above illustrate some of the different types of straight shapes possible: rectangular, and polygon. The star, triangle and lines are just special cases of the polygon.

The curvy shapes have their own page -- circular (or elliptical). But here, we'll concentrate on the straights.

For this tutorial, turn the snap grid off -- this will allow you much finer adjustments. Or, use the Shift key to disable it temporarily.

Rectangle

Create a rectangle object by selecting the rectangle on the Tools toolbar at the left.
Rectangle button
Add color to shapes

Enhance any shape by adding color.

Use the Quick Editor > Shading tab to fill an object with a flat or gradient fill color.

Colored rectangle
Buttons as tabs

If you want to use tabbed navigation on your pages, use rectangles as tab buttons:
Home
Blank tab
Blank tab
Blank tab
Home
See also:
Buttons tutorial

Polygon

A polygon is a many-sided figure with "many" for us here being one or more!  Create a polygon as a series of connected points. As you create each point, a line to the potential next point will rubber band from the last. There are two modes:
There are two kinds of polygon, open and closed:
Examples of both types are on the right.

Polygon button
Closed polygon
Closed
Open polygon
Open
Polygon right-click menu
Polygon right-click menu
Set the kind of polygon from the Polygon right-click menu shown above. Drawing will stop when you:
< Tutorials Home
Virtual Mechanics Logo
WebDwarf
®

Tutorials
See also:
Curvy Shapes tutorial