Page layout techniques.

We are working hard on Version 2 of IMS Studio and hope to have
beta versions available by the end of January. Some of the updates
include a Visual Table Editor, a Visual Frames Editor and a Visual
Navigation Bar Editor with drop menus. There will also be many
other updates including some major additions to the Page Layout

IMS Studio, which is the foundation upon which IMS Web Dwarf,
Web Spinner and Web Engine are built, already includes many
advanced page layout capabilities that are probably familiar to those
of you with Desktop Publishing experience. For many new and
intermediate users, not all of these existing capabilities may be
obvious. It is consequently useful to occasionally discuss them.

As most new users quickly discover (we hope), an Object such as a
Picture or Text Block can be selected and dragged to any location
on the screen with the mouse. In addition to moving an Object, the
mouse can be used to scale and stretch it by selecting any corner
and dragging the bounding box to the desired size. Hold the Shift
Key down while dragging the bounding box to maintain the Object's
Aspect Ratio. To finely position an Object, you can nudge it 1 or 2
pixels at a time with the four arrow keys.

When you want to Align Objects Vertically or Horizontally, you
can select them with your mouse by dragging a Bonding Box
around all the Objects you wish to select. For those of you that don't
know how to do this, move the Mouse just beyond the top left
corner of the highest and leftmost Objects you wish to include. With
the mouse button down, drag a bounding box towards the bottom
right until all the Objects you wish to select are completely within
the box and then release the mouse-button. The box will snap
around the selected Objects and the Arrange Bar Align Buttons will
become highlighted. You can then 'Align' the selected Objects along
their common edges or centers by selecting the appropriate Align

Selecting a Group of Objects in this way will create a temporary
Group that can be positioned and scaled in the same way as a single
Object. Once you have the temporary Group positioned correctly,
you can release its Objects by simply clicking the work window
anywhere outside of the temporary Group's bounding box.

Another positioning aid is the Grid Guide. This can be toggled On
and Off by pressing Ctrl-G or by checking the Grid Guide button in
the Options menu. By default, the Grid will have a resolution of
10x10 pixels and will be displayed at 100x100 pixels. This can be
adjusted to any resolution in the Set Options dialog by Adjusting the
Snap Grid resolution slider.

The Snap Grid can be toggled On and Off with the Ctrl-M keys or
by toggling the Snap Grid button in the Options menu. When
Enabled, the snap grid will force the top left corner of the currently
selected Object to Align with the Snap Grid. This is a very accurate
and convenient way to Align Objects on your page.

The Blue Guide Border is another layout aid that will help you
identify the extent of the Browser's screen at different resolutions.
This is initially set to 800 x 600 but can be adjust to 640x480,
1024x767 and 1280x1024 in the HTML Options dialog. The Guide
Border can also be toggled On and Off in the Options menu or by
pressing Ctrl-B.

In IMS Web Engine and Web Spinner, an Object can also be
precisely Scaled and Positioned with the Object Editor's Scale and
Position Dialogs. Select "Maintain Aspect Ratio" to scale an Object
equally on both axes. The position dialog will locate the center of
the selected Object to any pixel location you enter.

Finally, when you do have an Object precisely scaled and
positioned, 'lock' it by selecting the Lock button on the Components
Bar. This will prevent the Object from being accidentally moved
with the mouse or selected into a temporary Group.

In the near future, I will introduce some of the many new layout
aids we are currently working on.

"IMS Web Tips" ISSN 1488-7088
© Copyright 1999 Virtual Mechanics

"IMS Web Tips" is a weekly news letter for all web site managers regardless of experience who are looking for detailed information on creating, maintaining and promoting their web sites.
Web Engine
For the best in D HTML editors
Click here for a free WYSIWYG pixel precision HTML editor.
IMS WebTips

Archive by Topic
Archive by Date
Virtual Mechanics