19.3 Customizing the Objects Panel | Dreamweaver in a Nutshell

In earlier chapters, we used the Objects panel to insert many built-in objects into an HTML document. You can add a custom icon to the Objects panel to insert any object. The Objects panel offers greater flexibility than library items, which insert HTML code only. To create a new object for the Objects panel, create an HTML document, including JavaScript that inserts your object into the current document.

Basing your new object on one of the existing objects in the Dreamweaver4/C onfiguration/Objects folder is your most convenient option. Within that folder are subfolders corresponding to the seven default categories of the Objects panel ( Characters , Common, Forms, Frames, Head, Invisibles, and Special) plus a Tools folder for the Draw Layout Table and Draw Layout Cell tools that are always visible in the Objects panel

The subfolder in which an object file is placed determines the category under which it appears in the Objects panel. Items can be moved between folders, and folders can be renamed .

Search for "Creating a simple object" under Help Using Dreamweaver (F1) for an example of adding a simple object to the Objects panel. Example 19-3 shows the Button.htm file from the Configuration/Objects/Forms directory.

Example 19-3. A sample object definition file

 <HTML><HEAD> <!-- Copyright 1999 Macromedia, Inc. All rights reserved. --> <TITLE>Insert Button</TITLE> <SCRIPT LANGUAGE="javascript" SRC="../../Shared/MM/Scripts/CMN/docInfo.js"> </SCRIPT> <SCRIPT LANGUAGE="javascript" SRC="../../Shared/MM/Scripts/CMN/localText.js"></SCRIPT> <SCRIPT LANGUAGE="javascript" SRC="formInsert.js"></SCRIPT> <SCRIPT LANGUAGE="javascript"> function isDOMRequired(  ) {     // Return false, indicating that this object is available in code view.    return false; } function objectTag(  ) {   return returnFormTag(document.body.innerHTML); } </SCRIPT> </HEAD> <BODY> <INPUT TYPE="submit" NAME="Submit" VALUE="Submit"> </BODY> </HTML>

Each object file uses JavaScript, often in an external .js file, to implement the object's functionality. For example, the JavaScript file formInsert.js contains code that controls the insertion of form objects. The <body> element of Example 19-3 specifies the HTML to be inserted into the Document window (in this case, a Submit button) when the object is accessed from the Objects panel.

An image ( .gif ) file is associated with each HTML file. This .gif file contains the graphic icon to appear in the Objects panel and can be created in Fireworks, for example. Icons should be no larger than 18 x 18 pixels (oversized icons are cropped). The .gif file must have the same name as the .htm file, except for the extension. For example, the image associated with the Button.htm file is named Button.gif .

With your .gif and .htm files saved in the desired subfolder of the Configuration/Objects folder, restart Dreamweaver. Your custom object button should appear in the Objects panel under the category corresponding to the folder in which it is stored. Clicking your custom icon should insert the custom object into your page. The Objects panel can be configured to show icons, text, or both using the preferences under Edit Preferences General Objects Panel.

Downloadable extensions that insert an object, such as the Atomz Search extension described in Chapter 22, typically add new categories and icons to the Objects panel. Extensions may also add new entries to the Insert menu or Command menu to insert an object or access the extension's features. After installation, the Extension Manager tells you if you must restart Dreamweaver to access the new features provided by an extension. Some extensions can be reloaded by Ctrl-clicking (Windows) or Opt-clicking (Macintosh) the category selector in the Objects panel and choosing Reload Extensions.

19.3.1 Adding Characters to the Objects Panel

The icons in the Objects panel's Characters category insert special characters, such as a copyright symbol, as described in Section 2.6.1 of Chapter 2. Section 19.3.1.1 demonstrates how to add a custom character, such as þ (a small Icelandic thorn character), to the Objects panel's Character category.

19.3.1.1 Procedure 7

Use File Open to open one of the .htm files, such as Copyright.htm , from the Dreamweaver4/Configuration/Objects/Character s directory.
Modify line 18 of the script, such as return "þ"; . (Activate line numbers using View Code View Options Line Numbers.)
Resave the file in the same directory, but with a new name, such as thorn.htm .
Create an 18 x 18-pixel GIF image, perhaps using Fireworks, to act as an icon in the Character category view of the Objects panel.
Save the GIF file in the same directory with a name to match the .htm file, such as thorn.gif .

When you restart Dreamweaver, your new icon will appear in the Objects panel's Character category. Use only valid named entities or character entity codes, approved by the World Wide Web Consortium (W3C). Invalid entities will appear incorrectly, or not at all, when viewed in a web browser. Not all web browsers and operating systems display entities in the same way. See Appendix B for details.

The next chapter covers customizing Dreamweaver's dialog boxes and default document template.