Design Tools

During development, you will sometimes want to see how the page is taking shape. Design view displays an approximation of how the browser will display your code, while maintaining your ability to modify the page contents as necessary. Design view is great for applying Cascading Style Sheets (CSS), drawing layers, viewing and even drawing tables, and creating framesets, and is required for use when previewing Live Data.

The Design Panel Group

The Design panel group is made up of the two most common panels necessary for design. The CSS Panel is used for creating and managing Cascading Style Sheets markup. The Layers panel is used in conjunction with the Draw Layers object found in the Layout category of the Insert bar.

The CSS Panel

Perhaps the most useful design tool is the CSS Styles panel (Figure2.31). To display the CSS Styles panel, select Window > CSS Styles or press Shift-F11. You can attach style sheets, create new styles, and edit and delete styles using either the context menu, the Options menu, or the buttons located along the bottom of the panel.

You can add new styles to the current document only, or store them in an external style sheet. Creation of CSS styles takes place within the Style Definitions dialog box. Choose the category on the left and select or enter the options for that category on the right. When you're satisfied, click OK.

If you are using dynamic style sheets or have absolute paths to your CSS files in your code, Dreamweaver can't display their contents in the CSS panel. However, Dreamweaver has a very useful feature known as Design Time Style Sheets that allows you to take advantage of CSS during development without adding any code to the document. Access the Design Time Style Sheets dialog box by selecting Design Time Style Sheets from either the Options menu or the contextual menu. Use the Add (+) or Remove () buttons to list CSS files to include or exclude during design time.

Figure 2.31. In the Style Definitions dialog, you create and edit CSS code.

The Layers Panel

Dreamweaver refers to absolute position <div> tags as layers. The Layers panel (Figure 2.32) allows you to control the name (which is really the id attribute in HTML) and toggle the visibility of layers as well as change their stacking order (known as z-index) using a hierarchical system similar to that of the Files panel.

Figure 2.32. The Layers panel is helpful for organizing and toggling the visibility of absolutely positioned <div> tags.

To change the name or z-index of a layer using the Layers panel, double-click its current value and you will be allowed to type over it. Press Enter (Return) to commit the changes.

The Insert Bar

Using objects found in the Insert bar is a great way to insert elements speedily into the page while working in Design view. The Insert bar is home to well over 200 objects, from tables to forms and from layers to CFML code. To display the Insert bar, select Window > Insert or press Control-F2 (Command-F2). The Insert bar displays its categories based on the file type of the document currently in focus.

Some objects aren't available in Code view but are available in Design view, and vice versa. Unavailable objects are dimmed, but become active again when you give focus to the opposite view by either clicking inside the document or by selecting View > Switch Views. Additionally, some objects function differently based on whether you're in Code or Design view. You are encouraged to explore and find differences between working with objects in each view and to choose the method that works best for you.

You can also choose to drag and drop a panel group over the Insert bar's title bar to attach it below the panel group. Select the downward-pointing triangle in the upper right corner of the vertical-style Insert bar, and you will be presented with a list, from which you can choose the appropriate category.

TIP

After installing additional objects via the Extension Manager while Dreamweaver is running, you will be prompted to restart Dreamweaver to make them active. Instead of restarting, Control-Click (Command-Click) either the Options menu or the category arrow if the panel is vertically oriented, and choose Reload Extensions from the list. This works in most cases, so it's always worth a try so that you can avoid restarting unnecessarily.

The following sections offer brief explanations of the categories available when editing a ColdFusion document. I'll also briefly describe the contents of some pop-up menus and objects.

The Insert bar is available in two modes, menu and tabbed. To switch categories, click the downward-pointing arrow adjacent to the current category or select the category tab as shown in Figure 2.33.

Figure 2.33. The Insert bar can be displayed in menu or tabbed modes.

Common

The most standard objects used in creating Web pages, such as links, email, named anchors, and tables, are located in this category. You can insert images, placeholder images, rollover images, Fireworks HTML and an interactive navigation bar using the objects in the Images pop-up menu. There are also three types of hotspot objects used for drawing hotspots on images in Design view.

You can insert applets, Shockwave, Plug-ins, Active X controls, and Flash using the objects found in the Media pop-up menu. Dreamweaver offers two special types of Flash insertion objects: Flash Button and Flash Text. The Flash Button object lets you choose from a list of different button styles and add your own text and links to them. The Flash Text object allows you to use any font installed on your system for your chosen text and even choose the colors needed to create a Flash rollover.

