Dreamweaver Design Notes

Create a New Site Definition

Design Notes
The Design Notes feature will let you attach notes to individual files that are shared among team members. You can turn sharing of Design Notes off, but we'll assume you will share Design Notes with other developers. Design Notes will not be visible to those who view your Web site.

Dreamweaver creates special "_notes" directories to hold all of the individual notes in your defined site. These _notes directories are not visible while you are in Dreamweaver, but you can see them if you browse through your site files. Each design note is named for the file it's attached to and ends with .mno. When you turn on Upload Design Notes for Sharing in your site definition, Dreamweaver uploads or downloads design notes when the file the design note describes is uploaded or downloaded.

Attach Design Notes to Files
There are a couple of ways to attach Design Notes to files in Dreamweaver. One way is to right-click (Command-click on the Mac) on a file in the Site window to bring up the context menu as shown in Figure 3.1. Select the Design Notes command to open the Design Notes dialog box. You can also add notes using the Design Notes command from the File menu in either the Document window or the Site window.

Figure 3.1
The context menu in Dreamweaver's Site window includes the command you use to add a design note.

The Design Notes dialog box (Figure 3.2) allows you to add a simple design note to any file in your site.

To open a design note using the Design Notes dialog box:

1. With the Basic Info tab selected (the default), drop down the Status menu and select Needs Attention from the preloaded list.
   
   
2. Click on the small calendar icon to add today's date to the Notes field.
   
   
3. Type a note next to the date.
   
   
4. Check the Show When File Is Opened checkbox at the bottom of the dialog box.
   
   
5. Select the OK button when you are finished to save the note. This design note will automatically open the next time the file is opened.
   

Figure 3.2
Set up a design note by selecting status and adding a note. You can also check the Show When File Is Opened checkbox.

When a design note is attached to a file, you'll see a little yellow icon appear next to the file name in the site files listing. Double-click the yellow design note icon to view, edit, or add a note.

TIP: When you import Fireworks files into Dreamweaver, Fireworks automatically adds design notes to the files. These design notes do not display design note icons next to the files. You may see these design notes if you peek at the _notes folder or when you open design notes on a file and see that notes already exist. These notes help Dreamweaver exchange information with Fireworks regarding the Fireworks source files, so it's a good idea to leave them alone.

You just used the preloaded status notes available in the Basic Info tab. The All Info tab enables creation of your own design notes categories. Add a design note to another file in your site, selecting the All Info tab. This view enables you to create multiple name and value records attached to the file.

The name and value pairs you create are listed in the Info field. Place your cursor in the Name field and enter Dev_Name. Move to the Value field and enter your name. Use the plus button to add additional records or the minus button to remove records. Your new design note appears in the Info field as shown in Figure 3.3.

Figure 3.3
The All Info tab in Design Notes enables you to create custom design notes.

Modify File View Columns to View Design Notes
Dreamweaver lets you modify the columns displayed in your Site window. You examined the column definitions when you set up your site earlier in this chapter. Now you'll edit the site definition, adding a new column displaying the Dev_Name design note you just created.

To add a new column to the file view:

1. Select the Define Sites command from either the Site menu or the Site drop-down menu.
   
   
2. Select the Online Learning App site that you just defined and click the Edit button.
   
   
3. Select the File View Columns category in the Site Definition dialog box. You will see a list of built-in columns that come with Dreamweaver or UltraDev.
   
   
4. Click the plus button above the column list. A new personal column definition is created that you can edit. Enter Developer as the Column Name and enter Dev_Name in the Associate with Design Note field. You can also select an alignment setting.
   
   
5. Check the Enable Column Sharing checkbox at the top of the dialog box. There is a file in the _notes directory called dwSiteColumnsME.xml that contains the columns definition. This file will be shared with others on your team so that you all have the same custom column definitions.

After you've saved your changes to the site definition, note that a new column appears in the Site window as shown in Figure 3.4. This column should display the contents of your design note. Also, note that the design note icon is no longer beside the file. The design note icon doesn't appear if the note is displayed in a column.

Figure 3.4
The Site window with a new custom column displaying the contents of a design note.

You should practice adding design notes to the files in your site. Add design notes in the preloaded status notes in the Basic Info tab and more custom Dev_Name notes in the All Info tab. Make sure your custom notes appear in the custom column that you just created.