Layout

If you want, you can use Button It! to create a web page layout (though you can also use it just to genereate the button graphics). To do so, you first need to set up your bindings as required. Then click on the 'Layout' tab.

Adding Buttons

You can add buttons to your layout in two ways:

• by right-clicking in the layout; a menu appears containing submenus for each button group you have defined. The submenu for a group contains items allowing each button in the group to be added, and two allowing 'all' buttons in the group to be added either horizontally or vertically.
• by clicking one of the 'button groups' drop-down arrows at the top of the layout tab. This will display a graphic depicting each button in the group. They can be dragged from here to your layout. Alternatively, you can click a button to add it to the layout. It will be added next to the primary selected button in the layout (which is generally the last button to have been dragged or selected), and the new button will become the primary selected button. The 'direction' in which the button will be added next to the primary selected button is determined by the 'orientation' arrow which also appears at the top of the layout.

Moving Buttons

Once added to the layout, buttons can be dragged around as desired. You can select multiple buttons by clicking one, then holding down the CTRL key when clicking subsequent buttons. Under normal operation, button positions 'snap' to guide lines that correspond to buttons that are not being dragged in order to make alignment easier. If you need to stop this 'snapping' behaviour, you can hold down the 'Shift' key whilst dragging.

Button States

There are four button states recognised when performing layout; these can be bound to buttons states via the Button States and Bindings tab. As you might guess, the 'mouse over' states define the button's appearance when the mouse is over the button; the other states are used when the mouse is not over the button. The 'selected' states are used for the button corresponding to page being rendered; all other buttons are considered unselected. For example if you have a 'Home' button, then the 'Home' button is rendered in a selected style on the 'Home' page, and in an unselected style on all other pages.

Previewing and Saving

At anytime while editing your layout you can press 'F12' (or choose 'View->Preview in IE') to preview your current layout in internet explorer. When you decide you want to save the layout as HTML, you select 'File->Save HTML' (or Ctrl-H). One HTML file will be saved per button; each page will act as though the corresponding button is 'selected'.

Deleting Buttons

You can delete buttons by selecting them and pressing the 'delete' key.

Backgrounds

You can choose a background for your layout via the menu item'Layout->Select Background'.

Settings Affecting Layout

There are also a number of settings on the 'Basic Style & Settings' tab that affect the manner in which the HTML and associated files are saved:

Tile background

The background, if you select one, can either be tiled or not, depending on this setting.

Bits per pixel

Indicates how many bits per pixels to use for the images. Note that only PNG and GIF currently support 8 bpp.

HTML format

The HTML generated can be laid out using either a HTML table or layers. Some browsers, particularly IE, do not always do table layout as they should, so generally the use of layers is recommended unless you need compatability with browsers that do not support layers.

Image format

Determines what image format will be used for the images of the buttons.

Image Differences in Layout Mode

It should be noted that images saved as part of layout may differ from images saved via the 'Generate Buttons' button. In particular, no transparent pixels will ever appear; instead, they will take the colour of the background image, if supplied, or white if no background image is supplied.