The simplest way to select an object is to click it with your mouse.
If you know the object's name, you can also select it from the Page toolbar drop-down list or the Quick Editor.
For important objects, consider giving each a unique name -- just so you can find them easily. Do this by over-typing the current name in one of the edit boxes. Some of the colored rectangles further down this page have special names, just to make identification easier.
Sometimes objects may be positioned on top of each other. If so, hold down "Shift" on your keyboard while clicking -- this will cycle through each of the objects under your mouse. The workpage uses a last selected object preference. That is, if multiple objects are under your mouse pointer when you click, WebDwarf will re-select the current object if it is one of the objects. This means that you can manipulate an object even if it is completely behind another object.
Try this out with three rectangles like the ones below. Set them so they mostly overlap. Then try the following:
Select any object just by clicking on any part of it
Position your mouse pointer where all three objects overlap. Hold the shift key down and click slowly several times. Notice how you can select each object in turn.
Watch the drop-down object list as you do this, and confirm that the name of the selected object changes as you select each
Repeat this test with the Quick Editor open, and see the changes there too
Don't click too quickly, otherwise your computer will interpret the clicks as a double click and open the Quick Editor
Add a fourth rectangle to the group and place it so that it completely covers one of the other rectangles. Now hold the Shift key down and click again. This time, even though you have a rectangle completely hidden, you can still select it.
Selecting multiple objects
To select more than one object for some operation, perhaps a move, you have these choices:
Select the first object, then hold down the Ctrl key while you click subsequent objects. You will see the bounding box expand as you do this to encompass all the objects
Make a "marquee selection". Drag a box with your mouse around the outside of the group of objects you want to select. To do this, hold your left mouse button down and move the mouse diagonally. Your workpage will show a dotted outline (see the images just below). This method works even when some of the objects are fully hidden behind others.
Marquee selections do not include any objects the bounding box does not completely enclose. Suppose you have some objects on a background, and you want to select them only, without the background:
start your marquee selection from outside the background
make sure the bounding box does not fully enclose the background
make sure the bounding box fully encloses the objects you want to select
You cannot include a locked object in a multiple selection -- you'll get a helpful reminder if you try.
A marquee selection partially made
Selection fully made
Selecting many objects at once
WebDwarf does not have the very useful Select All Below feature of SiteSpinner. However, you do have a Select All functionwhich selects all objects on the page (provided they are unlocked). Ctrl+A is a convenient keyboard shortcut for this operation. A=All.
You can then drag the selected group to quickly close up or make a gap at the top of the page. You can also use the keyboard arrow keys to move the selection, even if it is off the bottom of your screen.
With an object or group of objects selected, you can now move it around your workpage:
The obvious method is to drag it with your mouse. Click on the object, then holding the button down, move your mouse
Nudge the selected object into place with the keyboard arrow keys
Open the Quick Editor > Object tab, then enter new values for the x and y positions. The fields here each have little up-down arrows, so you can nudge an object into position by clicking on those arrows
Also very useful, is the ability to drag an image from a web page or some other source onto your workpage
Making a permanent group
Until now, the groups we have been dealing with have been temporary groups -- also called selections, Click on something else, and the selection vanishes. To make your selection into a permanent group, click the main menu Arrange > Group function toolbar. Below the Group option there is another to ungroup again.
Use a permanent group if you want to keep a group of objects always together.
Also set a permanent group if you want to make a group of smaller images into one larger, more economical image. To do this, set Re-Render on for the group in the Quick Editor > Object tab. There is an example of this in the Fast Start tutorial: Merge the two images.
Edit objects of a group
Once you have grouped some objects, it becomes more difficult to make minor adjustments -- e.g. to move something slightly or edit text. If you know the object name, you can call up the object in the Quick Editor, and make the adjustment while the object is still part of the group -- even see the effect immediately on the workpage. If you ungroup, which is very easy to do, you lose the group object's attributes (e.g. code, links etc). If the group has no group attributes, then un-grouping is the answer. If the group has attributes, there are two solutions:
Use the Ctrl key to temporarily ungroup
If you hold the CTRL key down when un-grouping a permanent group, the group will stay in place as a temporary group. This allows you to use CTRL+Click to add or remove objects from the group (as you can do with temporary groups) without losing the group object's attributes (e.g., Code, links, etc). Be sure to re-group immediately afterwards, before clicking anywhere outside the group, or you will lose the temporary group -- and its attributes.
When only one object remains in a temporary group, you will not be able to make the group permanent again. If you want to keep the group, add something back in at least temporarily -- you need at least two objects for a permanent group.
So to remove an object temporarily from the group:
CTRL+Ungroup (temporarily ungroup)
CTRL+Click (remove the object, or multiple objects)
Group (restore the group -- now permanent again)
Work on your object(s)
Then to return an object back into the group:
CTRL+Ungroup (temporarily ungroup)
Maybe move the temporary group to enfold the new or returned object(s)
CTRL+Click (include the object(s) in the group)
Group (restore the group)
It is very easy to click outside the temporary group and lose the group -- and its attributes!. If you intend to use this method, we suggest you make a little test project with say four colored rectangles and a group (give the group a name so that you know when you have lost it), and practise the technique there.
Select the object by name
When you know or have found the name of an object, you can select it by name
from say the Quick Editor, without having to click on it. It helps if you have given the object a meaningful name, instead of the default "objxxx". But as is often the case, it will have only the default name.
If the group is one you have created recently, perhaps having just copied it, you can find the parts near the bottom of the object drop-down list. If however you created the group some time ago, there is not a super-easy way to find the components of a group. The Quick Editor is helpful in showing a thumbnail of the object selected, once you have selected the object. But finding the object name is the hard part.
While previewing your page, use the "View Code" option of your browser to look at the code for your page. Search for the the name of the group object. You'll find all the individual objects that comprise the group often with names in sequence like Oobj868, Oobj869 and so on. These are the real object names with an "O" prefix. Armed with that information, you can then again select the object by name from say the Quick Editor. Confirm that you have the correct object via the Quick Editor thumbnail. Then again, you can make the changes without un-grouping.
Rotating, scaling and skewing
You can rotate, skew, scale and move most objects either directly in the workpage or in the Quick Editor. The Editor provides the ability to enter a precise numerical value when you want it.
Most times you can resize or scale an object just by dragging an edge or a corner. If you want it to keep its correct proportions, hold the Ctrl key down while you drag.
If you can rotate or skew, the object will show special little handles, like you see on the rectangles to the right.
Scaling and rotation exercise
In this exercise, let's take the green rectangle on the left, rotate it, scale and position it to make a horizontal rectangle.
You can do this by creating your own rectangle on a fresh workpage (8x169px, with a radial gradient fill), or by copying the rectangle image -- just drag it to your workpage.
Open the Quick Editor by clicking the Quick Editor button or pressing Ctrl+Q.
Select the green rectangle with your mouse.
Move the mouse cursor over one of the rotation handles at the corner until it turns into a larger rotation handle.
Then rotate it by dragging the corner with your mouse mouse until the rectangle is almost horizontal.
As you hover your mouse over the rectangle, you should see two kinds of handles. Double crossed arrows (move handles) will reposition the rectangle.
Two headed arrow (scale handles) will stretch or shrink the rectangle.
Drag the corners until the rectangle is about 12 pixels high and 586 wide. Use the ruler bars at the left and top of your workpage to judge the size.
Use the Quick Editor > Object tab to set these values precisely. The width and height values are the reverse of what you might expect -- this is because of the 90° rotation.
Use the Quick Editor to set the precise rotation, Rotate, to 90.00° and the scaling to x Scale=0.98 and y Scale=1.02. Use either the up/down arrows in the Quick Editor or enter the values directly into the edit boxes.
If you dragged the rectangle image from your browser onto your workpage, the scale is different (about x:1.4, y:3.0). There you are working with an image. If you created your own rectangle you will be working with a rectangle not an image.
Use the keyboard arrow keys to nudge the rectangle so that the left edge is at x=100 and the top edge is at end of this text object.
At the end of this, you should have something that looks like the horizontal bar just below. And if you don't, who cares? Hope you had fun doing it.
You are probably familiar with the idea of an x-axis and a y-axis on web-pages or graphs:
The x-axis runs horizontally left to right
The y-axis runs vertically top to bottom
You can change the x-order and the y-order of objects just by dragging and dropping. Or in the Quick Editor, where you see the x,y coordinates of the center of the object.
The z-axis runs out in a third dimension from back to front -- like the pages in a closed book when you are looking at the front cover.
Your workpage displays objects in a back to front order -- objects at the front will hide objects behind. When you create a new object, it gets a z-order to place it in front of all other objects. The drop-down object list at the top of your page displays the items in z-order -- the last object you added is at the bottom of the list.
Why worry about z-order?
For simple pages, you needn't worry much about z-order. However here are three reasons why you should at least consider it:
Visibility -- make some objects appear in front of others
Tabs -- if tabbing around menu items, ensure the tabs move in a logical sequence
Load Order -- get a clean load with your page loading top to bottom.
Change the z-order
Control z-order from four buttons on the bottom toolbar. There are 4 options. From the left:
To Front: move the object in front of all other objects. It becomes z-order 100 if there are 100 objects -- bottom of the page.
Forward: move the object one place forward in the z-order from where it is now. One nearer the bottom of the page
Back: move the object one place backwards in the z-order from where it is now. One nearer the top of the page
To Back move the object behind all other objects. It becomes z-order 1 -- top of the page
Remember "front" is bottom of the page -- this is opposite to the normal terminology where you might expect "front" to be the top of a document.
Try this example using the rectangles below -- or something similar on your own workpage. (Cloned from the Hidden Objects example above.)
Click on the topmost rectangle
Press the Back button on the align toolbar. (Third button from the left in the group)
This may move the top rectangle under the next one down. If it doesn't, click the Back button again and again until it does. Each click moves the rectangle one item further back in the z-order. Confirm this by inspecting the object drop-down list box
Press the Forward button (second from the left). The rectangle should show on top again
Experiment with the other buttons so that you feel confident in moving things forward and back in the z-order
As a final test, move all rectangles to front. Then reverse the initial order so that the red rectangle is on top, then the cyan, yellow and pink
Once your object is positioned and set up correctly you may wish to prevent it from being accidentally changed. Do this by locking it.
Select any object with your mouse. Move it a little to verify it does move
Select the Key button on the Tools toolbar at the left. You can also select an equivalent in the Quick Editor > Object tab or press Ctrl-L on the keyboard. The Key icon should change to a Lock
Try to move the now locked object -- it should refuse to shift
Press the Lock button to unlock it
The Edit Menu Lock All and Unlock All commands will act on all objects on the page.
If an object refuses to move, check its Lock state. A locked object shows a little padlock cursor when you hover your mouse over it.
Alt+U will unlock everything on a page (hold down the alt key and press U on the keyboard).
On the WebDwarf workpage, certain objects display in particular ways. A selected object has a dashed selection outline, and sizing handles -- the little square boxes. Objects with zero width outlines, still display as a dashed outline, even though in the final version of your page, the dashed outlines will not show.
Sometimes you may wish to not see these outlines -- you may be looking for precise alignments and the default outlines get in the way. If so, you can hide some or all of them.
Here is the full list of hotkeys (some of these are on the View menu):
ALT+1 -- Hide selection outline and handles
ALT+2 -- Hide selection outline
ALT+3 -- Hide zero width outlines
ALT+4 -- Hide selection outline and handles; hide zero width outlines
ALT+5 -- Reset all outlines to the default visible.
1 to 4 are toggle functions. One operation hides the item, a second operation shows it again. If you get into a tangle, ALT+5 resets everything to the usual defaults. You may not see the effect of a command unless you have a selected object or zero width outlined object on your page.
Keyboard shortcuts (hot keys)
Many operations have keyboard shortcuts, written in the menus as for example:
Ctrl+S -- hold the Ctrl key down, then press S on your keyboard
Ctrl+Shift+V -- hold the Ctrl and Shift keys down together, then press V on your keyboard.
Some common ones that are used in most Windows programs:
Ctrl+S saves a file
Ctrl+C copies a selection to the Windows Clipboard
Ctrl+V pastes in a selection from the Windows Clipboard
Ctrl+X deletes a selection but puts it into the Windows Clipboard
Ctrl+Z undoes the last action
Another useful shortcut used by WebDwarf:
Ctrl+Shift+V pastes plain text into the Text Editor with formatting removed
See also: Access Keys which are keyboard shortcuts for web pages.
Ctrl+Z is your friend
If you accidentally stretch or transform something you only meant to move, try Ctrl+Z to undo. Also available under Edit > Undo.
Another way of undoing changes that involve accidental transformations is the Quick Editor > Object tab Reset button.