®

The Workpage

The workpage is the big blank part of your screen where you can add, position and transform the objects that comprise your page. The workpage window provides a  number of aids to help you get objects placed and sized correctly. In this tutorial, we cover:

Grid guide buttons
Guide/Display options
The snap grid
Rulers and tab stops
Alignment toolbar
More on tab stops
Toolbars -- customizing
Alignment options



Grid guide buttons

On the Display toolbar above, are several grid toggle buttons. If you don't see the Display toolbar, display it via Toolbars -- customizing. Use the grid toggle buttons to turn the grids and guides on and off. In order they are:

1.  Guide border: turning the guide border on shows a dashed blue line at the screen resolution you are designing for, say 800x600 pixels, and a center line
2.   Grid guide: the grid guide displays a grid at fixed pixel increments. Adjust the increment size in the Guide/display options
3.  Snap grid: enabling the snap grid moves objects you drop on your page to the nearest grid line. This helps to keep alignment precise. To ignore the snap grid while doing some operation, hold the Shift key down while operating
4.  Ruler: the ruler toggle turns the rulers on and off. The rulers indicate the pixel positions of objects on your page and hold your tab stop settings
5.  Tab guide lines: the tab guide lines show dashed green lines at the current tab stop positions. Use the alignment toolbar to snap the currently selected object to the closest horizontal or vertical tab stop position.

Guide/Display options

The Guide/Display options are part of the Workspace Options. To access these, right- click a ruler, and select "Options..." from the right-click context menu. Or at the top left corner, where the rulers intersect, click on the blank square.

The Guide/Display options provide similar operations to the grid guide buttons with some extensions such as adjusting the resolution of the snap grid and clearing the ruler tab stops.

The snap grid

Use the snap grid to help align objects and vertices by restricting the current position to specified incremental values. With a value of 10, a current location on the workpage  would be restricted to pixel positions 10, 20, 30... etc.

1. Press Ctrl+G or the grid guide button on the top toolbar to show the snap grid
2. Press Ctrl+M or the snap-grid button on the top toolbar to enable the snap-to grid
3. Select this text object then drag and drop it with your mouse. Its horizontal and vertical positions should move in increments of 10 pixels with the left and top edges being aligned to the grid guide
4. Open the Guide/display options from the Options menu
5. Check the five boxes in the guide options section at the top. Note that these all have duplicates in Grid guide buttons on the top toolbar.
6. Adjust the snap-grid resolution to 50
7. Click OK and move this text object again. It should now move in increments of 50 pixels
8. Hold the Shift key down while moving the object and notice that the snap grid is temporarily disabled
9. Open the Guide/display options again and set the guide options to your preference.

Rulers and tab stops

Along the top and left edges of the workpage are rulers that mark pixel positions from the left or top of your page. To see them you need "Show Ruler Bar" on in Grid guide buttons.

As well as using them as visual aids, use the rulers to create tab stops to align objects along their left, right, top or bottom edges.

To create a tab stop, click on the ruler at the location where you wish a tab stop to appear. A little L shape should appear as shown in the ruler illustration above. Use your mouse to drag a tab stop into the correct place on the ruler.  Your tab stop settings save with your project.

The edges of your design space (say 800x600) also act as tab stops.

To remove a tab stop, drag it off the nearest edge of the ruler bar. To clear all tab stops, click Clear all Tabs in the Guide/display options dialog.

The status bar at the bottom of your work-window shows numerically, the exact position of your mouse pointer.

More on tab stops.

Alignment toolbar
Along the bottom of the workpage are toolbars loosely related to alignment. If you don't see a toolbar, set it via the Toolbar Options. Here are the basic groupings:

Snap the current object to the closest tab stop position, or align a group of objects




Change an object's z-order (that is, place objects in front or behind of other objects)




Permanently group or merge two or more objects




Space and size objects equally.




Set the object to absolute or relative positioning and sizing


                           

More on tab stops
A little way back we discussed rulers and tab stops. Let's now try some tab stops:

1. Create a tab stop at x=40 on the horizontal ruler by clicking on the ruler. If the tab stop is not at x=40, use your mouse to move it
2. Create a tab stop on the vertical ruler at a position just a little above this text object
3. Click on this text object to select it and move it so that it is to the right and below the two tab stops
4. Snap it to the horizontal tab position by clicking on the align left edge button on the alignment toolbar.
5. Snap the text to the vertical tab position by selecting the align top edge button on the alignment toolbar
6. Click the horizontal center button. The text should move back to be centered on your page
7. Remove the stops you added by dragging them off the edge of the ruler

Toolbars -- customizing

SiteSpinner has toolbars that can be moved to a different edge of your workpage, and adjusted in various ways. Generally all the buttons on your workpage can be customized in some way.

To customize a toolbar, right click on any of them, or use the main menu View > Toolbar Options... This should display a window like this:

This dialog allows you to control what is displayed, where it is displayed and the size of the control buttons, large or small.

• Customize: Buttons to control which buttons appear on a toolbar. More below
• Name: The fixed name of each logical grouping of buttons
• Location: The location of each toolbar. It can be at the Top, Bottom, Left or Right edge of your workpage
• Show: Check these boxes for the toolbars you want to have visible on your workpage
• Large: All toolbar buttons have a large and a small version -- check the box for the large version
• Label: Check to have the toolbar display its name.

Any changes you make should appear immediately in your workpage. If you get hopelessly lost, use the Reset All button to restore the original defaults.

If you click one of the Customize buttons, you should see a display like this:

In the left panel is a list of the buttons available that you are not currently using. On the right a list that you are using. Use the Add -> and <-Remove buttons to change  buttons from one list to the other.

Use the Reset button to restore any toolbar you have "lost".

Use the Move Up and Move Down buttons to control the order in which each button appears in the toolbar

As you make each change, you will see the actual toolbar change, if visible.

Alignment options
There are a number of different ways to align objects:

• Create a tab stop
• Now place an object on the page
• With it still selected, click either the left or the right align button (button on the bottom toolbar). The object will move flush against the tab stop
• Add another object to the workpage and move the first object away from the tab stop
• Create a selection by dragging your mouse around the two objects
• Again click the align function. This time the two objects will align themselves with each other
• Click again, and both objects will align to the tab stop
• Add yet another object to the workpage and move the first two objects near the third
• Again select all the objects
• From the Arrange toolbar, select the button to space equally up and down. The objects will be move to equal distances from each other
• Try the snap grid 
• Nudge a selected object into position with the arrow keys on your keyboard
• Experiment with some of the other options under the Arrange menu (at the top)

See also: Manipulate tutorial