To help you take advantage of Dreamweaver templates (.dwt files), you can use the objects in the Templates pop-up menu. These objects are used to create the Dreamweaver template file and allow you to insert the various types of template regions. When used to their full potential, templates can even mimic dynamic pages in some ways. For more information regarding Dreamweaver templates, select Help > Using Dreamweaver and search for Templates.

The Tag Chooser object (it's the last one in this category) brings up a dialog that holds a listing of tags available to several languages (Figure 2.34). Once you have located the tag you want, if it has a Tag Editor dialog, this will be made available for adding the appropriate attributes to the tag. From either dialog, you can choose the Tag Info button to gain a description that may help you with your decision.

Figure 2.34. Use the Tag Chooser to insert tags from different languages, including HTML and CFML.

TIP

If a tag has an available Tag Editor, you can right-click (Control-click) within the angle brackets of an opening or closing tag in Code view, then choose Edit Tag or press Control-F5 (Command-F5) to display its Tag Editor so you can add or modify attributes using the dialog.

Layout

The Layout category offers objects used for inserting common layout elements and also gives you the choice of three Design view modes. First you'll find the same table object located in the Common category, followed by the Insert DIV Tag object, then the Draw Layer object (Standard mode only).

Next are the three modes that allow you to work with Design view in different fashions. While in Design view, switch from Standard mode to Layout mode to use the Draw Table and Draw Table cell objects (to the right of the three mode buttons). This approach to table design is like slicing an image in a graphics program. The Expanded Tables mode makes it easier for you to make selections inside and around tables by adding extra room inside table cells that is only there in Design view, but not present in the browser. The same choice of modes are also available in the View > Table Mode submenu.

The remaining objects allow you to insert rows and columns in tables, choose from 13 preconfigured objects for creating framesets (in the Frames pop-up menu) and import tabular data from a flat file.

NOTE

Layout mode limits your design options. For instance, Drawing Layers is unavailable, and there's no option for background images in the Property inspector. If you encounter a situation that leaves you without an option, simply switch back to Standard view using one of the methods described above.

NOTE

Layout mode may create empty table cells in your code if you drag the table to resize it, and possibly in other situations. Empty table cells are known to cause problems in Netscape 4. You should always verify the code that Layout mode creates to be sure it's to your satisfaction.

Forms

All objects related to HTML form creation are stored in the Forms categoryfrom the initial form tag to every type of form element needed to complete an HTML form.

TIP

You can click and drag many of the objects onto the page where you would like them to appear. This ability comes in especially handy when placing form fields on the page in Design view.

Text

You can insert code for the most commonly used special characters, such as the copyright symbol, from the objects shown in the Characters pop-up menu. The final icon in this grouping is the Other Characters object. The Insert Other Character dialog allows you to choose any of 99 special characters.

TIP

The first character shown in the Characters pop-up menu is the Line Break object, which adds a <br> tag to the document when selected. However, you can find the keyboard shortcut Shift-Enter (Shift-Return) more convenient. Likewise, you can find the shortcut Control-Shift-Space (Command-Shift-Space on Mac) for the Non-Breaking Space object, which inserts &nbsp;, equally convenient.

HTML

The HTML category contains a variety of objects used for inserting HTML tags that don't really fit in the other categories of the Insert bar. The category begins with the Horizontal Rule object and is followed by four object groupings.

The Head pop-up menu is used to insert tags that belong in the <head> of a document. You can insert Keywords, Description, and Refresh and Base <meta> tags or use the Meta object to enter additional types of <meta> tags.

Next in line are the Tables and Frames pop-up menus, which contain the HTML tags necessary to complete a table or frameset. These objects are only available while you are working in Code view.

Three objects are displayed in the Scripts pop-up menu: Scripts, No Script and Server-Side Includes. The Script object allows you to insert either JavaScript or VBScript within a <script> tag and gives you an option to include <noscript> content. In the event that you've already inserted your script and you'd like to include <noscript> information, you can choose the No Script object. You can insert server-side includes with the Server-Side object, and then modify them in the Property inspector or Code view.

CFML

The most frequently used CFML tags reside in this category, including <cfquery> (the button with the yellow cylinder representing a database), <cfoutput> (the out button), and <cfinclude> (the icon of a floppy disk that's included in a page), <cfparam> (the exclamation point), <cfset> (the set button) and a wide variety of others are stashed in the CFML category.

TIP

A very useful button is the one with two number signs (#) on it; click this to surround any highlighted text with number signs.

The second-to-last object represents the Flow pop-up menu, which contains objects that insert tags commonly used to control the flow of an application. The error-handling tags <cftry> and <cfcatch>, <cfthrow> are listed first. Next is the <cflock> tag followed by the tags used for conditional logic: <cfswitch>, <cfcase>, <cfdefaultcase>, <cfif>, <cfelse>, and <cfelseif>. The <cfloop> and <cfbreak> tags are last in Flow pop-up menu.

Following the Flow objects, you'll find the Report Builder object which launches the Report Builder, so long as you have installed it on your system.

Although the last object represents an Advanced pop-up menu, it actually contains many frequently used tags, including <cfmail> (used to send email) and <cfcookie> (used to set client-side cookies).

CFFORM

Added by the CFMX7 Extensions, the CFFORM category contains buttons that insert ColdFusion form elements in a similar fashion to the HTML form elements found in the Forms category.

Application

Like many of the options found in the Server Behaviors panel, Application objects will interact with your data source. Functionality can be added to your application through objects in this category, such as the creation of dynamic tables, recordset paging (also known as navigation or pagination), data management forms, and user authentication.

The Application category begins with the Recordset and Stored Procedure objects, followed by the Dynamic Data pop-up menu that lets you swiftly bind data to a table, to plain text, or to a form element. For instance, instead of having to insert a table then apply the Repeat Region server behavior, you can complete both tasks in one shot by using the Dynamic Table object (third from left).

Perhaps the most useful set of objects in the Application category are those used for data management. These objects handle adding new records, editing existing ones, and deleting them. When it comes to inserting and updating records, your choices are listed in the Insert Record and Update Record pop-up menus respectively. You'll have your choice of using the wizards, which actually generate the entire HTML form, or the standard object (not labeled as a wizard), which requires that you have a form already. Either method will generate all the necessary CFML code and can save you an enormous amount of time.

Flash Elements

All by its lonesome without any other icon friends is the Image Viewer object. The Image Viewer object is a nifty widget that allows you to create a Flash slide show quickly and easily in Dreamweaver without the need for having Flash installed. The object takes advantage of Flash vars (introduced in Flash MX), which can be edited directly in Code view or by using the Attributes panel of the Tag inspector.

Favorites

Rather than switching between categories in order to get to your most frequently used objects, you can designate them as "favorites" and access them in one spot. If you haven't added any favorites yet, you will see instructions on how to do so. The Customize Favorites dialog will allow you to add, remove, sort, and add separators between objects.

The Property Inspector

When you're working in Design view, the Property inspector is quite practical for modifying the underlying code of your page (Figure 2.35). As you select various elements and tags or position your cursor within them, the Property inspector for that specific item appears. For instance, if you select a layer, the Layer Property inspector displays the various attributes of the layer within form fields. Placing your cursor within a table cell in Design viewas long as you haven't selected another elementwill show the attributes of the <td> tag. You can add, edit, or remove the values presented, and Design view will update to reflect the code changes.

Figure 2.35. The Property inspector provides an interface to view and edit various aspects of the current element.

You can activate the Property inspector by selecting Window > Properties or by using the keyboard shortcut Control-F3 (Command-F3). To display a specific Property inspector for an element, either select the item in Design view, or place your cursor appropriately in code view.

TIP

Additional properties are sometimes available in the lower half of the Property inspector, so keep the Property inspector fully visible until you are familiar with the different inspectors. Once you are comfortable, use the expander arrow located in the lower right of the panel to decrease the Property inspector's height to half size.

Though many options are available for modifying an element's properties from within the Property inspector, sometimes a quick hand tweaking of the code is necessary. Use the Quick Tag editor to modify the tag of the current element without having to switch to Code view.

NOTE

If you don't see the pencil icon near the upper right corner of the Property inspector, the Quick Tag Editor is not available to the current selection.

The default text Property inspector is the one you're likely to use most often. Use it to apply HTML formatting such as paragraphs, headings, bold, italics, and other types to the selection in the document.

Many of the Property inspectors include a Styles list that is used to apply CSS (Cascading Style Sheets) classes, if there have been any defined. Similar to how word processing software automatically creates styles, Dreamweaver also offers this kind of functionality if you choose to use the Property inspector to select colors and other styling options. Styles that are created are automatically added to the Styles list and given a generic name that you will most likely choose to rename using the Rename option in the Styles list. You can also choose Manage Styles in the Styles list to edit or remove any of the listed class.

Though you may be inclined to choose the folder icon to browse for files, Dreamweaver offers a handy alternative known as the point-to-file icon. Click and drag from the point-to-file icon to the file listed in the Files panel. This will add the file path to the field adjacent to the icon. The point-to-file system can also be used to create links to named anchors, by pointing to the little yellow shield representing named anchors in Design view.