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 LayoutDialog 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 LayoutTables created for dialog box layout should have the following characteristics:
Dialog Box SizeDialog 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 LayersIt 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.
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 LayoutThe 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.
|