This tip demonstrates a unique way of using a layout grid instead of tables to lay out a graphical user interface (GUI).

Table Refresher
If you are already familiar with using tables in a drag-n-drop HTML editor, then you know it can become a pain to get text and objects to align properly in the HTML page. Getting objects to align can be done by adding rows and columns to a table, but the problem arises when you have multiple objects and lots of text and you want to place them in specific locations within the table.

Instead of using a table to lay out the GUI, try using a layout grid instead. Drag-n-drop HTML editors will generate source code for a table when you use a layout grid, so the Amulet HTMLCompiler will accept the source code. One of the most powerful features of using a layout grid in the HTML page is that you can place and move objects around with 1-pixel accuracy.

The Example
The following example will walk you through the steps of using a layout grid to create a GUI  using a drag-n-drop HTML  editor like Adobe GoLive 5.0.

Step 1
Launch Adobe GoLive.

Step 2
From the menu bar, select Window -> Objects.

Step 3
Select the Basic tab from the Objects palette.

Step 4
Now drag the Layout Grid icon from the Objects palette to the document window. Figure 1 shows what the document window will look like upon completion of Step 4.

Figure 1.

Step 5
Now resize the layout grid to match the resolution of the display. To do so, enter the desired measurements for Width and Height in the Layout Grid Inspector. You can also change the pixel spacing between the horizontal and vertical lines of the grid in the Layout Grid Inspector. Deselect the Snap options to place text and objects with 1-pixel accuracy in the layout grid, or else objects will snap to the horizontal or vertical lines of the grid. Figure 2 shows what the document window will look like upon executing Step 5.

Figure 2.

Step 6
The final step is to create the actual GUI by placing text and objects anywhere in the layout grid. To realign or move objects around in the layout grid, simply select the object with the mouse and drag it to its new location. Since layout grids generate HTML source code acceptable to the Amulet HTMLCompiler, you never need to worry about adding or removing rows or columns in order to align objects properly. Figure 3 shows what the document window may look like after placing a few items in the layout grid.

Figure 3.