Graphics

Your interface might require graphics for functional purposes (navigation using a folder icon, for instance), illustrative purposes (icons in Property inspectors, for instance, or icons for common functions such as alignment, make bold, and so on), or branding purposes (your company logo, to identify the author of the extension).

Inserting Images

You get images into a dialog box, inspector, or panel the same way you get an image into a Web pageby linking to it using a relative pathname. If the image is for illustrative or branding purposes, use the <img> tag. If it is intended to be functional (that is, a button in a form), use the <input> tag to create an image button.

File Formats

Although Macromedia nowhere specifies this as a requirement, all images in the standard extensions are GIFs. GIF images work nicely for the crisp, clean, simple requirements of icons and other tiny pictures, which is mainly what your interface should be using. For the icon displayed in the Insert bar, only a GIF image will work (JPG and other formats are ignored, and substituted with the default icon). For icons displayed in dialog boxes, inspectors, and floating panels, JPG images will work but probably won't look as clean as you need them to. In addition, JPG images don't support transparency, and transparency helps images blend into the interface. (Figure B.1 shows an example of GIF versus JPG images.)

Figure B.1. A GIF and a JPG image compared for displaying a small icon image.

Navigational/Illustrative Images (Icons)

Macromedia doesn't give any size recommendations for icons, but it does recommend restricting the size of dialog boxes and floating panels, and Property inspectors have their own size restrictions. So it makes sense to keep icons small and only use them when they actually enhance the interface more than a simple text label would. Figure B.2 shows some examples of icons in the Macromedia standard interface. Though tiny, their meaning and purpose is clear, and they serve to make the interface less crowded, not more so.

Figure B.2. Illustrative and navigational icons in some Macromedia standard inspectors and panels.

note

Icon design is an art and a skill. It's not easy creating meaningful pictures out of just a handful of pixels! It takes practice and knowledge of symbology. If your skills aren't up to it, either don't use icons or get help with them.

Shared Images

Many of the little icon images you might want to use are available in the Configuration/Shared/MM/Images folder, ready for your dialog boxes or other interfaces. Figure B.3 shows this folder and its partial contents. If you do use any of these images, make sure you don't undermine the Dreamweaver interfaceuse them for their intended purpose only.

Figure B.3. Icons ready for use, in the Configuration/Shared/MM/Im ages folder.

Branding Images (Logos)

Macromedia's user interface guidelines allow you to place your company logo in your interfaces, as long as you follow these rules:

• Dialog boxes. Logos must be placed at the bottom of dialog boxes or made available by adding an About button to the dialog box.

• Property inspectors. Logos must be placed in the upper-right corner of the inspector, and must fit above the horizontal divider.

• Floating panels. Macromedia does not specifically mention requirements for logos in floating panels other than the Property inspector.

Figure B.4 shows the Macromedia recommended placement for logos.

Figure B.4. From the online user interface guidelines, Macromedia's examples of correct branding.