Layout

In general, the requirement is that layouts be clean, easy to read, and not take up more space than necessary. Scrolling (that is, interfaces that don't completely fit on the user 's screen) is a no-no. Macromedia gives separate instructions for laying out dialog boxes and Property inspectors, and gives no instructions for floating panels.

Dialog Box Layout

Dialog box layout should be controlled by using tables. If a dialog box contains too much information to fit in a reasonable size , the content can be organized into tabbed layers , each of which uses a table for its layout.

Tables for Layout

Tables created for dialog box layout should have the following characteristics:

• Don't set width, height, cellspacing, or cellpadding attributes. Dreamweaver determines height and width, as needed by your contents and the user's platform (see Figure B.5).

  Figure B.5. Proper table formatting for a dialog box layout.

  

• With the exception of any online help (see the later section "Online Help"), don't use background colors for the table or its cells .

• To vertically align the contents of cells, use valign=baseline . (In the standard extensions, this is applied to the <tr> tag.)

• When text labels are used, they should appear to the left of the input elements they refer to. Text should be right-aligned by adding align="right" to the <td> tag. Labels should have each first word capitalized, and should end with a colon . Labels should never wrap, so use the nowrap attribute for these cells (see Figure B.6).

  Figure B.6. Proper presentation of multiline controls.

  

• If a form element consists of more than one line (such as a multiline text field), align the label with the top of the text label. This can be done by using valign="baseline" in the <td> tag for both adjoining cells. (Figure B.6 shows the proper presentation of multiline controls.)

• If a browse button is to be used, either with the Browse label or a folder icon, it should appear to the right of the text field its results will display in.

Dialog Box Size

Dialog boxes should never be too large. The Dreamweaver Application Programming Interface (API) provides a function for setting dialog box size windowDimensions() however, Macromedia instructs you not to use this function. If you don't specify a size for the dialog box or for the table that contains the layout, Dreamweaver determines the correct size based on content. The minimum content area for a dialog box is 200x50 pixels; the maximum area is 511x434. If content would cause the size to exceed the maximum in width or height, Dreamweaver automatically provides scrollbars to the dialog box to make it functionalbut this is bad design, and is a definite no-no. If your dialog box contains this much content, reduce the content, or break the layout into layers.

Organizing Content with Layers

It is acceptable to use tabbed layers to present chunks of options in a dialog box. Although Macromedia offers no specific instructions on the construction of layers in its user interface guidelines, you can learn from seeing how layered interfaces are implemented in the standard extensions.

Figure B.7 shows a sample layered dialog box. Figure B.8 shows the document that created this dialog box as it appears in Dreamweaver design and code views. From these figures, you can learn the following:

Figure B.7. Dialog box for the Drag Layer behavior, showing a tabbed interface.

Figure B.8. The Drag Layer behavior file, as it looks in Dreamweaver Design and Code views. The Layers panel shows how the content is divided into layers. The code shows images being used to create the tabbed look.

• Each set of content is in its own layer. (The interface shown has two content layers: Main and Options.) A background graphic, in this case tabBigWin500x160.gif, creates the 3D beveled appearance.

• Each layer's tab comes from two graphics, each stored in its own layer: tabBg.gif and tabBgSel.gif.

• Clicking on one of the tab images changes layer visibility as needed.

note

Macromedia's guidelines do not specifically mention this, but it is standard in interface design that the name of a button or menu command that opens a dialog box should end with an ellipsis ( ). The only place where this convention isn't observed is in the main buttons to the right of a dialog box.

Property Inspector Layout

The user interface guidelines don't specify how Property inspector layouts should be created, but all the standard inspectors use layers to position layout elements. Macromedia warns that inspector layouts will look different on Windows and Macintosh platforms, and you are therefore encouraged to check your custom inspector layouts carefully for cross-platform compatibility. Inspectors aren't required to look exactly the same across platforms, but to be readable and functional on both. Figure B.9 shows an example of this inconsistency at work.

note

Refer to Chapter 10,"Into the Great Beyond," for a complete discussion of creating and working with tabbed layouts like this.

Figure B.9. A custom Property inspector as it looks in Dreamweaver/Mac and Dreamweaver/Windows.