Working with Objects in Dreamweaver
In this article, you'll learn what a well-formed object file looks like, how Dreamweaver processes object files, and how to build your own objects from scratch.
What Are Objects?
copyright John Smith, 2000
<font face= "Georgia, Times, Times New Roman, serif" size="2"> copyright John Smith, 2000</font>
<table width="200" height="200"border="1"> <tr> <td align="center" ><font face= "Georgia, Times, Times New Roman, serif" size="2">copyright John Smith, 2000</font></td> </tr> </table>
In other words, it's anything that can validly sit in an HTML document. The code gets inserted wherever the user's cursor is when the object is chosen.
What Files, Where?
If you look inside the Configuration/Objects folder, you'll see several subfolders, the names of which you should recognize as the categories of objects accessible in the Objects panel. Open up one of those folders, such as the Common folder, and you'll see dozens of files that correspond to the individual objects in the Common Objects panel. Each object consists of one to three files, all with the same name but different extensions. These files are listed here:
An HTML file (Table.html, for instance). This is the object file itself, or the file that contains or returns the code to be inserted. This is the only file that must be present to constitute an object.
An image file (Table.gif, for instance). This file contains a 16X16 pixel image that Dreamweaver uses to represent the object in the Objects panel. This file is also optional: If there is no image file, Dreamweaver will supply a generic image icon to represent the object in the panel.
Object files must be stored in one of the folders inside the Configuration/Objects folder. The folder in which they're stored determines in which section of the Objects panel they'll appear in.
Structure of a Simple Object File: No Dialog Box
Some objects use dialog boxes to collect user information, and some don't. Those that don't are (not surprisingly) easier to create. Figure 1 shows a simple object file that doesn't call a dialog box.
Figure 1 The structure of a simple object file, and how it translates into a Dreamweaver object.
The key elements of the file are as follows:
Filename. This becomes the Insert menu entry for the object.
Page title. This becomes the ToolTip that pops up to identify the object in the Objects panel.
In the example shown in Figure 1, the code returned by the objectTag() function is a simple level 1 heading. Notice how everything between the quote marks, in the return statement, becomes part of the user's document.
Structure of a Fancier Object File with a Dialog Box
More sophisticated objects do more than insert pre-established code; they collect user information and use that information to customize the inserted code. Figure 2 shows the structure of an object file that creates a dialog box to collect user input and then constructs the code to insert based on that input.
The added element in this kind of object file is the HTML Form, which becomes the dialog box for collecting user input and for customizing the code. Note that the form as written doesn't include a Submit button. Dreamweaver supplies the OK and Cancel buttons automatically. The form needs to have only the fields for collecting data.
In the example shown in Figure 2, the code returned by the objectTag() function is a level 1 heading, but with the content to be determined by the user. Notice how a variable is used in the objectTag() function to collect the form input and pass it along to the return statement.
Figure 2 The structure of a full-featured object file, and how it translates into a Dreamweaver object.